/* ══════════════════════════════════════════════════════════════════════════
   Signalball Solutions — the recovery desk operator console.

   The palette is measured off signalballdmcc.com: white ground, #F9FAFB
   banding, #0A182E ink, #4A5568 body copy, #E1E7EF hairlines, and blue-600
   (#2563EB) as the single accent — the one colour that gets to be loud, spent
   on links, eyebrows and exactly one solid button per surface.

   The dark navy is not a ground. It is reserved for the one component that
   matters most, which on a collections desk is the disclosure gate: nothing
   about a debtor's account may be said aloud until identity is proven, so the
   intake strip is where the theme goes dark and everything else stays paper.

   Status colours sit at the -600/-700 end because they are read on white.
   Inside the dark strip the tokens are re-pointed to the light -300/-400
   weights, so the same rules work on both grounds without being rewritten.

   Figures stay in mono throughout: this is a ledger, and money and references
   have to align and read digit by digit.
   ══════════════════════════════════════════════════════════════════════════ */

: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 10px eyebrows ride on this token, which is exactly
     the text that can least afford a thin contrast ratio. */
  --dimmer: #64748B;

  /* The dark surface, used only where the theme means it */
  --ink: #0A192F;
  --ink-deep: #050D21;
  --on-ink: #E8EEF6;
  --sky: #7DD3FC;

  /* Accent + status as component triplets, so every tint has 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));
  --accent-deep: #1D4ED8;
  --ok: rgb(var(--ok-rgb));
  --warn: rgb(var(--warn-rgb));
  --bad: rgb(var(--bad-rgb));

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

  --micro: 10px;
  --sm:    13px;
  --base:  15px;
  --lg:    17px;

  /* Cards at 12, large panels at 16, controls at 8. */
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgb(var(--slate-rgb) / .06), 0 1px 3px rgb(var(--slate-rgb) / .05);
  --gut: clamp(16px, 2.6vw, 34px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { 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%; height: 100%; }

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

::selection { background: rgb(var(--accent-rgb) / .18); }

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

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

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

/* ── Type system ─────────────────────────────────────────────────────────
   Small, wide, uppercase type introduces every section. It is the structural
   voice of the whole console — the eyebrow says where you are, the title says
   what it is, the note says what it is for. */
.eyebrow {
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dimmer);
}

.panel__title {
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dimmer);
}
.panel__note { font-size: var(--sm); color: var(--dim); font-weight: 400; }


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

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  font-size: var(--sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.btn:hover:not(:disabled) { border-color: rgb(var(--accent-rgb) / .45); background: rgb(var(--accent-rgb) / .05); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

/* Exactly one filled button per surface. It is the accent's whole job. */
.btn--gold {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
}
.btn--gold:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }

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

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

.btn--sm { padding: 7px 14px; }
.btn--xs { padding: 5px 11px; font-size: 11.5px; }

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


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

.field__label {
  display: block; margin-bottom: 7px;
  font-size: var(--micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--dimmer);
}
.select select, .kb-search input {
  width: 100%;
  padding: 10px 12px;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--sm);
  font-weight: 400;
  transition: border-color .16s, background .16s;
}
.select select:focus, .kb-search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--ground);
}
.select { display: flex; flex-direction: column; gap: 5px; }
.select select {
  padding: 8px 12px; font-size: var(--sm); cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dimmer) 50%),
                    linear-gradient(135deg, var(--dimmer) 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(--ground); color: var(--text); }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
}
.chip--gold { border-color: rgb(var(--accent-rgb) / .5); color: var(--accent); background: rgb(var(--accent-rgb) / .07); }


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

.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgb(var(--accent-rgb) / .07), transparent 62%),
    var(--band);
  overflow: hidden;
}

/* Ruled lines drifting behind the card — the one ambient motion in the
   console, pitched low enough that it reads as paper stock, not decoration. */
.gate__rules {
  position: absolute; inset: -20%;
  background-image: repeating-linear-gradient(
    122deg,
    transparent 0 76px,
    rgb(var(--accent-rgb) / .05) 76px 77px
  );
  animation: drift 44s linear infinite;
  pointer-events: none;
}
@keyframes drift { to { transform: translate3d(-154px, 96px, 0); } }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ── Logo ────────────────────────────────────────────────────────────────
   Signalball's own mark, the variant they publish for a light ground. It is a
   fixed-height SVG carrying 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 sets "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 ─────────────────────────────────────────────────────────────
   One card, no chrome around it. The mark carries the identity, so the card
   says nothing the mark already said. */
