*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--canvas); color: var(--ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Shell ---------- */
.app {
  display: grid;
  grid-template-rows: 56px 1fr;
  grid-template-columns: 300px 1fr 380px;
  grid-template-areas:
    "top  top  top"
    "list main side";
  height: 100vh;
  min-height: 720px;
  transition: grid-template-columns .2s ease;
}
.app.side-wide   { grid-template-columns: 300px 1fr 540px; }
.app.side-closed { grid-template-columns: 300px 1fr 0; }
.app.side-closed .side { transform: translateX(100%); }

/* ---------- App shell grid: ops mode (app-shell-navigation-design §3
   "Grid shell change", task 1.2) ----------
   4-area grid -- rail + list + main -- scoped to `.app.ops` only; the
   legacy `mode=patient` 3-column grid above (`.app` base + `.side-wide` /
   `.side-closed`) is untouched, zero regression surface there.
   `list` (the patient search/queue column) carries real width only on
   `page=patients`; every other page gets `.page-full`, which collapses it
   to 0 width while keeping it mounted (hybrid mount model -- §3 "Mount
   model"), reclaiming the dead `side` column's space for `main`. */
.app.ops {
  grid-template-columns: 208px 300px 1fr;
  grid-template-areas:
    "top  top  top"
    "rail list main";
}
.app.ops.page-full {
  grid-template-columns: 208px 0 1fr;
}
.app.ops.page-full .list {
  overflow: hidden;
  padding: 0;
  border-right: 0;
}
/* Narrow-width icon-only collapse (§3 "Collapse"): pure CSS, no state,
   no testid change. Labels + group headers go visually-hidden (kept in
   the DOM for assistive tech); each rail item still carries a `title`
   tooltip (nav_rail.js) since the visible label disappears. */
@media (max-width: 1279px) {
  .app.ops { grid-template-columns: 64px 300px 1fr; }
  .app.ops.page-full { grid-template-columns: 64px 0 1fr; }
  .app.ops .rail-item { justify-content: center; padding: 10px 4px; gap: 4px; }
  .app.ops .rail-label,
  .app.ops .rail-group {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* ---------- Nav rail (app-shell-navigation-design §3, task 1.2) ---------- */
.rail {
  grid-area: rail;
  background: var(--surface);
  border-right: 1px solid var(--divider);
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 12px 8px;
  overflow-y: auto;
}
.rail-group {
  margin: 14px 10px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.rail-group:first-child { margin-top: 4px; }
.rail-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px; border-radius: 8px;
  color: var(--ink-muted); font-size: 13px; font-weight: 600; text-align: left;
}
.rail-item:hover { background: var(--surface-2); color: var(--ink); }
.rail-item.active {
  background: var(--surface-2); color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}
.rail-icon {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-muted);
  font-size: 11px; font-weight: 700;
}
.rail-item.active .rail-icon { background: var(--accent); color: var(--accent-ink); }
.rail-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--risk); color: var(--risk-ink);
}
/* Two-part prescriber-requests badge (§3): the inbound-new chip reads as
   intake work, not a doctor follow-up, so it gets a visually distinct
   (accent, not risk) treatment from the standard outbound-aged badge. */
.rail-badge-inbound { background: var(--accent); color: var(--accent-ink); }

/* ---------- Top bar ---------- */
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
.brand { font-weight: 700; font-size: 17px; letter-spacing: .3px;
  display: flex; align-items: center; gap: 10px; }
.brand svg { flex: 0 0 auto; }
.brand small { font-weight: 500; color: var(--ink-muted); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; }
.top-spacer { flex: 1; }
.env { display: flex; gap: 6px; align-items: center;
  color: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.env code { font-family: ui-monospace,"SF Mono",Menlo,monospace;
  background: var(--surface-2); padding: 2px 7px; border-radius: 4px;
  color: var(--ink); font-size: 11.5px; }
.top-action {
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--divider);
  color: var(--ink-muted); font-size: 12px;
}
.top-action:hover { background: var(--surface-2); color: var(--ink); }
.top-action.on { background: var(--surface-2); color: var(--ink); border-color: #d0d0cc; }

/* T3.2 handoff -- demo-reset lives next to the synthetic badge. The
   provisioning notice floats below the button (the topbar row is a fixed
   56px, so it can't grow to fit inline text). */
.topbar-reset { position: relative; display: flex; align-items: center; }
.topbar-reset-notice {
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--divider); border-radius: 8px;
  padding: 6px 10px; font-size: 11.5px; color: var(--ink-muted);
  box-shadow: var(--shadow-2); white-space: nowrap; z-index: 20;
}

/* ---------- Patient list ---------- */
.list { grid-area: list; border-right: 1px solid var(--divider);
  background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.list-search { padding: 14px 14px 10px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.list-search input { width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--divider); background: var(--surface-2);
  color: var(--ink); outline: none; }
.list-search input:focus { border-color: var(--accent); background: var(--surface); }
.list-scroll { overflow-y: auto; padding: 6px 10px 12px; }
.pcard { padding: 12px 12px 12px 14px;
  border-radius: var(--radius-card); cursor: pointer; position: relative;
  display: flex; gap: 12px; align-items: center;
  margin: 4px 0; border: 1px solid transparent; }
.pcard:hover { background: var(--surface-2); }
.pcard.selected { background: var(--surface-2); border-color: var(--divider); box-shadow: var(--shadow-1); }
.pcard.selected::before { content: ""; position: absolute; left: -2px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--accent); }
.avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #E7E3D8, #D9E2F0);
  color: var(--ink); display: grid; place-items: center;
  font-weight: 600; font-size: 13px; }
