/* ============================================================
   THE MISSING APPROVAL - Meridian Compliance Workspace

   A case management surface, not a course and not a form.
   Ink chrome frames a neutral desk. Records sit on the desk as
   white paper. The system is dark, the evidence is light, and
   the player can always tell the two apart.

   Local font stacks only. No CDN, no external fonts.
   ============================================================ */

:root {
  /* ---- the game shell: deep indigo ink, not neutral grey ---- */
  --ink-950:   #0d1128;
  --ink-900:   #141936;
  --ink-800:   #1d2450;
  --ink-700:   #2a3268;
  --ink-line:  #2f3a72;
  --ink-text:  #e6eaff;
  --ink-dim:   #a5aede;
  --ink-faint: #7b85bb;

  /* ---- paper. There is no beige desk any more: the environment
          carries through and records float on it as white cards ---- */
  --paper:     #ffffff;
  --desk-2:    #f4f6fb;   /* the quiet fill inside a white card */
  --edge:      #dde2ee;
  --edge-soft: #eaeef6;

  /* the environment itself, shared by the cover and the game */
  --env: radial-gradient(1100px 620px at 12% -12%, #242c66 0%, transparent 62%),
         radial-gradient(900px 560px at 92% 8%, #123f63 0%, transparent 58%),
         var(--ink-950);

  --text:      #1b1e3a;
  --text-2:    #4e5478;
  --text-3:    #7b81a3;

  /* ---- two brand colours, not one. Aqua is the colour of doing
          something, blue is the colour of the world it happens in.
          Together they are the cover gradient, carried through. ---- */
  --blue:      #4a78f0;
  --blue-lift: #7ea2ff;
  --violet:    #a78bff;
  --brand: linear-gradient(100deg, var(--accent-lift) 0%, var(--blue-lift) 55%, var(--violet) 100%);
  --glyph: linear-gradient(150deg, var(--accent), #4f63d8);

  --accent:      #12a596;
  --accent-deep: #0b7d72;
  --accent-lift: #2ad3bd;
  --accent-wash: rgba(18,165,150,.10);
  --accent-line: rgba(18,165,150,.34);

  /* ---- the four way classification, per spec 79.
          Not traffic lights: suspicious is not "bad" and
          unproven is not "wrong". ---- */
  --fact:      #33407e;   /* indigo: settled, solid */
  --failure:   #d2483c;   /* coral red: serious, still warm */
  --indicator: #7d55d6;   /* violet: worth looking at */
  --unproven:  #8189ac;   /* hollow slate: unproven things look empty */
  --ok:        #1f9c6b;
  --gold:      #e8a72c;   /* reward and progress only */

  --fact-wash:      rgba(51,64,126,.10);
  --failure-wash:   rgba(210,72,60,.10);
  --indicator-wash: rgba(125,85,214,.11);
  --unproven-wash:  rgba(129,137,172,.10);
  --ok-wash:        rgba(31,156,107,.12);

  /* ---- type. Rounded for the game, serif for the paper.
          ui-rounded is a real system generic, so this stays
          dependency free. ---- */
  --ui:  ui-rounded, 'SF Pro Rounded', 'Nunito', 'Varela Round', 'Trebuchet MS',
         system-ui, -apple-system, 'Segoe UI', sans-serif;
  --doc: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Roboto Mono', monospace;

  /* ---- roundness ---- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  --lift-1: 0 2px 4px rgba(20,25,54,.06);
  --lift-2: 0 2px 6px rgba(20,25,54,.07), 0 14px 30px -18px rgba(20,25,54,.40);
  --lift-3: 0 4px 12px rgba(13,17,40,.16), 0 40px 80px -30px rgba(13,17,40,.55);
  --glow:   0 0 0 4px var(--accent-wash);

  --rail-w: 236px;
  --bar-h: 60px;
}

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

html, body { height: 100%; }
body {
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;                 /* desktop is a fixed viewport application */
}

.hidden { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; text-align: left; }

:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--paper); color: var(--text);
  padding: 10px 16px; border-radius: 4px; font-size: 15px; font-weight: 600;
  text-decoration: none; box-shadow: var(--lift-2);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- icon set: flat vector, currentColor, never emoji ---------- */
.ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ic svg { width: 100%; height: 100%; display: block; }
/* safety net: an svg dropped in without its .ic wrapper must never
   expand to fill its parent, which silently destroys a layout */
button > svg, a > svg { width: 20px; height: 20px; flex: none; }

/* ============================================================
   APP SHELL
   ============================================================ */

.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* ---------- top bar ---------- */

.topbar {
  flex: none; height: var(--bar-h);
  display: flex; align-items: center; gap: 20px;
  padding: 0 20px;
  background: var(--ink-950);
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink-text);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand .mark { width: 26px; height: 26px; color: var(--accent-lift); }
.brand .mark svg { width: 100%; height: 100%; }
.brand .name { font-size: 16px; font-weight: 650; letter-spacing: .012em; }
.brand .name span { color: var(--ink-faint); font-weight: 500; }

.topbar .divider { width: 1px; height: 26px; background: var(--ink-line); flex: none; }
.topbar .spacer { flex: 1; }

.caseref {
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
.caseref .num { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-text); }
.caseref .sup {
  font-size: 14px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* clock: the settlement deadline is the pressure, so it is quiet but always there */
.clock { display: flex; align-items: center; gap: 12px; flex: none; }
.clock .now { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: .03em; color: var(--ink-text); }
.clock .meta { font-size: 14px; color: var(--ink-dim); line-height: 1.25; }
.clock .meta b { display: block; font-family: var(--mono); font-weight: 600; color: var(--ink-text); letter-spacing: .02em; }

/* ---------- body: rail + canvas ---------- */

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

.rail {
  flex: none; width: var(--rail-w);
  background: var(--ink-900);
  border-right: 1px solid var(--ink-line);
  display: flex; flex-direction: column;
  overflow-y: auto;
}

/* rail footer: case posture, always visible */

/* ---------- canvas ---------- */

.canvas {
  flex: 1; min-width: 0;
  background: var(--desk);
  overflow-y: auto; overflow-x: hidden;
  padding: 24px 32px 30px;
}

/* preview notice, checkpoint only */

/* ============================================================
   CASE DASHBOARD
   ============================================================ */

.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}

/* ---------- panel primitive ---------- */

.panel {
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--edge-soft);
}
.panel-head h2 { font-size: 17px; font-weight: 650; letter-spacing: -.006em; color: var(--text); }
.panel-head .sub { font-size: 14px; color: var(--text-3); }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 18px 20px 20px; }
.panel-body.tight { padding-bottom: 4px; }
.panel-body > p { font-size: 16px; color: var(--text-2); max-width: 74ch; }
.panel-body > p + p { margin-top: 12px; }
.panel-body strong { color: var(--text); font-weight: 620; }

/* each column keeps its own height. Stretching the side panel to
   match a tall left column left a long empty white box. */
.grid-2 { display: grid; grid-template-columns: minmax(0,1.42fr) minmax(0,1fr); gap: 20px; align-items: start; }
.grid-2 > .panel { margin-bottom: 0; }
/* stacked grids breathe: without this the taller column's card sat
   flush against the next row's card */
.grid-2 + .grid-2 { margin-top: 20px; }

/* ---------- a panel head that opens and closes ---------- */
.panel-head.collapser {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--edge-soft);
  font: inherit; text-align: left; cursor: pointer;
  /* one row: the debrief's stacked sub rule would push the opener
     to a third line and the head reads as three strays */
  flex-wrap: nowrap;
}
.panel-head.collapser .sub {
  flex-basis: auto; margin-top: 0; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px) {
  .panel-head.collapser { flex-wrap: wrap; }
  .panel-head.collapser .spacer { order: 2; }
  .panel-head.collapser .opener { order: 3; }
  .panel-head.collapser .sub { order: 4; flex-basis: 100%; white-space: normal; }
}
.panel-head.collapser[aria-expanded="false"] { border-bottom-color: transparent; }
.panel-head.collapser .opener {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--accent-deep);
}
.panel-head.collapser .opener .ic { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .2s ease; }
.panel-head.collapser[aria-expanded="true"] .opener .ic { transform: rotate(-90deg); }
.panel-head.collapser:hover .opener { color: var(--accent); }

/* ---------- tabbed side panel ----------
   Three questions the player asks at this point live in one
   panel, so the case screen fits a viewport instead of scrolling. */

.tabbar { display: flex; border-bottom: 1px solid var(--edge-soft); padding: 0 8px; gap: 2px; }
.tab {
  min-height: 46px; padding: 0 14px;
  font-size: 15px; font-weight: 600; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .13s ease, border-color .13s ease;
}
.tab:hover { color: var(--text-2); }
.tab.active { color: var(--accent-deep); border-bottom-color: var(--accent); }

.panel-body .lead { font-size: 15px; color: var(--text-2); margin-bottom: 16px; }
.gate-cta { margin-top: 18px; }

/* ---------- the threshold figure: the whole case in one image ---------- */

.ledger { padding: 6px 20px 20px; }
.ledger-scale {
  position: relative;
  padding-top: 26px;
  /* the track column, used to place the threshold line exactly */
  --gutter-l: 122px;   /* id column 108 + gap 14 */
  --gutter-r: 142px;   /* amount column 128 + gap 14 */
}
.ledger-row {
  display: grid;
  grid-template-columns: 108px minmax(0,1fr) 128px;
  align-items: center; gap: 14px;
  padding: 7px 0;
}
.ledger-row .amtcell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ledger-row .id { font-family: var(--mono); font-size: 14px; color: var(--text-2); letter-spacing: .02em; }
.ledger-track { position: relative; height: 26px; background: var(--desk-2); border-radius: var(--r-pill); }
.ledger-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--fact); border-radius: var(--r-pill);
  animation: growbar .5s cubic-bezier(.22,.75,.3,1) both;
}
.ledger-bar.pending {
  background: repeating-linear-gradient(-45deg, #4a5661 0 7px, #3b4650 7px 14px);
}
@keyframes growbar { from { transform: scaleX(.02); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }

.ledger-amt { font-family: var(--mono); font-size: 15px; text-align: right; color: var(--text); letter-spacing: -.01em; }
.ledger-row .state { font-size: 14px; color: var(--text-3); }

/* the threshold line runs through every bar, which is the point.
   --r is the ratio of threshold to scale, set by the engine. */
.threshold {
  position: absolute; top: 24px; bottom: 6px;
  left: calc(var(--gutter-l) + (100% - var(--gutter-l) - var(--gutter-r)) * var(--r));
  border-left: 2px dashed var(--failure);
  pointer-events: none;
}
.threshold .tag {
  position: absolute; top: -24px; right: 9px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--failure);
}
.threshold .tag em { font-style: normal; font-family: var(--mono); }

.ledger-total {
  display: grid; grid-template-columns: auto minmax(0,1fr) 128px; gap: 16px;
  align-items: baseline;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--edge-soft);
}
.ledger-total .id { font-size: 15px; font-weight: 620; color: var(--text); }
.ledger-total .note { font-size: 14px; color: var(--text-2); }
.ledger-total .amt { font-family: var(--mono); font-size: 17px; font-weight: 650; text-align: right; color: var(--failure); }

/* the point of the figure, said plainly */
.ledger-caption {
  margin-top: 14px; padding: 11px 14px;
  background: var(--desk-2); border-left: 3px solid var(--failure);
  font-size: 15px; color: var(--text-2);
}

/* ---------- standing instruction from the director ---------- */

.instruct { display: flex; gap: 13px; align-items: center; margin-bottom: 14px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--ink-800); color: var(--ink-text);
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
}
.instruct .who { font-size: 15px; font-weight: 620; color: var(--text); }
.instruct .role { font-size: 14px; color: var(--text-3); }
.said {
  font-size: 16px; color: var(--text-2);
  padding-left: 15px; border-left: 2px solid var(--accent-line);
}

/* ---------- stage gate ---------- */

