/* ══════════════════════════════════════════════════════════════════════════
   Operator console for the Signalball DMCC voice desk.

   The palette is measured off signalballdmcc.com rather than guessed: white
   ground, #F9FAFB banding, #0A182E ink, #4A5568 body copy, #E1E7EF hairlines
   and blue-600 (#2563EB) as the single accent — the colour the site gives its
   links, its eyebrows and its one solid button.

   The site reserves its dark navy (#0A192F) for feature cards rather than
   using it as a ground, and this console does the same: the disclosure
   boundary is the dark surface, so the one element that matters most is the
   one place the brand goes dark.

   Note the weights. On white the site uses the -600 end of its status colours
   (emerald-600, red-600) and keeps the light -300s for text sitting ON navy.
   The tokens below follow that, which is why the triad is darker than a naive
   port of the dark theme would give.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --ground: #FFFFFF;
  --band: #F9FAFB;
  --panel: #FFFFFF;
  --panel-2: #F9FAFB;
  --line: #E1E7EF;
  --line-soft: #EDF1F6;

  /* Ink */
  --text: #0A182E;
  --dim: #4A5568;
  /* 4.80:1 on white. The dark theme's lighter grey measured 3.12:1 here and
     was carrying the 10px eyebrows, which is exactly the text that can least
     afford it. */
  --dimmer: #64748B;

  /* The dark feature surface, used exactly as the site uses it */
  --ink: #0A192F;
  --ink-deep: #050D21;
  --on-ink: #E8EEF6;
  --sky: #7DD3FC;

  /* Accent + status, as component triplets so every tint is one source */
  --accent-rgb: 37 99 235;
  --ok-rgb: 4 120 87;      /* emerald-700 — 5.56:1 on white */
  --warn-rgb: 180 83 9;    /* amber-700  — 5.14:1 on white */
  --bad-rgb: 220 38 38;    /* red-600    — 4.97:1 on white */
  --slate-rgb: 100 116 139;

  --accent: rgb(var(--accent-rgb));
  --executed: rgb(var(--ok-rgb));
  --approval: rgb(var(--warn-rgb));
  --blocked: rgb(var(--bad-rgb));

  --ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The site rounds cards at 12, large panels at 16 and controls at 8. */
  --r: 12px;
  --r-sm: 8px;
  --shadow: 0 1px 2px rgb(var(--slate-rgb) / .06), 0 1px 3px rgb(var(--slate-rgb) / .05);
  --pad: clamp(16px, 2.6vw, 34px);
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

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

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: #C6CEDA; }

/* ── Type system ─────────────────────────────────────────────────────────
   The eyebrow is lifted straight off Signalball's own site, where every
   section is introduced by small, wide, uppercase type ("FOR THE CTO"). It is
   the client's structural voice, so the console speaks in it too. */
.eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dimmer);
}

h1 {
  margin: 6px 0 0;
  font-size: clamp(23px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.15;
}

.lede {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--dim);
  font-size: 14px;
}

/* Machine register: anything the control plane itself emits — references,
   ids, tool names, verdicts, counters. */
.mono, .lock-n, .boundary-verdict, .stats dd, .tool-name,
.kb-score, .ref { font-family: var(--mono); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .16s, background .16s, color .16s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: rgb(var(--accent-rgb) / .45); background: rgb(var(--accent-rgb) / .05); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

/* The site carries exactly one filled button — "Request Technical Specs" —
   with everything else outlined. Same rule here: one solid accent per surface. */
.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: #1D4ED8; border-color: #1D4ED8; }

.btn-danger { border-color: rgb(var(--bad-rgb) / .35); color: var(--blocked); }
.btn-danger:hover:not(:disabled) { background: rgb(var(--bad-rgb) / .1); border-color: var(--blocked); }

.btn-ghost { color: var(--dim); }

/* ── Logo ────────────────────────────────────────────────────────────────
   Signalball's own mark, the white-on-dark variant they publish for exactly
   this ground. It is a fixed-height SVG with its own internal colour — the one
   place in the console where the palette is not ours to ration, so nothing
   else in the top bar competes with it. */
.logo {
  height: 26px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
/* The mark carries "THE DATA EMPIRE" under the wordmark at roughly a sixth of
   its height, so anything under ~24px turns that line into a grey smear. 26 in
   the bar, 44 on the sign-in card where there is room to give it. */
.logo-lg { height: 44px; margin-bottom: 6px; align-self: flex-start; }

/* ── Sign in ─────────────────────────────────────────────────────────────── */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgb(var(--accent-rgb) / .07), transparent 62%),
    var(--band);
}