.login-card {
  position: relative;
  width: min(384px, 100%);
  padding: 34px 30px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgb(var(--slate-rgb) / .1), var(--shadow);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 7px;
  animation: rise .5s var(--ease) both;
}
.login-sub {
  margin: 12px 0 20px;
  font-size: var(--sm);
  color: var(--dim);
  line-height: 1.5;
}
.login-card label {
  font-size: var(--micro);
  font-weight: 700;
  letter-spacing: .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: var(--sm);
  transition: border-color .16s, background .16s;
}
.login-card input:focus { outline: none; border-color: var(--accent); background: var(--ground); }
.login-card .btn { margin-top: 20px; padding: 11px; justify-content: center; }

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


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

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

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--gut);
  height: 56px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.topbar-desk { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.desk-name { font-size: var(--sm); font-weight: 600; }

.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar__op { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.topbar__op b { font-size: var(--sm); font-weight: 600; }
.topbar__op small {
  font-size: 9px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dimmer);
}

/* ── The rail ────────────────────────────────────────────────────────────
   Navigation runs down the left edge rather than across the top, because the
   desk's own content is a two-column layout that already owns the horizontal
   axis. The rail sticks under the top bar; the document keeps the scroll, so
   the book column inside the desk view can go on being sticky against it. */
.shell { display: flex; align-items: flex-start; flex: 1; min-height: 0; }

.rail {
  position: sticky; top: 56px;
  width: 148px; flex-shrink: 0;
  height: calc(100vh - 56px);
  padding: 14px 0;
  display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--line);
  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: var(--sm);
  text-align: left;
  cursor: pointer;
  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; flex: none; }
.rail-label { min-width: 0; }

.shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

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

.wrapper { max-width: 1080px; margin: 0 auto; padding: 38px var(--gut) 72px; }

.page-head { margin-bottom: 26px; }
.page-head h1 {
  margin: 6px 0 0;
  font-size: clamp(23px, 3vw, 32px); font-weight: 600;
  letter-spacing: -.024em; line-height: 1.15;
}
.page-head__blurb { margin-top: 8px; font-size: 14px; color: var(--dim); max-width: 62ch; }


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

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

/* ── The book ── */
.book {
  position: sticky; top: 56px;
  /* A fixed height, not max-height: the grid sets align-items:start so the
     sticky column can stick, which also means a short list would otherwise
     collapse the book to a stub and leave its border-right hanging in space.
     The list scrolls inside it instead. */
  height: calc(100vh - 56px);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--band);
}
.book__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gut) 12px;
}

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

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

.acct {
  position: relative;
  width: 100%;
  display: block; text-align: left;
  padding: 14px var(--gut);
  border: none; border-bottom: 1px solid var(--line);
  background: none;
  cursor: pointer;
  transition: background .16s;
}
.acct::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .22s var(--ease);
}
.acct:hover { background: rgb(var(--accent-rgb) / .04); }
.acct.is-active { background: rgb(var(--accent-rgb) / .07); }
.acct.is-active::before { transform: scaleY(1); }

.acct__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acct__ref { font-family: var(--mono); font-size: 11px; color: var(--dimmer); }
.acct__dpd { font-family: var(--mono); font-size: 11px; color: var(--dimmer); white-space: nowrap; }
.acct__name { margin: 4px 0 2px; font-size: 14px; font-weight: 600; color: var(--text); }
.acct__bal {
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.acct__seg { margin-top: 5px; font-size: 11.5px; color: var(--dim); }
.acct__tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.tag {
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 20px;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tag--warn  { color: var(--warn); }
.tag--stop  { color: var(--bad); }
.tag--ok    { color: var(--ok); }
.tag--gold  { color: var(--accent); }
.tag--legal { color: var(--bad); }
.tag--plain { color: var(--dimmer); }


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

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 62vh; text-align: center; color: var(--dimmer);
}
.empty__mark { color: var(--accent); opacity: .35; margin-bottom: 20px; }
.empty h2 { font-size: 19px; font-weight: 600; color: var(--text); }
.empty p { margin-top: 8px; font-size: var(--sm); max-width: 42ch; }

.acct-head {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: end;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--line);
}
.acct-head__ref { font-size: var(--sm); color: var(--dim); margin-top: 5px; }
.acct-head__who h2 { font-size: 26px; font-weight: 600; letter-spacing: -.024em; }
.acct-head__meta { font-size: var(--sm); color: var(--dim); margin-top: 3px; }
.acct-head__bal { text-align: right; }
.figure {
  font-family: var(--mono);
  font-size: 30px; font-weight: 500; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--accent); line-height: 1.15; margin-top: 5px;
}
.acct-head__dpd { font-size: var(--micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dimmer); }

