/* ═══════════════════════════════════════════════════════════════════════
   FORTCALL quality review — the desk's theme, applied to marking.

   console.css is loaded first and owns everything shared: the tokens, the red
   rail, panels, buttons, fields, the login card. Nothing is redefined here.
   This file adds only what review needs.

   The colour rules carry over unchanged, because they are the same product:

     • White is the field. Red is the house colour, rationed — a panel cap, a
       heading, the wordmark, the rail.
     • Green means met, amber means partly met, red means not met. Those three
       are the whole vocabulary of a scorecard, and they are the same three
       the desk uses for confirmed / outstanding / refused.
     • ONE thing on this page gets a solid red fill: a FATAL criterion that
       was not met. On the desk that treatment is reserved for a locked seal —
       the moment the gate says no. Here the equivalent moment is a fatal
       breach, and nothing else is allowed to shout that loudly, so the eye
       goes straight to it in a table of thirty-three rows.

   No client branding appears here either: not a mark, not a colour, not a
   typeface. What is being graded is the client's standard; what is doing the
   grading is FORTCALL.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════ layout ═══ */
.qagrid {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.importmeta {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.4rem;
  color: var(--type);
  background: var(--surface);
  box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
}
.importmeta::backdrop { background: rgb(10 18 24 / 58%); }
.importmeta h2 { margin: 0 0 .35rem; }
.importmeta .notice { margin: 0 0 1.1rem; }

/* One question, two answers, each answer a target big enough to hit without
   aiming. The radio itself is left visible — a card that only shows its
   selection by tint is a card people click twice to be sure. */
.pickset { border: 0; margin: 1.1rem 0 0; padding: 0; }
.pickset__q {
  padding: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 9px;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-high);
  cursor: pointer;
}
.pick:hover { border-color: var(--muted-dim); }
.pick:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick input { accent-color: var(--accent); margin: 0; }
.pick__t { font-size: 13.5px; font-weight: 600; }
.pick__d {
  grid-column: 2;
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
/* The list is a working index the reviewer keeps returning to, so it stays
   put while the detail beside it scrolls. */
.qapanel {
  position: sticky;
  top: 26px;
  max-height: calc(100dvh - 86px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.qadetail { display: grid; gap: 14px; min-width: 0; }

/* ═════════════════════════════════════════════════════ upload ═══ */
.drop {
  border: 1px dashed var(--line);
  border-radius: var(--r-s);
  background: var(--surface-high);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  display: grid;
  gap: 3px;
  transition: border-color 0.14s, background 0.14s;
}
.drop:hover { border-color: var(--accent); background: var(--accent-ghost); }
.drop.is-drag {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-ghost);
}
.drop b { font-family: var(--display); font-size: 13px; font-weight: 600; }
.drop i { font-style: normal; font-size: 11.5px; color: var(--muted); }

/* A recording takes minutes to score, so something has to be moving. */
.sweep {
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.sweep::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: var(--accent);
  animation: sweep 1.15s ease-in-out infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(360%); }
}

.report {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 7px 9px;
}
.report.has-skips { border-left-color: var(--hold); }
.report b { color: var(--type); }
.report ul { margin: 3px 0 0; padding-left: 1.1em; }

/* ══════════════════════════════════════════════ filter + search ═══ */
.qasearch {
  margin-top: 12px;
  width: 100%;
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--type);
}
.qasearch:focus { outline: none; border-color: var(--accent); }

