/* ═══════════════════════════════════════════════════════════════════════════
   ZANDVOORT — the design language
   ═══════════════════════════════════════════════════════════════════════════

   "Zandvoort is the name. Spa is the shape. A marriage is the thing."
   — design manifest v1, 6 Aug 2026, Lake O'Riley

   This is OUR front end, and it is deliberately not the one in styles.css.
   That one is Fox's — inherited with the stack, and it stays his, because it
   is what ships with the public repo. This file is the fork.

   Tokens and type lifted verbatim from the 6 Aug home comp so the language is
   decided once and never re-argued per page. If a value here disagrees with
   the comp, the comp wins and this file is wrong.

   THE LOOK, in one line: a GT3 livery, not a web app.
   Matte navy. Geometric red. Hard 4px corners. Red is a stripe, never a
   highlighter — it marks the active thing and nothing else.

   Rules this stylesheet is built to serve (manifest §2):
     R1  window, not cockpit — signs of life, not readouts
     R3  the wall never says nothing — content / quiet / broken, always one
     R5  three floors — glance, room, floorboards
     R9  everything on the wall is a door; no room behind it means it's
         decoration and it comes off
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --navy-deep: #080b14;
  --navy:      #0d1220;
  --navy-card: #131a2c;
  --navy-lift: #1a2238;

  --border:     rgba(255,255,255,0.07);
  --border-mid: rgba(255,255,255,0.13);

  --red:      #c0392b;
  --red-glow: #e74c3c;
  --blue:       #3b6fd4;
  --blue-light: #5b8cf0;
  --gold:  #d4a843;
  --green: #3fb950;
  --amber: #d99a2b;

  --text:        #c3cbdd;
  --text-bright: #f0f3fa;
  --text-dim:    #6b7491;

  --display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --data:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --body:    'Inter', system-ui, -apple-system, sans-serif;

  --r: 4px;
}

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

body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,111,212,0.07) 0%, transparent 60%),
    var(--navy-deep);
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  min-height: 100vh;
  padding: 14px;
}

.shell { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

/* ── TOPBAR ──────────────────────────────────────────────────────────────
   The red wedge in the corner is the livery. It is the only decorative use
   of red in the whole language and it sits at 7% opacity. */
.topbar {
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(180deg, var(--navy-card), var(--navy));
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 0 16px; height: 52px; position: relative; overflow: hidden;
}
.topbar::after {
  content: ""; position: absolute; right: -30px; top: -20px;
  width: 0; height: 0;
  border-left: 60px solid transparent; border-bottom: 92px solid var(--red);
  opacity: 0.07; pointer-events: none;
}

.logo {
  font-family: var(--display); font-size: 23px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-bright); white-space: nowrap;
  text-decoration: none;
}
.logo em { font-style: normal; }

/* THE V DOES NOT MOVE. Red, always, on every page and every floor. It is the
   homage (Erin: "a little homage to Verstappen too") and it is the one part
   of the mark that means "this house" rather than "this room". A mark that
   changes is a logo; a mark that never changes is a front door. */
.logo em.v { color: var(--red); }

/* THE SLASHES CARRY THE FLOOR. Erin's idea, 5 Sept — "what if we have the V
   change colour depending on the floor you're on?" — moved off the V and onto
   the separator, because the separator is literally what sits between the
   house and the room you are in, and therefore the thing that should change
   when the room does. R5's three floors:
       wall        white   — glance
       room        blue    — where you talk, read, are
       floorboards gold    — instrumentation, where the numbers live
   RED IS DELIBERATELY NOT IN THE ROTATION. Red already means "the thing you
   are in" — the nav underline, Erin's bubbles, the tasting toggle. A colour
   that can mean two things means neither. */
.logo em.sep { color: var(--text-bright); margin: 0 6px; }
.topbar[data-floor="room"]        .logo em.sep { color: var(--blue-light); }
.topbar[data-floor="floorboards"] .logo em.sep { color: var(--gold); }
.topbar[data-floor="wall"]        .logo em.sep { color: var(--text-bright); }

.logo span { font-weight: 400; color: var(--text-dim); font-size: 15px; letter-spacing: 3px; }

