/* ════════════════════════════════════════════════════════════════
   Fortcall — Humania Capital investor desk

   The palette is Humania's own: the eleven-stop leaf-to-sea spectrum
   that runs behind the artwork on humaniacap.com, on a canvas mixed
   toward the same hues rather than a neutral black. The spectrum is
   rationed on purpose — it appears on the progression rail, on the
   topbar hairline, and on live states, and nowhere else. Everything
   else is monochrome and hairlines, so that when the rail lights up
   during a call it is the only colour in the room.

   Figures are set in mono because this is a ledger: money, references
   and timers have to align and read digit by digit.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Humania's spectrum, leaf → sea */
  --leaf:    #82B662;
  --sprout:  #76AD6E;
  --moss:    #68A57D;
  --jade:    #62A183;
  --lagoon:  #559A90;
  --shallow: #509894;
  --teal:    #46949D;
  --reef:    #4092A2;
  --sea:     #288BAC;

  /* Canvas — mixed toward the same hues, never neutral black */
  --ink-950: #050F12;
  --ink-900: #081519;
  --ink-850: #0A1B20;
  --ink-800: #0D2228;
  --ink-700: #123038;

  --bone:   #E7F0EC;
  --mist:   #9FB5B1;
  --slate:  #6E8783;
  --coral:  #C4695A;
  --amber:  #D9A441;

  --bg:          var(--ink-950);
  --surface:     var(--ink-900);
  --surface-up:  var(--ink-850);
  --line:        rgba(159, 181, 177, .12);
  --line-strong: rgba(159, 181, 177, .24);
  --text:        var(--bone);
  --text-dim:    var(--mist);
  --text-faint:  var(--slate);

  --accent:      var(--lagoon);
  --accent-warm: var(--leaf);
  --accent-wash: rgba(85, 154, 144, .10);

  --display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --micro: .6875rem;
  --sm:    .8125rem;
  --base:  .9375rem;
  --lg:    1.0625rem;

  --r: 2px;
  --gut: 28px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --spectrum: linear-gradient(180deg,
    var(--leaf) 0%, var(--sprout) 16%, var(--moss) 32%, var(--jade) 46%,
    var(--lagoon) 60%, var(--teal) 76%, var(--reef) 88%, var(--sea) 100%);
}

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

/* The UA rule for [hidden] is display:none, but any author rule that sets a
   display value outruns it — .console { display:flex } would leave the whole
   signed-in shell rendering behind the login gate. Make hidden mean hidden. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--base);
  font-weight: 300;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--lagoon); color: var(--ink-950); }

:focus-visible { outline: 1px solid var(--leaf); outline-offset: 2px; }

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

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Montserrat at 200 with wide tracking is how this brand is set. It carries
   the whole display voice; nothing else needs to shout. */
.wordmark {
  font-family: var(--display);
  font-size: 1.5rem; font-weight: 200; letter-spacing: .46em;
  text-transform: uppercase;
  background: var(--spectrum);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* The tracking pushes the visual centre right; pull it back. */
  text-indent: .46em;
}
.wordmark--sm {
  font-size: var(--sm); letter-spacing: .3em; text-indent: .3em;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--display);
  font-size: var(--micro); font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint);
}

.panel__title {
  font-family: var(--display);
  font-size: var(--micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
}
.panel__note { font-size: var(--sm); color: var(--text-faint); max-width: 74ch; }


/* ─────────────────────────── Buttons ─────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  font-family: var(--display);
  font-size: var(--sm); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), opacity .2s var(--ease);
}
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn--primary {
  background: var(--spectrum);
  color: var(--ink-950);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.14); }

.btn--ghost { border-color: var(--line-strong); color: var(--text-dim); }
.btn--ghost:hover:not(:disabled) { border-color: var(--lagoon); color: var(--lagoon); }

.btn--danger { border-color: rgba(196, 105, 90, .5); color: var(--coral); }
.btn--danger:hover:not(:disabled) {
  background: var(--coral); color: var(--ink-950); border-color: var(--coral);
}

.btn--sm { padding: 8px 16px; }
.btn--xs { padding: 5px 12px; font-size: var(--micro); letter-spacing: .09em; }

.btn__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }


/* ─────────────────────────── Fields ─────────────────────────── */

.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block; margin-bottom: 7px;
  font-family: var(--display);
  font-size: var(--micro); font-weight: 400;
  letter-spacing: .17em; text-transform: uppercase; color: var(--text-faint);
}
.field input, .select select, .kb-search input, .whisper input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(5, 15, 18, .6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-size: var(--base); font-weight: 300;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .select select:focus,
.kb-search input:focus, .whisper input:focus {
  outline: none; border-color: var(--lagoon); background: rgba(5, 15, 18, .88);
}
.field__error { margin: -6px 0 16px; font-size: var(--sm); color: var(--coral); }

.select { display: flex; flex-direction: column; gap: 6px; }
.select select {
  padding: 8px 12px; font-size: var(--sm);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
                    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.select select option { background: var(--ink-800); }

.chip {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--display);
  font-size: var(--micro); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint);
}
.chip--live { border-color: var(--lagoon); color: var(--lagoon); }
.chip--warm { border-color: var(--leaf); color: var(--leaf); }
.chip--bad  { border-color: var(--coral); color: var(--coral); }
.chip--plain { border-color: var(--line-strong); color: var(--text-dim); }

