/* Tumaini 2.0 — design tokens (Blueprint §3) + minimal reset.
   Tokens are the single source of truth: components use variables, never raw values. */

:root {
  /* ---- Type ramp (px) ---- */
  --text-xs: 12px;   /* meta, badges */
  --text-sm: 14px;   /* body default, tables */
  --text-md: 17px;   /* emphasized body, inputs */
  --text-lg: 22px;   /* section headings */
  --text-xl: 30px;   /* page titles, key numbers */

  /* ---- Layout ---- */
  --tb-h: 56px;      /* top-bar height; the sticky offset for anything under it */

  --leading-tight: 1.25;
  --leading-body: 1.5;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Ink tiers (text on light surfaces) ---- */
  --ink: #0D1117;        /* primary */
  --ink-muted: #5E6780;  /* secondary */
  --ink-subtle: #6B7490; /* tertiary / hints */

  /* ---- Surfaces & lines ---- */
  --bg: #F3F5FA;
  --surface: #FFFFFF;
  --line: #E3E7F0;

  /* ---- Brand (navy) ---- */
  --brand-900: #0C1929; /* app bar / darkest */
  --brand-800: #0E2847; /* ink-on-soft */
  --brand-700: #1F4477; /* primary actions, links */
  --brand-100: #E8EEF8; /* soft fills */

  /* ---- Semantic sets: -700 text/ink · -500 solid · -100 soft fill ---- */
  --ok-700: #16773B;
  --ok-500: #1F9D4F;
  --ok-100: #DCFCE7;

  --warn-700: #92580A;
  --warn-500: #C97B10;
  --warn-100: #FEF3C7;

  --danger-700: #B91C1C;
  --danger-500: #DC2626;
  --danger-200: #FCA5A5;
  --danger-100: #FEE2E2;
  --danger-050: #FFF7F7;

  --info-700: #1D4ED8;
  --info-500: #3B82F6;
  --info-100: #DBEAFE;

  /* ---- Typography ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Shape & motion ---- */
  --radius: 10px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-700);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
}

h1, h2, h3, h4, p, ul, ol, figure {
  margin: 0;
}

img, svg, canvas {
  display: block;
  max-width: 100%;
}

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

/* Visible keyboard focus everywhere; never remove, only restyle. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--sp-1);
}

/* === Walking-skeleton shell (Phase 0) ==================================== */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 220px;
  flex-shrink: 0;
  padding: var(--sp-4) var(--sp-3);
  background: var(--brand-900);
  color: #C8D0DF;
  /* FROZEN ON DESKTOP. The nav used to be an ordinary flex child, so it scrolled
     away with the page: on a long Patients list or Reports tab you had to scroll
     all the way back to the top to reach any route — or Sign out, which lives in
     the footer below. The top bar was already sticky; the nav was not, which is
     why only half the chrome stayed put.
       align-self: flex-start stops the flex parent stretching this to the height
     of the whole page (a stretched item can never stick), and height:100dvh then
     pins it to exactly one viewport so `.sb-foot { margin-top:auto }` holds Sign
     out at the bottom of the SCREEN rather than the bottom of the document.
     overflow-y keeps a tall nav usable on a short window, and overscroll-behavior
     stops that inner scroll chaining into the page behind it.
       Mobile is untouched: the ≤768px block below re-declares this as a fixed
     off-canvas drawer, and being later in the file it wins. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  height: 100dvh; /* dvh where supported; the vh above is the fallback */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand {
  font-size: var(--text-md);
  font-weight: 700;
  color: #FFFFFF;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
}

.nav-group { margin-bottom: var(--sp-4); }

.nav-tier {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  padding: var(--sp-1) var(--sp-3);
}

.nb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nb:hover { background: rgba(255, 255, 255, 0.08); }

.nb.active {
  background: var(--brand-700);
  color: #FFFFFF;
  font-weight: 600;
}

.nb .nb-lbl { flex: 1; min-width: 0; }

/* Sidebar count badge (legacy .cnt) — hidden entirely when the count is 0. */
.cnt {
  flex-shrink: 0;
  min-width: 20px;
  padding: 0 var(--sp-1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: center;
  line-height: 20px;
}

.nb.active .cnt { background: rgba(255, 255, 255, 0.22); }

/* "Advanced" chip on the OPERATE tier label. */
.tier-chip {
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: var(--text-xs);
  letter-spacing: normal;
  text-transform: none;
}

.sb-foot {
  margin-top: auto;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Mode chip (R-030): visible statement of the current mode + the switch. */
.mode-chip {
  display: block;
  width: 100%;
  margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: transparent;
  color: rgba(200, 208, 223, 0.7);
  font-size: var(--text-xs);
  text-align: center;
  cursor: pointer;
}

.mode-chip:hover { background: rgba(255, 255, 255, 0.08); }

.sb-ver {
  font-size: var(--text-xs);
  opacity: 0.55;
  padding: var(--sp-2) var(--sp-1) 0;
}

/* --- Signed-in user card (legacy .nurse-card) --- */

.nurse-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.nc-av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--brand-700);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: 700;
}

.nc-info { min-width: 0; flex: 1; }

.nc-name {
  color: #FFFFFF;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-role {
  font-size: var(--text-xs);
  opacity: 0.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-out {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nc-out:hover { background: rgba(255, 255, 255, 0.1); }
.nc-out svg { width: 16px; height: 16px; }

/* Main column: top bar + view outlet (+ mobile bottom bar). */
.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* === Top bar ============================================================= */

.tb {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  /* --tb-h: the sticky offset every OTHER sticky element in the same scroll
     must clear. Read by .rpt-filterbar; change it here only. */
  min-height: var(--tb-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.tb-title {
  font-size: var(--text-md);
  font-weight: 700;
  white-space: nowrap;
}

/* Disabled search placeholder — Cmd-K arrives in Phase 2. */
.tb-search {
  flex: 1;
  min-width: 60px;
  max-width: 360px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink-subtle);
  font-size: var(--text-sm);
  cursor: default;
}

.tb-acts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

/* === Sync control (F-NAV-03) ============================================= */
/* Legacy had this button and its offline copy pointed at it. Present at EVERY
   breakpoint — on a phone it is the only refresh that is not "download the
   whole bundle again over a 2G link". */

.tb-sync {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px; /* app-wide touch minimum */
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.tb-sync svg { width: 16px; height: 16px; }
.tb-sync:hover:not(:disabled) { background: var(--bg); }
.tb-sync:disabled { opacity: 0.6; cursor: default; }
/* Busy: the icon spins so a slow link still looks like progress, not a
   dead button. Reduced-motion users get the disabled state and the label
   change ("Syncing…"), which carry the same information without the motion. */
.tb-sync.busy svg { animation: tb-sync-spin 900ms linear infinite; }

@keyframes tb-sync-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tb-sync.busy svg { animation: none; }
}

@media (max-width: 768px) {
  /* Room is scarce next to the burger, the programme pill and the Live chip;
     the icon alone is unambiguous and the aria-label still reads "Sync". */
  .tb-sync-lbl { display: none; }
  .tb-sync { padding: 0; width: 44px; justify-content: center; }
}

.view {
  flex: 1;
  min-width: 0;
  padding: var(--sp-6);
}

/* === Programme pill + dropdown =========================================== */

.prog-wrap { position: relative; display: inline-flex; }

.prog-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.prog-pill[hidden] { display: none; }
.prog-chev { opacity: 0.5; }

/* Programme dots: fill comes from the validated brand hex (SVG attribute —
   CSP-safe); near-white accents get a --line ring so they never vanish. */
.prog-dot { flex-shrink: 0; }
.prog-dot.ring circle { stroke: var(--line); stroke-width: 1; }
.prog-dot.all circle { fill: var(--brand-700); }

.prog-menu {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  z-index: 45;
  min-width: 240px;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(12, 25, 41, 0.16);
}

.prog-menu[hidden] { display: none; }

.prog-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.prog-opt:hover { background: var(--brand-100); }
.prog-opt[aria-checked='true'] { background: var(--brand-100); }
.prog-opt-txt { display: flex; flex-direction: column; min-width: 0; }
.prog-opt-name { font-weight: 600; }

.prog-opt-sub {
  font-size: var(--text-xs);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Live strip chip (legacy .live badge) ================================ */

.live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Dot-only semantics (§3: -500 never carries text — the label does). */
.ldot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.live.live .ldot { background: var(--ok-500); }
.live.connecting .ldot { background: var(--warn-500); }
.live.offline .ldot { background: var(--danger-500); }

/* === Help entry points + modal rows ====================================== */

.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}

.help-btn:hover { background: var(--bg); }
.help-btn svg { width: 16px; height: 16px; }

.help-row { margin-bottom: var(--sp-3); }
.help-row b { font-weight: 600; }
.help-hint { color: var(--ink-muted); font-size: var(--text-xs); }

.help-support {
  padding: var(--sp-2) var(--sp-3);
  background: var(--brand-100);
  border-radius: var(--radius);
}

/* Off-screen textarea for the clipboard fallback — visually gone, still
   selectable (display:none would break select()/execCommand). */
.sr-copy {
  position: fixed;
  left: -9999px;
  top: 0;
  opacity: 0;
}

/* === Mobile bottom tab bar (legacy .mob-tabs) ============================ */

.mob-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: var(--sp-1) var(--sp-2) calc(env(safe-area-inset-bottom) + var(--sp-1));
}

.mob-tabs-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-1);
}

.mob-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--sp-1);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}

.mob-tab svg { width: 18px; height: 18px; }
.mob-tab.active { color: var(--brand-700); }
.mob-tab[aria-disabled='true'] { color: var(--ink-subtle); opacity: 0.55; cursor: default; }

/* === Mobile nav drawer (F-NAV-05) ======================================== */
/* The 5-tab bar reaches Today/Consents/Board/Patients. The other six routes
   (Safety, Reports, Billing, Import, Admin, Workspace) are reachable ONLY
   through this drawer on a phone — it is not polish, it is the difference
   between a usable and an unusable phone build. Same <aside>, slid off-canvas:
   one nav, one set of role/mode gating rules, nothing to drift. */

.tb-burger { display: none; }
.nav-scrim { display: none; }

@media (max-width: 768px) {
  .sidebar {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(280px, 84vw);
    z-index: 46; /* above .mob-tabs (40), below toasts (70) and modals (60) */
    overflow-y: auto;
    transform: translateX(-100%);
    /* visibility, not just transform: an off-canvas <aside> that is merely
       translated keeps all ten of its buttons in the tab order and in the
       accessibility tree, so a keyboard or screen-reader user tabs off the top
       bar into a menu they cannot see and cannot escape. `visibility: hidden`
       removes it from both, and unlike display:none it still animates.
       Delayed on the way out so the slide is visible before it disappears. */
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.28);
  }
  .drawer-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform 180ms ease, visibility 0s;
  }

  /* A real element, not a tint: it must HIT-TEST above the bottom bar so a tap
     outside the drawer closes it instead of firing the tab underneath (P2). */
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(15, 23, 42, 0.5);
    border: 0;
  }
  .nav-scrim[hidden] { display: none; }

  .tb-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    min-height: 44px; /* app-wide minimum */
    margin-right: var(--sp-2);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }
  /* Three bars drawn with borders — no inline styles, no icon font, no SVG
     sprite to vendor (strict CSP). */
  .tb-burger-b {
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  }

  .mob-tabs { display: block; }
  .view { padding: var(--sp-4) var(--sp-4) calc(env(safe-area-inset-bottom) + 96px); }
  .tb-title { display: none; } /* the active tab names the view on phones */
  /* The search box is a disabled placeholder (see the recorded decision on the
     Cmd-K palette). On a 375px bar it would crowd out Sync and the Live chip
     to advertise something that does nothing — so it stands down on phones. */
  .tb-search { display: none; }
}

/* Body scroll lock while the drawer is open: without it the page behind the
   scrim scrolls under the user's thumb, and closing the drawer drops them
   somewhere they never chose to be. A CLASS, not an inline style — the
   deployed CSP blocks `style=`, so a JS-set style works in dev and silently
   fails in production. */
body.nav-locked {
  overflow: hidden;
  /* iOS Safari ignores overflow:hidden on <body> for touch scrolling unless
     the body is also taken out of the normal scroll flow. */
  touch-action: none;
}

/* Reduced motion. `.drawer-open .sidebar` re-declares `transition` and has
   specificity (0,2,0), so a bare `.sidebar { transition: none }` here (0,1,0)
   LOSES and the slide plays anyway — the override has to match the selector it
   is overriding. visibility keeps its 0s timing so the panel still leaves the
   a11y tree the instant it closes. */