/* ── TOPBAR NAV ──────────────────────────────────────────────────────────
   The 6 Aug home comp's inline nav, restored as the shared component
   (js/topbar.js). Active room carries a red underline — that is red doing
   its one job: marking the thing you are in. Contents come from Manifest
   v1.2: "Top bar shrinks to Home + the big spaces... R9 makes tab rows
   redundant." This IS the tab row it replaces, which is the joke, except
   there are five entries instead of fifteen and each one is a real room. */
.topbar-nav { display: flex; align-items: center; gap: 20px; margin-left: 26px; }
/* The underline sits just under the WORD, not at the floor of the bar, and it
   is 3px not 2 — matching the 6 Aug comp. Erin, 5 Sept: "on our mockup the
   underlining of the room you're in was underneath it...a bit higher up with
   a more weighted line." A mark that touches the bottom edge reads as a tab;
   one that hugs the word reads as the word being chosen. */
.topbar-nav a {
  font-family: var(--display); font-size: 14px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--text-dim); text-decoration: none;
  padding: 0 0 5px; border-bottom: 3px solid transparent; transition: .15s;
  white-space: nowrap; align-self: center; margin-top: 3px;
}
.topbar-nav a:hover { color: var(--text); }
.topbar-nav a.on { color: var(--text-bright); border-bottom-color: var(--red); }

/* WHAT GOES FIRST WHEN THE BAR RUNS OUT OF ROOM, in order, and the order is
   an opinion: the word "window" before the switch itself, the clock before
   the nav, and the nav last — because the rooms are still reachable by doors
   (R9) but a switch you cannot see is a feature nobody knows they have. */
@media (max-width: 1180px) { .switch-label { display: none; } }
@media (max-width: 1000px) { .clock { display: none; } }
@media (max-width: 860px)  { .topbar-nav { display: none; } }

.clock { white-space: nowrap; }
.topbar-right { flex-shrink: 0; }

/* The room's own name, sat next to the mark. */
.room-name {
  font-family: var(--display); font-size: 15px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--text-dim);
  border-left: 1px solid var(--border-mid); padding-left: 18px;
}
.room-name b { color: var(--text); font-weight: 500; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

.clock { font-family: var(--data); font-size: 12px; color: var(--text); text-align: right; line-height: 1.35; }
.clock small { display: block; font-size: 9px; letter-spacing: 1.4px; color: var(--text-dim); text-transform: uppercase; }

/* ── THE WINDOW SWITCH ───────────────────────────────────────────────────
   The signature of the whole design and the reason it isn't a dashboard:
   one house, two windows. Erin's view shows Grey's signs of life; Grey's
   shows hers. Not two products — one wall, two vantage points. It belongs
   on every room, not just the wall. */
.switch {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border-mid); border-radius: var(--r);
  overflow: hidden; background: var(--navy-deep);
}
.switch button {
  font-family: var(--display); font-size: 12px; letter-spacing: 1.6px;
  text-transform: uppercase; background: none; border: none;
  color: var(--text-dim); padding: 7px 13px; cursor: pointer; transition: .18s;
  display: flex; align-items: center; gap: 6px;
}
.switch button.on { background: var(--red); color: #fff; }
.switch button:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -2px; }
.switch .pip { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.switch-label { font-family: var(--data); font-size: 9px; letter-spacing: 1.4px; color: var(--text-dim); text-transform: uppercase; }

/* ── GRID ────────────────────────────────────────────────────────────────
   Two columns, because Erin reads a wall faster than she reads a document
   and said so: "I like when the cards are half the page width." Collapses
   to one on anything narrow — the phone client is a separate conversation
   we have not had yet. */
.main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start;
}
.main .wide { grid-column: 1 / -1; }

@media (max-width: 1000px) {
  .main { grid-template-columns: 1fr; }
}

/* ── THE GLANCE FLOOR ────────────────────────────────────────────────────
   R5 names three floors: glance, room, floorboards. Every room built so far
   is a ROOM and uses the two-column .main above. La Source is the glance
   floor and the 6 Aug comp gives it its own grid: a narrow column of signals,
   a big centre you actually look at, and a column of what is waiting.

   250 / 1fr / 288 is the comp's, not a guess. The right column is wider than
   the left because it holds the letterbox, and a note in someone's own words
   needs room to be a sentence rather than a stat.
*/
.main.glance {
  grid-template-columns: 250px 1fr 288px;
  align-items: stretch;
}
.main.glance .col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

