/* ==========================================================
   Case Zero — WORKSTATION shell
   Reuses design tokens from site/css/main.css (imported).
   ========================================================== */

@import url('../../css/main.css');

/* ==========================================================
   S5.5.3 — Self-hosted webfonts (Latin + Cyrillic only)
   Kills network dependency on fonts.googleapis.com / gstatic.com.
   Family names + weights match what Google Fonts served before —
   this is a hosting migration, NOT a typography change.
   Files live in site/games/fonts/; UK + EN both covered.
   ========================================================== */

/* Cormorant Garamond — display / titles */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-400-latin.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: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-500-latin.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: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-600-latin.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: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/cormorant-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-400-italic-latin.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: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/cormorant-400-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-500-italic-latin.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: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-500-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Inter — body / UI */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/inter-300-latin.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: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/inter-300-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-400-latin.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-500-latin.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: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-600-latin.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* JetBrains Mono — micro / labels / data */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/jbmono-400-latin.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: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/jbmono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jbmono-500-latin.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: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/jbmono-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ==========================================================
   Phase 1 — Visual Foundation (V2 direction)
   Game-scoped token overrides. Site-wide tokens in main.css
   remain untouched (they power the non-game pages).

   NEVER USE inside .game-root:
     · neon accents (green, purple, magenta, teal)
     · cyberpunk cyan glows (the `--cyan` shared token is not
       consumed here; the single blue accent is `--ice`)
     · gradient CTAs / big colored KPI numbers / card box-shadows
     · rounded pills > 2px radius, icon-fonts, emoji chrome
     · idle animations, hover-lifts (translateY on hover)
     · red anywhere except the destructive `.reset-hint` in the corner
   Palette source: VISUAL_DIRECTION_V2.md §1.1 (already aligned
   with the shared site tokens — this block asserts the assignments
   and adds semantic aliases the game code can rely on).
   Typography: Cormorant Garamond → display/titles;
               Inter              → body/prose;
               JetBrains Mono     → chrome/labels/handles/dates.
   ========================================================== */
.game-root {
  /* Assert the game palette. Values match main.css but pinning them
     here makes the game's contract explicit and defends against future
     shared-token drift. */
  --bg:        #05070d;   /* ground — the paper the case is printed on */
  --bg-alt:    #0a0e1a;   /* chrome — desk rails, topbar, sidebar     */
  --surface:   #0f1524;   /* document surface — cards, artifact panes */
  --surface-2: #141c30;   /* elevated document — hover, modal side    */
  --border:    #1e2942;   /* hairline (edge of paper)                 */
  --border-hi: #2d3d63;   /* emphasis rule — active tab, note spine   */

  --text:      #c5cde0;   /* off-white body ink                       */
  --text-dim:  #8592ad;   /* secondary meta                           */
  --text-mute: #56607a;   /* micro / timestamps / disabled            */
  --cream:     #e6edfb;   /* editorial ink — serif titles, subjects   */

  --steel:     #6b7ea3;   /* mono label on dark surface               */
  --steel-hi:  #9db0d4;   /* satisfied / positive quiet mark          */
  --ice:       #4a9eff;   /* scalpel accent — one CTA per screen      */
  --ice-glow:  #6ea8ff;   /* italic emphasis, active markers          */
  --gold:      #c8a24b;   /* submit-gate ready · muted, editorial     */

  /* Neutralize shared tokens the game refuses to consume. Setting
     them to safe values (rather than deleting) keeps any accidental
     use from flashing a bright color. */
  --cyan:      var(--ice-glow);
  --red:       #b85560;

  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans:  'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  font-family: var(--font-sans);
}

/* Grain — a 2-4% film-grain layer over the ground only.
   Not on cards, not on photos. 128×128 tileable SVG turbulence,
   ~1.1KB URL-encoded, so no external asset dependency. */
.game-root::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  background-repeat: repeat;
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
/* Photos and cards live above the grain so it never dusts the artifact. */
.welcome, .workstation, .notif-stack, .reset-hint, .lang-switch {
  position: relative;
  z-index: 1;
}

/* --- Reusable treatments (available primitives; not applied here) --- */

/* .tx-letterbox — aspect-locked frame for post images, video slot,
   chat avatars. Hairline mount, subtle inner shadow, no rounding. */
.tx-letterbox {
  position: relative;
  aspect-ratio: var(--tx-ratio, 16 / 9);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.tx-letterbox > img,
.tx-letterbox > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tx-letterbox--square { --tx-ratio: 1 / 1; }
.tx-letterbox--portrait { --tx-ratio: 9 / 16; }
.tx-letterbox--doc { --tx-ratio: 4 / 3; }

/* .tx-browser-chrome — wraps ARCHIVE cached-page renders in a
   fake-browser frame. All CSS, no images. */
.tx-browser-chrome {
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
}
.tx-browser-chrome__bar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .7rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--text-mute);
}
.tx-browser-chrome__nav {
  display: inline-flex; gap: .4rem;
  color: var(--text-mute);
  opacity: .5;
  font-size: .8rem;
  line-height: 1;
}
.tx-browser-chrome__dots {
  display: inline-flex; gap: .3rem;
  margin-right: .35rem;
}
.tx-browser-chrome__dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-hi);
  display: inline-block;
}
.tx-browser-chrome__url {
  flex: 1;
  min-width: 0;
  padding: .18rem .55rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-browser-chrome__tag {
  color: var(--gold);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .6rem;
}
.tx-browser-chrome__body { padding: 0; background: var(--bg); }

/* .tx-exif-ledger — mono ledger-style overlay stamped on an artifact
   (bottom-right per §1.7). Two-column dl of camera/ISO/timestamp. */
.tx-exif-ledger {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .15rem .8rem;
  padding: .5rem .7rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(5, 7, 13, .78);
  border: 1px solid var(--border);
  border-radius: 0;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font-variant-numeric: tabular-nums;
}
.tx-exif-ledger dt { color: var(--text-mute); }
.tx-exif-ledger dd { color: var(--text-dim); }
.tx-exif-ledger--overlay {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  max-width: 60%;
}
.tx-exif-ledger--empty dd::after {
  content: "—";
  color: var(--text-mute);
}

/* ==========================================================
   Phase 1 — Empty-state compositions (§2.8)
   No "dashed box with a centered mute label" survives here.
   ========================================================== */

/* Welcome — sheet-on-desk composition with signature watermark. */
.welcome {
  position: relative;
  overflow: hidden;
}
.welcome__sheet {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3.2rem 3rem 2.6rem;
  max-width: 640px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(20, 28, 48, .12) 50%,
      transparent 100%);
}
/* Faint corner ticks — the four ledger marks of "case sheet". */
.welcome__sheet::before,
.welcome__sheet::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--border-hi);
  opacity: .45;
  pointer-events: none;
}
.welcome__sheet::before {
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.welcome__sheet::after {
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}
.welcome__watermark {
  position: absolute;
  right: 3vw; bottom: 3vh;
  width: min(240px, 22vw);
  aspect-ratio: 1 / 1;
  background: url("../../img/brand/panther-seal-round.png") center / contain no-repeat;
  opacity: .05;
  filter: grayscale(1) contrast(1.1);
  pointer-events: none;
  z-index: 1;
}

/* Workstation-before-first-action — a typographic skeleton, not
   shimmering bars. Only visible for the sliver of time before FRAME
   renders profile_001. Hierarchy shows through: avatar circle,
   serif name line, mono handle line, three grid tiles. */
.pane[data-pane="frame"].is-active:empty {
  display: block;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  opacity: .55;
}
.pane[data-pane="frame"].is-active:empty::before {
  content: "";
  display: block;
  height: 148px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle 60px at 64px 74px, var(--surface) 0 60px, transparent 61px),
    linear-gradient(var(--surface) 0 0) no-repeat 160px 62px / 180px 14px,
    linear-gradient(var(--surface) 0 0) no-repeat 160px 84px / 120px 10px,
    linear-gradient(var(--surface) 0 0) no-repeat 160px 108px / 220px 8px;
}
.pane[data-pane="frame"].is-active:empty::after {
  content: "";
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 1.25rem;
  background:
    linear-gradient(var(--surface) 0 0) 0     0   / calc((100% - 8px)/3) 220px no-repeat,
    linear-gradient(var(--surface) 0 0) 50%   0   / calc((100% - 8px)/3) 220px no-repeat,
    linear-gradient(var(--surface) 0 0) 100%  0   / calc((100% - 8px)/3) 220px no-repeat;
  height: 220px;
}

/* Locked pane — reads as a redacted folder-tab, not a "coming soon".
   `.game-root` prefix keeps these Phase 1 rules winning over the
   pre-existing wireframe styles further down in this file. */
