/* src/client/tokens.css: shipped snapshot of prototypes/room/lib/tokens.css for the served shell.
   This file is the visual spec for Phase 2 (CASE-112 to CASE-118). Every colour, size, weight, radius
   and z-index a window uses is a token here; tests/contrast.test.mjs checks every text and non-text
   pair in BOTH themes, and tests/z-index.test.mjs forbids raw z-index literals.

   Colour carries three signals and nothing else:
   • ZONES: the orientation band (header, footer) is petrol-tinted; the scene and findings sit on
     neutral cards; only the decision column carries the option colours.
   • PHASE STATE: one accent per phase on the phase pill and the left rail of the phase card, never a
     flood: open = green, locked = amber, reveal = petrol, consequence = coral, paused = slate.
   • CONTROL PRIORITY: one filled primary action per screen (petrol), secondary tinted, tertiary
     plain text, destructive a coral outline.
   Petrol is never a clinical meaning; clinical meaning is never colour alone (icon + text). */

/* Montserrat (SIL OFL 1.1) and JetBrains Mono (SIL OFL 1.1), self-hosted (NOTICE.md): never loaded from
   a third-party font service, so no participant's address leaves Case. No serif face anywhere (CASE-112). */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/montserrat-latin.06b16db7a969135d48d38c49183be7fb88d4452e2a3011957c7851941f4e4879.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/assets/montserrat-latin-ext.54d9a78b7ff60b689ad9f3017ffac8547b5d871afec733f6c1c3ae36577ee504.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(/assets/jetbrains-mono-latin.83c005d49d8a6a50474c73a5a36ac0468076e9c4a29da7bdb14995d80560a5be.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* ground and neutral cards */
  --ground: #f5f1e8;          /* warm off-white ground */
  --surface: #fffcf6;         /* neutral cards: scene, findings, panels */
  --sunken: #ece7dc;          /* wells, empty states, disabled tiles */
  --line: #ddd5c6;            /* hairlines between things (decorative) */
  --field-line: #6f7f81;      /* input and control borders: 3:1 non-text */
  --ink: #0f3b47;             /* dark petrol: the default text colour */
  --ink-muted: #3f5f67;       /* secondary text, still 4.5:1 or better everywhere */
  /* zone: orientation band (header, footer) */
  --nav-bg: #e2ebe9;
  --nav-line: #c3d5d3;
  --nav-ink: #0f3b47;
  --qr-card: #ffffff;         /* the QR's quiet zone: a small white card inside the tinted footer */
  /* control priority */
  --petrol: #0f5566;          /* the ONE primary action per screen, and selection */
  --petrol-deep: #0a4150;
  --on-petrol: #ffffff;
  --petrol-tint: #dcebeb;     /* secondary controls */
  --petrol-ink: #0d4a58;
  --focus: #0f5566;
  /* phase state: fill (pill) + tint (card rail, soft states) + ink on tint */
  --ph-open: #1d6a42;        --ph-open-tint: #dcefe2;        --ph-open-ink: #17503a;
  --ph-locked: #8a5200;      --ph-locked-tint: #f6e6c8;      --ph-locked-ink: #693e00;
  --ph-reveal: #0f5566;      --ph-reveal-tint: #dcebeb;      --ph-reveal-ink: #0d4a58;
  --ph-consequence: #b03d29; --ph-consequence-tint: #f8e1da; --ph-consequence-ink: #8c2e1d;
  --ph-paused: #4b575e;      --ph-paused-tint: #e5e8e8;      --ph-paused-ink: #37424a;
  --on-phase: #ffffff;
  /* status (not phase): destructive, offline, manual room */
  --alert: #a8372a;          --alert-tint: #f8e1da;          --alert-ink: #8c2e1d;
  --manual: #7a4c0a;         --manual-tint: #f4e5c6;         --manual-ink: #623c06;
  --ok: #26603f;             --ok-tint: #dcefe2;             --ok-ink: #17503a;
  /* option tiles: the tile is the mark's colour mixed into the card at this share */
  --tile-tint: 12%;
  /* elevation and shape */
  --shadow-1: 0 1px 2px rgba(15, 59, 71, .06), 0 2px 8px rgba(15, 59, 71, .05);
  --shadow-2: 0 10px 30px rgba(15, 59, 71, .12);
  --radius-lg: 16px; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px;
  /* spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* type: ONE family, a tight scale, light weights (CASE-112) */
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 24px; --t-code: 32px;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;
  --lh-tight: 1.2; --lh: 1.5;
  /* Projector minimum body type (CASE-083). */
  --projector-body: 24px;
  /* z-index bands: a raw number never appears in a window (tests/z-index.test.mjs) */
  --z-raised: 1;              /* local stacking inside a card */
  --z-sticky: 100;            /* sticky headers */
  --z-dock: 110;              /* fixed action docks and bars */
  --z-toast: 300;             /* transient status */
  --z-overlay: 400;           /* the full-screen display-check word on the projector */
}

