/* ═══════════════════════════════════════════════════════════════════════
   UBL QA Console

   UBL blue on a cool grey field. The brand blue carries identity and
   primary actions; green, amber and red are reserved for what a scorecard
   says (met, partly met, not met) and are never used as decoration.

   One rule matters more than the rest: a SOLID RED FILL means something is
   disqualifying — a fatal criterion not met, or a rejected decision.
   Nothing else on the page gets that treatment, so the eye finds it in a
   table of thirty-three rows.

   White text sits on --brand (#0075BE, 4.9:1), not on the lighter UBL
   #0083CA (4.1:1), which is kept for rings, bars and borders.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* brand */
  --brand:        #0075BE;
  --brand-strong: #006BAD;
  --brand-bright: #0083CA;
  --brand-deep:   #0F5885;
  --brand-night:  #0A3D5F;
  --brand-tint:   #E8F4FB;
  --brand-ghost:  rgba(0, 131, 202, 0.08);
  --brand-ring:   rgba(0, 131, 202, 0.32);
  --on-brand:      #FFFFFF;
  --on-brand-soft: rgba(255, 255, 255, 0.8);
  --on-brand-dim:  rgba(255, 255, 255, 0.6);

  /* surfaces and type */
  --bg:           #F4F7FA;
  --surface:      #FFFFFF;
  --surface-sunk: #F1F5F9;
  --line:         #DCE3EA;
  --line-soft:    #EAEFF4;
  --ink:          #13202B;
  --muted:        #4B5B6A;     /* 7.0:1 on white */
  --muted-dim:    #5E6E7D;     /* 4.8:1 on the sunk surface */

  /* what a mark says */
  --ok:        #0B7A4B;
  --ok-line:   #8CC5AA;
  --ok-ghost:  rgba(11, 122, 75, 0.08);
  --warn:      #9A6200;
  --warn-ghost: rgba(154, 98, 0, 0.09);
  --bad:       #B3261E;
  --bad-ghost: rgba(179, 38, 30, 0.07);

  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans",
          "Noto Naskh Arabic", "Noto Nastaliq Urdu", Tahoma, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --r-l: 14px;
  --r:   10px;
  --r-s: 7px;
  --shadow-1: 0 1px 2px rgba(16, 40, 64, 0.06), 0 1px 3px rgba(16, 40, 64, 0.04);
  --shadow-2: 0 12px 40px rgba(10, 40, 70, 0.18);
  --ease: 140ms ease;
}

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