.pcard-main { min-width: 0; flex: 1; }
.pcard-name { font-weight: 600; font-size: 14px; letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-meta { color: var(--ink-soft); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard-right { text-align: right; font-size: 11px; color: var(--ink-muted); }
.pcard-right .rx-count { font-weight: 600; color: var(--ink); font-size: 13px; }
.empty-state { padding: 40px 24px; color: var(--ink-muted); text-align: center; font-size: 13px; }

/* ---------- Main ---------- */
/* app-shell-navigation-design.md fix (e2e failure #1 -- api_down banner
   hidden on non-patients pages): the global ops status banners
   (ops-api-banner / ops-workflow-banner / ops-loading-banner) render
   above whatever page is active, not only inside the patient profile.
   `.ops-page-region` is now the actual "main"-area grid item; each
   page's own `.main`-classed content nests inside it via normal block
   flow (or via the patients wrapper's `display:contents`), so the
   banner and the routed page content share one scrollable region. */
.ops-page-region { grid-area: main; overflow-y: auto; min-width: 0; }
.ops-global-alerts { padding: 16px 28px 0; }
.main { grid-area: main; overflow-y: auto; padding: 22px 28px 40px; min-width: 0; }
.patient-header {
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  padding: 18px 20px; margin-bottom: 20px;
}
.patient-name { font-size: 20px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 6px; }
.patient-meta { color: var(--ink-muted); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.patient-meta .mchip { padding: 3px 10px; background: var(--surface-2);
  border-radius: var(--radius-pill); font-size: 12px; color: var(--ink);
  border: 1px solid var(--divider); }
/* Phase 6.5 — coupon-card chip in the patient header sits next
   to the plan chip, uses the pink palette token. Distinct from
   the billing-flag chip because this is a plan-level signal,
   not a per-Rx decision. */
.patient-meta .mchip.coupon {
  background: var(--coupon); color: var(--coupon-ink);
  border-color: transparent; font-weight: 600;
}
/* Phase 6.9 — product-type badges (supply, immunisation) on the
   Rx card. The supply palette token is reused so the chip
   visually ties to the "Diabetic supply" therapeutic class. */
.chip[data-kind="product"].supply {
  background: var(--class-supply); color: var(--ink);
  border-color: transparent;
}
.chip[data-kind="product"].immunisation {
  background: var(--class-vitamin); color: var(--ink);
  border-color: transparent;
}
/* Phase 6.9 — linked-Rx badge (ADR-016 dedup canonical row).
   Muted, compact, sits inline with the Rx meta line. */
.linked-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--ink-muted);
  border: 1px solid var(--divider); font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.patient-stats { margin-top: 14px; display: flex; gap: 24px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid var(--divider); }
.stat { display: flex; flex-direction: column; }
.stat-n { font-size: 22px; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 11px; color: var(--ink-muted); letter-spacing: .05em; text-transform: uppercase; }
.stat.risk .stat-n { color: var(--risk-ink); }
.stat.warn .stat-n { color: var(--warn-ink); }
.stat.ok   .stat-n { color: var(--ok-ink); }

.section-h { display: flex; align-items: baseline; justify-content: space-between;
  margin: 10px 4px 12px; }
.section-h h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600; margin: 0; }
.section-h .plan-select { font-size: 12px; color: var(--ink-muted);
  display: flex; align-items: center; gap: 8px; }
.section-h select { font: inherit; font-size: 12px; color: var(--ink);
  border: 1px solid var(--divider); border-radius: 6px;
  padding: 4px 8px; background: var(--surface); }

/* ---------- Rx groups ---------- */
.group { margin-bottom: 14px; }
.group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 0 0 4px; border-radius: 8px; cursor: pointer;
}
.group-head:hover { background: var(--surface-2); }
.group-chev { font-size: 10px; color: var(--ink-soft); transition: transform .15s ease; }
.group.collapsed .group-chev  { transform: rotate(-90deg); }
.group.collapsed .group-body  { display: none; }
.group-title { font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink); }
.group-stripe { width: 10px; height: 10px; border-radius: 3px;
  background: var(--class-color, var(--class-unclassified)); }
.group-count { color: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.group-dot { width: 6px; height: 6px; border-radius: 50%; }
.group-dot.pa    { background: var(--risk); }
.group-dot.stale { background: var(--stale); }
.group-spacer { flex: 1; }
.group-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
.group.attention .group-head   { background: #FFF1F1; }
.group.attention .group-title  { color: var(--risk-ink); }

/* ---------- Rx card ---------- */
.rx { position: relative;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  padding: 14px 16px 12px 18px; overflow: hidden; }
.rx::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--class-color, var(--class-unclassified)); }
.rx-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rx-name { font-weight: 600; font-size: 15.5px; letter-spacing: -.1px;
  color: var(--ink); text-align: left; padding: 0; }
.rx-name:hover { color: var(--accent-ink); text-decoration: underline; }
.rx-strength { color: var(--ink-muted); font-weight: 500; font-size: 14px; margin-left: 4px; }
.rx-date { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.rx-meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rx-fill { margin-top: 6px; font-size: 12px; color: var(--ink-muted);
  display: flex; gap: 14px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.rx-fill b { color: var(--ink); font-weight: 600; }

.rx-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--divider); }
.rx-details {
  margin-left: auto; font-size: 12px; color: var(--accent-ink);
  padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--divider); background: var(--surface);
}
.rx-details:hover { background: var(--surface-2); }

