/* Copperplate — Locus Elite brand layer for BCC.
   Source: copperplate-branding.md (Brand & Usage v2.0, Copperplate Component
   Kit). Light scale is canonical; the dark scale is the DERIVED proposal
   (§1.3, pending formal sign-off — flagged in docs). Loads after admin.css;
   everything routes through --cp-* tokens keyed off data-bs-theme so light
   and dark can never disagree with Bootstrap's own theming. */

/* ── typefaces (vendored, SIL OFL) ─────────────────────────────────────── */
/* WOFF2 first: the same faces at a third of the bytes (927 KB of TTF ->
   296 KB), on every page load of every console. The TTF stays as a
   fallback for anything that cannot read WOFF2; browsers pick the first
   format they support and never fetch the other. Licence: SIL OFL 1.1,
   see fonts/LICENSE.txt. */
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-Light.woff2") format("woff2"),url("../fonts/IBMPlexSans-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"),url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-Medium.woff2") format("woff2"),url("../fonts/IBMPlexSans-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"),url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"),url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-display:swap}

/* ── tokens ────────────────────────────────────────────────────────────── */
:root{
  /* Radii. Values already used literally throughout this file and
     declared in docs/design-system/copperplate-tokens.css — named here
     so the two files agree instead of nearly agreeing. */
  --cp-radius-sm:7px; --cp-radius:10px;
  --cp-radius-lg:12px; --cp-radius-pill:999px;
  --cp-font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --cp-font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* light — canonical (§1.4) */
:root[data-bs-theme="light"]{
  --cp-bg:#FFFFFF; --cp-surface:#FFFFFF; --cp-surface-2:#FAFAF8;
  --cp-line:#E5E3DD; --cp-line-strong:#D6D3CB;
  --cp-text:#1C2229; --cp-text-2:#3A4048; --cp-text-muted:#5C666F;
  --cp-text-footnote:#8B959E;
  --cp-copper:#A45A2A; --cp-copper-hover:#8C4C22;
  --cp-copper-muted:rgba(164,90,42,.10);
  --cp-positive:#3E6B5B; --cp-warning:#8A6D26; --cp-negative:#AE4238;
  --cp-neutral:#C8CDD2; --cp-info:#33627F;
  --cp-sev-crit-fg:#7A2E27; --cp-sev-crit-bg:#F6EAE8;
  --cp-sev-warn-fg:#8A6D26; --cp-sev-warn-bg:#F5EFDA;
  --cp-sev-info-fg:#33627F; --cp-sev-info-bg:#EAF0F5;
  --cp-sev-ok-fg:#2E5445;  --cp-sev-ok-bg:#E7EFEB;
  --cp-card-shadow:0 1px 2px rgba(15,23,42,.03);
}

/* dark — DERIVED (§1.3), warm-neutral, lifted copper for contrast */
:root[data-bs-theme="dark"]{
  --cp-bg:#12171C; --cp-surface:#181E24; --cp-surface-2:#1F262D;
  --cp-line:#2A333B; --cp-line-strong:#3A454E;
  --cp-text:#E8EBEE; --cp-text-2:#AEB7BF; --cp-text-muted:#8A939B;
  --cp-text-footnote:#6B747C;
  --cp-copper:#C97F4C; --cp-copper-hover:#D89263;
  --cp-copper-muted:rgba(201,127,76,.14);
  --cp-positive:#6FA98F; --cp-warning:#C8A44E; --cp-negative:#D8756A;
  --cp-neutral:#7B848C; --cp-info:#7FA8C4;
  --cp-sev-crit-fg:#D8756A; --cp-sev-crit-bg:rgba(216,117,106,.14);
  --cp-sev-warn-fg:#C8A44E; --cp-sev-warn-bg:rgba(200,164,78,.14);
  --cp-sev-info-fg:#7FA8C4; --cp-sev-info-bg:rgba(127,168,196,.14);
  --cp-sev-ok-fg:#6FA98F;  --cp-sev-ok-bg:rgba(111,169,143,.14);
  --cp-card-shadow:none; /* dark: border contrast, never shadow (§4.2) */
}

/* ── Bootstrap variable mapping (§4.6) ─────────────────────────────────── */
:root[data-bs-theme="light"],:root[data-bs-theme="dark"]{
  --bs-body-bg:var(--cp-bg);
  --bs-body-color:var(--cp-text);
  --bs-secondary-color:var(--cp-text-2);
  --bs-tertiary-color:var(--cp-text-muted);
  --bs-tertiary-bg:var(--cp-surface-2);
  --bs-secondary-bg:var(--cp-surface-2);
  --bs-border-color:var(--cp-line);
  --bs-border-radius:10px;
  --bs-border-radius-lg:12px;
  --bs-body-font-family:var(--cp-font-sans);
  --bs-success:var(--cp-positive);
  --bs-warning:var(--cp-warning);
  --bs-danger:var(--cp-negative);
  --bs-info:var(--cp-info);
  --bs-link-color:var(--cp-copper);
  --bs-link-hover-color:var(--cp-copper-hover);
}
body{font-family:var(--cp-font-sans);background:var(--cp-bg);color:var(--cp-text)}

/* Copper = the action that leads; nothing else (§4.1). */
.btn-primary{
  --bs-btn-bg:var(--cp-copper); --bs-btn-border-color:var(--cp-copper);
  --bs-btn-hover-bg:var(--cp-copper-hover); --bs-btn-hover-border-color:var(--cp-copper-hover);
  --bs-btn-active-bg:var(--cp-copper-hover); --bs-btn-active-border-color:var(--cp-copper-hover);
  --bs-btn-disabled-bg:var(--cp-copper); --bs-btn-disabled-border-color:var(--cp-copper);
  --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-active-color:#fff;
}
.btn{border-radius:10px;font-weight:500}
.btn:focus-visible{outline:2px solid var(--cp-copper);outline-offset:2px;box-shadow:none}
.btn-outline-secondary{--bs-btn-color:var(--cp-text-2);--bs-btn-border-color:var(--cp-line);
  --bs-btn-hover-bg:var(--cp-surface-2);--bs-btn-hover-color:var(--cp-text);
  --bs-btn-hover-border-color:var(--cp-line-strong)}

/* ── surfaces ──────────────────────────────────────────────────────────── */
.card{background:var(--cp-surface);border:1px solid var(--cp-line);
  border-radius:12px;box-shadow:var(--cp-card-shadow)}
.card:hover{border-color:var(--cp-line)}
.modal-content{background:var(--cp-surface);border:1px solid var(--cp-line);
  border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.dropdown-menu{background:var(--cp-surface);border:1px solid var(--cp-line);border-radius:12px}
.navbar{background:var(--cp-surface);border-bottom:1px solid var(--cp-line)!important}
.alert-info{--bs-alert-bg:var(--cp-sev-info-bg);--bs-alert-color:var(--cp-sev-info-fg);
  --bs-alert-border-color:transparent}

/* ── tables (§4.4): mono caps headers, hairlines, no zebra ─────────────── */
.table{--bs-table-bg:transparent;--bs-table-hover-bg:var(--cp-surface-2)}
.table thead th{
  background:var(--cp-surface-2);color:var(--cp-text-muted);
  font-family:var(--cp-font-mono);font-size:11px;font-weight:500;line-height:1;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--cp-line)}
.table tbody td{border-bottom:1px solid var(--cp-line);border-top:0}
.table tbody tr:hover{background:var(--cp-surface-2)}
/* numerals: mono, tabular, right-aligned — non-negotiable on an ops wall */
.table td.text-end,.table th.text-end{font-family:var(--cp-font-mono);
  font-variant-numeric:tabular-nums}
.mono,kbd,code{font-family:var(--cp-font-mono)!important}
.tri-time{font-family:var(--cp-font-mono);font-variant-numeric:tabular-nums;font-size:.85em}

/* ── badges / chips (§4.5): pill, mono caps, letter-spaced ─────────────── */
.badge{border-radius:999px;font-family:var(--cp-font-mono);font-weight:500;
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 10px;line-height:1}
.text-bg-success{background-color:var(--cp-sev-ok-bg)!important;color:var(--cp-sev-ok-fg)!important}
.text-bg-warning{background-color:var(--cp-sev-warn-bg)!important;color:var(--cp-sev-warn-fg)!important}
.text-bg-danger{background-color:var(--cp-sev-crit-bg)!important;color:var(--cp-sev-crit-fg)!important}
.text-bg-info{background-color:var(--cp-sev-info-bg)!important;color:var(--cp-sev-info-fg)!important}
.text-bg-secondary{background-color:var(--cp-surface-2)!important;color:var(--cp-text-2)!important}
/* env badge must stay loud — it is a guardrail, not decoration */
#envBadge.text-bg-danger{background-color:var(--cp-negative)!important;color:#fff!important;font-weight:700}
#envBadge.text-bg-warning{background-color:var(--cp-warning)!important;color:#fff!important}
#envBadge.text-bg-success{background-color:var(--cp-positive)!important;color:#fff!important}

/* ── forms (§4.5) ──────────────────────────────────────────────────────── */
.form-label{font-family:var(--cp-font-mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted)}
.form-control,.form-select{background:var(--cp-surface);color:var(--cp-text);
  border:1px solid var(--cp-line);border-radius:9px}
.form-control:focus,.form-select:focus{background:var(--cp-surface);color:var(--cp-text);
  border-color:var(--cp-copper);box-shadow:0 0 0 3px var(--cp-copper-muted)}
.form-check-input:checked{background-color:var(--cp-copper);border-color:var(--cp-copper)}
.form-check-input:focus{border-color:var(--cp-copper);box-shadow:0 0 0 3px var(--cp-copper-muted)}
.form-text{color:var(--cp-text-muted)}

/* ── navigation ────────────────────────────────────────────────────────── */
.navbar .nav-link{color:var(--cp-text-2);font-weight:400}
.navbar .nav-link.active{color:var(--cp-text);font-weight:500;
  box-shadow:inset 0 -2px 0 var(--cp-copper)}
.navbar .nav-link:hover{color:var(--cp-text)}
.navbar-brand{font-family:var(--cp-font-sans);font-weight:500;letter-spacing:-.01em}
.cp-brand-divider{display:inline-block;width:1px;height:26px;background:var(--cp-line);
  margin:0 10px 0 12px;vertical-align:middle}

/* kbd hints stay quiet */
kbd.kbd-hint{background:var(--cp-surface-2);color:var(--cp-text-muted);
  border:1px solid var(--cp-line);font-size:10px}

/* ── page headers: sentence-case sans titles, quiet meta ───────────────── */
h1,h2,h3,h4,h5,.modal-title{font-family:var(--cp-font-sans);font-weight:500;
  letter-spacing:-.02em}

/* ── live/status pulse: LIVE only, and never for motion-sensitive users ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* touch: nothing revealed by hover alone; comfortable targets (§4.3) */
@media (hover:none),(pointer:coarse){
  .btn-sm{min-height:32px;min-width:32px}
}

/* ═══ structure & density ══════════════════════════════════════════════════
   Everything below is layout/rhythm, not colour: the brand tokens above are
   the palette, this is the shape the ops console takes at each width. */

/* ── outline buttons: brand hues, never stock Bootstrap blue/green ─────── */
.btn-outline-primary{--bs-btn-color:var(--cp-copper);--bs-btn-border-color:var(--cp-copper);
  --bs-btn-hover-bg:var(--cp-copper);--bs-btn-hover-border-color:var(--cp-copper);
  --bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--cp-copper-hover);
  --bs-btn-active-border-color:var(--cp-copper-hover);--bs-btn-active-color:#fff}
.btn-outline-success{--bs-btn-color:var(--cp-positive);--bs-btn-border-color:var(--cp-positive);
  --bs-btn-hover-bg:var(--cp-positive);--bs-btn-hover-border-color:var(--cp-positive);--bs-btn-hover-color:#fff}
.btn-outline-danger{--bs-btn-color:var(--cp-negative);--bs-btn-border-color:var(--cp-negative);
  --bs-btn-hover-bg:var(--cp-negative);--bs-btn-hover-border-color:var(--cp-negative);--bs-btn-hover-color:#fff}
.btn-outline-info{--bs-btn-color:var(--cp-info);--bs-btn-border-color:var(--cp-info);
  --bs-btn-hover-bg:var(--cp-info);--bs-btn-hover-border-color:var(--cp-info);--bs-btn-hover-color:#fff}
.btn-outline-warning{--bs-btn-color:var(--cp-warning);--bs-btn-border-color:var(--cp-warning);
  --bs-btn-hover-bg:var(--cp-warning);--bs-btn-hover-border-color:var(--cp-warning);--bs-btn-hover-color:#fff}
.btn-sm{border-radius:9px;font-size:13px}

/* ── top bar: one compact row at every width ───────────────────────────── */
.cp-topbar{padding-top:.4rem;padding-bottom:.4rem;background:var(--cp-surface)}
.cp-topbar .navbar-brand{font-size:1rem;margin:0}
.cp-topbar .nav-link{padding:.35rem .7rem;border-radius:8px;font-size:14px}
.cp-topbar .nav-link.active{background:var(--cp-copper-muted);color:var(--cp-text);
  box-shadow:none}
.env-badge{font-family:var(--cp-font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 9px}

/* ── phone tab bar: the primary navigation below md ────────────────────── */
.cp-tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1030;
  display:flex; align-items:stretch;
  background:var(--cp-surface);
  border-top:1px solid var(--cp-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.cp-tab{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px 1px 7px;
  color:var(--cp-text-muted); text-decoration:none;
  font-family:var(--cp-font-mono); font-size:9px; font-weight:500;
  /* Sized to the LONGEST nav label ("Requests", 8 chars) at 375px, because
     labels are identical on every device — there are no short forms to fall
     back on. Mono advance is ~0.6em, so 8 chars ≈ 45px inside a 63px tab.
     A longer label than this needs the size re-checked, not abbreviated. */
  text-transform:uppercase; letter-spacing:.03em;
  border-top:2px solid transparent;
}
.cp-tab i{font-size:17px;line-height:1}
.cp-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cp-tab.active{color:var(--cp-copper);border-top-color:var(--cp-copper);
  background:var(--cp-copper-muted)}
.cp-tab:active{background:var(--cp-surface-2)}
/* Must track the tab bar's own breakpoint (now lg): the bar is fixed, so
   without this the last row of every page sits underneath it. */
@media (max-width:991.98px){
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  main{padding-bottom:.5rem!important}
}

/* ── page rhythm: kit scale (§2.4), tighter on phones ──────────────────── */
main > .d-flex:first-child h1,main h1{font-size:21px;line-height:1.25;margin:0}
@media (min-width:768px){ main h1{font-size:24px} }
main{font-size:15px}
.small,.form-text,.hint-note{font-size:13px}
.card-body{padding:14px 16px}
.card+.card,.card{margin-bottom:.75rem}
.alert{border-radius:12px;border:1px solid var(--cp-line);font-size:13px;padding:.6rem .9rem}
.table-admin{font-size:14px}
.table-admin td,.table-admin th{padding:9px 12px}

/* Page meta line: mono, muted, never competing with the title. */
#pageUpdated,#channelCount,#segmentCount,#alertCounts{
  font-family:var(--cp-font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--cp-text-muted);text-transform:none}

/* ── env watermark: present, not obstructive (it sat over content) ─────── */
#envWatermark{font-size:clamp(4rem,12vw,11rem);letter-spacing:.12em}
body.env-wm-staging #envWatermark{color:rgba(255,193,7,.055)}
body.env-wm-local #envWatermark{color:rgba(111,169,143,.045)}
@media (max-width:767.98px){ #envWatermark{display:none} }

/* ── native controls follow the theme (dark select popups, pickers) ────── */
:root[data-bs-theme="dark"]{color-scheme:dark}
:root[data-bs-theme="light"]{color-scheme:light}

/* ── segmented controls: selection is INK, never copper (§4.1) ─────────── */
.btn-check:checked+.btn-outline-secondary,
.btn-check:checked+.btn{
  background:var(--cp-surface-2);color:var(--cp-text);
  border-color:var(--cp-line-strong);font-weight:500;box-shadow:none}
.btn-check:focus-visible+.btn{outline:2px solid var(--cp-copper);outline-offset:2px}
/* keyboard hints inside buttons must not fight the button surface */
.btn .kbd-hint{background:transparent;border-color:currentColor;opacity:.5;margin-left:.35rem}

/* ── page header: stacks cleanly on phones ─────────────────────────────── */
@media (max-width:767.98px){
  main > .d-flex:first-of-type{gap:.5rem!important}
  main > .d-flex:first-of-type > .ms-auto{
    width:100%;margin-left:0!important;flex-wrap:wrap;gap:.5rem!important}
  main > .d-flex:first-of-type input[type=search]{flex:1 1 12rem;max-width:none!important}
  main > .d-flex:first-of-type .btn{flex:0 0 auto}
  #pageUpdated{order:99;width:100%}
}

/* ── data tables on phones become CARDS ────────────────────────────────
   A 10-column table at 375px wraps names character-by-character and hides
   the actions off-screen. Below md each row is a card: id + name lead, the
   remaining fields are labelled from data-label, actions sit full width. */
@media (max-width:767.98px){
  .table-admin,.table-admin tbody,.table-admin tr,.table-admin td{display:block;width:auto}
  .table-admin thead{display:none}
  .table-admin{border-collapse:separate}
  .table-admin tbody tr{
    background:var(--cp-surface);border:1px solid var(--cp-line);
    border-radius:12px;padding:12px 14px;margin-bottom:.6rem}
  .table-admin tbody tr:hover{background:var(--cp-surface)}
  .table-admin tbody td{border:0;padding:3px 0;text-align:left!important}
  /* identity block */
  .table-admin td.cp-cell-title{font-size:16px;font-weight:500;line-height:1.25;
    white-space:normal;word-break:normal;order:-2}
  .table-admin td.cp-cell-key{font-family:var(--cp-font-mono);font-size:11px;
    color:var(--cp-text-muted);letter-spacing:.03em;order:-1}
  /* labelled fields, two per line */
  .table-admin tbody td[data-label]{
    display:inline-flex;align-items:center;gap:6px;min-height:26px;
    width:50%;padding:5px 0;vertical-align:top}
  .table-admin tbody td[data-label]::before{
    content:attr(data-label);
    font-family:var(--cp-font-mono);font-size:9.5px;font-weight:500;
    text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted);
    flex:0 0 auto}
  .table-admin tbody td[data-label="Updated"]{width:100%}
  .table-admin td.cp-cell-actions{
    display:flex;gap:.5rem;margin-top:10px;padding-top:10px;
    border-top:1px solid var(--cp-line)}
  .table-admin td.cp-cell-actions .btn{flex:1 1 auto;min-height:38px}
  .table-admin .tri-time{font-size:11px}
}

/* long ids never force a sideways page scroll */
.table-responsive{overflow-x:auto}
main{overflow-x:hidden}

/* ── utilization meters: brand semantics, not Bootstrap greens ─────────── */
.progress{background:var(--cp-surface-2);border-radius:999px;height:.4rem}
.progress-bar{border-radius:999px}
.progress-bar.bg-success{background-color:var(--cp-positive)!important}
.progress-bar.bg-warning{background-color:var(--cp-warning)!important}
.progress-bar.bg-danger{background-color:var(--cp-negative)!important}
.progress-bar.bg-secondary{background-color:var(--cp-neutral)!important}
/* striped export progress: copper, it is the action in flight */
.progress-bar-striped{background-color:var(--cp-copper)!important}

/* ═══ live wall — dense enough for 400+ channels ═══════════════════════════ */

/* state summary strip: counters that double as filters */
.cp-states{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:.5rem}
.cp-state{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:10px 12px;border-radius:12px;text-align:left;
  background:var(--cp-surface);border:1px solid var(--cp-line);
  border-left:3px solid var(--cp-neutral);cursor:pointer}
.cp-state__n{font-family:var(--cp-font-mono);font-size:22px;font-weight:500;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--cp-text)}
.cp-state__l{font-family:var(--cp-font-mono);font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted)}
.cp-state.empty .cp-state__n{color:var(--cp-text-muted)}
.cp-state.active{background:var(--cp-surface-2);border-color:var(--cp-line-strong)}
.cp-state--crit{border-left-color:var(--cp-negative)}
.cp-state--warn{border-left-color:var(--cp-warning)}
.cp-state--info{border-left-color:var(--cp-info)}
.cp-state--ok{border-left-color:var(--cp-positive)}
.cp-state--off{border-left-color:var(--cp-neutral)}
.cp-state:focus-visible{outline:2px solid var(--cp-copper);outline-offset:2px}

/* the wall itself: fixed-width tiles that reflow; 400 fit in a few screens */
.cp-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.5rem}
.cp-ch{
  display:block;padding:9px 11px;border-radius:10px;text-decoration:none;
  background:var(--cp-surface);border:1px solid var(--cp-line);
  border-left:3px solid var(--cp-neutral);color:var(--cp-text);
  transition:border-color .12s ease,background .12s ease}
.cp-ch:hover{background:var(--cp-surface-2);border-color:var(--cp-line-strong)}
.cp-ch__top{display:flex;align-items:baseline;gap:6px;margin-bottom:3px}
.cp-ch__state{font-family:var(--cp-font-mono);font-size:9.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em}
.cp-ch__age{margin-left:auto;font-family:var(--cp-font-mono);font-size:10px;
  font-variant-numeric:tabular-nums;color:var(--cp-text-muted)}
.cp-ch__name{font-size:14px;font-weight:500;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-ch__meta{display:flex;gap:8px;margin-top:2px;
  font-family:var(--cp-font-mono);font-size:10px;color:var(--cp-text-muted);
  overflow:hidden;white-space:nowrap}
.cp-ch__meta > span{overflow:hidden;text-overflow:ellipsis}
.cp-ch--crit{border-left-color:var(--cp-negative)}
.cp-ch--crit .cp-ch__state{color:var(--cp-sev-crit-fg)}
.cp-ch--warn{border-left-color:var(--cp-warning)}
.cp-ch--warn .cp-ch__state{color:var(--cp-sev-warn-fg)}
.cp-ch--info{border-left-color:var(--cp-info)}
.cp-ch--info .cp-ch__state{color:var(--cp-sev-info-fg)}
.cp-ch--ok{border-left-color:var(--cp-positive)}
.cp-ch--ok .cp-ch__state{color:var(--cp-sev-ok-fg)}
.cp-ch--off{border-left-color:var(--cp-line-strong);opacity:.62}
.cp-ch--off .cp-ch__state{color:var(--cp-text-muted)}
@media (max-width:575.98px){
  .cp-wall{grid-template-columns:1fr 1fr;gap:.4rem}
  .cp-ch{padding:8px 9px}
  .cp-ch__name{font-size:13px}
  .cp-states{grid-template-columns:repeat(3,1fr)}
}

/* ── bulk selection on the channels table ─────────────────────────────── */
.cp-cell-check{width:34px;padding-right:0!important}
.cp-cell-check .form-check-input{margin:0;cursor:pointer}

.cp-bulkbar{
  position:fixed;left:0;right:0;bottom:0;z-index:1035;
  background:var(--cp-surface);border-top:1px solid var(--cp-line-strong);
  box-shadow:0 -6px 24px rgba(0,0,0,.28);
  padding:.6rem .25rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom))}
.cp-bulkbar__count{
  font-family:var(--cp-font-mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-copper)}
/* keep the last rows reachable while the bar is up */
body.cp-has-bulkbar main{padding-bottom:4.5rem!important}
@media (max-width:767.98px){
  /* sits above the tab bar, which stays reachable */
  .cp-bulkbar{bottom:calc(62px + env(safe-area-inset-bottom));padding-bottom:.6rem}
  body.cp-has-bulkbar main{padding-bottom:7rem!important}
  .cp-bulkbar .container-fluid{gap:.4rem!important}
  .cp-bulkbar__count{width:100%}
  /* card mode: the checkbox floats to the card's top-right corner */
  .table-admin td.cp-cell-check{
    position:absolute;top:10px;right:12px;width:auto;padding:0!important}
  .table-admin tbody tr{position:relative}
  .table-admin td.cp-cell-title{padding-right:34px}
}

/* ── channel typeahead (replaces <select> past ~50 channels) ───────────── */
.cp-picker{position:relative}
.cp-picker__menu{
  position:absolute;z-index:1050;left:0;right:0;top:calc(100% + 4px);
  max-height:min(60vh,340px);overflow-y:auto;
  background:var(--cp-surface);border:1px solid var(--cp-line-strong);
  border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.32);padding:4px}
.cp-picker__opt{
  display:flex;flex-direction:column;gap:1px;padding:7px 10px;
  border-radius:8px;cursor:pointer}
.cp-picker__opt.active,.cp-picker__opt:hover{background:var(--cp-surface-2)}
.cp-picker__opt.selected{box-shadow:inset 2px 0 0 var(--cp-copper)}
.cp-picker__name{font-size:14px;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-picker__meta{display:flex;gap:8px;font-family:var(--cp-font-mono);
  font-size:10px;color:var(--cp-text-muted);overflow:hidden;white-space:nowrap}
.cp-picker__off{color:var(--cp-warning)}
.cp-picker__empty,.cp-picker__more{
  padding:8px 10px;font-family:var(--cp-font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--cp-text-muted)}
@media (hover:none),(pointer:coarse){ .cp-picker__opt{padding:11px 10px} }
/* Bootstrap .modal-content clips the absolute picker menu. */
#requestModal .modal-content{overflow:visible}

/* ── schedules working set ─────────────────────────────────────────────── */
.cp-sched-list{max-height:min(52vh,420px);overflow-y:auto;
  display:flex;flex-direction:column;gap:3px}
.cp-sched-item{
  display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
  padding:7px 10px;border:1px solid transparent;border-radius:9px;
  background:transparent;color:var(--cp-text);font-size:14px}
.cp-sched-item:hover{background:var(--cp-surface-2)}
.cp-sched-item.active{background:var(--cp-copper-muted);
  border-color:var(--cp-copper);font-weight:500}
.cp-sched-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-sched-item__n{margin-left:auto;font-family:var(--cp-font-mono);font-size:10px;
  color:var(--cp-text-muted);white-space:nowrap}
.cp-sched-item__off{font-family:var(--cp-font-mono);font-size:9.5px;
  text-transform:uppercase;color:var(--cp-warning)}


/* ═══ operator guide — answer-first cards, not a manual ═══════════════════ */

/* task launcher: "what do you need right now?" */
.help-tasks{display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.help-task{
  display:flex;flex-direction:column;gap:2px;padding:14px 16px;
  background:var(--cp-surface);border:1px solid var(--cp-line);
  border-radius:14px;text-decoration:none;color:var(--cp-text);
  transition:transform .12s ease,border-color .12s ease,background .12s ease}
.help-task:hover{transform:translateY(-2px);border-color:var(--cp-copper);
  background:var(--cp-surface-2)}
.help-task > i{font-size:18px;color:var(--cp-copper);margin-bottom:4px}
.help-task__t{font-size:15px;font-weight:500;line-height:1.2}
.help-task__s{font-family:var(--cp-font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--cp-text-muted)}
.help-task--go > i{color:var(--cp-positive)}
.help-task--fix > i{color:var(--cp-negative)}

/* jump bar */
.help-jump{display:flex;flex-wrap:wrap;gap:5px}
.help-jump__link{padding:4px 11px;border-radius:999px;text-decoration:none;
  border:1px solid var(--cp-line);color:var(--cp-text-2);
  font-family:var(--cp-font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.05em}
.help-jump__link:hover{background:var(--cp-surface-2);color:var(--cp-text)}
.help-jump__link.active{border-color:var(--cp-copper);color:var(--cp-copper);
  background:var(--cp-copper-muted)}

/* the cards */
.help-card{background:var(--cp-surface);border:1px solid var(--cp-line);
  border-radius:14px;margin-bottom:.75rem;overflow:hidden;scroll-margin-top:1rem}
.help-card__head{display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 16px;background:transparent;border:0;text-align:left;
  color:var(--cp-text);cursor:pointer}
.help-card__head:hover{background:var(--cp-surface-2)}
.help-card__icon{color:var(--cp-copper);font-size:15px;width:20px;text-align:center}
.help-card__title{font-size:16px;font-weight:500}
.help-card__badge{font-family:var(--cp-font-mono);font-size:9px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted);
  border:1px solid var(--cp-line);border-radius:999px;padding:3px 8px}
.help-card__chev{margin-left:auto;color:var(--cp-text-muted);font-size:12px;
  transition:transform .15s ease}
.help-card.collapsed .help-card__chev{transform:rotate(180deg)}
.help-card.collapsed .help-card__body{display:none}
.help-card__body{padding:2px 16px 18px;max-width:60rem}
.help-card__body p,.help-card__body li{font-size:14px;line-height:1.6;
  color:var(--cp-text-2)}
.help-card__body strong{color:var(--cp-text)}
.help-card__body code{font-size:12.5px;background:var(--cp-surface-2);
  padding:1px 5px;border-radius:5px;color:var(--cp-text)}
.help-lede{font-size:15px!important;color:var(--cp-text)!important}
.help-h4{font-size:13px;font-family:var(--cp-font-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted);
  margin:1.2rem 0 .5rem}
.help-tight{margin-bottom:.5rem}
.help-tight li{margin-bottom:.2rem}

/* yours / theirs split */
.help-split{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:.75rem 0}
.help-col{border:1px solid var(--cp-line);border-radius:11px;padding:12px 14px}
.help-col h4{font-size:12px;font-family:var(--cp-font-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5rem}
.help-col ul{margin:0;padding-left:1.1rem}
.help-col--yes{border-left:3px solid var(--cp-positive)}
.help-col--yes h4{color:var(--cp-positive)}
.help-col--no{border-left:3px solid var(--cp-info)}
.help-col--no h4{color:var(--cp-info)}

/* routine rows */
.help-routine{display:flex;gap:14px;padding:11px 0;
  border-top:1px solid var(--cp-line)}
.help-routine:first-of-type{border-top:0}
.help-routine__when{flex:0 0 96px;display:flex;flex-direction:column;
  font-size:13px;font-weight:500;color:var(--cp-text)}
.help-routine__when span{font-family:var(--cp-font-mono);font-size:10px;
  color:var(--cp-copper);text-transform:uppercase;letter-spacing:.05em}
.help-routine__do{margin:0;padding-left:1.1rem}
.help-routine__do li{margin-bottom:.25rem}

/* live-state grid */
.help-states-grid{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin:.5rem 0}
.help-state{border:1px solid var(--cp-line);border-left-width:3px;
  border-radius:11px;padding:11px 13px}
.help-state p{margin:.4rem 0 0;font-size:13px}
.help-state--ok{border-left-color:var(--cp-positive)}
.help-state--warn{border-left-color:var(--cp-warning)}
.help-state--crit{border-left-color:var(--cp-negative)}
.help-state--info{border-left-color:var(--cp-info)}
.help-state--off{border-left-color:var(--cp-line-strong)}
.help-do{font-family:var(--cp-font-mono);font-size:11px!important;
  color:var(--cp-text)!important;letter-spacing:.02em}

/* numbered steps with real numbers */
.help-numbered{list-style:none;counter-reset:hstep;padding-left:0;margin:.5rem 0 0}
.help-numbered > li{counter-increment:hstep;position:relative;
  padding-left:34px;margin-bottom:.85rem}
.help-numbered > li::before{content:counter(hstep);position:absolute;left:0;top:0;
  width:23px;height:23px;border-radius:50%;
  background:var(--cp-copper-muted);color:var(--cp-copper);
  font-family:var(--cp-font-mono);font-size:11px;font-weight:500;
  display:flex;align-items:center;justify-content:center}
.help-numbered--tight > li{margin-bottom:.4rem}
.help-verdict{display:flex;flex-direction:column;gap:4px;margin-top:.4rem}
.help-verdict span{font-size:12.5px;padding:5px 10px;border-radius:8px;
  border-left:2px solid var(--cp-line)}
.help-verdict--ok{background:var(--cp-sev-ok-bg);color:var(--cp-sev-ok-fg);
  border-left-color:var(--cp-positive)!important}
.help-verdict--bad{background:var(--cp-sev-crit-bg);color:var(--cp-sev-crit-fg);
  border-left-color:var(--cp-negative)!important}
.help-warn-inline{color:var(--cp-warning);font-size:13px}

/* lookup tables */
.help-table{font-size:13.5px}
.help-table th{font-family:var(--cp-font-mono);font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted)}
.help-table td{vertical-align:top;color:var(--cp-text-2)}
.help-table td:first-child{white-space:nowrap;color:var(--cp-text)}
.help-tag{display:inline-block;margin-left:6px;font-family:var(--cp-font-mono);
  font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 6px;border-radius:999px;
  background:var(--cp-surface-2);color:var(--cp-text-muted)}
.help-tag--good{background:var(--cp-sev-ok-bg);color:var(--cp-sev-ok-fg)}
.help-tag--bad{background:var(--cp-sev-warn-bg);color:var(--cp-sev-warn-fg)}
.help-esc{font-family:var(--cp-font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--cp-negative)}

/* callouts */
.help-note,.help-warn{border-radius:11px;padding:10px 14px;font-size:13.5px;
  border-left:3px solid var(--cp-info);background:var(--cp-surface-2);
  margin-top:1rem}
.help-warn{border-left-color:var(--cp-negative);background:var(--cp-sev-crit-bg);
  color:var(--cp-text)}
.help-example{background:var(--cp-surface-2);padding:3px 9px;border-radius:7px;
  display:inline-block;font-size:13px}

/* keyboard + glossary */
.help-keys-grid{display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:.5rem 0}
.help-keys-grid span{font-size:13px;color:var(--cp-text-2)}
.help-keys-grid kbd{margin-right:3px}
.help-gloss{display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.help-gloss dt{font-size:13.5px;font-weight:500;color:var(--cp-text)}
.help-gloss dd{margin:.1rem 0 0;font-size:13px;line-height:1.5;
  color:var(--cp-text-2)}

/* state chips reuse the Live wall's colour language */
.help-chip{display:inline-block;font-family:var(--cp-font-mono);font-size:10px;
  font-weight:500;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 8px;border-radius:999px}
.help-chip--ok{background:var(--cp-sev-ok-bg);color:var(--cp-sev-ok-fg)}
.help-chip--warn{background:var(--cp-sev-warn-bg);color:var(--cp-sev-warn-fg)}
.help-chip--crit{background:var(--cp-sev-crit-bg);color:var(--cp-sev-crit-fg)}
.help-chip--info{background:var(--cp-sev-info-bg);color:var(--cp-sev-info-fg)}
.help-chip--off{background:var(--cp-surface-2);color:var(--cp-text-muted)}
.help-footer{font-size:12.5px;color:var(--cp-text-muted);
  border-top:1px solid var(--cp-line);padding-top:1rem;margin-top:1.5rem}

@media (max-width:575.98px){
  .help-routine{flex-direction:column;gap:4px}
  .help-routine__when{flex-direction:row;align-items:baseline;gap:8px}
  .help-card__body{padding-left:13px;padding-right:13px}
}

/* ── Live: legend ─────────────────────────────────────────────────────── */
.cp-legend-toggle{font-family:var(--cp-font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted);
  text-decoration:none}
.cp-legend-toggle:hover{color:var(--cp-copper)}
.cp-legend{display:grid;gap:.5rem;margin:.6rem 0 .5rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cp-legend__item{border:1px solid var(--cp-line);border-left-width:3px;
  border-radius:10px;padding:9px 12px;background:var(--cp-surface)}
.cp-legend__item p{margin:.35rem 0 0;font-size:12.5px;color:var(--cp-text-2)}
.cp-legend__do{font-family:var(--cp-font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--cp-text)!important}
.cp-legend__item--ok{border-left-color:var(--cp-positive)}
.cp-legend__item--warn{border-left-color:var(--cp-warning)}
.cp-legend__item--crit{border-left-color:var(--cp-negative)}
.cp-legend__item--info{border-left-color:var(--cp-info)}
.cp-legend__item--off{border-left-color:var(--cp-line-strong)}

/* tiles are buttons now (they open the diagnosis drawer) */
.cp-ch{width:100%;text-align:left;font:inherit;cursor:pointer}

/* ── diagnosis drawer ─────────────────────────────────────────────────── */
.cp-diag{width:min(440px,100vw);background:var(--cp-bg);
  border-left:1px solid var(--cp-line)}
.cp-diag .offcanvas-header{border-bottom:1px solid var(--cp-line)}
.cp-diag__verdict{border:1px solid var(--cp-line);border-left-width:3px;
  border-radius:12px;padding:12px 14px;background:var(--cp-surface)}
.cp-diag__verdict--crit{border-left-color:var(--cp-negative)}
.cp-diag__verdict--warn{border-left-color:var(--cp-warning)}
.cp-diag__verdict--ok{border-left-color:var(--cp-positive)}
.cp-diag__verdict--off{border-left-color:var(--cp-line-strong)}
.cp-diag__stage{font-family:var(--cp-font-mono);font-size:9.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.07em;color:var(--cp-text-muted)}
.cp-diag__verdict h6{font-size:15px;font-weight:500;margin:.2rem 0 .35rem;
  color:var(--cp-text)}
.cp-diag__verdict p{font-size:13px;line-height:1.55;color:var(--cp-text-2);margin:0}
.cp-diag__actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.cp-diag__esc{font-family:var(--cp-font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--cp-negative);
  align-self:center}
.cp-diag__h{font-family:var(--cp-font-mono);font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted);
  margin:1.25rem 0 .5rem}
.cp-diag__stages{display:flex;flex-direction:column;gap:1px}
.cp-diag__row{display:flex;align-items:baseline;gap:8px;padding:7px 10px;
  border-radius:8px;background:var(--cp-surface);font-size:13px}
.cp-diag__row i{font-size:12px}
.cp-diag__row--ok i{color:var(--cp-positive)}
.cp-diag__row--warn i{color:var(--cp-warning)}
.cp-diag__row--fail i{color:var(--cp-negative)}
.cp-diag__row--off i{color:var(--cp-text-muted)}
.cp-diag__name{font-weight:500;color:var(--cp-text);flex:0 0 88px}
.cp-diag__detail{color:var(--cp-text-2);font-size:12.5px}
.cp-diag__facts{display:grid;gap:.3rem;grid-template-columns:1fr 1fr}
.cp-diag__facts dt{font-family:var(--cp-font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--cp-text-muted)}
.cp-diag__facts dd{margin:0;font-family:var(--cp-font-mono);font-size:14px;
  font-variant-numeric:tabular-nums;color:var(--cp-text)}
.cp-diag__err,.cp-diag__ev{background:var(--cp-surface);border-radius:8px;
  padding:8px 10px;margin-bottom:.35rem;font-size:12px;color:var(--cp-text-2)}
.cp-diag__err{border-left:2px solid var(--cp-negative)}
.cp-diag__err .mono,.cp-diag__ev .mono{font-size:11px;word-break:break-word}
.cp-diag__err-at{font-family:var(--cp-font-mono);font-size:10px;
  color:var(--cp-text-muted)}
.cp-diag__ev{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.cp-diag__n{font-family:var(--cp-font-mono);font-size:10px;color:var(--cp-text-muted)}
.cp-diag__test{border-radius:10px;padding:10px 13px;margin-top:.6rem;font-size:12.5px}
.cp-diag__test--ok{background:var(--cp-sev-ok-bg);color:var(--cp-sev-ok-fg)}
.cp-diag__test--bad{background:var(--cp-sev-crit-bg);color:var(--cp-sev-crit-fg)}

/* ── Media: transcription classification (QA the cost) ────────────────── */
.seg-class{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--cp-font-mono);font-size:9.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;white-space:nowrap}
.seg-class i{font-size:10px}
/* billed = we paid OpenAI for this clip; copper, because it is the number
   the team is trying to shrink */
.seg-class--billed{background:var(--cp-copper-muted);color:var(--cp-copper)}
.seg-class--free{background:var(--cp-sev-ok-bg);color:var(--cp-sev-ok-fg)}
.seg-class--music{background:var(--cp-sev-info-bg);color:var(--cp-sev-info-fg)}
.seg-class--quiet{background:var(--cp-surface-2);color:var(--cp-text-muted)}
.seg-class--sched{background:var(--cp-sev-warn-bg);color:var(--cp-sev-warn-fg)}
.seg-class--err{background:var(--cp-sev-crit-bg);color:var(--cp-sev-crit-fg)}

.seg-classes{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.seg-cost{display:flex;align-items:baseline;gap:6px;padding:6px 12px;
  border:1px solid var(--cp-line);border-left:3px solid var(--cp-copper);
  border-radius:10px;background:var(--cp-surface);margin-right:.3rem}
.seg-cost strong{font-family:var(--cp-font-mono);font-size:15px;
  font-variant-numeric:tabular-nums;color:var(--cp-copper)}
.seg-cost span{font-size:12px;color:var(--cp-text-2)}
.seg-cost__saved{font-family:var(--cp-font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--cp-positive)!important;margin-left:4px}

.seg-chip{display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--cp-line);background:var(--cp-surface);
  font-family:var(--cp-font-mono);font-size:9.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.04em;color:var(--cp-text-2)}
.seg-chip:hover{border-color:var(--cp-line-strong)}
.seg-chip b{font-size:11px;font-variant-numeric:tabular-nums;color:var(--cp-text)}
.seg-chip.active{border-color:var(--cp-copper);background:var(--cp-copper-muted);
  color:var(--cp-text)}
.seg-chip--billed i{color:var(--cp-copper)}
.seg-chip--free i{color:var(--cp-positive)}
.seg-chip--music i{color:var(--cp-info)}
.seg-chip--sched i{color:var(--cp-warning)}
.seg-chip--err i{color:var(--cp-negative)}
.seg-chip--quiet i{color:var(--cp-text-muted)}

.seg-mixline{font-family:var(--cp-font-mono);font-size:10px;
  color:var(--cp-text-muted);margin-top:4px;line-height:1.3}
.seg-mixline--empty{opacity:.7;font-style:italic}
.seg-mixblock{display:flex;flex-direction:column;gap:4px;
  padding:6px 12px;border:1px solid var(--cp-line);border-radius:10px;
  background:var(--cp-surface);min-width:12rem}
.seg-mix{display:flex;height:8px;border-radius:4px;overflow:hidden;
  background:var(--cp-surface-2);margin-top:6px}
.seg-mix__speech{background:var(--cp-positive)}
.seg-mix__voice{background:var(--cp-copper)}
.seg-mix__music{background:var(--cp-info)}
.seg-mixcap{font-family:var(--cp-font-mono);font-size:10px;
  color:var(--cp-text-2);letter-spacing:.02em}

/* ── diagnosis: candidate feeds (repair in place) ─────────────────────── */
.cp-feeds{margin-top:.6rem}
.cp-feeds__hint,.cp-feeds__none{font-size:12.5px;color:var(--cp-text-2);
  margin:0 0 .5rem}
.cp-feed{background:var(--cp-surface);border:1px solid var(--cp-line);
  border-radius:10px;padding:9px 11px;margin-bottom:.4rem}
.cp-feed__head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cp-feed__origin{font-family:var(--cp-font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--cp-text-muted)}
.cp-feed__url{font-size:11px;color:var(--cp-text-2);word-break:break-all;
  margin:.3rem 0}
.cp-feed__acts{display:flex;gap:.35rem}
.cp-feed__verdict{margin-top:.45rem;padding:6px 9px;border-radius:7px;
  font-size:12px}
.cp-feed__verdict--ok{background:var(--cp-sev-ok-bg);color:var(--cp-sev-ok-fg)}
.cp-feed__verdict--bad{background:var(--cp-sev-crit-bg);color:var(--cp-sev-crit-fg)}

/* Coverage leads the page: recorded vs searchable, or expected vs received. */
.cp-cov{background:var(--cp-surface);border:1px solid var(--cp-line);
  border-radius:12px;padding:12px 14px}
.cp-cov__head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.cp-cov__pct{font-family:var(--cp-font-mono);font-size:34px;font-weight:500;
  line-height:1}
.cp-cov__pct--ok{color:var(--cp-positive)}
.cp-cov__pct--warn{color:var(--cp-warning)}
.cp-cov__pct--crit{color:var(--cp-negative)}
.cp-cov__cap{font-family:var(--cp-font-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-muted)}
.cp-cov__text{flex:1 1 18rem;font-size:13.5px}
.cp-cov__bar{height:8px;margin-top:.7rem;background:var(--cp-surface-2)}

/* Shared bar segments, so the coverage bar and every batch bar mean the
   same thing by colour. */
.cp-bar--done{background:var(--cp-positive)}
.cp-bar--inflight{background:var(--cp-info)}
.cp-bar--failed{background:var(--cp-negative)}
.cp-bar--queued{background:var(--cp-warning)}
.cp-bar--cancelled{background:var(--cp-line-strong)}

.cp-pipe{display:flex;gap:.7rem;align-items:flex-start;border-radius:10px;
  padding:10px 12px;border:1px solid var(--cp-line)}
.cp-pipe > i{font-size:18px;margin-top:2px}
.cp-pipe__title{font-weight:500;margin-bottom:2px}
.cp-pipe--ok{background:var(--cp-surface)}
.cp-pipe--ok > i{color:var(--cp-positive)}
/* Blocked is styled as loudly as a failure, never as "slow": an operator who
   misreads a stopped pipeline will requeue work and deepen the backlog. */
.cp-pipe--blocked{background:var(--cp-sev-crit-bg);color:var(--cp-sev-crit-fg);
  border-color:var(--cp-negative)}
.cp-pipe--blocked > i{color:var(--cp-negative)}

.cp-batch{background:var(--cp-surface);border:1px solid var(--cp-line);
  border-radius:12px;padding:10px 12px}
/* Your own batch is marked, because on a shared queue "which of these is
   mine" is the first question every operator asks. */
.cp-batch--mine{border-left:3px solid var(--cp-copper)}
.cp-batch__head{display:flex;align-items:flex-start;gap:.6rem;flex-wrap:wrap}
.cp-batch__toggle{background:none;border:0;color:var(--cp-text-muted);
  padding:2px 4px;line-height:1}
.cp-batch__title{flex:1 1 16rem;min-width:0}
.cp-batch__label{font-size:14px;font-weight:500}
.cp-batch__meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;
  font-family:var(--cp-font-mono);font-size:10.5px;color:var(--cp-text-muted)}
.cp-batch__nums{text-align:right;min-width:8rem}
.cp-batch__count{font-family:var(--cp-font-mono);font-size:16px}
.cp-batch__cost{font-family:var(--cp-font-mono);font-size:10.5px;
  color:var(--cp-text-muted)}
.cp-batch__actions{display:flex;gap:.35rem;flex-wrap:wrap}
.cp-batch__bar{height:7px;margin-top:.6rem;background:var(--cp-surface-2)}
.cp-batch__legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:.4rem;
  font-family:var(--cp-font-mono);font-size:10px;color:var(--cp-text-muted)}
.cp-batch__note{margin-top:.5rem;font-size:12.5px;color:var(--cp-text-2);
  background:var(--cp-surface-2);border-radius:7px;padding:6px 9px}
.cp-batch__items{margin-top:.6rem;border-top:1px solid var(--cp-line);
  padding-top:.6rem}

.cp-sub__row{display:flex;gap:.6rem;align-items:flex-start;padding:7px 0;
  border-bottom:1px solid var(--cp-line)}
.cp-sub__row > i{margin-top:3px;color:var(--cp-text-muted)}
.cp-sub__cost{background:var(--cp-surface-2);border-radius:10px;padding:10px 12px}
.cp-sub__price{font-family:var(--cp-font-mono);font-size:26px;font-weight:500;
  color:var(--cp-copper)}

/* Phones: the batch header is four blocks (toggle, title, numbers, actions).
   At 375px they wrap into a ragged stack — pin the numbers beside the title
   and give the actions their own full-width row so buttons stay tappable. */
@media (max-width: 575.98px){
  .cp-batch__nums{text-align:left;min-width:0;flex:1 1 auto;
    display:flex;align-items:baseline;gap:.5rem}
  .cp-batch__actions{flex:1 1 100%}
  .cp-batch__actions .btn{flex:1 1 auto}
  .cp-batch__items{overflow-x:auto}
  .cp-cov__pct{font-size:28px}
}

/* ── phone "More" sheet ───────────────────────────────────────────────── */
/* Five tabs plus More instead of eight crammed ones. The overflow lives in a
   bottom sheet with full labels and 48px targets — the strip is for the
   destinations an operator hits on every shift, not for completeness. */
/* The sheet sits ABOVE the tab bar (offcanvas z-index beats it), so reserve
   only the home-indicator inset — padding for a bar it covers is dead space. */
.cp-more{height:auto;max-height:80vh;
  border-top-left-radius:16px;border-top-right-radius:16px;
  background:var(--cp-surface);border-top:1px solid var(--cp-line);
  padding-bottom:env(safe-area-inset-bottom)}
.cp-more__item{
  display:flex;align-items:center;gap:.7rem;
  min-height:48px;padding:10px 12px;border-radius:10px;
  color:var(--cp-text);text-decoration:none;font-size:15px}
.cp-more__item > i:first-child{width:20px;text-align:center;
  color:var(--cp-text-muted)}
.cp-more__item:active,.cp-more__item:hover{background:var(--cp-surface-2)}
.cp-more__item.active{background:var(--cp-copper-muted);
  box-shadow:inset 2px 0 0 var(--cp-copper)}
.cp-more__item.active > i:first-child{color:var(--cp-copper)}
/* The trigger is a <button> in a bar of <a>s — keep it visually identical. */
.cp-tabbar button.cp-tab{background:none;border:0;border-top:2px solid transparent}

/* Very narrow phones (iPhone SE 1st gen and similar, 320px). The top bar's
   brand + env badge + controls measured 327px against a 320px viewport — a
   7px sideways scroll on every page. Trim the gutters rather than drop any
   control; all three are needed (environment especially, since acting on the
   wrong one is the expensive mistake). */
@media (max-width:359.98px){
  .cp-topbar .container-fluid{padding-left:.5rem;padding-right:.5rem;
    gap:.25rem!important}
  .cp-topbar .navbar-brand img{height:24px}
  /* 53px tabs at 320px: 8 chars need ~39px at 8px, still unclipped. */
  .cp-tab{font-size:8px;letter-spacing:.01em}
}

/* Bulk bar: a hairline between the free actions (enable/disable/assign) and
   the ones that start or stop OpenAI spend. */
.cp-bulkbar__sep{width:1px;align-self:stretch;background:var(--cp-line-strong);
  margin:0 .25rem}

/* -- Coverage: how much of the day's airtime we actually hold ---------------
   Every colour here is an existing severity token, so these follow the theme
   automatically and never need a dark-mode override of their own. */

/* Fleet KPI in the Live header. */
.cp-kpi{display:inline-flex;align-items:baseline;gap:.4rem;padding:2px 10px;
  border-radius:999px;border:1px solid var(--cp-line);background:var(--cp-surface-2);
  line-height:1.2}
.cp-kpi:empty{display:none}
.cp-kpi__n{font-family:var(--cp-font-mono);font-size:15px;font-weight:500}
.cp-kpi__label{font-size:11.5px;color:var(--cp-text-muted)}
.cp-kpi__sub{font-size:11px;color:var(--cp-text-muted);
  padding-left:.4rem;border-left:1px solid var(--cp-line)}
.cp-kpi--ok{border-color:var(--cp-positive)}
.cp-kpi--ok .cp-kpi__n{color:var(--cp-sev-ok-fg)}
.cp-kpi--warn{border-color:var(--cp-warning);background:var(--cp-sev-warn-bg)}
.cp-kpi--warn .cp-kpi__n{color:var(--cp-sev-warn-fg)}
.cp-kpi--crit{border-color:var(--cp-negative);background:var(--cp-sev-crit-bg)}
.cp-kpi--crit .cp-kpi__n{color:var(--cp-sev-crit-fg)}

/* Per-tile coverage chip on the Live wall. Healthy values stay muted so the
   wall still reads problem-first when sorted by state. */
.cp-ch__cov{flex:0 0 auto;font-weight:500}
.cp-ch__cov--ok{color:var(--cp-text-muted)}
.cp-ch__cov--warn{color:var(--cp-sev-warn-fg)}
.cp-ch__cov--crit{color:var(--cp-sev-crit-fg)}

/* The 24h timeline strip in the diagnosis drawer. One cell per recording
   slot; the SVG is stretched with preserveAspectRatio="none", so slot count
   never changes the rendered height. */
.cp-tl{display:block;width:100%;height:34px;margin-top:.5rem;
  border:1px solid var(--cp-line);border-radius:6px;background:var(--cp-surface-2)}
.cp-tl__ok{fill:var(--cp-positive)}
.cp-tl__gap{fill:var(--cp-negative)}
/* vector-effect keeps hour ticks hairline-thin despite the non-uniform scale */
.cp-tl__tick{stroke:var(--cp-surface);stroke-width:1;opacity:.35;
  vector-effect:non-scaling-stroke}
.cp-tl__head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.cp-tl__pct{font-family:var(--cp-font-mono);font-size:26px;font-weight:500;line-height:1}
.cp-tl__pct--ok{color:var(--cp-sev-ok-fg)}
.cp-tl__pct--warn{color:var(--cp-sev-warn-fg)}
.cp-tl__pct--crit{color:var(--cp-sev-crit-fg)}
.cp-tl__cap{font-size:12px;color:var(--cp-text-muted)}
.cp-tl__axis{display:flex;justify-content:space-between;margin-top:3px;
  font-family:var(--cp-font-mono);font-size:10px;color:var(--cp-text-muted)}
.cp-tl__gaps{margin-top:.6rem;border-top:1px solid var(--cp-line)}
.cp-tl__gaprow{display:flex;justify-content:space-between;gap:1rem;
  padding:3px 0;font-size:12px;border-bottom:1px solid var(--cp-line)}
.cp-tl__gapwhen{color:var(--cp-text)}
.cp-tl__gapdur{color:var(--cp-sev-crit-fg);white-space:nowrap}
.cp-tl__gapmore{padding-top:4px;font-size:11.5px;color:var(--cp-text-muted)}

/* -- Daily report ----------------------------------------------------------
   Screen renders sheets on a muted ground so it reads as the document it
   becomes; print drops the chrome and paginates one sheet per page. Every
   colour is an existing token, so both themes work with no overrides. */

.cp-report-loading{display:flex;align-items:center;padding:20px 0;
  color:var(--cp-text-muted);font-size:14px}
.cp-sheets{display:flex;flex-direction:column;gap:26px;align-items:center}
.cp-sheet{width:100%;max-width:880px;background:var(--cp-surface);
  border:1px solid var(--cp-line);border-radius:3px;padding:28px 32px 22px;
  box-shadow:var(--cp-card-shadow)}
.cp-mast{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-bottom:9px;
  border-bottom:2px solid var(--cp-copper)}
.cp-brand{font-family:var(--cp-font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cp-copper)}
.cp-mast h2{font-size:19px;margin:3px 0 0}
.cp-mast__r{text-align:right;font-family:var(--cp-font-mono);font-size:11px;
  color:var(--cp-text-muted);line-height:1.7}
.cp-env{display:inline-block;padding:1px 7px;border-radius:var(--cp-radius-pill);
  border:1px solid var(--cp-line-strong);color:var(--cp-text-2);
  font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.cp-pagetag{margin-top:14px;font-family:var(--cp-font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-footnote);
  display:flex;align-items:center;gap:10px}
.cp-pagetag::after{content:"";flex:1;height:1px;background:var(--cp-line)}

.cp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--cp-line);border:1px solid var(--cp-line);margin-top:13px;
  border-radius:var(--cp-radius-sm);overflow:hidden}
.cp-kpi{background:var(--cp-surface);padding:12px 14px 13px}
.cp-kpi__l{font-family:var(--cp-font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cp-text-muted)}
.cp-kpi__v{font-family:var(--cp-font-mono);font-weight:500;font-size:31px;
  line-height:1.08;margin-top:4px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.cp-kpi__v small{font-size:15px;color:var(--cp-text-muted)}
.cp-kpi__d{font-size:11.5px;color:var(--cp-text-muted);margin-top:3px}
.cp-ok{color:var(--cp-sev-ok-fg)} .cp-warn{color:var(--cp-sev-warn-fg)}
.cp-crit{color:var(--cp-sev-crit-fg)} .cp-off{color:var(--cp-text-muted)}
/* Dotted = an assumed target, not a contractual one. */
.cp-tgt{color:var(--cp-copper)}
.cp-tgt--ph{border-bottom:1px dotted var(--cp-copper)}

.cp-sec{margin-top:18px}
.cp-sec > h3{font-size:12.5px;font-weight:500;color:var(--cp-text);
  padding-bottom:5px;border-bottom:1px solid var(--cp-line);margin-bottom:9px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.cp-sec > h3 span{font-family:var(--cp-font-mono);font-size:10px;font-weight:400;
  color:var(--cp-text-footnote);letter-spacing:.06em;text-transform:uppercase}
.cp-lede{font-size:12.5px;color:var(--cp-text-2);margin:9px 0 0;max-width:70ch}

.cp-tblwrap{overflow-x:auto}
table.cp-rt,table.cp-apx{width:100%;border-collapse:collapse;font-size:12.5px}
table.cp-rt th,table.cp-apx th{font-family:var(--cp-font-mono);font-weight:400;
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cp-text-muted);text-align:left;padding:0 8px 5px 0;
  border-bottom:1px solid var(--cp-line);white-space:nowrap}
table.cp-rt td,table.cp-apx td{padding:5px 8px 5px 0;
  border-bottom:1px solid var(--cp-line);color:var(--cp-text-2)}
table.cp-rt td:first-child,table.cp-apx td:first-child{color:var(--cp-text)}
table.cp-rt .num,table.cp-apx .num{font-family:var(--cp-font-mono);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
table.cp-apx{font-size:10.5px}
table.cp-apx th{font-size:8.5px;padding-bottom:4px}
table.cp-apx td{padding:3px 8px 3px 0}
table.cp-apx tbody tr:nth-child(even){background:var(--cp-surface-2)}
.mono-s{font-family:var(--cp-font-mono);font-size:9.5px;color:var(--cp-text-muted)}
.cp-chip{display:inline-block;padding:1px 7px;border-radius:var(--cp-radius-pill);
  font-family:var(--cp-font-mono);font-size:10px;white-space:nowrap}
.cp-chip--crit{background:var(--cp-sev-crit-bg);color:var(--cp-sev-crit-fg)}
.cp-chip--warn{background:var(--cp-sev-warn-bg);color:var(--cp-sev-warn-fg)}
.cp-chip--ok{background:var(--cp-sev-ok-bg);color:var(--cp-sev-ok-fg)}

.cp-trend{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  margin-top:6px}
.cp-trend figure{margin:0}
.cp-tr{display:block;width:100%;height:104px;overflow:visible}
.cp-tr__grid{stroke:var(--cp-line);stroke-width:1}
.cp-tr__grid--mid{stroke-dasharray:2 4}
.cp-tr__lbl{fill:var(--cp-text-footnote);font-family:var(--cp-font-mono)}
.cp-tr__target{stroke:var(--cp-warning);stroke-width:1;stroke-dasharray:4 3;opacity:.85}
.cp-tr__tlbl{fill:var(--cp-warning);font-family:var(--cp-font-mono)}
.cp-tr__line{fill:none;stroke:var(--cp-positive);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round}
.cp-tr__dot{fill:var(--cp-positive)}
.cp-tr__g0{stop-color:var(--cp-positive);stop-opacity:.22}
.cp-tr__g1{stop-color:var(--cp-positive);stop-opacity:0}
.cp-trend figcaption{font-size:11.5px;color:var(--cp-text-muted);margin-top:5px}
.cp-readout{border-left:1px solid var(--cp-line);padding-left:16px;min-width:150px;
  display:flex;flex-direction:column;gap:9px}
.cp-readout div{font-size:11.5px;color:var(--cp-text-muted);line-height:1.35}
.cp-readout b{display:block;font-family:var(--cp-font-mono);font-weight:500;
  font-size:16px;color:var(--cp-text);font-variant-numeric:tabular-nums}

.cp-nodes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-node{border:1px solid var(--cp-line);border-radius:var(--cp-radius-sm);
  padding:11px 13px;background:var(--cp-surface-2)}
.cp-node__h{display:flex;justify-content:space-between;align-items:center;
  gap:8px;margin-bottom:8px;font-size:12px}
.cp-meter{margin-bottom:7px}
.cp-meter__t{display:flex;justify-content:space-between;gap:8px;font-size:11px;
  color:var(--cp-text-muted);margin-bottom:2px}
.cp-meter__t b{font-family:var(--cp-font-mono);font-weight:400;
  color:var(--cp-text-2);font-variant-numeric:tabular-nums}
.cp-bar{height:5px;background:var(--cp-line);border-radius:var(--cp-radius-pill);
  overflow:hidden;position:relative}
.cp-bar i{display:block;height:100%;border-radius:var(--cp-radius-pill)}
.cp-bar u{position:absolute;top:-2px;width:1.5px;height:9px;
  background:var(--cp-text-2);opacity:.55}
.cp-bar--ok{background:var(--cp-positive)}
.cp-bar--warn{background:var(--cp-warning)}
.cp-bar--crit{background:var(--cp-negative)}

.cp-gap{border:1px dashed var(--cp-line-strong);border-radius:var(--cp-radius-sm);
  padding:12px 14px}
.cp-gap__h{font-family:var(--cp-font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cp-copper);margin-bottom:5px}
.cp-gap p{margin:0;font-size:12.5px;color:var(--cp-text-muted);max-width:72ch}
.cp-foot{margin-top:18px;padding-top:8px;border-top:1px solid var(--cp-line);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--cp-font-mono);font-size:9.5px;color:var(--cp-text-footnote)}

@media (max-width:720px){
  .cp-kpis{grid-template-columns:1fr}
  .cp-nodes{grid-template-columns:1fr}
  .cp-trend{grid-template-columns:1fr}
  .cp-sheet{padding:20px 16px}
}

/* -- print: this is the PDF ------------------------------------------------ */
@media print{
  @page{size:A4;margin:12mm}
  /* Force the light palette: a dark-theme operator must not print white-on-
     black and empty a toner cartridge.
     The selector must MATCH the specificity of the theme rules it overrides.
     This was `:root,[data-bs-theme="dark"]` -- a selector LIST whose halves are
     0,1,0 each, losing to `:root[data-bs-theme="dark"]` at 0,2,0. Specificity
     beats source order, so dark mode printed dark and the comment above was
     simply untrue. Verified by rendering the print stylesheet on screen. */
  :root,
  :root[data-bs-theme="dark"],
  :root[data-bs-theme="light"]{
    --cp-bg:#FFF;--cp-surface:#FFF;--cp-surface-2:#FAFAF8;
    --cp-line:#E5E3DD;--cp-line-strong:#D6D3CB;
    --cp-text:#1C2229;--cp-text-2:#3A4048;--cp-text-muted:#5C666F;
    --cp-text-footnote:#8B959E;--cp-copper:#A45A2A;
    --cp-positive:#3E6B5B;--cp-warning:#8A6D26;--cp-negative:#AE4238;
    --cp-sev-crit-fg:#7A2E27;--cp-sev-warn-fg:#8A6D26;--cp-sev-ok-fg:#2E5445;
    --cp-sev-crit-bg:#F6EAE8;--cp-sev-warn-bg:#F5EFDA;--cp-sev-ok-bg:#E7EFEB;
    --cp-card-shadow:none;
  }
  body{background:#FFF!important}
  .d-print-none,#navbar,#reportLoading{display:none!important}
  main.container-fluid{padding:0!important}
  .cp-sheets{gap:0}
  .cp-sheet{max-width:none;width:auto;border:0;box-shadow:none;padding:0;
    break-after:page;page-break-after:always}
  .cp-sheet:last-child{break-after:auto;page-break-after:auto}
  /* Never split a row, a node card or a section heading across a page. */
  table.cp-rt tr,table.cp-apx tr,.cp-node,.cp-kpi{break-inside:avoid;
    page-break-inside:avoid}
  .cp-sec > h3{break-after:avoid;page-break-after:avoid}
  thead{display:table-header-group}   /* repeat headers on every printed page */
  .cp-tblwrap{overflow:visible}
  a[href]::after{content:""}          /* no URL clutter in a printed report */
}

/* -- Daily report: the five-second read -----------------------------------
   Two cards, two questions. Everything else in the report is evidence for
   these; they are sized so a reader who stops here has still been told the
   answer. Print-safe: the report is saved as a PDF and mailed on. */
.cp-verdicts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.cp-verdict{border:1px solid var(--cp-line);border-left-width:3px;border-radius:10px;
  padding:12px 14px;background:var(--cp-surface-1)}
.cp-verdict--ok{border-left-color:var(--cp-positive)}
.cp-verdict--warn{border-left-color:var(--cp-warning)}
.cp-verdict--crit{border-left-color:var(--cp-negative)}
.cp-verdict--none{border-left-color:var(--cp-line-strong)}
.cp-verdict__tag{font-family:var(--cp-font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cp-text-muted)}
.cp-verdict__word{font-size:26px;font-weight:300;line-height:1.15;margin:.15rem 0 .2rem;
  color:var(--cp-text)}
.cp-verdict--ok .cp-verdict__word{color:var(--cp-sev-ok-fg)}
.cp-verdict--warn .cp-verdict__word{color:var(--cp-sev-warn-fg)}
.cp-verdict--crit .cp-verdict__word{color:var(--cp-sev-crit-fg)}
/* The rule that produced the word. A verdict nobody can reproduce from the
   numbers under it gets ignored the first time it feels wrong. */
.cp-verdict__why{font-size:12px;color:var(--cp-text-muted);line-height:1.45}
.cp-verdict__facts{display:flex;gap:16px;margin-top:10px;flex-wrap:wrap}
.cp-verdict__facts div{display:flex;flex-direction:column}
.cp-verdict__facts b{font-family:var(--cp-font-mono);font-size:15px;font-weight:500;
  color:var(--cp-text)}
.cp-verdict__facts span{font-size:10.5px;color:var(--cp-text-muted)}
.cp-verdict__note{font-size:11px;color:var(--cp-sev-warn-fg);margin:.5rem 0 0;line-height:1.4}

/* Where the money went, as one bar. The point is the SHAPE: one segment at
   95% is a different business from four even ones. */
.cp-spend{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:11px;
  background:var(--cp-surface-2)}
.cp-spend__seg{display:block;height:100%}
.cp-spend__seg--0{background:var(--cp-copper)}
.cp-spend__seg--1{background:var(--cp-info)}
.cp-spend__seg--2{background:var(--cp-positive)}
.cp-spend__seg--3{background:var(--cp-line-strong)}
.cp-spend__legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px}
.cp-spend__key{font-size:10.5px;color:var(--cp-text-muted);display:inline-flex;
  align-items:center;gap:4px}
.cp-spend__key b{color:var(--cp-text);font-family:var(--cp-font-mono);font-weight:500}
.cp-spend__dot{width:8px;height:8px;border-radius:2px;display:inline-block}

@media (max-width:820px){.cp-verdicts{grid-template-columns:1fr}}
@media print{
  .cp-verdicts{grid-template-columns:1fr 1fr;break-inside:avoid}
  .cp-verdict{background:transparent}
}

/* -- Report: scan, don't read ---------------------------------------------
   KPI tiles. Value first at a size you catch peripherally, label small
   underneath. A row of these replaces a table whose third column was prose. */
.cp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
  gap:8px;margin:10px 0 4px}
.cp-tiles--tight{margin-top:12px}
.cp-tile{border:1px solid var(--cp-line);border-radius:8px;padding:8px 10px;
  background:var(--cp-surface-1)}
.cp-tile__v{font-family:var(--cp-font-mono);font-size:19px;font-weight:500;
  line-height:1.1;color:var(--cp-text)}
.cp-tile__l{font-size:10px;color:var(--cp-text-muted);margin-top:2px;
  text-transform:uppercase;letter-spacing:.05em}
.cp-tile--ok .cp-tile__v{color:var(--cp-sev-ok-fg)}
.cp-tile--warn{border-color:var(--cp-warning)}
.cp-tile--warn .cp-tile__v{color:var(--cp-sev-warn-fg)}

/* Demoted prose: still there for whoever wants it, sized so the eye skips it. */
.cp-foot{font-size:10.5px;color:var(--cp-text-muted);line-height:1.45;
  margin:.5rem 0 0}
@media print{.cp-tile{background:transparent}}

/* -- Report tables: three jobs, three weights ------------------------------
   Measure names, values and explanations previously rendered identically, so
   an eight-row table put twenty-four items in front of the eye with equal
   claim on it. The value is what is being looked up; it wins. */
.cp-sheet td.cp-m{font-size:12px;color:var(--cp-text)}
.cp-sheet td.cp-v{font-family:var(--cp-font-mono);font-size:14px;font-weight:500;
  color:var(--cp-text);white-space:nowrap}
/* Belt and braces: if a long string ever reaches the value column again it
   should degrade rather than push the table off the sheet. */
.cp-sheet td.cp-v{max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.cp-sheet td.cp-v--warn{color:var(--cp-sev-warn-fg)}
.cp-sheet td.cp-v--crit{color:var(--cp-sev-crit-fg)}
/* Deliberately quiet: present for whoever needs it, skipped by everyone else. */
.cp-sheet td.cp-d{font-size:10px;line-height:1.4;color:var(--cp-text-muted);
  max-width:34ch}

/* A note is not a row of data and should not look like one. */
.cp-note{border-left:2px solid var(--cp-line-strong);background:var(--cp-surface-2);
  border-radius:0 6px 6px 0;padding:7px 10px;margin:10px 0 0;
  font-size:10.5px;line-height:1.5;color:var(--cp-text-muted)}
.cp-note strong{color:var(--cp-text);font-weight:500}
.cp-note__k{font-family:var(--cp-font-mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cp-text-muted);display:block;
  margin-bottom:2px}

/* Platform health: the machines are a fleet view, the rest are measures. They
   were stacked as four look-alike tables; grouping them says which is which. */
.cp-hgroup{margin-top:14px}
.cp-hgroup__h{font-family:var(--cp-font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cp-text-muted);
  border-bottom:1px solid var(--cp-line);padding-bottom:3px;margin-bottom:8px}