@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .drawer-open .sidebar {
    transition: none;
  }
}

.view-head h1 { font-size: var(--text-lg); }

.view-placeholder {
  margin-top: var(--sp-3);
  color: var(--ink-muted);
}

/* === Toast =============================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  background: var(--brand-900);
  color: #FFFFFF;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  max-width: min(90vw, 480px);
  z-index: 70; /* toasts above modals so a save/error is never hidden */
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok-700); }
.toast.err { background: var(--danger-700); }

/* === Modal =============================================================== */

.ov {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 25, 41, 0.55);
  z-index: 60; /* above .ws-overlay (50) so workspace modals show + scrim dims it */
  padding: var(--sp-4);
}

.ov.show { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: min(92vw, 520px);
  max-height: 90vh;
  overflow: auto;
  padding: var(--sp-5);
}

.modal.lg { width: min(94vw, 760px); }

.m-head h3 { font-size: var(--text-md); }

.m-head p {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  margin-top: var(--sp-1);
}

.m-body { margin-top: var(--sp-4); }

.m-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.btn {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.btn.pri {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #FFFFFF;
}

.btn.danger { border-color: var(--danger-500); color: var(--danger-700); font-weight: 600; }

.btn:disabled { opacity: 0.55; cursor: default; }

/* .sm shrinks the TYPE, never the touch target — 44px is the app-wide minimum
   (see .login-btn, .mob-tab) and these are the clinic tablets' densest controls
   (registry row actions, the bulk bar, empty-state CTAs). */
.btn.sm {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* === Login screen (legacy .login-wrap) =================================== */

.login-wrap {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  padding: var(--sp-5);
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(92vw, 380px);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}

.login-brand { margin-bottom: var(--sp-6); }

.login-wm { font-size: var(--text-lg); font-weight: 700; color: var(--brand-900); }
.login-wm .r { color: var(--brand-700); }

.login-sub {
  color: var(--ink-muted);
  font-size: var(--text-xs);
  margin-top: var(--sp-1);
}

.login-h { font-size: var(--text-md); margin-bottom: var(--sp-4); }

.field { margin-bottom: var(--sp-4); }

.field label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: var(--sp-1);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  /* 16px floor: below this iOS Safari zooms the page on focus. */
  font-size: 16px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.login-err {
  display: none;
  color: var(--danger-700);
  background: var(--danger-100);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs);
  margin-bottom: var(--sp-4);
}

.login-err.show { display: block; }

.login-err .retry-btn { display: block; margin-top: var(--sp-2); }

.login-btn {
  width: 100%;
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--brand-700);
  color: #FFFFFF;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.login-btn:disabled { opacity: 0.65; cursor: default; }

.login-foot {
  color: var(--ink-subtle);
  font-size: var(--text-xs);
  margin-top: var(--sp-5);
}

.login-foot.login-ver { margin-top: var(--sp-1); }

/* === Idle-logout warning banner (legacy .idle-warn) ====================== */

.idle-warn {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  transform: translate(-50%, 12px);
  opacity: 0;
  /* visibility (not just opacity/pointer-events) — an invisible banner must
     also leave the keyboard tab order: pointer-events does not block Tab, and
     a focusable button inside an aria-hidden subtree fails WCAG 4.1.2. The
     0.18s visibility delay lets the fade-out finish before it vanishes. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0s linear 0.18s;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--danger-700);
  color: #FFFFFF;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  max-width: min(90vw, 520px);
  z-index: 80; /* idle warning above toasts */
}

.idle-warn.show {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
    visibility 0s; /* appear instantly, then fade in */
}

.idle-warn .btn {
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
  color: #FFFFFF;
  white-space: nowrap;
  min-height: 36px;
}

.idle-warn .btn:hover { background: rgba(255, 255, 255, 0.12); }

/* === Today view (Blueprint §2 screen 1) ================================== */

.today { max-width: 1180px; }

/* Greeting */
.today-greet { margin-bottom: var(--sp-5); }
.today-h { font-size: var(--text-lg); font-weight: 700; }
.today-h em { font-style: normal; color: var(--brand-700); }
.today-sub { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 2px; }
.today-sub b { color: var(--danger-700); font-weight: 600; }

/* Scope strip */
.today-scope-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.today-scope-wrap { position: relative; display: inline-flex; }
.today-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  min-height: 40px;
  border: 1px solid var(--brand-700);
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.today-scope-pill .ic:last-child { opacity: 0.6; }

.today-scope-menu {
  position: absolute;
  top: calc(100% + var(--sp-1));
  left: 0;
  z-index: 45;
  min-width: 280px;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(12, 25, 41, 0.16);
}
.today-scope-menu[hidden] { display: none; }
.today-scope-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.today-scope-opt:hover { background: var(--brand-100); }
.today-scope-opt.on { background: var(--brand-100); }
.tso-radio { color: var(--brand-700); font-size: 12px; line-height: 1.4; }
.tso-txt { display: flex; flex-direction: column; min-width: 0; }
.tso-name { font-weight: 600; }
.tso-desc { font-size: var(--text-xs); color: var(--ink-muted); }
.tso-empty { padding: 4px 8px; }
.today-scope-chks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-1) var(--sp-2) var(--sp-2) var(--sp-6);
  margin-bottom: var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.today-scope-chk {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  padding: 3px 4px;
  cursor: pointer;
}

/* Legacy-pool banner */
.today-banner { flex: 1; min-width: 260px; }
.today-banner[hidden] { display: none; }
.today-banner-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--warn-500);
  border-radius: var(--radius);
  background: var(--warn-100);
  color: var(--ink);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}
.today-banner-btn .ic { color: var(--warn-700); flex: none; }
.today-banner-go { margin-left: auto; font-weight: 600; color: var(--brand-700); white-space: nowrap; }

/* KPI tiles as filter buttons */
.today-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.today-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}
.today-tile.active { border-color: var(--brand-700); box-shadow: inset 0 -3px 0 var(--brand-700); }
.tt-label { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--ink-muted); }
.tt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tt-dot.danger { background: var(--danger-500); }
.tt-dot.warn { background: var(--warn-500); }
.tt-dot.info { background: var(--info-500); }
.tt-dot.ok { background: var(--ok-500); }
.tt-dot.muted { background: var(--ink-subtle); }
.tt-val { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-hint { font-size: var(--text-xs); color: var(--ink-subtle); }
.today-tile.danger .tt-val { color: var(--danger-700); }

/* Queue card */
.today-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.today-tabs {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.today-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--text-sm);
  cursor: pointer;
}
.today-tab.active { background: var(--brand-700); color: #FFFFFF; font-weight: 600; }
.tb-n {
  font-size: var(--text-xs);
  background: var(--bg);
  border-radius: 999px;
  padding: 0 7px;
  font-variant-numeric: tabular-nums;
}
.today-tab.active .tb-n { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }

/* Rows */
.today-rhdr,
.today-row {
  display: grid;
  grid-template-columns: 1fr 200px 110px 170px 150px;
  gap: var(--sp-3);
  align-items: center;
}
.today-rhdr {
  padding: var(--sp-2) var(--sp-4);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  border-bottom: 1px solid var(--line);
}
.today-row {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.today-row:last-child { border-bottom: none; }
.today-row:hover { background: var(--bg); }
.today-row.serious { background: var(--danger-100); }
.today-row.serious:hover { background: #FBD5D5; }

.tr-pc { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; }
.tr-av {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-muted); /* fallback so initials are never white-on-white */
  color: #FFFFFF;
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.tr-pi { min-width: 0; }
.tr-name { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.tr-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-sub { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-muted); margin-top: 1px; }
.tr-sub .ic { color: var(--ink-subtle); flex: none; }
.tr-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-act { font-size: var(--text-sm); color: var(--ink-muted); }
.tr-owner { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tr-cta { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }

.today-due {
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}
.today-due.over { background: var(--danger-100); color: var(--danger-700); }
.today-due.today { background: var(--warn-100); color: var(--warn-700); }
.today-due.ok { background: var(--bg); color: var(--ink-muted); }

.today-tag {
  font-size: var(--text-xs);
  border-radius: 999px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  background: var(--surface);
  white-space: nowrap;
}
.today-tag.owner { border: none; background: var(--bg); }
.today-tag.unassigned { border: none; background: var(--warn-100); color: var(--warn-700); font-weight: 600; }
.today-tag.serious { border: none; background: var(--danger-100); color: var(--danger-700); font-weight: 600; }
.today-tag.danger { border: none; background: var(--danger-100); color: var(--danger-700); font-weight: 600; }
.today-tag.accent { border: none; background: var(--brand-100); color: var(--brand-700); font-weight: 600; }

/* Degradation notice (fail-open owner join) */
.today-degrade {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}
.today-degrade .ic { color: var(--warn-700); flex: none; }
.today-degrade-retry {
  border: 0;
  background: transparent;
  color: var(--brand-700);
  font-weight: 600;
  cursor: pointer;
}
.today-degrade-ref { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Empty + error states */
.today-empty,
.today-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-10) var(--sp-4);
  color: var(--ink-muted);
}
.today-empty .ic, .today-error .ic { color: var(--ink-subtle); }
.today-empty h4, .today-error h4 { font-size: var(--text-md); color: var(--ink); }
.today-empty p, .today-error p { font-size: var(--text-sm); }
.today-empty .btn { margin-top: var(--sp-2); }
.today-error {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: row;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
}
.today-error .ic { color: var(--danger-700); flex: none; }
.today-error h4 { color: var(--danger-700); }

/* Assign modal */
.today-assign-lead { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--sp-3); }
.today-assign-hint { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 5px; }

/* === New consents (intake) — Phase 3 Task A ============================ */
.consents-sub { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--sp-1); }
/* Stale-intake banner — the loud summary above the list. Amber, not red: it
   is a call to action, not an error state. */
.consents-stale {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--warn-100); color: var(--warn-700);
  border: 1px solid rgb(180 83 9 / 25%); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  font-size: var(--text-sm); line-height: 1.55;
}
.consents-stale svg { flex-shrink: 0; margin-top: 2px; }
.consents-stale b { font-weight: 700; }

.consents-note {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.consents-rhdr,
.consents-row {
  display: grid;
  grid-template-columns: 1fr 150px 260px 120px;
  gap: var(--sp-3);
  align-items: center;
}
.consents-rhdr {
  padding: var(--sp-2) var(--sp-4);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-subtle);
  border-bottom: 1px solid var(--line);
}
.consents-row {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.consents-row:last-child { border-bottom: none; }
.consents-row:hover { background: var(--bg); }
.consents-county { font-size: var(--text-sm); color: var(--ink-muted); }
.consents-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.consents-badges .today-tag.warn { border: none; background: var(--warn-100); color: var(--warn-700); font-weight: 600; }

/* Review modal */
.consents-modal-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg); border-radius: var(--radius); margin-bottom: var(--sp-4); }
.tr-av.lg { width: 46px; height: 46px; font-size: var(--text-md); }
.consents-modal-name { font-size: var(--text-md); font-weight: 600; }
.consents-facts { margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: 3px; }
.consents-fact { font-size: var(--text-sm); color: var(--ink-muted); }
.consents-fact b { color: var(--ink); font-weight: 600; }
.consents-warn {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--warn-700);
  background: var(--warn-100); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
}
.consents-warn .ic { flex: none; }
.consents-owner-help { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 5px; }
.consents-owner-fail { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--danger-700); }
.consents-owner-fail .ic { vertical-align: -2px; }
.consents-owner-ref { margin-left: auto; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.consents-confirm { font-size: var(--text-sm); color: var(--ink); line-height: 1.5; }
.linklike { border: 0; background: none; padding: 0; cursor: pointer; color: var(--brand-700); font-weight: 600; text-decoration: underline; font-size: var(--text-sm); }
.hint { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 4px; }

/* Phone: fold Action + Due columns into the subline (legacy .m-only) */
.m-only { display: none; }
@media (max-width: 768px) {
  .today-tiles { grid-template-columns: repeat(2, 1fr); }
  .today-rhdr { display: none; }
  .today-row { grid-template-columns: 1fr auto; grid-template-areas: "pc cta" "owner cta"; row-gap: var(--sp-2); }
  .tr-pc { grid-area: pc; }
  .tr-act, .tr-due { display: none; }
  .tr-owner { grid-area: owner; flex-direction: row; align-items: center; }
  .tr-cta { grid-area: cta; }
  .m-only { display: inline; }
  .consents-rhdr { display: none; }
  .consents-row { grid-template-columns: 1fr auto; grid-template-areas: "pc cta"; }
  .consents-row .tr-pc { grid-area: pc; }
  .consents-county, .consents-badges { display: none; }
  .consents-row .tr-cta { grid-area: cta; }
}

/* === Workspace overlay (Task C) ======================================== */
/* Layer ladder (fixed, body-level): chrome 30-45 < ws-overlay 50 < modal .ov 60
   < toast 70 < idle-warn 80 < login 99. The workspace is a page SURFACE, so it
   sits below transient modals/toasts — a modal opened from the workspace (Report
   AE, composer, assign) must paint above it, and its scrim must dim it. */
.ws-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.ws-open { overflow: hidden; }
.ws-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13, 17, 23, 0.04);
  flex: none;
}
.ws-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
}
.ws-bar-name { font-weight: 600; color: var(--ink-muted); }
.ws-scroll { flex: 1; overflow-y: auto; padding: var(--sp-4); }

