/* ══════════════════════════════════════════════════════════════════════════
   FORTCALL operator console for the Moonshaker LTD voice desk.

   Palette from moonshaker.uk's own :root tokens. The site is gold on
   bronze-black; on this light console the gold carries the one accent — the
   dial, the active nav, the primary button — and moonshaker's near-black
   bronze (#120D09) is the one dark surface: the control panel, so the rule
   that outranks the sale is the one place the console goes dark.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces */
  --ground: #FFFFFF;
  --band: #FAF6EE;
  --panel: #FFFFFF;
  --panel-2: #FBF8F2;
  --line: #E9E0CF;
  --line-soft: #F2ECE0;

  /* Ink */
  --text: #1E140B;
  --dim: #5C4E40;
  /* 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: #776656;

  /* The dark feature surface, used exactly as the site uses it */
  --ink: #16100A;
  --ink-deep: #0A0705;
  --on-ink: #FAF6EE;
  --sky: #F3D27A;

  /* Accent + status, as component triplets so every tint is one source */
  --accent-rgb: 158 115 35;   /* Moonshaker gold-deep #9E7323 */
  --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: 92 61 36;

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

  --ui: 'Inter', 'Helvetica Neue', Helvetica, 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: #D9CBB2; }

/* ── 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: #7E5B1B; border-color: #7E5B1B; }

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

/* FORTCALL wordmark — the console's own mark. Moonshaker's logo never appears. */
.logo {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0;
  font: 700 15px/1 var(--ui); letter-spacing: .2em; color: var(--text);
}
.logo svg { width: 22px; height: 22px; fill: rgb(var(--accent-rgb)); }
.logo-lg { font-size: 18px; margin-bottom: 6px; align-self: flex-start; }
.logo-lg svg { width: 28px; height: 28px; }

/* ── 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; }

/* ══ THE DIAL ════════════════════════════════════════════════════════════════
   One button starts the call and ends it. It is the company's name made
   literal: a ball, sending out signal. Idle, it broadcasts slow rings; while
   connecting an arc chases round it; on the line it turns red, the handset
   rotates into the hang-up position, and the halo breathes with the caller's
   own microphone level (--level, 0–1, set from the audio worklet). The orb's
   blue is the site's single accent, so the button is also the one solid
   accent on the surface. */
.dial-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(70% 100% at 50% 0%, rgb(var(--accent-rgb) / .08), transparent 70%),
    var(--panel);
  box-shadow: var(--shadow);
}
/* The static rings behind the orb, centred on it (48px padding + half the
   orb), fading out towards the edges of the stage. */
.dial-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 104px;
  width: 680px;
  height: 680px;
  transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle,
    transparent 0 55px, rgb(var(--accent-rgb) / .1) 55px 56px);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 60%);
  mask-image: radial-gradient(circle, #000 18%, transparent 60%);
  pointer-events: none;
  transition: opacity .5s;
}
.dial-stage:has(.dial[data-state="live"])::before {
  background: repeating-radial-gradient(circle,
    transparent 0 55px, rgb(var(--bad-rgb) / .09) 55px 56px);
}

.dial {
  --glow-rgb: var(--accent-rgb);
  --level: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dial:focus-visible { outline: none; }
.dial:focus-visible .dial-orb {
  outline: 3px solid rgb(var(--glow-rgb) / .45);
  outline-offset: 7px;
}
.dial:disabled { cursor: progress; }

.dial-orb {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  color: #2C1D11;
  background: radial-gradient(circle at 34% 28%, #FBE7A6 0%, #F3D27A 22%, #D4AF37 55%, #7E5B1B 100%);
  box-shadow:
    0 1px 1px rgb(44 29 17 / .10),
    0 10px 22px -6px rgb(var(--glow-rgb) / .55),
    0 30px 60px -18px rgb(var(--glow-rgb) / .50),
    inset 0 1px 0 rgb(255 255 255 / .45),
    inset 0 -12px 24px rgb(44 29 17 / .28);
  transition:
    transform .45s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .45s ease;
}
/* Gloss: a soft specular highlight in the top-left, so it reads as a sphere
   rather than a flat disc. */
.dial-orb::before {
  content: "";
  position: absolute;
  inset: 7px 18px auto 14px;
  height: 46%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgb(255 255 255 / .42), rgb(255 255 255 / 0));
  z-index: 2;
  pointer-events: none;
}
/* The live colour lives on its own layer and fades in, because gradients
   cannot transition and a hard swap from blue to red reads as a glitch. */
.dial-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #FF9B9B 0%, #EF4444 30%, #DC2626 58%, #7F1D1D 100%);
  opacity: 0;
  z-index: 1;
  transition: opacity .5s ease;
}

