/* door.css — B1-DOOR. Scoped to what door.html actually uses: nav, buttons,
   the flights list, the segmented language control, the "playing now" card,
   skeletons, footer. Tokens, fonts and the contrast/spacing math are copied
   from the vetted source, not re-derived — see each block's own note.

   ⚠️ SOURCE OF THESE TOKENS: docs/ПРОТОТИП-V1/assets/proto.css, itself pulled
   from src/client/style.css "nothing invented" (that file's own header). The
   contrast ratios named below (button border 3:1, text 6.4:1, etc.) were
   measured there, not here — reusing the exact hex values is what keeps
   those numbers true without re-measuring them.

   ⚠️ THIS FILE IS DELIBERATELY NOT THE WHOLE OF proto.css. Seats, gestures,
   the memory trainer, paywalls, pricing tables and auth forms belong to
   OTHER v1 screens; copying them here would be dead weight on this page's
   critical path (the CONTRACT's own "0 external requests" budget is about
   third-party hosts, but a screen still pays in bytes for its own CSS).
   ⚠️ WHEN src/client/v1/ grows a shared shell.css (B1-SHELL), the nav/footer/
   token block below is the part to delete in favour of it — this file was
   written so that swap is a deletion, not a rewrite: nothing past the
   "── door-specific ──" marker depends on the shell block above it. */

/* FONT-CYRILLIC (owner, 25.09.2026) — this block was a stale, hand-written
   copy from before shell.css existed: relative URLs, no `unicode-range` at
   all, and (accidentally, since it predates BUG-92's fix elsewhere) it had
   already kept `font-display:swap` — which turned out to be the setting
   this whole ticket ended up putting back everywhere else. Harmless for
   glyph coverage either way (the underlying /fonts/*.woff2 files already
   carry Latin+Cyrillic+Ukrainian — see style.css's "CM fonts" comment), but
   door.html — now the site's actual `/`, ROOT-TO-V1 (25.09) — shipped it
   with zero `<link rel=preload>`, so on a slow connection it paid `swap`'s
   one-time flash on every cold load. Byte-identical to shell.css's block
   now (same `swap`, same unicode-range, same absolute /fonts/ paths — see
   style.css's @font-face comment for the measured reason `swap` beats
   `optional`), plus door.html now preloads the four faces it actually uses.
   Two copies of the same six rules are still two places for THIS to drift
   again; the real fix (one shared block) is shell.css absorbing door.css
   per the B1-SHELL note above, not tracked here. */
@font-face{
  font-family:'Lato'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/lato-400.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030,U+2039-203A,U+2044,U+20AC,U+2116,U+2122,U+2212,U+FEFF,U+0400-045F,U+0490-0491;
}
@font-face{
  font-family:'Lato'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/lato-600.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030,U+2039-203A,U+2044,U+20AC,U+2116,U+2122,U+2212,U+FEFF,U+0400-045F,U+0490-0491;
}
@font-face{
  font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/lato-700.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030,U+2039-203A,U+2044,U+20AC,U+2116,U+2122,U+2212,U+FEFF,U+0400-045F,U+0490-0491;
}
@font-face{
  font-family:'Bitter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/fonts/bitter-600.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030,U+2039-203A,U+2044,U+20AC,U+2116,U+2122,U+2212,U+FEFF,U+0400-045F,U+0490-0491;
}
@font-face{
  font-family:'Bitter'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/bitter-700.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2027,U+2030,U+2039-203A,U+2044,U+20AC,U+2116,U+2122,U+2212,U+FEFF,U+0400-045F,U+0490-0491;
}
@font-face{
  font-family:'Cinzel'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/cinzel-700.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF;
}

:root{
  --wood:#1A1310; --wood-2:#221913; --wood-3:#2C211A; --wood-4:#3A2C22;
  --edge:#3E2F24; --edge-2:#2A1F18;
  --panel:linear-gradient(180deg,#241A14,var(--wood));
  --bone:#EFE7D8; --bone-2:#B3A692; --bone-3:#A2957F; --bone-4:#9C8F79;
  --brass:#C9A227; --brass-2:#A08320; --brass-dim:#332912;
  --blood:#B4262C; --blood-text:#D66E72;
  --card:5px;
  --lift:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -14px rgba(0,0,0,.95);
  --w-page:1120px;
  --tap:44px;                 /* WCAG 2.5.8 AA floor, manifest §b8 */
}
*{box-sizing:border-box}
html{height:auto;min-height:100%;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--wood);color:var(--bone);
  font:16px/1.55 Lato,system-ui,sans-serif;
  background-image:radial-gradient(120% 70% at 50% -10%,#2A1F17 0%,var(--wood) 60%);background-repeat:no-repeat}
body>main{flex:1 0 auto}
h1,h2,h3{font-family:Bitter,Georgia,serif;font-weight:700;margin:0 0 8px;line-height:1.25}
h1{font-size:19px;max-width:34ch}  /* door.h1 carries the value line, not a repeated brand mark */
h2{font-size:16px}
p{margin:0 0 8px}
a{color:var(--bone);text-underline-offset:3px}
.quiet{color:var(--bone-3);font-size:14px}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:3px}
.hidden{display:none!important}
.mb0{margin-bottom:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--wood-3);color:var(--bone);
  display:inline-flex;align-items:center;min-height:var(--tap);padding:8px 16px;z-index:60}
