/* VARA5 Editorial Luxury — per DESIGN.md. Sharp corners, 1px strokes,
   Playfair Display display type + Inter body, tonal layering, no shadows. */

:root, [data-theme="light"] {
  --surface: #faf9f9;
  --surface-low: #f4f3f3;
  --surface-container: #efeded;
  --surface-high: #e9e8e8;
  --surface-lowest: #ffffff;
  --on-surface: #1b1c1c;
  --on-surface-variant: #444748;
  --outline: #c4c7c7;
  --outline-strong: #747878;
  --primary: #000000;
  --on-primary: #ffffff;
  --bronze: #97806b;
  --bronze-strong: #564331;
  --green: #1d6b40;
  --green-bg: #e7f2ea;
  --red: #ba1a1a;
  --red-bg: #ffdad6;
  --site-bg: #1c1b1b;
  --site-fg: #ffffff;
}
[data-theme="dark"] {
  --surface: #131414;
  --surface-low: #1b1c1c;
  --surface-container: #202222;
  --surface-high: #272929;
  --surface-lowest: #0e0f0f;
  --on-surface: #f2f0f0;
  --on-surface-variant: #b8bcbc;
  --outline: #3a3d3d;
  --outline-strong: #747878;
  --primary: #f2f0f0;
  --on-primary: #131414;
  --bronze: #ddc2aa;
  --bronze-strong: #fadec5;
  --green: #7fd39d;
  --green-bg: #14301f;
  --red: #ffb4ab;
  --red-bg: #3a1210;
  --site-bg: #f2f0f0;
  --site-fg: #131414;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* subtle scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: var(--outline) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 0; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--outline-strong); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
body {
  background: var(--surface);
  color: var(--on-surface);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
a { color: inherit; }

.label-caps {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* ---------- top bar ---------- */
header.topbar {
  display: flex; align-items: baseline; gap: 24px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--outline);
}
.brand { font-family: "Playfair Display", serif; font-size: 30px; font-weight: 400; letter-spacing: -0.01em; margin: 0; }
.tagline { color: var(--on-surface-variant); font-size: 13px; }
.topbar .spacer { flex: 1; }
.top-controls { display: flex; gap: 12px; align-items: center; }
select, .btn-outline, .btn-primary {
  font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 0; cursor: pointer;
}
select { background: var(--surface-lowest); color: var(--on-surface); border: 1px solid var(--outline-strong); }
.btn-outline { background: transparent; color: var(--on-surface); border: 1px solid var(--outline-strong); }
.btn-outline:hover { border-color: var(--bronze-strong); color: var(--bronze-strong); }
.btn-primary { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); }
.btn-primary:hover { background: var(--bronze-strong); border-color: var(--bronze-strong); }

/* ---------- picker ---------- */
#picker { max-width: 720px; margin: 96px auto; padding: 48px 64px; border: 1px solid var(--outline); background: var(--surface-low); text-align: center; }
#picker.hidden { display: none; }
#picker h2 { font-family: "Playfair Display", serif; font-weight: 400; font-size: 28px; margin: 0 0 12px; }
#picker p { color: var(--on-surface-variant); font-size: 14px; }
#folderInput { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
label.btn-outline { display: inline-block; text-decoration: none; }

/* ---------- layout: table owns the whole viewport ---------- */
main { padding: 0 24px 16px; }
@media (max-width: 900px) { header.topbar, main { padding-left: 12px; padding-right: 12px; } }
.landing { padding-top: 32px; max-width: 1440px; margin: 0 auto; }

/* floating control bar */
.floatbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  background: var(--surface);
  padding: 12px 0;
  border-bottom: 1px solid var(--outline);
}
.floatbar .crumbs, .floatbar .controls, .floatbar .legend { margin: 0; }

/* ---------- landing cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
.card {
  border: 1px solid var(--outline); background: var(--surface-lowest);
  padding: 28px 28px 24px; cursor: pointer;
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--bronze-strong); }
.card-city { margin-bottom: 10px; }
.card-name { font-family: "Playfair Display", serif; font-weight: 400; font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
.card-meta { font-size: 13px; color: var(--on-surface-variant); }

/* ---------- hotel view ---------- */
.crumbs { font-size: 14px; margin-bottom: 24px; color: var(--on-surface-variant); }
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--outline-strong); }
.crumbs a:hover { color: var(--bronze-strong); border-color: var(--bronze-strong); }
.crumbs strong { color: var(--on-surface); font-weight: 600; }

.controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--outline-strong); }
.seg button {
  background: transparent; color: var(--on-surface-variant); border: none; border-right: 1px solid var(--outline-strong);
  padding: 8px 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--primary); color: var(--on-primary); }
.legend { margin: 0 0 16px; }
.legend .delta { text-transform: none; letter-spacing: 0; }

/* ---------- matrix ---------- */
.matrix-wrap {
  overflow: auto; border: 1px solid var(--outline); background: var(--surface-lowest);
  height: calc(100vh - 205px); min-height: 420px; margin-top: 12px;
}
table.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.matrix thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-container); color: var(--on-surface);
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--outline-strong);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.matrix .rowhead-th, .matrix .rowhead, .matrix .room-band-label {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-low);
  min-width: 210px; max-width: 260px;
  box-shadow: 1px 0 0 var(--outline);
}
.matrix thead .rowhead-th { z-index: 5; background: var(--surface-container); }
.matrix .room-band-label { z-index: 3; }
.src-link { text-decoration: none; color: var(--bronze-strong); font-size: 13px; margin-left: 2px; }
.src-link:hover { color: var(--bronze); }