.pill {
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: none;
  font-family: var(--display);
  font-size: var(--micro); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.pill:hover { color: var(--text-dim); }
.pill.is-active { color: var(--lagoon); border-color: var(--lagoon); }


/* ═══════════════════════════ GATE ═══════════════════════════ */

.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 32px;
  background:
    radial-gradient(110% 80% at 50% -10%, var(--ink-700) 0%, var(--ink-850) 48%, var(--ink-950) 100%);
  overflow: hidden;
}

/* A single unlit spectrum column behind the card — the same rail the console
   lights during a call, here at rest. It is the one piece of atmosphere. */
.gate__spectrum {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--spectrum);
  opacity: .3;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}

.gate__inner {
  position: relative;
  width: 100%; max-width: 452px;
  animation: rise .7s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.gate__brand { text-align: center; margin-bottom: 40px; }

.gate__card {
  padding: 38px;
  background: rgba(8, 21, 25, .82);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .85);
}
.gate__card .btn--primary { width: 100%; justify-content: center; margin-top: 8px; }


/* ═══════════════════════════ SHELL ═══════════════════════════ */

.console { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--gut);
  padding: 0 var(--gut);
  height: 62px;
  background: rgba(5, 15, 18, .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
/* The spectrum as a hairline: the brand present, but at one pixel. */
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg,
    var(--leaf), var(--moss) 22%, var(--lagoon) 46%, var(--teal) 66%,
    var(--sea) 82%, transparent 100%);
  opacity: .7;
}

.tabs { display: flex; gap: 2px; margin-left: auto; }
.tab {
  padding: 8px 15px;
  border: none; border-bottom: 1px solid transparent;
  background: none;
  font-family: var(--display);
  font-size: var(--sm); font-weight: 400; letter-spacing: .04em;
  color: var(--text-faint); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover { color: var(--text-dim); }
.tab.is-active { color: var(--bone); border-bottom-color: var(--lagoon); }

.topbar__right { display: flex; align-items: center; gap: 16px; }
.topbar__op { display: flex; flex-direction: column; line-height: 1.15; text-align: right; }
.topbar__op b { font-size: var(--sm); font-weight: 400; }
.topbar__op small {
  font-family: var(--display);
  font-size: var(--micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate);
}

.view { display: none; flex: 1; }
.view.is-active { display: block; }

.wrapper { max-width: 1080px; margin: 0 auto; padding: 52px var(--gut) 80px; }
.wrapper--wide { max-width: 1440px; }

.page-head { margin-bottom: 36px; }
.page-head h1 {
  margin: 10px 0 10px;
  font-family: var(--display);
  font-size: 2rem; font-weight: 200; letter-spacing: -.01em;
}
.page-head__blurb { font-size: var(--sm); color: var(--text-faint); max-width: 74ch; }


/* ═══════════════════════════ DESK ═══════════════════════════ */

.desk {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: start;
  min-height: calc(100vh - 62px);
}

/* ── The book ── */
.book {
  position: sticky; top: 62px;
  max-height: calc(100vh - 62px);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.book__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gut) 14px;
}

.stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.stats > div { padding: 13px var(--gut); border-bottom: 1px solid var(--line); }
.stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.stats dt {
  font-family: var(--display);
  font-size: var(--micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate);
}
.stats dd {
  margin-top: 3px;
  font-family: var(--mono); font-size: var(--lg); font-weight: 300;
  font-variant-numeric: tabular-nums; color: var(--bone);
}