.game-root .locked-pane {
  position: relative;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 3rem 3rem 4rem;
  max-width: 620px;
  margin: 3rem auto 0;
  text-align: left;
  border-left: 2px solid var(--border-hi);
  background:
    linear-gradient(90deg, rgba(20, 28, 48, .35), transparent 55%);
  gap: 1rem;
}
.game-root .locked-pane::before {
  content: "";
  position: absolute;
  left: -2px; top: 1.4rem;
  width: 32px; height: 1px;
  background: var(--gold);
  opacity: .55;
}
.game-root .locked-pane__tag {
  color: var(--gold);
  letter-spacing: .28em;
}
.game-root .locked-pane__title {
  color: var(--cream);
  font-size: 2.2rem;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.game-root .locked-pane__note {
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: .08em;
  line-height: 1.55;
  max-width: 46ch;
}
.game-root .locked-pane__title::after {
  content: "";
  display: block;
  margin-top: .8rem;
  width: 3.2em;
  height: 1px;
  background: var(--border-hi);
}

/* Evidence empty — a chapter-subhead treatment, not a UI toast. */
.game-root .evidence-empty {
  position: relative;
  padding: 3rem 0 3rem 2.5rem;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-dim);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
  max-width: 44ch;
  border-left: 2px solid var(--border);
}
.game-root .evidence-empty::before {
  content: "";
  position: absolute;
  left: -2px; top: 2.6rem;
  width: 22px; height: 1px;
  background: var(--border-hi);
}

/* End Phase 1 — Visual Foundation
   ========================================================== */

/* Game-specific overrides ---------------------------------- */
html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}

/* Hide the site's global star canvas glow inside the game — too noisy. */
body::before, body::after { display: none; }

.game-root {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

/* ---------- WELCOME view ---------- */
.welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: 1.5rem;
}
.welcome__eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .22em;
  color: var(--steel);
  text-transform: uppercase;
}
.welcome__title {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  color: var(--cream);
  letter-spacing: -.02em;
  line-height: 1;
}
.welcome__sub {
  max-width: 44ch;
  color: var(--text-dim);
  line-height: 1.6;
}
.welcome__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  border: 1px solid var(--border-hi);
  background: var(--surface);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .18s var(--ease);
}
.welcome__cta:hover {
  border-color: var(--ice);
  color: var(--ice-glow);
  box-shadow: var(--glow);
}
.welcome__resume {
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: -.5rem;
}
.welcome__resume b { color: var(--ice); font-weight: 500; }

/* ---------- WORKSTATION ---------- */
.workstation {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}
.game-root.is-playing .welcome { display: none; }
.game-root.is-playing .workstation { display: flex; }

.ws-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  flex: 0 0 auto;
}
.ws-topbar__title {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .22em;
  color: var(--steel-hi);
  text-transform: uppercase;
}
.ws-topbar__title b { color: var(--cream); font-weight: 500; margin-left: .8rem; }
.ws-topbar__meta {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.ws-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ---------- Sidebar ---------- */
.ws-sidebar {
  flex: 0 0 200px;
  border-right: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  overflow-y: auto;
}
.ws-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-bottom: 1rem;
}
.ws-sidebar__group + .ws-sidebar__group {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.ws-sidebar__label {
  padding: 0 1.1rem .5rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1.1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--text-dim);
  text-transform: uppercase;
  border-left: 2px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.tool-btn:hover {
  color: var(--cream);
  background: var(--surface);
}
.tool-btn.is-active {
  color: var(--ice);
  border-left-color: var(--ice);
  background: var(--surface);
}
.tool-btn.is-locked {
  color: var(--text-mute);
  cursor: not-allowed;
}
.tool-btn.is-locked:hover {
  color: var(--text-mute);
  background: none;
}
.tool-btn__lock {
  font-size: .6rem;
  color: var(--text-mute);
  letter-spacing: .1em;
}
.tool-btn__badge {
  font-size: .65rem;
  padding: .1rem .45rem;
  border-radius: 2px;
  background: var(--ice);
  color: var(--bg);
  min-width: 1.4em;
  text-align: center;
  font-weight: 600;
  display: none;
}
.tool-btn__badge.is-visible { display: inline-block; }

/* ---------- Work area ---------- */
.ws-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
  padding: .6rem 2rem .8rem;
}
.pane { display: none; }
.pane.is-active { display: block; }

/* ---------- Split view (S3 SAME FRAME host, workstation-level) ----------
   Static composition only — no transitions, no fades. When mounted, the
   normal .pane children are hidden (host adds .is-split to .ws-main) and
   two side-by-side .split-view__pane children take their place. */
.ws-main.is-split { padding-top: 0; padding-bottom: 0; }
.split-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.split-view__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
}
.split-view__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel);
}
.split-view__close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3rem .65rem;
  cursor: pointer;
}
.split-view__close:hover {
  color: var(--text);
  border-color: var(--border-hi);
}
.split-view__close-label { margin-left: .35rem; }
.split-view__panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  flex: 1;
  min-height: 0;
  padding: .8rem 0 .6rem;
}
.split-view__pane {
  min-width: 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 1rem 1rem 1.25rem;
}
/* Compact FRAME inside a split pane: strip the app-bar and the social
   button row (Follow / Message / …) — those are chrome, not document. */
.split-view__pane .frame-profile { max-width: none; }
.split-view__pane .frame-appbar,
.frame-profile--compact .frame-appbar,
.split-view__pane .frame-social-btn,
.frame-profile--compact .frame-social-btn {
  display: none !important;
}
.split-view__caption {
  padding: .9rem 0 1rem;
  text-align: center;
  border-top: 1px solid var(--border);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-mute);
  letter-spacing: .04em;
}
.split-view__fallback {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--text-mute);
  font-family: var(--font-mono);
}
.split-view__fallback-label {
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel);
}
.split-view__fallback-id { font-size: .8rem; }

/* ---------- Locked pane ---------- */
.locked-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .8rem;
  color: var(--text-mute);
}
.locked-pane__tag {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.locked-pane__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--steel);
}
.locked-pane__note {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ---------- FRAME (social profile — Instagram-analog) ---------- */
.frame-profile { max-width: 935px; margin: 0 auto; }

/* App-chrome header — reads instantly as an Instagram-analog top bar.
   Decorative only. The search input is disabled, the icons are static. */
.frame-appbar {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px) auto;
  align-items: center;
  gap: 1.25rem;
  padding: .25rem 0 .45rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .55rem;
}
.frame-appbar__brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.frame-appbar__mark {
  display: inline-flex;
  width: 24px; height: 24px;
}
.frame-appbar__wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.55rem;
  color: var(--cream);
  letter-spacing: -.01em;
  line-height: 1;
}
.frame-appbar__search {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-mute);
  font-family: var(--font-sans);
  font-size: .8rem;
}
.frame-appbar__search input {
  background: transparent; border: 0; outline: 0;
  color: var(--text-dim);
  font: inherit;
  width: 100%;
  pointer-events: none;
}
.frame-appbar__icons {
  display: inline-flex;
  align-items: center;
  gap: .95rem;
  color: var(--text-dim);
  font-size: 1.2rem;
  line-height: 1;
}
.frame-appbar__icons img {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
}

/* Header topline — @handle + Follow / Message / … Instagram-style row. */
.frame-header__topline {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .8rem;
}
.frame-header__topline .frame-username {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--cream);
  letter-spacing: 0;
  margin: 0 .3rem 0 0;
  text-transform: none;
}
.frame-social-btn {
  padding: .38rem .95rem;
  background: var(--surface);
  color: var(--cream);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.15;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .08s var(--ease);
}
.frame-social-btn:hover {
  background: #1a2340;
  border-color: var(--ice);
}
.frame-social-btn:active { transform: scale(.97); }
.frame-social-btn--follow {
  background: #1877ff;         /* Instagram-style blue */
  border-color: #1877ff;
  color: #fff;
}
.frame-social-btn--follow:hover {
  background: #0f5fd8;
  border-color: #0f5fd8;
}
.frame-social-btn--icon {
  padding: .38rem .55rem;
  font-size: 1rem;
  letter-spacing: .1em;
}

/* Category label under display name — reads like Instagram's "Photographer". */
.frame-category {
  font-family: var(--font-sans);
  font-size: .85rem;
  color: var(--text-mute);
  margin-bottom: .35rem;
}

/* Story highlights row — decorative circles with labels. */
.frame-highlights {
  display: flex;
  gap: 1rem;
  padding: .45rem 0 .3rem;
  border-top: 1px solid var(--border);
  margin-top: .35rem;
  overflow-x: auto;
}
.frame-hl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
}
.frame-hl__ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: .95rem;
}
.frame-hl__glyph { line-height: 1; }
.frame-hl__label {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Case actions — investigative overlay above the tabs bar. */
.frame-case-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  border-top: 1px solid var(--border);
}
.frame-case-actions__label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  margin-right: .35rem;
}

/* Instagram-style tabs bar above the grid. Only POSTS is active. */
/* Tabs row = flexbox with IG-tabs on the left and CASE actions on the right.
   Two flex items with `justify-content: space-between` prevents overlap
   regardless of viewport width. Tabs stay left-aligned Instagram-ish. */
.frame-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: .35rem;
  flex-wrap: wrap;
}
.frame-tabs {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex: 1 1 auto;
  justify-content: center;
}
.frame-tabs__case {
  display: flex;
  gap: .5rem;
  flex: 0 0 auto;
}
.btn-primary--sm, .btn-ghost--sm {
  padding: .35rem .8rem;
  font-size: .68rem;
}
.frame-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0 .45rem;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  border-top: 2px solid transparent;
  margin-top: -1px;                    /* overlap parent border */
  cursor: default;
}
.frame-tab.is-active {
  color: var(--cream);
  border-top-color: var(--cream);
}
.frame-tab__glyph { font-size: .95rem; line-height: 1; }
.frame-tab[aria-disabled="true"] { opacity: .55; }