.room-band td { border-bottom: 1px solid var(--outline); padding: 0; }
.room-band-label {
  font-family: "Playfair Display", serif; font-size: 18px; font-weight: 400;
  padding: 14px 14px 8px; vertical-align: bottom;
}
.room-band-fill { background: var(--surface-low); padding: 14px 0 8px; }
.rate-row td { border-bottom: 1px solid var(--outline); vertical-align: top; padding: 10px 14px; }
.rowhead .row-sub { font-size: 12px; font-weight: 600; color: var(--on-surface-variant); letter-spacing: 0.03em; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* unmatched rows */
.band-unm td { color: var(--red); font-size: 16px; }
.band-note { font-family: "Inter", sans-serif; font-size: 11px; color: var(--on-surface-variant); }
.row-unm .rowhead .row-sub { font-weight: 400; font-style: italic; }
.pop-dup { font-size: 10px; font-weight: 600; color: var(--on-surface-variant); border: 1px solid var(--outline); padding: 0 5px; letter-spacing: 0.05em; }
td.empty { color: var(--outline-strong); text-align: center; }

td.cell { position: relative; min-width: 150px; }
.pline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.pval { font-weight: 600; font-size: 14px; }
.ptag { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 1px 5px; border: 1px solid transparent; }
.ptag-ref { color: var(--green); background: var(--green-bg); }
.ptag-non { color: var(--red); background: var(--red-bg); }
.ptag-unk { color: var(--on-surface-variant); border-color: var(--outline); }
.delta { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 11px; font-weight: 600; line-height: 1.35; }
.delta-amt { white-space: nowrap; }
.delta-pct { white-space: nowrap; font-weight: 700; }
.delta-base { white-space: nowrap; color: var(--on-surface-variant); font-weight: 500; }
.delta.down, .delta.down .delta-pct { color: var(--green); }
.delta.up, .delta.up .delta-pct { color: var(--red); }
.delta.same { color: var(--on-surface-variant); }
.star { color: var(--bronze-strong); cursor: help; }
.rate-count { display: block; font-size: 10px; color: var(--on-surface-variant); margin-top: 2px; }

/* popover — positioned by JS to stay inside matrix-wrap */
.popover {
  display: none; position: fixed; z-index: 30;
  min-width: 300px; max-width: min(460px, calc(100vw - 24px)); max-height: min(340px, 50vh); overflow: auto;
  background: var(--surface-lowest); border: 1px solid var(--outline-strong);
  padding: 14px 16px; pointer-events: none;
}
.popover.popover-open { display: block; }
.pop-title { font-weight: 600; font-size: 13px; margin-bottom: 10px; border-bottom: 1px solid var(--outline); padding-bottom: 8px; }
.pop-rate { padding: 8px 0; border-bottom: 1px solid var(--outline); }
.pop-rate:last-child { border-bottom: none; }
.pop-price { font-weight: 600; }
.pop-cur { color: var(--on-surface-variant); font-weight: 400; font-size: 11px; }
.pop-name { font-size: 12px; color: var(--on-surface-variant); }
.pop-perks { font-size: 11px; color: var(--bronze-strong); margin-top: 2px; }
.pop-canc { font-size: 11px; color: var(--on-surface-variant); margin-top: 2px; }
.pop-tags { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }

.chip { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--outline); color: var(--on-surface-variant); }
.chip-ref { color: var(--green); border-color: var(--green); }
.chip-non { color: var(--red); border-color: var(--red); }
.chip-site { background: var(--site-bg); color: var(--site-fg); border-color: var(--site-bg); }

/* unmatched */
.unmatched { margin-top: 20px; border: 1px solid var(--outline); padding: 12px 16px; background: var(--surface-low); font-size: 13px; }
.unmatched summary { cursor: pointer; font-weight: 600; }
.unm-line { padding: 4px 0; display: flex; gap: 8px; align-items: baseline; }

/* ---------- audit modal ---------- */
#modal { display: none; position: fixed; inset: 0; background: rgba(20,20,20,.45); z-index: 50; padding: 6vh 6vw; }
#modal.open { display: block; }
.modal-box { background: var(--surface); border: 1px solid var(--outline-strong); max-height: 88vh; display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 28px; border-bottom: 1px solid var(--outline); }
.modal-head h3 { font-family: "Playfair Display", serif; font-weight: 400; font-size: 22px; margin: 0; }
.modal-note { padding: 12px 28px 0; color: var(--on-surface-variant); font-size: 13px; margin: 0; }
.modal-scroll { overflow: auto; padding: 16px 28px 28px; }
table.audit { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.audit th { text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); border-bottom: 1px solid var(--outline-strong); padding: 8px 10px; position: sticky; top: 0; background: var(--surface); }
table.audit td { border-bottom: 1px solid var(--outline); padding: 7px 10px; vertical-align: top; }
tr.aud-unm td { color: var(--red); }

/* ---------- footer ---------- */
footer { padding: 12px 24px 20px; color: var(--on-surface-variant); font-size: 12px; border-top: 1px solid var(--outline); }
.foot-skip { display: inline-block; }
.foot-skip summary { cursor: pointer; }