.chip { display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--divider);
  cursor: pointer; user-select: none;
  transition: transform .06s ease, box-shadow .12s ease; }
.chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.chip[data-kind="class"]         { background: var(--class-color, var(--class-unclassified));
  border-color: transparent; color: var(--ink); }
.chip[data-kind="stale"].stale   { background: var(--stale);  color: var(--stale-ink);  border-color: transparent; }
.chip[data-kind="stale"].likely  { background: #EFE8D8;       color: #6B5C2C;           border-color: transparent; }
.chip[data-kind="stale"].active  { background: var(--ok);     color: var(--ok-ink);     border-color: transparent; }
.chip[data-kind="billing"].warn   { background: var(--warn);   color: var(--warn-ink);   border-color: transparent; }
.chip[data-kind="billing"].risk   { background: var(--risk);   color: var(--risk-ink);   border-color: transparent; }
.chip[data-kind="billing"].ok     { background: var(--ok);     color: var(--ok-ink);     border-color: transparent; }
.chip[data-kind="billing"].coupon { background: var(--coupon); color: var(--coupon-ink); border-color: transparent; }
.chip[data-kind="pa"].risk       { background: var(--risk); color: var(--risk-ink); border-color: transparent; }
.chip[data-kind="pa"].low        { background: var(--ok);   color: var(--ok-ink);   border-color: transparent; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; }

/* ---------- Side pane (shared: why / detail) ---------- */
.side { grid-area: side; background: var(--surface);
  border-left: 1px solid var(--divider); overflow-y: auto;
  transition: transform .2s ease; padding: 18px 20px 24px; }
.side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.side-title { font-size: 15px; font-weight: 700; letter-spacing: -.1px; margin: 0 0 4px; }
.side-sub  { font-size: 12px; color: var(--ink-muted); }
.side-close { width: 28px; height: 28px; border-radius: 8px; color: var(--ink-muted);
  display: grid; place-items: center; }
.side-close:hover { background: var(--surface-2); color: var(--ink); }

.section-sub {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); font-weight: 600;
  margin: 18px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--divider);
}
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px;
  font-size: 12.5px; margin: 8px 0 6px; }
.kv dt { color: var(--ink-muted); }
.kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.kv code { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 11.5px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }

.actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.action { padding: 6px 14px; border-radius: 8px; font-size: 12px;
  border: 1px solid var(--divider); background: var(--surface-2); color: var(--ink); }
.action.primary { background: var(--ok);   border-color: transparent; color: var(--ok-ink);   font-weight: 600; }
.action.warn    { background: var(--warn); border-color: transparent; color: var(--warn-ink); }
.action.ghost   { background: var(--surface); }

/* Why panel specifics */
.why-decision {
  margin: 16px 0 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--divider);
  font-size: 13px; color: var(--ink);
}
.why-rules { display: flex; flex-direction: column; gap: 10px; }
.rule { border: 1px solid var(--divider); border-radius: 8px;
  background: var(--surface); padding: 10px 12px; }
.rule-top { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.rule-id { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 11.5px;
  color: var(--accent-ink); font-weight: 600; }
.rule-ver { color: var(--ink-soft); font-size: 11px; }
.rule-outcome { display: inline-block; margin-top: 6px; padding: 2px 8px;
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.rule-outcome.fired  { background: var(--risk); color: var(--risk-ink); }
.rule-outcome.quiet  { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--divider); }
.rule-digest { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 11px;
  color: var(--ink-soft); margin-top: 6px; }

.side-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--divider);
  display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-muted); }
.side-foot button { color: var(--accent-ink); font-weight: 500; }
.side-foot button:hover { text-decoration: underline; }

/* ---------- Legend modal ---------- */
.modal-shade { position: fixed; inset: 0; background: rgba(26,31,46,.28);
  display: none; align-items: center; justify-content: center; z-index: 10;
  backdrop-filter: blur(3px); }
.modal-shade.open { display: flex; }
.modal { width: 560px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-2);
  padding: 22px 24px 18px; }
.modal h3 { margin: 0 0 4px; font-size: 16px; }
.modal p { margin: 0 0 16px; color: var(--ink-muted); font-size: 12.5px; }
.legend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.legend-row { display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--divider); }
.swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.05); }
.legend-row span { font-size: 12.5px; }
.modal-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.modal-foot button { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink); font-size: 13px; }