/* Dark theme (CASE-011): the same roles, re-tuned. Follows the system unless a page pins data-theme.
   The two dark blocks are identical; tests/contrast.test.mjs checks that they stay so. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0d1a1e; --surface: #142529; --sunken: #0a1417; --line: #24383e; --field-line: #7f9599;
    --ink: #e3eeec; --ink-muted: #a7bdbf;
    --nav-bg: #11303a; --nav-line: #1f4651; --nav-ink: #dcebea; --qr-card: #ffffff;
    --petrol: #6cc2cf; --petrol-deep: #8fd3dd; --on-petrol: #062228; --petrol-tint: #173d46; --petrol-ink: #a9e0e8; --focus: #8fd3dd;
    --ph-open: #57c08c; --ph-open-tint: #143a28; --ph-open-ink: #a5e6c4;
    --ph-locked: #e3a74c; --ph-locked-tint: #3d2c10; --ph-locked-ink: #f3cf96;
    --ph-reveal: #6cc2cf; --ph-reveal-tint: #173d46; --ph-reveal-ink: #a9e0e8;
    --ph-consequence: #f08b72; --ph-consequence-tint: #432019; --ph-consequence-ink: #f8bcab;
    --ph-paused: #9eabb1; --ph-paused-tint: #252f34; --ph-paused-ink: #cfd8dc;
    --on-phase: #0a1a1f;
    --alert: #f08b72; --alert-tint: #432019; --alert-ink: #f8bcab;
    --manual: #e3a74c; --manual-tint: #3d2c10; --manual-ink: #f3cf96;
    --ok: #57c08c; --ok-tint: #143a28; --ok-ink: #a5e6c4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0d1a1e; --surface: #142529; --sunken: #0a1417; --line: #24383e; --field-line: #7f9599;
  --ink: #e3eeec; --ink-muted: #a7bdbf;
  --nav-bg: #11303a; --nav-line: #1f4651; --nav-ink: #dcebea; --qr-card: #ffffff;
  --petrol: #6cc2cf; --petrol-deep: #8fd3dd; --on-petrol: #062228; --petrol-tint: #173d46; --petrol-ink: #a9e0e8; --focus: #8fd3dd;
  --ph-open: #57c08c; --ph-open-tint: #143a28; --ph-open-ink: #a5e6c4;
  --ph-locked: #e3a74c; --ph-locked-tint: #3d2c10; --ph-locked-ink: #f3cf96;
  --ph-reveal: #6cc2cf; --ph-reveal-tint: #173d46; --ph-reveal-ink: #a9e0e8;
  --ph-consequence: #f08b72; --ph-consequence-tint: #432019; --ph-consequence-ink: #f8bcab;
  --ph-paused: #9eabb1; --ph-paused-tint: #252f34; --ph-paused-ink: #cfd8dc;
  --on-phase: #0a1a1f;
  --alert: #f08b72; --alert-tint: #432019; --alert-ink: #f8bcab;
  --manual: #e3a74c; --manual-tint: #3d2c10; --manual-ink: #f3cf96;
  --ok: #57c08c; --ok-tint: #143a28; --ok-ink: #a5e6c4;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ── base ── */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: var(--w-regular) var(--t-md)/var(--lh) var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-weight: var(--w-semibold); line-height: var(--lh-tight); letter-spacing: -.01em; }
b, strong { font-weight: var(--w-semibold); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 1; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: var(--petrol-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
svg.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── controls: one primary, secondary tinted, tertiary text, destructive coral outline ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2) var(--sp-4); border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--petrol-tint); color: var(--petrol-ink); font-size: var(--t-sm); font-weight: var(--w-semibold); line-height: 1.2; text-align: center; text-decoration: none; }
.btn.primary { background: var(--petrol); color: var(--on-petrol); }
.btn.primary:hover:not(:disabled) { background: var(--petrol-deep); }
.btn.tertiary { background: transparent; color: var(--petrol-ink); padding-inline: var(--sp-2); }
.btn.tertiary:hover:not(:disabled) { background: var(--petrol-tint); }
.btn.danger { background: transparent; border-color: var(--alert); color: var(--alert-ink); }
.btn.icon { padding: 0; width: 44px; }
.btn.block { width: 100%; }
.btn.lg { min-height: 52px; padding: var(--sp-3) var(--sp-5); font-size: var(--t-md); }