.gate { list-style: none; }
.gate li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--edge-soft);
  font-size: 15px; color: var(--text-2);
}
.gate li:last-child { border-bottom: none; }
.gate li.done { color: var(--text-3); }
.gate li.done .lbl { text-decoration: line-through; text-decoration-color: var(--edge); }
/* a status ring, not a form checkbox. The player does not tick these,
   the investigation does. */
.gate .box {
  width: 18px; height: 18px; flex: none; margin-top: 3px;
  border: 1.6px solid var(--edge); border-radius: 50%;
}
.gate li.done .box { border-color: var(--ok); background: var(--ok); color: #fff; display: grid; place-items: center; }
.gate li.done .box .ic { width: 12px; height: 12px; }

/* ---------- authority ---------- */

.auth-label {
  font-size: 14px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ok); margin-bottom: 8px;
}
.auth-label.restrict { color: var(--failure); margin-top: 18px; }
.auth-label.plainlbl { color: var(--text-3); }
.authlist { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.authlist li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text-2); }
.authlist .glyph { width: 14px; height: 14px; flex: none; margin-top: 5px; position: relative; }
.authlist .yes .glyph::before {
  content: ''; position: absolute; left: 1px; top: 3px; width: 10px; height: 5px;
  border-left: 1.8px solid var(--ok); border-bottom: 1.8px solid var(--ok);
  transform: rotate(-45deg);
}
.authlist .no .glyph::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 0;
  border-top: 1.8px solid var(--failure);
}

.gate-meter { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.meter { flex: 1; height: 7px; background: var(--desk-2); border-radius: var(--r-pill); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-lift)); border-radius: var(--r-pill); transition: width .35s cubic-bezier(.3,.8,.3,1); }
.gate-meter .num { font-family: var(--mono); font-size: 14px; color: var(--text-3); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--edge); border-radius: var(--r-pill);
  background: var(--paper); color: var(--text);
  font-size: 15px; font-weight: 700;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.btn:hover { background: var(--desk-2); border-color: #bfbcb2; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--paper); border-color: var(--edge); }
.btn .ic { width: 17px; height: 17px; }

.btn-note { font-size: 14px; color: var(--text-3); margin-top: 10px; }

/* ============================================================
   EVIDENCE LIST
   ============================================================ */

.evlist { display: flex; flex-direction: column; }
.evrow {
  display: grid; grid-template-columns: 62px minmax(0,1fr) auto;
  align-items: center; gap: 16px;
  width: 100%; min-height: 62px; padding: 12px 20px;
  border-bottom: 1px solid var(--edge-soft);
  transition: background .12s ease;
}
.evrow:last-child { border-bottom: none; }
button.evrow:hover { background: var(--desk-2); }
.evrow .ref { font-family: var(--mono); font-size: 14px; color: var(--text-3); letter-spacing: .03em; }
.evrow .ttl { font-size: 15px; font-weight: 600; color: var(--text); }
.evrow .sub { font-size: 14px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.evrow .kindic { color: var(--text-3); }
.evrow.is-locked { opacity: .55; }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 11px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.tag.unread { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-line); }
.tag.read   { color: var(--text-3); background: var(--desk-2); border-color: var(--edge); }
.tag.locked { color: var(--text-3); background: none; border-color: var(--edge); border-style: dashed; }

/* ============================================================
   DOCUMENT VIEWER
   The record is white paper on a dimmed desk. Chrome above it
   is system. Everything below the rule is the record itself.
   ============================================================ */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(9,13,17,.62);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  animation: fade .16s ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.docwrap {
  width: 100%; max-width: 820px;
  margin: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-3);
  animation: rise .22s cubic-bezier(.22,.75,.3,1) both;
  overflow: hidden;
}
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.docbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: var(--ink-900); color: var(--ink-text);
}
.docbar .ref { font-family: var(--mono); font-size: 14px; color: var(--ink-dim); letter-spacing: .03em; }
.docbar .ttl { font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docbar .spacer { flex: 1; }
.docbar .xbtn {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-pill);
  margin: -3px -8px -3px 0;
  display: grid; place-items: center; color: var(--ink-dim);
  transition: background .12s ease, color .12s ease;
}
.docbar .xbtn:hover { background: var(--ink-700); color: #fff; }

.docmeta {
  display: flex; flex-wrap: wrap; gap: 4px 26px;
  padding: 11px 18px; background: var(--desk-2);
  border-bottom: 1px solid var(--edge);
  font-size: 14px; color: var(--text-2);
}
.docmeta b { font-weight: 600; color: var(--text-3); }

.paper { padding: 40px 44px 44px; }

.docfoot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--desk-2);
  border-top: 1px solid var(--edge);
}
.docfoot .hint { flex: 1; min-width: 220px; font-size: 14px; color: var(--text-3); }

/* ---------- the invoice itself ---------- */

.inv-head { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.inv-issuer .nm {
  font-family: var(--doc); font-size: 24px; line-height: 1.2; font-weight: 600;
  letter-spacing: -.01em; color: #101418;
}
.inv-issuer .tag2 { font-size: 14px; color: var(--text-2); margin: 4px 0 12px; }
.inv-issuer .addr { font-size: 14px; color: var(--text-2); line-height: 1.65; }
.inv-issuer .regs { font-family: var(--mono); font-size: 14px; color: var(--text-3); margin-top: 8px; letter-spacing: -.01em; }

.inv-stamp { text-align: right; flex: none; }
.inv-stamp .type {
  font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.inv-stamp .no {
  font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--text);
  letter-spacing: .01em; margin-top: 3px;
}

.rule { height: 1px; background: var(--edge); margin: 26px 0; border: none; }
.rule.thick { height: 2px; background: #22282e; }

.inv-parties { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 36px; }
.inv-label {
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 8px;
}
.inv-to .nm { font-size: 16px; font-weight: 620; color: var(--text); }
.inv-to .ln { font-size: 14px; color: var(--text-2); line-height: 1.7; }

.kv { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 18px; font-size: 14px; }
.kv dt { color: var(--text-3); }
.kv dd { color: var(--text); text-align: right; font-family: var(--mono); letter-spacing: -.012em; }
.kv dd.plain { font-family: var(--ui); letter-spacing: 0; }

.inv-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.inv-table thead th {
  font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); text-align: left;
  padding: 0 0 9px; border-bottom: 1.5px solid #22282e;
}
.inv-table thead th.num, .inv-table td.num { text-align: right; }
.inv-table tbody td { padding: 13px 0; border-bottom: 1px solid var(--edge-soft); vertical-align: top; }
.inv-table td.desc { font-size: 15px; color: var(--text); padding-right: 20px; }
.inv-table td.desc small { display: block; font-size: 14px; color: var(--text-3); margin-top: 2px; }
.inv-table td.qty { font-family: var(--mono); font-size: 14px; color: var(--text-2); white-space: nowrap; padding-right: 20px; }
.inv-table td.num { font-family: var(--mono); font-size: 15px; color: var(--text); white-space: nowrap; letter-spacing: -.012em; }

.inv-sum { display: flex; justify-content: flex-end; margin-top: 18px; }
.inv-sum .box { width: 300px; max-width: 100%; }
.inv-sum .ln { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; font-size: 15px; }
.inv-sum .ln .k { color: var(--text-2); }
.inv-sum .ln .v { font-family: var(--mono); color: var(--text); letter-spacing: -.012em; }
.inv-sum .grand {
  display: flex; justify-content: space-between; gap: 20px;
  margin-top: 8px; padding-top: 11px; border-top: 2px solid #22282e;
}
.inv-sum .grand .k { font-size: 16px; font-weight: 650; color: var(--text); }
.inv-sum .grand .v { font-family: var(--mono); font-size: 19px; font-weight: 650; color: var(--text); letter-spacing: -.012em; }

.inv-note {
  margin-top: 26px; padding: 13px 16px;
  background: var(--desk-2); border-left: 3px solid var(--edge);
  font-size: 15px; color: var(--text-2);
}

.inv-bank { margin-top: 26px; border: 1px solid var(--edge); border-radius: 4px; padding: 16px 18px; }
.inv-bank .inv-label { margin-bottom: 10px; }
.inv-bank .bankgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 32px; }
.inv-bank .row { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 12px; font-size: 14px; }
.inv-bank .row:first-child { grid-column: 1 / -1; }   /* the account name needs the full width */
.inv-bank .row .k { color: var(--text-3); }
.inv-bank .row .v { font-family: var(--mono); color: var(--text); letter-spacing: -.012em; }
.inv-bank .fn { margin-top: 12px; font-size: 14px; color: var(--text-3); font-style: italic; }

.inv-footer { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--edge-soft); font-size: 14px; color: var(--text-3); line-height: 1.6; max-width: 76ch; }

/* ---------- toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.toast {
  background: var(--ink-900); color: var(--ink-text);
  border: 1px solid var(--ink-line); border-left: 3px solid var(--accent-lift);
  border-radius: var(--r-md); padding: 12px 16px; font-size: 15px;
  max-width: 340px; box-shadow: var(--lift-3);
  animation: rise .2s ease both;
}

/* ============================================================
   RESPONSIVE
   Desktop is a fixed viewport application. Tablet and phone
   become a scrolling document, and the rail becomes a strip.
   ============================================================ */