.login-card {
  width: min(384px, 100%);
  padding: 34px 30px 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.login-sub {
  margin: 12px 0 20px;
  font-size: 13px;
  color: var(--dim);
  line-height: 1.5;
}

.login-card label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-top: 9px;
}
.login-card input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--band);
  font-family: var(--mono);
  font-size: 13px;
}
.login-card .btn { margin-top: 20px; padding: 11px; }

.login-error {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--blocked);
}

/* ── Frame ───────────────────────────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 var(--pad);
  height: 56px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex-shrink: 0;
}
.topbar-desk { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.desk-name { font-size: 13px; font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

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

.rail {
  width: 138px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--band);
}
.rail-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 18px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--dim);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: color .15s, border-color .15s, background .15s;
}
.rail-btn:hover { color: var(--text); background: rgb(var(--accent-rgb) / .04); }
.rail-btn.is-active { color: var(--accent); border-left-color: var(--accent); background: rgb(var(--accent-rgb) / .06); }
.rail-mark { font-family: var(--mono); font-size: 12px; width: 12px; }

.stage { flex: 1; min-width: 0; overflow-y: auto; padding: var(--pad); }

.view { display: none; }
.view.is-active { display: block; animation: rise .3s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }

.view-head { margin-bottom: 26px; }

/* ── Setup row ───────────────────────────────────────────────────────────── */
.setup {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 148px; }
.field-grow { flex: 1; min-width: 210px; }
.field-action { justify-content: flex-end; min-width: 0; }
.field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.field .opt { font-weight: 400; letter-spacing: 0.06em; text-transform: none; opacity: .7; }
.field select, .field input {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--band);
  font-size: 13px;
}
.field select { cursor: pointer; }

.setup-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid rgb(var(--bad-rgb) / .4);
  border-left-width: 2px;
  border-radius: var(--r);
  background: rgb(var(--bad-rgb) / .07);
  color: var(--blocked);
  font-size: 13px;
}

/* ── Record brief ────────────────────────────────────────────────────────── */
.record-brief {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 13px;
}
.record-brief h3 { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.record-brief .rb-org { color: var(--dim); font-size: 12.5px; }
.record-brief dl {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px 20px;
}
.record-brief dt {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dimmer);
}
.record-brief dd { margin: 2px 0 0; font-size: 13px; }
.rb-flag {
  margin-top: 12px;
  padding: 8px 12px;
  border-left: 2px solid var(--approval);
  background: rgb(var(--warn-rgb) / .07);
  color: var(--approval);
  font-size: 12.5px;
}
.rb-flag.is-hard { border-left-color: var(--blocked); background: rgb(var(--bad-rgb) / .07); color: var(--blocked); }

/* ══ THE BOUNDARY ═══════════════════════════════════════════════════════════
   Signalball publishes a diagram of a controlled execution boundary: a request
   crosses it and lands on executed, human approval, or blocked. This strip is
   that diagram, applied to Signalball's own desk. The seam is a real edge — it
   opens when the caller qualifies and seals when they do not, and the closed
   zone to its right stays literally unreachable until it does. */
.boundary {
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgb(var(--slate-rgb) / .12);

  /* The site never uses its navy as a ground — it uses it for the one card it
     wants you to look at. That is this. Re-pointing the tokens inside this
     block flips the whole component to the dark surface without touching a
     single rule below, and switches the status triad to the lighter weights
     the site itself uses on navy. */
  --panel: var(--ink);
  --panel-2: var(--ink-deep);
  --text: var(--on-ink);
  --dim: #A7BACF;
  --dimmer: #7E93AC;
  --line: #1C3757;
  --line-soft: #162C48;
  --accent-rgb: 125 211 252;
  --accent: var(--sky);
  --ok-rgb: 52 211 153;
  --warn-rgb: 251 191 36;
  --bad-rgb: 248 113 113;
  --slate-rgb: 148 163 184;
  --executed: rgb(var(--ok-rgb));
  --approval: rgb(var(--warn-rgb));
  --blocked: rgb(var(--bad-rgb));

  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}