.skip:focus{left:8px;top:8px}

/* ── BETA-BADGE — identical rules to assets/shell.css's own block (that
   file's comment has the full reasoning: in-flow first child of <body>,
   not fixed, 8px/4px grid, not red). Duplicated rather than linked because
   door.html does not load shell.css yet (see this file's own header,
   "B1-SHELL replaces this block once merged") — door.js's own boot()
   mounts the same markup, reading the same `data-beta` attribute. */
.beta-banner{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  padding:8px 16px;background:var(--wood-3);border-bottom:1px solid var(--brass-2);
  color:var(--bone-2)}
.beta-pill{flex:0 0 auto;display:inline-flex;align-items:center;
  padding:4px 8px;border-radius:var(--card);border:1px solid var(--brass);
  color:var(--brass);font:700 12px Lato,sans-serif;letter-spacing:.04em;white-space:nowrap}
.beta-msg{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.beta-x{flex:0 0 auto;width:28px;height:28px;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;border:0;border-radius:3px;
  color:var(--bone-2);font-size:18px;line-height:1;cursor:pointer}
.beta-x:hover,.beta-x:focus-visible{color:var(--bone);background:var(--wood-4)}

/* ── nav / footer (B1-SHELL replaces this block once merged) ────────────── */
.site-nav{position:sticky;top:0;z-index:30;background:#1B1410;border-bottom:1px solid var(--edge-2)}
.site-nav-in{max-width:var(--w-page);margin:0 auto;padding:0 16px;min-height:56px;display:flex;align-items:center;gap:10px}
.nav-mark{font-family:Cinzel,Georgia,serif;font-size:19px;letter-spacing:.14em;color:var(--brass);
  text-decoration:none;display:flex;align-items:center;min-height:var(--tap);padding:0 2px}
.nav-spacer{flex:1 1 auto}
/* min-width, not just min-height: v1-door-test.mjs §6 found this at 38×44
   when the account has no name yet to widen it (navMeName is empty) — the
   emoji glyph alone is narrower than the 44px floor. */
.nav-me{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);
  min-width:var(--tap);color:var(--bone-3);font-size:14px;text-decoration:none;padding:0 6px;border-radius:3px}
.nav-me b{color:var(--bone);font-weight:600}
.site-foot{flex:0 0 auto;border-top:1px solid var(--edge-2);margin-top:32px;padding:16px 16px 24px; /* V1-REDS-1/item1: was 18px/28px, off the 8px grid */
  display:flex;gap:6px 18px;flex-wrap:wrap;align-items:center;max-width:var(--w-page);width:100%;margin:32px auto 0}
.site-foot a{color:var(--bone-3);font-size:14px;text-decoration:none;display:inline-flex;align-items:center;
  justify-content:center;min-height:var(--tap);min-width:44px;padding:0 6px}
.site-foot a:hover{color:var(--bone)}
.foot-lang{display:flex;gap:2px;align-items:center}
.foot-lang a[aria-current=true]{color:var(--bone);font-weight:700}
.foot-c{color:var(--bone-4);font-size:13px;margin-left:auto}

/* ── door-specific ─────────────────────────────────────────────────────── */
main{width:100%;max-width:var(--w-page);margin:0 auto;padding:40px 16px 0}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:8px 16px;border-radius:var(--card);border:1px solid var(--edge);
  background:var(--wood-3);color:var(--bone);font:600 16px/1.2 Lato,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--wood-4)}
.btn[aria-disabled=true]{opacity:.5;cursor:default}
/* ⛔ ONE RED BUTTON PER SCREEN (AI-MAFIA/CLAUDE.md locked 15). Border, not
   just fill: the fill alone is 2.84:1 against the page, under WCAG 1.4.11's
   3:1 floor for a component's edge; #D66E72 measures 5.5:1. White text on
   the fill measures 6.4:1 — both numbers are proto.css's own, reused as-is. */