@media (max-width: 1080px) {
  .grid-2 { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100dvh; }
  .shell { flex-direction: column; }

  .topbar { position: sticky; top: 0; z-index: 30; padding: 0 14px; gap: 12px; }
  .caseref, .topbar .divider { display: none; }
  .brand .name span { display: none; }   /* the case reference matters more than the product name */
  .clock { flex: none; }

  .rail {
    width: 100%; flex-direction: row; align-items: center;
    border-right: none; border-bottom: 1px solid var(--ink-line);
    overflow-x: auto; overflow-y: hidden;
    position: sticky; top: var(--bar-h); z-index: 29;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  /* a fade so it reads as scrollable rather than truncated */
  .rail::after {
    content: ''; position: sticky; right: 0; flex: none;
    width: 28px; align-self: stretch; margin-left: -28px;
    background: linear-gradient(90deg, rgba(16,23,30,0), var(--ink-900));
    pointer-events: none;
  }

  .canvas { overflow: visible; padding: 20px 16px 56px; }

  /* the case posture moves into the canvas when the rail collapses */
  .posture-mobile { display: block; }
}

@media (min-width: 901px) { .posture-mobile { display: none; } }

@media (max-width: 700px) {
  .ledger { padding: 4px 16px 18px; }
  /* the rows stack on a phone, so one continuous line would cross the
     amounts. Each track carries its own threshold marker, and the
     caption becomes a legend so it has room to be read. */
  .ledger-scale { padding-top: 2px; }
  .threshold { position: static; border-left: none; }
  .threshold .tag {
    position: static; display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 8px; white-space: normal;
  }
  .threshold .tag::before {
    content: ''; width: 16px; flex: none; border-top: 2px dashed var(--failure);
  }
  .ledger-track::after {
    content: ''; position: absolute; top: -3px; bottom: -3px;
    left: calc(var(--r) * 100%);
    border-left: 2px dashed var(--failure);
  }
  .ledger-row { grid-template-columns: 92px minmax(0,1fr); grid-template-areas: 'id track' 'amt amt'; gap: 6px 12px; }
  .ledger-row .id { grid-area: id; }
  .ledger-track { grid-area: track; }
  .ledger-row .amtcell { grid-area: amt; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .ledger-amt { text-align: left; }
  .ledger-total { grid-template-columns: minmax(0,1fr) auto; }
  .ledger-total .note { display: none; }

  .panel-head { padding: 13px 16px; flex-wrap: wrap; gap: 4px 12px; }
  .panel-body { padding: 16px; }
  /* the status tag never shares a row with the title on a phone.
     Side by side, a nowrap tag eats the width and the title is
     forced to read one word per line. */
  .evrow { grid-template-columns: minmax(0,1fr); gap: 9px; padding: 14px 16px; }
  .evrow .kindic { display: none; }
  .evrow .ref { display: none; }
  .evrow > span:last-child { justify-self: start; }
  .evrow .tag { white-space: normal; height: auto; min-height: 30px; padding: 5px 12px; }

  /* modals become bottom sheets */
  .overlay { padding: 0; align-items: flex-end; }
  .docwrap { max-width: none; border-radius: 10px 10px 0 0; min-height: 92dvh; }
  .docbar { position: sticky; top: 0; z-index: 2; }
  .paper { padding: 24px 18px 32px; }
  .inv-head { flex-direction: column; gap: 18px; }
  .inv-stamp { text-align: left; }
  .inv-parties { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .inv-bank .bankgrid { grid-template-columns: minmax(0,1fr); }
  .inv-sum .box { width: 100%; }
  .inv-table td.qty { display: none; }
  .inv-table thead th.qty { display: none; }
  .docfoot { position: sticky; bottom: 0; }
  .docfoot .btn { width: 100%; }
  .toasts { left: 14px; right: 14px; bottom: 14px; align-items: stretch; }
  .toast { max-width: none; }
}

/* ---------- accessibility preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (prefers-contrast: more) {
  :root {
    --edge: #9a978d; --edge-soft: #b8b5ab;
    --text-2: #333d46; --text-3: #565f68;
    --ink-dim: #c3ced7; --ink-faint: #a0adb8;
  }
}

/* ============================================================
   THE WAY IN
   Cover, briefing, alert, director, hub and tour. This is the
   game around the case. It is warm, rounded and paced. The
   records inside it stay exactly as formal as real records are.
   ============================================================ */

.stage {
  /* a flex child of #app, so it must be allowed to shrink and scroll.
     Without min-height:0 a tall screen is clipped and the controls
     below the fold become unreachable. */
  flex: 1 1 auto; min-height: 0;
  background: var(--env);
  color: var(--ink-text);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.stage-inner { width: 100%; max-width: 1080px; margin: auto; padding: 44px 28px; }
.stage.narrow .stage-inner { max-width: 760px; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-lift);
}
.kicker::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--accent-lift); }

/* ---------- cover ---------- */

.cover { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 56px; align-items: center; }
.cover h1 {
  font-size: clamp(44px, 6vw, 78px); line-height: .98; font-weight: 800;
  letter-spacing: -.03em; color: #fff; margin: 18px 0 20px;
}
.cover h1 em {
  font-style: normal; display: block;
  color: var(--accent-lift);
}
.cover .tagline { font-size: 19px; line-height: 1.5; color: var(--ink-dim); max-width: 30em; }
.cover .chiprow { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.gchip {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid rgba(42,211,189,.42);
  background: rgba(42,211,189,.09);
  font-size: 16px; font-weight: 700; color: var(--accent-lift);
  letter-spacing: .01em;
}
.cover .foot { margin-top: 26px; font-size: 15px; color: var(--ink-faint); max-width: 34em; }

.startcard {
  background: rgba(255,255,255,.055);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-lg);
  padding: 26px; backdrop-filter: blur(6px);
  box-shadow: var(--lift-3);
}
.startcard h2 { font-size: 20px; font-weight: 750; color: #fff; margin-bottom: 4px; }
.startcard .sub { font-size: 15px; color: var(--ink-faint); margin-bottom: 20px; }

.bigbtn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 62px; padding: 12px 20px; margin-bottom: 11px;
  border-radius: var(--r-md); border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent-lift), var(--accent));
  color: #04231f; box-shadow: 0 8px 22px -10px rgba(42,211,189,.6);
  transition: transform .14s cubic-bezier(.3,.9,.3,1), box-shadow .14s ease, filter .14s ease;
}
.bigbtn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(42,211,189,.7); filter: brightness(1.05); }
.bigbtn:active { transform: translateY(0); }
.bigbtn .t { flex: 1; font-size: 17px; font-weight: 750; }
.bigbtn .d { display: block; font-size: 14px; font-weight: 500; opacity: .78; }
.bigbtn .ic { width: 22px; height: 22px; }

.bigbtn.ghost {
  background: rgba(255,255,255,.05); color: var(--ink-text);
  border-color: var(--ink-line); box-shadow: none;
}
.bigbtn.ghost:hover { background: rgba(255,255,255,.1); box-shadow: none; }

/* ---------- briefing cards ---------- */

@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

.dots { display: flex; justify-content: center; gap: 8px; margin: 24px 0; }
.dots i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink-700);
  transition: width .25s ease, background .25s ease;
}
.dots i.on { width: 30px; border-radius: var(--r-pill); background: var(--accent-lift); }

.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  white-space: nowrap;
  min-height: 50px; padding: 0 24px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-line); background: rgba(255,255,255,.06);
  color: var(--ink-text); font-size: 16px; font-weight: 700;
  transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.gbtn:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.gbtn.primary {
  background: linear-gradient(180deg, var(--accent-lift), var(--accent));
  border-color: transparent; color: #04231f;
  box-shadow: 0 8px 22px -10px rgba(42,211,189,.6);
}
.gbtn.primary:hover { filter: brightness(1.06); }
.gbtn.quiet { background: none; border-color: transparent; color: var(--ink-faint); }
.gbtn.quiet:hover { color: var(--ink-text); background: rgba(255,255,255,.06); }
.gbtn .ic { width: 19px; height: 19px; }

/* ---------- the alert ---------- */

.alertcard {
  max-width: 620px; margin: 0 auto;
  background: rgba(255,255,255,.06); border: 1px solid rgba(210,72,60,.42);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--lift-3), 0 0 0 6px rgba(210,72,60,.07);
  animation: alertIn .45s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes alertIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

.alertcard .top {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px; background: rgba(210,72,60,.16);
  border-bottom: 1px solid rgba(210,72,60,.3);
}
.alertcard .top .ic { width: 22px; height: 22px; color: #ff9c8e; }
.alertcard .top .stamp {
  font-size: 15px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #ffb3a6;
}
.alertcard .top .spacer { flex: 1; }
.alertcard .top .t { font-family: var(--mono); font-size: 14px; color: var(--ink-dim); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #ff6a55; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,106,85,.55); } 50% { opacity: .75; box-shadow: 0 0 0 8px rgba(255,106,85,0); } }

.alertcard .body { padding: 26px 24px 24px; }
.alertcard h2 { font-size: 27px; font-weight: 780; color: #fff; margin-bottom: 18px; letter-spacing: -.015em; }
.alertcard ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.alertcard li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--ink-dim); }
.alertcard li::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: 9px;
  border-radius: 50%; background: #ff8f7e;
}
.alertcard .prio {
  display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--ink-line); font-size: 15px; color: var(--ink-faint);
}
.alertcard .prio b {
  padding: 4px 13px; border-radius: var(--r-pill);
  background: rgba(210,72,60,.2); color: #ffb3a6; font-weight: 750;
}
.alertcard .go { padding: 0 24px 24px; }
.alertcard .go .gbtn { width: 100%; }

/* ---------- the director ---------- */