/* ---------- Login screen (WB-4) ---------- */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--wash); padding: 24px;
}
.login-card {
  width: 360px; max-width: 100%; background: var(--surface);
  border: 1px solid var(--divider); border-radius: 14px;
  box-shadow: var(--shadow-hero); padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-brand { font-size: 18px; margin-bottom: 2px; }
.login-sub { margin: 0; color: var(--ink-muted); font-size: 12.5px; }
.login-field { display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--ink-muted); letter-spacing: .02em; }
.login-field input {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 400;
}
.login-field input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--focus-ring); }
.login-error { padding: 9px 11px; border-radius: 8px; background: #FFF1F1;
  color: var(--risk-ink); border: 1px solid #F2A6A6; font-size: 12.5px; }
.login-submit { width: 100%; padding: 10px; font-size: 13px; }
.login-checking {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-size: 13px; background: var(--wash);
}

/* ---------- Trial onboarding interstitial ---------- */
.trial-modal { width: 480px; }
.trial-modal .brand { font-size: 18px; margin-bottom: 4px; }
.trial-modal p { margin: 0 0 12px; color: var(--ink); font-size: 13px; line-height: 1.5; }
.trial-modal p.trial-lede { color: var(--ink-muted); font-size: 12.5px; }
.trial-tries { margin: 0 0 18px; padding-left: 20px; font-size: 12.5px; color: var(--ink); }
.trial-tries li { margin: 4px 0; }
.modal-foot .action.primary { font-size: 13px; padding: 8px 18px; }

.load  { padding: 20px; color: var(--ink-muted); font-size: 13px; }
.error { padding: 16px; color: var(--risk-ink); background: #FFF1F1;
  border: 1px solid #F2A6A6; border-radius: 8px; margin: 16px 20px; font-size: 13px; }

/* ---------- Feedback modal (WB-6) ---------- */
.feedback-textarea {
  width: 100%; resize: vertical; min-height: 96px; padding: 9px 11px;
  border-radius: 8px; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink); font: inherit;
  box-sizing: border-box;
}
.feedback-textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: var(--focus-ring); }
.feedback-error { margin-top: 10px; padding: 9px 11px; border-radius: 8px; background: #FFF1F1;
  color: var(--risk-ink); border: 1px solid #F2A6A6; font-size: 12.5px; }
.feedback-toast { padding: 9px 11px; border-radius: 8px; background: var(--ok);
  color: var(--ok-ink); border: 1px solid transparent; font-size: 12.5px; font-weight: 600; }

/* ---------- Admin panel (WB-5) ----------
   Four owner-facing powers behind one modal, tabbed like the mode-switch
   pills in the top bar so the vocabulary matches. Wider than the base
   `.modal` (560px) since tables need the room. */
.admin-modal { width: 760px; max-width: calc(100vw - 32px); }
.admin-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-tab {
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--divider); background: var(--surface);
  color: var(--ink-muted); font-size: 12.5px; font-weight: 600;
}
.admin-tab.active { background: var(--surface-2); color: var(--ink); border-color: #d0d0cc; }
.admin-tab-body { min-height: 220px; max-height: 60vh; overflow-y: auto; }
.admin-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 10px;
}
.admin-section-head h4 { margin: 0; font-size: 13px; }
.admin-refresh {
  padding: 5px 11px; border-radius: 8px; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink); font-size: 11.5px;
}

/* Dashboard tiles (Power 1) */
.admin-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.admin-stat-tile {
  border: 1px solid var(--divider); border-radius: 10px;
  background: var(--surface); padding: 10px 12px;
}
.admin-stat-label { font-size: 10.5px; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .05em; }
.admin-stat-value { font-size: 18px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-top: 2px; }
.admin-stat-sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* Row-based tables (Powers 2-4) -- div/grid rows, not <table>, matching
   this app's existing list idioms (.pattern-alert etc). */
.admin-table { display: flex; flex-direction: column; border: 1px solid var(--divider);
  border-radius: 10px; overflow: hidden; }
.admin-row {
  display: grid; gap: 10px; align-items: center;
  padding: 8px 12px; font-size: 12px; border-top: 1px solid var(--divider);
  background: var(--surface);
}
.admin-row:first-child { border-top: none; }
.admin-row.head { background: var(--surface-2); color: var(--ink-muted);
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.admin-row.accounts { grid-template-columns: 1.1fr .6fr .7fr 1fr .8fr 1.4fr; }
.admin-row.feedback { grid-template-columns: 1fr 1.2fr 2.4fr 1.4fr; }
.admin-row.actions  { grid-template-columns: 1fr 1.2fr .6fr 1.6fr 1fr .9fr; }
.admin-row.formulary { grid-template-columns: 1.2fr 1fr .8fr .8fr 1.2fr; }
.admin-row.refdata  { grid-template-columns: 1.4fr 1fr 1.2fr .6fr .8fr; }
.admin-row.revenue  { grid-template-columns: 1.3fr 1.2fr 1.3fr .8fr; }
.admin-row code { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 11px; }
.admin-cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-cell-actions button {
  padding: 4px 9px; border-radius: 7px; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink); font-size: 11px;
}
.admin-cell-actions button:disabled { opacity: .5; cursor: default; }
.admin-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.admin-badge.admin    { background: var(--accent); color: var(--accent-ink); }
.admin-badge.trial     { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--divider); }
.admin-badge.enabled  { background: var(--ok);   color: var(--ok-ink); }
.admin-badge.disabled { background: var(--risk); color: var(--risk-ink); }

.admin-filter { display: flex; gap: 8px; margin-bottom: 10px; }
.admin-filter input {
  flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink); font: inherit; font-size: 12.5px;
}
.admin-filter input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

.admin-empty { padding: 16px; color: var(--ink-muted); font-size: 12.5px; text-align: center; }
.admin-loading { padding: 16px; color: var(--ink-muted); font-size: 12.5px; }
.admin-error { margin: 8px 0; padding: 9px 11px; border-radius: 8px; background: #FFF1F1;
  color: var(--risk-ink); border: 1px solid #F2A6A6; font-size: 12.5px; }

/* One-time reset-password reveal -- shown once, mirrors provisioning's own
   "shown once" discipline; a copy affordance since it's never shown again. */
.admin-reveal {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--divider); font-size: 12px;
}
.admin-reveal-password {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
.admin-reveal-password code {
  flex: 1; padding: 6px 9px; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--divider); font-family: ui-monospace,"SF Mono",Menlo,monospace;
  font-size: 12.5px; word-break: break-all;
}
.admin-reveal-note { margin-top: 6px; color: var(--ink-muted); font-size: 11px; }