.frame-url {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--text-mute);
  padding: .35rem .55rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  display: inline-block;
  margin-bottom: 1.25rem;
  background: var(--surface);
}
.frame-header {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 1.5rem;
  align-items: center;
  padding-bottom: .6rem;
}
.frame-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}
.frame-avatar img { width: 100%; height: 100%; object-fit: cover; }
.frame-header__body {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  gap: .55rem;
}
.frame-username {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--cream);
  letter-spacing: .04em;
}
.frame-stats {
  display: flex;
  gap: 1.75rem;
  font-size: .85rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.frame-stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: .34rem;
}
.frame-stats b { color: var(--cream); font-weight: 500; }
.frame-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--cream);
  margin-top: .2rem;
}
.frame-bio {
  color: var(--text);
  white-space: pre-line;
  font-size: .92rem;
  line-height: 1.5;
  max-width: 46ch;
}
.frame-meta {
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  margin-top: .15rem;
}

.frame-actions {
  display: flex;
  gap: .6rem;
  padding: 1rem 0 1.25rem;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.15rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--ice);
  color: var(--ice);
  background: transparent;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.btn-primary:hover {
  background: var(--ice);
  color: var(--bg);
}
.btn-primary:disabled {
  border-color: var(--border);
  color: var(--text-mute);
  background: transparent;
  cursor: default;
}
.btn-ghost {
  padding: .7rem 1.15rem;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: transparent;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.btn-ghost:hover { border-color: var(--border-hi); color: var(--cream); }

.frame-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.frame-post {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  overflow: hidden;
  position: relative;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  transition: filter .15s var(--ease);
}
.frame-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-post:hover img { filter: brightness(1.04); }

/* Avatar fallback — initials over the muted surface when the source 404s. */
.frame-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 3.4rem;
  color: var(--text-dim);
  background: var(--surface);
}
.frame-avatar--fallback img { display: none; }

/* ---------- FRAME opened post (state B — Instagram-post + forensic) ---------- */
.frame-opened {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.frame-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--surface);
}
.frame-post-card__head {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--border);
}
.frame-post-card__head-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.frame-post-card__head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.frame-post-card__head-meta {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  min-width: 0;
  flex-wrap: wrap;
}
.frame-post-card__head-handle {
  font-family: var(--font-mono);
  font-size: .85rem;
  color: var(--cream);
  letter-spacing: .03em;
}
.frame-post-card__head-loc {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--text-mute);
}
.frame-post-card__head-loc::before {
  content: "· ";
  color: var(--border-hi);
}
.frame-opened__close {
  background: none;
  border: 0;
  padding: 0 .25rem;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-mute);
  cursor: pointer;
  transition: color .15s var(--ease);
}
.frame-opened__close:hover { color: var(--cream); }

.frame-post-card__photo {
  width: 100%;
  margin: 0;
  background: var(--bg);
}
.frame-post-card__body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem .9rem 1rem;
}
.frame-post-card__likes {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--cream);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.frame-post-card__caption {
  font-size: .95rem;
  color: var(--text);
  line-height: 1.5;
}
.frame-post-card__caption b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--cream);
  margin-right: .35em;
  letter-spacing: .02em;
}
.frame-post-card__date {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-top: .15rem;
}

.frame-opened__forensic {
  border-top: 1px solid var(--border);
  padding-top: .85rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.frame-opened__forensic-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.frame-opened__exif {
  margin: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  padding: 0;
}

.frame-opened__actions {
  display: flex;
  justify-content: flex-end;
  padding-top: .25rem;
}

@media (max-width: 720px) {
  .frame-opened { max-width: 100%; }
}

/* Video-still reveal — S5.5.2. Static frame only (no <video>). Photo-
   first; player clicks the load button to swap the pane into the 9:16
   still. No animation, no cinematic beats — anti-tell rule. */
.frame-opened__video-slot {
  display: flex;
  justify-content: center;
  padding: .5rem .75rem .25rem;
}
.frame-opened__video-load {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: .45rem .85rem;
  cursor: pointer;
}
.frame-opened__video-load:hover {
  color: var(--cream);
  border-color: var(--text-mute);
}
.frame-opened__video-still {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  background: #000;
}
/* S5.5.2 correction: the 9:16 still must fit the pane viewport as a whole
   frame — evidence-extract acceptance is "all six anchors visible at once",
   not "scroll to see the top". Constrain height + contain, centered. */
.frame-opened__video-still .tx-letterbox {
  max-height: 62vh;
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.frame-opened__video-still .tx-letterbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.frame-opened__video-close {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: transparent;
  border: 0;
  padding: .35rem .75rem;
  cursor: pointer;
}
.frame-opened__video-close:hover { color: var(--cream); }

/* ---------- Evidence pane ---------- */
.evidence-pane__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.evidence-pane__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--cream);
}
.evidence-pane__count {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.evidence-empty {
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  padding: 3rem 0;
  text-align: center;
  text-transform: uppercase;
}
.evidence-list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.evidence-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
  transition: border-color .15s var(--ease);
}
.evidence-card:hover { border-color: var(--border-hi); }
.evidence-card__thumb {
  width: 64px;
  height: 64px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-alt);
}
.evidence-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.evidence-card__id {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--ice);
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.evidence-card__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--cream);
  margin-bottom: .15rem;
}
.evidence-card__meta {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--text-mute);
}
.evidence-card__added {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--text-mute);
  text-transform: uppercase;
}

/* ---------- Notification stack (§7.2) --------------------
 * Max 3 stacked, bottom-left. Neutral by default; `notif--gate-ready`
 * paints the gold-left accent for the submit-gate crossing event.
 * No `error` / `warning` variants — the game does not tell the player
 * they were wrong (see §7.2 and §12 anti-nudge).
 */
.notif-stack {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column-reverse;   /* newest slides in from the top of the stack */
  gap: .5rem;
  pointer-events: none;
  z-index: 1000;
  max-width: min(28rem, calc(100vw - 2rem));
}
.notif {
  padding: .7rem 1.1rem .7rem .95rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ice);
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .22s var(--ease-out);
}
.notif.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.notif--gate-ready {
  border-left-color: #c8a24b;       /* muted gold — not warning yellow */
  color: #d9bd7e;
}

/* ---------- Sidebar HAS UPDATES dot (§3.2) --------------- */
.tool-btn { position: relative; }
.tool-btn__dot {
  position: absolute;
  top: 50%;
  right: .7rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ice);
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(140, 200, 255, 0.55);
}
/* When both dot AND lock text would render, dot wins (dot only appears on
 * available tools per toolHasUpdates(), but defensive belt-and-braces). */
.tool-btn.is-locked .tool-btn__dot { display: none; }

/* ---------- Topbar breadcrumb (§3.1) --------------------- */
.ws-topbar__breadcrumb {
  flex: 1;
  min-width: 0;
  padding: 0 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ---------- Cursor language (§3.3, CR-3) ----------------- *
 * crosshair on hackable data: handles, dates, coordinates.
 * zoom-in on card images. EVIDENCE cards keep default cursor
 * (no `grab` until real drag lands in S4).
 */
[data-copy="handle"],
[data-copy="date"],
[data-copy="coord"] { cursor: crosshair; }
.frame-post img,
.trace-result img,
.chat-result img,
.atlas-result img { cursor: zoom-in; }

/* ---------- Reset banner ---------- */
.reset-hint {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .14em;
  color: var(--text-mute);
  text-transform: uppercase;
  z-index: 1;
}
.reset-hint button {
  color: var(--text-mute);
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
}
.reset-hint button:hover { color: var(--red); }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .ws-sidebar { flex: 0 0 130px; }
  .ws-main { padding: 1rem; }
  .frame-header { grid-template-columns: 88px 1fr; gap: 1rem; }
  .frame-avatar { width: 88px; height: 88px; }
  .tool-btn { padding: .55rem .75rem; font-size: .7rem; }
}

/* ==========================================================
   TRACE — face-search / reverse-image lookup surface
   Editorial-forensic composition. Real portraits command the eye,
   results are hairline-separated bands (an index, not a card grid).
   ========================================================== */
.trace { max-width: 820px; margin: 0 auto; padding: .25rem 0 2rem; }

/* ── State A / header ────────────────────────────────────── */
.trace__header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
}
.trace__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.trace__form { display: flex; gap: .5rem; }
.trace__input {
  flex: 1;
  padding: .8rem .95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .92rem;
  outline: none;
  transition: border-color .15s var(--ease);
}
.trace__input:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}
.trace__input::placeholder { color: var(--text-mute); }
.trace__hint {
  margin-top: .8rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--text-dim);
  letter-spacing: .01em;
}

/* ── State B / results index ─────────────────────────────── */
.trace__results { min-height: 200px; }
.trace__meta {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--text-mute);
  text-transform: uppercase;
  padding-bottom: .7rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}
.trace__meta b { color: var(--text-dim); font-weight: 500; }

