/* =====================================================================
 * cpc-care — staff portal design system.
 * Built ON TOP of the CPC brand master: every color is a var(--cpc-*)
 * from brand-tokens.css (generated from CPC Branding/tokens.json — never
 * hand-invent a hue). Fonts use the brand stacks (DIN Next → Barlow head,
 * Calibri → Source Sans body). Honors the kit's anti-slop rules: no accent
 * underlines beneath titles, no decorative full-width colored bars; depth
 * comes from cloud background + white cards + soft ink-tinted shadows.
 * ===================================================================== */

:root {
  /* --- semantic surface + text roles (mapped from brand tokens) --- */
  --bg: var(--cpc-cloud);
  --surface: var(--cpc-card);
  --surface-2: #FBFAFD;          /* faintly-tinted inset surface */
  --ink: var(--cpc-ink);
  --text: var(--cpc-body);
  --text-2: var(--cpc-slate);
  --text-3: #8B8399;             /* faint captions */
  --line: var(--cpc-mist);
  --line-2: #DAD1E8;

  /* --- brand roles --- */
  --brand: var(--cpc-indigo);
  --brand-navy: var(--cpc-navy);
  --brand-lav: var(--cpc-lavender);
  --accent: var(--cpc-teal-text);      /* AA-safe teal for links/small text */

  /* --- semantic (AA-safe text variants for small colored text) --- */
  --ok: var(--cpc-green-text);
  --warn: var(--cpc-gold-text);
  --attn: var(--cpc-orange-text);
  --danger: #B3261E;

  /* --- soft tint fills (derived light washes of brand hues, for chips/banners) --- */
  --tint-brand: #F2ECFA;
  --tint-teal: #E2F5F6;
  --tint-ok: #E7F6EE;
  --tint-warn: #FCF4E1;
  --tint-attn: #FDECE1;
  --tint-magenta: #FBEAF2;
  --tint-danger: #FBEBEA;

  /* --- elevation: ink-tinted, layered (guidelines §4.2 "soft shadow, ink ~16%") --- */
  --shadow-xs: 0 1px 2px rgba(37,14,60,.05);
  --shadow-sm: 0 1px 2px rgba(37,14,60,.06), 0 2px 6px rgba(37,14,60,.05);
  --shadow-md: 0 2px 4px rgba(37,14,60,.05), 0 10px 24px rgba(37,14,60,.08);
  --shadow-lg: 0 16px 40px rgba(37,14,60,.16), 0 4px 12px rgba(37,14,60,.08);
  --ring: 0 0 0 3px rgba(98,38,158,.20);

  /* --- radii --- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* --- type scale --- */
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1rem;
  --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.85rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 150ms;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--cpc-font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--text);
  background:
    radial-gradient(1200px 480px at 100% -8%, #F0E9FA 0%, rgba(240,233,250,0) 60%),
    var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .head-font {
  font-family: var(--cpc-font-head);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .006em;
  margin: 0;
}
h1 { font-size: var(--fs-2xl); line-height: 1.1; }
h2 { font-size: var(--fs-lg); line-height: 1.2; color: var(--brand); }
h3 {
  font-family: var(--cpc-font-body);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
  margin: 1.1rem 0 .4rem;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
p { margin: .4rem 0; }
strong { font-weight: 600; }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
::selection { background: var(--tint-brand); }

/* ============================ app shell ============================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #2C1148 0%, var(--ink) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), var(--shadow-sm);
}
.topbar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
  height: 58px; display: flex; align-items: center; gap: 1.75rem;
}
.wordmark { display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.wordmark:hover { text-decoration: none; }
.wordmark .mark { display: block; }
.wordmark-text {
  font-family: var(--cpc-font-head); font-size: 1.28rem; color: #fff;
  font-weight: 500; letter-spacing: .01em;
}
.wordmark-text b { font-weight: 700; color: var(--brand-lav); }
.topbar nav { display: flex; gap: .3rem; margin-left: .5rem; }
.topbar nav a {
  color: var(--cpc-light-ink); text-decoration: none; font-size: .9rem; font-weight: 600;
  padding: .4rem .7rem; border-radius: var(--r-sm); transition: color var(--dur), background var(--dur);
}
.topbar nav a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.topbar nav a.is-active { color: #fff; background: rgba(173,142,205,.22); }
.topbar nav a:focus-visible { outline: 2px solid var(--cpc-lavender); outline-offset: 2px; box-shadow: none; }
.wordmark:focus-visible, .logout:focus-visible { outline: 2px solid var(--cpc-lavender); outline-offset: 2px; box-shadow: none; border-radius: var(--r-xs); }
.whoami { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.avatar {
  width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-navy) 100%);
  color: #fff; font-weight: 700; font-size: .82rem; font-family: var(--cpc-font-head);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.whoami-name { color: rgba(255,255,255,.92); font-size: .86rem; font-weight: 600; }
/* Ghost/outline button on the ink bar — was falling back to the browser's
   default gray button chrome (read as a disabled chip). */
.logout {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--cpc-foot-ink);
  font-size: .8rem; font-weight: 600;
  padding: .34rem .72rem; border-radius: var(--r-xs);
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}
.logout:hover {
  color: #fff; background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .42);
}

main { max-width: 1200px; margin: 1.75rem auto 4rem; padding: 0 1.5rem; }

.foot {
  max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: var(--text-3); font-size: var(--fs-xs);
}
.foot img { opacity: .5; }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap;
}
.page-head .sub { color: var(--text-2); font-size: var(--fs-sm); }