/* Load-bearing: views and conditional panels are toggled with [hidden]. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 650; letter-spacing: -0.01em; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
img { display: block; max-width: 100%; height: auto; }
code {
  font: 400 0.86em/1.4 var(--mono);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sm { font-size: 12px; }
.muted { color: var(--muted); }
.bad { color: var(--bad); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--brand-bright);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ═════════════════════════════════════════════════════════ login ═══ */
.login {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.login__brand {
  background:
    radial-gradient(900px 520px at 0% 0%, rgba(0, 131, 202, 0.45), transparent 60%),
    linear-gradient(160deg, var(--brand-deep), var(--brand-night));
  color: var(--on-brand);
  padding: 56px clamp(32px, 6vw, 88px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.login__brand img { width: 160px; }
.login__product { font-size: 30px; font-weight: 650; letter-spacing: -0.015em; margin-top: 18px; }
.login__pitch { font-size: 15px; line-height: 1.6; color: var(--on-brand-soft); max-width: 40ch; }
.login__card {
  align-self: center;
  justify-self: center;
  width: min(380px, calc(100% - 48px));
  display: grid;
  gap: 16px;
  padding: 32px 0;
}
.login__logo { display: none; width: 116px; }
.login__t { font-size: 24px; }
.login__sub { color: var(--muted); margin-top: -10px; }
.login__err {
  color: var(--bad);
  background: var(--bad-ghost);
  border: 1px solid rgba(179, 38, 30, 0.35);
  border-radius: var(--r-s);
  padding: 9px 11px;
  font-size: 13px;
}
.login .field input { padding: 10px 12px; font-size: 14px; }

/* ═════════════════════════════════════════════════════════ shell ═══ */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100dvh;
}
.rail {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 24px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  background: linear-gradient(180deg, var(--brand-deep) 0%, var(--brand-night) 100%);
  color: var(--on-brand);
}
.brand { padding: 0 8px; display: grid; gap: 10px; }
.brand__logo { width: 104px; }
.brand__product {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-brand-soft);
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.rail__nav { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.navbtn {
  position: relative;
  width: 100%;
  display: grid;
  gap: 1px;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-s);
  background: none;
  color: var(--on-brand-soft);
  font: inherit;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.navbtn b { font-size: 14px; font-weight: 600; }
.navbtn i { font-style: normal; font-size: 11.5px; color: var(--on-brand-dim); }
.navbtn:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-brand); }
.navbtn.is-active { background: rgba(255, 255, 255, 0.14); color: var(--on-brand); }
.navbtn.is-active::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #7FD0F5;
}
.rail__foot { margin-top: auto; display: grid; gap: 10px; padding: 0 8px; }
.rail__meta { font-size: 11.5px; line-height: 1.5; color: var(--on-brand-dim); }
.rail :focus-visible { outline-color: #FFFFFF; }

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkbtn:hover { color: var(--brand-deep); }
.rail .linkbtn { color: var(--on-brand-soft); }
.rail .linkbtn:hover { color: var(--on-brand); }
.linkbtn--bad { color: var(--bad); }
.linkbtn--bad:hover { color: #8C1D17; }

.main { min-width: 0; padding: 30px clamp(18px, 3vw, 40px) 64px; }
.view { display: none; }
.view.is-active { display: block; }
.vhead { margin-bottom: 22px; max-width: 78ch; }
.vhead__t { font-size: 26px; color: var(--ink); }
.vhead__s { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* ════════════════════════════════════════════ panels and cards ═══ */
.panel, .card, .blank, .stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.panel { padding: 16px; }
.card { padding: 18px 20px; }
.panel__t, .card__t {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 12px;
}
.panel__t + .panel__t { margin-top: 16px; }
.panel__hrow { display: flex; align-items: baseline; gap: 10px; }
.panel__hrow .panel__t { flex: 1 1 auto; }
/* Analytics and Standards stack whole cards; the call detail spaces its own
   with grid gap. */
#dash > * + *, #stdBody > * + *, #dashBody > * + * { margin-top: 16px; }
#view-batches .panel + .panel { margin-top: 16px; }
.card__h {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.card__h h2 { font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
.card__h .btnrow { margin: 0 0 0 auto; }
.card__s { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: -6px 0 12px; max-width: 76ch; }

.blank { padding: 52px 24px; text-align: center; }
.blank h2 { font-size: 18px; color: var(--brand-deep); margin-bottom: 6px; }
.blank p { color: var(--muted); font-size: 13.5px; max-width: 48ch; margin: 0 auto; }

/* ════════════════════════════════════════════════════ controls ═══ */
.field { display: grid; gap: 5px; }
.field + .field { margin-top: 10px; }
.login .field + .field, .search__grid .field + .field { margin-top: 0; }
.field__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.field__help { font-size: 11.5px; line-height: 1.45; color: var(--muted-dim); }
.field--wide { grid-column: span 2; }

input, select, button, textarea { font-family: inherit; }
input[type="text"], input[type="password"], input[type="search"], input[type="date"],
input[type="number"], select, .editinput, .qasearch {
  width: 100%;
  min-width: 0;
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  transition: border-color var(--ease), box-shadow var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted-dim); }
input:hover, select:hover, .editinput:hover { border-color: #C3CDD7; }
input:focus, select:focus, .editinput:focus, .qasearch:focus {
  outline: none;
  border-color: var(--brand-bright);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
select { cursor: pointer; }
input[type="file"] { font-size: 13px; color: var(--muted); }
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 7px 13px;
  font: 600 13px/1.3 var(--font);
  color: var(--brand-deep);
  background: var(--brand-tint);
  border: 1px solid #BFE0F3;
  border-radius: var(--r-s);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--brand-bright); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

.btnrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 15px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--brand-bright); color: var(--brand-deep); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn--primary:hover:not(:disabled) {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: var(--on-brand);
}
.btn--ghost { background: var(--surface); }
.btn--stop { color: var(--bad); border-color: rgba(179, 38, 30, 0.45); }
.btn--stop:hover:not(:disabled) { color: var(--bad); border-color: var(--bad); background: var(--bad-ghost); }
.btn--block { width: 100%; padding: 11px 15px; font-size: 14px; }

/* segmented filters and tabs */
.seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.seg button {
  padding: 5px 12px;
  font: 500 12.5px/1.4 var(--font);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.seg button:hover { border-color: var(--brand-bright); color: var(--brand-deep); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] {
  background: var(--brand-tint);
  border-color: var(--brand-bright);
  color: var(--brand-deep);
  font-weight: 600;
}
.seg button span { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.seg--tabs { margin: 0 0 16px; gap: 4px; padding: 4px; background: var(--surface-sunk);
  border: 1px solid var(--line); border-radius: 999px; width: fit-content; max-width: 100%; }
.seg--tabs button { border-color: transparent; background: none; }
.seg--tabs button[aria-pressed="true"], .seg--tabs button[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}

/* ══════════════════════════════════════════════════════ search ═══ */
.search { margin-bottom: 16px; }
.search__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.field--sm input, .field--sm select { padding: 7px 10px; font-size: 13px; }
.search__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.search__spacer { flex: 1 1 auto; }
.search__count { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.search__count.is-zero { color: var(--muted-dim); font-weight: 400; }
.qasearch { margin-top: 12px; }

/* ══════════════════════════════════════════════════════ upload ═══ */
.uploader { margin-bottom: 16px; }
.uploader > p { max-width: 90ch; margin-bottom: 12px; }
.drop {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 26px 16px;
  text-align: center;
  background: var(--surface-sunk);
  border: 1.5px dashed #B9C6D3;
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.drop:hover, .drop.is-drag { border-color: var(--brand-bright); background: var(--brand-ghost); }
.drop.is-drag { border-style: solid; }
.drop b { font-size: 14px; font-weight: 600; color: var(--brand-deep); }
.drop i { font-style: normal; font-size: 12px; color: var(--muted); }
.sweep {
  position: relative;
  width: 100%;
  height: 3px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}
.sweep::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: var(--brand-bright);
  animation: sweep 1.15s ease-in-out infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(360%); } }
.report {
  margin-top: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--ok-ghost);
  border-left: 3px solid var(--ok);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.report.has-skips { background: var(--warn-ghost); border-left-color: var(--warn); }
.report b { color: var(--ink); }
.report ul { margin: 3px 0 0; padding-left: 1.1em; }
.filepick { display: block; margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* ═══════════════════════════════════════════════ list + detail ═══ */
.qagrid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
/* 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: 20px;
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.qalist { display: grid; gap: 6px; overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.qadetail { display: grid; gap: 16px; min-width: 0; }
.pager { justify-content: space-between; margin-top: 12px; }
.qaempty { padding: 16px 2px; font-size: 13px; color: var(--muted); }

.qacall {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.qacall:hover { border-color: #BCD3E4; background: #FAFCFE; }
.qacall.is-sel {
  border-color: var(--brand-bright);
  background: var(--brand-tint);
  box-shadow: inset 3px 0 0 var(--brand);
}
.qacall__top { grid-column: 1; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.qacall__n { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.qacall__m, .qacall__f {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
  font-size: 11.5px;
  color: var(--muted);
}
.qacall__f { margin-top: 2px; }
.qacall__s {
  grid-row: 1 / 4;
  grid-column: 2;
  align-self: center;
  font: 700 18px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.qacall__s small { font-size: 11px; font-weight: 400; color: var(--muted); }
.qacall__s.is-good { color: var(--ok); }
.qacall__s.is-mid { color: var(--warn); }
.qacall__s.is-bad { color: var(--bad); }
.qacall__s.is-none { color: var(--muted-dim); }
.qacall__e { grid-column: 1 / -1; font-size: 11.5px; color: var(--bad); }

/* ═══════════════════════════════════════════ pills, chips, tags ═══ */
.pill, .mark, .dec, .tag {
  display: inline-block;
  font: 650 10px/1.6 var(--font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface);
}
.pill--running { color: var(--warn); border-color: rgba(154, 98, 0, 0.4); background: var(--warn-ghost); }
.pill--done { color: var(--ok); border-color: var(--ok-line); background: var(--ok-ghost); }
.pill--failed { color: var(--bad); border-color: rgba(179, 38, 30, 0.4); background: var(--bad-ghost); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  padding: 1px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-sunk);
}
.chip--topic { color: var(--brand-deep); border-color: #BFE0F3; background: var(--brand-tint); }
.chip--rev { color: var(--ok); border-color: var(--ok-line); background: var(--ok-ghost); }
.chip--edited, .chip--unclear { color: var(--warn); border-color: rgba(154, 98, 0, 0.4); background: var(--surface); }
.chip--sim { color: var(--warn); border-color: rgba(154, 98, 0, 0.4); background: var(--warn-ghost); }
.chip--mask { color: var(--muted-dim); }
.chip--fatal { color: var(--on-brand); border-color: var(--bad); background: var(--bad); }
.checkchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
.checkchip:hover { border-color: var(--brand-bright); }
.checkchip input { margin: 0; }
.tag { margin-top: 4px; font-size: 9.5px; border-radius: 5px; }
.tag--mand { color: var(--brand-deep); border-color: #BFE0F3; background: var(--brand-tint); }

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

/* ════════════════════════════════════════════════ call header ═══ */
.summary { font-size: 14px; line-height: 1.65; }
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
}
.meta b { color: var(--ink); font-weight: 600; }
.kvgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  margin: 14px 0;
}
.kv dt { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--muted-dim); }
.kv dd { margin: 2px 0 0; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
audio { width: 100%; height: 40px; margin-top: 4px; }

/* ═══════════════════════════════════════════════════ the score ═══ */
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.band__n {
  font: 700 44px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.band__n small { font-size: 18px; font-weight: 400; color: var(--muted); }
.band__p { font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.band--good .band__n { color: var(--ok); }
.band--mid .band__n { color: var(--warn); }
.band--bad .band__n { color: var(--bad); }
.track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-sunk); }
.track > span { display: block; height: 100%; border-radius: 999px; background: var(--muted); }
.tiles { display: flex; gap: 8px; }
.tile {
  min-width: 82px;
  padding: 9px 12px;
  text-align: center;
  background: var(--surface-sunk);
  border-radius: var(--r);
}
.tile b { display: block; font: 700 20px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.tile i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-dim); }
.tile--met b { color: var(--ok); }
.tile--unmet b { color: var(--bad); }

/* ═══════════════════════════════════════════════════ decision ═══ */
.decision {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted-dim);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}
.decision__t { font-size: 18px; font-weight: 700; }
.decision__r { max-width: 64ch; margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.decision__a { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dec--accepted { border-left-color: var(--ok); }
.dec--accepted .decision__t { color: var(--ok); }
.dec--manual { border-left-color: var(--warn); }
.dec--manual .decision__t { color: var(--warn); }
.dec--na .decision__t { color: var(--muted-dim); }
/* A rejection turns a customer's request down on the strength of a call:
   one of the two places the solid red fill is allowed. Everything inside the
   banner inverts with it so nothing drops below readable contrast. */
.decision.dec--rejected { background: var(--bad); border-color: var(--bad); }
.dec--rejected .decision__t { color: var(--on-brand); }
.dec--rejected .decision__r { color: var(--on-brand-soft); }
.dec--rejected .chip,
.dec--rejected .btn {
  color: var(--on-brand);
  border-color: var(--on-brand-dim);
  background: rgba(255, 255, 255, 0.14);
}
.dec--rejected .btn:hover:not(:disabled) { border-color: var(--on-brand); color: var(--on-brand); }
.dec--rejected .btn--primary { background: var(--on-brand); border-color: var(--on-brand); color: var(--bad); }
.dec--rejected .btn--primary:hover:not(:disabled) { background: #F8E6E5; color: var(--bad); }

/* the same word, small, in a result row */
.dec.dec--accepted { color: var(--ok); border-color: var(--ok-line); background: var(--ok-ghost); }
.dec.dec--manual { color: var(--warn); border-color: rgba(154, 98, 0, 0.4); background: var(--warn-ghost); }
.dec.dec--na { color: var(--muted-dim); }
.dec.dec--rejected { color: var(--on-brand); border-color: var(--bad); background: var(--bad); }

.editnote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  background: var(--warn-ghost);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.editnote b { color: var(--warn); font-weight: 600; }
.editnote em { font-style: normal; color: var(--ink); }
.dec--rejected .editnote { background: rgba(255, 255, 255, 0.12); border-left-color: var(--on-brand-soft); }
.dec--rejected .editnote b,
.dec--rejected .editnote em,
.dec--rejected .editnote span { color: var(--on-brand); }
.ovr { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--warn); }

/* ═══════════════════════════════════════════════════════ rubric ═══ */
.rubricwrap { max-height: 600px; overflow-y: auto; margin: 0 -20px -18px; border-top: 1px solid var(--line-soft); }
.rubric, .agents, .grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.rubric th, .agents th, .grid th {
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-dim);
  background: var(--surface-sunk);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.rubric th { position: sticky; top: 0; z-index: 1; }
.rubric td, .agents td, .grid td {
  padding: 10px;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.rubric tr:last-child td, .agents tr:last-child td, .grid tr:last-child td { border-bottom: 0; }
.rubric tbody tr:hover td { background: #FAFCFE; }
.rubric .c-id { width: 40px; font: 500 11.5px/1.6 var(--mono); color: var(--muted-dim); white-space: normal; }
.rubric .c-st { width: 110px; }
.rubric .c-pt {
  width: 66px;
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  white-space: nowrap;
}
.rubric .c-pt small { font-weight: 400; color: var(--muted); }
.rubric .c-ov { width: 96px; text-align: right; }
td.c-ov { white-space: nowrap; text-align: right; }
td.c-ov .linkbtn { margin-left: 8px; color: var(--muted); }
td.c-ov .linkbtn:hover { color: var(--brand-deep); }
.rubric__q { line-height: 1.5; }
.rubric__why { margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.rubric__sec { margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-dim); }
.rubric tr.is-na td { opacity: 0.55; }
.rubric tr.is-overridden td { background: var(--warn-ghost); }
.rubric tr.is-fatal-breach td { background: var(--bad-ghost); }

.mark--met { color: var(--ok); border-color: var(--ok-line); background: var(--ok-ghost); }
.mark--part, .mark--unclear { color: var(--warn); border-color: rgba(154, 98, 0, 0.4); background: var(--warn-ghost); }
.mark--unmet { color: var(--bad); border-color: rgba(179, 38, 30, 0.4); background: var(--bad-ghost); }
.mark--na { color: var(--muted-dim); }
/* The other place the solid red fill is allowed: a fatal criterion not met. */
.mark--fatal { color: var(--on-brand); border-color: var(--bad); background: var(--bad); }

/* ═══════════════════════════════════════════════════ 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: 7px 9px;
  text-align: left;
  font: inherit;
  background: var(--surface-sunk);
  border: 1px solid transparent;
  border-left: 3px solid var(--brand-bright);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.cite:hover { background: var(--brand-tint); border-color: #BFE0F3; border-left-color: var(--brand); }
.cite__t { flex: none; font: 650 11.5px/1.4 var(--mono); color: var(--brand); }
.cite__s { flex: none; font-size: 10px; font-weight: 650; letter-spacing: 0.05em; color: var(--muted-dim); }
.cite__x {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.polcite, .passage {
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--surface-sunk);
  border-left: 3px solid var(--muted-dim);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.polcite b { display: block; font-size: 11.5px; color: var(--muted); }
.polcite span { font-size: 12.5px; line-height: 1.5; }
.passage { margin-top: 10px; padding: 10px 12px; }
.passage b { font-size: 12px; color: var(--muted); }
.passage p { margin-top: 4px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }

/* ═══════════════════════════════════════════ information checks ═══ */
.claims { display: grid; gap: 8px; }
.claim {
  padding: 10px 12px;
  background: var(--surface-sunk);
  border-left: 3px solid var(--muted-dim);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.claim--correct { border-left-color: var(--ok); }
.claim--incorrect { border-left-color: var(--bad); background: var(--bad-ghost); }
.claim__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.claim__x { flex: 1 1 260px; font-size: 13.5px; line-height: 1.5; }
.claim__note { margin-top: 6px; font-size: 12.5px; color: var(--bad); }

/* ═════════════════════════════════════════════════ transcript ═══ */
.txbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.txbar .seg { margin: 0; }
.txbar .btn { margin-left: auto; }
.tx { display: grid; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.txraw {
  max-height: 560px;
  overflow-y: auto;
  padding: 12px 14px;
  white-space: pre-wrap;
  font-size: 13.5px;
  line-height: 1.7;
  background: var(--surface-sunk);
  border-radius: var(--r);
}
/* Agent and customer are told apart by side and tint, like a conversation. */
.seg-t {
  max-width: 88%;
  padding: 9px 12px;
  background: var(--surface-sunk);
  border-radius: 12px;
}
.seg-t--agent { justify-self: start; background: var(--brand-tint); border-top-left-radius: 4px; }
.seg-t--customer { justify-self: end; background: var(--surface-sunk); border-top-right-radius: 4px; }
.seg-t--unknown { justify-self: start; background: var(--warn-ghost); }
.seg-t__w {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.seg-t--agent .seg-t__w { color: var(--brand-deep); }
.seg-t__u { font-size: 14px; line-height: 1.6; }
.seg-t__e { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.seg-t__time {
  padding: 0 5px;
  font: 600 10.5px/1.6 var(--mono);
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}
.seg-t__time:hover { color: var(--brand); border-color: var(--brand-bright); }

/* ═════════════════════════════════════════════════════ notices ═══ */
.notice {
  margin-bottom: 10px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink);
  background: var(--ok-ghost);
  border-left: 3px solid var(--ok);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.notice--warn { background: var(--warn-ghost); border-left-color: var(--warn); }
.notice--bad { background: var(--bad-ghost); border-left-color: var(--bad); }

/* ═══════════════════════════════════════════════════ analytics ═══ */
.dashgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat { padding: 14px 16px; }
.stat b {
  display: block;
  font: 700 28px/1.15 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
}
.stat i { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-dim); }
.stat--good b { color: var(--ok); }
.stat--bad b { color: var(--bad); }

.bars { display: grid; gap: 8px; }
.bar {
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.bar__l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.bar__l b { font: 600 12px/1 var(--mono); color: var(--ink); }
.bar__t { height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-sunk); }
.bar__f { display: block; height: 100%; border-radius: 999px; background: var(--brand-bright); }
.bar__v { text-align: right; font: 600 12.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }

.agents .num { font-family: var(--mono); }
.rank {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 650 10.5px/1 var(--mono);
  color: var(--muted);
  background: var(--surface-sunk);
}
.rank--top { color: var(--on-brand); background: var(--brand); }
.minibar {
  display: inline-block;
  vertical-align: middle;
  width: 70px;
  height: 6px;
  margin-left: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-sunk);
}
.minibar span { display: block; height: 100%; }

.insights { display: grid; gap: 8px; }
.ins {
  padding: 10px 13px;
  background: var(--surface-sunk);
  border-left: 3px solid var(--muted-dim);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.ins b { display: block; font-size: 13.5px; }
.ins p { margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.ins em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--ink); }
.ins--critical { border-left-color: var(--bad); }
.ins--critical b { color: var(--bad); }
.ins--warning { border-left-color: var(--warn); }
.ins--warning b { color: var(--warn); }
.ins--positive { border-left-color: var(--ok); }
.ins--positive b { color: var(--ok); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }

/* ═════════════════════════════════════════ standards tables ═══ */
.grid { margin-top: 10px; font-size: 13px; }
.grid tr.is-dim td { opacity: 0.5; }
.grid tr.is-active-row td { background: var(--ok-ghost); }
.idx { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.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: 4px; }
.idx__h b { font-size: 14px; }

/* ═════════════════════════════════════════════════════ dialogs ═══ */
.importmeta {
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 24px;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: 18px;
  box-shadow: var(--shadow-2);
}
.importmeta::backdrop { background: rgba(10, 30, 50, 0.5); }
.importmeta h2 { font-size: 19px; margin-bottom: 6px; }
.importmeta .notice { margin: 0 0 1.1rem; }
.pickset { margin: 18px 0 0; padding: 0; border: 0; }
.pickset__q { padding: 0; font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
/* The radio stays visible: a card that shows selection only by tint is a
   card people click twice to be sure. */
.pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  margin-top: 8px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.pick:hover { border-color: var(--brand-bright); }
.pick:has(input:checked) { border-color: var(--brand-bright); background: var(--brand-tint); }
.pick:has(input:focus-visible) { outline: 2px solid var(--brand-bright); outline-offset: 2px; }
.pick input { margin: 0; }
.pick__t { font-size: 14px; font-weight: 600; }
.pick__d { grid-column: 2; font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.editdlg .pickset__q { display: block; margin-bottom: 2px; }
.editfield { margin-top: 18px; }
.editfield:first-child { margin-top: 10px; }
.editfield .muted.sm { margin: 5px 0 0; }
.editinput { margin-top: 6px; }
textarea.editinput { min-height: 80px; resize: vertical; line-height: 1.5; }
.editdlg .notice { margin: 16px 0 0; }
.importmeta .btnrow { margin-top: 20px; }

/* ═══════════════════════════════════════════════════ dashboard ═══ */
/* One row of filters above everything they scope. */
.dfilters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.dfilters .field { flex: 1 1 150px; margin: 0; }
.dfilters__go { flex: 0 0 auto; }
#dashBody { transition: opacity var(--ease); }
#dashBody.is-loading { opacity: 0.55; pointer-events: none; }
.dash__range { font-size: 12.5px; color: var(--muted); }
.dash__foot { margin-top: 12px; }
.dash2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.metric {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}
.metric__l { font-size: 12px; font-weight: 600; color: var(--muted); }
.metric__v {
  margin-top: 4px;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.metric__d { margin-top: 6px; font-size: 12px; color: var(--muted-dim); }
.metric__d span { font-weight: 650; font-variant-numeric: tabular-nums; }
.metric__d.is-good span { color: var(--ok); }
.metric__d.is-bad span { color: var(--bad); }

.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.chart { position: relative; margin: 0; min-width: 0; border-radius: var(--r); }
.chart__t { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.chart__plot { width: 100%; height: 168px; touch-action: pan-y; }
.chart__plot svg { display: block; overflow: visible; }
.chart__tip {
  position: absolute;
  top: 22px;
  min-width: 150px;
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.chart__tip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart__table { margin-top: 12px; font-size: 13px; }
.chart__table summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.ch-grid { stroke: var(--line-soft); stroke-width: 1; }
.ch-tick { fill: var(--muted-dim); font-size: 11px; font-family: var(--font); }
.ch-col { fill: var(--brand-bright); }
.ch-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ch-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.ch-ref { stroke: var(--muted-dim); stroke-width: 1; }
.ch-reflabel { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.ch-cross { stroke: var(--muted-dim); stroke-width: 1; }

.worklist { display: grid; gap: 6px; }
.wl {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.wl:hover { border-color: #BCD3E4; background: #FAFCFE; }
.wl__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wl__top b { font-size: 13.5px; }
.wl__m { font-size: 12px; color: var(--muted); }
.wl__r { font-size: 12px; color: var(--muted-dim); }

.tablewrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.ratecell { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.ratecell .track { flex: 1; }
.bars--avg .bar { grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 44px 56px; }
.bar__a { text-align: right; font: 600 12.5px/1 var(--mono); color: var(--muted); }

/* ═════════════════════════════════════════════════════ batches ═══ */
.batchname { max-width: 420px; margin-bottom: 12px; }
.uploader__help { margin-top: 10px; max-width: 90ch; }
.batches { display: grid; gap: 10px; }
.batch {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--surface);
}
.batch.is-running { border-color: #BFE0F3; background: #FAFDFF; }
.batch__h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.batch__n { font-size: 15px; overflow-wrap: anywhere; }
.batch__m { margin-top: -6px; font-size: 12px; color: var(--muted); }
.batch__p { display: grid; gap: 4px; }
.batch__s {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px 16px;
  margin: 0;
}
.batch .btnrow { margin-top: 0; }
.batch__x ul { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; }

/* ═══════════════════════════════════════════════════ responsive ═══ */
@media (max-width: 1100px) {
  .qagrid { grid-template-columns: 1fr; }
  .qapanel { position: static; max-height: none; }
  .qalist { max-height: 400px; }
}
@media (max-width: 1000px) {
  .dash2, .charts { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__brand { display: none; }
  .login__logo { display: block; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: sticky;
    z-index: 5;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 16px;
    background: linear-gradient(90deg, var(--brand-deep), var(--brand-night));
  }
  .brand { padding: 0; grid-auto-flow: column; align-items: center; }
  .brand__logo { width: 64px; }
  .brand__product { padding: 0 0 0 10px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.2); }
  /* Five views do not fit across a phone, so the row scrolls on its own
     instead of widening the page. */
  .rail__nav {
    order: 3;
    display: flex;
    flex: 1 1 100%;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rail__nav::-webkit-scrollbar { display: none; }
  .rail__nav li { flex: none; }
  .brand { flex: 1; }
  .navbtn { padding: 6px 10px; }
  .navbtn i, .rail__meta { display: none; }
  .navbtn.is-active::before { left: 10px; right: 10px; top: auto; bottom: 0; width: auto; height: 2px; }
  .rail__foot { margin-top: 0; padding: 0; }
  .main { padding: 20px 16px 48px; }
  .vhead__t { font-size: 22px; }
  .field--wide { grid-column: span 1; }
  .decision__a { margin-left: 0; }
}
@media (max-width: 640px) {
  .search__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dfilters .field { flex: 1 1 calc(50% - 6px); }
  .dfilters__go, .dfilters__go .btn { width: 100%; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 12px; }
  .metric__v { font-size: 22px; }
  .bars--avg .bar { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) 36px 48px; }
  .search__grid .field--wide { grid-column: 1 / -1; }
  .band { grid-template-columns: 1fr; }
  .bar { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) 44px; }
  .rubricwrap { max-height: none; }
  .seg-t { max-width: 100%; }
  .btnrow .btn { flex: 1 1 auto; }
}