.btn-red{background:var(--blood);border-color:var(--blood-text);color:#fff;font-weight:700}
.btn-red:hover{background:#C62D33}
.btn-ghost{background:transparent;border-color:var(--edge)}
.btn-wide{width:100%}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

.seg-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 8px} /* V1-REDS-1/item1: was 10px 0 8px */
.seg-row>.quiet{margin:0;flex:0 0 auto}
.seg{display:inline-flex;gap:4px;border:1px solid var(--edge);border-radius:var(--card);padding:4px;
  background:var(--wood-2);flex-wrap:wrap}
.seg button{min-height:var(--tap);min-width:56px;padding:8px 14px;border:1px solid transparent;border-radius:3px;
  background:transparent;color:var(--bone-2);font:600 15px Lato,sans-serif;cursor:pointer}
.seg button[aria-checked=true]{background:var(--wood-4);color:var(--bone);border-color:var(--brass-2)}
.seg button[aria-checked=true]::before{content:"\2713 ";color:var(--brass)} /* not colour alone — WCAG 1.4.1 */

.flights{display:grid;gap:8px;margin:6px 0}
.flight{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;background:var(--wood-2);
  border:1px solid var(--edge);border-radius:var(--card);padding:8px 10px;min-height:72px}
.flight-main{flex:1 1 auto;min-width:0}
.flight-when{font:700 16px/1.2 Bitter,Georgia,serif;color:var(--bone)}
.flight-seats{font-size:12.5px;line-height:1.35;color:var(--bone-2);margin-top:1px}
/* ⛔ NEVER remove the guard span — see door.mjs's header and RULE in
   _SERVICES/CLAUDE.md ("The door must not lie" / Competition Bureau, feature 44). */
.flight-guard{color:var(--bone-3)}
.flight-cta{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;gap:2px;max-width:152px}
.flight-cta .btn{padding:10px 10px;font-size:14px;text-align:center;line-height:1.2}
.flight-eta{font-size:12px;color:var(--bone-3);text-align:center;font-variant-numeric:tabular-nums}

.othertables{margin:8px 0 0} /* V1-REDS-1/item1: was 6px 0 0 */
.othertables summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;
  min-height:var(--tap);color:var(--bone-2);font-size:14px}
.othertables summary::-webkit-details-marker{display:none}
.othertables summary::before{content:'\25B8';color:var(--brass);display:inline-block;width:10px}
.othertables[open] summary::before{content:'\25BE'}
.othertables .flights{margin-top:6px}

.now-h{margin:0 0 8px;display:flex;align-items:center;gap:8px;font-family:Bitter,Georgia,serif;font-weight:700;
  font-size:16px;color:var(--bone)}
.now-h .status{display:inline-flex;align-items:center;gap:6px;font:400 14px/1 Lato,sans-serif;color:var(--bone-2)}
.now-h .dot{width:10px;height:10px;border-radius:50%;background:#5E9A62;flex:0 0 10px}
.now-h .dot.night{background:var(--brass)}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--card);padding:16px;box-shadow:var(--lift)}

.two{display:grid;gap:16px;margin-top:0} /* V1-REDS-1/item1: was 2px, off the 8px grid */
@media(min-width:900px){.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px}}

.rule{border:0;height:1px;margin:24px 0;
  background:linear-gradient(90deg,transparent,var(--brass-2) 12%,var(--brass) 50%,var(--brass-2) 88%,transparent)}

#redzone{margin-top:14px}

/* ── skeleton (manifest §2g) — same row height as .flight, so real content
   never changes the list's height when it lands: no CLS. ──────────────── */
.skel-row{height:72px;background:linear-gradient(90deg,var(--wood-2) 25%,var(--wood-3) 42%,var(--wood-2) 63%);
  background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:var(--card);border:1px solid var(--edge)}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.skel-row{animation:none;background:var(--wood-2)}}

/* BAT-FIX-3, 24.09 — same 8px-grid fix as shell.css's identical rule. */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:80;background:var(--wood-3);
  border:1px solid var(--brass-2);border-radius:var(--card);padding:8px 16px;color:var(--bone);
  box-shadow:var(--lift);max-width:min(92vw,420px)}

@media(max-width:389px){ main{padding-left:12px;padding-right:12px} }

/* ── reveal-once (locked decision 10, AI-MAFIA/CLAUDE.md): door-boot.js sets
   ONE of these two classes on <html> synchronously, before this page paints
   anything — so the browser never shows the wrong state and then swaps it.
   Until that script has run, BOTH states stay hidden rather than showing a
   guess (the `html:not(.signed-in):not(.signed-out)` rule below) — a page
   with no JS at all shows neither, which is honest, not broken: the door
   has nothing true to say about who is asking without it. */
html:not(.signed-in):not(.signed-out) .only-guest,
html:not(.signed-in):not(.signed-out) .only-account{display:none}
html.signed-in .only-guest{display:none}
html.signed-out .only-account{display:none}