.trace__empty,
.atlas__empty,
.archive__empty,
.chat__empty {
  padding: 2.5rem 0 1rem;
}
.trace__empty-title,
.atlas__empty-title,
.archive__empty-title,
.chat__empty-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-dim);
  margin-bottom: .3rem;
}
.trace__empty-note,
.atlas__empty-note,
.archive__empty-note,
.chat__empty-note {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-mute);
  letter-spacing: .06em;
}

.trace__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
.trace-result {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s var(--ease);
  outline: none;
}
.trace-result:last-child { border-bottom: none; }
.trace-result:hover .trace-result__name,
.trace-result:focus-visible .trace-result__name { color: var(--ice); }
.trace-result:hover .trace-inspect,
.trace-result:focus-visible .trace-inspect { color: var(--ice); border-color: var(--ice); }

.trace-result__face {
  width: 96px;
  height: 96px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  aspect-ratio: 1 / 1;
}
.trace-result__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
}

.trace-result__body { min-width: 0; }
.trace-result__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: .35rem;
}
.trace-result__name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--cream);
  line-height: 1.15;
  transition: color .15s var(--ease);
}
.trace-result__handle {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-mute);
  letter-spacing: .04em;
}
.trace-result__snippet {
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: .4rem;
}
.trace-result__signal {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.trace-result__source { color: var(--text-dim); }
.trace-result__sep { color: var(--border-hi); }

.trace-result__action { padding-left: .5rem; }
.trace-inspect {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  transition: color .15s var(--ease), border-color .15s var(--ease);
  white-space: nowrap;
}

/* ── State C / candidate detail ──────────────────────────── */
.trace-detail { max-width: 820px; margin: 0 auto; padding: .25rem 0 2rem; }
.trace-detail__back {
  margin-bottom: 1.5rem;
  display: inline-block;
}
.trace-detail__body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.trace-detail__portrait { width: 240px; }
.trace-detail__portrait .tx-letterbox { width: 240px; }
.trace-detail__portrait img { object-position: center 32%; }

.trace-detail__meta { min-width: 0; }
.trace-detail__handle {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-mute);
  letter-spacing: .06em;
  margin-bottom: .35rem;
}
.trace-detail__name {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--cream);
  line-height: 1.1;
  margin-bottom: 1.1rem;
}
.trace-detail__facts {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-dim);
  margin-bottom: 1.2rem;
}
.trace-detail__k {
  color: var(--text-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .68rem;
  margin-right: .4rem;
}
.trace-detail__bio {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--text);
  line-height: 1.55;
  white-space: pre-line;
}

.trace-detail__source {
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.trace-detail__source-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--text-mute);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.trace-detail__source-line {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-dim);
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.trace-detail__actions {
  display: flex;
  gap: .8rem;
  align-items: center;
}
@media (max-width: 720px) {
  .trace-detail__body { grid-template-columns: 1fr; }
  .trace-detail__portrait, .trace-detail__portrait .tx-letterbox { width: 100%; max-width: 320px; }
  .trace-result { grid-template-columns: 80px 1fr; }
  .trace-result__face { width: 80px; height: 80px; }
  .trace-result__action { grid-column: 2; padding-left: 0; }
}
.link-back {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  padding: 0;
  cursor: pointer;
  transition: color .15s var(--ease);
}
.link-back:hover { color: var(--ice); }

/* ==========================================================
   ARCHIVE — historical snapshots
   ========================================================== */
.archive { max-width: 780px; margin: 0 auto; }
.archive__header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.archive__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.archive__form { display: flex; gap: .5rem; }
.archive__input {
  flex: 1;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .92rem;
  outline: none;
  transition: border-color .15s var(--ease);
}
.archive__input:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}
.archive__input::placeholder { color: var(--text-mute); }
.archive__hint {
  margin-top: .7rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-mute);
}
.archive__meta {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-bottom: .8rem;
}
.archive__meta b { color: var(--cream); font-weight: 500; }
.archive__empty {
  padding: 2.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
}
.archive__empty-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--steel);
  margin-bottom: .3rem;
}
.archive__empty-note {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-mute);
  letter-spacing: .06em;
}

.archive__list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.archive-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.archive-item:hover {
  border-color: var(--border-hi);
  background: var(--surface-2);
}
.archive-item__date {
  font-family: var(--font-mono);
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--ice);
}
.archive-item__url {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--text-mute);
  margin-bottom: .3rem;
}
.archive-item__note {
  font-size: .86rem;
  color: var(--text);
  line-height: 1.5;
}

/* ---------- Snapshot detail (historical document view) ---------- */
.snapshot { max-width: 720px; margin: 0 auto; }
.snapshot__title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.snapshot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 1.25rem;
}
.snapshot__field-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.snapshot__field-value {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--cream);
}
.snapshot__field-value--mono {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  word-break: break-all;
}

.snapshot__preview {
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 1.1rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.snapshot__preview img {
  max-width: 100%;
  display: inline-block;
  border: 1px solid var(--border);
}
.snapshot__preview-caption {
  margin-top: .7rem;
  font-family: var(--font-serif);
  font-size: .95rem;
  color: var(--text-dim);
  font-style: italic;
}

.snapshot__note {
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--border-hi);
  background: var(--surface);
  margin-bottom: 1.25rem;
}
.snapshot__note-body {
  color: var(--text);
  font-size: .92rem;
  line-height: 1.55;
  white-space: pre-line;
}

/* ---------- S5.2 · Cached-page snapshot detail ---------- */
.archive-chrome { max-width: 780px; margin: 0 auto 1.25rem; }
.archive-cached-tag { white-space: nowrap; }
.archive-actions { max-width: 780px; margin: 0 auto; }

.archive-item__captured {
  display: block;
  font-size: .58rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.archive-item__stamp {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ice);
  font-variant-numeric: tabular-nums;
}

/* Scoped desaturation — reads as a mildly aged capture. Overrides ONLY
   inside this container; global tokens untouched. */
.archive-body {
  --ice: #6b7ea3;
  --ice-glow: #8391ad;
  --cream: #d3d9e6;
  --text: #a9b1c2;
  --text-dim: #7a8298;
  --text-mute: #5b6377;
  background: #eef1f5;
  color: #2a3040;
  padding: 1.75rem 1.6rem 1.6rem;
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  position: relative;
}
.archive-body__stamp {
  position: absolute;
  top: .55rem;
  right: .75rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: #7a8298;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.archive-body__header {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #cfd6df;
  margin-bottom: 1.1rem;
}
.archive-body__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #d6dae2;
  border: 1px solid #b9c0cb;
  box-shadow: none;
}
.archive-body__avatar > img { filter: saturate(.75) contrast(.95); }
.archive-body__handle {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .05em;
  color: #5b6377;
  margin-bottom: .15rem;
}
.archive-body__name {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1.15;
  color: #1a2030;
  margin-bottom: .55rem;
}
.archive-body__bio {
  font-size: .92rem;
  line-height: 1.5;
  color: #3a4256;
  margin-bottom: .55rem;
  max-width: 46ch;
}
.archive-body__footer {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: #6b7387;
  text-transform: uppercase;
}
.archive-body__stats {
  display: flex;
  gap: 2.2rem;
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid #cfd6df;
}
.archive-body__stats li {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: #6b7387;
  letter-spacing: .06em;
}
.archive-body__stats b {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.15rem;
  color: #1a2030;
  font-variant-numeric: tabular-nums;
}
.archive-body__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
}
.archive-body__tile { margin: 0; }
.archive-body__tile .tx-letterbox {
  background: #cfd6df;
  border: 1px solid #b9c0cb;
  box-shadow: none;
}
.archive-body__tile img { filter: saturate(.72) contrast(.95); }
.archive-body__empty {
  padding: 2.2rem 1rem;
  text-align: center;
  border: 1px dashed #b9c0cb;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: #6b7387;
  text-transform: uppercase;
}
.archive-body__legacy { padding: 1.25rem; }

/* ==========================================================
   CHAT — messenger handle lookup
   ========================================================== */
.chat { max-width: 720px; margin: 0 auto; }
.chat__header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.chat__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.chat__form { display: flex; gap: .5rem; }
.chat__input {
  flex: 1;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .92rem;
  outline: none;
  transition: border-color .15s var(--ease);
}
.chat__input:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}
.chat__input::placeholder { color: var(--text-mute); }
.chat__hint {
  margin-top: .7rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-mute);
}
.chat__meta {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-bottom: .8rem;
}
.chat__meta b { color: var(--cream); font-weight: 500; }
.chat__empty {
  padding: 2.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
}
.chat__empty-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--steel);
  margin-bottom: .3rem;
}
.chat__empty-note {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-mute);
  letter-spacing: .06em;
}
.chat__list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.chat-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
  transition: background .15s var(--ease);
}
.chat-result:hover {
  background: var(--surface-2);
}
.chat-result__handle {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--text-dim);
  letter-spacing: .04em;
  margin-top: .1rem;
}
.chat-result__name {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  color: var(--cream);
  line-height: 1.15;
}
.chat-result__snippet {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--text-mute);
  margin-top: .35rem;
}