/* ---------- Pattern alerts banner (Phase 7.4) ----------
   Sits between the PatientHeader stat boxes and the prescription
   queue. Shows the L2 PatternEngine output (DUR + longitudinal)
   in a single urgency-sorted list. Auto-expands when a HIGH
   alert exists; collapsed-by-default otherwise so a clean
   patient doesn't bury the queue. */
.pattern-banner {
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  margin-bottom: 16px; overflow: hidden;
}
.pattern-banner-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; cursor: pointer; user-select: none;
}
.pattern-banner-head:hover { background: var(--surface-2); }
.pattern-banner-head.collapsed { border-bottom: none; }
.pattern-banner-head:not(.collapsed) { border-bottom: 1px solid var(--divider); }
.pattern-title { font-size: 12px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink); }
.pattern-counts { display: flex; gap: 6px; }
.pattern-count {
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid var(--divider); background: var(--surface-2);
  color: var(--ink-muted);
}
.pattern-count.sev-high { background: var(--risk);   color: var(--risk-ink); border-color: transparent; }
.pattern-count.sev-warn { background: var(--warn);   color: var(--warn-ink); border-color: transparent; }
.pattern-count.sev-info { background: var(--ok);     color: var(--ok-ink);   border-color: transparent; }
.pattern-count.zero     { opacity: .45; }
.pattern-chev { font-size: 10px; color: var(--ink-soft); margin-left: auto;
  transition: transform .15s ease; }
.pattern-banner-head.collapsed .pattern-chev { transform: rotate(-90deg); }
.pattern-polytier {
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
}
.pattern-polytier.low      { background: var(--ok);     color: var(--ok-ink); }
.pattern-polytier.moderate { background: var(--warn);   color: var(--warn-ink); }
.pattern-polytier.high     { background: var(--risk);   color: var(--risk-ink); }

.pattern-list { display: flex; flex-direction: column;
  padding: 4px 0; max-height: 360px; overflow-y: auto; }
.pattern-list.collapsed { display: none; }
.pattern-alert {
  display: grid; grid-template-columns: 70px 80px 1fr auto;
  gap: 12px; align-items: center;
  padding: 8px 16px; font-size: 12.5px;
  border-top: 1px solid var(--divider);
  cursor: pointer; background: var(--surface);
}
.pattern-alert:first-child { border-top: none; }
.pattern-alert:hover { background: var(--surface-2); }
.pattern-sev {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-align: center;
}
.pattern-sev.sev-high { background: var(--risk); color: var(--risk-ink); }
.pattern-sev.sev-warn { background: var(--warn); color: var(--warn-ink); }
.pattern-sev.sev-info { background: var(--ok);   color: var(--ok-ink); }
.pattern-code { font-family: ui-monospace,"SF Mono",Menlo,monospace;
  font-size: 11.5px; font-weight: 700; color: var(--accent-ink); }