.dial-icon {
  position: relative;
  z-index: 3;
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 1px 1.5px rgb(44 29 17 / .35));
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}

.dial-ring {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--glow-rgb) / .55);
  opacity: 0;
  animation: ripple 3.6s cubic-bezier(.2, .6, .35, 1) infinite;
}
.dial-ring:nth-child(2) { animation-delay: 1.2s; }
.dial-ring:nth-child(3) { animation-delay: 2.4s; }
/* Most of the fade happens early, so a ring is nearly gone by the time it
   reaches the label beneath the orb. */
@keyframes ripple {
  0%   { transform: scale(1);    opacity: .85; }
  55%  { transform: scale(1.6);  opacity: .22; }
  100% { transform: scale(2.15); opacity: 0; }
}

.dial-halo {
  position: absolute;
  inset: -14px;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--glow-rgb) / .34) 30%, rgb(var(--glow-rgb) / 0) 70%);
  opacity: .55;
  transform: scale(calc(1 + var(--level) * 1.1));
  transition: transform .09s linear, opacity .4s ease;
}

.dial-spin {
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(var(--glow-rgb) / 0) 0 62%, rgb(var(--glow-rgb) / .95) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 0;
  transition: opacity .3s;
}

/* The label and status sit over the rings, so each carries a halo in the
   panel colour: a ring passes behind the letters rather than through them. */
.dial-label, .dial-status {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 6px var(--panel), 0 0 12px var(--panel), 0 0 18px var(--panel);
}
.dial-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: color .3s;
}

.dial-status {
  margin: 4px 0 0;
  min-height: 1.5em;
  max-width: 60ch;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}

/* Idle: hover lifts the orb and rings the handset; press sinks it. */
.dial[data-state="idle"]:hover .dial-orb {
  transform: translateY(-4px) scale(1.035);
  box-shadow:
    0 2px 2px rgb(44 29 17 / .10),
    0 16px 30px -6px rgb(var(--glow-rgb) / .60),
    0 42px 76px -20px rgb(var(--glow-rgb) / .55),
    inset 0 1px 0 rgb(255 255 255 / .5),
    inset 0 -12px 24px rgb(44 29 17 / .28);
}
.dial[data-state="idle"]:hover .dial-icon { animation: jingle .85s ease-in-out; }
.dial[data-state="idle"]:hover .dial-ring { animation-duration: 2.4s; }
.dial:active .dial-orb {
  transform: translateY(0) scale(.94);
  transition-duration: .09s;
}
@keyframes jingle {
  0%, 100% { transform: rotate(0); }
  15%, 45% { transform: rotate(-14deg); }
  30%, 60% { transform: rotate(14deg); }
  75%      { transform: rotate(-6deg); }
}

/* Connecting: the broadcast stops and an arc chases round the orb. */
.dial[data-state="connecting"] .dial-ring { animation: none; opacity: 0; }
.dial[data-state="connecting"] .dial-spin { opacity: 1; animation: spin .9s linear infinite; }
.dial[data-state="connecting"] .dial-orb { transform: scale(.97); }
@keyframes spin { to { transform: rotate(1turn); } }