/* ---------- Avatar circles used by CHAT (both results row + profile) ---------- */
.chat-avatar {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-avatar--sm { width: 48px; height: 48px; }
.chat-avatar--lg { width: 112px; height: 112px; margin: 0 auto; }

/* ---------- CHAT profile detail (messaging-app public profile) ---------- */
.chat-profile { max-width: 560px; margin: 0 auto; }
.chat-profile__topbar {
  margin-bottom: 1.5rem;
}
.chat-profile__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 2.2rem 1.5rem 1.6rem;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  margin-bottom: 1.25rem;
}
.chat-profile__card .chat-avatar--lg {
  margin-bottom: .5rem;
}
.chat-profile__name {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: var(--cream);
  line-height: 1.15;
}
.chat-profile__handle {
  font-family: var(--font-mono);
  font-size: .88rem;
  letter-spacing: .04em;
  color: var(--text-dim);
}
.chat-profile__bio {
  font-family: var(--font-sans, var(--font-serif));
  font-size: .96rem;
  color: var(--cream);
  max-width: 40ch;
  line-height: 1.45;
  margin-top: .35rem;
}
.chat-profile__meta {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-top: .4rem;
}
.chat-last-seen {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-mute);
}
.chat-message-glyph {
  margin-top: .9rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  user-select: none;
}

/* ==========================================================
   REPORT — evidence audit (derived, no state)
   ========================================================== */
.report { max-width: 640px; margin: 0 auto; }
.report__title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.report-section { margin-bottom: 1.4rem; }
.report-section__title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .6rem;
}
.report-section__items {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.report-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .5rem;
  padding: .35rem 0;
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.4;
}
.report-item__mark {
  font-family: var(--font-mono);
  font-size: .95rem;
  line-height: 1;
}
.report-item.is-met .report-item__mark {
  color: var(--steel-hi);
}
.report-item.is-met .report-item__label {
  color: var(--text);
}
.report-item.is-missing .report-item__mark {
  color: var(--ice);
}
.report-item.is-missing .report-item__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.report-item.is-missing .report-item__label {
  color: var(--text);
}
.report-item__missing {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  color: var(--ice);
  text-transform: uppercase;
}

.report__divider {
  height: 1px;
  background: var(--border);
  margin: 1.5rem 0 1.25rem;
}
.report__verdict {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--cream);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.report__verdict.is-complete {
  color: var(--steel-hi);
}
.report__actions {
  display: flex;
  gap: .6rem;
}

/* ==========================================================
   ATLAS — location & professional-record lookup
   ========================================================== */
.atlas { max-width: 720px; margin: 0 auto; }
.atlas__header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.atlas__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.atlas__form { display: flex; gap: .5rem; }
.atlas__input {
  flex: 1;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .92rem;
  outline: none;
  transition: border-color .15s var(--ease);
}
.atlas__input:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}
.atlas__input::placeholder { color: var(--text-mute); }
.atlas__hint {
  margin-top: .7rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-mute);
}
.atlas__meta {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-bottom: .8rem;
}
.atlas__meta b { color: var(--cream); font-weight: 500; }
.atlas__empty {
  padding: 2.5rem 1rem;
  text-align: center;
  border: 1px dashed var(--border);
}
.atlas__empty-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--steel);
  margin-bottom: .3rem;
}
.atlas__empty-note {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-mute);
  letter-spacing: .06em;
}
.atlas__list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.atlas-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.atlas-result:hover {
  border-color: var(--border-hi);
  background: var(--surface-2);
}
.atlas-result__subject {
  font-family: var(--font-mono);
  font-size: .92rem;
  color: var(--ice);
  margin-bottom: .2rem;
}
.atlas-result__status {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--cream);
  margin-bottom: .3rem;
}
.atlas-result__line {
  font-family: var(--font-serif);
  font-size: .92rem;
  color: var(--text-dim);
}

/* ---------- Claim detail (document view) ---------- */
.atlas-claim { max-width: 960px; margin: 0 auto; }
.atlas-claim__title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* --- S5.4 exhibit composition: two-column map + facts, inset below --- */
.atlas-claim__exhibit {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.35rem;
  align-items: stretch;
  margin-bottom: 1.35rem;
}
.atlas-claim__map-col { min-width: 0; }
.atlas-claim__facts-col { min-width: 0; }

@media (max-width: 900px) {
  .atlas-claim__exhibit { grid-template-columns: 1fr; }
}

/* Map: static PNG background, subtle pin overlay. No cyber-map styling. */
.atlas-map {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid var(--border);
}
.atlas-map__pin {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--ice);
  box-shadow:
    0 0 0 3px rgba(0, 0, 0, .55),
    0 0 0 5px rgba(180, 220, 240, .35);
}
.atlas-map__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 22px;
  margin-left: -0.5px;
  background: linear-gradient(to bottom, var(--ice), transparent);
  opacity: .7;
}

/* Facts column: face + subject + status + records + short note. */
.atlas-facts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--border);
  background: var(--surface);
  height: 100%;
}
.atlas-facts__head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.atlas-facts__avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  flex: 0 0 68px;
  border: 1px solid var(--border);
}
.atlas-facts__avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.atlas-facts__name {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  color: var(--cream);
  line-height: 1.15;
}
.atlas-facts__location {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-top: .3rem;
}
.atlas-facts__status-row {
  display: flex;
  align-items: baseline;
  gap: .8rem;
}
.atlas-facts__k {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.atlas-facts__status {
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .12em;
  color: var(--ice);
  text-transform: uppercase;
}
.atlas-facts__records { display: flex; flex-direction: column; gap: .5rem; }
.atlas-facts__note {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text);
  font-size: .92rem;
  line-height: 1.5;
  white-space: pre-line;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}

/* Records list: one row per record, hairline separators. */
.atlas-records {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.atlas-record {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: .7rem;
  padding: .35rem 0;
  border-bottom: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .04em;
}
.atlas-record:last-child { border-bottom: none; }
.atlas-record__name { color: var(--text); text-transform: uppercase; letter-spacing: .12em; }
.atlas-record__result { color: var(--text-mute); }

/* Inset: bounded card, evidence-photo treatment. */
.atlas-claim__inset-row {
  display: flex;
  justify-content: flex-start;
  padding-top: 1.1rem;
  margin-top: .1rem;
  border-top: 1px solid var(--border);
  margin-bottom: 1.35rem;
}
.atlas-inset {
  width: 300px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.atlas-inset .tx-letterbox {
  border: 1px solid var(--border);
  background: var(--surface);
}
.atlas-inset__caption {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
}

/* --- Results list (S5.4 editorial: face + name + status + line) --- */
.atlas-result {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1rem;
  align-items: center;
  cursor: pointer;
}
.atlas-result__face {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.atlas-result__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-result__title {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}
.atlas-result__name {
  font-family: var(--font-serif);
  color: var(--cream);
  font-size: 1.02rem;
}
.atlas-result__handle {
  font-family: var(--font-mono);
  color: var(--text-mute);
  font-size: .78rem;
}
.atlas-result__body { min-width: 0; }
.atlas-inspect {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--ice);
  text-transform: uppercase;
}

/* ---------- REPORT · independent findings (optional) ---------- */
.report__divider--wide {
  margin: 2rem 0 1.5rem;
  height: 1px;
  background: var(--border);
  opacity: .6;
}
.report-findings {
  padding-top: .25rem;
}
.report-findings__title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.report-findings__note {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-mute);
  font-style: italic;
  margin-bottom: 1rem;
}
.report-findings__items {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.report-finding {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  font-family: var(--font-serif);
  font-size: .96rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.report-finding.is-collected {
  color: var(--text);
}
.report-finding__label { flex: 1; }
.report-finding__status {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  color: var(--steel-hi);
  text-transform: uppercase;
}

/* ==========================================================
   REPORT · investigation quality + submit + outcome (Session 8)
   ========================================================== */
.quality {
  padding-top: .25rem;
}
.quality__title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.quality__rows {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.quality-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: .8rem;
}
.quality-row:last-child { border-bottom: none; }
.quality-row__label { color: var(--text-dim); letter-spacing: .05em; }
.quality-row__value { color: var(--cream); }

.finalform {
  padding-top: .25rem;
}
.finalform__title {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.finalform__field { margin-bottom: 1.25rem; }
.finalform__label {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--cream);
  margin-bottom: .55rem;
}
.finalform__input {
  width: 100%;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .92rem;
  outline: none;
  transition: border-color .15s var(--ease);
}
.finalform__input:focus {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}
.finalform__input::placeholder { color: var(--text-mute); }
.finalform__options {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  padding: .55rem .7rem;
  background: var(--surface);
}
.finalform__option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .55rem;
  align-items: baseline;
  padding: .3rem .1rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 1px dashed var(--border);
}
.finalform__option:last-child { border-bottom: none; }
.finalform__option:hover { color: var(--cream); }
.finalform__option.is-selected { color: var(--ice); }
.finalform__option input { accent-color: var(--ice); cursor: pointer; }
.finalform__no-evidence {
  padding: 1rem 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-mute);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.finalform__actions { margin-top: 1rem; }

.outcome {
  padding: 1.25rem 1.15rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.outcome__label {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.outcome__verdict {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  color: var(--cream);
  letter-spacing: -.01em;
  margin-bottom: .5rem;
}
.outcome.is-solved .outcome__verdict { color: var(--ice); }
.outcome.is-closed .outcome__verdict { color: var(--steel-hi); }
.outcome__headline {
  color: var(--text);
  margin-bottom: 1rem;
  font-size: .96rem;
  line-height: 1.5;
}
.outcome__grid {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
}
.outcome__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1rem;
  padding: .3rem 0;
  font-family: var(--font-mono);
  font-size: .8rem;
}
.outcome__key { color: var(--text-dim); letter-spacing: .05em; }
.outcome__value { color: var(--cream); }

/* ==========================================================
   ANALYST MODE — post-submission methodology explainer
   ========================================================== */
.analyst { max-width: 720px; margin: 0 auto; }
.analyst__title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.analyst__intro {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 60ch;
}
.analyst__divider {
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}
.analyst__divider--wide { margin: 2.5rem 0 1.75rem; }
.analyst__empty {
  padding: 2rem 0;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--text-mute);
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.analyst-concept {
  display: block;
}
.analyst-concept__eyebrow {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .28em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.analyst-concept__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--cream);
  letter-spacing: -.01em;
  line-height: 1.15;
  margin-bottom: 1.1rem;
}

.analyst-block {
  margin-bottom: 1rem;
}
.analyst-block:last-child { margin-bottom: 0; }
.analyst-block__label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .4rem;
}
.analyst-block__body {
  font-family: var(--font-serif);
  font-size: .98rem;
  color: var(--text);
  line-height: 1.6;
  max-width: 62ch;
}
.analyst-block--ref .analyst-block__body {
  color: var(--text-dim);
  font-style: italic;
}

.analyst-obs__list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.analyst-obs__item {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: .55rem;
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: .98rem;
  color: var(--text);
  line-height: 1.55;
}
.analyst-obs__mark {
  color: var(--steel-hi);
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1;
}
.analyst-obs__text { max-width: 60ch; }
.analyst-obs--empty {
  font-family: var(--font-serif);
  font-size: .95rem;
  color: var(--text-dim);
  font-style: italic;
  padding: .3rem 0;
  max-width: 60ch;
}

.analyst-hook {
  padding: 1.5rem 1.25rem;
  border-left: 2px solid var(--ice);
  background: var(--surface);
}
.analyst-hook__text {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: .75rem;
  max-width: 60ch;
}
.analyst-hook__cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--ice);
  text-transform: uppercase;
  text-decoration: none;
  padding: .5rem .9rem;
  border: 1px solid var(--ice);
  transition: all .15s var(--ease);
}
.analyst-hook__cta:hover {
  background: var(--ice);
  color: var(--bg);
}