.ws-head { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.ws-arch {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--danger-100); color: var(--danger-700);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3);
  font-size: var(--text-xs); font-weight: 600;
}
.ws-top { display: flex; gap: var(--sp-4); align-items: flex-start; }
.ws-av {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: var(--ink-muted); /* fallback so initials are never white-on-white */
  color: #fff; font-weight: 700; font-size: var(--text-md);
  display: flex; align-items: center; justify-content: center;
}
.ws-id { flex: 1; min-width: 0; }
.ws-name { font-size: var(--text-lg); }
.ws-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--ink-muted); }
.ws-prog { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.ws-phone {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--brand-700); font-weight: 600;
}
.ws-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.ws-acts .btn { display: inline-flex; align-items: center; gap: 5px; }
.ws-acts .btn.danger { border-color: var(--danger-500); color: var(--danger-700); }
.ws-arch-note { font-size: var(--text-xs); color: var(--ink-muted); align-self: center; }

.ws-stages { display: flex; gap: var(--sp-1); margin-top: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-1); }
.ws-sg {
  flex: 1 0 auto; min-width: 78px; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px; background: var(--bg);
}
.ws-sg .n { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--ink-subtle); }
.ws-sg .l { font-size: var(--text-xs); font-weight: 600; }
.ws-sg .s { font-size: 11px; color: var(--ink-subtle); }
.ws-sg.done { background: var(--ok-100); border-color: transparent; }
.ws-sg.done .s { color: var(--ok-700); }
.ws-sg.cur { background: var(--brand-100); border-color: var(--brand-700); }
.ws-sg.cur .s { color: var(--brand-700); font-weight: 600; }

.ws-body { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-4); }
.ws-main { min-width: 0; }
.ws-side { display: flex; flex-direction: column; gap: var(--sp-4); }

.ws-next {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: 2px;
}
.ws-next.over { border-color: var(--danger-500); }
.ws-next.none { color: var(--ink-muted); }
.ws-next .nlbl { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--brand-700); }
.ws-next.over .nlbl { color: var(--danger-700); }
.ws-next .ntitle { font-size: var(--text-md); font-weight: 600; }
.ws-next .nsub { font-size: var(--text-xs); color: var(--ink-muted); }
.ws-next .btn { align-self: flex-start; margin-top: var(--sp-2); }

.ws-tl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
.ws-tl-h { font-size: var(--text-md); margin-bottom: var(--sp-3); }
.ws-tl-warn {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--danger-100); color: var(--danger-700);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--text-xs);
}
.ws-tli { padding: var(--sp-2) 0 var(--sp-2) var(--sp-3); border-left: 2px solid var(--line); margin-bottom: var(--sp-2); }
.ws-tli.ok { border-left-color: var(--ok-500); }
.ws-tli.wn { border-left-color: var(--warn-500); }
.ws-tli.dn { border-left-color: var(--danger-500); }
.ws-tl-top { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: baseline; }
.ws-tl-t { font-size: var(--text-sm); font-weight: 600; }
.ws-tl-ts { font-size: 11px; color: var(--ink-subtle); white-space: nowrap; }
.ws-tl-d { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; }

.ws-spc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.ws-spc-h { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-subtle); margin-bottom: var(--sp-2); }
.ws-sf { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 3px 0; font-size: var(--text-sm); }
.ws-sf-k { color: var(--ink-muted); }
.ws-sf-v { text-align: right; font-weight: 500; }
.ws-sf-v.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.ws-moves { color: var(--ink-subtle); font-size: 11px; font-weight: 400; }
.ws-qa { display: flex; flex-direction: column; gap: var(--sp-2); }
.ws-qa .btn { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start; }
.ws-last-out { font-weight: 600; }
.ws-last-note { font-size: var(--text-xs); color: var(--ink); margin-top: var(--sp-2); font-style: italic; }
.ws-muted { color: var(--ink-muted); font-size: var(--text-xs); }
.ws-danger { color: var(--danger-700); font-size: var(--text-xs); }

.ws-panel-err {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--danger-500); border-radius: var(--radius); padding: var(--sp-4);
}
.ws-panel-err.sm { padding: var(--sp-3); }
.ws-panel-err .ic { color: var(--danger-700); flex: none; }
.ws-panel-err h4 { color: var(--danger-700); }
.ws-panel-err p { font-size: var(--text-xs); color: var(--ink-muted); }
.ws-empty { text-align: center; padding: var(--sp-6); color: var(--ink-muted); }

.ws-skel { display: flex; flex-direction: column; gap: var(--sp-2); }
.ws-skel-l { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--line), var(--bg), var(--line)); }
.ws-skel-l.lg { height: 22px; width: 220px; }

/* AE form + mark-sent */
.ws-ae-crits { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: var(--text-sm); }
.ws-ae-crit { display: flex; gap: 6px; align-items: center; }
.ws-ae-notice {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  background: var(--warn-100); color: var(--warn-700);
  border-radius: var(--radius); padding: var(--sp-3); font-size: var(--text-xs); margin-top: var(--sp-2);
}
.ws-ae-notice .ic { flex: none; }
.ws-ae-ok {
  background: var(--ok-100); color: var(--ok-700); border-radius: var(--radius);
  padding: var(--sp-3); font-size: var(--text-xs); margin-bottom: var(--sp-3);
}
.ws-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.ws-linkbtn { border: none; background: none; padding: 0; color: var(--brand-700); font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Call number */
.ws-call-num { text-align: center; padding: var(--sp-3) 0; }
.ws-call-copy {
  font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.02em;
  border: none; background: none; cursor: pointer; color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Message composer (bilingual) */
.ws-comp { display: flex; flex-direction: column; gap: var(--sp-3); }
.ws-comp-consent { font-size: 11px; color: var(--ink-subtle); }
.ws-comp-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.ws-lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ws-lang-btn { border: none; background: var(--surface); padding: var(--sp-1) var(--sp-3); cursor: pointer; font-size: var(--text-xs); font-weight: 600; }
.ws-lang-btn.on { background: var(--brand-700); color: #fff; }
.ws-tpl-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ws-tpl-chip { border: 1px solid var(--line); border-radius: 999px; padding: var(--sp-1) var(--sp-3); background: var(--surface); cursor: pointer; font-size: var(--text-xs); }
.ws-tpl-chip.on { border-color: var(--brand-700); background: var(--brand-100); color: var(--brand-700); font-weight: 600; }
.ws-comp-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-subtle); margin-top: 4px; }
.ws-comp-acts { display: flex; gap: var(--sp-2); justify-content: flex-end; }
.ws-comp-warn {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--warn-100); color: var(--warn-700);
  border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs);
}
.ws-comp-warn .btn.danger { border-color: var(--danger-500); color: var(--danger-700); }

/* More actions */
.ws-more { display: flex; flex-direction: column; gap: var(--sp-2); }
.ws-more-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; white-space: normal; }
.ws-more-item.danger { border-color: var(--danger-500); color: var(--danger-700); }
.ws-more-d { font-size: 11px; font-weight: 400; color: var(--ink-muted); }
.ws-more-note { margin-top: var(--sp-2); }

@media (max-width: 900px) {
  .ws-body { grid-template-columns: 1fr; }
}

/* === Safety register (Task C) ========================================== */
.safety-sub { font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--sp-1); }
.safety-list { padding: 0; }
.safety-hdr, .safety-row {
  display: grid; grid-template-columns: 110px 1.4fr 1.6fr 120px 130px; gap: var(--sp-3);
  align-items: center; padding: var(--sp-3) var(--sp-4);
}
.safety-hdr { font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-subtle); border-bottom: 1px solid var(--line); }
.safety-row { border-bottom: 1px solid var(--line); cursor: pointer; }
.safety-row:last-child { border-bottom: none; }
.safety-row:hover { background: var(--bg); }
.safety-row.serious { background: var(--danger-100); }
.safety-row.serious:hover { background: #FBD5D5; }
.sf-date { font-size: var(--text-xs); color: var(--ink-muted); }
.sf-rep { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.sf-av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-100); color: var(--brand-700); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.sf-rep-n { font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.sf-react { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--text-sm); }
@media (max-width: 768px) {
  .safety-hdr { display: none; }
  .safety-row { grid-template-columns: 1fr auto; row-gap: var(--sp-2); }
  .sf-date, .sf-react, .sf-sev { display: none; }
}

/* === Bulk import (Phase 3 Task B) ====================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.import-sub { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--sp-1); }
.import-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.import-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: var(--sp-6, 24px) var(--sp-4);
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  transition: border-color 0.12s, background 0.12s;
}
.import-card:hover { border-color: var(--brand-500, var(--brand-700)); background: var(--brand-100); }
.import-card:focus-visible { outline: var(--focus-ring, 2px solid var(--brand-700)); outline-offset: 2px; }
.import-card-ic { color: var(--brand-700); margin-bottom: 6px; }
.import-card-h { font-size: var(--text-md, 17px); font-weight: 600; color: var(--ink); }
.import-card-b { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.5; max-width: 40ch; }
.import-card-btn { margin-top: var(--sp-3); pointer-events: none; }
.import-template-card { margin-bottom: var(--sp-4); }
.import-template-card .chd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.import-template-note { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }
.import-template-note b { color: var(--ink); font-weight: 600; }

.import-summary { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.import-chip {
  display: inline-flex; align-items: center;
  padding: 3px 12px;
  background: var(--brand-100); color: var(--brand-700);
  border-radius: 999px;
  font-size: var(--text-sm); font-weight: 600;
}
.import-total { font-size: var(--text-sm); color: var(--ink-muted); margin-left: var(--sp-2); }

.import-note {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--text-sm); line-height: 1.5;
  padding: var(--sp-3);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
.import-note.info { background: var(--info-100); color: var(--ink); }
.import-note .ic { flex: none; margin-top: 2px; }
.import-note b { font-weight: 600; }

.import-banner {
  font-size: var(--text-sm); line-height: 1.5;
  padding: var(--sp-3);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
.import-banner b { font-weight: 700; }
.import-banner ul { margin: var(--sp-2) 0 0; padding-left: 18px; }
.import-banner li { margin-bottom: 2px; }
.import-banner.ok { background: var(--ok-100); color: var(--ok-700); }
.import-banner.warn { background: var(--warn-100); color: var(--warn-700); }
.import-banner.danger { background: var(--danger-100); color: var(--danger-700); }
.import-banner .ic { vertical-align: -2px; }

.import-table-wrap {
  overflow-x: auto;
  max-height: 380px; overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
.import-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.import-table th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid var(--line);
  color: var(--ink-muted); font-weight: 600; font-size: var(--text-xs);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.import-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); }
.import-table tr:last-child td { border-bottom: none; }
.import-row-bad td { background: var(--danger-100); }
.import-more { text-align: center; color: var(--ink-muted); font-style: italic; }
.import-table .today-tag { display: inline-flex; }
.import-table .today-tag.ok { border: none; background: var(--ok-100); color: var(--ok-700); font-weight: 600; }
.import-table .today-tag.warn { border: none; background: var(--warn-100); color: var(--warn-700); font-weight: 600; }

.import-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.import-confirm { font-size: var(--text-sm); color: var(--ink); line-height: 1.5; }

@media (max-width: 768px) {
  .import-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Patient board (Blueprint §2 screen 3) — stage pipeline
   ═══════════════════════════════════════════════════════════════════════ */
.board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.board-h { font-size: var(--text-xl); font-weight: 700; }
.board-meta { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.board-banner {
  display: block; margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  background: var(--brand-100); color: var(--brand-800);
  border: 1px solid var(--line); font-size: var(--text-sm);
}

/* Degraded-state notice: the adverse-event read failed, so AE chips may be
   missing. Styled as a warning, never hidden — silence would read as "no AEs". */
.board-ae-notice {
  display: block; margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  background: var(--warn-100); color: var(--warn-700);
  border: 1px solid var(--warn-500); font-size: var(--text-sm); font-weight: 600;
}
.board-ae-notice[hidden] { display: none; }

/* One focusable, aria-labelled, horizontally-scrollable region (WCAG 2.1.1). */
.board-cols {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  overflow-x: auto; overflow-y: hidden;
  padding: var(--sp-1) var(--sp-1) var(--sp-4);
  scroll-padding: var(--sp-4);
}
.bcol {
  flex: 0 0 264px; width: 264px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; max-height: 100%;
}
.bcol-hd {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3); border-bottom: 1px solid var(--line);
}
.bcol-t { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--text-sm); }
.bcol-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--ink-subtle); }
.bcol-hint { font-size: 10px; font-weight: 400; color: var(--ink-subtle); }
.bcol-c {
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  min-width: 22px; text-align: center; padding: 1px 7px; color: var(--ink-muted);
}
.bcol-bd { padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); overflow-y: auto; }
.bcol-empty { padding: var(--sp-6) var(--sp-2); text-align: center; color: var(--ink-subtle); font-size: var(--text-xs); }

/* Card */
.bcard {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: 8px;
  padding: var(--sp-3); text-align: left;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
/* The card itself is a CONTAINER, not a control — its interactive children
   (.bc-pc opens the workspace, .bc-move sets the stage) carry the affordances. */
.bcard:hover { border-color: var(--brand-700); }
.bcard.overdue { border-left-color: var(--danger-500); }
.bcard.ae-open { border-left-color: var(--warn-500); }
.bcard.ae-serious { border-left-color: var(--danger-500); border-top: 1px solid var(--danger-200); background: var(--danger-050); }

.bc-top { display: flex; align-items: center; gap: var(--sp-2); }
.bc-av {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-muted); color: #FFFFFF; font-weight: 700; font-size: 11px;
}
.bc-id { min-width: 0; flex: 1; }
.bc-nm { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--text-sm); }
.bc-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-rf { font-size: var(--text-xs); color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
/* The board's set-stage control. The glyph box stays visually compact; the
   HIT AREA is expanded to 44x44 with a ::before so a mis-tap on a clinic tablet
   doesn't open the workspace instead. */
.bc-move {
  position: relative;
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.bc-move::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* The card's open-workspace target — a sibling of .bc-move, never its parent. */
.bc-pc { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; cursor: pointer; }
.bc-pc:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 6px; }
.bc-move:hover { border-color: var(--brand-700); color: var(--brand-700); }
.bc-loc { font-size: var(--text-xs); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

.bc-age { font-size: 10px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.bc-chip {
  font-size: 10px; font-weight: 600; border-radius: 999px; padding: 2px 7px;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bc-chip .ic { width: 11px; height: 11px; }
.bc-chip.sla-over { background: var(--danger-100); color: var(--danger-700); }
.bc-chip.sla-warn { background: var(--warn-100); color: var(--warn-700); }
.bc-chip.ae-serious { background: var(--danger-100); color: var(--danger-700); font-weight: 700; }
.bc-chip.ae-open { background: var(--warn-100); color: var(--warn-700); }
.bc-chip.risk { background: var(--danger-100); color: var(--danger-700); font-weight: 700; }
.bc-chip.sha.ok { background: var(--ok-100); color: var(--ok-700); }
.bc-chip.sha.warn { background: var(--warn-100); color: var(--warn-700); }
.bc-chip.sha.danger { background: var(--danger-100); color: var(--danger-700); }
.bc-chip.sha.muted { background: var(--bg); color: var(--ink-muted); }

/* Board load error + skeletons */
.board-error {
  display: flex; gap: var(--sp-3); align-items: center; width: 100%; text-align: left;
  padding: var(--sp-6); background: var(--surface);
  border: 1px solid var(--danger-100); border-radius: var(--radius); cursor: pointer;
}
.board-error .ic { color: var(--danger-700); flex: none; }
.board-error h4 { font-size: var(--text-md); margin-bottom: 2px; }
.board-error p { font-size: var(--text-sm); color: var(--ink-muted); }
.board-cols .skel { height: 56px; border-radius: 8px; background: linear-gradient(90deg, var(--line), var(--bg), var(--line)); margin: var(--sp-1); }

.board-ss-lead { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: 4px; }
.board-ss-note { font-size: var(--text-xs); color: var(--ink-subtle); margin-bottom: var(--sp-3); }

@media (max-width: 768px) {
  .bcol { flex-basis: 82vw; width: 82vw; }
}

/* ═══ Patients registry (Phase 4 Task B — Blueprint §2 screen 4) ═══════════ */
.pts-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.pts-h { font-size: var(--text-xl); font-weight: 700; }
.pts-meta { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 2px; }
.pts-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pts-search-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0 var(--sp-3); height: 36px;
}
.pts-search-wrap .ic { color: var(--ink-subtle); flex: none; }
.pts-search {
  border: none; outline: none; background: transparent; font-size: var(--text-sm);
  width: 240px; max-width: 46vw; color: var(--ink);
}

.pts-banner {
  display: block; margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
  background: var(--brand-100); color: var(--brand-800);
  border: 1px solid var(--line); font-size: var(--text-sm);
}

/* Bulk-assign bar — selection survives realtime re-render (module-held Set). */
.pts-assign-bar {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  background: var(--brand-100); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); font-size: var(--text-sm);
}
.pts-ab-count { font-weight: 700; }
.pts-ab-note { font-size: var(--text-xs); color: var(--warn-700); font-weight: 600; }
.pts-ab-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pts-ab-sel {
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px;
  font-size: var(--text-sm); background: var(--surface); color: var(--ink);
}

/* List + rows */
.pts-list {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.pts-rhdr, .pts-row {
  display: grid;
  grid-template-columns: 1.6fr 150px 160px 96px 210px;
  gap: var(--sp-3); align-items: center;
}
.pts-rhdr.sel, .pts-row.sel {
  grid-template-columns: 30px 1.6fr 150px 160px 96px 210px;
}
.pts-rhdr {
  padding: var(--sp-2) var(--sp-4); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-subtle);
  border-bottom: 1px solid var(--line);
}
.pts-sortable { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; }
.pts-sortable::after { content: ''; opacity: 0.4; }
.pts-sortable.asc::after { content: '▲'; opacity: 1; font-size: 8px; }
.pts-sortable.desc::after { content: '▼'; opacity: 1; font-size: 8px; }
.pts-sortable:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 3px; }

.pts-row { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.pts-row:last-child { border-bottom: none; }
.pts-row:hover { background: var(--bg); }
.pts-row.closed { opacity: 0.72; }
/* The checkbox GLYPH stays 15px, but its cell gives it a 44px hit region — a
   mis-tap here feeds straight into a bulk assignment write. */
.pts-selcell { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin-left: calc(var(--sp-2) * -1); }
.pts-sel { width: 15px; height: 15px; accent-color: var(--brand-700); cursor: pointer; }
.pts-cell { min-width: 0; }
.pts-pc { display: flex; gap: var(--sp-3); align-items: center; cursor: pointer; min-width: 0; }
.pts-av {
  width: 36px; height: 36px; border-radius: 999px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-muted); color: #FFFFFF; font-weight: 700; font-size: 12px;
}
.pts-pi { min-width: 0; display: flex; flex-direction: column; }
.pts-nm { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.pts-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts-sub { font-size: var(--text-xs); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pts-stage { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; }
.pts-sw { width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--ink-subtle); }
.pts-owner { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--ink-muted); }
.pts-owner .ic { color: var(--ink-subtle); flex: none; }
.pts-acts { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

.pts-tag {
  font-size: var(--text-xs); border-radius: 999px; padding: 2px 9px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600;
}
.pts-tag.muted { background: var(--bg); color: var(--ink-muted); font-weight: 500; }
.pts-tag.danger { background: var(--danger-100); color: var(--danger-700); }
.pts-tag.unassigned { background: var(--warn-100); color: var(--warn-700); }

/* Three distinct empty states */
.pts-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center; padding: var(--sp-8, 40px) var(--sp-4);
}
.pts-empty .ic { color: var(--ink-subtle); }
.pts-empty.load-error .ic { color: var(--danger-700); }
.pts-empty h4 { font-size: var(--text-md); }
.pts-empty p { font-size: var(--text-sm); color: var(--ink-muted); max-width: 42ch; }
.pts-empty .btn { margin-top: var(--sp-2); }
.pts-list .skel { height: 52px; margin: var(--sp-2); border-radius: 8px; background: linear-gradient(90deg, var(--line), var(--bg), var(--line)); }
.pts-more { display: flex; justify-content: center; margin-top: var(--sp-3); }

/* Archive / close (R-024 outcome capture) modal body */
.arch { display: flex; flex-direction: column; gap: var(--sp-3); }
.arch-warn {
  background: var(--danger-100); border: 1px solid var(--danger-200); border-radius: 8px;
  padding: var(--sp-3); font-size: var(--text-sm); color: var(--danger-700);
}
.arch-hint { font-size: var(--text-xs); color: var(--ink-subtle); margin-top: 4px; }

@media (max-width: 768px) {
  .pts-rhdr, .pts-row { grid-template-columns: 1.4fr 120px; }
  .pts-rhdr.sel, .pts-row.sel { grid-template-columns: 26px 1.4fr 120px; }
  /* Keep only Patient + Actions columns on narrow screens (Stage/Owner/Risk
     fold away; the workspace shows the full detail). */
  .pts-rhdr > span:not(:first-child):not(:last-child),
  .pts-row > .pts-cell:not(.pts-pc):not(.pts-acts) { display: none; }
}

/* === Reports (Blueprint §2 screen 6 — the approved visual spec) ========== */
/* Tokens only: no raw hex except the chart palette, which is data-coloured by
   Chart.js and mirrored in the legend dots. Borders-first elevation per §3 —
   shadows are reserved for the sticky filter bar and the deck bar. */

.rpt { display: flex; flex-direction: column; gap: var(--sp-3); padding-bottom: var(--sp-12); }

.rpt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.rpt-h { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.rpt-h span { color: var(--brand-700); }
.rpt-meta { color: var(--ink-muted); font-size: var(--text-sm); margin-top: 2px; max-width: 70ch; }
.rpt-head-a { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Sticky chrome: filter bar + pivot freeze together below the top bar ---- */
/* .rpt-chrome is the sticky element (not the bar/pivot individually). It pins at
   --tb-h — directly under the app top bar (.tb, position:sticky top:0 z-30) — and
   because its parent #rpt-root is the full-height scroll content, it stays stuck
   the whole way down while the report body scrolls under it. Its background is the
   page colour so scrolling content is hidden behind it. --tb-h is shared with .tb
   so the two never drift. z below .tb (30) but above the report body (auto). */
.rpt-chrome {
  position: sticky; top: var(--tb-h); z-index: 20;
  background: var(--bg); padding-bottom: 1px;
}
/* ---- Filter bar (a card inside the chrome; no longer individually sticky) ---- */
.rpt-filterbar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3); box-shadow: 0 2px 8px rgb(10 20 50 / 6%);
}
/* .rpt-seg / .rpt-seg-b reused by the panel Clock radiogroup; .rpt-cl / .rpt-date
   reused by the period-popover custom range; .rpt-chip base by the Compare chip. */
.rpt-seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 2px; gap: 2px; }
.rpt-seg-b {
  appearance: none; border: 0; background: none; cursor: pointer;
  padding: 6px 11px; border-radius: 7px; font-size: var(--text-xs); font-weight: 500; color: var(--ink-muted);
  min-height: 44px;
}
.rpt-seg-b.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(10 20 50 / 6%); }
.rpt-chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  font-size: var(--text-xs); font-weight: 500; color: var(--ink);
}
.rpt-chip:hover { border-color: var(--brand-700); background: var(--brand-100); }
.rpt-chip.on { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.rpt-clear {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: var(--text-xs); color: var(--brand-700); font-weight: 600; padding: 8px;
}
.rpt-cl { font-size: var(--text-xs); color: var(--ink-muted); }
.rpt-date { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: var(--text-xs); background: var(--surface); }
/* ---- Slim filter bar (Power BI-style redesign) ---- */
.rpt-fb { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-height: 44px; }
.rpt-fb-sp { flex: 1 1 auto; min-width: 8px; }
.rpt-period-btn, .rpt-filters-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 99px;
  background: var(--surface); font-size: var(--text-sm); font-weight: 500; color: var(--ink);
}
.rpt-period-btn:hover, .rpt-filters-btn:hover { border-color: var(--brand-700); background: var(--brand-100); }
.rpt-period-btn:focus-visible, .rpt-filters-btn:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.rpt-period-clock { color: var(--ink-muted); }
.rpt-period-btn .ic { color: var(--ink-muted); }
.rpt-filters-btn.on { border-color: var(--brand-700); background: var(--brand-100); }
.rpt-filters-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px; background: var(--brand-700); color: #fff;
  font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.rpt-compare-chip.on { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.rpt-compare-chip.on .ic { color: #fff; }

/* Period popover */
.rpt-period-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; min-width: 220px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(10 20 50 / 12%); padding: var(--sp-1);
}
.rpt-pop-g { display: flex; flex-direction: column; }
.rpt-period-opt {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left;
  padding: 9px 10px; border-radius: 7px; font-size: var(--text-sm); color: var(--ink); min-height: 40px;
}
.rpt-period-opt:hover { background: var(--bg); }
.rpt-period-opt.on { background: var(--brand-700); color: #fff; font-weight: 600; }
.rpt-period-opt:focus-visible { outline: 2px solid var(--brand-700); outline-offset: -2px; }
.rpt-period-custom {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: var(--sp-2); margin-top: 4px; border-top: 1px solid var(--line);
}
.rpt-period-apply { margin-left: auto; }

/* Read-only programme hint */
.rpt-prog-hint {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: var(--text-xs); color: var(--ink-muted); white-space: nowrap;
}
.rpt-prog-hint .ic { color: var(--ink-subtle); }
.rpt-prog-hint b { color: var(--ink); }

/* Applied-filter chips (only when something is set) */
.rpt-applied { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rpt-applied-chip {
  display: inline-flex; align-items: stretch; border-radius: 99px; background: var(--brand-100);
}
.rpt-applied-b {
  appearance: none; border: 0; background: none; cursor: pointer; border-radius: 99px 0 0 99px;
  padding: 6px 4px 6px 11px; font-size: var(--text-xs); font-weight: 500; color: var(--brand-700); min-height: 32px;
}
.rpt-applied-x { color: var(--brand-700); opacity: 0.7; }
.rpt-chip-x {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--brand-700);
  position: relative; display: inline-flex; align-items: center; padding: 0 10px 0 4px; border-radius: 0 99px 99px 0;
}
/* The ✕ clears the WHOLE dimension (changes every number on the page), so its
   touch target is expanded to ~44px tall with a transparent overlay rather than by
   growing the visible pill — the same discipline the old removal chips used. No
   overflow:hidden on the chip, or this overlay would be clipped. */
.rpt-chip-x::after { content: ""; position: absolute; top: -6px; bottom: -6px; right: -6px; left: -2px; }
.rpt-chip-x:hover { color: var(--danger-700); }
.rpt-applied-chip:focus-within { outline: 2px solid var(--brand-700); outline-offset: 1px; }

/* Filters panel (right dock) + scrim */
.rpt-scrim { position: fixed; inset: 0; background: rgb(10 20 50 / 14%); z-index: 40; }
.rpt-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 92vw; z-index: 41;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgb(10 20 50 / 12%);
  display: flex; flex-direction: column; overflow: hidden;
}
.rpt-panel-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-4); border-bottom: 1px solid var(--line);
}
.rpt-panel-t { font-size: var(--text-md); font-weight: 700; }
.rpt-panel-x {
  appearance: none; border: 0; background: none; cursor: pointer; color: var(--ink-muted);
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px;
}
.rpt-panel-x:hover { background: var(--bg); color: var(--ink); }
.rpt-panel-clock { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.rpt-panel-cap { font-size: var(--text-xs); color: var(--ink-muted); margin-bottom: 6px; }
.rpt-clock-radio { display: flex; flex-direction: column; gap: 2px; background: none; border: 0; padding: 0; }
.rpt-clock-radio .rpt-seg-b { justify-content: flex-start; text-align: left; }
.rpt-groups { overflow-y: auto; padding: var(--sp-2) var(--sp-3) var(--sp-4); }
.rpt-group { border-bottom: 1px solid var(--line); }
.rpt-group-h {
  appearance: none; border: 0; background: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 4px;
  font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-align: left;
}
.rpt-group-h:hover { color: var(--brand-700); }
.rpt-group-h:focus-visible { outline: 2px solid var(--brand-700); outline-offset: -2px; border-radius: 6px; }
.rpt-group-h .ic { color: var(--ink-muted); transition: transform 0.12s ease; }
.rpt-group-h:not(.open) .ic { transform: rotate(-90deg); }
.rpt-group-t { flex: 1; }
.rpt-group-n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 99px; background: var(--brand-100); color: var(--brand-700);
  font-size: var(--text-xs); font-weight: 600;
}
.rpt-group-body { padding-bottom: var(--sp-2); }
/* The existing slice listbox, reused verbatim, sits FLAT inside a group. */
.rpt-group-body .rpt-menu { position: static; border: 0; box-shadow: none; width: auto; border-radius: 0; }
.rpt-group-body .rpt-menu-h { display: none; }
.rpt-group-body .rpt-menu-list { max-height: 240px; padding: 0; }