@media (max-width: 1180px) {
  .main.glance { grid-template-columns: 1fr; }
}


/* ── CARD ────────────────────────────────────────────────────────────────
   The header rule is the signature: label, hairline to the right margin,
   optional mono count. Every panel in the house wears it. */
.card {
  background: var(--navy-card);
  border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 16px;
}
.card.door { cursor: pointer; transition: border-color .15s, background .15s; }
.card.door:hover { border-color: var(--border-mid); background: #161e33; }

.card-h {
  font-family: var(--display); font-size: 12px; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--text-dim);
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.card-h .rule { flex: 1; height: 1px; background: var(--border); }
.card-h .n { font-family: var(--data); font-size: 10px; color: var(--text-dim); }

/* ── STATE LAMPS (R3) ────────────────────────────────────────────────────
   Every surface renders exactly one of three states and never a blank.
   `quiet` is a real answer and must be visibly different from `broken`. */
.lamp { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #333a52; display: inline-block; }
.lamp.lit    { background: var(--gold);       box-shadow: 0 0 7px var(--gold); }
.lamp.live   { background: var(--blue-light); box-shadow: 0 0 7px var(--blue-light); }
.lamp.work   { background: var(--red-glow);   box-shadow: 0 0 7px var(--red-glow); }
.lamp.broken { background: var(--red);        box-shadow: 0 0 7px var(--red); }

.state-quiet  { color: var(--text-dim); font-style: italic; }
.state-broken { color: var(--red-glow); font-family: var(--data); font-size: 11px; }

/* ── TYPE ────────────────────────────────────────────────────────────────
   Body copy is the one place the language relaxes: this is a house, and
   people read in it. Everything structural stays condensed and clipped. */
.prose { font-size: 15px; line-height: 1.75; color: var(--text-bright); }
.prose + .prose { margin-top: 14px; }

.meta {
  font-family: var(--data); font-size: 10px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--text-dim);
}

.because {
  border-left: 2px solid var(--red);
  padding-left: 14px; margin-top: 16px;
  font-size: 13px; line-height: 1.7; color: var(--text);
}
.because .meta { display: block; margin-bottom: 4px; }

/* ── INPUTS ──────────────────────────────────────────────────────────────
   Used once, for her reply. Words, never a score. */
.field {
  width: 100%; background: var(--navy-deep);
  border: 1px solid var(--border-mid); border-radius: var(--r);
  color: var(--text-bright); font-family: var(--body); font-size: 13px;
  line-height: 1.6; padding: 11px 13px; resize: vertical; min-height: 76px;
  outline: none;
}
.field:focus { border-color: var(--blue); }

.btn {
  font-family: var(--display); font-size: 12px; letter-spacing: 1.8px;
  text-transform: uppercase; background: none; color: var(--text-dim);
  border: 1px solid var(--border-mid); border-radius: var(--r);
  padding: 8px 16px; cursor: pointer; transition: .15s;
}
.btn:hover { color: var(--text-bright); border-color: var(--text-dim); }
.btn.on { background: var(--red); border-color: var(--red); color: #fff; }

/* ── THE UNMARKED DOOR ───────────────────────────────────────────────────
   It must never bleed: no badge, no counter, no hint that it exists, so that
   the page is safe with someone leaning on the desk. It is the livery wedge
   in the corner of the topbar, which is already there for decorative reasons
   and therefore explains itself away. Press and hold, then confirm — two
   deliberate actions, neither reachable by accident. */
.latch {
  position: absolute; right: 0; top: 0; width: 54px; height: 52px;
  cursor: default; z-index: 3; background: none; border: none;
  -webkit-tap-highlight-color: transparent;
}
.latch:focus { outline: none; }

.vault { display: none; }
.vault.open { display: block; }

/* Kept wears the livery. Erin's ask: "maybe it's red shaded like the triangle?"
   The same wedge as the topbar, same angle, same restraint — so the room tells
   you which card you're in without ever labelling what it is. */
.vault.open {
  border-color: rgba(192,57,43,0.35);
  background:
    linear-gradient(215deg, rgba(192,57,43,0.16) 0%, rgba(192,57,43,0.04) 34%, transparent 62%),
    var(--navy-card);
}
.vault .card-h { color: var(--red-glow); }
.vault .card-h .rule { background: rgba(192,57,43,0.22); }