/* ==========================================================
   Language switcher — global, always visible
   ========================================================== */
.lang-switch {
  position: fixed;
  top: .8rem;
  right: 1rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .3rem .6rem;
  background: rgba(15, 21, 36, .8);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.lang-switch__btn {
  background: none;
  border: none;
  padding: .1rem .25rem;
  cursor: pointer;
  color: var(--text-mute);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color .15s var(--ease);
}
.lang-switch__btn:hover { color: var(--cream); }
.lang-switch__btn.is-active { color: var(--ice); }
.lang-switch__sep { color: var(--text-mute); }

@media (max-width: 720px) {
  .lang-switch { top: .5rem; right: .5rem; font-size: .62rem; }
}

/* ==========================================================
   Game Feel — state-transition animations
   Principle: every animation marks a state change; nothing decorates.
   Durations: 150–250ms for UI micro, 400–700ms for evidence/verdict/outcome.
   ========================================================== */

/* --- P0.2 · locked tools actually read as locked ---------- */
.tool-btn.is-locked {
  opacity: .5;
  filter: grayscale(.6);
}
.tool-btn.is-locked .tool-btn__lock {
  color: var(--text-mute);
}

/* --- P1.2 · evidence counter — badge pulse on change ------ */
@keyframes badge-pulse {
  0%   { transform: scale(1);   background: var(--ice); }
  35%  { transform: scale(1.35); background: var(--ice-glow); }
  100% { transform: scale(1);   background: var(--ice); }
}
.tool-btn__badge.is-changing {
  animation: badge-pulse 420ms var(--ease-out);
}
@keyframes topbar-count-pulse {
  0%   { color: var(--text-mute); }
  40%  { color: var(--ice-glow); }
  100% { color: var(--text-mute); }
}
.ws-topbar__meta.is-changing {
  animation: topbar-count-pulse 500ms var(--ease-out);
}

/* --- P1.1 · Add-to-case button reaction ------------------- */
@keyframes btn-commit {
  0%   { transform: scale(1);    }
  35%  { transform: scale(.94);  }
  100% { transform: scale(1);    }
}
.btn-primary.is-committing {
  animation: btn-commit 260ms var(--ease-out);
}

/* --- P1.3 · verdict flip ⚠ → ✓ ---------------------------- */
@keyframes item-flip {
  0%   { background: transparent; }
  30%  { background: rgba(74,158,255,.16); box-shadow: inset 3px 0 0 var(--ice); }
  100% { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.report-item.is-just-met {
  animation: item-flip 700ms var(--ease-out);
}
.report-item.is-just-met .report-item__mark {
  animation: mark-flip 520ms var(--ease-out);
}
@keyframes mark-flip {
  0%   { transform: scale(.6); color: var(--ice); }
  55%  { transform: scale(1.35); color: var(--ice-glow); }
  100% { transform: scale(1); color: var(--steel-hi); }
}

/* --- P1.4 · outcome reveal (CASE SOLVED / CLOSED) --------- */
@keyframes outcome-land {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes outcome-verdict-land {
  0%   { opacity: 0; transform: translateY(4px); letter-spacing: .04em; }
  100% { opacity: 1; transform: translateY(0);   letter-spacing: -.01em; }
}
.outcome.is-appearing {
  animation: outcome-land 520ms var(--ease-out);
}
.outcome.is-appearing .outcome__verdict {
  animation: outcome-verdict-land 700ms 120ms var(--ease-out) backwards;
}

/* Submit gating helper — neutral, not error styling */
.finalform__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.finalform__helper {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-mute);
  font-style: italic;
}

/* --- P1 · sidebar unlock pulse ---------------------------- */
@keyframes sidebar-unlock {
  0%   { background: transparent; border-left-color: transparent; }
  25%  { background: rgba(74,158,255,.14); border-left-color: var(--ice); }
  100% { background: transparent; border-left-color: transparent; }
}
.tool-btn.is-just-unlocked {
  animation: sidebar-unlock 1400ms var(--ease-out);
}

/* --- B1 · client-brief dim overlay (S2.3, per S2_ACCEPTANCE §7 CR-1) ---
 * `.b1-active` sits on .game-root while the typewriter runs. No modal
 * framework — the welcome section itself becomes the beat surface.
 * A single fade on the backdrop, nothing more.
 */
.game-root.b1-active .welcome::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: b1-dim 400ms var(--ease-out) forwards;
}
@keyframes b1-dim {
  to { opacity: 1; }
}

/* --- B2 · workstation reveal (staggered sidebar tools) ------- */
@keyframes b2-tool-arrive {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0);    }
}
.tool-btn.is-arriving {
  animation: b2-tool-arrive 220ms var(--ease-out) both;
  animation-delay: var(--b2-delay, 0ms);
}

/* --- B4 · first-evidence drawer-close reaction on source card --- */
@keyframes b4-drawer {
  0%   { transform: scale(1);     opacity: 1;   }
  40%  { transform: scale(.985);  opacity: .85; }
  100% { transform: scale(1);     opacity: 1;   }
}
.b4-drawer {
  animation: b4-drawer 380ms var(--ease-out);
}

/* --- Topbar right cluster: timer above meta ---------------- */
.ws-topbar__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .18rem;
  min-width: 0;
}
.ws-topbar__timer {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* S7.4 — mute toggle in topbar. Same utilitarian typography as timer. */
.ws-topbar__mute {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: transparent;
  border: 1px solid transparent;
  padding: 2px 8px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ws-topbar__mute:hover {
  color: var(--text);
  border-color: var(--hairline);
}
.ws-topbar__mute[aria-pressed="true"] {
  color: var(--text-mute);
  opacity: .6;
}

/* ==========================================================
   S7.5 — Cinematic Scheduler beat effect classes.
   9 beats: B3, B5, B6, B7, B8, B9, B10, B11, B12.
   Each class is transient — added by scheduler for effect duration,
   removed automatically. Under prefers-reduced-motion, animations
   collapse to instant swap (no-op) but the state change still occurs.
   ========================================================== */

/* B3 — first photo focus. Subtle brightness pulse. */
.is-b3-focus {
  animation: b3Focus 500ms ease-out;
}
@keyframes b3Focus {
  0%   { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

/* B5 — TRACE result stagger. Three classes for the trio. */
.is-b5-arriving-1 { animation: b5Arrive 600ms ease-out; }
.is-b5-arriving-2 { animation: b5Arrive 600ms ease-out 150ms both; }
.is-b5-arriving-3 { animation: b5Arrive 600ms ease-out 300ms both; }
@keyframes b5Arrive {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* B6 — SAME FRAME overlap highlight (thin rim on matching posts). */
.is-b6-overlap-highlight {
  animation: b6Rim 700ms ease-out;
  outline: 1px solid rgba(255,255,255,0.35);
  outline-offset: -1px;
}
@keyframes b6Rim {
  from { outline-color: rgba(255,255,255,0.6); }
  to   { outline-color: rgba(255,255,255,0); }
}

/* B7 — archive snapshot load bar. Slides across top of pane. */
.is-b7-loading {
  position: relative;
}
.is-b7-loading::after {
  content: ''; position: absolute; top: 0; left: 0; height: 2px;
  background: linear-gradient(to right, transparent, var(--text-mute), transparent);
  animation: b7Load 550ms ease-out forwards;
  pointer-events: none;
}
@keyframes b7Load {
  from { width: 0%; }
  to   { width: 100%; }
}

/* B8 — temporal date emphasis. Typographic weight bump on selected rows. */
.is-b8-temporal-emphasis .evidence-row__provenance,
.is-b8-temporal-emphasis .evidence-row__sub {
  animation: b8Emphasis 1200ms ease-out;
}
@keyframes b8Emphasis {
  0%   { color: var(--text); font-weight: 500; }
  50%  { color: var(--text); font-weight: 500; }
  100% { color: var(--text-mute); font-weight: 300; }
}

/* B9 — wrong-pick orange flash on report row. */
.is-b9-wrong-flash {
  animation: b9Flash 600ms ease-out;
}
@keyframes b9Flash {
  0%, 100% { background: transparent; }
  30%      { background: rgba(230, 130, 40, 0.15); }
}

/* B10 — chat handle recognition. Subtle underline appearing then fading. */
.is-b10-handle-recog {
  animation: b10Recog 800ms ease-out;
}
@keyframes b10Recog {
  0%   { text-decoration-color: transparent; }
  40%  { text-decoration: underline; text-decoration-color: var(--text-mute); }
  100% { text-decoration: underline; text-decoration-color: transparent; }
}

/* B11 — atlas pin drop bounce. Applied to the pin element. */
.is-b11-pin-drop {
  animation: b11Pin 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes b11Pin {
  0%   { transform: translate(-50%, -140%); opacity: 0; }
  60%  { transform: translate(-50%, -50%); opacity: 1; }
  75%  { transform: translate(-50%, -60%); }
  100% { transform: translate(-50%, -50%); }
}

/* B12 — submit-gate perimeter trace + verdict unfold. */
.is-b12-gate-open {
  animation: b12Gate 900ms ease-out;
}
@keyframes b12Gate {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%  { box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
  100% { box-shadow: 0 0 0 1px rgba(255,255,255,0); }
}

/* Reduced-motion: all beat animations collapse to instant swap. */
@media (prefers-reduced-motion: reduce) {
  .is-b3-focus,
  .is-b5-arriving-1, .is-b5-arriving-2, .is-b5-arriving-3,
  .is-b6-overlap-highlight,
  .is-b7-loading::after,
  .is-b8-temporal-emphasis .evidence-row__provenance,
  .is-b8-temporal-emphasis .evidence-row__sub,
  .is-b9-wrong-flash,
  .is-b10-handle-recog,
  .is-b11-pin-drop,
  .is-b12-gate-open { animation: none !important; transition: none !important; }
}

/* --- Reduced motion (§8.3 + S2_ACCEPTANCE §11.6) ---------- *
 * Collapse every animation/transition to an instant swap so state
 * changes remain observable but no motion plays.
 */
@media (prefers-reduced-motion: reduce) {
  .tool-btn.is-arriving,
  .tool-btn.is-just-unlocked,
  .btn-primary.is-committing,
  .b4-drawer,
  .report-item.is-just-met,
  .report-item.is-just-met .report-item__mark,
  .game-root.b1-active .welcome::before,
  .notif { animation: none !important; transition: none !important; }
  .notif.is-visible { opacity: 1; transform: none; }
}

/* ==========================================================
   S4 — EVIDENCE (index-card stack + linking picker + detail)
   Reuses Phase 1 tokens. No shadows, no rounded pills, no
   badges, no filters. Hairline separators between rows.
   ========================================================== */

.evidence-pane {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 0;
}
.evidence-pane__body {
  display: block;
}
.evidence-pane--split .evidence-pane__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .evidence-pane--split .evidence-pane__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.evidence-pane .evidence-list {
  display: block;
  gap: 0;
}

/* Row — no card box; hairline separator BELOW (not around). */
.evidence-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
  cursor: pointer;
  transition: opacity .15s var(--ease);
}
.evidence-row:first-child { padding-top: .25rem; }
.evidence-row.is-dim { opacity: .35; }
.evidence-row.is-expanded .evidence-row__title { color: var(--ice-glow); }
.evidence-row.is-pick-target .evidence-row__link { color: var(--ice); border-color: var(--ice); }
.evidence-row.is-pick-source .evidence-row__link { color: var(--gold); border-color: var(--gold); }

.evidence-row__thumb {
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.evidence-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.evidence-row__body { min-width: 0; }
.evidence-row__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--cream);
  line-height: 1.25;
  margin-bottom: .2rem;
}
.evidence-row__sub {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evidence-row__provenance {
  margin-top: .35rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.evidence-row__id {
  align-self: start;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  color: var(--ice);
  text-transform: uppercase;
  padding-top: .25rem;
}
.evidence-row__link {
  align-self: start;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .3rem .55rem;
  cursor: pointer;
  transition: color .12s var(--ease), border-color .12s var(--ease);
}
.evidence-row__link:hover { color: var(--cream); border-color: var(--border-hi); }

.evidence-row--pair-top { border-bottom: none; padding-bottom: .5rem; }
.evidence-row--pair-bottom { padding-top: .5rem; }

.evidence-link-caption {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem 0 .3rem 72px;
  border-bottom: none;
  color: var(--steel-hi);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.evidence-link-caption__glyph { color: var(--ice); }
.evidence-link-caption__reason {
  padding: .18rem .55rem;
  border: 1px solid var(--border-hi);
  color: var(--steel-hi);
  background: var(--surface);
}
.evidence-link-caption__unlink {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .2rem .4rem;
  cursor: pointer;
}
.evidence-link-caption__unlink:hover { color: var(--cream); }

.evidence-picker {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-hi);
  background: var(--surface);
}
.evidence-picker__prompt {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--cream);
  font-style: italic;
  flex: 1;
}
.evidence-picker__reason {
  padding: .45rem .6rem;
  background: var(--bg-alt);
  border: 1px solid var(--border-hi);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
}
.evidence-picker__cancel {
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.evidence-picker__cancel:hover { color: var(--cream); }

.evidence-detail {
  position: sticky;
  top: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
}
.evidence-detail__eyebrow {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  color: var(--ice);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.evidence-detail__title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: .25rem;
}
.evidence-detail__sub {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-bottom: 1rem;
  word-break: break-all;
}
.evidence-detail__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  margin-bottom: .8rem;
}
.evidence-detail__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evidence-detail__provenance {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: .5rem 0;
  border-top: 1px solid var(--border);
}
.evidence-detail__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .3rem .8rem;
  margin: .8rem 0 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-dim);
}
.evidence-detail__meta dt { color: var(--text-mute); text-transform: uppercase; letter-spacing: .14em; }
.evidence-detail__meta dd { color: var(--text); margin: 0; word-break: break-word; }
.evidence-detail__links-title {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .4rem;
}
.evidence-detail__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
}
.evidence-detail__links li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.evidence-detail__link-glyph { color: var(--ice); }
.evidence-detail__link-target {
  color: var(--ice-glow);
  cursor: pointer;
  border-bottom: 1px dotted var(--border-hi);
}
.evidence-detail__link-target:hover { color: var(--ice); }
.evidence-detail__link-reason {
  color: var(--text-mute);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ==========================================================
   S4 — REPORT as document (single scroll)
   ========================================================== */

.report-doc {
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
  color: var(--text);
  font-family: var(--font-serif);
}
.report-doc__eyebrow {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .28em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.report-doc__eyebrow--doc {
  color: var(--ice);
  margin-bottom: .2rem;
}
.report-doc__doc-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  color: var(--cream);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.report-doc__lede {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-dim);
  line-height: 1.5;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.8rem;
  max-width: 52ch;
}

.report-doc__section {
  padding: 1.1rem 0 1.4rem;
  border-bottom: 1px solid var(--border);
}
.report-doc__section:last-of-type { border-bottom: none; }
.report-doc__section-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-doc .report-item {
  padding: .25rem 0;
  display: block;
  grid-template-columns: none;
  font-family: var(--font-serif);
}
.report-doc .report-item__label {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  color: var(--cream);
  line-height: 1.35;
  margin-bottom: .2rem;
}
.report-doc .report-item.is-empty .report-item__label {
  color: var(--text-dim);
}
/* ✚ badge for criterion rows that earned a linked-pair bonus (V2 §6.2). */
.report-doc .report-item__link-badge {
  display: inline-block;
  margin-left: .45rem;
  font-family: var(--font-mono, monospace);
  font-size: .85em;
  font-weight: 600;
  color: var(--accent, #d5b981);
  vertical-align: baseline;
  cursor: help;
}
.report-doc .report-item.has-link-bonus .report-item__label {
  /* Subtle emphasis; badge does the semantic work. */
}
.report-doc .report-item__placeholder {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-style: italic;
  color: var(--text-mute);
  line-height: 1.4;
}
.report-doc .report-item__evidence-list {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0 0 0 .8rem;
  border-left: 1px solid var(--border-hi);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.report-doc .report-item__evidence {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem;
  align-items: baseline;
}
.report-doc .report-item__evidence-id {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ice);
}
.report-doc .report-item__evidence-excerpt {
  font-family: var(--font-serif);
  font-size: .98rem;
  color: var(--text);
}

.report-doc__corroboration-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--text-mute);
  margin-bottom: .6rem;
}
.report-doc__corroboration-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.report-doc__corroboration-item {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-family: var(--font-serif);
  color: var(--text-dim);
}
.report-doc__corroboration-item.is-collected { color: var(--text); }
.report-doc__corroboration-label { flex: 1; }
.report-doc__corroboration-status {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--steel-hi);
}

.report-doc__attribution {
  padding: 1.6rem 0 1.2rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border-hi);
}
.report-doc__attribution-question {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--cream);
  margin-bottom: .8rem;
}
.report-doc__attribution-input {
  display: block;
  width: 100%;
  padding: .75rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border-hi);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  outline: none;
  transition: border-color .15s var(--ease);
  margin-bottom: 1.2rem;
}
.report-doc__attribution-input::placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-mute);
}
.report-doc__attribution-input:focus { border-color: var(--ice); }
.report-doc__evidence-prompt {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .6rem;
}
.report-doc__evidence-options {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  margin-bottom: 1.2rem;
}
.report-doc__option {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--text-dim);
  cursor: pointer;
}
.report-doc__option:hover { color: var(--cream); }
.report-doc__option.is-selected { color: var(--ice); }
.report-doc__option input { accent-color: var(--ice); cursor: pointer; }
.report-doc__no-evidence {
  padding: .8rem 0;
  color: var(--text-mute);
  font-family: var(--font-serif);
  font-style: italic;
}
.report-doc__submit { margin-top: .5rem; }
.report-doc__submit-btn {
  padding: .8rem 1.4rem;
  background: transparent;
  border: 1px solid var(--ice);
  color: var(--ice);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.report-doc__submit-btn:hover:not(:disabled) {
  background: var(--ice);
  color: var(--bg);
}
.report-doc__submit-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.report-doc__helper {
  margin-top: .6rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--text-mute);
}

.report-doc__footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ---------- How to play button + modal ------------------- *
 * Visually matched to .lang-switch (same top, same visual weight,
 * same padding/blur/bg/border) so both fixed corner chips read as one row.
 */
.howto-btn {
  position: fixed;
  top: .8rem;
  right: 7.2rem;   /* left of .lang-switch (which sits at right: 1rem with ~5.5rem width) */
  z-index: 100;
  display: inline-flex;
  align-items: center;
  padding: .3rem .6rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-mute);
  background: rgba(15, 21, 36, .8);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.howto-btn:hover,
.howto-btn:focus-visible {
  color: var(--cream);
  border-color: var(--ice);
  outline: none;
}
@media (max-width: 720px) {
  .howto-btn { top: .5rem; right: 6rem; font-size: .62rem; padding: .25rem .5rem; }
}
.howto-modal[hidden] { display: none !important; }
.howto-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.howto-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, .82);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.howto-modal__sheet {
  position: relative;
  z-index: 1;
  max-width: 42rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: var(--bg, #0c0c10);
  border: 1px solid var(--border, #2a2a30);
  padding: 2rem 2rem 1.6rem;
  color: var(--cream, #d9d9d9);
  font-family: var(--font-mono, monospace);
  border-radius: 3px;
}
.howto-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-mute, #8492a8);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  transition: color .15s;
}
.howto-modal__close:hover,
.howto-modal__close:focus-visible {
  color: var(--cream, #d9d9d9);
  outline: none;
}
.howto-modal__title {
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream, #d9d9d9);
  margin: 0 0 1.2rem;
  padding-right: 2rem;
}
.howto-modal__lead {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--cream, #d9d9d9);
  margin: 0 0 1.4rem;
}
.howto-modal__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem;
  counter-reset: howto;
}
.howto-modal__list li {
  counter-increment: howto;
  padding: .7rem 0 .7rem 2.2rem;
  border-top: 1px solid var(--border, #2a2a30);
  position: relative;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--cream, #d9d9d9);
}
.howto-modal__list li:last-child { border-bottom: 1px solid var(--border, #2a2a30); }
.howto-modal__list li::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: .7rem;
  width: 1.6rem;
  font-family: var(--font-mono, monospace);
  font-size: .78rem;
  color: var(--ice, #8cc8ff);
  letter-spacing: .1em;
}
.howto-modal__list li b {
  color: var(--ice, #8cc8ff);
  font-family: var(--font-mono, monospace);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}
.howto-modal__note {
  font-family: var(--font-serif, Georgia, serif);
  font-size: .9rem;
  font-style: italic;
  color: var(--text-mute, #8492a8);
  line-height: 1.5;
  margin: 0;
}
/* Hide howto button while brand intro is playing (keeps intro clean). */
.brand-intro:not([hidden]) ~ .howto-btn,
.brand-intro:not([hidden]) ~ .howto-modal { display: none; }

/* ---------- Brand Intro cinematic (12.5s, plays once) ---- *
 * Adapted from intro_prototype.html — same timing/typography,
 * scoped under .brand-intro to avoid welcome/workstation collision.
 * Skip button + localStorage gate wired in workstation.js.
 */
.brand-intro[hidden] { display: none !important; }
.brand-intro {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000;
  color: #d9d9d9;
  font-family: var(--font-mono, monospace);
  overflow: hidden;
}
.brand-intro__smoke {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.brand-intro__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.brand-intro__panther {
  --panther-size: min(62vh, 62vw);
  width: var(--panther-size);
  height: var(--panther-size);
  opacity: 0.02;
  transform: scale(1.02);
  transition:
    opacity 2.5s cubic-bezier(0.4, 0.0, 0.2, 1),
    transform 2.5s cubic-bezier(0.4, 0.0, 0.2, 1);
  background: url('../assets/brand/panther-emblem.png') center / contain no-repeat;
}
.brand-intro__panther.is-revealed {
  opacity: 1;
  transform: scale(1.00);
}
.brand-intro__text-row {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
  color: #6b6b6b;
  font-size: 22px;
  letter-spacing: .35em;
  text-transform: uppercase;
  font-weight: 300;
}
.brand-intro__text-row.is-visible { opacity: 1; }
.brand-intro__text--small { font-size: 15px; letter-spacing: .25em; }
.brand-intro__text--big { font-size: 26px; letter-spacing: .30em; color: #a5a5a5; }
.brand-intro__motto {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transition: opacity .8s ease;
  color: #444;
  font-size: 11px;
  letter-spacing: .5em;
  text-transform: uppercase;
  font-weight: 300;
}
.brand-intro__motto.is-visible { opacity: 1; }
.brand-intro__skip {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  background: transparent;
  border: 1px solid #333;
  color: #666;
  padding: 6px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .2em;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.brand-intro__skip:hover,
.brand-intro__skip:focus-visible {
  border-color: #888;
  color: #d9d9d9;
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .brand-intro__panther { transition: none; }
  .brand-intro__text-row,
  .brand-intro__motto { transition: opacity .1s linear; }
}

/* ---------- Mobile DENY screen (V2 §13.1 + §18.5) --------- *
 * At ≥768px: DENY hidden, welcome + workstation render as usual.
 * At <768px: welcome + workstation hidden, DENY takes the viewport.
 * Pure CSS gate. No JS state, no engine touch.
 */
.ws-deny { display: none; }
@media (max-width: 767px) {
  .welcome,
  .workstation,
  .notif-stack,
  .reset-hint {
    display: none !important;
  }
  .ws-deny {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--bg);
    color: var(--cream);
    font-family: var(--font-mono, monospace);
    overflow-y: auto;
  }
  .ws-deny__sheet {
    max-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: center;
  }
  .ws-deny__eyebrow {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--text-mute);
  }
  .ws-deny__title {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    line-height: 1.35;
    letter-spacing: .08em;
    margin: 0;
    color: var(--cream);
  }
  .ws-deny__body {
    font-family: var(--font-mono);
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
    color: var(--cream);
  }
  .ws-deny__note {
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.45;
    margin: 0;
    color: var(--text-mute);
  }
  .ws-deny__cta {
    display: inline-block;
    margin-top: .5rem;
    padding: .8rem 1.1rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ice, #8cc8ff);
    border: 1px solid var(--ice, #8cc8ff);
    border-radius: 2px;
    transition: background .15s var(--ease, ease), color .15s var(--ease, ease);
  }
  .ws-deny__cta:hover,
  .ws-deny__cta:focus-visible {
    background: var(--ice, #8cc8ff);
    color: var(--bg, #0d0d10);
    outline: none;
  }
}