/* Detour Live's shell (editions/detour, 17 Oct 2026): the departure board.
   Paper grey, black tiles with off-white letters, amber for the room's choice.
   Loaded by edition_head() after each page's own styles, so it overrides the
   shell's tokens (static/css/*.css :root) and nothing else.

   Scenario theme worlds are untouched: every rule is on a body WITHOUT a
   theme-* class (a themed phone or big screen keeps its world entirely), and
   inside :where() so the page's own states (the phone's dark mode,
   body[data-theme]) still win. The choice colours (A-H) stay: they are
   function, not brand. One exception, the console's top bar (below).

   The screens before a game, in one look (Simon, 18 Oct 2026): the start page
   and the solo menu are the night board, as in the brand mockup
   (docs/brand/detour/build_page.py); the console stays the light concourse.
   The scenario cards keep the storyboard's face in the brand's faces and the
   board's colours. RUN A GAME is the amber choice, solo the second. */

/* The brand's faces, bundled: nothing fetches a font at run time. Both under
   the SIL Open Font License 1.1 (fonts/*-OFL.txt), from github.com/google/fonts
   at 47d54ca (ofl/archivo, ofl/martianmono), 18 Oct 2026. The variable Archivo
   has a family name of its own, so the shell's static Archivo
   (static/vendor/fonts) is untouched; Martian Mono keeps its wide default. */
@font-face {
    font-family: 'Archivo Variable';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url('fonts/Archivo-Variable.ttf') format('truetype');
}
@font-face {
    font-family: 'Martian Mono';
    font-style: normal;
    font-weight: 100 800;
    font-stretch: 112.5%;
    font-display: swap;
    src: url('fonts/MartianMono-Variable.ttf') format('truetype');
}

/* Light surfaces: console, editor, PIN page, archives, join, phone. The
   console's top bar wears them under a scenario's theme too (Simon, 18 Oct:
   the scenario takes the console, the bar stays the shell). */
body:where(:not([class*="theme-"])),
.admin-topbar {
    --bg: #ecedef;
    --surface: #ffffff;
    --ink: #141518;
    --mut: #5a5e67;
    --faint: #80848c;
    --line: rgba(20, 21, 24, .11);
    --track: #dcdde0;
    --chip: #e3e4e7;
    --accent: #17181c;
    --accent-ink: #f5f3ec;
    --tint: #fff1c2;
    --solo: #f2b200;
    --dl-spark: #f2b200;
    --dl-paper: #ecedef;
    /* the aliases, re-pointed here: :root resolved them to its own values */
    --primary: var(--accent);
    --primary-dim: var(--tint);
    --bg-body: var(--bg);
    --bg-sidebar: var(--surface);
    --bg-card: var(--surface);
    --bg-input: var(--bg);
    --bg-dark: var(--bg);
    --bg-panel: var(--surface);
    --text-primary: var(--ink);
    --text-secondary: var(--mut);
    --text-dim: var(--faint);
    --border: var(--line);
    /* the brand's faces: names and flaps, then codes, times and counts */
    --dl-sans: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
    --dl-mono: 'Martian Mono', Consolas, monospace;
}
body:where(:not([class*="theme-"])) {
    /* the scenario cards (scenario_cards.css): the storyboard's face in the
       brand's faces, the slate a strip of the board */
    --sc-font-label: var(--dl-sans);
    --sc-label-weight: 700;
    --sc-kicker-size: 11px;
    --sc-kicker-track: .16em;
    --sc-k-size: 10.5px;
    --sc-k-track: .16em;
    --sc-font-title: var(--dl-sans);
    --sc-title-stretch: 75%;
    --sc-title-size: 30px;
    --sc-title-track: .03em;
    --sc-font-tagline: var(--dl-sans);
    --sc-tagline-style: normal;
    --sc-font-num: var(--dl-mono);
    --sc-num-weight: 600;
    --sc-num-size: 17px;
    --sc-slate-bg: #17181c;
    --sc-slate-line: #17181c;
    --sc-slate-rule: #2f3136;
    --sc-slate-ink: #f5f3ec;
    --sc-slate-muted: #9a9da5;
    /* the PIN card (admin.css): on the board, no glow, no scanlines */
    --auth-backdrop: rgba(11, 12, 14, .97);
    --auth-glow: 0 0 0 transparent;
    --auth-scanlines: none;
}