.pattern-hint { color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pattern-rx-count { color: var(--ink-muted); font-size: 11.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pattern-empty { padding: 12px 16px; color: var(--ink-muted);
  font-size: 12.5px; text-align: center; }
.pattern-loading { padding: 12px 16px; color: var(--ink-muted);
  font-size: 12.5px; }

/* ---------- Vaccines (Phase 9.4) ----------
   Patient header chip opens a ledger panel on the right side.
   Status colour grammar deliberately mirrors the existing stale /
   PA chips so readers build one vocabulary across the whole UI:
     up_to_date  → ok (green)
     due         → warn (amber)
     overdue     → risk (red)
     never_given → neutral outline */
.patient-meta .mchip.vaccines {
  cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
  padding: 3px 10px 3px 8px;
}
.patient-meta .mchip.vaccines:hover { background: var(--surface); }
.vaccines-count {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 6px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--ink-muted);
  border: 1px solid var(--divider);
}
.vaccines-count.risk { background: var(--risk); color: var(--risk-ink); border-color: transparent; }
.vaccines-count.warn { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.vaccines-count.ok   { background: var(--ok);   color: var(--ok-ink);   border-color: transparent; }

/* Vaccine panel — next-due list + administered history. Reuses
   ``.rule`` framing so the visual rhythm matches why/pattern panels. */
.vax-flag {
  border: 1px solid var(--divider); border-radius: 8px;
  background: var(--surface); padding: 10px 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
}
.vax-flag .vax-disease { font-weight: 600; font-size: 13px; color: var(--ink); }
.vax-flag .vax-sub { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.vax-sev {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-align: center;
}
.vax-sev.ok      { background: var(--ok);        color: var(--ok-ink); }
.vax-sev.warn    { background: var(--warn);      color: var(--warn-ink); }
.vax-sev.risk    { background: var(--risk);      color: var(--risk-ink); }
.vax-sev.never   { background: var(--surface-2); color: var(--ink-muted);
                   border: 1px solid var(--divider); }

.vax-row {
  border: 1px solid var(--divider); border-radius: 8px;
  background: var(--surface); padding: 10px 12px;
}
.vax-row-top { display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; align-items: baseline; }
.vax-row-name { font-weight: 600; color: var(--ink); }
.vax-row-date { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.vax-row-meta { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px;
  display: flex; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.vax-row-meta b { color: var(--ink); font-weight: 600; }

/* ---------- Operator workflow UI ---------- */
.mode-switch-wrap { display: flex; flex-direction: column; gap: 3px; }
.mode-explainer { font-size: 10.5px; color: var(--ink-soft); padding-left: 2px; }
.synthetic-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; white-space: nowrap; cursor: default;
}
.mode-switch { display: inline-flex; gap: 6px; align-items: center; }
.mode-pill {
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--divider); background: var(--surface);
  color: var(--ink-muted); font-size: 12px; font-weight: 600;
}
.mode-pill.active {
  background: var(--surface-2); color: var(--ink);
  border-color: #d0d0cc;
}
.ops-sidebar-stack { display: flex; flex-direction: column; gap: 14px; }
.ops-card {
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius-card); box-shadow: var(--shadow-1);
  padding: 14px 16px;
}
.ops-card h3 {
  margin: 0 0 10px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ops-card h4 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ops-tabs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ops-tab {
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--divider); background: var(--surface-2);
  color: var(--ink-muted); font-size: 12px; font-weight: 600;
}
.ops-tab.active {
  background: var(--accent); color: white; border-color: transparent;
}
.ops-list { display: flex; flex-direction: column; gap: 8px; }
.ops-row {
  border: 1px solid var(--divider); border-radius: 10px;
  background: var(--surface); padding: 10px 12px; cursor: pointer;
}
.ops-row:hover { background: var(--surface-2); }
.ops-row.selected {
  background: var(--surface-2); border-color: var(--accent);
  box-shadow: var(--shadow-1);
}
.ops-row-top {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.ops-row-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.ops-row-meta {
  color: var(--ink-soft); font-size: 11.5px; margin-top: 4px;
  display: flex; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums;
}
.ops-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ops-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink-muted);
}
.ops-badge.pharmacy { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.ops-badge.billing { background: var(--coupon); color: var(--coupon-ink); border-color: transparent; }
.ops-badge.priority-urgent, .ops-badge.priority-high { background: var(--risk); color: var(--risk-ink); border-color: transparent; }
.ops-badge.priority-normal { background: var(--ok); color: var(--ok-ink); border-color: transparent; }
.ops-badge.priority-low { background: var(--surface-2); color: var(--ink-muted); }
.ops-badge.match { background: var(--ok); color: var(--ok-ink); border-color: transparent; }
.ops-badge.mismatch { background: var(--risk); color: var(--risk-ink); border-color: transparent; }
.ops-badge.shortage { background: var(--risk); color: var(--risk-ink); border-color: transparent; }
.ops-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ops-grid.full { grid-template-columns: 1fr; }
.ops-kv {
  display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px;
  font-size: 12.5px; margin: 0;
}
.ops-kv dt { color: var(--ink-muted); }
.ops-kv dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.ops-kv code {
  font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 11.5px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 3px;
}
.ops-section-list { display: flex; flex-direction: column; gap: 10px; }
.ops-item {
  border: 1px solid var(--divider); border-radius: 8px;
  background: var(--surface); padding: 10px 12px;
}
.ops-item-top {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.ops-item-title { font-weight: 600; color: var(--ink); font-size: 12.5px; }
.ops-item-meta {
  color: var(--ink-soft); font-size: 11.5px; margin-top: 4px;
  display: flex; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums;
}
/* Ended/past-coverage rows (coverage_section.js PastCoverageRow) — same
   dim-and-recede treatment as .rule-outcome.quiet, not a new pattern. */
.ops-item.muted { background: var(--surface-2); }
.ops-item.muted .ops-item-title { color: var(--ink-muted); font-weight: 500; }
.ops-form { display: flex; flex-direction: column; gap: 8px; }
.ops-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ops-form label {
  display: flex; flex-direction: column; gap: 4px; color: var(--ink-muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.ops-form input, .ops-form select, .ops-form textarea {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--divider); background: var(--surface-2);
  color: var(--ink); font: inherit;
}
.ops-form textarea { min-height: 72px; resize: vertical; }
.ops-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ops-button {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--divider);
  background: var(--surface-2); color: var(--ink); font-size: 12px; font-weight: 600;
}
.ops-button.primary { background: var(--ok); color: var(--ok-ink); border-color: transparent; }
.ops-button.warn { background: var(--warn); color: var(--warn-ink); border-color: transparent; }
.ops-button.risk { background: var(--risk); color: var(--risk-ink); border-color: transparent; }
.ops-button:disabled { opacity: .45; cursor: default; }
.ops-note { color: var(--ink-soft); font-size: 11.5px; }
.ops-alert {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--divider);
  background: var(--surface-2); font-size: 12px;
}
.ops-alert.error { background: #FFF1F1; color: var(--risk-ink); border-color: #F2A6A6; }
.ops-alert.success { background: #F2FBF5; color: var(--ok-ink); border-color: #9FD8B6; }
.ops-empty { color: var(--ink-muted); font-size: 12.5px; padding: 8px 0; }
.ops-code {
  font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 11.5px;
  background: var(--surface-2); padding: 1px 5px; border-radius: 3px;
}
@media (max-width: 1400px) {
  .ops-grid { grid-template-columns: 1fr; }
}

/* scrollbars */
.list-scroll::-webkit-scrollbar, .main::-webkit-scrollbar, .side::-webkit-scrollbar { width: 10px; }
.list-scroll::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb,
.side::-webkit-scrollbar-thumb { background: #E4E4DE; border-radius: 10px; border: 2px solid var(--surface); }
.list-scroll::-webkit-scrollbar-thumb:hover, .main::-webkit-scrollbar-thumb:hover,
.side::-webkit-scrollbar-thumb:hover { background: #D4D4CD; }

/* ---------- AI guidance voice (T2.B design pass) ----------
   The one recurring visual signature this app is built around: whenever
   the system is telling the operator what it found or what to do next
   (narrative, rejection guidance, why-panel framing), it wears this
   treatment on top of whatever base class already applies -- it never
   replaces the --ok/--warn/--risk severity color, so e.g. rejection
   guidance keeps its urgency tone AND gains this voice. Audience is
   pharmacists with minimal training: this is the thing they should read
   first, so it has to look unmistakably different from a plain data
   field or chip. */
.ops-alert.guidance,
.ops-note.guidance,
.why-decision.guidance {
  position: relative;
  padding-left: 18px;
}
.ops-alert.guidance::before,
.ops-note.guidance::before,
.why-decision.guidance::before {
  content: "";
  position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 4px; border-radius: 4px 0 0 4px;
  background: var(--guidance-border);
}
.ops-alert.guidance::after,
.ops-note.guidance::after,
.why-decision.guidance::after {
  /* QA audit (2026-08-04, [cosmetic]): the `/ ""` CSS alt-text syntax
     marks this generated label decorative to assistive tech -- a
     collapsed Vaccines section (or any section with several guidance
     notes) was leaking "AI guidance" once per note into the a11y tree,
     announced before a screen reader user could even open the section.
     Visual rendering is unchanged. */
  content: "AI guidance" / "";
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--guidance-ink); margin-bottom: 4px;
}
/* .ops-note is tiny/muted by default (a minor annotation face) -- when
   it's actually carrying AI narrative text rather than a footnote, bump
   it to reading size and full-ink color so it reads as primary content. */
.ops-note.guidance {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.5;
  padding: 12px 14px 12px 18px;
  background: var(--guidance-bg);
  border-radius: var(--radius-card);
}

/* Clinical Summary's triage rows -- a colored left edge (reusing the
   Rx-card idiom) marks urgency at a glance: fill-now reads as an
   actionable positive (accent), needs-action as blocked/urgent (warn).
   Watch and likely-not-needed keep the plain divider-gray edge. */
.triage-item { border-left: 4px solid var(--divider); }
.triage-item.severity-ok   { border-left-color: var(--accent); }
.triage-item.severity-warn { border-left-color: var(--warn-ink); }

/* Dead until now: rejection guidance and anticipated-risk boxes have
   always carried class="ops-alert warn" but no .warn rule ever existed,
   so they silently rendered as the plain gray alert. Give warn its own
   amber tone, matching the chip/pattern-alert severity grammar
   elsewhere in the app. */
.ops-alert.warn { background: var(--warn); color: var(--warn-ink); border-color: transparent; }

/* ---------- Hero vs. secondary card weight (T2.B design pass) ----------
   The clinical-summary cockpit is the visual protagonist of the ops
   workspace; dense technical panels (adjudication internals, claims,
   fulfillment, PA, safety, compliance, timeline, tasks) recede as
   quieter, collapsible surfaces so a minimally-trained pharmacist's eye
   lands on guidance and next actions first. */
.ops-card.hero {
  box-shadow: var(--shadow-hero);
  border-color: transparent;
}
.ops-card.hero h3 {
  color: var(--ink);
  font-size: var(--text-lg);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.ops-card.secondary {
  box-shadow: none;
  background: var(--surface-2);
}
.ops-card.secondary h3 {
  font-size: var(--text-xs);
  opacity: .8;
}
.ops-card-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none; gap: var(--space-3);
  margin: 0 0 var(--space-2);
}
.ops-card-toggle h3 { margin: 0; }
.ops-card-chev {
  font-size: 10px; color: var(--ink-soft); transition: transform .15s ease;
  flex: 0 0 auto;
}
.ops-card.collapsed .ops-card-chev { transform: rotate(-90deg); }
.ops-card.collapsed .ops-card-body { display: none; }

/* ---------- Accessibility floor (T2.B design pass) ----------
   Visible keyboard focus on every interactive element this app defines,
   using the same accent as the rest of the interactive-state language
   rather than the browser default outline. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* ---------- Profile v2 collapsible sections (white-B, P4 Task 102) ---------- */
details.sec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gray-mid);
  border-radius: 8px;
  box-shadow: var(--shadow-1);
  margin-top: 12px;
}
details.sec.cat-ai   { border-left-color: var(--teal-mid); }
details.sec.cat-clin { border-left-color: var(--coral-mid); }
details.sec.cat-fin  { border-left-color: var(--amber-mid); }
details.sec.cat-adm  { border-left-color: var(--gray-mid); }
details.sec > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 12px; padding: 12px 16px; border-radius: 7px; user-select: none;
  transition: background 0.15s ease;
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary:hover { background: var(--wash); }
/* QA audit (2026-08-04, [cosmetic]): a stuck (mid-scroll-pinned) summary had
   no bottom separator, so body content slid under it with no visible edge.
   True "currently stuck" state needs JS to detect; this always-on hairline
   on any open summary is the accepted v1 trade-off (costs a faint ~4px
   double line above .sec-body-rule at rest, when not stuck). */
details.sec[open] > summary { box-shadow: 0 1px 0 var(--line); }
.sum-title { font-size: 14.5px; font-weight: 630; letter-spacing: -0.008em; white-space: nowrap; }
.tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; border-radius: var(--radius-pill);
  padding: 2.5px 9px; line-height: 1.5; white-space: nowrap;
}
.tag-ai   { background: var(--teal-tint); color: var(--accent-ink); }
.tag-clin { background: var(--risk);      color: var(--risk-ink); }
.tag-fin  { background: var(--warn);      color: var(--warn-ink); }
.tag-adm  { background: var(--gray-tint); color: var(--gray-txt); }
.sum-preview {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13px; color: var(--ink-muted);
  transition: opacity 0.2s ease;
}
details.sec[open] .sum-preview { opacity: 0; }
.chev {
  color: var(--ink-soft); margin-left: auto;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.5, 1);
}
details.sec > summary .sum-preview ~ .chev { margin-left: 0; }
details.sec[open] .chev { transform: rotate(180deg); }
.sec-body { padding: 4px 16px 16px; }
.sec-body-rule { border-top: 1px solid var(--divider); margin: 0 0 16px; }
details.sec.quiet { background: transparent; box-shadow: none; }
details.sec.quiet .sum-title { font-weight: 570; color: var(--ink-muted); font-size: 14px; }

/* ---------- Wave A CollapsibleSubsection additions (profile-ux-overhaul §3.1, A1) ----------
   New classes only -- the existing details.sec grammar above is untouched. */
/* Count badge rendered in a details.sec summary next to .sum-title. */
.sec-count {
  font-size: 11px; font-weight: 600; line-height: 1.5;
  color: var(--ink-muted); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 1px 8px; white-space: nowrap;
}
/* Optional lighter-weight size modifier for nested subsections (§3.1 "if
   visual hierarchy needs a lighter weight"). Opt-in; not applied by default. */
details.sec.subsec { margin-top: 8px; }
details.sec.subsec > summary { padding: 9px 14px; }
details.sec.subsec .sum-title { font-size: 13.5px; font-weight: 600; }
details.sec.subsec .sec-body { padding: 2px 14px 12px; }

/* ---------- Profile v2 sticky patient header (white-B, P4 Task 103) ---------- */
.profile-sticky {
  position: sticky; top: 0; z-index: 30;
  background: var(--canvas); padding: 4px 0 8px;
}
.profile-patient-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 12px 16px;
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.profile-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal-tint); color: var(--accent-ink);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.profile-id-block { flex: 1 1 320px; min-width: 0; }
.profile-name { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; }
.profile-meta { font-size: 12.5px; color: var(--ink-muted); font-weight: 500; }
.profile-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.profile-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  font-weight: 550; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 3px 10px; white-space: nowrap; cursor: pointer;
}
.profile-chip.plan { background: var(--warn); border-color: var(--amber-mid); color: var(--warn-ink); font-weight: 600; }
.profile-chip.alert { background: var(--risk); border-color: var(--risk-ink); color: var(--risk-ink); font-weight: 700; }
.profile-header-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* Profile tabs (design 2026-08-06-profile-tabs §A). The strip sits inside
   .profile-sticky (already sticky), so it stays reachable at any scroll depth
   -- the owner's core ask. §A.2 category-colored active accents + §A.5
   edge-fade masks on the horizontally scrollable strip. */