.boundary .eyebrow { color: var(--accent); }

.boundary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.boundary-verdict {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--dim);
  white-space: nowrap;
}

.boundary-body {
  display: grid;
  grid-template-columns: 1fr 4px minmax(160px, 218px);
  align-items: stretch;
}

.locks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.lock {
  position: relative;
  padding: 16px 16px 18px;
  border-right: 1px solid var(--line-soft);
  transition: background .2s;
}
.lock:last-child { border-right: 0; }

.lock-n {
  display: inline-grid;
  place-items: center;
  width: 21px; height: 21px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: var(--dimmer);
  transition: border-color .2s, color .2s, background .2s;
}
.lock-name {
  display: block;
  margin-top: 9px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.lock-note { display: block; margin-top: 1px; font-size: 11.5px; color: var(--dimmer); }

.lock[data-passed="true"] { background: rgb(var(--ok-rgb) / .055); }
.lock[data-passed="true"] .lock-n {
  border-color: var(--executed);
  color: var(--executed);
  background: rgb(var(--ok-rgb) / .12);
}
.lock[data-passed="true"] .lock-name { color: var(--executed); }

.lock[data-failed="true"] { background: rgb(var(--bad-rgb) / .06); }
.lock[data-failed="true"] .lock-n { border-color: var(--blocked); color: var(--blocked); }
.lock[data-failed="true"] .lock-name { color: var(--blocked); text-decoration: line-through; }

/* The seam itself — the membrane. */
.seam { position: relative; background: var(--line); transition: background .35s; }
.seam span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .45s cubic-bezier(.16,.84,.44,1), background .35s;
}

.closed-zone {
  padding: 14px 16px;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 6px,
    rgb(var(--slate-rgb) / .035) 6px, rgb(var(--slate-rgb) / .035) 12px);
  transition: background .35s, opacity .35s;
}
.closed-title {
  margin: 0 0 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.closed-list { margin: 0; padding: 0; list-style: none; }
.closed-list li {
  font-size: 12px;
  color: var(--dimmer);
  padding: 2.5px 0;
  text-decoration: line-through;
  text-decoration-color: rgb(var(--slate-rgb) / .45);
  transition: color .25s, text-decoration-color .25s;
}

.boundary-reason {
  margin: 0;
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--dim);
}

/* Stage: partially verified — the seam charges. */
.boundary[data-state="progress"] .seam span { transform: scaleY(.5); }
.boundary[data-state="progress"] .boundary-verdict { color: var(--accent); border-color: rgb(var(--accent-rgb) / .45); }

/* Stage: identity + institution, no NDA — held for human approval. */
.boundary[data-state="approval"] .seam { background: rgb(var(--warn-rgb) / .28); }
.boundary[data-state="approval"] .seam span { transform: scaleY(.82); background: var(--approval); }
.boundary[data-state="approval"] .boundary-verdict {
  color: var(--approval); border-color: rgb(var(--warn-rgb) / .5); background: rgb(var(--warn-rgb) / .08);
}

/* Stage: released — the seam opens and the closed zone becomes reachable. */
.boundary[data-state="released"] .seam { background: rgb(var(--ok-rgb) / .3); }
.boundary[data-state="released"] .seam span { transform: scaleY(1); background: var(--executed); }
.boundary[data-state="released"] .boundary-verdict {
  color: var(--executed); border-color: rgb(var(--ok-rgb) / .5); background: rgb(var(--ok-rgb) / .09);
}
.boundary[data-state="released"] .closed-zone { background: rgb(var(--ok-rgb) / .06); }
.boundary[data-state="released"] .closed-list li {
  color: var(--text);
  text-decoration-color: transparent;
}
.boundary[data-state="released"] .closed-title { color: var(--executed); }