/* Disabled controls use explicit colours, not group opacity (CASE-125: at least 4.5:1). */
.btn:disabled { color: var(--ink-muted); background: var(--sunken); border-color: var(--field-line); }

/* ── phase pill: the one place the phase accent fills (plus the card rail) ── */
.pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-pill); background: var(--ph, var(--ph-reveal)); color: var(--on-phase); font-size: var(--t-xs); font-weight: var(--w-semibold); letter-spacing: .02em; white-space: nowrap; }
[data-phase="open"] { --ph: var(--ph-open); --ph-tint: var(--ph-open-tint); --ph-ink: var(--ph-open-ink); }
[data-phase="locked"] { --ph: var(--ph-locked); --ph-tint: var(--ph-locked-tint); --ph-ink: var(--ph-locked-ink); }
[data-phase="reveal"] { --ph: var(--ph-reveal); --ph-tint: var(--ph-reveal-tint); --ph-ink: var(--ph-reveal-ink); }
[data-phase="consequence"] { --ph: var(--ph-consequence); --ph-tint: var(--ph-consequence-tint); --ph-ink: var(--ph-consequence-ink); }
[data-phase="paused"] { --ph: var(--ph-paused); --ph-tint: var(--ph-paused-tint); --ph-ink: var(--ph-paused-ink); }

/* ── neutral chips and tags (status, never phase) ── */
.tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius-pill); background: var(--sunken); color: var(--ink); font-size: var(--t-xs); font-weight: var(--w-medium); white-space: nowrap; }
.tag.ok { background: var(--ok-tint); color: var(--ok-ink); }
.tag.warn { background: var(--manual-tint); color: var(--manual-ink); }
.tag.bad { background: var(--alert-tint); color: var(--alert-ink); }
.tag.sel { background: var(--petrol-tint); color: var(--petrol-ink); }

/* ── banners (layers and connection), icon + text ── */
.banner { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-weight: var(--w-medium); }
.banner.manual { background: var(--manual-tint); color: var(--manual-ink); }
.banner.pause { background: var(--ph-paused-tint); color: var(--ph-paused-ink); }
.banner.alert { background: var(--alert-tint); color: var(--alert-ink); }
.banner.info { background: var(--petrol-tint); color: var(--petrol-ink); }

/* ── cards and tiles (bento) ── */
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.eyebrow { margin: 0; color: var(--ink-muted); font-size: var(--t-xs); font-weight: var(--w-semibold); letter-spacing: .08em; text-transform: uppercase; }

/* Option tile (CASE-088/089): the decision column carries the option colours. --mk is the mark fill. */
.opt-tile { --mk: var(--ink-muted); background: color-mix(in srgb, var(--mk) var(--tile-tint), var(--surface)); border: 1px solid color-mix(in srgb, var(--mk) 35%, var(--line)); border-radius: var(--radius); }

/* ── avatars ── */
img.avatar { display: block; flex: none; border-radius: 50%; background: var(--sunken); }

/* ── info disclosure: explanations live behind it, never inline paragraphs (CASE-118) ── */
details.info { display: inline-block; vertical-align: middle; }
details.info > summary { list-style: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--petrol-ink); cursor: pointer; }
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary:hover, details.info[open] > summary { background: var(--petrol-tint); }
details.info .info-body { margin: var(--sp-2) 0 0; padding: var(--sp-3); max-width: 52ch; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); font-size: var(--t-sm); font-weight: var(--w-regular); color: var(--ink); }

@media (forced-colors: active) {
  .btn, .tag, .pill, .card, .opt-tile, .banner { border: 1px solid CanvasText; }
  .btn.primary, .pill { forced-color-adjust: auto; background: ButtonFace; color: ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.nomodule { margin: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 2px solid var(--alert); border-radius: var(--radius-sm); background: var(--alert-tint); color: var(--alert-ink); font-weight: var(--w-semibold); }
.avatar-none { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: var(--sunken); color: var(--ink-muted); font-weight: var(--w-semibold); }