.flags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.flag {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid currentColor;
  border-radius: var(--r);
  background: rgb(var(--warn-rgb) / .06);
  font-size: 12.5px;
}
.flag b { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 9.5px; }
.flag span { color: var(--dim); }
.flag--warn { color: var(--warn); }
.flag--stop { color: var(--bad); background: rgb(var(--bad-rgb) / .07); }


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

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

.timer { display: flex; flex-direction: column; gap: 4px; }
.timer .mono { font-size: 19px; font-weight: 500; letter-spacing: .02em; }

.status-line {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--sm); color: var(--dim);
}
.status-line.is-live { color: var(--ok); }
.status-line.is-error { color: var(--bad); }
.status-line.is-live::before {
  content: ''; display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: 9px; vertical-align: middle;
  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); }
}


/* ═══ SIGNATURE: the negotiating room ═══
   A vertical scale from the full balance down to the deepest settlement the
   desk may authorise. Every rung sits at its true height, so the space between
   two offers is literally the money between them. When a deal lands, an accent
   marker settles onto it. */

.room {
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.room__head { margin-bottom: 24px; }
.room__head .panel__note { margin-top: 5px; max-width: 62ch; }

/* Geometry shared by the plot and its absolutely-positioned children. */
.ladder { --rail: 128px; }
.ladder__plot { position: relative; }

.ladder__track {
  position: absolute; left: var(--rail); top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--accent) 0%, rgb(var(--accent-rgb) / .18) 100%);
}

/* The tick is the honest mark: always at the amount's true height, even when
   its label has been nudged aside to stay legible. */
.ladder__tick {
  position: absolute; left: var(--rail);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border: 1px solid rgb(var(--slate-rgb) / .7); border-radius: 50%;
  background: var(--panel);
}
.ladder__tick.rung--cap { border-color: var(--accent); }
.ladder__tick.rung--floor { border-color: rgb(var(--accent-rgb) / .55); }
.ladder__tick.rung--agreed {
  background: var(--accent); border-color: var(--accent);
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .14);
  animation: land .6s var(--ease) both;
  z-index: 3;
}
@keyframes land {
  0%   { transform: scale(2.6); box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .35); }
  100% { transform: scale(1);   box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .14); }
}

/* Leader line from a displaced label back to its true tick. */
.rung__link {
  position: absolute; left: calc(var(--rail) + 11px);
  width: 1px; background: var(--line);
}

.rung {
  position: absolute; left: 0; right: 0;
  display: grid; grid-template-columns: var(--rail) 1fr;
  align-items: center;
  transform: translateY(-50%);
  animation: rungIn .45s var(--ease) both;
}
@keyframes rungIn { from { opacity: 0; transform: translateY(-50%) translateX(-8px); } }

.rung__amt {
  padding-right: 18px; text-align: right;
  font-family: var(--mono); font-size: var(--sm); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.rung__body { position: relative; padding-left: 22px; }
.rung__body::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 11px; height: 1px; background: var(--line);
}
.rung__label { font-size: var(--sm); color: var(--dim); line-height: 1.4; }
.rung__sub {
  font-size: 11.5px; color: var(--dimmer);
  letter-spacing: .01em; line-height: 1.45;
}

.rung--cap .rung__amt { color: var(--accent); font-size: 14px; }
.rung--cap .rung__label { color: var(--text); font-weight: 500; }

.rung--agreed { z-index: 3; }
.rung--agreed .rung__amt { color: var(--accent); font-weight: 700; }
.rung--agreed .rung__label { color: var(--accent); font-weight: 500; }

.ladder__note {
  margin-top: 20px; padding-left: var(--rail);
  font-size: 11.5px; color: var(--dimmer);
}