/* Stage: blocked — the seam thickens and seals, and the locks above die. */
.boundary[data-state="blocked"] { border-color: rgb(var(--bad-rgb) / .55); box-shadow: 0 6px 20px rgb(var(--bad-rgb) / .18); }
.boundary[data-state="blocked"] .boundary-body { grid-template-columns: 1fr 7px minmax(160px, 218px); }
.boundary[data-state="blocked"] .seam { background: var(--blocked); }
.boundary[data-state="blocked"] .seam span { transform: scaleY(1); background: var(--blocked); }
.boundary[data-state="blocked"] .boundary-verdict {
  color: var(--blocked); border-color: rgb(var(--bad-rgb) / .55); background: rgb(var(--bad-rgb) / .1);
}
.boundary[data-state="blocked"] .lock:not([data-passed="true"]) { opacity: .42; }
.boundary[data-state="blocked"] .boundary-reason { color: var(--blocked); }
.boundary[data-state="blocked"] .closed-zone {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 6px,
    rgb(var(--bad-rgb) / .07) 6px, rgb(var(--bad-rgb) / .07) 12px);
}

/* ── Call surfaces ───────────────────────────────────────────────────────── */
.call-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr minmax(258px, 330px);
  gap: 18px;
  align-items: start;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.live { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--executed); }
.live em { font-family: var(--mono); font-style: normal; color: var(--dim); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--executed);
  box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / .55);
  animation: pulse 1.9s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgb(var(--ok-rgb) / .0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / .0); }
}

.transcript {
  height: 380px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.turn { max-width: 88%; }
.turn.is-agent { align-self: flex-start; }
.turn.is-user { align-self: flex-end; }
.turn-who {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dimmer);
  margin-bottom: 4px;
}
.turn.is-user .turn-who { text-align: right; }
.turn-text {
  padding: 9px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel-2);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.turn.is-agent .turn-text { border-left: 2px solid rgb(var(--accent-rgb) / .5); }
.turn.is-user .turn-text { border-right: 2px solid var(--line); background: transparent; }

.empty { margin: 0; color: var(--dimmer); font-size: 13px; }

.whisper {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
}
.whisper input {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--band);
  font-size: 13px;
}

.panel-side { max-height: 620px; }
.activity {
  flex: 1;
  min-height: 168px;
  max-height: 300px;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tool {
  padding: 8px 11px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  font-size: 12px;
}
.tool-name { font-size: 11.5px; font-weight: 500; color: var(--accent); }
.tool-detail { margin-top: 3px; color: var(--dim); font-size: 11.5px; line-height: 1.45; }
.tool.is-blocked { border-left-color: var(--blocked); background: rgb(var(--bad-rgb) / .06); }
.tool.is-blocked .tool-name { color: var(--blocked); }
.tool.is-pass { border-left-color: var(--executed); }
.tool.is-pass .tool-name { color: var(--executed); }
.tool.is-note { border-left-color: var(--approval); }
.tool.is-note .tool-name { color: var(--approval); }

.meters { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.meter { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--dimmer); }
.bar { flex: 1; height: 3px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .09s linear; }

.stats { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats dt {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dimmer);
}
.stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; }

.panel-side .btn-danger { margin: 0 16px 14px; }

/* ── Wrap-up ─────────────────────────────────────────────────────────────── */
.wrap {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}
.wrap-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wrap-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.verdict-pill {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); color: var(--dim);
}
.verdict-pill.is-success { color: var(--executed); border-color: rgb(var(--ok-rgb) / .5); background: rgb(var(--ok-rgb) / .08); }
.verdict-pill.is-miss { color: var(--dim); }
.verdict-pill.is-fail { color: var(--blocked); border-color: rgb(var(--bad-rgb) / .5); background: rgb(var(--bad-rgb) / .08); }

.wrap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.wrap-cell { padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--r); }
.wrap-cell dt {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dimmer);
}
.wrap-cell dd { margin: 4px 0 0; font-size: 17px; font-family: var(--mono); }
.wrap-cell small { display: block; margin-top: 2px; font-size: 11px; color: var(--dimmer); font-family: var(--ui); }

.score-section { margin-top: 14px; }
.score-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.score-row:last-child { border-bottom: 0; }
.score-row b { flex: 1; font-weight: 500; }
.score-bar { width: 92px; height: 3px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--accent); }
.score-val { font-family: var(--mono); font-size: 12px; color: var(--dim); width: 34px; text-align: right; }

.coaching { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: var(--dim); }
.coaching li { margin-bottom: 5px; }

.breach-banner {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--blocked);
  border-left-width: 3px;
  border-radius: var(--r);
  background: rgb(var(--bad-rgb) / .09);
  color: var(--blocked);
  font-size: 13px;
}