.book__filter {
  display: flex; gap: 6px;
  padding: 14px var(--gut);
  border-bottom: 1px solid var(--line);
}

.contact-list { overflow-y: auto; flex: 1; }

.contact {
  position: relative;
  width: 100%; display: block; text-align: left;
  padding: 16px var(--gut);
  border: none; border-bottom: 1px solid var(--line);
  background: none; cursor: pointer;
  transition: background .18s var(--ease);
}
/* The active marker is the spectrum itself, cropped to a 2px edge. */
.contact::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--spectrum);
  transform: scaleY(0); transform-origin: top;
  transition: transform .26s var(--ease);
}
.contact:hover { background: rgba(85, 154, 144, .04); }
.contact.is-active { background: rgba(85, 154, 144, .08); }
.contact.is-active::before { transform: scaleY(1); }

.contact__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.contact__ref { font-family: var(--mono); font-size: var(--micro); color: var(--slate); }
.contact__track {
  font-family: var(--display);
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-faint); white-space: nowrap;
}
.contact__name { margin: 5px 0 1px; font-size: var(--base); font-weight: 400; color: var(--bone); }
.contact__org { font-size: var(--sm); color: var(--text-dim); }
.contact__meta { margin-top: 5px; font-size: var(--micro); color: var(--text-faint); }
.contact__tags { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }

.tag {
  padding: 2px 7px;
  border: 1px solid currentColor; border-radius: var(--r);
  font-family: var(--display);
  font-size: 9.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
}
.tag--pro  { color: var(--leaf); }
.tag--warn { color: var(--amber); }
.tag--stop { color: var(--coral); }
.tag--ok   { color: var(--lagoon); }


/* ── Stage ── */
.stage { padding: 0 var(--gut) 64px; min-width: 0; }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64vh; text-align: center; color: var(--text-faint);
}
/* The rail at rest — the console's own signature, used as its empty state. */
.empty__mark { height: 90px; margin-bottom: 26px; }
.empty__mark i {
  display: block; width: 2px; height: 100%;
  background: var(--spectrum); opacity: .38;
}
.empty h2 {
  font-family: var(--display);
  font-size: 1.25rem; font-weight: 200; color: var(--text-dim);
}
.empty p { margin-top: 9px; font-size: var(--sm); max-width: 44ch; }

.rec-head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: end;
  padding: 30px 0 24px;
  border-bottom: 1px solid var(--line-strong);
}
.rec-head__ref { font-size: var(--sm); color: var(--text-dim); margin-top: 5px; }
.rec-head__who h2 {
  font-family: var(--display);
  font-size: 1.7rem; font-weight: 200; letter-spacing: -.01em;
}
.rec-head__meta { font-size: var(--sm); color: var(--text-faint); margin-top: 4px; }
.rec-head__cls { text-align: right; }
.rec-head__cls .chip { margin-top: 7px; }
.rec-head__sub { margin-top: 6px; font-size: var(--micro); color: var(--text-faint); }

.flags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.flag {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 15px;
  border-left: 2px solid currentColor;
  background: rgba(85, 154, 144, .05);
  font-size: var(--sm);
  max-width: 46ch;
}
.flag b {
  font-family: var(--display);
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  font-size: var(--micro);
}
.flag span { color: var(--text-dim); }
.flag--warn { color: var(--amber); background: rgba(217, 164, 65, .06); }
.flag--stop { color: var(--coral); background: rgba(196, 105, 90, .07); }
.flag--ok   { color: var(--leaf); background: rgba(130, 182, 98, .06); }


/* ── Controls ── */
.controls {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: flex-end; justify-content: space-between;
  padding: 24px 0 16px;
}
.controls--inbound { padding-top: 0; }
.controls__left  { display: flex; align-items: center; gap: 18px; }
.controls__right { display: flex; align-items: flex-end; gap: 20px; }

.level { width: 130px; height: 2px; background: var(--line-strong); overflow: hidden; }
.level i {
  display: block; height: 100%; width: 0;
  background: var(--accent-warm);
  transition: width .09s linear;
}

.timer { display: flex; flex-direction: column; gap: 5px; }
.timer .mono { font-size: 1.25rem; font-weight: 300; letter-spacing: .04em; }

.status-line {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: var(--sm); color: var(--text-faint);
}
.status-line.is-live { color: var(--lagoon); }
.status-line.is-error { color: var(--coral); }
.status-line.is-live::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lagoon); margin-right: 9px; vertical-align: middle;
  animation: pulse 1.7s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: .25; } }


/* ═══ SIGNATURE: the progression rail ═══
   Six stages, each holding one stop of Humania's spectrum. A stage is grey
   until the call clears it, and then it takes its true colour. Stage three is
   the DFSA classification gate: nothing above it can light until it passes,
   and if the caller is assessed retail the gate turns coral and everything
   above it locks for good. The brand's own colour is literally the thing you
   cannot have until you qualify. ═══ */

.live {
  display: grid;
  grid-template-columns: 232px minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1px;
  margin-top: 34px;
  background: var(--line);
  border: 1px solid var(--line);
}
.live__col, .live__rail { background: var(--bg); min-width: 0; display: flex; flex-direction: column; }
.live__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.legend {
  display: flex; gap: 16px;
  font-family: var(--display);
  font-size: var(--micro); letter-spacing: .12em; text-transform: uppercase;
}
.legend__c { color: var(--mist); }
.legend__a { color: var(--lagoon); }

.rail { padding: 22px 20px; flex: 1; }
.rail__list { position: relative; list-style: none; }
/* The unlit spine every stage sits on. */
.rail__list::before {
  content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line-strong);
}

.stage-row {
  position: relative;
  display: grid; grid-template-columns: 11px 1fr;
  gap: 13px; align-items: start;
  padding: 0 0 20px;
}
.stage-row:last-child { padding-bottom: 0; }

.stage-row__dot {
  width: 11px; height: 11px; margin-top: 4px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--bg);
  transition: background .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.stage-row__label {
  font-size: var(--sm); color: var(--text-faint); line-height: 1.4;
  transition: color .35s var(--ease);
}
.stage-row__note {
  margin-top: 2px;
  font-size: var(--micro); color: var(--slate); line-height: 1.45;
}

/* Lit: the stage takes its own stop of the spectrum, set by the JS. */
.stage-row.is-lit .stage-row__dot {
  background: var(--stop); border-color: var(--stop);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--stop) 18%, transparent);
  animation: light .55s var(--ease) both;
}
.stage-row.is-lit .stage-row__label { color: var(--bone); }
@keyframes light {
  0%   { transform: scale(2.2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--stop) 45%, transparent); }
  100% { transform: scale(1);   box-shadow: 0 0 0 4px color-mix(in srgb, var(--stop) 18%, transparent); }
}

/* The spine between two lit stages fills in behind them. */
.stage-row.is-lit::after {
  content: ''; position: absolute; left: 5px; top: 14px; width: 1px; bottom: -1px;
  background: var(--stop); opacity: .55;
  animation: grow .45s var(--ease) both;
}
.stage-row:last-child.is-lit::after { display: none; }
@keyframes grow { from { transform: scaleY(0); transform-origin: top; } }

/* The gate itself. */
.stage-row--gate { padding-top: 14px; margin-top: 4px; border-top: 1px dashed var(--line-strong); }
.stage-row--gate .stage-row__label::after {
  content: 'DFSA';
  display: inline-block; margin-left: 8px;
  font-family: var(--display);
  font-size: 9px; font-weight: 500; letter-spacing: .16em;
  color: var(--slate); vertical-align: middle;
}

/* Gate held against an ineligible caller: coral, and everything above locks. */
.stage-row.is-blocked .stage-row__dot {
  background: var(--coral); border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(196, 105, 90, .18);
}
.stage-row.is-blocked .stage-row__label { color: var(--coral); }
.stage-row.is-locked { opacity: .32; }
.stage-row.is-locked .stage-row__label { text-decoration: line-through; text-decoration-thickness: 1px; }

.rail__breach {
  margin-top: 18px; padding: 10px 12px;
  border-left: 2px solid var(--coral);
  background: rgba(196, 105, 90, .07);
  font-size: var(--micro); color: var(--text-dim); line-height: 1.5;
}
.rail__breach b { color: var(--coral); font-weight: 600; }


/* ── Transcript + activity ── */
.transcript, .activity {
  height: 420px; overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;
}
.idle-note { font-size: var(--sm); color: var(--slate); font-style: italic; }