/* ── Live: transcript + activity ── */
.live {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.live__col {
  background: var(--panel); min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.live__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.legend { display: flex; gap: 14px; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.legend__c { color: var(--dimmer); }
.legend__a { color: var(--accent); }

.transcript, .activity {
  height: 400px; overflow-y: auto;
  padding: 18px;
  scroll-behavior: smooth;
}
.transcript__idle { font-size: var(--sm); color: var(--dimmer); }

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

.line--customer .line__body {
  grid-column: 1; padding-right: 20px; text-align: right;
  color: var(--dim);
}
.line--agent .line__body {
  grid-column: 2; padding-left: 20px;
  color: var(--text);
}
.line__who {
  display: block; margin-bottom: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.line--customer .line__who { color: var(--dimmer); }
.line--agent .line__who { color: var(--accent); }

.act {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  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: 12.5px; font-weight: 500; color: var(--text); }
.act__time { font-family: var(--mono); font-size: 10px; color: var(--dimmer); }
.act__detail { margin-top: 4px; font-size: 11.5px; color: var(--dim); line-height: 1.5; word-break: break-word; }
.act__detail b { color: var(--accent); font-weight: 500; font-family: var(--mono); }
.act--running .act__name::after {
  content: '…'; color: var(--accent); margin-left: 4px;
}
.act--fail .act__name { color: var(--bad); }


/* ── Wrap-up ── */
.wrap {
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  animation: rise .4s var(--ease) both;
}
.wrap__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.wrap__body { padding: 20px; }

.chip--plain { border-color: var(--line); color: var(--dim); }
.chip--bad { border-color: rgb(var(--bad-rgb) / .5); color: var(--bad); background: rgb(var(--bad-rgb) / .08); }

.kpi-head {
  margin: 28px 0 12px;
  font-size: var(--micro); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer);
}
.kpi-head:first-child { margin-top: 0; }

.kpi-band {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}
.tile {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel-2);
}
.tile dt {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dimmer);
}
.tile dd {
  margin-top: 5px;
  font-family: var(--mono); font-size: var(--lg); font-weight: 500;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.25;
}
.tile p { margin-top: 3px; font-size: 11px; color: var(--dimmer); }

.verdict { font-family: var(--sans); font-size: var(--sm); font-weight: 500; }
.verdict--ok  { color: var(--ok); }
.verdict--bad { color: var(--bad); }
.verdict--na  { color: var(--dimmer); }

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

.kpi-prose { font-size: var(--sm); color: var(--dim); line-height: 1.68; max-width: 78ch; }
.kpi-prose + .kpi-prose { margin-top: 10px; }
.kpi-prose--dim { color: var(--dimmer); }
.kpi-prose b { color: var(--text); font-weight: 600; }

.kpi-coach {
  margin-top: 16px; padding: 12px 16px;
  border-left: 2px solid var(--warn);
  border-radius: var(--r);
  background: rgb(var(--warn-rgb) / .06);
  font-size: var(--sm); color: var(--dim); line-height: 1.62;
}
.kpi-coach b {
  display: block; margin-bottom: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--warn);
}

.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
.score__top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px;
  font-size: var(--sm); color: var(--dim);
}
.score__top b { font-family: var(--mono); font-size: var(--lg); font-weight: 500; color: var(--accent); }
.score__track { height: 3px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.score__track i {
  display: block; height: 100%; background: var(--accent);
  animation: fill .7s var(--ease) both;
}
@keyframes fill { from { width: 0 !important; } }

.score-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px; margin: 20px 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-soft);
  font-size: var(--sm); color: var(--dim);
}
.score-group li b { color: var(--text); font-weight: 600; font-family: var(--mono); }


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

.kb-search { display: flex; gap: 10px; margin-bottom: 22px; }
.kb-search input { flex: 1; padding: 10px 13px; font-size: 14px; background: var(--panel); }

.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }

.kb-card {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: border-color .16s, box-shadow .16s;
}
.kb-card:hover { border-color: rgb(var(--accent-rgb) / .35); box-shadow: 0 4px 12px rgb(var(--slate-rgb) / .1); }
.kb-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.kb-card__page { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.kb-card__score { font-family: var(--mono); font-size: 10.5px; color: var(--dimmer); }
.kb-card h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 8px; }
.kb-card p { font-size: var(--sm); color: var(--dim); line-height: 1.6; }
.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); border-radius: 20px;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer);
}


/* ═══════════════════════ INBOUND ═══════════════════════ */

/* The inbound tab runs the same two-column desk as outbound: a book of who
   might be ringing, and the stage they ring into. */
.stage--inbound { padding-top: 34px; }
.controls--inbound { border-bottom: none; padding-top: 8px; }

.book__note {
  padding: 0 var(--gut) 14px;
  font-size: 11.5px; color: var(--dim); line-height: 1.55;
  border-bottom: 1px solid var(--line);
}

/* The rehearsal panel. Visibly the operator's script and not part of the case
   surface — dashed, unfilled, and quieter than anything the agent produces. */
.crib-empty, .crib {
  margin-bottom: 26px; padding: 20px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--band);
}
.crib-empty { font-size: var(--sm); color: var(--dim); line-height: 1.6; }
.crib-empty__alt { margin-top: 8px; font-size: 11.5px; color: var(--dimmer); }

.crib__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.crib__name { margin-top: 5px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.crib__meta { margin-top: 3px; font-size: var(--sm); color: var(--dim); }
.crib__ref { text-align: right; flex: none; }
.crib__ref b {
  display: block; margin-top: 5px;
  font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--accent);
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.crib__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.crib__tags:empty { display: none; }
.crib__firm { color: var(--text); font-weight: 600; }

/* Which of the two SOPs this file is built to exercise. The badge carries the
   track; the line beside it says which branch, and what to do to reach it. */
.wf {
  flex: none;
  padding: 3px 9px; border-radius: 20px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.wf--b2c   { background: rgb(var(--accent-rgb) / .1); color: var(--accent); }
.wf--legal { background: rgb(var(--bad-rgb) / .1); color: var(--bad); }

.acct__phase { margin-top: 7px; font-size: 11.5px; color: var(--dimmer); }

/* One card per protocol, opened one at a time. */
.wf-group { border-bottom: 1px solid var(--line); }
.wf-group__head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px var(--gut);
  border: none; background: none; cursor: pointer; text-align: left;
  transition: background .16s;
}
.wf-group__head:hover { background: rgb(var(--accent-rgb) / .04); }
.wf-group__name { flex: 1; font-size: var(--sm); font-weight: 500; color: var(--text); }
.wf-group__count {
  font-family: var(--mono); font-size: 11px; color: var(--dimmer);
  font-variant-numeric: tabular-nums;
}
.wf-group__chev {
  flex: none; width: 7px; height: 7px;
  border-right: 1.5px solid var(--dimmer); border-bottom: 1.5px solid var(--dimmer);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--ease);
}
.wf-group.is-open .wf-group__chev { transform: rotate(-135deg) translate(-2px, -2px); }

.wf-group__body { display: none; border-top: 1px solid var(--line); }
.wf-group.is-open .wf-group__body { display: block; }
.wf-group__blurb {
  padding: 12px var(--gut);
  font-size: 11.5px; color: var(--dim); line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.wf-group__empty { padding: 16px var(--gut); font-size: 11.5px; color: var(--dimmer); }

.crib__wf {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 16px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.crib__wf-body { display: grid; gap: 3px; min-width: 0; }
.crib__wf-body b { font-size: var(--sm); font-weight: 600; color: var(--text); }
.crib__wf-body span { font-size: 11.5px; color: var(--dim); line-height: 1.55; }

.crib__checks { margin-top: 20px; }
.crib__checks-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 10px;
}

.checks {
  list-style: none; display: grid; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.check {
  width: 100%; display: grid;
  grid-template-columns: 16px 148px minmax(0, 1fr);
  align-items: center; gap: 14px;
  padding: 12px 16px;
  border: none; border-bottom: 1px solid var(--line-soft);
  background: var(--panel);
  text-align: left; cursor: pointer;
  transition: background .16s;
}
.check:last-child { border-bottom: none; }
.check:hover { background: rgb(var(--accent-rgb) / .04); }
.check__mark {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line);
  transition: background .22s, border-color .22s;
}
.check__label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dimmer);
}
.check__value { font-size: var(--sm); color: var(--dim); }
.check.is-given { background: rgb(var(--ok-rgb) / .05); }
.check.is-given .check__mark { background: var(--ok); border-color: var(--ok); }
.check.is-given .check__label { color: var(--ok); }
.check.is-given .check__value { color: var(--text); }

.crib__note { margin-top: 12px; font-size: 11.5px; color: var(--dimmer); line-height: 1.55; }
.crib__parties {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--dimmer); line-height: 1.55;
}
.crib__parties b { color: var(--dim); font-weight: 600; }

/* ══ THE DISCLOSURE GATE ═════════════════════════════════════════════════════
   The one dark surface in the console, and the reason the theme keeps a dark
   surface at all. Nothing about a debtor's account may be said aloud until the
   caller has proved who they are, so the gate is drawn as the boundary it is:
   it stays visibly shut, and each step lights only when it has actually been
   cleared. Re-pointing the tokens inside this block flips the whole component
   to the dark ground without rewriting a single rule below, and swaps the
   status triad for the lighter weights that ground needs. */
.intake {
  margin: 22px 0 24px;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 6px 18px rgb(var(--slate-rgb) / .12);

  --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;
  --ok: rgb(var(--ok-rgb));
  --warn: rgb(var(--warn-rgb));
  --bad: rgb(var(--bad-rgb));

  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 18px 20px 20px;
}
.intake .eyebrow, .intake .panel__title { color: var(--accent); }

.intake__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.intake__steps {
  list-style: none; display: grid; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.intake__step {
  display: grid; grid-template-columns: 18px 132px minmax(0, 1fr);
  align-items: center; gap: 14px;
  padding: 13px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--sm); color: var(--dimmer);
  transition: color .3s, background .3s;
}
.intake__step:last-child { border-bottom: none; }
/* Purely decorative. Clipped so that text written here by mistake cannot
   escape the dot and overlap the panel — the description belongs in
   .intake__what, which is what the script targets. */
.intake__mark {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line);
  overflow: hidden; font-size: 0;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.intake__step b { font-weight: 600; color: var(--dim); letter-spacing: .01em; }
.intake__step.is-done { background: rgb(var(--ok-rgb) / .07); }
.intake__step.is-done b { color: var(--ok); }
.intake__step.is-done .intake__mark {
  background: var(--ok); border-color: var(--ok);
  box-shadow: 0 0 0 3px rgb(var(--ok-rgb) / .16);
}
.intake__note {
  margin-top: 14px;
  font-size: var(--sm); color: var(--dim); line-height: 1.55;
}
.intake .chip { border-color: var(--line); color: var(--dim); }
.intake .chip--gold { border-color: rgb(var(--accent-rgb) / .5); color: var(--accent); background: rgb(var(--accent-rgb) / .1); }
.intake .btn { border-color: var(--line); color: var(--text); }
.intake .btn:hover:not(:disabled) { border-color: rgb(var(--accent-rgb) / .5); background: rgb(var(--accent-rgb) / .1); }

.chip--legal { border-color: rgb(var(--bad-rgb) / .5); color: var(--bad); background: rgb(var(--bad-rgb) / .08); }

/* The case file — the screen-pop. */
.casefile { margin-top: 28px; }
.casefile__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px;
}
.casefile__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
}
.cf-block {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.cf-block .eyebrow { margin-bottom: 12px; display: block; }

.cf-rows > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--sm);
}
.cf-rows > div:last-child { border-bottom: none; }
.cf-rows dt { color: var(--dimmer); flex: none; }
.cf-rows dd { color: var(--text); text-align: right; font-family: var(--mono); font-size: 12.5px; }
.cf-rows dd.is-lapsed { color: var(--bad); }
.cf-rows dd.cf-total { color: var(--accent); font-weight: 600; }
.cf-state {
  margin-bottom: 12px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.cf-state--ok   { color: var(--ok); }
.cf-state--warn { color: var(--warn); }
.cf-state--stop { color: var(--bad); }
.cf-note--stop { color: var(--bad); }
.cf-note--stop b { color: var(--bad); }
.cf-action { margin-top: 12px; }
.cf-sub { margin: 16px 0 9px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.cf-iban { font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em; }

.cf-list { list-style: none; }
.cf-list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--sm); color: var(--dim);
}
.cf-list li:last-child { border-bottom: none; }
.cf-list--docs li { grid-template-columns: minmax(0, 1fr) auto; }
.cf-list__mid { color: var(--dimmer); font-size: 11.5px; line-height: 1.5; }
.cf-list .mono { font-size: 11.5px; color: var(--dimmer); }
.cf-receipt {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ok);
}
.cf-receipt--no { color: var(--dimmer); }
.cf-note {
  margin-top: 12px; font-size: 11.5px;
  color: var(--dimmer); line-height: 1.55;
}
.cf-note b { color: var(--dim); font-weight: 600; }

/* The letter itself, as it went out. */
.notice {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.notice__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 13px 20px; border-bottom: 1px solid var(--line-soft);
}
.notice__actions { display: flex; align-items: center; gap: 12px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.seg__btn {
  padding: 7px 14px; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--dim);
  transition: background .16s, color .16s;
}
.seg__btn + .seg__btn { border-left: 1px solid var(--line); }
.seg__btn:hover { color: var(--accent); background: rgb(var(--accent-rgb) / .05); }
.seg__btn.is-active { background: var(--accent); color: #FFFFFF; }
.notice__body {
  max-height: 560px; overflow: auto;
  padding: 26px 30px;
  background: var(--band);
}
.notice__loading {
  font-family: var(--mono); font-size: 11.5px; color: var(--dimmer);
}

/* Dispatching the letter is the act everything downstream is timed from, so it
   sits on the letter rather than in a menu somewhere. */
.notice__send {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid var(--line-soft);
  background: var(--panel-2);
}
.notice__send-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dimmer); margin-right: 4px;
}
.notice__sent {
  flex: 1 1 100%; font-size: 11.5px; color: var(--ok); line-height: 1.55;
}

/* ── The letter as paper ──
   Laid out as the printed page is, because the operator has to find the line
   the caller just read out. It is a document, not a console surface: white
   stock, its own hairlines, and none of the console's chrome. */
.letter {
  background: #FFFFFF; color: #1A1A1A;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 46px 52px; margin: -26px -30px;
  font-family: var(--sans); font-size: 13px; line-height: 1.7;
}
.letter p { margin: 0 0 13px; }
.letter__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; margin-bottom: 34px;
}
.letter__mark { display: flex; flex-direction: column; gap: 2px; max-width: 46%; }
.letter__mark b { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.letter__mark span { font-size: 11px; color: #5A6270; }
.letter__to { text-align: right; font-size: 12.5px; }
.letter__to p { margin: 0; }
.letter__code {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  margin-bottom: 12px !important; color: #1A1A1A;
}
.letter__date { margin-bottom: 22px; }
.letter__refs {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin: 0 0 18px; font-size: 12.5px;
}
.letter__ref { display: contents; }
.letter__ref dt { color: #5A6270; }
.letter__ref dd { margin: 0; font-weight: 600; font-family: var(--mono); }
.letter__subject {
  list-style: none; margin: 0 0 22px; padding: 0; font-size: 12.5px;
}
.letter__subject li { position: relative; padding-left: 16px; }
.letter__subject li::before { content: "-"; position: absolute; left: 0; }
.letter__salutation { margin-bottom: 16px !important; }
.letter__demand {
  border: 1px solid #D8DFE8; border-radius: var(--r-sm);
  background: #F7F9FC;
  padding: 18px 20px; margin: 20px 0 22px;
}
.letter__demand h4 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.letter__refs--pay { margin: 12px 0 0; }
.letter__signoff { margin-top: 22px !important; }
.letter__sign {
  display: flex; flex-direction: column; gap: 3px;
  margin: 34px 0 0; padding-top: 8px;
  border-top: 1px solid #D8DFE8; width: fit-content; min-width: 240px;
}
.letter__sign b { font-size: 13px; font-weight: 600; }
.letter__sign span { font-size: 10.5px; color: #5A6270; }
.letter__foot {
  margin-top: 40px; padding-top: 14px; border-top: 1px solid #E6EBF1;
  font-size: 9.5px; line-height: 1.6; color: #5A6270;
}
.letter__foot p { margin: 0 0 7px; }

/* Print the letter, not the console around it. */
@media print {
  body.is-printing-letter > *:not(.view),
  body.is-printing-letter .view:not(.is-active) { display: none !important; }
  body.is-printing-letter .notice:not(.is-printing),
  body.is-printing-letter .book,
  body.is-printing-letter .controls,
  body.is-printing-letter .room,
  body.is-printing-letter .live,
  body.is-printing-letter .casefile,
  body.is-printing-letter .acct-head,
  body.is-printing-letter .notice__bar,
  body.is-printing-letter .notice__send,
  body.is-printing-letter .topbar { display: none !important; }
  body.is-printing-letter .notice.is-printing {
    border: none; box-shadow: none; margin: 0; position: absolute; inset: 0;
  }
  body.is-printing-letter .notice__body {
    max-height: none; overflow: visible; padding: 0; background: #fff;
  }
  .letter { margin: 0; padding: 0; border: none; background: #fff; }
  .letter__demand { background: none; }
}


/* ═══════════════════ FOLLOW-UP CALLS ═══════════════════ */

.followups { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0 var(--gut); }
.followups__head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 0; background: none; border: none; cursor: pointer;
  color: var(--text); font-family: var(--sans); text-align: left;
}
.followups__title {
  flex: 1; font-size: var(--micro); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dimmer);
}
.followups__count {
  min-width: 24px; padding: 2px 8px; text-align: center;
  font-family: var(--mono); font-size: 11px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--dimmer);
}
.followups__count.is-due {
  border-color: rgb(var(--accent-rgb) / .5); background: rgb(var(--accent-rgb) / .08); color: var(--accent);
}
.followups__chev {
  width: 7px; height: 7px; border-right: 1.5px solid var(--dimmer);
  border-bottom: 1.5px solid var(--dimmer); transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.followups__head[aria-expanded="true"] .followups__chev { transform: rotate(-135deg); }
.followups__body { padding-bottom: 16px; }
.followups__blurb, .followups__empty, .followups__note {
  font-size: 11.5px; line-height: 1.6; color: var(--dimmer);
  margin: 0 0 14px;
}
.followups__note { margin: 12px 0 0; }
.followups__settings {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
  align-items: center; margin-bottom: 16px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
}
.followups__settings label {
  display: contents; font-size: 11.5px; color: var(--dim);
}
.followups__settings label span { align-self: center; }
.followups__settings input {
  width: 62px; padding: 5px 8px; text-align: right;
  background: var(--band); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); font-family: var(--mono); font-size: 11.5px;
}
.followups__settings input:focus { outline: none; border-color: var(--accent); }
.followups__settings .btn { grid-column: 1 / -1; }
.followups__saved {
  grid-column: 1 / -1; font-size: 11.5px; color: var(--ok);
}
.followups__list { display: flex; flex-direction: column; gap: 10px; }
.fu {
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow);
}
.fu__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.fu__name { font-size: 13px; font-weight: 600; }
.fu__ref { font-family: var(--mono); font-size: 11px; color: var(--dimmer); }
.fu__why { margin: 6px 0 2px; font-size: 11.5px; color: var(--accent); line-height: 1.55; }
.fu__meta { margin: 0 0 10px; font-size: 11.5px; color: var(--dimmer); }
.fu__actions { display: flex; gap: 8px; }


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

.policy { margin-bottom: 44px; }
.policy__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; margin-top: 16px;
}
.policy__cell {
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); box-shadow: var(--shadow);
}
.policy__cell dt { font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--dimmer); }
.policy__cell dd {
  margin-top: 6px;
  font-family: var(--mono); font-size: 25px; font-weight: 500;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.policy__cell p { margin-top: 4px; font-size: 11px; color: var(--dimmer); }
/* The wrap-up codes are a reference table, not headline figures — the code is
   the label here, so it should not shout at the size of a discount band. */
.policy__grid--tight { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.policy__grid--tight .policy__cell { padding: 13px 16px; }
.policy__grid--tight .policy__cell dd { font-size: var(--sm); font-weight: 400; color: var(--dim); font-family: var(--sans); }
.policy__grid--tight .policy__cell dt { font-family: var(--mono); color: var(--accent); letter-spacing: .1em; }

.rules { margin-bottom: 40px; }
.rules__list { margin-top: 16px; padding-left: 0; list-style: none; counter-reset: r; }
.rules__list li {
  position: relative;
  padding: 12px 0 12px 44px;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--sm); color: var(--dim); line-height: 1.62;
  counter-increment: r;
}
.rules__list li:last-child { border-bottom: none; }
.rules__list li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: 13px;
  font-family: var(--mono); font-size: 11px;
  color: var(--dimmer); letter-spacing: .06em;
}
.rules__list li b { color: var(--text); font-weight: 600; }
.rules__list--tight li { padding-top: 10px; padding-bottom: 10px; }
.rules + .panel__note, .rules__list + .panel__note { margin-top: 14px; }


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

::-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; }


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

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

@media (max-width: 940px) {
  .desk { grid-template-columns: minmax(0, 1fr); }
  .book { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .acct-list { max-height: 320px; }
  .acct-head { grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
  .acct-head__bal { text-align: left; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px var(--gut); gap: 12px; }

  /* The rail lies down: a scrolling strip under the bar, the active mark
     moving from the left edge to the bottom edge so it still reads as the
     current section. */
  .shell { flex-direction: column; }
  .rail {
    position: static; width: 100%; height: auto;
    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); }
  .shell__main { width: 100%; }
}

@media (max-width: 640px) {
  .ladder { --rail: 92px; }
  .rung__amt { padding-right: 12px; font-size: 11.5px; }
  .transcript.has-lines::before { display: none; }
  .line { grid-template-columns: minmax(0, 1fr); }
  .line--customer .line__body { grid-column: 1; text-align: left; padding-right: 0; }
  .line--agent .line__body { grid-column: 1; padding-left: 14px; border-left: 2px solid rgb(var(--accent-rgb) / .5); }
  .controls { flex-direction: column; align-items: stretch; }
  .controls__right { flex-wrap: wrap; }
  .wrap__body > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .login-card { padding: 26px 22px 24px; }
  .letter { padding: 28px 24px; margin: -26px -30px; }
  .intake__step { grid-template-columns: 18px minmax(0, 1fr); }
  .intake__step .intake__what { grid-column: 2; }
}

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