/* ---- Slice dropdown ---- */
.rpt-drop { position: relative; display: inline-flex; }
.rpt-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 280px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(10 20 50 / 12%); overflow: hidden;
}
.rpt-menu-h {
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-muted);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line);
}
.rpt-menu-list { max-height: 300px; overflow-y: auto; padding: var(--sp-1); }
.rpt-opt {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  padding: 8px var(--sp-2); border-radius: 7px; font-size: var(--text-sm); min-height: 36px;
}
.rpt-opt:hover { background: var(--bg); }
/* The arrow-key cursor. The listbox itself holds the DOM focus (one tab stop),
   so the active option needs a visible ring of its own or the keyboard user has
   no idea what Enter would toggle. */
.rpt-opt.active { background: var(--bg); outline: 2px solid var(--brand-700); outline-offset: -2px; }
.rpt-menu-list:focus { outline: 2px solid var(--brand-700); outline-offset: -2px; }
.rpt-opt-box {
  width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--line);
  border-radius: 4px; display: grid; place-items: center; font-size: 11px; color: #fff;
}
.rpt-opt.on .rpt-opt-box { background: var(--brand-700); border-color: var(--brand-700); }
.rpt-opt-l { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Banners / errors ---- */
.rpt-banner { border-radius: var(--radius); padding: var(--sp-3); font-size: var(--text-sm); }
.rpt-banner.warn { background: var(--warn-100); border: 1px solid var(--warn-500); color: var(--warn-700); }
.rpt-error {
  background: var(--surface); border: 1px solid var(--danger-200); border-left: 3px solid var(--danger-700);
  border-radius: var(--radius); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start;
}
.rpt-error-t { font-weight: 700; color: var(--danger-700); font-size: var(--text-md); }
.rpt-error-d { color: var(--ink-muted); max-width: 60ch; }

/* ---- Executive summary band ---- */
.rpt-exec {
  background: linear-gradient(135deg, #12325C, var(--brand-900));
  color: #EAF0FA; border-radius: var(--radius); padding: var(--sp-5) var(--sp-6);
  box-shadow: 0 8px 24px rgb(10 20 50 / 10%);
}
.rpt-exec h2 { font-size: var(--text-md); color: #fff; font-weight: 700; }
.rpt-exec-sub { font-size: var(--text-xs); color: #9DB2D6; margin: 4px 0 var(--sp-4); }
.rpt-exec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.rpt-exec-m .v { font-size: var(--text-lg); font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.rpt-exec-m .l { font-size: var(--text-xs); color: #9DB2D6; }
.rpt-exec-m .dl { font-size: var(--text-xs); color: #C6D5EE; }
.rpt-exec-p { font-size: var(--text-sm); line-height: 1.65; color: #D6E0F2; }
.rpt-exec.empty { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.rpt-exec.empty h2 { color: var(--ink); }
.rpt-exec.empty p { color: var(--ink-muted); font-size: var(--text-sm); max-width: 60ch; }

/* ---- KPI band ---- */
.rpt-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.rpt-kpi {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); min-height: 118px;
}
.rpt-kpi.isnew { box-shadow: inset 0 0 0 1.5px rgb(22 119 59 / 30%); }
.rpt-kpi.rag-danger { border-left: 3px solid var(--danger-700); }
.rpt-kpi.rag-warn { border-left: 3px solid var(--warn-700); }
.rpt-kpi.rag-ok { border-left: 3px solid var(--ok-700); }
.rpt-kpi-l { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.rpt-kpi-v { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rpt-kpi-d { font-size: var(--text-xs); margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; color: var(--ink-muted); padding-right: 62px; }
.rpt-kpi-spk { position: absolute; right: 12px; bottom: 12px; }
.rpt-target { font-size: var(--text-xs); color: var(--ink-subtle); font-weight: 500; }
.rpt-deltawrap { white-space: nowrap; }
.rpt-delta { font-weight: 700; }
.rpt-delta.up { color: var(--ok-700); }
.rpt-delta.down { color: var(--danger-700); }
.rpt-nodelta { color: var(--ink-subtle); font-style: italic; }

/* ---- Sections + cards ---- */
.rpt-sec-h { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-5) 2px var(--sp-1); }
.rpt-sec-h h2 { font-size: var(--text-md); font-weight: 700; }
.rpt-ln { flex: 1; height: 1px; background: var(--line); }
.rpt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); align-items: start; }
.rpt-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rpt-card.isnew { box-shadow: inset 0 0 0 1.5px rgb(22 119 59 / 26%); }
.rpt-card.needs { border-style: dashed; background: var(--bg); }
.rpt-card-h { padding: var(--sp-3) var(--sp-4) 2px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.rpt-card-t { font-size: var(--text-sm); font-weight: 700; }
.rpt-card-a { display: flex; gap: 5px; align-items: center; flex-shrink: 0; }
.rpt-card-b { padding: var(--sp-2) var(--sp-4) var(--sp-4); }

.rpt-info {
  appearance: none; border: 0; background: none; cursor: help; padding: 2px 4px;
  color: var(--ink-muted); font-size: var(--text-xs); min-width: 24px; min-height: 24px;
}
.rpt-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; white-space: nowrap;
  letter-spacing: 0.04em;
}
.rpt-badge.new { color: var(--ok-700); background: var(--ok-100); }
.rpt-badge.enh { color: var(--info-700); background: var(--info-100); }
.rpt-badge.needs { color: var(--warn-700); background: var(--warn-100); }
.rpt-deckbox { font-size: 10px; color: var(--ink-muted); display: inline-flex; gap: 3px; align-items: center; cursor: pointer; }
.rpt-deckbox input { accent-color: var(--brand-700); width: 14px; height: 14px; }

.rpt-needs { padding: var(--sp-2) 0; }
.rpt-needs-t { font-size: var(--text-sm); font-weight: 600; color: var(--warn-700); }
.rpt-needs-d { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 4px; line-height: 1.55; }
.rpt-empty { font-size: var(--text-sm); color: var(--ink-muted); padding: var(--sp-2) 0; }
.rpt-note { font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--sp-2); line-height: 1.5; }
.rpt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }

/* ---- Charts + hand-rolled visuals ---- */
/* A REAL fallback height. The per-tile height arrives from JS (applyGeometry
   reads data-h — CSP blocks inline style attributes), and if that pass ever
   fails to run, a wrapper with no height at all collapses to 0px: every chart
   disappears AND captureCharts skips the canvas, so the PowerPoint export builds
   with zero chart slides and still reports success. A wrong-but-visible height
   is recoverable; a silent 0 is not. */
.rpt-canvas-wrap { position: relative; width: 100%; height: 200px; }

/* Text alternative for a canvas: reachable by a screen reader, never painted.
   Same clip pattern as .pts-ab-lbl. */
.rpt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rpt-canvas-wrap.rpt-donut { flex: 0 0 190px; max-width: 190px; }
.rpt-donut-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.rpt-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.rpt-legend-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); padding: 2px 0; }
.rpt-legend-l { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.rpt-spark { display: block; }

/* Bar list: label + its count share a top line, a full-width proportional bar
   sits beneath — small counts stay readable (the number is read directly). */
.rpt-hbars { display: flex; flex-direction: column; gap: var(--sp-3); }
.rpt-hbar { display: flex; flex-direction: column; gap: 5px; }
.rpt-hbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.rpt-hbar-l { font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-hbar-v { font-size: var(--text-sm); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rpt-hbar-t { width: 100%; height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.rpt-hbar-f { display: block; height: 100%; border-radius: 99px; }
/* Tone legend for outcome-coloured bar lists (closure reasons). */
.rpt-tone-legend {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center;
  margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--line);
  font-size: var(--text-xs); color: var(--ink-muted);
}
.rpt-tone { display: inline-flex; align-items: center; gap: 5px; }
.rpt-tone-dot { width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto; }

.rpt-bigstat { font-size: var(--text-xl); font-weight: 800; margin: var(--sp-2) 0 var(--sp-1); font-variant-numeric: tabular-nums; }
.rpt-gauge { position: relative; height: 10px; background: var(--bg); border-radius: 5px; }
.rpt-gauge-f { display: block; height: 100%; border-radius: 5px; }
.rpt-gauge-f.ok { background: var(--ok-700); }
.rpt-gauge-f.warn { background: var(--warn-700); }
.rpt-gauge-f.danger { background: var(--danger-700); }
.rpt-gauge-t { position: absolute; top: -3px; width: 2px; height: 16px; background: var(--ink); }

/* ---- Mini tables ---- */
.rpt-tw { overflow-x: auto; }
.rpt-mt { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.rpt-mt th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.rpt-mt td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.rpt-mt th.n, .rpt-mt td.n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rpt-mt td.danger { color: var(--danger-700); font-weight: 600; }
.rpt-mt td.warn { color: var(--warn-700); font-weight: 600; }
.rpt-rowlink { cursor: pointer; }
.rpt-rowlink:hover { background: var(--bg); }
.rpt-heat td.n { min-width: 42px; }
.rpt-tag { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.rpt-tag.warn { color: var(--warn-700); background: var(--warn-100); }
.rpt-tag.danger { color: var(--danger-700); background: var(--danger-100); }

/* ---- Record notes (workspace side panel — merge/data provenance) ---- */
/* pre-wrap keeps the notes' own line structure (each merge writes a dated
   block); the scroll cap stops a long trail from burying the panels below. */
.ws-notes {
  white-space: pre-wrap; overflow-wrap: break-word;
  font-size: var(--text-xs); line-height: 1.6; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3); max-height: 260px; overflow-y: auto;
}
.ws-notes-cap { font-size: 10px; color: var(--ink-subtle); margin-top: var(--sp-2); line-height: 1.5; }

/* ---- Sign-in activity (Operations tab, admin-only) ---- */
.rpt-si {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4);
}
/* Team activity — the adoption banner.
   Two states on purpose. The ordinary state is quiet furniture; the `.quiet`
   state (nobody opened the app all week) is deliberately loud, because a
   dashboard that looks the same whether the team is working or has stopped is
   the failure this page was built to prevent. */
.tm-banner {
  border: 1px solid var(--line); border-left: 4px solid var(--brand-700);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5); background: var(--bg);
}
.tm-banner.quiet { border-color: var(--danger-200); border-left-color: var(--danger-500); background: var(--danger-050); }
.tm-headline { font-size: var(--text-lg); font-weight: 600; color: var(--ink); line-height: 1.4; }
.tm-banner.quiet .tm-headline { color: var(--danger-700); }
.tm-detail { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.7; margin-top: var(--sp-2); }

.rpt-si-cap { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.7; margin-bottom: var(--sp-4); }
.rpt-si-cap b { color: var(--ink); }
.rpt-si-empty { font-size: var(--text-sm); color: var(--ink-muted); line-height: 1.6; }

/* 14 day columns. The bar HEIGHT arrives from JS (applyGeometry reads data-h —
   CSP blocks inline style attributes), so the track keeps a real height of its
   own and a zero day still shows a visible baseline rather than nothing. */
.rpt-si-strip {
  display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; align-items: end;
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-3);
}
.rpt-si-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.rpt-si-colwrap { display: flex; align-items: flex-end; height: 56px; width: 100%; }
.rpt-si-col {
  width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--brand-700);
}
.rpt-si-col.zero { background: var(--line); }
.rpt-si-dl {
  font-size: 10px; color: var(--ink-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; font-variant-numeric: tabular-nums;
}

.rpt-si-tot { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rpt-si-person {
  display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2) var(--sp-3);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 150px;
}
.rpt-si-person b { font-size: var(--text-sm); }
.rpt-si-n { font-size: var(--text-xs); color: var(--brand-700); font-weight: 600; font-variant-numeric: tabular-nums; }
.rpt-si-last { font-size: 10px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }

.rpt-si-list { max-height: 320px; overflow-y: auto; }
.rpt-si-row {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm);
}
.rpt-si-row:last-child { border-bottom: 0; }
.rpt-si-kind { color: var(--ok-700); font-size: var(--text-xs); font-weight: 600; }
.rpt-si-kind.mut { color: var(--ink-muted); font-weight: 400; }
.rpt-si-when {
  color: var(--ink-muted); font-size: var(--text-xs); margin-left: auto; font-variant-numeric: tabular-nums;
}
.rpt-si-dev { color: var(--ink-subtle); font-size: var(--text-xs); }

@media (max-width: 720px) {
  /* 14 equal columns on a phone gives ~18px bars with unreadable date labels.
     Switch to fixed-width columns laid out along a single row that scrolls, so
     all 14 days stay reachable at a legible size instead of being crushed. */
  .rpt-si-strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38px;
    overflow-x: auto; justify-content: start;
  }
}

/* ---- Footer strips ---- */
.rpt-privacy {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-4); font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.7; margin-top: var(--sp-5);
}
.rpt-privacy b { color: var(--ink); }
.rpt-deckbar {
  position: sticky; bottom: var(--sp-4); align-self: center; margin-top: var(--sp-4);
  background: var(--brand-900); color: #fff; border-radius: 99px; padding: 10px 18px;
  font-size: var(--text-xs); font-weight: 600; box-shadow: 0 8px 24px rgb(10 20 50 / 26%);
  display: inline-flex; gap: var(--sp-2); align-items: center; z-index: 5;
}
.rpt-deckbar-n { font-weight: 400; color: #9DB2D6; }
.rpt-skel {
  height: 120px; border-radius: var(--radius); margin-bottom: var(--sp-3);
  background: linear-gradient(90deg, var(--line), var(--bg), var(--line));
}

/* ---- Pivot (report areas) — sits at the bottom of the sticky chrome ---- */
.rpt-pivot {
  display: flex; gap: 2px; margin: var(--sp-3) 0 0; overflow-x: auto;
  border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.rpt-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 10px var(--sp-3); min-height: 44px; margin-bottom: -1px;
  font-size: var(--text-sm); font-weight: 500; color: var(--ink-muted);
  border-bottom: 2px solid transparent;
}
.rpt-tab .ic { flex: 0 0 auto; }
.rpt-tab:hover { color: var(--ink); background: var(--brand-100); }
.rpt-tab.on { color: var(--brand-700); font-weight: 600; border-bottom-color: var(--brand-700); }
.rpt-tab:focus-visible { outline: 2px solid var(--brand-700); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.rpt-area { display: block; }
.rpt-area:focus { outline: none; }

/* ---- Overview: at-a-glance area scorecards ---- */
.rpt-sc-h2 {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink-muted); margin: var(--sp-5) 2px var(--sp-3);
}
.rpt-scorecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.rpt-scorecard {
  appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: var(--sp-4);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.rpt-scorecard:hover { border-color: var(--brand-700); box-shadow: 0 4px 14px rgb(10 20 50 / 8%); transform: translateY(-1px); }
.rpt-scorecard:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.rpt-sc-top { display: flex; align-items: center; gap: var(--sp-2); }
.rpt-sc-top .ic { color: var(--brand-700); flex: 0 0 auto; }
.rpt-sc-top .ic:last-child { margin-left: auto; color: var(--ink-subtle); }
.rpt-sc-t { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.rpt-sc-sub { font-size: var(--text-xs); color: var(--ink-subtle); }
.rpt-sc-kpis { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 2px; }
.rpt-sc-kpi { display: flex; flex-direction: column; }
.rpt-sc-kpi b { font-size: var(--text-lg); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.01em; }
.rpt-sc-kpi i { font-size: 11px; color: var(--ink-muted); font-style: normal; }
.rpt-sc-chip { align-self: flex-start; font-size: var(--text-xs); font-weight: 600; padding: 3px 10px; border-radius: 99px; }
.rpt-sc-chip.neutral { background: var(--bg); color: var(--ink-muted); }
.rpt-sc-chip.ok { background: rgb(22 119 59 / 10%); color: var(--ok-700); }
.rpt-sc-chip.warn { background: var(--warn-100); color: var(--warn-700); }
.rpt-sc-chip.danger { background: rgb(185 28 28 / 10%); color: var(--danger-700); }

@media (max-width: 1200px) {
  .rpt-kpis { grid-template-columns: repeat(4, 1fr); }
  .rpt-grid { grid-template-columns: repeat(2, 1fr); }
  .rpt-exec-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .rpt-kpis { grid-template-columns: repeat(2, 1fr); }
  .rpt-grid { grid-template-columns: 1fr; }
  .rpt-grid .rpt-card { grid-column: span 1 !important; }
  /* Slim row stays minimal on a phone: Period + Filters(badge) + Compare icon.
     The filters flyout goes full-screen; applied chips scroll instead of stacking;
     the read-only programme hint drops (the top-bar pill still carries it). */
  .rpt-panel { width: 100%; max-width: none; left: 0; border-left: 0; }
  .rpt-compare-chip .rpt-compare-t { display: none; }
  .rpt-prog-hint { display: none; }
  .rpt-applied { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  /* The pivot becomes a snap-scrolled chip row rather than a wrapping stack, so
     it never grows into a vertical rail that fights the app's left-edge nav. */
  .rpt-pivot { scroll-snap-type: x mandatory; }
  .rpt-tab { scroll-snap-align: start; }
}


/* ── Billing & expenses (Phase 5B) ───────────────────────────────────────── */
.bill-bar {
  display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.bill-seg { align-self: flex-end; margin-bottom: 1px; }
.bill-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; }
.bill-f input, .bill-f select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: var(--text-sm); font-family: inherit; color: var(--ink); background: var(--surface);
}
.bill-spacer { flex: 1 1 auto; }
.bill-chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-muted); }
.bill-kpis { grid-template-columns: repeat(4, 1fr); }
.bill-count { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; }

.bill-cats {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5);
}
.bill-cat { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 0; border-bottom: 1px solid var(--line); }
.bill-cat:last-child { border-bottom: 0; }
.bill-cat-l { width: 170px; font-size: var(--text-sm); font-weight: 500; }
.bill-cat-bar { flex: 1; height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bill-cat-bar i { display: block; height: 100%; background: var(--brand-700); border-radius: 4px; }
.bill-cat-n { width: 50px; text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--ink-muted); }
.bill-cat-v { width: 130px; text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; }

.bill-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bill-row {
  display: grid; grid-template-columns: 100px 1.6fr 1.2fr 150px 120px 90px 44px;
  gap: var(--sp-3); align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.bill-row:last-child { border-bottom: 0; }
.bill-head { background: var(--bg); font-size: var(--text-xs); font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.bill-desc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bill-link {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--ink);
  text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bill-link:hover { color: var(--brand-700); text-decoration: underline; }
.bill-clip { color: var(--ok-700); font-size: var(--text-xs); }
.bill-who { color: var(--ink-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-x { color: var(--danger-700); padding: 2px 7px; }
.bill-tag {
  display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--bg);
  border: 1px solid var(--line); font-size: 10.5px; font-weight: 600; color: var(--ink-muted); white-space: nowrap;
}
.bill-tag.ok { background: var(--ok-100); border-color: var(--ok-100); color: var(--ok-700); }
.bill-empty { padding: var(--sp-8); text-align: center; color: var(--ink-muted); font-size: var(--text-sm);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.bill-empty-cell { padding: var(--sp-5); text-align: center; color: var(--ink-muted); }
.bill-muted { color: var(--ink-muted); }
.ta-r { text-align: right; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.bill-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
.bill-detail div { display: flex; gap: 6px; }
.bill-detail dt { font-weight: 600; color: var(--ink-muted); }
.bill-detail dd { margin: 0; }
.bill-detail-b { margin-top: var(--sp-4); }
.bill-detail-b h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-muted); margin-bottom: 4px; }
.bill-detail-b p { font-size: var(--text-sm); color: var(--ink); }

/* Sponsor statement (R-023) — a document preview, printable on its own. */
.bill-stmt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--sp-5); overflow: hidden; }
.bill-stmt-bar { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); background: var(--brand-100); border-bottom: 1px solid var(--line); }
.bill-stmt-doc { padding: var(--sp-6) var(--sp-8); }
.bill-stmt-doc h3 { font-size: var(--text-lg); color: var(--brand-800); letter-spacing: -0.01em; }
.bill-stmt-sub { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--sp-5); }
.bill-stmt-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.bill-stmt-meta dt { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.bill-stmt-meta dd { margin: 2px 0 0; font-size: var(--text-sm); font-weight: 600; }
.bill-stmt-t { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bill-stmt-t th, .bill-stmt-t td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.bill-stmt-t thead th { background: var(--brand-700); color: #fff; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.03em; }
.bill-stmt-t tfoot th { border-top: 2px solid var(--brand-700); border-bottom: 0; font-size: var(--text-md); }
.bill-stmt-note { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-body); }

@media print {
  body * { visibility: hidden; }
  #bill-stmt, #bill-stmt * { visibility: visible; }
  #bill-stmt { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; }
  .no-print { display: none !important; }
}
@media (max-width: 1200px) {
  .bill-kpis { grid-template-columns: repeat(2, 1fr); }
  .bill-stmt-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .bill-row { grid-template-columns: 90px 1.4fr 110px 100px 40px; }
  .bill-row > :nth-child(3), .bill-row > :nth-child(6) { display: none; }
}

/* ─── Admin console (Phase 6) ────────────────────────────────────────────── */
.admin { display: flex; flex-direction: column; gap: var(--sp-5); }
.adm-lede { font-size: var(--text-sm); color: var(--ink-muted); max-width: 78ch; line-height: var(--leading-body); }
.adm-card { display: block; }
.adm-chd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--bg);
}
.adm-chd h2 { font-size: var(--text-md); font-weight: 700; color: var(--brand-800); }
.adm-sub-h { font-size: var(--text-xs); color: var(--ink-muted); margin-top: 3px; max-width: 74ch; line-height: var(--leading-body); }
.adm-meta { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.adm-hd-acts { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.adm-bd { padding: var(--sp-4) var(--sp-5); }
.adm-list { display: block; }
.adm-more { padding: var(--sp-3) var(--sp-5); }
.adm-note { font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--sp-3); line-height: var(--leading-body); max-width: 82ch; }
.adm-p { font-size: var(--text-sm); line-height: var(--leading-body); margin-bottom: var(--sp-3); }
.adm-p:last-child { margin-bottom: 0; }

/* Access-control status. Three states, three colours — "unknown" is NOT green. */
.adm-state { border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); background: var(--bg); }
.adm-state p { font-size: var(--text-sm); line-height: var(--leading-body); margin-top: 6px; }
.adm-state.adm-ok { background: var(--ok-100); border-color: var(--ok-100); }
.adm-state.adm-warn { background: var(--warn-100); border-color: var(--warn-100); }
.adm-state.adm-unknown { background: var(--bg); }
.adm-badge {
  display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 10.5px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-muted);
}
.adm-badge.adm-ok { background: var(--ok-700); border-color: var(--ok-700); color: #fff; }
.adm-badge.adm-warn { background: var(--warn-700); border-color: var(--warn-700); color: #fff; }
/* 'neutral' is a real state, not a missing one: something IS set up, but this
   app has not verified that anything server-side enforces it. Deliberately not
   green — see MFA_SCOPE_COPY in data/mfa.js. */
.adm-state.adm-neutral { background: var(--bg); }
.adm-badge.adm-neutral { background: var(--surface); border-color: var(--line); color: var(--ink); }

/* Team rows */
.adm-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-4);
  align-items: center; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line);
}
.adm-row:last-child { border-bottom: 0; }
.adm-row.inactive { background: var(--bg); }
.adm-row.inactive .adm-name { color: var(--ink-muted); text-decoration: line-through; }
.adm-who { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
.adm-av {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 99px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--brand-700); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
}
.adm-who-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-name { font-size: var(--text-sm); font-weight: 600; }
.adm-you { font-size: 10px; font-weight: 700; color: var(--brand-700); text-transform: uppercase; letter-spacing: 0.04em; }
.adm-sub { font-size: var(--text-xs); color: var(--ink-muted); }
.adm-cons { font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-body); max-width: 62ch; }
.adm-role, .adm-acc { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.adm-lab { font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; }
/* min-height 44px for the same reason .btn.sm carries it (see the note at
   .btn.sm): the type shrinks, the touch target never does. These are the
   controls that decide who can reach patient data — the role dropdown sits
   beside a 44px Save button, so without this the row LOOKS compliant while the
   actual decision control is a 26px sliver on a clinic tablet.
   16px type, not --text-xs: under 16px, iOS Safari zooms the viewport on focus
   and punts the layout every time somebody taps the audit date pickers or the
   6-digit code field (.login-mfa-code already uses 20px for this reason). */
.adm-sel, .adm-inp {
  padding: 6px 10px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 16px; font-family: inherit; background: var(--surface); color: var(--ink);
}

/* Audit filters + rows */
.adm-filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
.adm-f { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--ink-muted); font-weight: 600; }
.adm-f-grow { flex: 1 1 200px; }
.adm-f-grow .adm-inp { width: 100%; }
.adm-aud-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 190px 78px; gap: var(--sp-3);
  align-items: start; padding: 10px var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--text-sm);
}
.adm-aud-row:last-child { border-bottom: 0; }
.adm-aud-type {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--brand-800); background: var(--brand-100); border-radius: 99px;
  padding: 3px 9px; justify-self: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.adm-aud-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.adm-aud-sum { font-weight: 500; overflow-wrap: anywhere; }