.seg { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 10px; }
.seg button {
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  cursor: pointer;
  font: 500 11.5px/1.5 var(--font);
  color: var(--muted);
}
.seg button:hover { border-color: var(--muted-dim); }
.seg button[aria-pressed="true"] {
  background: var(--accent-ghost);
  border-color: var(--accent);
  color: var(--accent);
}
.seg button span { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════ the list ═══ */
.qalist { display: grid; gap: 6px; overflow-y: auto; min-height: 0; }
.qacall {
  width: 100%;
  text-align: left;
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--r-s);
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
  color: var(--type);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  transition: border-color 0.14s, background 0.14s;
}
.qacall:hover { border-color: var(--muted-dim); }
.qacall.is-sel { border-left-color: var(--accent); background: var(--surface); }
.qacall__n {
  font-weight: 600;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.qacall__m {
  grid-column: 1;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.qacall__s {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  font: 600 15px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.qacall__s small { font-size: 10px; font-weight: 400; color: var(--muted); }
.qacall__s.is-good { color: var(--signal); }
.qacall__s.is-mid  { color: var(--hold); }
.qacall__s.is-bad  { color: var(--refuse); }
.qacall__s.is-none { color: var(--muted-dim); }
.qacall__e { grid-column: 1 / -1; font-size: 11px; color: var(--refuse); }
.qaempty { color: var(--muted); font-size: 12.5px; padding: 14px 2px; }

/* status pills — the four states a recording can be in */
.pill {
  font: 600 9.5px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.pill--running { color: var(--hold); border-color: var(--hold); }
.pill--done    { color: var(--signal); border-color: var(--signal-dim); }
.pill--failed  { color: var(--refuse); border-color: var(--refuse); }

/* sentiment reads as a dot, not a word — it is a hint, not a finding */
.sdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted-dim);
  display: inline-block;
}
.sdot--positive { background: var(--signal); }
.sdot--negative { background: var(--refuse); }

/* ══════════════════════════════════════════════════════ cards ═══ */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r);
  padding: 14px 16px;
  min-width: 0;
}
.card__t {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.card__h {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.card__h h2 {
  font-size: 16px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.card__h .btnrow { margin: 0 0 0 auto; }

.blank {
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface-raised);
  padding: 46px 24px;
  text-align: center;
}
.blank h2 { font-size: 18px; color: var(--accent-deep); margin-bottom: 6px; }
.blank p { color: var(--muted); font-size: 13px; max-width: 46ch; margin: 0 auto; }

audio { width: 100%; margin-top: 2px; }

/* ══════════════════════════════════════════════════ the score ═══ */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.band__n {
  font: 600 40px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.band__n small { font-size: 17px; font-weight: 400; color: var(--muted); }
.band__p { font-size: 12.5px; color: var(--muted); margin: 5px 0 9px; }
.band--good .band__n { color: var(--signal); }
.band--mid  .band__n { color: var(--hold); }
.band--bad  .band__n { color: var(--refuse); }

.track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-high);
  border: 1px solid var(--line);
  overflow: hidden;
}
.track > span { display: block; height: 100%; background: var(--muted); }

.tiles { display: flex; gap: 8px; }
.tile {
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 8px 12px;
  min-width: 78px;
  text-align: center;
}
.tile b {
  display: block;
  font: 600 19px/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}
.tile i {
  font-style: normal;
  font: 600 9.5px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
}
.tile--met b   { color: var(--signal); }
.tile--unmet b { color: var(--refuse); }

/* ═════════════════════════════════════════════════════ summary ═══ */
.summary { font-size: 13.5px; line-height: 1.6; color: var(--type); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.chip {
  font: 500 11px/1.6 var(--font);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--muted);
  background: var(--surface-high);
}
.chip--topic { border-color: var(--accent-tint); color: var(--accent-deep); }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.meta b { color: var(--type); font-weight: 600; }

/* ═════════════════════════════════════════════════════ rubric ═══ */
.rubricwrap { max-height: 560px; overflow-y: auto; margin: 0 -16px -14px; }
.rubric { width: 100%; border-collapse: collapse; font-size: 13px; }
.rubric th {
  position: sticky;
  top: 0;
  background: var(--surface-high);
  border-bottom: 1px solid var(--line);
  text-align: left;
  font: 600 9.5px/2.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-dim);
  padding: 0 10px;
  z-index: 1;
}
.rubric td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 10px;
  vertical-align: top;
}
.rubric tr:last-child td { border-bottom: 0; }
.rubric .c-id {
  width: 34px;
  font: 500 11px/1.6 var(--mono);
  color: var(--muted-dim);
}
.rubric .c-st { width: 104px; }
.rubric .c-pt {
  width: 62px;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.rubric .c-pt small { font-weight: 400; color: var(--muted); }
.rubric__q { line-height: 1.5; }
.rubric__why {
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
}
.rubric__sec {
  font: 600 9.5px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
  margin-top: 4px;
}
.mark {
  font: 600 9.5px/1.6 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.mark--met   { color: var(--signal); border-color: var(--signal-dim); background: var(--signal-ghost); }
.mark--part  { color: var(--hold); border-color: var(--hold); background: var(--hold-ghost); }
.mark--unmet { color: var(--refuse); border-color: var(--refuse); background: var(--refuse-ghost); }
/* THE LOUDEST THING ON THIS PAGE, and the only solid red fill on it: a fatal
   criterion that was not met. Nothing else may be given this treatment. */
.mark--fatal {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.rubric tr.is-fatal-breach td { background: var(--accent-ghost); }

/* ═════════════════════════════════════════════════ transcript ═══ */
.txbar { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.txbar .seg { margin: 0; }
.txbar .btn { margin-left: auto; }

.tx {
  max-height: 520px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}
.txraw {
  max-height: 520px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.65;
  color: var(--type);
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 11px 13px;
}
.seg-t {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--surface-high);
  padding: 8px 11px;
}
/* Agent and caller are told apart by the rule on the left, not by a coloured
   bubble — the same way the desk's transcript does it. */
.seg-t--agent { border-left-color: var(--signal); }
.seg-t--customer { border-left-color: var(--muted-dim); background: var(--surface); }
.seg-t__w {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 9.5px/1.6 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dim);
  margin-bottom: 3px;
}
.seg-t--agent .seg-t__w { color: var(--signal); }
.seg-t__u { font-size: 13.5px; line-height: 1.55; }
.seg-t__e { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; }

/* ══════════════════════════════════════════════════ analytics ═══ */
.dashgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.stat {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--r);
  padding: 12px 14px;
}
.stat b {
  display: block;
  font: 600 26px/1.15 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat i {
  font-style: normal;
  font: 600 9.5px/1.8 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-dim);
}
.stat--good b { color: var(--signal); }
.stat--bad  b { color: var(--refuse); }

.bars { display: grid; gap: 6px; }
.bar {
  display: grid;
  grid-template-columns: minmax(120px, 210px) minmax(0, 1fr) 52px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.bar__l {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar__l b { color: var(--type); font-weight: 600; font-family: var(--mono); font-size: 11.5px; }
.bar__t {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-high);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar__f { display: block; height: 100%; background: var(--muted); }
.bar__v {
  text-align: right;
  font: 600 12px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.agents { width: 100%; border-collapse: collapse; font-size: 13px; }
.agents th {
  text-align: left;
  border-bottom: 1px solid var(--line);
  font: 600 9.5px/2.2 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-dim);
  padding: 0 8px;
}
.agents td { border-bottom: 1px solid var(--line-soft); padding: 8px; }
.agents tr:last-child td { border-bottom: 0; }
.agents .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.rank {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font: 600 10px/1 var(--mono);
  border: 1px solid var(--line);
  color: var(--muted);
}
.rank--top { border-color: var(--accent); color: var(--accent); background: var(--accent-ghost); }
.minibar {
  display: inline-block;
  vertical-align: middle;
  width: 66px; height: 5px;
  margin-left: 8px;
  border-radius: 3px;
  background: var(--surface-high);
  border: 1px solid var(--line);
  overflow: hidden;
}
.minibar span { display: block; height: 100%; }

.insights { display: grid; gap: 8px; }
.ins {
  border: 1px solid var(--line);
  border-left: 2px solid var(--muted-dim);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--surface-high);
  padding: 9px 12px;
}
.ins b { display: block; font-family: var(--display); font-size: 13px; }
.ins p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.ins em { font-style: normal; display: block; margin-top: 4px; font-size: 12px; color: var(--type); }
.ins--critical { border-left-color: var(--refuse); }
.ins--critical b { color: var(--refuse); }
.ins--warning  { border-left-color: var(--hold); }
.ins--warning b { color: var(--hold); }
.ins--positive { border-left-color: var(--signal); }
.ins--positive b { color: var(--signal); }

/* ═══════════════════════════════════════════════════ responsive ═══ */
@media (max-width: 1080px) {
  .qagrid { grid-template-columns: 1fr; }
  .qapanel { position: static; max-height: none; }
  .qalist { max-height: 380px; }
}
@media (max-width: 720px) {
  .band { grid-template-columns: 1fr; }
  .bar { grid-template-columns: minmax(96px, 140px) minmax(0, 1fr) 44px; }
  .rubricwrap { max-height: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Call discovery, evidence and configuration

   Added when the console stopped being a list of uploaded files and became a
   place calls are found, argued with and decided. Same rationing of colour as
   the desk: white is the field, the house red is spent only where something
   is being refused, and green and amber keep their two meanings.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── the search panel ─────────────────────────────────────────────── */
.search { margin-bottom: 14px; }
.search__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px 12px;
}
.field--sm .field__label { font-size: 10.5px; }
.field--sm input, .field--sm select {
  width: 100%;
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  color: var(--type);
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.field--sm input:focus, .field--sm select:focus {
  outline: none;
  border-color: var(--accent);
}
.field--wide { grid-column: span 2; }
.field__help { font-size: 11px; color: var(--muted-dim); line-height: 1.45; }
.field + .field { margin-top: 10px; }

.search__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.search__spacer { flex: 1 1 auto; }
/* The matching count is the answer to the question the panel asks, so it is
   set in the type colour rather than the muted one — and goes quiet, not
   loud, when the answer is none. */
.search__count {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--type);
}
.search__count.is-zero { color: var(--muted-dim); font-weight: 400; }

.uploader { margin-bottom: 14px; }
.panel__hrow { display: flex; align-items: baseline; gap: 10px; }
.panel__hrow .panel__t { flex: 1 1 auto; }
.pager { justify-content: space-between; margin-top: 10px; }
.filepick { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }
.seg--tabs { margin-bottom: 14px; }

/* ── a result row ─────────────────────────────────────────────────── */
.qacall__top {
  grid-column: 1 / 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.qacall__top .qacall__n { flex: 0 1 auto; }
.qacall__f {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* ── the decision ─────────────────────────────────────────────────── */
.decision {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  background: var(--surface-raised);
}
.decision__t { font-family: var(--display); font-size: 17px; font-weight: 600; }
.decision__r {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 3px;
  max-width: 62ch;
}
.decision__a {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.dec--accepted { border-left-color: var(--signal); }
.dec--accepted .decision__t { color: var(--signal); }
.dec--manual { border-left-color: var(--hold); }
.dec--manual .decision__t { color: var(--hold); }
.dec--na { border-left-color: var(--muted-dim); }
.dec--na .decision__t { color: var(--muted-dim); }
/* A rejection is a customer's request being turned down on the strength of a
   phone call. It gets the solid-red treatment the desk reserves for a locked
   seal, and nothing else on this page is allowed to shout that loudly. */
.dec--rejected {
  border-color: var(--accent-deep);
  border-left-color: var(--accent-deep);
  background: var(--accent-deep);
}
.dec--rejected .decision__t,
.dec--rejected .decision__r { color: var(--on-accent); }
.dec--rejected .decision__r { color: var(--on-accent-soft); }
/* Chips carry their own pale background, which on the one solid-red panel in
   the console left white text on a near-white pill — "Reviewed by admin" was
   invisible on a rejected call. A veil of the panel's own red instead: the
   pill still reads as a pill, and white on it is 6.6:1. This has to cover
   every chip in the banner, not just the reviewed one — a fatal chip painted
   accent-deep on an accent-deep panel loses its edges the same way. */
.dec--rejected .chip {
  border-color: var(--on-accent-dim);
  color: var(--on-accent);
  background: rgb(255 255 255 / 14%);
}
/* The buttons had it worse than the chips: a ghost button is transparent with
   near-black text, which on this panel was 2.1:1 — and the two buttons a
   reviewer needs most, signing off and overriding, live here. So the primary
   inverts to white with the panel's red as its label, and the ghosts take the
   same veil as the chips. */
.dec--rejected .btn {
  color: var(--on-accent);
  border-color: var(--on-accent-dim);
  background: rgb(255 255 255 / 14%);
}
.dec--rejected .btn:hover:not(:disabled) { border-color: var(--on-accent); }
.dec--rejected .btn--primary {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--accent-deep);
}
.dec--rejected .btn--primary:hover:not(:disabled) {
  background: var(--on-accent-soft);
  border-color: var(--on-accent-soft);
  color: var(--accent-deep);
}

/* the same word, small, in a result row */
.dec {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.dec.dec--accepted { color: var(--signal); border-color: var(--signal-dim); }
.dec.dec--manual { color: var(--hold); border-color: var(--hold); }
.dec.dec--na { color: var(--muted-dim); }
.dec.dec--rejected {
  color: var(--on-accent);
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* ── metadata ─────────────────────────────────────────────────────── */
.kvgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px;
  margin: 12px 0;
}
.kv dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.kv dd { margin: 1px 0 0; font-size: 13px; color: var(--type); }
.card__s {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  margin: -4px 0 12px;
  max-width: 74ch;
}

/* ── evidence ─────────────────────────────────────────────────────── */
/* A citation is a button because the point of it is that you can go and
   listen to the thing it cites. */
.cite {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  text-align: left;
  font: inherit;
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal-dim);
  border-radius: 6px;
  cursor: pointer;
}
.cite:hover { border-left-color: var(--signal); background: var(--signal-ghost); }
.cite__t {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--signal);
  flex: none;
}
.cite__s {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--muted-dim);
  flex: none;
}
.cite__x {
  font-size: 12px;
  line-height: 1.45;
  color: var(--type);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.polcite {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface-high);
  border-left: 2px solid var(--muted-dim);
}
.polcite b { display: block; font-size: 11px; color: var(--muted); }
.polcite span { font-size: 12px; line-height: 1.5; color: var(--type); }
.passage {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--surface-high);
  border-left: 2px solid var(--muted-dim);
}
.passage b { font-size: 11.5px; color: var(--muted); }
.passage p { font-size: 12.5px; line-height: 1.6; margin-top: 4px; white-space: pre-wrap; }

.ovr {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--hold);
}

/* ── marks ────────────────────────────────────────────────────────── */
.mark--na { color: var(--muted-dim); border-color: var(--line); }
.mark--unclear { color: var(--hold); border-color: var(--hold); background: var(--hold-ghost); }
.rubric .c-ov { width: 92px; text-align: right; }
.rubric tr.is-na td { opacity: 0.55; }
.rubric tr.is-overridden td { background: var(--hold-ghost); }
.rubric .c-id { white-space: normal; }
.tag {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--muted-dim);
}
.tag--mand { color: var(--accent-deep); border-color: var(--accent-tint); }

/* ── chips ────────────────────────────────────────────────────────── */
.chip--rev { border-color: var(--signal-dim); color: var(--signal); }
.chip--fatal {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--on-accent);
}
.chip--unclear { border-color: var(--hold); color: var(--hold); }
.chip--mask { border-color: var(--line); color: var(--muted-dim); }

/* ── transcript timestamps ────────────────────────────────────────── */
.seg-t__time {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 0 4px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.seg-t__time:hover { border-color: var(--signal); color: var(--signal); }
.seg-t--unknown { border-left-color: var(--hold); }

/* ── plain tables: source results, documents, KPI sets, categories ── */
.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 10px; }
.grid th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--muted-dim);
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--line);
}
.grid td {
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.grid tr:last-child td { border-bottom: 0; }
.grid tr.is-dim td { opacity: 0.5; }
.grid tr.is-active-row td { background: var(--signal-ghost); }
.grid .num { text-align: right; }
.grid input[type="checkbox"] { accent-color: var(--accent); }
.linkbtn--bad { color: var(--accent); }
.linkbtn--bad:hover { color: var(--accent-deep); }
td.c-ov { white-space: nowrap; text-align: right; }
td.c-ov .linkbtn { color: var(--muted); margin-left: 8px; }
td.c-ov .linkbtn:hover { color: var(--type); }

/* ── notices ─────────────────────────────────────────────────────── */
.notice {
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 7px;
  margin-bottom: 10px;
  border-left: 3px solid var(--signal);
  background: var(--signal-ghost);
  color: var(--type);
}
.notice--warn { border-left-color: var(--hold); background: var(--hold-ghost); }
.notice--bad { border-left-color: var(--refuse); background: var(--refuse-ghost); }
.bad { color: var(--refuse); }
.num { text-align: right; }
.rail__meta {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--on-accent-dim);
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .field--wide { grid-column: span 1; }
  .decision__a { margin-left: 0; }
}