/* Two-lane call sheet: caller left of the spine, agent right. */
.transcript { position: relative; flex: 1; }
.transcript.has-lines::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--line);
}
.line { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.line__body { font-size: var(--sm); line-height: 1.62; animation: fadeIn .3s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } }

.line--caller .line__body {
  grid-column: 1; padding-right: 20px; text-align: right; color: var(--mist);
}
.line--agent .line__body { grid-column: 2; padding-left: 20px; color: var(--bone); }
.line__who {
  display: block; margin-bottom: 3px;
  font-family: var(--display);
  font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase;
}
.line--caller .line__who { color: var(--slate); }
.line--agent .line__who { color: var(--lagoon); }

.whisper {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}
.whisper input { padding: 8px 11px; font-size: var(--sm); }
.whisper input:disabled { opacity: .45; }

.act {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  animation: fadeIn .3s var(--ease) both;
}
.act:last-child { border-bottom: none; }
.act__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.act__name { font-size: var(--sm); color: var(--bone); }
.act__time { font-family: var(--mono); font-size: 10px; color: var(--slate); }
.act__detail {
  margin-top: 4px;
  font-size: var(--micro); color: var(--text-faint); line-height: 1.55;
  word-break: break-word;
}
.act__detail b { color: var(--lagoon); font-weight: 400; font-family: var(--mono); }
.act--running .act__name::after { content: '…'; color: var(--lagoon); margin-left: 4px; }
.act--fail .act__name { color: var(--coral); }
.act--blocked .act__name { color: var(--coral); }
.act--blocked .act__detail { color: var(--coral); }


/* ── Wrap-up ── */
.wrap {
  margin-top: 34px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  animation: rise .5s var(--ease) both;
}
.wrap::before {
  content: ''; display: block; height: 2px; background: var(--spectrum);
}
.wrap__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.wrap__body { padding: 22px; }

.kpi-head {
  margin: 30px 0 14px;
  font-family: var(--display);
  font-size: var(--micro); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim);
}
.kpi-head:first-child { margin-top: 0; }

.kpi-band {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tile { padding: 14px 16px; background: var(--ink-950); }
.tile dt {
  font-family: var(--display);
  font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate);
}
.tile dd {
  margin-top: 5px;
  font-size: 1.1rem; font-weight: 300; color: var(--bone);
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.tile p { margin-top: 3px; font-size: 10px; color: var(--text-faint); }

.verdict { font-family: var(--sans); font-size: var(--sm); }
.verdict--ok  { color: var(--leaf); }
.verdict--bad { color: var(--coral); }
.verdict--na  { color: var(--slate); }

.tool-tally {
  list-style: none; margin-top: 12px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 24px;
}
.tool-tally li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: var(--sm); color: var(--text-dim);
}
.tool-tally b { color: var(--lagoon); font-weight: 400; font-family: var(--mono); }

.kpi-prose { font-size: var(--sm); color: var(--text-dim); line-height: 1.72; max-width: 80ch; }
.kpi-prose + .kpi-prose { margin-top: 10px; }
.kpi-prose--dim { color: var(--slate); font-style: italic; }
.kpi-prose b { color: var(--bone); font-weight: 600; }

.kpi-coach {
  margin-top: 16px; padding: 13px 16px;
  border-left: 2px solid var(--leaf);
  background: rgba(130, 182, 98, .06);
  font-size: var(--sm); color: var(--text-dim); line-height: 1.66;
}
.kpi-coach b {
  display: block; margin-bottom: 3px;
  font-family: var(--display);
  font-size: var(--micro); font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--leaf);
}

.scores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 22px; margin-bottom: 22px;
}
.score__top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px; font-size: var(--sm); color: var(--text-dim);
}
.score__top b { font-size: var(--lg); font-weight: 300; color: var(--bone); font-family: var(--mono); }
.score__track { height: 2px; background: var(--line-strong); overflow: hidden; }
.score__track i { display: block; height: 100%; background: var(--stop, var(--lagoon)); animation: fill .7s var(--ease) both; }
@keyframes fill { from { width: 0 !important; } }

.score-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px; margin: 22px 0;
}
.score-group ul { list-style: none; margin-top: 9px; }
.score-group li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: var(--sm); color: var(--text-faint);
}
.score-group li b { color: var(--bone); font-weight: 400; font-family: var(--mono); }


/* ═══════════════════════ KNOWLEDGE ═══════════════════════ */

.kb-search { display: flex; gap: 12px; margin-bottom: 34px; }
.kb-search input { flex: 1; }

.kb-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.kb-card { padding: 24px; background: var(--bg); transition: background .2s var(--ease); }
.kb-card:hover { background: var(--surface); }
.kb-card__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 10px;
}
.kb-card__page { font-family: var(--mono); font-size: var(--micro); color: var(--lagoon); }
.kb-card__score { font-family: var(--mono); font-size: 10px; color: var(--slate); }
.kb-card h3 {
  font-family: var(--display);
  font-size: var(--lg); font-weight: 400; margin-bottom: 9px;
}
.kb-card p { font-size: var(--sm); color: var(--text-faint); line-height: 1.68; }
.kb-card__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.kb-card__tags span {
  padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--r);
  font-family: var(--display);
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--slate);
}


/* ═══════════════════════ PLAYBOOK ═══════════════════════ */

.policy { margin-bottom: 48px; }
.policy__head { margin-bottom: 18px; }
.policy__head .panel__note { margin-top: 7px; }
.policy__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.policy__cell { padding: 20px; background: var(--bg); }
.policy__cell dt {
  font-family: var(--display);
  font-size: var(--micro); letter-spacing: .13em;
  text-transform: uppercase; color: var(--slate);
}
.policy__cell dd {
  margin-top: 6px;
  font-family: var(--mono); font-size: 1.28rem; font-weight: 300;
  color: var(--bone); font-variant-numeric: tabular-nums; line-height: 1.3;
}
.policy__cell dd.is-prose { font-family: var(--sans); font-size: var(--base); }
.policy__cell p { margin-top: 5px; font-size: var(--micro); color: var(--text-faint); line-height: 1.5; }

.rules { margin-bottom: 48px; }
.rules__list { margin-top: 18px; padding-left: 0; list-style: none; }
.rules__list li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid var(--line);
  font-size: var(--sm); color: var(--text-dim); line-height: 1.7;
}
/* A rule is not a sequence, so it gets a mark rather than a number. */
.rules__list li::before {
  content: ''; position: absolute; left: 0; top: 22px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lagoon); opacity: .8;
}
.rules__list li:first-child::before { background: var(--leaf); }
.rules__list li b { color: var(--bone); font-weight: 600; }



/* ═══════════════════════ DESK METRICS ═══════════════════════ */

.log-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 20px; align-items: center;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.log-row__who { font-size: var(--sm); color: var(--bone); }
.log-row__meta { margin-top: 3px; font-size: var(--micro); color: var(--text-faint); }
.log-row__right { display: flex; align-items: center; gap: 16px; }
.log-row__dur { font-family: var(--mono); font-size: var(--sm); color: var(--text-dim); }


/* ═══════════════════════ Scrollbars ═══════════════════════ */

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--slate); }


/* ═══════════════════════ Responsive ═══════════════════════ */

@media (max-width: 1320px) {
  .live { grid-template-columns: 210px minmax(0, 1fr); }
  .live__col--narrow { grid-column: 1 / -1; }
  .live__col--narrow .activity { height: 260px; }
}

@media (max-width: 1040px) {
  :root { --gut: 20px; }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .book { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--line); }
  .contact-list { max-height: 340px; }
  .rec-head { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .rec-head__cls { text-align: left; }
  .live { grid-template-columns: minmax(0, 1fr); }
  .rail { padding-bottom: 26px; }
  .topbar { flex-wrap: wrap; height: auto; padding: 12px var(--gut); gap: 14px; }
  .tabs { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
}

@media (max-width: 640px) {
  .transcript.has-lines::before { display: none; }
  .line { grid-template-columns: minmax(0, 1fr); }
  .line--caller .line__body { grid-column: 1; text-align: left; padding-right: 0; }
  .line--agent .line__body { grid-column: 1; padding-left: 14px; border-left: 1px solid var(--lagoon); }
  .controls { flex-direction: column; align-items: stretch; }
  .controls__right { flex-wrap: wrap; }
  .gate__card { padding: 26px; }
  .wordmark { font-size: 1.15rem; letter-spacing: .34em; text-indent: .34em; }
  .page-head h1 { font-size: 1.55rem; }
}

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