.adm-aud-meta { font-size: var(--text-xs); color: var(--ink-muted); }
.adm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-chip { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; font-size: 11px; color: var(--ink-muted); }
.adm-aud-nolink { display: block; }

/* Error log (R-017) — refs/timestamps/codes only, PII-free by construction. */
.adm-err-row {
  display: grid; grid-template-columns: 130px 190px 160px minmax(0, 1fr); gap: var(--sp-3);
  padding: 9px var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--text-xs); align-items: baseline;
}
.adm-err-row:last-child { border-bottom: 0; }
.adm-ref { font-weight: 700; color: var(--brand-800); }
.adm-err-when, .adm-err-src { color: var(--ink-muted); }
.adm-err-msg { overflow-wrap: anywhere; color: var(--ink); }

.adm-empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--ink-muted); }
.adm-empty h4 { font-size: var(--text-sm); font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.adm-empty p { font-size: var(--text-xs); line-height: var(--leading-body); }

@media (max-width: 1100px) {
  .adm-row { grid-template-columns: minmax(0, 1fr); }
  .adm-role, .adm-acc { justify-content: flex-start; }
  .adm-aud-row { grid-template-columns: minmax(0, 1fr); }
  .adm-err-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 6 TASK B — MFA (R-021) · demo mode (R-034) · coachmark (R-031) ·
   mode-chip fallback (R-030) · county fixer (R-032)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Security card (R-021) ─────────────────────────────────────────────── */
.adm-note-warn { color: var(--warn-700); font-weight: 500; }
.adm-sec-acts { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }
.adm-sec-rec { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.adm-sec-h { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.adm-mfa-qr { display: flex; justify-content: center; padding: var(--sp-4); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--sp-4); }
.adm-mfa-qr img { width: 180px; height: 180px; image-rendering: pixelated; }
.adm-mfa-steps { margin: 0 0 var(--sp-4) 18px; font-size: var(--text-sm); line-height: var(--leading-body); }
.adm-mfa-steps li { margin-bottom: 5px; }
.adm-mfa-err { display: none; font-size: var(--text-xs); color: var(--danger-700); margin-top: var(--sp-2); font-weight: 600; }
.adm-mfa-err.show { display: block; }

/* ── Login MFA challenge (R-021) ───────────────────────────────────────── */
.login-mfa-lede { font-size: var(--text-sm); color: var(--ink-muted); line-height: var(--leading-body); margin-bottom: var(--sp-4); }
/* Wide tracking so a 6-digit code is read back digit by digit. */
.login-mfa-code { letter-spacing: 0.35em; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.login-mfa-out { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-body); }
.login-mfa-help { margin-top: var(--sp-3); color: var(--ink-subtle); }

/* ── Demo banner (R-034) ───────────────────────────────────────────────── */
/* In flow at the top of <body>: it pushes the app down instead of floating, so
   it cannot be scrolled past or covered by a modal overlay. */
.demo-banner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  padding: 10px var(--sp-5);
  background: repeating-linear-gradient(45deg, #7C2D12, #7C2D12 14px, #9A3412 14px, #9A3412 28px);
  color: #fff; border-bottom: 3px solid #FDBA74;
  position: relative; z-index: 9999;
}
.demo-banner-t { font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.demo-banner-s { font-size: var(--text-xs); color: #FFE8D5; line-height: var(--leading-body); }
/* The shell is 100vh-tall chrome; with the banner in flow it must give back
   the banner's height or the sidebar footer falls off the bottom. */
body.demo-mode .shell { height: auto; min-height: calc(100vh - 58px); }

/* ── Coachmark (R-031) ─────────────────────────────────────────────────── */
/* pointer-events:none on the bubble, auto on its button: the hint can never
   swallow a click meant for the app underneath (the inverse of the P2 modal
   hit-test rule, and just as load-bearing). */
.coachmark {
  position: absolute; top: 96px; left: 24px; z-index: 60;
  max-width: 320px; display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: 11px 13px; border-radius: var(--radius);
  background: var(--brand-800); color: #fff;
  box-shadow: 0 10px 28px rgba(12, 25, 41, 0.28);
  pointer-events: none;
}
.coachmark::before {
  content: ''; position: absolute; top: -6px; left: 22px;
  width: 12px; height: 12px; background: var(--brand-800); transform: rotate(45deg);
}
.coach-txt { font-size: var(--text-xs); line-height: var(--leading-body); }
.coach-x {
  pointer-events: auto; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.16); color: #fff; border: 0;
  border-radius: 6px; padding: 4px 9px; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  /* 44px app-wide minimum — small type, full target (see .btn.sm) */
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.coach-x:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Mode chip, non-persisting state (R-030) ───────────────────────────── */
.mode-chip-unsaved { opacity: 0.85; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ── County fixer in the import preview (R-032) ────────────────────────── */
.import-cfix-list { list-style: none; margin: var(--sp-3) 0 0; display: flex; flex-direction: column; gap: 6px; }
.import-cfix-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; font-size: var(--text-xs); }
.import-cfix-n { font-weight: 700; min-width: 62px; }
.import-cfix-typed { color: var(--ink-muted); min-width: 150px; overflow-wrap: anywhere; }
.import-cfix-sel {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); font-size: var(--text-xs); color: var(--ink); min-width: 190px;
}
.import-cfix-more { margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-body); }

@media (max-width: 720px) {
  .import-cfix-row { flex-direction: column; align-items: stretch; }
  .import-cfix-sel { min-width: 0; width: 100%; }
  .coachmark { max-width: calc(100vw - 32px); }
}

/* ── Legacy patients (2024-26 register migration) ──────────────────────── */
.view-sub { font-size: var(--text-sm); color: var(--ink-muted); margin-top: var(--sp-1); }
.lg-tools { margin: var(--sp-4) 0; }
.lg-tools input {
  width: 100%; max-width: 420px; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface); font-size: var(--text-sm); color: var(--ink);
}
.lg-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: var(--sp-4); overflow: hidden; }
.lg-sec.act { border-color: var(--brand-700); }
.lg-sec-h {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2); text-align: left;
  background: none; border: 0; cursor: pointer; padding: var(--sp-4);
  font-size: var(--text-md); font-weight: 700; color: var(--ink); min-height: 44px;
}
.lg-sec.act > .lg-sec-h { color: var(--brand-700); }
.lg-caret { color: var(--ink-subtle); width: 16px; flex-shrink: 0; }
.lg-count {
  margin-left: auto; background: var(--brand-100); color: var(--brand-800);
  border-radius: 999px; padding: 2px 10px; font-size: var(--text-xs); font-weight: 700;
}
.lg-sec.arch .lg-count { background: var(--line); color: var(--ink-muted); }
.lg-sec-b { padding: 0 var(--sp-4) var(--sp-4); }
.lg-nurse { margin-bottom: var(--sp-4); }
.lg-nurse-h {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ink-subtle); margin: var(--sp-3) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2);
}
.lg-nurse-h .lg-count { margin-left: 0; }
.lg-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-3); align-items: center;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: 9px; margin-bottom: var(--sp-2);
  background: var(--bg);
}
.lg-main { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); font-size: var(--text-sm); }
.lg-code { font-family: ui-monospace, monospace; font-size: var(--text-xs); color: var(--brand-700); font-weight: 600; }
.lg-meta { font-size: var(--text-xs); color: var(--ink-muted); }
.lg-hint { grid-column: 1; font-size: var(--text-xs); color: var(--warn-700); line-height: var(--leading-body); }
.lg-hint.mut { color: var(--ink-muted); }
.lg-row > .btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; }
.lg-empty { font-size: var(--text-sm); color: var(--ink-muted); padding: var(--sp-2) 0; }