.profile-tabs {
  display: flex; gap: 4px; margin-top: 8px; padding: 2px 2px 0;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
  /* Edge-fade masks (§A.5): soften the scroll-clipped ends so a partly
     scrolled strip reads as "more beyond the edge" rather than a hard cut.
     The mask is anchored to the element box (not the scrolled content), so
     the fades stay pinned at the visible left/right edges. */
  --tabs-fade: 22px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tabs-fade), #000 calc(100% - var(--tabs-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--tabs-fade), #000 calc(100% - var(--tabs-fade)), transparent 100%);
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 13px; font-weight: 550; color: var(--ink-muted);
  background: transparent; border: none;
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
  padding: 7px 12px; cursor: pointer; scroll-snap-align: start;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
/* Category accents (§A.2): each tab carries a tabcat-* class mirroring the
   .cat-* section left-borders (components.css:864). It sets two local custom
   props -- the active underline color and a matching wash -- so the active
   state is category-tinted with no per-category active selectors. Admin stays
   deliberately muted (gray, matching .cat-adm); its active state still reads
   clearly via the wash + bold ink label. */
.tabcat-ai   { --tab-accent: var(--teal-mid);  --tab-wash: var(--teal-tint); }
.tabcat-clin { --tab-accent: var(--coral-mid); --tab-wash: var(--risk); }
.tabcat-fin  { --tab-accent: var(--amber-mid); --tab-wash: var(--amber-wash); }
.tabcat-adm  { --tab-accent: var(--gray-mid);  --tab-wash: var(--gray-tint); }
.profile-tab:hover { color: var(--ink); background: var(--surface-2); }
.profile-tab.active {
  color: var(--ink); font-weight: 650;
  background: var(--tab-wash, var(--surface-2));
  border-bottom-color: var(--tab-accent, var(--accent));
}
.profile-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.profile-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; font-size: 10.5px; font-weight: 700;
  border-radius: 8px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
}
.profile-tab-badge.alert { background: var(--risk); color: var(--risk-ink); border-color: var(--risk-ink); }
/* Small category accent: a dot-kind badge inherits the tab's --tab-accent so
   it reads in-category even while the tab is inactive. */
.profile-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tab-accent, var(--accent)); display: inline-block; }
[role="tabpanel"][hidden] { display: none !important; }
.profile-panel {
  margin-top: 14px;
  /* Relocated from the retired details.sec rule: keeps a panel scrolled to via
     navigateToSection(..., "profile-section-<id>") clear of the sticky
     identity band + tab strip. --profile-sticky-h is written by
     ProfileStickyHeader's ResizeObserver; the 0px fallback degrades to
     top-of-pane. */
  scroll-margin-top: calc(var(--profile-sticky-h, 0px) + 8px);
}
.profile-panel-title { margin: 0 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }