/* ════════════════════════════════════════════════════════════════════════
   FORTCALL — digital banking contact desk.

   The palette is green, white and black, taken off the client's own site.
   Green is RATIONED. It is allowed in exactly three places:

     1. a live call (the status pip, the level meter)
     2. a cleared verification stage on the rail
     3. the primary action button

   Everywhere else is ink, bone and hairline. That is what makes a live call
   the only colour in the room, and it is what makes the rail — which is the
   whole argument of this product — impossible to miss.

   Red appears exactly once: the credential tripwire. If red is on screen,
   something has gone wrong that a client needs to see from across a table.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Greens, off the client's stylesheets */
  --signal:      #1DD167;
  --signal-alt:  #00D084;
  --signal-dim:  #148F47;
  --wash:        #CEE9D8;

  /* Ink — mixed toward the brand hue, never neutral black */
  --ink-950: #050A07;
  --ink-900: #0A1310;
  --ink-850: #0D1814;
  --ink-800: #111D18;
  --ink-750: #16241E;
  --ink-700: #1A2B23;
  --ink-600: #263B31;

  /* Paper and type */
  --paper: #FFFFFF;
  --bone:  #EAF3ED;
  --mist:  #9FB3A8;
  --slate: #6B7F74;

  --amber: #E0A32E;
  --alarm: #D6403A;

  --hair:       rgba(234, 243, 237, 0.09);
  --hair-solid: #1E2E27;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --topbar-h: 56px;
}

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

/* Non-negotiable: [hidden] must actually hide, whatever display a rule sets. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink-950);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body {
  /* A single wash of the brand green behind everything, at a level you read
     as depth rather than as colour. */
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(29, 209, 103, 0.07), transparent 62%),
    radial-gradient(900px 520px at 92% 108%, rgba(0, 208, 132, 0.05), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }

/* Visible keyboard focus, everywhere, no exceptions. */
:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: rgba(29, 209, 103, 0.28); }

.muted { color: var(--slate); font-size: 13px; }

/* ── Scrollbars ─────────────────────────────────────────────────────── */
.scroll, .transcript, .toolfeed { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }
.scroll::-webkit-scrollbar, .transcript::-webkit-scrollbar { width: 9px; }
.scroll::-webkit-scrollbar-thumb, .transcript::-webkit-scrollbar-thumb {
  background: var(--ink-600); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
.scroll::-webkit-scrollbar-track { background: transparent; }

/* ════════════════ WORDMARK ════════════════ */

.wordmark {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.16em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark__fort { color: var(--paper); }
.wordmark__call { color: var(--signal); }
.wordmark--lg { font-size: 30px; letter-spacing: 0.2em; }

/* ════════════════ SIGN IN ════════════════ */

.gate-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.gate-card {
  width: min(380px, 100%);
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 38px 32px 32px;
  display: grid;
  gap: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.gate-card__sub {
  color: var(--slate);
  font-size: 13px;
  margin: -6px 0 12px;
  letter-spacing: 0.04em;
}
.gate-card__error {
  color: var(--alarm);
  font-size: 13px;
  text-align: center;
  margin-top: 2px;
}

.field { display: grid; gap: 6px; }
.field__label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.field input {
  background: var(--ink-950);
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  color: var(--bone);
  width: 100%;
  transition: border-color 0.15s ease;
}
.field input:focus { border-color: var(--signal-dim); }

/* ════════════════ BUTTONS ════════════════ */

.btn {
  border: 1px solid var(--hair-solid);
  background: var(--ink-800);
  color: var(--bone);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--ink-700); border-color: var(--ink-600); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  background: var(--signal);
  border-color: var(--signal);
  color: #04120A;
  font-weight: 600;
}
.btn--primary:hover:not(:disabled) { background: #2CE075; border-color: #2CE075; }

.btn--danger { background: var(--alarm); border-color: var(--alarm); color: #fff; font-weight: 600; }
.btn--danger:hover:not(:disabled) { background: #E4534D; border-color: #E4534D; }

.btn--ghost { background: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--ink-800); }

.btn--block { width: 100%; }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn--xs { padding: 4px 10px; font-size: 12px; }

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

.shell { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 1px solid var(--hair);
  background: rgba(5, 10, 7, 0.85);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar__brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.topbar__desk {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.op { font-size: 13px; color: var(--mist); }

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--slate);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.tab:hover { color: var(--bone); }
.tab.is-active { color: var(--paper); border-bottom-color: var(--signal); }

/* ════════════════ VIEWS ════════════════ */

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

.layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 330px;
  gap: 14px;
  padding: 14px;
  height: calc(100dvh - var(--topbar-h));
  align-items: stretch;
}
.wide { padding: 14px; height: calc(100dvh - var(--topbar-h)); }

.panel {
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel--call { padding: 0; }

.panel__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hair);
}
.panel__title {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mist);
  font-weight: 600;
}
.panel__meta { margin-left: auto; font-size: 12px; color: var(--slate); }
.panel__head .btn { margin-left: auto; }

.scroll { overflow-y: auto; flex: 1; min-height: 0; padding: 12px; }
.scroll--tall { padding: 16px; }

.sub {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
}
.scroll > .sub:first-child { margin-top: 0; }

/* ════════════════ THE BOOK ════════════════ */

.bookstats {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
}
.chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid var(--hair-solid);
  color: var(--mist);
  background: var(--ink-950);
  white-space: nowrap;
}
.chip--warn { color: var(--amber); border-color: rgba(224, 163, 46, 0.3); }
.chip--stop { color: var(--alarm); border-color: rgba(214, 64, 58, 0.3); }

.card {
  width: 100%;
  text-align: left;
  background: var(--ink-850);
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-md);
  padding: 11px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  display: grid;
  gap: 3px;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.card:hover { background: var(--ink-800); border-color: var(--ink-600); }
.card.is-selected { border-color: var(--signal-dim); background: var(--ink-800); }
.card__name { font-weight: 600; font-size: 14px; color: var(--paper); }
.card__org { font-size: 12px; color: var(--mist); }
.card__foot { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.tag {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--hair-solid);
  color: var(--slate);
}
.tag--stop { color: var(--alarm); border-color: rgba(214, 64, 58, 0.35); }
.tag--warn { color: var(--amber); border-color: rgba(224, 163, 46, 0.35); }

/* ════════════════ CALL HEAD ════════════════ */

.callhead {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--hair);
}
.callhead__who { min-width: 0; }
.callhead__name { font-size: 19px; color: var(--paper); }
.callhead__meta { font-size: 13px; color: var(--slate); margin-top: 2px; }

.statuspill {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid var(--hair-solid);
  font-size: 12px;
  color: var(--mist);
  background: var(--ink-950);
}
.statuspill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--slate);
  flex: none;
}
.statuspill[data-state="live"] { color: var(--signal); border-color: rgba(29, 209, 103, 0.35); }
.statuspill[data-state="live"] .statuspill__dot {
  background: var(--signal);
  animation: pulse 1.7s ease-in-out infinite;
}
.statuspill[data-state="connecting"] { color: var(--amber); border-color: rgba(224, 163, 46, 0.3); }
.statuspill[data-state="connecting"] .statuspill__dot { background: var(--amber); }
.statuspill[data-state="error"] { color: var(--alarm); border-color: rgba(214, 64, 58, 0.35); }
.statuspill[data-state="error"] .statuspill__dot { background: var(--alarm); }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(29, 209, 103, 0.5); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(29, 209, 103, 0); }
}

.simrow { flex: none; padding: 12px 18px 0; }

/* ════════════════ WARNINGS ════════════════ */

.warnstack { flex: none; display: grid; gap: 6px; padding: 0 18px; }
.warnstack:not(:empty) { padding-top: 12px; }
.warn {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.45;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(224, 163, 46, 0.28);
  background: rgba(224, 163, 46, 0.07);
  color: #F0D9A6;
}
.warn--stop {
  border-color: rgba(214, 64, 58, 0.35);
  background: rgba(214, 64, 58, 0.08);
  color: #F5C4C1;
}
.warn__mark { flex: none; font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════
   THE CRIB SHEET.

   The operator plays the caller in a demo, so when the agent asks for the last
   four digits of the CNIC they need to know what to say. These are the answers
   to the rail's questions, sitting directly above it.

   It is styled to read as OUT OF BAND — dashed border, no fill, no colour. It
   is not part of the call and it must never be mistaken for something the agent
   can see. The answers are not in the system instruction; that is verified in
   the test suite, and the label says so.
   ════════════════════════════════════════════════════════════════════════ */

.crib {
  flex: none;
  margin: 12px 18px 0;
  padding: 11px 14px 12px;
  border: 1px dashed var(--ink-600);
  border-radius: var(--r-md);
  background: transparent;
}

.crib__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.crib__title {
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
}
.crib__aside {
  font-size: 11px;
  color: var(--ink-600);
  letter-spacing: 0.02em;
}
/* The one place this needs to be unmissable: it must not be read as a leak. */
.crib__aside strong { color: var(--slate); font-weight: 500; }

.crib__rows { display: grid; gap: 7px; }
.cribrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.cribrow__k {
  flex: none;
  min-width: 132px;
  color: var(--slate);
  font-size: 11.5px;
}
.cribrow__v {
  font-family: var(--mono);
  color: var(--bone);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}
.crib__none {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--amber);
}

@media (max-width: 560px) {
  .crib { margin-left: 12px; margin-right: 12px; }
  .cribrow { flex-direction: column; gap: 1px; }
  .cribrow__k { min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   THE RAIL — the signature element.

   Four stages. Each clears to the brand green as its factor passes, and the
   terminal stage — Disclosure — only lights when all three are in. The brand's
   own colour is literally the thing you cannot have until you qualify.

   If the credential firewall trips, the whole rail turns red and every stage
   locks, including ones that had already cleared. That is deliberate: the
   verification is no longer the point once the desk has asked for a PIN.
   ════════════════════════════════════════════════════════════════════════ */

.rail {
  flex: none;
  margin: 12px 18px;
  padding: 13px 15px 14px;
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-md);
  background: var(--ink-950);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.rail__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.rail__title {
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
}
.rail__verdict {
  margin-left: auto;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--slate);
  letter-spacing: 0.04em;
}

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

.stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding-top: 2px;
}
/* The connecting line runs behind the pips, and only the cleared part of it
   carries colour — so the rail reads as progress, not as decoration. */
.stage::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--ink-700);
  transition: background 0.3s ease;
}
.stage:first-child::before { display: none; }

.stage__pip {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-850);
  border: 2px solid var(--ink-600);
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.stage__label {
  font-size: 11px;
  color: var(--slate);
  text-align: center;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}

.stage.is-passed .stage__pip {
  background: var(--signal);
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(29, 209, 103, 0.16);
}
.stage.is-passed .stage__label { color: var(--wash); }
.stage.is-passed::before { background: var(--signal-dim); }

.stage.is-failed .stage__pip { background: var(--ink-850); border-color: var(--amber); }
.stage.is-failed .stage__label { color: var(--amber); }

.stage--terminal.is-passed .stage__pip {
  box-shadow: 0 0 0 4px rgba(29, 209, 103, 0.22), 0 0 18px rgba(29, 209, 103, 0.4);
}

.rail__note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--slate);
  line-height: 1.45;
}

/* Verified — the rail is the only green thing on the panel. */
.rail[data-state="verified"] {
  border-color: rgba(29, 209, 103, 0.4);
  background: linear-gradient(180deg, rgba(29, 209, 103, 0.06), var(--ink-950));
}
.rail[data-state="verified"] .rail__verdict { color: var(--signal); }

/* Tripped — everything locks and goes red, cleared stages included. */
.rail[data-state="tripped"] {
  border-color: rgba(214, 64, 58, 0.55);
  background: linear-gradient(180deg, rgba(214, 64, 58, 0.09), var(--ink-950));
}
.rail[data-state="tripped"] .rail__verdict { color: var(--alarm); }
.rail[data-state="tripped"] .stage__pip {
  background: var(--ink-850) !important;
  border-color: var(--alarm) !important;
  box-shadow: none !important;
}
.rail[data-state="tripped"] .stage__label { color: var(--alarm) !important; }
.rail[data-state="tripped"] .stage::before { background: rgba(214, 64, 58, 0.4) !important; }
.rail[data-state="tripped"] .rail__note { display: none; }

.tripwire {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(214, 64, 58, 0.45);
  background: rgba(214, 64, 58, 0.1);
  display: grid;
  gap: 4px;
}
.tripwire strong {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--alarm);
}
.tripwire span { font-size: 12.5px; color: #F5C4C1; line-height: 1.45; }

/* ════════════════ TRANSCRIPT ════════════════ */

.transcript {
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  padding: 6px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.line { display: grid; gap: 3px; max-width: 82%; }
.line--agent { align-self: flex-start; }
.line--caller { align-self: flex-end; text-align: right; }
.line--system { align-self: center; max-width: 100%; text-align: center; }

.line__who {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.line__text {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 9px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--hair-solid);
  background: var(--ink-850);
  color: var(--bone);
  overflow-wrap: anywhere;
}
.line--caller .line__text { background: var(--ink-800); }
.line--system .line__text {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--hair);
  border-radius: 0;
  color: var(--slate);
  font-size: 12px;
  padding: 8px 0 0;
}

/* ════════════════ COMPOSER + CONTROLS ════════════════ */

.composer {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 0 18px 12px;
}
.composer__input {
  flex: 1;
  min-width: 0;
  background: var(--ink-950);
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  color: var(--bone);
}
.composer__input::placeholder { color: var(--slate); }
.composer__input:focus { border-color: var(--signal-dim); }

.controls {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--hair);
  background: var(--ink-950);
}
.controls__opts { display: flex; gap: 10px; flex-wrap: wrap; }
.controls__act { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.sel { display: grid; gap: 5px; }
.sel--wide { width: 100%; }
.sel__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.sel select {
  background: var(--ink-850);
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  color: var(--bone);
  min-width: 150px;
  max-width: 100%;
}
.sel--wide select { width: 100%; }

.meter {
  width: 92px;
  height: 5px;
  border-radius: 99px;
  background: var(--ink-700);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--signal);
  transition: width 0.08s linear;
}

/* ════════════════ LIVE PANEL ════════════════ */

.livegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat {
  background: var(--ink-850);
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.stat__k {
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate);
}
.stat__v {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--paper);
  overflow-wrap: anywhere;
}
.stat--good .stat__v { color: var(--signal); }
.stat--warn .stat__v { color: var(--amber); }
.stat--bad  .stat__v { color: var(--alarm); }

.toolfeed { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.toolrow {
  border: 1px solid var(--hair-solid);
  border-left: 2px solid var(--ink-600);
  border-radius: var(--r-sm);
  background: var(--ink-850);
  padding: 7px 10px;
  display: grid;
  gap: 3px;
}
.toolrow--ok      { border-left-color: var(--signal-dim); }
.toolrow--blocked { border-left-color: var(--amber); }
.toolrow--trip    { border-left-color: var(--alarm); background: rgba(214, 64, 58, 0.08); }
.toolrow--fail    { border-left-color: var(--alarm); }
.toolrow__name { font-family: var(--mono); font-size: 12px; color: var(--bone); }
.toolrow__note { font-size: 11.5px; color: var(--slate); line-height: 1.4; overflow-wrap: anywhere; }
.toolrow--trip .toolrow__note { color: #F5C4C1; }

.wrapup { display: grid; gap: 7px; }
.wraprow { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.wraprow__k { color: var(--slate); flex: none; min-width: 96px; font-size: 11.5px; }
.wraprow__v { color: var(--bone); overflow-wrap: anywhere; }

.scorecard { display: grid; gap: 8px; }
.scorerow { display: grid; gap: 5px; }
.scorerow__top { display: flex; justify-content: space-between; font-size: 12px; }
.scorerow__label { color: var(--mist); text-transform: capitalize; }
.scorerow__val { font-family: var(--mono); color: var(--paper); }
.bar { height: 4px; border-radius: 99px; background: var(--ink-700); overflow: hidden; }
.bar__fill { display: block; height: 100%; background: var(--signal); }
.bar__fill--warn { background: var(--amber); }
.bar__fill--bad  { background: var(--alarm); }
.coach {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--mist);
  border-left: 2px solid var(--signal-dim);
  padding-left: 10px;
  margin-top: 4px;
}
.hardfail {
  font-size: 12.5px;
  line-height: 1.45;
  color: #F5C4C1;
  border: 1px solid rgba(214, 64, 58, 0.4);
  background: rgba(214, 64, 58, 0.09);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}

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

.kbsearch { flex: none; display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }

.kbitem {
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-md);
  background: var(--ink-850);
  padding: 13px 15px;
  margin-bottom: 9px;
  display: grid;
  gap: 5px;
}
.kbitem__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kbitem__title { font-weight: 600; color: var(--paper); font-size: 14.5px; }
.kbitem__score {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--signal);
}
.kbitem__page { font-family: var(--mono); font-size: 11px; color: var(--slate); }
.kbitem__text { font-size: 13.5px; line-height: 1.55; color: var(--mist); }
.kbitem__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

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

.pbtabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--hair);
  overflow-x: auto;
  scrollbar-width: none;
}
.pbtabs::-webkit-scrollbar { display: none; }
.pbtab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--slate);
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.pbtab:hover { color: var(--bone); }
.pbtab.is-active { color: var(--paper); border-bottom-color: var(--signal); }

.pbtext {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--mist);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

.gatecard {
  border: 1px solid var(--hair-solid);
  border-radius: var(--r-md);
  background: var(--ink-850);
  padding: 15px 17px;
  margin-bottom: 12px;
  display: grid;
  gap: 8px;
}
.gatecard--stop { border-color: rgba(214, 64, 58, 0.35); background: rgba(214, 64, 58, 0.06); }
.gatecard__title { font-weight: 600; color: var(--paper); font-size: 15px; }
.gatecard__quote {
  font-size: 14px;
  line-height: 1.55;
  color: var(--wash);
  border-left: 2px solid var(--signal);
  padding-left: 12px;
  font-style: italic;
}
.gatecard ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.gatecard li { font-size: 13px; color: var(--mist); line-height: 1.5; }
.gatecard li strong { color: var(--bone); font-style: normal; }

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

.kpigrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
}
.calllog { display: grid; gap: 8px; }
.callrow {
  border: 1px solid var(--hair-solid);
  border-left: 2px solid var(--ink-600);
  border-radius: var(--r-md);
  background: var(--ink-850);
  padding: 11px 14px;
  display: grid;
  gap: 4px;
}
.callrow--win  { border-left-color: var(--signal-dim); }
.callrow--warn { border-left-color: var(--amber); }
.callrow--bad  { border-left-color: var(--alarm); }
.callrow__top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.callrow__name { font-weight: 600; color: var(--paper); font-size: 14px; }
.callrow__out { margin-left: auto; font-size: 12px; color: var(--mist); }
.callrow__meta { font-size: 12px; color: var(--slate); font-family: var(--mono); }
.callrow__sum { font-size: 13px; color: var(--mist); line-height: 1.5; }

/* ════════════════ RESPONSIVE ════════════════ */

@media (max-width: 1240px) {
  .layout { grid-template-columns: 250px minmax(0, 1fr); }
  .panel--live { display: none; }
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: calc(100dvh - var(--topbar-h));
  }
  .wide { height: auto; }
  .panel--book { max-height: 300px; }
  .scroll--tall { max-height: none; }
  .transcript { min-height: 260px; }
  .rail__track { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .stage:nth-child(3)::before { display: none; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .tabs { order: 3; width: 100%; }
  .topbar__right { margin-left: auto; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  .layout, .wide { padding: 10px; gap: 10px; }
  .rail, .callhead, .transcript, .composer, .controls, .warnstack, .simrow {
    padding-left: 12px;
    padding-right: 12px;
  }
  .rail { margin-left: 12px; margin-right: 12px; }
  .controls__act { width: 100%; }
  .controls__act .btn { flex: 1; }
  .livegrid { grid-template-columns: 1fr; }
  .line { max-width: 94%; }
}

/* ════════════════ REDUCED MOTION ════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .statuspill[data-state="live"] .statuspill__dot { animation: none; opacity: 1; }
}