.talk { display: flex; gap: 20px; align-items: flex-start; }
.face {
  width: 74px; height: 74px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #4f63d8, var(--accent));
  color: #fff; font-size: 25px; font-weight: 750; letter-spacing: .02em;
  box-shadow: 0 12px 28px -12px rgba(79,99,216,.8);
}
.talk .who { font-size: 20px; font-weight: 750; color: #fff; }
.talk .role { font-size: 15px; color: var(--accent-lift); font-weight: 600; margin-bottom: 18px; }
.speech { display: flex; flex-direction: column; gap: 13px; }
.speech p {
  font-size: 18px; line-height: 1.55; color: var(--ink-text);
  background: rgba(255,255,255,.055); border: 1px solid var(--ink-line);
  border-radius: var(--r-md); border-top-left-radius: 6px;
  padding: 14px 18px; max-width: 54ch;
  animation: pop .34s cubic-bezier(.24,.9,.3,1) both;
}

.qbox { margin-top: 34px; }
.qbox h3 { font-size: 24px; font-weight: 780; color: #fff; letter-spacing: -.015em; }
.qbox .hint { font-size: 15px; color: var(--ink-faint); margin: 6px 0 18px; }

.choices { display: flex; flex-direction: column; gap: 11px; }
.choice {
  display: flex; align-items: center; gap: 15px; width: 100%;
  min-height: 62px; padding: 14px 18px;
  border-radius: var(--r-md); border: 1px solid var(--ink-line);
  background: rgba(255,255,255,.045); color: var(--ink-text);
  font-size: 16px; line-height: 1.45;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.choice:hover { background: rgba(255,255,255,.1); border-color: var(--accent-line); transform: translateX(3px); }
.choice .key {
  width: 32px; height: 32px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center; background: rgba(255,255,255,.08);
  font-size: 15px; font-weight: 750; color: var(--ink-dim);
}
.choice:hover .key { background: var(--accent); color: #04231f; }
.choice[disabled] { opacity: .4; pointer-events: none; }
.choice.picked { border-color: var(--accent); background: var(--accent-wash); }
.choice.picked .key { background: var(--accent); color: #04231f; }

.reply {
  margin-top: 18px; padding: 18px 20px; border-radius: var(--r-md);
  background: rgba(255,255,255,.06); border: 1px solid var(--ink-line);
  border-left: 3px solid var(--accent);
  animation: pop .3s cubic-bezier(.24,.9,.3,1) both;
}
.reply.poor { border-left-color: var(--failure); }
.reply.partial { border-left-color: var(--gold); }
.reply .lbl { font-size: 14px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-lift); margin-bottom: 7px; }
.reply.poor .lbl { color: #ff9c8e; }
.reply.partial .lbl { color: #ffd27a; }
.reply p { font-size: 17px; line-height: 1.55; color: var(--ink-text); }
.reply .go { margin-top: 18px; }

/* ============================================================
   THE HUB
   A lobby of rooms, not a dashboard. Everything detailed lives
   one level in, behind a door the player chooses to open.
   ============================================================ */

.hub { background: var(--env); min-height: 0; flex: 1; overflow-y: auto; padding: 26px 32px 44px; }
.hub-inner { max-width: 1120px; margin: 0 auto; }

.hub-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 26px; }
.hub-top .lead { flex: 1; min-width: 260px; }
.hub-top h1 { font-size: 32px; font-weight: 800; letter-spacing: -.025em; color: var(--text); margin: 6px 0 6px; }
.hub-top .note { font-size: 16px; color: var(--text-2); }
.hub-top .eyebrow { color: var(--accent-deep); }

.statcards { display: flex; gap: 12px; flex-wrap: wrap; }
.statcard {
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-md);
  padding: 13px 17px; min-width: 148px; box-shadow: var(--lift-1);
}
.statcard .k { font-size: 14px; color: var(--text-3); font-weight: 600; }
.statcard .v { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.statcard.clockbox .v { color: var(--accent-deep); }
.statcard.holdcard .v { font-family: var(--ui); font-size: 16px; font-weight: 700; color: var(--text-2); }
.statcard.risk .v { color: var(--failure); }

.objective {
  display: flex; gap: 15px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--edge); border-left: 4px solid var(--accent);
  border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 24px; box-shadow: var(--lift-1);
}
.objective .ic { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.objective .k { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.objective .v { font-size: 17px; font-weight: 650; color: var(--text); }
.objective .sub { font-size: 15px; color: var(--text-2); margin-top: 3px; }

.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }

.room {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-lg);
  padding: 22px; text-align: left; box-shadow: var(--lift-1);
  position: relative; overflow: hidden;
  transition: transform .16s cubic-bezier(.3,.9,.3,1), box-shadow .16s ease, border-color .16s ease;
}
.room::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(140deg, var(--accent-wash), transparent 52%);
  opacity: 0; transition: opacity .16s ease; pointer-events: none;
}
button.room:hover { transform: translateY(-4px); box-shadow: var(--lift-2); border-color: var(--accent-line); }
button.room:hover::after { opacity: 1; }

.room .top { display: flex; align-items: center; gap: 13px; width: 100%; }
.room .glyph {
  width: 46px; height: 46px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-deep);
}
.room .glyph .ic { width: 23px; height: 23px; }
.room h3 { font-size: 19px; font-weight: 750; color: var(--text); letter-spacing: -.012em; }
.room p { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.room .foot { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: auto; padding-top: 4px; }
.room .foot .meter { flex: 1; }
.room .foot .n { font-size: 14px; font-weight: 650; color: var(--text-3); }

.room .flag {
  position: absolute; top: 16px; right: 16px;
  height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700; display: grid; place-items: center;
}
.room.soon { opacity: .62; }
.room.soon .glyph { background: var(--unproven-wash); color: var(--unproven); }

/* progress ring on a completed room */
.ring { width: 38px; height: 38px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .bg { stroke: var(--edge-soft); }
.ring .fg { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }

/* ---------- room screen chrome ---------- */

.roomhead { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.roomhead .back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--edge); background: var(--paper);
  font-size: 15px; font-weight: 650; color: var(--text-2);
  transition: background .14s ease, color .14s ease;
}
.roomhead .back:hover { background: var(--desk-2); color: var(--text); }
.roomhead .back .ic { width: 17px; height: 17px; }
.roomhead h1 { font-size: 26px; font-weight: 780; letter-spacing: -.02em; color: var(--text); }

/* ---------- the tour ---------- */

.tour { position: fixed; inset: 0; z-index: 60; opacity: 0; transition: opacity .55s ease; }
.tour.on { opacity: 1; }
/* The dim is one polygon with a true hole cut over the target.
   The inner ring must wind against the outer ring or the nonzero
   fill rule fills the hole and the spotlight lights nothing. */
.tour-mask {
  position: absolute; inset: 0; pointer-events: auto;
  background: rgba(10,13,32,.72);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 var(--y),
    var(--x) var(--y), var(--x) calc(var(--y) + var(--h)),
    calc(var(--x) + var(--w)) calc(var(--y) + var(--h)),
    calc(var(--x) + var(--w)) var(--y), 0 var(--y));
}
.tour-ring {
  position: absolute; border-radius: var(--r-md);
  border: 2px solid var(--accent-lift); pointer-events: none;
  box-shadow: 0 0 0 6px rgba(42,211,189,.18);
  transition: all .28s cubic-bezier(.3,.9,.3,1);
}
.tour-card {
  position: absolute; width: min(340px, calc(100vw - 24px));
  background: var(--ink-900); color: var(--ink-text);
  border: 1px solid var(--ink-line); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--lift-3);
}
.tour-card .count { font-size: 14px; font-weight: 700; color: var(--accent-lift); margin-bottom: 6px; }
.tour-card h4 { font-size: 19px; font-weight: 750; color: #fff; margin-bottom: 7px; }
.tour-card p { font-size: 15px; line-height: 1.5; color: var(--ink-dim); }
.tour-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.tour-foot .spacer { flex: 1; }
.tour-foot .gbtn { min-height: 44px; padding: 0 17px; font-size: 15px; }

/* ---------- responsive for the way in ---------- */

@media (max-width: 900px) {
  .stage-inner { padding: 30px 18px 40px; }
  .cover { grid-template-columns: minmax(0,1fr); gap: 30px; }
  .cover h1 { font-size: clamp(38px, 11vw, 56px); }
  .hub { padding: 20px 16px 40px; }
  .hub-top h1 { font-size: 26px; }
  .rooms { grid-template-columns: minmax(0,1fr); }
  .talk { flex-direction: column; gap: 14px; }
  .face { width: 60px; height: 60px; font-size: 21px; }
  .speech p { max-width: none; }
  .statcards { width: 100%; }
  .statcard { flex: 1; min-width: 132px; }
  .tour-card { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; }
  .tour-foot .gbtn { flex: 1; }
}

/* ============================================================
   THE ENVIRONMENT, CARRIED THROUGH
   The cover, the briefing, the hub and the rooms all sit on the
   same background. What changes is what floats on it: in the hub,
   room cards. In a room, the record itself, as white paper.
   ============================================================ */

/* ---------- the clock: one element, room to breathe ---------- */

.clockbar {
  display: flex; align-items: center; gap: 12px; flex: none;
  height: 40px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ink-line);
}
.clockbar .ic { width: 17px; height: 17px; color: var(--accent-lift); }
.clockbar .now {
  font-family: var(--mono); font-size: 19px; font-weight: 700;
  letter-spacing: .02em; color: #fff; line-height: 1;
}
.clockbar .sep { width: 1px; height: 18px; background: var(--ink-line); flex: none; }
.clockbar .until { font-size: 14px; color: var(--ink-dim); white-space: nowrap; }
.clockbar .until b { font-family: var(--mono); font-weight: 700; color: var(--ink-text); }

/* ---------- hub on the environment ---------- */

.hub-top h1 { color: #fff; }
.hub-top .note { color: var(--ink-dim); }
.hub-top .eyebrow { color: var(--accent-lift); }

.statcard {
  background: rgba(255,255,255,.06);
  border-color: var(--ink-line);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.statcard .k { color: var(--ink-faint); }
.statcard .v { color: #fff; }
.statcard.holdcard .v { color: var(--ink-text); }

/* the money still exposed is the danger, so it says so quietly */
.statcard.risk { border-color: rgba(210,72,60,.4); background: rgba(210,72,60,.12); }
.statcard.risk .k { color: #ffb3a6; }
.statcard.risk .v { color: #ff9c8e; }

.objective {
  background: rgba(255,255,255,.06);
  border-color: var(--ink-line);
  border-left-color: var(--accent-lift);
  box-shadow: none; backdrop-filter: blur(6px);
}
.objective .ic { color: var(--accent-lift); }
.objective .k { color: var(--ink-faint); }
.objective .v { color: #fff; }
.objective .sub { color: var(--ink-dim); }

/* room cards stay white, so they read as doors into a paper world */
.room { animation: cardIn .38s cubic-bezier(.24,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.room .glyph { background: var(--glyph); color: #fff; box-shadow: 0 8px 20px -10px rgba(79,99,216,.75); }
.room.soon { background: rgba(255,255,255,.05); border-color: var(--ink-line); opacity: 1; box-shadow: none; }
.room.soon h3 { color: var(--ink-dim); }
.room.soon p { color: var(--ink-faint); }
.room.soon .glyph { background: rgba(255,255,255,.07); color: var(--ink-faint); box-shadow: none; }
.room .flag {
  background: var(--paper); color: var(--accent-deep);
  border: 1.5px solid var(--accent); font-weight: 750;
}

button.room:hover { box-shadow: var(--lift-3); border-color: var(--accent-lift); }

/* ---------- room screen on the environment ---------- */

.roomhead { align-items: center; }
.roomhead h1 { color: #fff; }
.roomhead .roomsub { font-size: 15px; color: var(--ink-dim); margin-top: 1px; }
.roomhead .roomsub b { color: #ffb3a6; font-weight: 700; }
.roomhead .back {
  background: rgba(255,255,255,.08); color: var(--ink-text);
  border: 1px solid rgba(122,200,255,.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.roomhead .back:hover { background: rgba(255,255,255,.16); color: #fff; border-color: var(--accent-lift); }

/* panels lift off the dark rather than sitting flush on cream */
.hub .panel { box-shadow: var(--lift-2); border-color: transparent; }

/* ---------- danger, animated ---------- */

/* the pending invoice is still moving toward settlement */
.ledger-bar.pending {
  background-image: repeating-linear-gradient(-45deg, #4a5a86 0 7px, #38456b 7px 14px);
  background-size: 19.8px 19.8px;
  animation: growbar .5s cubic-bezier(.22,.75,.3,1) both, drift 1.9s linear infinite;
}
@keyframes drift { to { background-position: 19.8px 0; } }

/* the line the case turns on. It stays put: a blinking rule on a
   document reads as a fault, not as emphasis. */
.threshold .tag em { color: var(--failure); }

.ledger-caption { border-left-color: var(--failure); background: var(--failure-wash); }

/* screens arrive rather than snap */
.stage, .hub { animation: screenIn .34s cubic-bezier(.24,.9,.3,1) both; }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }

/* the tab you are on is worth seeing move */
.tab.active { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .ledger-bar.pending { animation: none !important; }
}

@media (max-width: 900px) {
  .clockbar { height: 38px; padding: 0 12px; gap: 9px; }
  .clockbar .now { font-size: 17px; }
  .roomhead { flex-wrap: wrap; }
}

/* ============================================================
   YOUR ROLE
   The player is given a job before a task, and the question the
   game is actually asking is set against the one it is not.
   ============================================================ */

.idcard {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--ink-line);
  border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 26px;
  box-shadow: var(--lift-3);
}
.idglyph {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--glyph); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(79,99,216,.8);
}
.idglyph .ic { width: 27px; height: 27px; }
.idbody { flex: 1; min-width: 0; }
.idrole { font-size: 19px; font-weight: 780; color: #fff; letter-spacing: -.012em; }
.idorg { font-size: 15px; color: var(--ink-dim); }
.idno { text-align: right; flex: none; }
.idno span { display: block; font-size: 14px; color: var(--ink-faint); }
.idno b { font-family: var(--mono); font-size: 15px; color: var(--ink-text); letter-spacing: .02em; }

.contrast { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 28px; }

.stage .auth-label { color: var(--accent-lift); }
.stage .auth-label.restrict { color: #ff9c8e; margin-top: 0; }
.stage .authlist li { color: var(--ink-dim); }
.stage .authlist .yes .glyph::before { border-color: var(--accent-lift); }
.stage .authlist .no .glyph::before { border-top-color: #ff9c8e; }

/* ============================================================
   THE CHAIN STRIP
   The conditioning device. Same four steps, same order, present
   wherever the player is working.
   ============================================================ */

.chain { list-style: none; display: flex; align-items: stretch; gap: 8px; }

.chain.big { margin-bottom: 26px; }

@media (max-width: 900px) {
  .idcard { flex-wrap: wrap; }
  .idno { text-align: left; width: 100%; }

  /* one per line. Four pills wrapping into a ragged grid read as
     an accident, not a process. */
  .chain { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
}

/* ============================================================
   THE CHAIN ON THE HOME PAGE
   Four steps, laid out on a grid that holds at every width.
   One per line on a phone, four across on a desktop, never a
   ragged wrap in between.
   ============================================================ */

.chainrow {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: var(--r-md);
  border: 1px solid var(--ink-line); background: rgba(255,255,255,.045);
}
.chainrow .n {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glyph); color: #fff;
  font-size: 15px; font-weight: 750;
}
.chainrow .txt { min-width: 0; }
.chainrow .txt b { display: block; font-size: 16px; font-weight: 750; color: #fff; }
.chainrow .txt i { display: block; font-style: normal; font-size: 15px; color: var(--ink-dim); margin-top: 1px; }

@media (max-width: 700px) {
  .chainrow { padding: 13px 14px; }
}

/* ============================================================
   THE BRIEFING WIZARD
   This runs AFTER the player presses start, so it is inside the
   environment and speaks the environment's language: the navy
   ground, white cards, aqua. Not the cover's dark glass.
   ============================================================ */

.wizard {
  background: var(--env);
  display: flex; flex-direction: column;
  overflow-y: auto; padding: 34px 24px 44px;
  animation: screenIn .5s cubic-bezier(.22,.75,.3,1) both;
}
/* the card settles a beat after the ground it sits on */
.wizcard { animation: settleIn .55s cubic-bezier(.22,.75,.3,1) both; animation-delay: .09s; }
.wiz-head { animation: settleIn .5s cubic-bezier(.22,.75,.3,1) both; animation-delay: .04s; }
.wizbar { animation: screenIn .45s ease both; }
@keyframes settleIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.wiz-inner { width: 100%; max-width: 880px; margin: auto; }

.wiz-head { margin-bottom: 20px; }
.wiz-head h2 {
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; font-weight: 800;
  letter-spacing: -.025em; color: #fff; margin: 12px 0 14px;
}
.wiz-dots { display: flex; align-items: center; gap: 8px; }
.wiz-dots i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ink-700);
  transition: width .25s ease, background .25s ease;
}
.wiz-dots i.on { width: 30px; border-radius: var(--r-pill); background: var(--accent-lift); }
.wiz-dots i.done { background: var(--accent); }
.wiz-count { margin-left: 6px; font-size: 14px; color: var(--ink-faint); }

/* the white card. Same paper as a room, same shadow, same radius. */
.wizcard {
  background: var(--paper); color: var(--text);
  border-radius: var(--r-lg); padding: 30px 32px;
  box-shadow: var(--lift-2);
}

.wiz-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.wiz-nav .spacer { flex: 1; }
.btn.lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
.btn.primary.lg .ic { width: 18px; height: 18px; }

.wizlead { font-size: 17px; line-height: 1.6; color: var(--text-2); margin-bottom: 26px; max-width: 72ch; }

/* ---------- who you are ---------- */

.idcard {
  display: flex; align-items: center; gap: 15px;
  background: var(--desk-2); border: 1px solid var(--edge);
  border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 26px;
  box-shadow: none;
}
.idglyph {
  width: 50px; height: 50px; flex: none; border-radius: var(--r-md);
  display: grid; place-items: center; background: var(--glyph); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(79,99,216,.7);
}
.idglyph .ic { width: 26px; height: 26px; }
.idbody { flex: 1; min-width: 0; }
.idrole { font-size: 18px; font-weight: 780; color: var(--text); letter-spacing: -.012em; }
.idorg { font-size: 15px; color: var(--text-3); }
.idno { text-align: right; flex: none; }
.idno span { display: block; font-size: 14px; color: var(--text-3); }
.idno b { font-family: var(--mono); font-size: 15px; color: var(--text); letter-spacing: .02em; }

/* the question the game is asking, against the one it is not */
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 26px; }

/* ---------- how you work: a horizontal progression ----------
   Four across, like the first game's briefing. One short line
   each. A vertical stack of paragraphs is a document.          */

.wizchain {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px;
  position: relative;
}
/* the line that makes it a progression rather than four boxes */
.wizchain::before {
  content: ''; position: absolute; top: 33px; left: 12%; right: 12%;
  border-top: 2px dashed var(--edge); z-index: 0;
}
.chainrow {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px 16px; border-radius: var(--r-md);
  border: 1px solid var(--edge); background: var(--desk-2);
}
.chainrow .n {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glyph); color: #fff;
  font-size: 16px; font-weight: 750;
  box-shadow: 0 0 0 5px var(--paper);
}
.chainrow .txt { min-width: 0; }
.chainrow .txt b { display: block; font-size: 17px; font-weight: 780; color: var(--text); margin-bottom: 4px; }
.chainrow .say { display: block; font-size: 15px; line-height: 1.45; color: var(--text-2); }

@media (max-width: 760px) {
  .wizard { padding: 22px 16px 36px; }
  .wizcard { padding: 22px 18px; border-radius: var(--r-md); }
  .idcard { flex-wrap: wrap; }
  .idno { width: 100%; text-align: left; }
  .chainrow { padding: 14px; }
  .chainrow .txt i { display: block; margin-left: 0; margin-top: 1px; }
  .wiz-nav .btn { width: 100%; }
}

.btn.ghost {
  background: rgba(255,255,255,.06); border-color: var(--ink-line); color: var(--ink-dim);
}
.btn.ghost:hover { background: rgba(255,255,255,.12); color: var(--ink-text); border-color: var(--ink-line); }

/* ---------- the wizard bar: you are inside the game ---------- */

.wizbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  height: var(--bar-h); padding: 0 16px;
  background: var(--ink-950); border-bottom: 1px solid var(--ink-line);
  color: var(--ink-text);
}
.wizbar .spacer { flex: 1; }
.wizbar .mark { width: 22px; height: 22px; color: var(--accent-lift); flex: none; }
.wizbar .mark svg { width: 100%; height: 100%; }
.wizbrand { font-size: 15px; font-weight: 650; }
.wizbrand span { color: var(--ink-faint); font-weight: 500; }
.wizbar .wiz-count { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); margin: 0; }

.iconbtn {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--ink-dim);
  transition: background .13s ease, color .13s ease;
}
.iconbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
.iconbtn .ic { width: 19px; height: 19px; }

/* the wizard sits under its bar, and scrolls inside it */
.wizard { flex: 1 1 auto; min-height: 0; }

/* the contrast, compact: a label and a question, nothing more */
.contrast { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }

@media (max-width: 900px) {
  .wizchain { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wizchain::before { display: none; }
}
@media (max-width: 620px) {
  .wizchain { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .chainrow { flex-direction: row; align-items: flex-start; gap: 12px; padding: 14px; }
  .chainrow .n { width: 30px; height: 30px; box-shadow: none; }
  .contrast { grid-template-columns: minmax(0,1fr); }
  .wizbrand span { display: none; }
}

/* ---------- role: green grouped left, red grouped right ----------
   People read left to right, so what you are here to do comes
   first and what you cannot do sits opposite it.               */

/* the message carries the colour. The list under it sits on the
   white card, on the same side. */
.rolegrid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px 30px; align-items: start;
}
/* the messages share row one and the lists share row two, so both
   lists start on the same line whatever length the message above is */
.rolegrid .msg { grid-row: 1; height: 100%; }
.rolegrid .col { grid-row: 2; }
.rolegrid .msg {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 16px; border-radius: var(--r-md);
}
.rolegrid .msg.yes { background: var(--accent-wash); border: 1px solid var(--accent-line); }
.rolegrid .msg.no  { background: var(--failure-wash); border: 1px solid rgba(210,72,60,.3); }
.rolegrid .clbl { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rolegrid .msg.yes .clbl { color: var(--accent-deep); }
.rolegrid .msg.no  .clbl { color: var(--failure); }
.rolegrid .cq { font-size: 17px; font-weight: 750; line-height: 1.35; color: var(--text); }
.rolegrid .msg.no .cq { text-decoration: line-through; text-decoration-color: rgba(210,72,60,.45); color: var(--text-2); }
.rolegrid .auth-label { margin-top: 0; }

@media (max-width: 760px) {
  /* stacked, so each message sits with its own list */
  .rolegrid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .rolegrid .msg, .rolegrid .col { grid-row: auto; }
  .rolegrid .msg.no { margin-top: 14px; }
}

/* ---------- the clock, moving ---------- */

.dayline { height: 3px; background: var(--ink-900); flex: none; }
.dayline i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue-lift));
  transition: width .6s cubic-bezier(.3,.8,.3,1);
}
.timeflash {
  position: absolute; right: 14px; top: 100%; margin-top: 6px;
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--accent-lift);
  animation: floatUp 1.5s ease-out both; pointer-events: none; white-space: nowrap;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(4px); }
  18%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}
.clockbar { position: relative; }

/* ---------- the alert reads clearly ---------- */

.alertcard li { color: var(--ink-text); }
.alertcard li .em { font-weight: 750; color: #fff; }
.alertcard li .alarm {
  white-space: nowrap;
  font-family: var(--mono); font-size: 17px; font-weight: 800; color: #ff8f7e;
  letter-spacing: -.01em;
}

/* ---------- a link, not a second button ---------- */

.linkbtn {
  min-height: 44px; padding: 0 4px;
  font-size: 15px; font-weight: 650; color: var(--ink-faint);
  border-bottom: 1px solid transparent;
  transition: color .13s ease, border-color .13s ease;
}
.linkbtn:hover { color: var(--ink-text); border-bottom-color: var(--ink-line); }

/* ---------- the tab panel slides, the room does not reload ---------- */

.panel.side .panel-body { animation: tabIn .22s cubic-bezier(.24,.9,.3,1) both; }
@keyframes tabIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .panel.side .panel-body, .timeflash { animation: none !important; }
}

/* ============================================================
   CHROME TOOLS
   Language, sound and help. Spaced so nothing is cramped, and
   quiet enough that they never compete with the case.
   ============================================================ */

.tools { display: flex; align-items: center; gap: 6px; flex: none; }
.soundpick { position: relative; }
.soundmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  background: var(--ink-900); border: 1px solid var(--ink-line);
  border-radius: var(--r-pill); box-shadow: var(--lift-3);
}
.tools .vol {
  width: 104px; height: 4px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--ink-700); border-radius: var(--r-pill); cursor: pointer;
}
.tools .vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-lift); border: none; cursor: pointer;
}
.tools .vol::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-lift); border: none; cursor: pointer;
}
.tools .vol:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 4px; }