/* ── Knowledge ───────────────────────────────────────────────────────────── */
.kb-search { display: flex; gap: 10px; margin-bottom: 18px; }
.kb-search input {
  flex: 1;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  font-size: 14px;
}

.kb-card {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.kb-card h3 { margin: 0; font-size: 14px; font-weight: 600; }
.kb-meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.kb-page { font-size: 11px; color: var(--accent); }
.kb-score { font-size: 10.5px; color: var(--dimmer); }
.kb-card p { margin: 9px 0 0; font-size: 13px; color: var(--dim); line-height: 1.55; }
.kb-all { margin-top: 26px; }
.kb-all-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }

/* ── Playbook ────────────────────────────────────────────────────────────── */
.playbook { display: grid; gap: 16px; }
.pb-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.pb-card h2 { margin: 7px 0 0; font-size: 17px; font-weight: 600; }
.pb-card > p { margin: 8px 0 0; font-size: 13.5px; color: var(--dim); max-width: 74ch; }
.pb-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; margin-top: 16px; }
.pb-list { margin: 8px 0 0; padding-left: 17px; font-size: 13px; color: var(--dim); }
.pb-list li { margin-bottom: 4px; }
.pb-list.is-open li::marker { color: var(--executed); }
.pb-list.is-closed li::marker { color: var(--blocked); }

.pb-rules { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: r; }
.pb-rules li {
  counter-increment: r;
  padding: 10px 0 10px 38px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
  position: relative;
}
.pb-rules li:last-child { border-bottom: 0; }
.pb-rules li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: 11px;
  font-family: var(--mono); font-size: 11px; color: var(--dimmer);
}
.pb-rules span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--dimmer); }

.pb-note {
  margin-top: 14px;
  padding: 11px 14px;
  border-left: 2px solid var(--approval);
  background: rgb(var(--warn-rgb) / .06);
  font-size: 12.5px;
  color: var(--approval);
}

/* ── Desk ────────────────────────────────────────────────────────────────── */
.desk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.stat-card {
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.stat-card dt {
  font-size: 9px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--dimmer);
}
.stat-card dd { margin: 6px 0 0; font-size: 25px; font-family: var(--mono); font-weight: 500; }
.stat-card.is-key dd { color: var(--accent); }
.stat-card.is-control dd { color: var(--executed); }

.call-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
  font-size: 13px;
  flex-wrap: wrap;
}
.call-row .who { flex: 1; min-width: 148px; font-weight: 500; }
.call-row .meta { color: var(--dimmer); font-size: 12px; font-family: var(--mono); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .call-grid { grid-template-columns: 1fr; }
  .panel-side { max-height: none; }
}

@media (max-width: 820px) {
  .shell { flex-direction: column; }
  .rail {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .rail-btn {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 15px;
    white-space: nowrap;
  }
  .rail-btn.is-active { border-left-color: transparent; border-bottom-color: var(--accent); }

  /* The boundary stacks: the seam becomes a horizontal edge, and the closed
     zone sits below it — still on the far side, still unreachable. */
  .boundary-body { grid-template-columns: 1fr; }
  .locks { grid-template-columns: 1fr; }
  .lock { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .seam { height: 4px; }
  .seam span { transform: scaleX(0); transform-origin: left; }
  .boundary[data-state="progress"] .seam span { transform: scaleX(.5) scaleY(1); }
  .boundary[data-state="approval"] .seam span { transform: scaleX(.82) scaleY(1); }
  .boundary[data-state="released"] .seam span,
  .boundary[data-state="blocked"] .seam span { transform: scaleX(1) scaleY(1); }
  .boundary[data-state="blocked"] .boundary-body { grid-template-columns: 1fr; }
  .boundary[data-state="blocked"] .seam { height: 7px; }

  .topbar { height: auto; padding: 10px var(--pad); flex-wrap: wrap; gap: 10px; }
  .transcript { height: 300px; }
  .turn { max-width: 96%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* With motion off the seam still has to read as open or sealed, so it
     switches state instantly rather than sliding. */
  .seam span { transform: scaleY(1); }
  .boundary[data-state="idle"] .seam span,
  .boundary[data-state="progress"] .seam span { opacity: .3; }
}