/* Workspace: register-history panel + hint banner */
.ws-legacy-hint {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  background: var(--warn-100); color: var(--warn-700);
  border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  font-size: var(--text-sm); line-height: var(--leading-body);
}
.ws-legacy-hint .ic { flex-shrink: 0; margin-top: 2px; }
.ws-legacy-src { color: var(--ink-muted); font-size: var(--text-xs); }
.ws-ep-list { max-height: 420px; overflow-y: auto; margin-top: var(--sp-3); padding-right: 4px; }
.ws-ep-m { margin-bottom: var(--sp-3); }
.ws-ep-mh {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--brand-700); margin-bottom: var(--sp-1);
  position: sticky; top: 0; background: var(--surface); padding: 2px 0;
}
.ws-ep { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.ws-ep:last-child { border-bottom: 0; }
.ws-ep-l { font-size: var(--text-xs); color: var(--ink); line-height: var(--leading-body); }
.ws-ep-c { font-size: var(--text-xs); color: var(--ink-muted); font-style: italic; margin-top: 2px; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .lg-row { grid-template-columns: 1fr; }
  .lg-row > .btn { grid-row: auto; justify-self: start; }
}

/* ── Admin §3b sign-in history ─────────────────────────────────────────── */
.adm-si-tot { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.adm-si-chip {
  background: var(--brand-100); color: var(--brand-800); border-radius: 999px;
  padding: 4px 12px; font-size: var(--text-xs);
}
.adm-si-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--text-sm);
}
.adm-si-row:last-child { border-bottom: 0; }
.adm-si-kind { color: var(--ok-700); font-size: var(--text-xs); font-weight: 600; }
.adm-si-kind.mut { color: var(--ink-muted); font-weight: 400; }
.adm-si-when { color: var(--ink-muted); font-size: var(--text-xs); margin-left: auto; }
.adm-si-dev { color: var(--ink-subtle); font-size: var(--text-xs); }