.langpick { position: relative; }

/* the cover carries the language choice before anything is read.
   Quiet, top right, and the current language is written out. */
.cover-tools {
  position: absolute; top: 16px; right: 20px; z-index: 5;
}
.stage { position: relative; }
.cover-tools .iconbtn.labelled {
  width: auto; padding: 0 14px 0 10px; gap: 7px;
  display: inline-flex; align-items: center;
}
.cover-tools .curlang { font-size: 14px; font-weight: 650; color: var(--ink-dim); }
.cover-tools .iconbtn.labelled:hover .curlang { color: #fff; }
.langmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  min-width: 168px; padding: 6px;
  background: var(--ink-900); border: 1px solid var(--ink-line);
  border-radius: var(--r-md); box-shadow: var(--lift-3);
}
.langopt {
  display: block; width: 100%; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-sm); color: var(--ink-dim);
  font-size: 15px; font-weight: 600; text-align: left;
}
.langopt:hover { background: var(--ink-800); color: #fff; }
.langopt.on { color: var(--accent-lift); }
.langopt.on::after { content: ''; float: right; width: 7px; height: 7px; margin-top: 18px; border-radius: 50%; background: var(--accent-lift); }

/* ---------- the help sheet ---------- */

.docwrap.sheet { max-width: 560px; }
.sheetbody { padding: 26px 28px; }
.kbdgrid { display: flex; flex-direction: column; gap: 2px; }
.kbdrow {
  display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 16px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--edge-soft); font-size: 15px; color: var(--text-2);
}
.kbdrow:last-child { border-bottom: none; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0 11px; border-radius: 7px;
  background: var(--desk-2); border: 1px solid var(--edge); border-bottom-width: 2px;
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text);
}
.sheetnote { margin-top: 18px; font-size: 15px; color: var(--text-3); }

/* long languages need more room, and English must never shrink for them */
:root[data-lang="zu"] .chainrow .say,
:root[data-lang="tn"] .chainrow .say { font-size: 14.5px; }
:root[data-lang="zu"] .room h3,
:root[data-lang="tn"] .room h3 { font-size: 18px; }
:root[data-lang="zu"] .hub-top h1,
:root[data-lang="tn"] .hub-top h1 { font-size: 29px; }

@media (max-width: 900px) {
  .tools { gap: 2px; }
  .soundmenu { padding: 8px 12px 8px 6px; }
  .tools .vol { width: 88px; }
  .kbdrow { grid-template-columns: 96px minmax(0,1fr); gap: 12px; }
}

/* ============================================================
   RECORD VIEWERS
   Each kind looks like the thing it is. A system alert is cold
   and tabular, a ledger is a ledger, a policy matrix is a rule.
   ============================================================ */

.doc-h { margin-bottom: 22px; }
.doc-h h3 { font-size: 21px; font-weight: 750; color: var(--text); letter-spacing: -.015em; }
.doc-h p { font-size: 15px; color: var(--text-3); margin-top: 3px; }

/* ---------- system alert ---------- */

.sysbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 2px solid #22282e;
}
.sysbar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--failure); flex: none; }
.sysbar .nm {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-2);
}
.sysrule {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  padding: 12px 14px; margin-bottom: 20px;
  background: var(--desk-2); border-radius: var(--r-sm);
}
.sysrule .lbl { font-size: 14px; color: var(--text-3); }
.sysrule .val { font-family: var(--mono); font-size: 14px; color: var(--text); }

.sysgrid { display: flex; flex-direction: column; }
.sysrow {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid var(--edge-soft); align-items: baseline;
}
.sysrow:last-child { border-bottom: none; }
.sysrow .k { font-size: 15px; color: var(--text-2); }
.sysrow .v { font-family: var(--mono); font-size: 15px; color: var(--text); text-align: right; }
.sysrow .v.alarm { color: var(--failure); font-weight: 700; }

.syswhy { margin-top: 24px; padding: 16px 18px; background: var(--failure-wash); border-radius: var(--r-md); }
.syswhy ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.syswhy li { display: flex; gap: 10px; font-size: 15px; color: var(--text-2); }
.syswhy li::before { content: ''; width: 6px; height: 6px; margin-top: 8px; flex: none; border-radius: 50%; background: var(--failure); }

/* ---------- ledger table ---------- */

.ledgertable { width: 100%; border-collapse: collapse; }
.ledgertable th {
  font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); text-align: left; padding: 0 0 9px; border-bottom: 1.5px solid #22282e;
}
.ledgertable th.num, .ledgertable td.num { text-align: right; }
.ledgertable td { padding: 13px 0; border-bottom: 1px solid var(--edge-soft); font-size: 15px; color: var(--text); }
.ledgertable td.mono, .ledgertable td.num { font-family: var(--mono); letter-spacing: -.012em; }
.ledgertable tfoot td {
  border-bottom: none; border-top: 2px solid #22282e; padding-top: 13px;
  font-weight: 700; font-family: var(--mono);
}

/* ---------- approval matrix ---------- */

.bands { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.band { padding: 18px; border-radius: var(--r-md); border: 1px solid var(--edge); background: var(--desk-2); }
.band.strong { border-color: var(--accent-line); background: var(--accent-wash); }
.band .range { font-size: 17px; font-weight: 750; color: var(--text); margin-bottom: 12px; }
.band .who { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.band .who li { display: flex; gap: 9px; font-size: 15px; color: var(--text-2); }
.band .who li::before { content: ''; width: 6px; height: 6px; margin-top: 8px; flex: none; border-radius: 50%; background: var(--text-3); }
.band.strong .who li::before { background: var(--accent); }

.rulelist { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.rulelist li { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.rulelist li::marker { color: var(--text-3); font-weight: 700; }

@media (max-width: 700px) {
  .bands { grid-template-columns: minmax(0,1fr); }
  .ledgertable th, .ledgertable td { font-size: 14px; }
}

/* ============================================================
   CALL IT
   The judgement panels. Light versions of the choice controls
   from the dark screens, so the interaction feels the same
   wherever the player meets it.
   ============================================================ */

.panel.prompt .panel-head h2 { font-size: 18px; }
.panel.prompt.locked { opacity: .72; }
.panel.prompt.locked .lead { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-3); }
.panel.prompt.locked .ic { width: 17px; height: 17px; }
.panel.prompt.answered { border-color: var(--accent-line); }

.choice.light {
  border-color: var(--edge); background: var(--desk-2); color: var(--text);
  min-height: 56px;
}
.choice.light:hover { background: var(--paper); border-color: var(--accent); transform: translateX(3px); }
.choice.light .key { background: var(--paper); color: var(--text-3); border: 1px solid var(--edge); }
.choice.light:hover .key { background: var(--accent); color: #fff; border-color: var(--accent); }
.choice.light.picked { background: var(--accent-wash); border-color: var(--accent); }
.choice.light.picked .key { background: var(--accent); color: #fff; border-color: var(--accent); }

.reply.light {
  background: var(--desk-2); border: 1px solid var(--edge); border-left: 3px solid var(--accent);
}
.reply.light p { font-size: 16px; color: var(--text-2); }
.reply.light.poor { border-left-color: var(--failure); }
.reply.light.neutral, .reply.light.partial { border-left-color: var(--gold); }
.reply.light.good, .reply.light.best { border-left-color: var(--accent); }

.reply .added {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  font-size: 14px; font-weight: 700; color: var(--accent-deep);
}
.reply .added .ic { width: 15px; height: 15px; }

/* ---------- the multi select ---------- */

.ticks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.tickrow {
  display: flex; align-items: flex-start; gap: 13px; width: 100%;
  min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--edge); border-radius: var(--r-md);
  background: var(--paper); color: var(--text-2); font-size: 15px; line-height: 1.45;
  transition: background .13s ease, border-color .13s ease;
}
.tickrow:hover { background: var(--desk-2); border-color: #c3cadb; }
.tickrow .box {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border: 1.8px solid var(--edge); border-radius: 5px;
  display: grid; place-items: center;
}
.tickrow.on { border-color: var(--accent); background: var(--accent-wash); color: var(--text); }
.tickrow.on .box { background: var(--accent); border-color: var(--accent); color: #fff; }
.tickrow.on .box .ic { width: 14px; height: 14px; }
.tickrow .txt { flex: 1; }
.tickrow.fixed { cursor: default; }

.verdict {
  flex: none; height: 25px; padding: 0 10px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.verdict.ok { background: var(--ok-wash); color: var(--ok); }
.verdict.no { background: var(--failure-wash); color: var(--failure); }

@media (max-width: 700px) {
  .tickrow { flex-wrap: wrap; }
  .verdict { margin-left: 33px; }
}

/* ---------- the gate is a to do list you act from ---------- */

.gate li.todo { padding: 3px 0; border-bottom: none; }
.gaterow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 10px 12px;
  font-size: 15px; color: var(--text); line-height: 1.45;
  border-radius: var(--r-sm);
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
button.gaterow { border: 1px solid var(--edge-soft); background: var(--desk-2); font-weight: 600; }
.gaterow.flat { cursor: default; padding-left: 0; padding-right: 0; }
button.gaterow:hover { background: var(--paper); border-color: var(--accent-line); }
.gaterow .lbl { flex: 1; }
/* the arrow is always there, quietly. A control that only appears
   on hover does not exist for a first time player, and does not
   exist at all on a touch screen. */
.gaterow .goic {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  transition: background .13s ease, color .13s ease, transform .13s ease;
}
.gaterow .goic .ic { width: 15px; height: 15px; }
button.gaterow:hover .goic { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(2px); }
button.gaterow:focus-visible .goic { background: var(--accent); border-color: var(--accent); color: #fff; }
.gate li.todo .box { margin-top: 0; }

/* ---------- a prompt opens where you are ---------- */

.docwrap.sheet.prompt { max-width: 620px; }
.sheet.prompt .sheetbody { padding: 24px 26px; }
.sheet.prompt .lead { font-size: 16px; color: var(--text-2); margin-bottom: 18px; }
.sheet.prompt .locknote { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--text-3); }
.sheet.prompt .locknote .ic { width: 17px; height: 17px; }
.sheet.prompt .choices { gap: 9px; }
.sheet.prompt .reply { margin-top: 16px; }
.sheet.prompt .btn.primary { width: 100%; }

@media (max-width: 700px) {
  .sheet.prompt .sheetbody { padding: 18px 16px; }
}

/* ============================================================
   STAGES 2 TO 7
   The people, the sorting judgements, the finding and the
   debrief. Same vocabulary as everything above: white cards
   floating on the indigo ground, aqua for the thing you do.
   ============================================================ */

/* ---------- shared list tail, so every row lines up ---------- */

.evtail { display: flex; align-items: center; gap: 12px; flex: none; }
.evrow.person { align-items: center; }
.evrow .face.sm {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glyph); color: #fff;
  font-size: 14px; font-weight: 750; letter-spacing: .02em;
}
.evrow.is-locked .face.sm { background: var(--desk-2); color: var(--text-3); }

/* ---------- a word from the director, on the hub ---------- */

.msgstack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.msgcard {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 14px 14px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ink-line); border-left: 3px solid var(--accent-lift);
  border-radius: var(--r-md);
  animation: cardIn .34s cubic-bezier(.24,.9,.3,1) both;
}
.msgcard .avatar { background: var(--glyph); color: #fff; }
.msgcard .mbody { flex: 1; min-width: 0; }
.msgcard .who { font-size: 15px; font-weight: 700; color: #fff; }
.msgcard .who span { font-family: var(--mono); font-weight: 500; color: var(--ink-faint); margin-left: 8px; }
.msgcard p { font-size: 15px; line-height: 1.5; color: var(--ink-dim); margin-top: 2px; }
.xsmall {
  width: 44px; height: 44px; flex: none; margin: -8px -8px 0 0;
  display: grid; place-items: center; border-radius: var(--r-pill); color: var(--ink-faint);
}
.xsmall:hover { background: rgba(255,255,255,.1); color: #fff; }
.xsmall .ic { width: 15px; height: 15px; }

/* ---------- the recovery window, per spec 61 ---------- */

.recover {
  padding: 18px 20px 20px; margin-bottom: 22px;
  background: rgba(210,72,60,.12);
  border: 1px solid rgba(210,72,60,.42); border-radius: var(--r-md);
}
.recover .rtop { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.recover .stamp {
  font-size: 14px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: #ffb3a6;
}
.recover .rtop .spacer { flex: 1; }
.recover .rtop .t { font-family: var(--mono); font-size: 14px; color: var(--ink-dim); }
.recover h3 { font-size: 20px; font-weight: 780; color: #fff; letter-spacing: -.015em; }
.recover p { font-size: 15px; line-height: 1.55; color: var(--ink-dim); margin: 7px 0 16px; max-width: 68ch; }

/* ---------- the timeline you build ---------- */

.tline {
  --tl-when: 100px; --tl-dot: 22px; --tl-gap: 14px;
  list-style: none; position: relative; padding-left: 4px;
}
.tline::before {
  content: ''; position: absolute; top: 8px; bottom: 8px;
  left: calc(4px + var(--tl-when) + var(--tl-gap) + (var(--tl-dot) / 2) - 1px);
  width: 2px; background: var(--edge-soft);
}
.tlrow {
  display: grid; grid-template-columns: var(--tl-when) var(--tl-dot) minmax(0,1fr);
  gap: 6px var(--tl-gap);
  align-items: start; padding: 10px 0;
}
.tlwhen { text-align: right; }
.tlwhen b { display: block; font-family: var(--mono); font-size: 15px; color: var(--text); letter-spacing: -.01em; }
.tlwhen span { display: block; font-size: 14px; color: var(--text-3); }
.tldot {
  width: 12px; height: 12px; margin: 6px auto 0; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--paper); position: relative; z-index: 1;
}
.tlwhat .ttl { display: block; font-size: 16px; font-weight: 650; color: var(--text); }
.tlwhat .sub { display: block; font-size: 15px; color: var(--text-2); margin-top: 1px; }
.tlrow.shut .tldot { background: var(--paper); box-shadow: 0 0 0 2px var(--edge), 0 0 0 4px var(--paper); }
.tlrow.shut .tlwhen b, .tlrow.shut .tlwhen span { color: var(--text-3); }
.tlrow.shut .tlwhat .ttl { color: var(--text-3); font-weight: 500; font-style: italic; }

/* ---------- your notes ---------- */

.factlist, .loglist, .revlist, .misslist { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.factlist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--text-2); }
.factlist .ic { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ok); }

.logrow, .revrow {
  display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 14px;
  padding: 11px 0 11px 12px; border-left: 3px solid var(--edge);
  border-bottom: 1px solid var(--edge-soft);
}
.logrow:last-child, .revrow:last-child { border-bottom: none; }
.logrow.best, .revrow.best { border-left-color: var(--ok); }
.logrow.good, .revrow.good { border-left-color: var(--accent); }
.logrow.partial, .revrow.partial { border-left-color: var(--gold); }
.logrow.poor, .revrow.poor { border-left-color: var(--failure); }
.lwhen, .rwhen { font-family: var(--mono); font-size: 14px; color: var(--text-3); }
.lwhat .ttl, .rwhat .ttl { display: block; font-size: 15px; color: var(--text); line-height: 1.45; }
.lwhat .sub, .rwhat .sub { display: block; font-size: 14px; color: var(--text-3); margin-top: 3px; }
.verd {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin-top: 5px;
  border-radius: var(--r-pill); background: var(--desk-2); border: 1px solid var(--edge);
  font-size: 14px; font-weight: 700; color: var(--text-2);
}
.revrow.best .verd { background: var(--ok-wash); border-color: transparent; color: var(--ok); }
.revrow.poor .verd { background: var(--failure-wash); border-color: transparent; color: var(--failure); }
.revrow.partial .verd { background: rgba(232,167,44,.14); border-color: transparent; color: #9a6a05; }

/* ============================================================
   THE INTERVIEW
   Their words on the left, yours on the right, and a system
   line where the case notices something.
   ============================================================ */

.talkpanel .panel-head { align-items: center; gap: 12px; }
.talkpanel .panel-head .face.sm {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glyph); color: #fff; font-size: 13px; font-weight: 750;
}
.script { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; }
.bub { display: flex; }
.bub p {
  max-width: 82%; padding: 11px 15px; border-radius: 16px;
  font-size: 15px; line-height: 1.5;
}
.bub.them p { background: var(--desk-2); color: var(--text); border-bottom-left-radius: 5px; }
.bub.me { justify-content: flex-end; }
.bub.me p { background: var(--accent-wash); border: 1px solid var(--accent-line); color: var(--text); border-bottom-right-radius: 5px; }
.sysline {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 13px; border-radius: var(--r-sm);
  background: rgba(232,167,44,.12); font-size: 14px; color: #7a5305;
}
.sysline .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.choice.light.ask { align-items: flex-start; }
.closepanel { margin-top: 20px; }

/* ============================================================
   NEW RECORD VIEWERS
   ============================================================ */

/* a business form */
.formhead { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.formhead .org {
  font-size: 14px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3);
}
.formhead .type { font-size: 24px; font-weight: 750; color: var(--text); letter-spacing: -.02em; margin-top: 2px; }
.formno { text-align: right; }
.formno .no { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
.formno .st { font-size: 14px; color: var(--text-3); margin-top: 3px; }
.formno .st b { color: var(--text); font-weight: 650; }
.formsec { margin-top: 24px; }
.formsec .inv-label { margin-bottom: 8px; }
.traillist { list-style: none; display: flex; flex-direction: column; }
.traillist li {
  display: grid; grid-template-columns: 128px 108px minmax(0,1fr); gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--edge-soft); font-size: 14px;
}
.traillist li:last-child { border-bottom: none; }
.traillist .tt { font-family: var(--mono); color: var(--text-3); }
.traillist .tw { color: var(--text-2); font-weight: 600; }
.traillist .td { color: var(--text-2); }

/* an email thread */
.mail { padding: 16px 18px; border: 1px solid var(--edge); border-radius: var(--r-sm); margin-bottom: 12px; }
.mail.mine { background: var(--desk-2); border-left: 3px solid var(--accent); }
.mailhead { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.mfrom { font-size: 15px; font-weight: 650; color: var(--text); }
.mfrom span { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--text-3); margin-left: 8px; }
.mwhen { font-family: var(--mono); font-size: 14px; color: var(--text-3); }
.mto { font-size: 14px; color: var(--text-3); margin-bottom: 10px; }
.mbodytext p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.mbodytext p + p { margin-top: 8px; }
.attach {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 7px 13px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--edge);
  font-family: var(--mono); font-size: 14px; color: var(--text-2);
}
.attach .ic { width: 15px; height: 15px; color: var(--text-3); }

/* a message archive export */
.chatlist { display: flex; flex-direction: column; gap: 12px; }
.chatrow { display: grid; grid-template-columns: 132px minmax(0,1fr) 56px; gap: 12px; align-items: baseline; }
.cwho { font-size: 14px; font-weight: 650; color: var(--text-2); }
.cbub {
  padding: 11px 15px; border-radius: 14px; border-top-left-radius: 5px;
  background: var(--desk-2); font-size: 15px; line-height: 1.5; color: var(--text);
}
.chatrow.mine .cbub { background: var(--accent-wash); border: 1px solid var(--accent-line); }
.cat { font-family: var(--mono); font-size: 14px; color: var(--text-3); text-align: right; }

/* a policy */
.clause { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--edge-soft); }
.clause:last-of-type { border-bottom: none; }
.cn { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text-3); }
.ch { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.clause p { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 74ch; }
.clause.key {
  background: var(--accent-wash); border-radius: var(--r-sm);
  padding: 14px 16px; border-bottom: none; margin: 4px 0;
  box-shadow: inset 3px 0 0 var(--accent);
}
.clause.key .cn { color: var(--accent-deep); }

/* ============================================================
   THE BIG JUDGEMENTS
   Confidence, the control map, the board and the finding. These
   get a screen rather than a sheet, because sorting twelve
   cards inside a modal is the long scroll we do not ship.
   ============================================================ */

.judgepanel .panel-body { padding: 22px 24px 26px; }
.narrowcol { max-width: 760px; }

/* confidence, per spec 81 */
.cfgrid { display: flex; flex-direction: column; gap: 10px; }
.cfrow { padding: 14px 16px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--paper); }
.cftext { font-size: 16px; font-weight: 650; color: var(--text); margin-bottom: 11px; }
.lvls { display: flex; flex-wrap: wrap; gap: 8px; }
.lvl {
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1px solid var(--edge); background: var(--desk-2);
  font-size: 15px; font-weight: 650; color: var(--text-2);
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.lvl:hover { border-color: var(--accent); color: var(--text); }
.lvl.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* the answer is a green fill with a check, never a second ring:
   an outline on a white button read as another selection */
.lvl.target { background: var(--ok-wash); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.lvl.on.target { background: var(--ok); border-color: var(--ok); color: #fff; }
.lvl .ic { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.lvl[disabled] { cursor: default; }
.cfrow.right { border-color: var(--ok); background: var(--ok-wash); }
.cfrow.wrong { border-color: rgba(232,167,44,.5); background: rgba(232,167,44,.08); }
.cfwhy { font-size: 15px; line-height: 1.5; color: var(--text-2); margin-top: 11px; }

/* the control map, per spec 62 */
.mapchain { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.mapstep {
  display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 6px 18px; align-items: center;
  padding: 12px 16px; border-radius: var(--r-md); background: var(--desk-2); border: 1px solid var(--edge-soft);
  position: relative;
}
.mapstep + .mapstep::before {
  content: ''; position: absolute; left: 32px; top: -5px; width: 2px; height: 5px; background: var(--edge);
}
.mapstep .mn { font-size: 16px; font-weight: 700; color: var(--text); }
.mapstep .ms { grid-column: 1; font-size: 14px; color: var(--text-3); }
.mapstep .mtags { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; }
.mtag {
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--failure-wash); border: 1px solid rgba(210,72,60,.34);
  font-size: 14px; font-weight: 650; color: var(--failure);
}
.mtag.ok { background: var(--ok-wash); border-color: transparent; color: var(--ok); }
.mapstep.hit { background: var(--paper); border-color: rgba(210,72,60,.3); }

.placers { display: flex; flex-direction: column; gap: 12px; }
.placer { padding: 14px 16px; border: 1px solid var(--edge); border-radius: var(--r-md); }
.ptext { font-size: 16px; font-weight: 650; color: var(--text); margin-bottom: 10px; }
.pchips, .bchips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  border: 1px solid var(--edge); background: var(--desk-2);
  font-size: 14px; font-weight: 650; color: var(--text-2);
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip[disabled] { cursor: default; }
.marks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.markrow {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: baseline;
  padding: 10px 14px; border-radius: var(--r-sm); border-left: 3px solid var(--edge); background: var(--desk-2);
}
.markrow.right { border-left-color: var(--ok); }
.markrow.wrong { border-left-color: var(--failure); }
.markrow .mk { font-size: 15px; color: var(--text); }
.markrow .mv { font-size: 14px; font-weight: 700; color: var(--text-2); }

/* the evidence board, per spec 79 */
.boardkey { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.keyitem {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 14px; color: var(--text-2);
}
.keyitem b {
  padding: 3px 9px; border-radius: var(--r-pill); font-weight: 700;
}
.keyitem.cl-fact b      { background: var(--fact-wash); color: var(--fact); }
.keyitem.cl-failure b   { background: var(--failure-wash); color: var(--failure); }
.keyitem.cl-indicator b { background: var(--indicator-wash); color: var(--indicator); }
.keyitem.cl-unproven b  { background: var(--unproven-wash); color: var(--unproven); }

.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.bcard { padding: 14px 16px; border: 1px solid var(--edge); border-radius: var(--r-md); background: var(--paper); }
.btext { font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--text); margin-bottom: 10px; }
.bcard.right { border-color: var(--ok); background: var(--ok-wash); }
.bcard.wrong { border-color: rgba(210,72,60,.4); background: var(--failure-wash); }
.chip.cl-fact.on      { background: var(--fact); border-color: var(--fact); }
.chip.cl-failure.on   { background: var(--failure); border-color: var(--failure); }
.chip.cl-indicator.on { background: var(--indicator); border-color: var(--indicator); }
.chip.cl-unproven.on  { background: var(--unproven); border-color: var(--unproven); }
.chip.target { background: var(--ok-wash); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.chip.on.target, .bchips .chip.on.target { background: var(--ok); border-color: var(--ok); color: #fff; }
.chip .ic { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }

/* the legend under a settled judgement */
.cflegend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 16px; font-size: 14px; color: var(--text-3);
}
.cflegend .lg {
  width: 15px; height: 15px; border-radius: 4px; flex: none;
  display: inline-grid; place-items: center;
}
.cflegend .lg.you { background: var(--accent); }
.cflegend .lg.ans { background: var(--ok-wash); box-shadow: inset 0 0 0 1px var(--ok); color: var(--ok); }
.cflegend .lg.ans .ic { width: 10px; height: 10px; }
.cflegend .lg.ans + span { margin-right: 0; }
.cflegend > span + .lg { margin-left: 10px; }

/* ============================================================
   THE FINDING BUILDER
   Eight sections, a rail that says where you are, and nothing
   locked until it is submitted.
   ============================================================ */

.builder { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 26px; align-items: start; }
.buildrail { display: flex; flex-direction: column; gap: 2px; }
.railstep {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 46px; padding: 0 12px; border-radius: var(--r-sm);
  font-size: 15px; text-align: left; color: var(--text-2);
  transition: background .13s ease, color .13s ease;
}
.railstep:hover { background: var(--desk-2); color: var(--text); }
.railstep.on { background: var(--accent-wash); color: var(--text); font-weight: 700; }
.railstep .rn {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--desk-2); border: 1px solid var(--edge);
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text-3);
}
.railstep.filled .rn { background: var(--ok); border-color: var(--ok); color: #fff; }
.railstep.filled .rn .ic { width: 14px; height: 14px; }
.railstep.on .rn { border-color: var(--accent); color: var(--accent-deep); }
.railstep .rl { flex: 1; min-width: 0; }

.secno { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.secq { font-size: 21px; font-weight: 780; color: var(--text); letter-spacing: -.015em; margin: 4px 0 16px; }
.buildnav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.buildnav .spacer { flex: 1; }

.findingdone { display: flex; flex-direction: column; }
.frow { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--edge-soft); }
.frow:last-child { border-bottom: none; }
.flbl { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.fval p { font-size: 15px; line-height: 1.55; color: var(--text-2); }
.fval p + p { margin-top: 6px; }
.fval p.bad { color: var(--failure); }
.challead { font-size: 17px; line-height: 1.55; color: var(--text); margin-bottom: 16px; }

/* ---------- hints, per spec 113 ---------- */

.hintbox { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--edge-soft); }
.hintlist { display: flex; flex-direction: column; gap: 9px; margin-bottom: 10px; }
.hintline {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 13px; border-radius: var(--r-sm);
  background: rgba(232,167,44,.11); font-size: 15px; line-height: 1.45; color: #6f4b05;
}
.hintline .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.linkbtn.dark { color: var(--accent-deep); }
.linkbtn.dark:hover { color: var(--text); border-bottom-color: var(--accent-line); }

/* ============================================================
   OUTCOME AND DEBRIEF
   ============================================================ */

.outhead { margin-bottom: 22px; text-align: center; }
.outhead h1 { font-size: 34px; font-weight: 800; letter-spacing: -.025em; color: #fff; margin: 6px 0 8px; }

/* ---------- the case complete moment ----------
   The tick pops, two rings burst, and sixteen flat pieces fan out
   once and fade. Runs on arrival only: the settled rule holds a
   re-render still, and reduced motion shows the tick at rest. */
.finburst { position: relative; width: 64px; height: 64px; margin: 4px auto 14px; }
.finburst .ftick {
  position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #04231f;
  box-shadow: 0 18px 44px -18px rgba(42,211,189,.8);
  animation: tickPop .55s cubic-bezier(.32,1.4,.4,1) both .1s;
}
.finburst .ftick .ic { width: 30px; height: 30px; }
.finburst .ftick::before, .finburst .ftick::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--accent-lift); opacity: 0; pointer-events: none;
}
.finburst .ftick::before { animation: burst .8s ease-out both .3s; }
.finburst .ftick::after  { animation: burst .9s ease-out both .45s; }
.finburst .cf {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 12px;
  border-radius: 2px; opacity: 0; pointer-events: none;
  animation: cfFly 1.5s cubic-bezier(.16,.6,.4,1) both;
}
.finburst .cf.c0 { background: var(--accent); }
.finburst .cf.c1 { background: var(--accent-lift); }
.finburst .cf.c2 { background: var(--gold); }
.finburst .cf.c3 { background: #fff; width: 8px; height: 8px; border-radius: 50%; }
@keyframes cfFly {
  0%   { transform: translate(-50%, -50%) scale(.4) rotate(0deg); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 70px)) scale(1) rotate(var(--rot)); opacity: 0; }
}
.outhead .fdone {
  display: block; margin-bottom: 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-lift);
  animation: settleIn .5s cubic-bezier(.22,.75,.3,1) both .3s;
}
.app.settled .finburst .ftick,
.app.settled .finburst .ftick::before, .app.settled .finburst .ftick::after,
.app.settled .outhead .fdone { animation: none; }
.app.settled .finburst .cf { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .finburst .ftick, .finburst .ftick::before, .finburst .ftick::after,
  .outhead .fdone { animation: none !important; opacity: 1; transform: none; }
  .finburst .cf { animation: none !important; opacity: 0; }
}
.outlead { font-size: 19px; line-height: 1.5; color: var(--ink-dim); max-width: 44ch; margin: 0 auto; }
.outlist { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.outlist li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.outlist .ic { width: 17px; height: 17px; flex: none; margin-top: 4px; color: var(--accent); }
.hub .talk { margin: 22px 0; }
.statcard .v .of { font-size: 15px; font-weight: 500; color: var(--ink-faint); }

.dimrow { padding: 12px 0; border-bottom: 1px solid var(--edge-soft); }
.dimrow:last-child { border-bottom: none; }
.dtop { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 7px; }
.dl { font-size: 16px; font-weight: 700; color: var(--text); }
.dv { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--accent-deep); }
.dsub { font-size: 14px; color: var(--text-3); margin-top: 6px; }

/* The value column is fixed, not auto. Auto sized it per row, and
   because each row is its own grid the meter track drifted with the
   width of the score text, so the bars never shared a left edge. */
.catrow { display: grid; grid-template-columns: minmax(0,1fr) 84px 64px; gap: 12px; align-items: center; padding: 9px 0; }
.catrow .cl { font-size: 15px; color: var(--text-2); }
.catrow .cv { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--text); text-align: right; }
.catrow .cv span { color: var(--text-3); font-weight: 400; }
/* on white paper the quiet desk fill is invisible, so the track
   reads as a floating fragment. The edge tone keeps it a track. */
.catrow .meter, .dimrow .meter { background: var(--edge); }
.misslist li { padding: 0; }
.misslist .evrow { border-bottom: none; border: 1px solid var(--edge-soft); border-radius: var(--r-sm); }

/* ============================================================
   RESPONSIVE
   Everything above collapses to one column, and nothing that
   has to be clicked leaves the viewport.
   ============================================================ */

@media (max-width: 1000px) {
  .builder { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .buildrail { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .railstep { width: auto; flex: none; }
  .railstep .rl { display: none; }
  .railstep.on .rl { display: block; }
}

@media (max-width: 900px) {
  .mapstep { grid-template-columns: minmax(0,1fr); }
  .mapstep .mtags { grid-row: auto; grid-column: 1; }
  .chatrow { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .chatrow .cat { text-align: left; }
  .board { grid-template-columns: minmax(0,1fr); }
  .script { max-height: none; }
  .traillist li { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .frow { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .clause { grid-template-columns: 44px minmax(0,1fr); gap: 10px; }
  .tline { --tl-when: 74px; --tl-dot: 20px; --tl-gap: 10px; }
  .logrow, .revrow { grid-template-columns: 54px minmax(0,1fr); gap: 10px; }
  .outhead h1 { font-size: 28px; }
  .outlead { font-size: 17px; }
  .catrow { grid-template-columns: minmax(0,1fr) 60px 60px; }
}

@media (max-width: 620px) {
  .bub p { max-width: 92%; }
  .formhead { gap: 12px; }
  .formno { text-align: left; }
  .mailhead { gap: 2px; }
}

/* long languages need more room, and English never shrinks for them */
:root[data-lang="zu"] .secq, :root[data-lang="tn"] .secq { font-size: 19px; }
:root[data-lang="zu"] .outhead h1, :root[data-lang="tn"] .outhead h1 { font-size: 30px; }
:root[data-lang="zu"] .chip, :root[data-lang="tn"] .chip { font-size: 14px; }

/* the four class chips must sit on one row inside a board card,
   because a wrapped pair reads as two groups rather than one choice */
.bchips .chip { padding: 0 12px; }
.board { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 900px) { .board { grid-template-columns: minmax(0,1fr); } }

/* a panel head with a description under it: the title holds row one
   and the description holds row two, so two panels side by side keep
   the same head height however long either one runs */
.panel-head { flex-wrap: wrap; }
.panel-head .sub { flex-basis: 100%; margin-top: 2px; }
.talkpanel .panel-head .face.sm + h2 { flex: 1; }

/* an unplaced step is empty, not passed. Only a recorded map says held. */
.mtag.idle { background: var(--desk-2); border-color: var(--edge); color: var(--text-3); font-weight: 500; }

/* ============================================================
   THE SPINE MADE VISIBLE
   The stage strip, the nav strip, the do next flag and the
   stage turn. One spine, one task list, one progress currency.
   ============================================================ */

/* ---------- seven stages, always on screen ---------- */

.stagestrip {
  display: flex; align-items: center; gap: 14px; flex: none;
  height: 40px; padding: 0 22px;
  background: var(--ink-900); border-bottom: 1px solid var(--ink-line);
}
.stagestrip .lbl { font-size: 14px; font-weight: 650; color: var(--ink-dim); white-space: nowrap; }
.stagestrip .lbl b { color: #fff; font-family: var(--mono); }
.stagestrip .nm {
  font-size: 15px; font-weight: 700; color: #fff; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stagestrip .bar {
  flex: 1; max-width: 280px; height: 5px; border-radius: var(--r-pill);
  background: var(--ink-800); overflow: hidden;
}
.stagestrip .bar i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--accent-lift);
}
@media (max-width: 700px) {
  .stagestrip { padding: 0 14px; gap: 10px; }
  .stagestrip .nm { font-size: 14px; }
}

/* ---------- the way around the case ---------- */

.navstrip { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.navitem {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid var(--ink-line);
  color: var(--ink-dim); font-size: 15px; font-weight: 650;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.navitem .ic { width: 17px; height: 17px; }
.navitem:hover { background: rgba(255,255,255,.12); color: #fff; }
.navitem.on { background: var(--accent-wash); border-color: var(--accent-lift); color: #fff; }
.navitem.on .ic { color: var(--accent-lift); }
.nbadge {
  font-style: normal; min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--accent); color: #04231f;
  font-family: var(--mono); font-size: 14px; font-weight: 700;
}
@media (max-width: 700px) {
  .navitem { padding: 0 13px; font-size: 14px; gap: 6px; }
}

/* the priority in the desk eyebrow reads as a state, not a chip */
.hub-top .eyebrow .prio { color: #ffb3a6; font-weight: 700; }

/* ---------- the next move, flagged ---------- */

.gaterow .donext {
  flex: none; display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
button.gaterow.next { border-color: var(--accent); background: var(--accent-wash); }
button.gaterow.next:hover { background: var(--paper); }
@media (max-width: 700px) {
  .gaterow { flex-wrap: wrap; }
  .gaterow .donext { margin-left: 33px; order: 5; }
}

/* ---------- the stage turn ---------- */

.turncard {
  max-width: 560px; margin: 9vh auto 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.turncard .tick {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 8px;
  display: grid; place-items: center;
  background: var(--accent); color: #04231f;
  box-shadow: 0 18px 44px -18px rgba(42,211,189,.8);
}
.turncard .tick .ic { width: 30px; height: 30px; }
.turncard h1 { font-size: 36px; font-weight: 800; letter-spacing: -.025em; color: #fff; }
.turncard p { font-size: 17px; line-height: 1.55; color: var(--ink-dim); max-width: 44ch; }
.turncard .gbtn { margin-top: 14px; }
@media (max-width: 700px) {
  .turncard { margin-top: 6vh; }
  .turncard h1 { font-size: 29px; }
}

/* ---------- motion discipline ----------
   Entry animations run once, on arrival. A re-render of the same
   view is a state update, and nothing may replay: not the screen
   fade, not the ledger bars, not the side panel slide. This is
   what killed the flicker. */

.app.settled .hub, .app.settled .stage { animation: none; }
.app.settled .msgcard, .app.settled .recover { animation: none; }
.app.settled .panel.side .panel-body { animation: none; }
.app.settled .ledger-bar { animation: none; }
.app.settled .alertcard, .app.settled .wizcard, .app.settled .wiz-head, .app.settled .wizbar { animation: none; }

/* ============================================================
   THE STAGE TURN, CELEBRATED
   The tick pops, a ring bursts once, and the announcement
   settles in a stagger. Flat vector throughout, nothing loops.
   ============================================================ */

.turncard .tick { position: relative; animation: tickPop .55s cubic-bezier(.32,1.4,.4,1) both .1s; }
.turncard .tick::before, .turncard .tick::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--accent-lift); opacity: 0; pointer-events: none;
}
.turncard .tick::before { animation: burst .8s ease-out both .3s; }
.turncard .tick::after  { animation: burst .9s ease-out both .45s; }
@keyframes tickPop {
  0%   { transform: scale(.3); opacity: 0; }
  62%  { transform: scale(1.09); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes burst {
  0%   { transform: scale(.65); opacity: .65; }
  100% { transform: scale(2.3); opacity: 0; }
}
.turncard .tdone {
  font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-lift);
}
.turncard .tdone  { animation: settleIn .5s cubic-bezier(.22,.75,.3,1) both .3s; }
.turncard .eyebrow{ animation: settleIn .5s cubic-bezier(.22,.75,.3,1) both .42s; }
.turncard h1      { animation: settleIn .5s cubic-bezier(.22,.75,.3,1) both .5s; }
.turncard p       { animation: settleIn .5s cubic-bezier(.22,.75,.3,1) both .6s; }
.turncard .gbtn   { animation: settleIn .5s cubic-bezier(.22,.75,.3,1) both .78s; }

@media (prefers-reduced-motion: reduce) {
  .turncard .tick, .turncard .tick::before, .turncard .tick::after,
  .turncard .tdone, .turncard .eyebrow, .turncard h1, .turncard p, .turncard .gbtn,
  .tour { animation: none !important; transition: none !important; opacity: 1; transform: none; }
}

/* ---------- the next move breathes ----------
   A slow aqua swell on the flagged task, asked for by the client.
   Drift, not flash: 2.6s, small amplitude, no opacity change. */

button.gaterow.next { animation: nextGlow 1.7s ease-in-out infinite; }
@keyframes nextGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(18,165,150,.20); }
  50%      { box-shadow: 0 0 0 9px rgba(18,165,150,.36); }
}

/* a sheet that redraws while open holds still */
.overlay.settled { animation: none; }
.overlay.settled .docwrap { animation: none; }

@media (prefers-reduced-motion: reduce) {
  button.gaterow.next { animation: none; }
}

/* the growing file on the desk */
.deskfacts { padding: 2px 20px 20px; }
.deskfacts .auth-label { margin-bottom: 10px; }
.deskfacts .factlist li { padding: 4px 0; }
.deskfacts .linkbtn { margin-top: 10px; }