/* Live: red, handset down, halo on the caller's voice. */
.dial[data-state="live"] { --glow-rgb: var(--bad-rgb); }
.dial[data-state="live"] .dial-orb::after { opacity: 1; }
.dial[data-state="live"] .dial-icon { transform: rotate(135deg); }
.dial[data-state="live"] .dial-halo { opacity: 1; }
.dial[data-state="live"] .dial-ring { animation-duration: 2.6s; }
.dial[data-state="live"] .dial-label { color: var(--blocked); }
.dial[data-state="live"]:hover .dial-orb { transform: translateY(-3px) scale(1.03); }

/* Options sit under the dial and lock while a call is on. */
.dial-options {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transition: opacity .3s;
}
.dial-options.is-locked { opacity: .45; }

.pill-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--band);
  font-size: 12.5px;
  color: var(--dimmer);
}
.pill-select select {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 26px 5px 6px;
  border: 0;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 10px center;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  /* "Bahasa Indonesia — Indonesian" is the longest entry; past this the row
     wraps rather than the name being clipped to an ellipsis. */
  max-width: 260px;
}
.pill-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill-select select:disabled { cursor: not-allowed; }

/* ── Errors ────────────────────────────────────────────────────────────────── */
.setup-error {
  margin: 14px 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;
}

/* ══ THE BOUNDARY ═══════════════════════════════════════════════════════════
   Moonshaker's Enterprise pillar is "Strictly B2B & R&D", and its A.T.O.N.
   detail is "strictly gated behind our V4 Corporate Mutual NDA". This strip is
   both rules made visible. The seam opens when the caller qualifies as a
   business and seals when they say they are buying privately; the closed zone
   to its right stays unreachable until it opens. Below it, the NDA line never
   opens at all — and flashes each time it holds. */
.boundary {
  margin-top: 18px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgb(var(--slate-rgb) / .12);

  /* moonshaker.uk's own ground. Re-pointing the tokens inside this block flips
     the whole component to the dark surface without touching a rule below, and
     switches the status triad to the lighter weights that read on bronze-black. */
  --panel: var(--ink);
  --panel-2: var(--ink-deep);
  --text: var(--on-ink);
  --dim: #CDBFA9;
  --dimmer: #A8977F;
  --line: #3A2A1B;
  --line-soft: #2A1E13;
  --accent-rgb: 243 210 122;
  --accent: var(--sky);
  --ok-rgb: 52 211 153;
  --warn-rgb: 251 191 36;
  --bad-rgb: 248 113 113;
  --slate-rgb: 184 175 163;
  --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);
}

/* The NDA line: never opens on this call. */
.never {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  background: rgb(var(--bad-rgb) / .05);
}
.never-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--blocked);
}
.never-title::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--blocked); box-shadow: 0 0 0 4px rgb(var(--bad-rgb) / .16);
}
.never-list { display: contents; }
.never-list span { font-size: 12px; color: var(--dimmer); text-decoration: line-through; }
.never-count {
  margin-left: auto; font: 600 11px/1 var(--mono); color: var(--blocked);
  padding: 4px 9px; border: 1px solid rgb(var(--bad-rgb) / .45); border-radius: 20px;
}
.never.is-flash { animation: never-flash 1.4s ease-out; }
@keyframes never-flash {
  0% { background: rgb(var(--bad-rgb) / .34); }
  100% { background: rgb(var(--bad-rgb) / .05); }
}

/* ── 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 14px; border-top: 1px solid var(--line-soft); }

.stats { margin: 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; }

/* ── 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-source { font-size: 11px; color: var(--dimmer); }
.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); }
/* Products are not a sequence, so they drop the counter. */
.pb-rules.is-plain li { padding-left: 0; font-weight: 600; }
.pb-rules.is-plain li::before { content: none; }
.pb-rules.is-plain span { font-weight: 400; }

.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(4, minmax(0, 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) {
  .desk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .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; }
  .dial-stage { padding: 44px 16px 20px; }
  .dial-stage::before { top: 100px; }
  .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); }
  /* The dial keeps its states — blue, arc, red — without the broadcast. */
  .dial-ring { display: none; }
  .dial[data-state="connecting"] .dial-spin { opacity: .7; }
  .boundary[data-state="idle"] .seam span,
  .boundary[data-state="progress"] .seam span { opacity: .3; }
}