/* ─── Training — course list, player, checks (src/views/training.js) ─────── */

.tr-body { max-width: 880px; }

/* Progress meter — one primitive, used at course, chapter, part and check level. */
.tr-meter {
  display: block; height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--line); width: 100%;
}
.tr-meter > span { display: block; height: 100%; background: var(--brand-700); border-radius: 3px; }
/* Fill widths as classes, not inline styles — the deployed CSP is
   style-src 'self' and would drop a style attribute, emptying every bar. */
.tr-w0 { width: 0; } .tr-w5 { width: 5%; } .tr-w10 { width: 10%; }
.tr-w15 { width: 15%; } .tr-w20 { width: 20%; } .tr-w25 { width: 25%; }
.tr-w30 { width: 30%; } .tr-w35 { width: 35%; } .tr-w40 { width: 40%; }
.tr-w45 { width: 45%; } .tr-w50 { width: 50%; } .tr-w55 { width: 55%; }
.tr-w60 { width: 60%; } .tr-w65 { width: 65%; } .tr-w70 { width: 70%; }
.tr-w75 { width: 75%; } .tr-w80 { width: 80%; } .tr-w85 { width: 85%; }
.tr-w90 { width: 90%; } .tr-w95 { width: 95%; } .tr-w100 { width: 100%; }
.tr-meter.full > span { background: var(--ok-500); }
.tr-meter.on-dark { background: rgba(255, 255, 255, 0.22); }
.tr-meter.on-dark > span { background: #E8A838; }

/* Resume card — the one thing a returning nurse should have to look at. */
.tr-resume {
  background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
  color: #fff; border-radius: 14px; padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.tr-resume-k {
  margin: 0; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: #E8A838;
}
.tr-resume-t { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--text-lg); line-height: var(--leading-tight); text-wrap: balance; }
.tr-resume-m { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: rgba(255, 255, 255, 0.78); }
.tr-resume .btn.pri { background: #E8A838; border-color: #E8A838; color: var(--brand-900); font-weight: 700; }
.tr-resume .btn.pri:hover { background: #F0B958; border-color: #F0B958; }
.tr-resume-p { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.tr-resume-p p { margin: 0; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.78); }

/* Chapters — the course reads as a journey, not a pile of files. */
.tr-chapter { margin-bottom: var(--sp-8); }
.tr-ch-head { margin-bottom: var(--sp-3); }
.tr-ch-k {
  margin: 0; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-subtle);
}
.tr-ch-t { margin: 2px 0 var(--sp-1); font-size: var(--text-lg); line-height: var(--leading-tight); }
.tr-ch-b { margin: 0 0 var(--sp-3); font-size: var(--text-sm); color: var(--ink-muted); max-width: 62ch; }
.tr-ch-p { display: flex; align-items: center; gap: var(--sp-3); }
.tr-ch-p .tr-meter { max-width: 200px; }
.tr-ch-p span:last-child {
  font-size: var(--text-xs); color: var(--ink-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.tr-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.tr-card {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
  text-align: left; font: inherit; color: var(--ink);
  transition: border-color 120ms var(--ease), transform 120ms var(--ease);
}
.tr-card:hover { border-color: var(--brand-700); transform: translateX(2px); }
.tr-ord {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: 700; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.tr-done .tr-ord { background: var(--ok-100); border-color: var(--ok-500); color: var(--ok-700); font-size: var(--text-sm); }
.tr-live .tr-ord { background: var(--brand-100); border-color: var(--brand-700); color: var(--brand-700); }
.tr-card-b { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.tr-title { font-weight: 600; line-height: var(--leading-tight); }
.tr-meta { color: var(--ink-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tr-card .tr-meter { max-width: 160px; margin-top: 2px; }

.tr-pill {
  flex: none; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
  padding: 3px var(--sp-3); border-radius: 999px;
  background: var(--bg); color: var(--ink-muted); border: 1px solid var(--line);
}
.tr-pill-done { background: var(--ok-100); color: var(--ok-700); border-color: transparent; }
.tr-pill-check { background: var(--warn-100); color: var(--warn-700); border-color: transparent; }
.tr-pill-live { background: var(--brand-100); color: var(--brand-700); border-color: transparent; }

/* Player */
.tr-player { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.tr-crumb { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.tr-crumb-ch { font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.tr-play-title {
  display: flex; align-items: baseline; gap: var(--sp-3); margin: 0;
  font-size: var(--text-lg); line-height: var(--leading-tight); text-wrap: balance;
}
.tr-play-ord { font-size: var(--text-xl); font-weight: 700; color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.tr-stage { width: 100%; }
#tr-video { width: 100%; max-height: 62vh; background: #000; border-radius: 10px; display: block; }
.tr-nav { display: flex; gap: var(--sp-2); width: 100%; }
.tr-nav .btn { flex: 1; justify-content: center; }
.tr-nav .btn:disabled { opacity: 0.45; cursor: default; }
.tr-upnext { margin: calc(-1 * var(--sp-2)) 0 0; font-size: var(--text-xs); color: var(--ink-muted); }
.tr-note {
  background: var(--warn-100); border: 1px solid var(--warn-500);
  border-radius: 10px; padding: var(--sp-4) var(--sp-5); width: 100%;
}
.tr-note h4 { margin: 0 0 var(--sp-2); font-size: var(--text-md); color: var(--warn-700); }
.tr-note p { margin: 0; font-size: var(--text-sm); color: var(--ink); max-width: 62ch; }
.tr-check {
  width: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: var(--sp-4) var(--sp-5);
}
.tr-check-done { border-color: var(--ok-500); background: var(--ok-100); }
.tr-resume-check {
  width: 100%; background: var(--warn-100); border: 1px solid var(--warn-500);
  border-radius: 10px; padding: var(--sp-4) var(--sp-5);
}
.tr-resume-check h3 { margin: 0 0 var(--sp-2); font-size: var(--text-md); color: var(--warn-700); }
.tr-resume-check p { margin: 0 0 var(--sp-3); font-size: var(--text-sm); max-width: 62ch; }

/* Course complete — the certificate offer, and the certificate itself. */
.tr-cert-cta {
  background: linear-gradient(135deg, var(--ok-700), var(--brand-700));
  color: #fff; border-radius: 14px; padding: var(--sp-6); margin-bottom: var(--sp-8);
}
.tr-cert-cta-k {
  margin: 0; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: #FFE9BE;
}
.tr-cert-cta h2 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--text-lg); }
.tr-cert-cta p { margin: 0 0 var(--sp-4); font-size: var(--text-sm); color: rgba(255,255,255,0.85); max-width: 62ch; }
.tr-cert-cta .btn.pri { background: #fff; border-color: #fff; color: var(--brand-900); font-weight: 700; }

#tr-cert-host { display: none; }
.tr-cert-in {
  border: 3px double var(--brand-700); border-radius: 6px;
  padding: 46px 54px; text-align: center; background: #fff; color: #0D1117;
}
.tr-cert-k { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-700); }
.tr-cert-h { margin: 14px 0 26px; font-size: 34px; line-height: 1.15; }
.tr-cert-l { margin: 0; font-size: 15px; color: #33405C; max-width: 60ch; margin-inline: auto; }
.tr-cert-n { margin: 12px 0 18px; font-size: 30px; font-weight: 700; }
.tr-cert-f { display: flex; gap: 32px; justify-content: center; margin: 30px 0 16px; font-size: 14px; }
.tr-cert-r { margin: 0; font-size: 13px; color: #5E6780; font-variant-numeric: tabular-nums; }
.tr-cert-s { margin: 6px 0 0; font-size: 12px; color: #6B7490; }

/* Printing: the certificate is the ONLY thing on the paper.
   Two separate faults were fixed here, both invisible on screen:
     - an A4 LANDSCAPE @page against portrait paper rotated the content off
       the sheet, which is why the printout came out blank;
     - hiding the app by visibility alone left its boxes occupying height, so
       the certificate printed on page 1 and the empty app on page 2. The app
       is REMOVED from the print layout instead, and the host is the only
       thing with a height. */
@media print {
  body.printing-cert > *:not(#tr-cert-host) { display: none !important; }
  /* the billing-statement print rule above blanks `body *`, this page included */
  body.printing-cert #tr-cert-host,
  body.printing-cert #tr-cert-host * { visibility: visible !important; }
  body.printing-cert #tr-cert-host { display: block !important; }
  body.printing-cert,
  body.printing-cert #tr-cert-host { background: #fff; height: auto; overflow: visible; }
  .tr-cert-in { border-color: #1F4477; page-break-inside: avoid; break-inside: avoid; }
  @page { size: A4 portrait; margin: 16mm; }
}

.tr-check-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.tr-check-head .tr-meter { max-width: 220px; }
.tr-fin { margin: 0; font-size: var(--text-sm); color: var(--ok-700); font-weight: 600; }
.tr-check h3 { margin: 0 0 var(--sp-2); font-size: var(--text-md); }
.tr-q { font-weight: 600; margin: var(--sp-2) 0 var(--sp-3); }
.tr-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.tr-opt {
  display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%;
  padding: var(--sp-3) var(--sp-4); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  text-align: left; font: inherit; color: var(--ink);
}
.tr-opt:hover:not(:disabled) { border-color: var(--ink-subtle); }
.tr-opt:disabled { cursor: default; opacity: 0.75; }
.tr-opt-right { border-color: var(--ok-500); background: var(--ok-100); opacity: 1 !important; }
.tr-opt-k { font-weight: 700; color: var(--ink-subtle); text-transform: uppercase; }
.tr-fb { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 8px; font-size: var(--text-sm); }
.tr-fb.ok { background: var(--ok-100); color: var(--ok-700); }
.tr-fb.warn { background: var(--warn-100); color: var(--warn-700); }
.tr-fb.nudge { background: var(--warn-100); color: var(--warn-700); }
.tr-attempts { color: var(--ink-muted); font-weight: 400; }
.tr-check-actions { margin-top: var(--sp-3); }
.rpt-tp .rpt-si-row b { max-width: 46ch; }