/* ============================ cards ============================ */
.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 1.1rem 0; }
@media (max-width: 900px) { .panels { grid-template-columns: 1fr; } }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.15rem 1.25rem; margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel h2 { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
/* heading tier: structural cards stay indigo; secondary cards drop to ink
   so a dense chart doesn't shout every title at the same weight. */
.panel.secondary h2 { color: var(--ink); }

/* ============================ tables ============================ */
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  padding: .55rem .6rem; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
table.data td {
  padding: .7rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.data tbody tr { transition: background var(--dur); }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tr:last-child td { border-bottom: none; }
table.data.compact td, table.data.compact th { padding: .38rem .5rem; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.card-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow-x: auto; }
/* narrow screens: let the table scroll inside its card instead of dropping
   columns off the right edge (flags on /patients, status on /billing). */
.card-table > table.data { min-width: 640px; }
.card-table table.data th { padding-left: 1.1rem; padding-right: 1.1rem; background: var(--surface-2); }
.card-table table.data td { padding-left: 1.1rem; padding-right: 1.1rem; }
/* Bare data tables that live directly inside a .panel (month summary, readings,
   alert strip, trends, timer sessions) have no .card-table wrapper, so on a
   phone their wide rows push the whole document sideways. Let each one scroll
   inside its own card instead — no forced min-width, so they still lay out
   naturally on desktop and only scroll when the viewport is genuinely narrower
   than the content. */
.panel > table.data,
.panel .trend > table.data { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

ul.kv { list-style: none; padding: 0; margin: 0; }
ul.kv li { padding: .2rem 0; display: flex; gap: .5rem; }
ul.kv li .k { color: var(--text-2); min-width: 8rem; }
.minutes { margin-right: .7rem; }
.minutes strong { color: var(--brand); font-family: var(--cpc-font-head); }

/* ============================ badges ============================ */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; line-height: 1;
  padding: .28rem .5rem; border-radius: var(--r-pill); white-space: nowrap;
}
.badge.program { color: var(--brand); background: var(--tint-brand); }
.badge.code { color: var(--accent); background: var(--tint-teal); font-family: var(--cpc-font-head); letter-spacing: .03em; }
.badge.ok, .badge.live { color: var(--ok); background: var(--tint-ok); }
.badge.warn { color: var(--warn); background: var(--tint-warn); }
.badge.rescue { color: var(--attn); background: var(--tint-attn); }
.badge.blocked { color: var(--danger); background: var(--tint-danger); }
.badge.neutral, .badge.abandoned { color: var(--text-2); background: #EFECF3; }
/* tinted like every other pill — status/priority chips share one visual
   language (soft tint, colored text) rather than mixing solid fills in. */
.badge.high { color: var(--danger); background: var(--tint-danger); }
.badge.reminder { color: var(--accent); background: var(--tint-teal); }
.badge.alert-count { color: var(--attn); background: var(--tint-attn); text-decoration: none; }
.badge.alert-count:hover { text-decoration: none; filter: brightness(.97); }
.badge.big { font-size: var(--fs-sm); padding: .34rem .7rem; }
.badge .dot-sm { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============================ timer hero ============================ */
.timer {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.timer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.timer.on::before { background: linear-gradient(180deg, var(--cpc-green) 0%, #00b85c 100%); }
.timer.blocked::before { background: var(--cpc-gray); }
.timer .status-label {
  font-family: var(--cpc-font-head); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; font-size: .82rem; display: flex; align-items: center; gap: .5rem;
}
.timer.on .status-label { color: var(--ok); }
.timer.blocked .status-label { color: var(--text-2); }
.timer .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cpc-green);
  box-shadow: 0 0 0 0 rgba(0,157,78,.5); animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,157,78,.45); }
  70% { box-shadow: 0 0 0 7px rgba(0,157,78,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,157,78,0); }
}
.timer .elapsed {
  font-family: var(--cpc-font-head); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 1.7rem; color: var(--ink); line-height: 1; letter-spacing: .01em;
}
.timer .timer-meta { color: var(--text-2); font-size: var(--fs-sm); }
.timer .spacer, .timer form { margin-left: auto; }

tr.row-live td { background: var(--tint-ok) !important; }
tr.row-live td:first-child { box-shadow: inset 3px 0 0 var(--cpc-green); }
tr.row-abandoned td { background: #F5F3F7 !important; color: var(--text-2); }
tr.row-addressed td { background: #F5F3F7 !important; color: var(--text-2); }
tr.row-addressed .badge { opacity: .5; }

/* ============================ buttons ============================ */
.btn {
  font: inherit; font-weight: 600; font-size: var(--fs-sm);
  padding: .5rem 1rem; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), transform var(--dur);
  box-shadow: var(--shadow-xs); display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 36px;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.small { padding: .3rem .65rem; font-size: var(--fs-xs); min-height: 32px; }
.btn.primary {
  background: linear-gradient(180deg, #6E2CAD 0%, var(--brand) 100%);
  border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm);
}
.btn.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 86%, white) 0%, color-mix(in srgb, var(--brand), black 6%) 100%); }
.btn.danger { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--tint-danger); }
.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--accent); }
.btn.ghost:hover { background: var(--tint-teal); }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }

/* ============================ forms ============================ */
label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
select, textarea {
  font: inherit; font-size: var(--fs-base); color: var(--text);
  padding: .5rem .6rem; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); transition: border-color var(--dur), box-shadow var(--dur);
  width: 100%; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-lav); box-shadow: var(--ring); }
input[type="number"] { width: 6.5rem; }
textarea { resize: vertical; min-height: 3rem; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5 6 6l5-4.5' stroke='%235E5A72' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; padding-right: 1.9rem;
}
::placeholder { color: var(--text-3); }
/* brand-tint the native controls so radios/checks + the date picker match the
   styled inputs instead of reading as first-pass OS defaults. */
input[type="radio"], input[type="checkbox"] {
  accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer;
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--r-xs);
}
/* native multi-selects: no single-select chevron, enough height that rows
   don't clip mid-line, comfortable row padding. */
select[multiple] {
  appearance: auto; background-image: none; padding: .3rem;
  min-height: 5.5rem; padding-right: .6rem;
}
select[multiple] option { padding: .18rem .3rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.field-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
label.check { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
.error { color: var(--danger); font-size: var(--fs-sm); margin-top: .6rem; }
.req { color: var(--attn); font-weight: 700; }

/* ============================ dialog ============================ */
dialog {
  border: none; border-radius: var(--r-lg); padding: 1.5rem 1.6rem;
  max-width: 480px; width: 92%; box-shadow: var(--shadow-lg); color: var(--text);
}
dialog::backdrop { background: rgba(37,14,60,.5); backdrop-filter: blur(3px); }
dialog h2 { margin-top: 0; margin-bottom: 1rem; }
dialog label { display: block; margin: .8rem 0 .3rem; }
dialog label.check { margin-top: 1rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.4rem; }

/* ============================ banners ============================ */
.banner, .warnings, .copy-banner, .score-banner {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  border-radius: var(--r-md); padding: .8rem 1rem; margin-bottom: 1.1rem;
  font-size: var(--fs-sm); border: 1px solid transparent;
}
.warnings { background: var(--tint-warn); border-color: #E6D9A6; color: var(--warn); }
.warnings p { margin: .15rem 0; }
.copy-banner.ok { background: var(--tint-ok); border-color: #B6E1C6; color: var(--ok); }
.copy-banner.missing { background: var(--tint-danger); border-color: #EDC3C0; color: var(--danger); }
.copy-banner-actions { margin-left: auto; display: flex; gap: .5rem; }
.copy-line.ok strong { color: var(--ok); }
.copy-line.missing strong { color: var(--danger); }
.score-banner { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-xs); }
.login-intro {
  font-size: var(--fs-sm); background: var(--tint-brand);
  border: 1px solid #E2D4F3; border-radius: var(--r-sm);
  padding: .9rem 1rem; margin-bottom: 1.3rem;
}
.login-intro p { margin: 0 0 .6rem; color: var(--ink); }
.login-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .32rem; color: var(--body); }
.login-steps li { padding-left: .1rem; }

/* ============================ login ============================ */
.login-wrap { min-height: calc(100vh - 58px - 6rem); display: grid; place-items: center; }
.login-card {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem 2rem 2.1rem; box-shadow: var(--shadow-md); text-align: left;
}
.login-card .brand-lockup { display: block; margin: 0 auto 1.4rem; height: 52px; width: auto; }
.login-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: .2rem; }
.login-card .tagline { text-align: center; color: var(--accent); font-size: var(--fs-sm); margin-bottom: 1.4rem; font-style: italic; }
.login-card label { display: block; margin-bottom: .35rem; }
.login-card select { margin-bottom: 1.1rem; }
.login-card .btn { width: 100%; justify-content: center; }

/* ============================ reminder form ============================ */
.reminder-form label { display: block; margin: .6rem 0 .25rem; }
.reminder-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.reminder-form button[type="submit"] { margin-top: .85rem; }

/* ============================ trends / sparklines ============================ */
.trend { border-top: 1px solid var(--line); padding: .7rem 0; }
.trend:first-of-type { border-top: none; padding-top: 0; }
.trend-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.trend-head .metric-name { font-weight: 600; }
.trend-head .trend-toggle { margin-left: auto; }
svg.spark { width: 100%; height: 56px; margin-top: .4rem; display: block; }
svg.spark polyline { stroke: var(--brand); stroke-width: 2; fill: none; }
svg.spark .area { fill: url(#sparkfill); opacity: .12; }
svg.spark circle { fill: var(--brand); }
.trend-table { margin-top: .5rem; }

/* ============================ care plans ============================ */
.cp-category {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: .7rem .85rem; margin: .7rem 0; background: var(--surface-2);
}
.cp-problem { border-left: 3px solid var(--brand-lav); margin: .5rem 0 .5rem .3rem; padding-left: .7rem; }
.cp-goal { border-left: 3px solid var(--cpc-teal-lt); margin: .35rem 0 .35rem .9rem; padding-left: .7rem; }
.cp-goal.cp-inactive { opacity: .55; }
.cp-intervention { margin: .2rem 0 .2rem 1.5rem; color: var(--text); }
.cp-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; padding: .12rem 0; }
.cp-kind {
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); min-width: 5.6rem;
}
.cp-actions { margin-left: auto; display: inline-flex; gap: .3rem; }
.cp-responsible { font-size: var(--fs-sm); color: var(--accent); font-style: italic; }
.cp-responsible.cp-missing { color: var(--warn); }
.cp-add { display: flex; gap: .4rem; margin: .35rem 0 .2rem 1.5rem; flex-wrap: wrap; }
.cp-add input { font-size: var(--fs-sm); padding: .3rem .5rem; flex: 1 1 10rem; }
.cp-add-category { margin-left: 0; }
.plan-fields label { display: block; margin: .6rem 0 .25rem; }
.plan-fields label.check { font-weight: 400; }

/* ============================ notes ============================ */
.notes-list { margin-top: .85rem; }
.note-item { border-top: 1px solid var(--line); padding: .65rem 0; }
.note-item:first-child { border-top: none; }
.note-item.note-pinned {
  background: var(--tint-warn); border-radius: var(--r-sm);
  border-left: 3px solid var(--warn); padding: .6rem .7rem; margin-bottom: .4rem;
}
.note-head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.note-head .author { font-weight: 600; }
.note-head .ts { color: var(--text-3); font-size: var(--fs-xs); }
.note-body { margin: .3rem 0 0; white-space: pre-wrap; }

/* ============================ screenings ============================ */
.screening-sections { border: none; padding: 0; margin: 0; }
/* keep section headings clear of the sticky topbar + sticky action bar when
   the browser scrolls a section into view (e.g. after a validation jump). */
.screening-sections section { scroll-margin-top: 5rem; }
/* top-aligned labels: label text sits directly above its control at one
   consistent left edge (kills the ragged left gutter on the long intake). */
.screening-sections label { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; margin: .8rem 0 .25rem; }
.screening-sections label.check { flex-direction: row; align-items: flex-start; font-weight: 400; gap: .5rem; margin: .6rem 0 .25rem; }
.screening-sections input[type="text"], .screening-sections input[type="date"],
.screening-sections input[type="number"], .screening-sections select,
.screening-sections textarea { max-width: 34rem; width: 100%; }
.screening-sections input[type="number"] { width: 6.5rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .15rem .9rem; }
.phq9-table td.phq9-cell { text-align: center; }
.live-score { font-size: var(--fs-sm); color: var(--accent); font-weight: 600; }
.screening-actions {
  display: flex; gap: .6rem; align-items: center; justify-content: flex-end;
  position: sticky; bottom: 0; z-index: 10;
  /* semi-opaque cloud + blur so scrolling content reads through cleanly, and a
     top edge + upward shadow so the bar floats above the form instead of
     seaming straight through the card it overlaps. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 12px rgba(37, 14, 60, .06);
  padding: .9rem 0 .85rem; margin-top: 1rem; flex-wrap: wrap;
}
.screening-actions .error { margin: 0 auto 0 0; }

/* ============================ billing ============================ */
.billing-controls { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; }
.billing-controls label { display: flex; flex-direction: column; gap: .3rem; }
pre.rationale {
  margin: 0; font: var(--fs-sm)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; max-width: 36rem; max-height: 9rem; overflow-y: auto;
  color: var(--text-2); background: var(--surface-2); border-radius: var(--r-xs);
  padding: .5rem .6rem; border: 1px solid var(--line);
}
.attest-row { display: block; font-weight: 400; margin: .6rem 0; }
.attest-row input { width: auto; margin-right: .45rem; }
/* keep the per-row billing actions on one tidy, right-aligned stack so
   'fix & re-run' / 'audit bundle' never wrap into ragged multi-line clumps
   that collide with the status pill. */
.actions-cell {
  white-space: nowrap;
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
}
.nowrap { white-space: nowrap; }

/* ============================ empty states ============================ */
.empty { text-align: center; color: var(--text-2); padding: 2rem 1rem; }
.empty .empty-icon { font-size: 1.6rem; opacity: .4; display: block; margin-bottom: .4rem; }
td .muted { color: var(--text-3); }

/* ============================ motion / a11y ============================ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================ responsive ============================ */
@media (max-width: 720px) {
  .topbar-inner { padding: 0 1rem; gap: .6rem; }
  /* keep the wordmark + account pinned; let the nav take the remaining width
     and scroll internally rather than pushing the account off the body. */
  .wordmark, .whoami { flex: 0 0 auto; }
  .topbar nav {
    gap: .1rem; margin-left: 0; min-width: 0; flex: 1 1 auto;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: .35rem .5rem; font-size: .82rem; white-space: nowrap; }
  .whoami-name { display: none; }
  main { padding: 0 1rem; margin-top: 1.25rem; }
  h1 { font-size: 1.55rem; }
  .timer .elapsed { font-size: 1.4rem; }
}