/* Dark surfaces: the big screen, the remote. */
body.surface-display:where(:not([class*="theme-"])),
body.remote-body:where(:not([class*="theme-"])) {
    --bg: #0b0c0e;
    --surface: #17181c;
    --ink: #f2f0ea;
    --mut: #9a9da5;
    --faint: #6f727a;
    --line: rgba(242, 240, 234, .09);
    --track: #26272d;
    --chip: #26272d;
    --accent: #ffc21a;
    --accent-ink: #141518;
    --tint: rgba(255, 194, 26, .14);
    /* the aliases, re-pointed here: :root resolved them to its own values */
    --primary: var(--accent);
    --primary-dim: var(--tint);
    --bg-body: var(--bg);
    --bg-sidebar: var(--surface);
    --bg-card: var(--surface);
    --bg-input: var(--bg);
    --bg-dark: var(--bg);
    --bg-panel: var(--surface);
    --text-primary: var(--ink);
    --text-secondary: var(--mut);
    --text-dim: var(--faint);
    --border: var(--line);
    /* the wordmark's flaps lift off the dark, its hinge is the ground */
    --k-tile: #2b2c32;
    --k-bg: #0b0c0e;
}

/* The night board (the brand's "Night board"): the start page, the solo menu
   and solo's frame around a game. The wordmark's flaps lift off the dark
   (--k-*: wordmark.svg), the slate is the board's panel. */
body:where(:not([class*="theme-"])):has(> .st-choices),
body.solo:where(:not([class*="theme-"])) {
    --sc-slate-bg: #101114;
    --sc-slate-line: #2f3136;
    --sc-slate-rule: #2f3136;
    --sc-slate-ink: #f2f0ea;
    --sc-slate-muted: #9a9da5;
    --k-tile: #2b2c32;
    --k-tile-ink: #f5f3ec;
    --k-spark: #ffc21a;
    --k-bg: #0b0c0e;
}
body:where(:not([class*="theme-"])):has(> .st-choices) {
    --bg: #0b0c0e;
    --surface: #1d1e22;
    --ink: #f2f0ea;
    --mut: #9a9da5;
    --faint: #8a8d96;
    --line: #2f3136;
    --accent: #ffc21a;
    --accent-ink: #0b0c0e;
    --tint: rgba(255, 194, 26, .14);
    --solo: #2b2c32;
    --st-section-font: var(--dl-sans);
}
body.solo:where(:not([class*="theme-"])) {
    --solo-bg: #0b0c0e;
    --solo-panel: #1d1e22;
    --solo-line: #2f3136;
    --solo-ink: #f2f0ea;
    --solo-mut: #9a9da5;
    --solo-accent: #ffc21a;
    --solo-accent-ink: #0b0c0e;
    --solo-button: #25262b;
    --solo-counting: #a07c14;
    --solo-pulse: rgba(255, 194, 26, .6);
    --solo-pulse-0: rgba(255, 194, 26, 0);
    --solo-play: #ffc21a;
    --solo-play-ink: #0b0c0e;
    --solo-play-font: var(--dl-sans);
    --sc-night-paper: #1d1e22;
    --sc-night-ink: #f2f0ea;
    --sc-night-muted: #9a9da5;
    --sc-night-rule: #2f3136;
}

/* The start page: RUN A GAME is the amber choice (--accent), solo the second,
   a dark flap with a hairline (Simon, 18 Oct). */
.st-card.is-solo { border-top-color: #5a5e67; }
.is-solo .st-go, .st-scen-btn.is-solo { background: var(--solo); color: var(--ink); box-shadow: inset 0 0 0 1px #3d3f46; }
.st-head h1 { letter-spacing: .1em; }
.st-head > div { text-align: center; }
.st-head .ed-wordmark { display: block; height: 54px; width: auto; margin: 0 auto 8px; }
.st-section { font-weight: 700; letter-spacing: .2em; }
.st-note code { font-family: var(--dl-mono); }
.st-warn { color: #ff6a4d; }

/* The wordmark, where the other pages put their icon and name. */
body.solo:where(:not([class*="theme-"])) .ed-wordmark { display: block; height: 50px; width: auto; margin-bottom: 6px; }
body:where(:not([class*="theme-"])) .join-brand .ed-wordmark { display: block; height: 30px; width: auto; }
.admin-topbar { --k-bg: var(--surface); }
.admin-topbar .ed-wordmark { display: block; height: 22px; width: auto; }
body:where(:not([class*="theme-"])) .toolbar-brand { --k-bg: var(--bg-sidebar); }
/* 20px, down to 14px by a 1024px window, so the editor's toolbar keeps one row as it did with the icon. */
body:where(:not([class*="theme-"])) .toolbar-brand .ed-wordmark { display: block; height: clamp(14px, calc(14px + (100vw - 1024px) * .08), 20px); width: auto; }
body.remote-body:where(:not([class*="theme-"])) .rm-top { --k-bg: var(--bg-card); }
body.remote-body:where(:not([class*="theme-"])) .rm-brand .ed-wordmark { height: 1.3em; width: auto; vertical-align: -.3em; }
/* The phone's own dark mode (the host's More menu): flaps lifted, the hinge its ground. */
body[data-theme="dark"]:where(:not([class*="theme-"])) .voter-brand { --k-tile: #2b2c32; --k-bg: var(--bg); }

/* The phone's join page: the game code in the board's mono. */
body:where(:not([class*="theme-"])) .join-input { font-family: var(--dl-mono); font-weight: 600; letter-spacing: .2em; }