/* ── a human changed this ─────────────────────────────────────────── */
.chip--edited { border-color: var(--hold); color: var(--hold); }
.editnote {
  margin-top: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  border-left: 2px solid var(--hold);
  background: var(--hold-ghost);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 12px;
}
.editnote b { color: var(--hold); font-weight: 600; }
.editnote em { font-style: normal; color: var(--type); }
/* On a rejection the banner is solid red, so the note inside it has to invert
   with everything else rather than staying an amber box on a red field. */
.dec--rejected .editnote {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: var(--on-accent-soft);
}
.dec--rejected .editnote b,
.dec--rejected .editnote em,
.dec--rejected .editnote span { color: var(--on-accent); }

/* ── simulated metadata ───────────────────────────────────────────── */
/* Amber, like everything else that means "outstanding, look at this" —
   never green, and never invisible. A field the platform invented has to be
   distinguishable from one the bank supplied at a glance. */
.chip--sim { border-color: var(--hold); color: var(--hold); background: var(--hold-ghost); }
.checkchip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  font-size: 11.5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-high);
  cursor: pointer;
}
.checkchip:hover { border-color: var(--muted-dim); }
.checkchip input { accent-color: var(--accent); margin: 0; }

/* ── the edit dialog ──────────────────────────────────────────────── */
.editdlg .pickset__q { display: block; margin-bottom: 2px; }
.editfield { margin-top: 1.1rem; }
.editfield:first-child { margin-top: .6rem; }
.editfield .muted.sm { margin: 5px 0 0; }
.editinput {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--type);
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: 8px;
}
textarea.editinput { min-height: 76px; resize: vertical; line-height: 1.5; }
.editinput:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.editdlg .notice { margin: 1rem 0 0; }
.editdlg .btnrow { margin-top: 1.2rem; }

/* ── which index the mode actually reads ──────────────────────────── */
.idx {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.idx:first-of-type { border-top: 0; padding-top: 4px; }
.idx__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 3px;
}
.idx__h b { font-size: 13.5px; }
.idx p { margin: 0; }