/* Cypher-X design system (Phase 7, spec §2). Pico 2 is the base; its variables are remapped here. */
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(/static/fonts/Figtree-400.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(/static/fonts/Figtree-500.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(/static/fonts/Figtree-600.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url(/static/fonts/Figtree-700.woff2) format("woff2"); }

/* Light only (D-091). `:root[data-theme="light"]` outranks Pico's own theme selector
   (`:root:not([data-theme=dark]), [data-theme=light]`), so the remap wins without !important. */
:root, :root[data-theme="light"] {
  --s-canvas: #F3F0E6; --s-glow: #F7E7A6; --s-surface: #FBFAF5; --s-surface-2: #F0ECDF;
  --s-ink: #24231F; --s-ink-2: #6B685F; --s-line: #E2DDCB;
  /* placeholders only: lighter than muted text so an example never reads as a filled-in value */
  --s-ink-3: #B3AFA3;
  --s-accent: #F7CF3A; --s-accent-hover: #EFC32A; --s-accent-ink: #3A3200;
  --s-ok: #2F7D4F; --s-warn: #B8640A; --s-bad: #B3261E;
  /* status text on its tinted chip background: darker than the mark colour to keep 4.5:1 */
  --s-ok-ink: #276B43; --s-warn-ink: #9A5308; --s-bad-ink: #B3261E;
  /* chip and danger tints; muted text and rules on the dark card */
  --s-ok-tint: #E3F1E8; --s-warn-tint: #FBEBD6; --s-bad-tint: #F8E1DF; --s-bad-line: #E8B7B2;
  --s-on-dark: #CFCABB; --s-on-dark-rule: #4A463E; --s-white: #FFFFFF;
  --s-radius-card: 1.25rem; --s-radius-control: 0.75rem; --s-radius-pill: 999px;
  --s-space: 1rem; --s-max: 75rem; --s-gutter: 1.5rem;  /* 1200px container, 24px gutters */
  /* Pico remap. Pico scales the root font by breakpoint (up to 131%); the spec's rem scale
     assumes 16px, so the root size is fixed here. */
  --pico-font-size: 100%;
  --pico-font-family: "Figtree", system-ui, sans-serif;
  --pico-font-family-sans-serif: "Figtree", system-ui, sans-serif;
  --pico-background-color: var(--s-canvas); --pico-color: var(--s-ink);
  --pico-h1-color: var(--s-ink); --pico-h2-color: var(--s-ink); --pico-h3-color: var(--s-ink);
  --pico-h4-color: var(--s-ink); --pico-h5-color: var(--s-ink); --pico-h6-color: var(--s-ink);
  --pico-muted-color: var(--s-ink-2); --pico-muted-border-color: var(--s-line);
  --pico-primary: var(--s-ink); --pico-primary-hover: var(--s-ink);
  --pico-primary-underline: rgba(36, 35, 31, 0.5); --pico-primary-hover-underline: var(--s-ink);
  --pico-primary-focus: rgba(36, 35, 31, 0.35);
  --pico-primary-background: var(--s-accent); --pico-primary-border: var(--s-accent);
  --pico-primary-inverse: var(--s-accent-ink);
  --pico-primary-hover-background: var(--s-accent-hover); --pico-primary-hover-border: var(--s-accent-hover);
  --pico-secondary: var(--s-ink-2); --pico-secondary-hover: var(--s-ink);
  --pico-secondary-background: var(--s-surface-2); --pico-secondary-border: var(--s-line);
  --pico-secondary-inverse: var(--s-ink);
  --pico-secondary-hover-background: var(--s-line); --pico-secondary-hover-border: var(--s-line);
  --pico-secondary-focus: rgba(36, 35, 31, 0.25);
  --pico-border-radius: var(--s-radius-control);
  --pico-form-element-background-color: var(--s-surface);
  --pico-form-element-active-background-color: var(--s-surface);
  --pico-form-element-border-color: var(--s-line);
  --pico-form-element-active-border-color: var(--s-ink);
  --pico-form-element-focus-color: var(--s-ink);
  --pico-form-element-color: var(--s-ink);
  --pico-form-element-placeholder-color: var(--s-ink-3);
  --pico-card-background-color: var(--s-surface);
  --pico-card-border-color: var(--s-line); --pico-card-sectioning-background-color: var(--s-surface-2);
  --pico-card-box-shadow: none;
  --pico-table-border-color: var(--s-line); --pico-table-row-stripped-background-color: var(--s-surface-2);
  --pico-mark-background-color: var(--s-glow); --pico-mark-color: var(--s-ink);
  --pico-text-selection-color: rgba(247, 207, 58, 0.45);
  --pico-box-shadow: none;
  --pico-contrast: var(--s-ink); --pico-contrast-hover: var(--s-ink);
  --pico-contrast-background: var(--s-ink); --pico-contrast-border: var(--s-ink);
  --pico-contrast-hover-background: #3A3833; --pico-contrast-hover-border: #3A3833;
  --pico-contrast-inverse: var(--s-canvas); --pico-contrast-focus: rgba(36, 35, 31, 0.35);
  --pico-ins-color: var(--s-ok); --pico-del-color: var(--s-bad);
  --pico-code-background-color: var(--s-surface-2); --pico-code-color: var(--s-ink);
  --pico-form-element-selected-background-color: var(--s-surface-2);
  --pico-form-element-valid-border-color: var(--s-ok); --pico-form-element-valid-active-border-color: var(--s-ok);
  --pico-form-element-valid-focus-color: var(--s-ok);
  --pico-form-element-invalid-border-color: var(--s-bad); --pico-form-element-invalid-active-border-color: var(--s-bad);
  --pico-form-element-invalid-focus-color: var(--s-bad);
  --pico-switch-background-color: var(--s-ink-2); --pico-switch-checked-background-color: var(--s-accent);
  --pico-switch-color: var(--s-surface);
  --pico-range-border-color: var(--s-line); --pico-range-active-border-color: var(--s-ink-2);
  --pico-range-thumb-color: var(--s-ink); --pico-range-thumb-active-color: var(--s-accent);
  --pico-dropdown-background-color: var(--s-surface); --pico-dropdown-border-color: var(--s-line);
  --pico-dropdown-hover-background-color: var(--s-surface-2); --pico-dropdown-color: var(--s-ink);
  --s-shadow-popover: 0 12px 32px rgba(36, 35, 31, .18);  /* the one shadow: open popovers (spec §2.3) */
  --pico-dropdown-box-shadow: var(--s-shadow-popover);
  --pico-modal-overlay-background-color: rgba(36, 35, 31, 0.35);
  --pico-progress-background-color: var(--s-line); --pico-progress-color: var(--s-accent);
  /* Pico's icons, redrawn in the palette: the tick in accent ink (on yellow), the rest in ink-2 */
  --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(58, 50, 0)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(58, 50, 0)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107, 104, 95)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107, 104, 95)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107, 104, 95)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107, 104, 95)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(107, 104, 95)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(47, 125, 79)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 38, 30)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
}
body { margin: 0; background: var(--s-canvas); color: var(--s-ink); font-family: var(--pico-font-family); }
body.glow { background-image: radial-gradient(60rem 40rem at 85% -10%, var(--s-glow) 0%, transparent 70%); background-repeat: no-repeat; }
h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 var(--s-space); }
h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 calc(var(--s-space) / 2); }
h3 { font-size: 1.125rem; font-weight: 600; } h4 { font-size: 1rem; font-weight: 600; }
h5, h6 { font-size: 0.875rem; font-weight: 600; }
small, .small { font-size: 0.875rem; }
time, .num, .date { font-variant-numeric: tabular-nums; }
.display { font-size: 2.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.container { max-width: var(--s-max); margin: 0 auto; padding: 0 var(--s-gutter); }
main.container { padding-top: 1rem; padding-bottom: 2rem; }
footer.container { padding-top: 1rem; padding-bottom: 2rem; }

/* header: the "Main" navigation holds the wordmark, the section pills and the person (right) */
.site-header, .site-nav { display: flex; align-items: center; gap: var(--s-space); }
.site-header { padding-top: 1rem; padding-bottom: 1rem; }
.site-nav { flex: 1; min-width: 0; }
.wordmark { flex: none; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.25rem; color: var(--s-ink); text-decoration: none; }
.wordmark:hover { color: var(--s-ink); text-decoration: none; }
.wordmark svg { width: 1.25rem; height: 1.25rem; }
.site-header .pills { flex: none; display: flex; gap: .25rem; margin: 0 auto; padding: .25rem; list-style: none; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-pill); }
.site-header .pills li { padding: 0; margin: 0; list-style: none; }
.pill { display: inline-block; padding: .45rem 1rem; border-radius: var(--s-radius-pill); color: var(--s-ink); text-decoration: none; font-weight: 500; line-height: 1.2; white-space: nowrap; }
nav li .pill, .pill { margin: 0; }
.pill:hover { background: var(--s-surface-2); color: var(--s-ink); text-decoration: none; }
.pill--active, .pill[aria-current="page"] { background: var(--s-ink); color: var(--s-canvas); }
.pill--active:hover, .pill[aria-current="page"]:hover { background: var(--s-ink); color: var(--s-canvas); }
.pill--action { background: var(--s-accent); color: var(--s-accent-ink); font-weight: 600; }
.pill--action:hover { background: var(--s-accent-hover); color: var(--s-accent-ink); }
.pill:focus-visible, a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
summary:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 2px; box-shadow: none; }
.who { flex: 0 1 auto; min-width: 0; margin-left: auto; }
div.who { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .25rem .25rem 1rem; border: 1px solid var(--s-line); border-radius: var(--s-radius-pill); background: var(--s-surface); }  /* at a gate: name and Log out, no menu */
.site-header .pills + .who { margin-left: 0; }
@media (min-width: 64rem) {
  .site-header .pills { position: relative; }
  .site-header .pills .menu { position: static; }
  .site-header .pills .menu-panel { left: 50%; translate: -50% 0; }
}
.who-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s-ink); }
a.who-name { padding: .3rem .5rem; margin: -.3rem 0; border-radius: var(--s-radius-pill); text-decoration: none; }
a.who-name:hover { background: var(--s-surface-2); color: var(--s-ink); text-decoration: none; }
.who form { flex: none; margin: 0; }
div.who .inline button { width: auto; margin: 0; padding: .3rem .85rem; font-size: .875rem; font-weight: 500; border: 0; border-radius: var(--s-radius-pill); background-color: var(--s-surface-2); color: var(--s-ink); }
.who .inline button:hover { background-color: var(--s-line); color: var(--s-ink); }

/* surfaces */
.card { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-card); padding: 1.25rem 1.5rem; }
/* The intake request dialog is an inline panel, not Pico's full-screen modal overlay. */
dialog.card { position: static; display: block; width: auto; min-width: 0; height: auto; min-height: 0; padding: 1.25rem 1.5rem; backdrop-filter: none; }
.card--dark { background: var(--s-ink); color: var(--s-canvas); border-color: var(--s-ink); }
.card--dark .muted, .card--dark p { color: var(--s-on-dark); }
.stat { display: inline-grid; gap: .25rem; } .stat .display { margin: 0; } .stat small { color: var(--s-ink-2); }
.card--dark .stat small { color: var(--s-on-dark); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-space); margin: 0 0 var(--s-space); }
.toolbar h1, .toolbar h2 { margin: 0; }
/* `.badge` (status page and older templates) is an alias of the chip look */
.chip, .badge { display: inline-block; padding: .15rem .6rem; border-radius: var(--s-radius-pill); font-size: .8125rem; font-weight: 500; background: var(--s-surface-2); color: var(--s-ink); white-space: nowrap; }
.chip--ok, .badge.ok { background: var(--s-ok-tint); color: var(--s-ok-ink); }
.chip--warn, .badge.notice { background: var(--s-warn-tint); color: var(--s-warn-ink); }
.chip--bad, .badge.warning { background: var(--s-bad-tint); color: var(--s-bad-ink); }
.chip--muted { color: var(--s-ink-2); }
.empty { text-align: left; padding: 2rem 1.5rem; }
.empty p { margin: 0; } .empty p + * { margin-top: 1rem; }
.page-card { max-width: 36rem; margin: 3rem auto; }
.page-card .wordmark { margin-bottom: 1.25rem; }
.page-card h1 { margin-bottom: .5rem; }
.page-card p:last-child { margin-bottom: 0; }
.page-actions { margin-top: 1.25rem; }

/* sub-navigation: a second pill row inside the page (patient sections, project and admin tabs) */
.tabs ul, ul.subnav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0 0 var(--s-space); padding: 0; }
nav.tabs ul:first-of-type, nav ul.subnav:first-of-type { margin-left: 0; }
.tabs li, ul.subnav li { padding: 0; margin: 0; }
.tabs a:not([role="button"]), ul.subnav a:not([role="button"]) { display: inline-block; margin: 0; padding: .4rem .9rem; border-radius: var(--s-radius-pill); border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink); text-decoration: none; font-weight: 500; line-height: 1.2; }
.tabs a:not([role="button"]):hover, ul.subnav a:not([role="button"]):hover { background: var(--s-surface-2); }
.tabs a[aria-current="page"], ul.subnav a[aria-current="page"],
.tabs a[aria-current="page"]:hover, ul.subnav a[aria-current="page"]:hover { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-accent-ink); }
/* only the top bar uses solid ink; the second row marks its place with the accent */

/* tables */
/* separate borders with no spacing: same look as collapse, but rounded corners work */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
thead th { position: sticky; top: 0; z-index: 2; background: var(--s-surface-2); font-weight: 600; text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--s-line); }
tbody :is(td, th) { padding: .55rem .75rem; border-bottom: 1px solid var(--s-line); vertical-align: middle; }
tbody th { font-weight: 500; text-align: left; }
:where(table) th, :where(table) td { background-color: transparent; }
thead th { background-color: var(--s-surface-2); }
tbody tr:hover { background: var(--s-surface-2); }
td.num, th.num { text-align: right; } td.num { white-space: nowrap; }  /* a date and its time, a size and its unit */
/* a table in a card: `<div class="card card--table">` around the table (or a .table-scroll) */
.card--table { padding: 0; overflow: hidden; overflow: clip; }  /* clip keeps the sticky header working */
.card--table table { margin: 0; }
.card--table :is(th, td):first-child { padding-left: 1.5rem; }
.card--table :is(th, td):last-child { padding-right: 1.5rem; }
.card--table tbody tr:last-child :is(td, th) { border-bottom: 0; }
/* the scroll box of a long table: it scrolls both ways, so the sticky header sticks inside it */
.table-scroll { overflow: auto; max-height: 70vh; }
.card--table > .table-scroll table { margin: 0; }
/* tables not yet in a card get the surface anyway */
main > table { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-card); overflow: hidden; overflow: clip; }
main > table thead tr:first-child th:first-child { border-top-left-radius: var(--s-radius-card); }
main > table thead tr:first-child th:last-child { border-top-right-radius: var(--s-radius-card); }
main > table tbody tr:last-child td { border-bottom: 0; }
main > table :is(th, td):first-child { padding-left: 1rem; }
main > table :is(th, td):last-child { padding-right: 1rem; }
main > table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--s-radius-card); }
main > table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--s-radius-card); }
table.compact td, table.compact th { padding: 0.35rem 0.5rem; }

/* forms (Pico handles controls; these are the layout bits) */
.search { display: flex; flex-wrap: wrap; gap: .5rem var(--s-space); align-items: end; margin-bottom: var(--s-space); }
.search label { margin: 0; } .search input[type="search"], .search select { border-radius: var(--s-radius-pill); }
/* Buttons, submit buttons included: pill radius, weight 600, sized to their label. `html` lifts
   the rule above Pico's `button[type=submit] { width: 100% }`. Full width only in the narrow
   single-form pages (sign-in, account, confirmations). */
html :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) { border-radius: var(--s-radius-pill); font-weight: 600; width: auto; }
html :is(.narrow, .auth) button[type="submit"]:not(.inline button) { width: 100%; }
[type="checkbox"]:not([role="switch"]) { border-radius: .3rem; }
.inline { display: inline; margin: 0; } .inline button { width: auto; margin: 0; padding: .25rem .75rem; }
.flash { padding: .75rem 1rem; border-radius: var(--s-radius-control); border: 1px solid var(--s-line); background: var(--s-surface); box-shadow: none; margin: 0 0 var(--s-space); }
.acting-banner { display: flex; gap: var(--s-space); align-items: center; justify-content: center; padding: .5rem 1rem; background: var(--s-warn-tint); color: var(--s-warn-ink); border-bottom: 1px solid var(--s-line); }
.flash-success { border-left: 4px solid var(--s-ok); } .flash-error, .form-errors { border-left: 4px solid var(--s-bad); }
.pagination ul { display: flex; align-items: center; gap: .5rem; list-style: none; padding: 0; margin: var(--s-space) 0; }
.pagination li { margin: 0; padding: 0; list-style: none; }
.pagination .pill { border: 1px solid var(--s-line); background: var(--s-surface); }
.pagination .chip { color: var(--s-ink-2); }
nav.pagination ul:first-of-type { margin-left: 0; }
.narrow { max-width: 28rem; margin: 3rem auto; }
.once { font-family: ui-monospace, monospace; user-select: all; }
.codes { columns: 2; font-family: ui-monospace, monospace; }
.muted { color: var(--s-ink-2); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* health and admin status */
.status { display: grid; grid-template-columns: max-content 1fr; gap: calc(var(--s-space) / 2) var(--s-space); padding: var(--s-space); border: 1px solid var(--s-line); border-radius: var(--s-radius-control); }
.status dt { font-weight: 600; }
.status dd { margin: 0; }
.status .ok { color: var(--s-ok); }
.status .fail { color: var(--s-bad); }

/* landing: the "today" panel and the tiles (Phase 7 §4 item 3) */
.greeting { margin: 0 0 .5rem; }
.today { display: flex; justify-content: space-between; gap: 3rem; flex-wrap: wrap; margin: 1.5rem 0; padding: 1.75rem 2rem; }
.today .stat { margin: 0; flex: 1 1 0; }
.today .stat + .stat { border-left: 1px solid var(--s-on-dark-rule); padding-left: 3rem; }
.today .stat .display { color: var(--s-canvas); font-variant-numeric: tabular-nums; }
.today .stat small { font-size: .9375rem; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-space); margin: 0 0 2rem; padding: 0; }
.tiles li { list-style: none; margin: 0; }
.tiles a.card { display: flex; flex-direction: column; height: 100%; color: var(--s-ink); text-decoration: none; }
.tiles a.card:hover { border-color: var(--s-ink); }
.tiles h2 { margin: 0 0 .5rem; }
.tiles p { margin: 0; color: var(--s-ink-2); }
/* the footer slot gives the three tiles one rhythm: a sparkline or a figure, same height */
.centre-patients a { display: block; color: var(--s-ink); text-decoration: none; }
.centre-patients a:hover h2 { text-decoration: underline; }
.centre-patients p { margin: 0; color: var(--s-ink-2); }
.tile-foot { margin-top: auto; padding-top: 1.25rem; min-height: 4.5rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; }
.tile-foot small { color: var(--s-ink-2); }
.tile-foot .figure { font-size: 1.75rem; font-weight: 600; line-height: 32px; font-variant-numeric: tabular-nums; }
.spark { display: block; width: 100%; height: 32px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--s-ink-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark .spark-end { stroke: var(--s-accent); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* the patient list's Course column: a 60px sparkline per row, dated events per quarter */
/* the box is SPARK_WIDTH × SPARK_HEIGHT (app/routers/patients.py, 60 × 20) in rem; the router
   sets the viewBox from the same constant */
.card--table td.course-cell { width: calc(3.75rem + 3rem); padding-left: 1.5rem; }
.course-cell .spark { width: 3.75rem; height: 1.25rem; }
.search button.pill { flex: 0 0 auto; width: auto; margin: 0; border: 1px solid var(--s-line); background: var(--s-surface); color: var(--s-ink); }
.search button.pill:hover { background: var(--s-surface-2); }
.empty .pill--action { display: inline-block; }

/* Phase 3: HTMX states. The indicator rules replace the <style> HTMX would inject (CSP). */
.htmx-indicator { opacity: 0; visibility: hidden; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; visibility: visible; }

/* Project pages (Phase 7 design §4.6) */
.project-header { flex-wrap: wrap; margin-bottom: .25rem; }
.project-meta { margin: 0 0 var(--s-space); font-size: .875rem; }
.project-refresh { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--s-space); margin: 0 0 var(--s-space); }
.project-refresh p { margin: 0; font-size: .875rem; }
/* cards stacked in the page get the rhythm; zero specificity, so any own margin wins */
:where(main > .card) { margin-bottom: var(--s-space); }
.row-actions { text-align: right; white-space: nowrap; }
.row-actions form { display: inline-flex; gap: .4rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(var(--s-space) * 1.5); }
.form-grid-wide { grid-column: 1 / -1; }
.form-row { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem var(--s-space); }
.form-row label { margin: 0; flex: 0 1 22rem; }
.form-row :is(input, select) { margin-bottom: 0; }
form.card h2, section.card h2 { margin-bottom: var(--s-space); }
details.card > summary { font-weight: 600; margin: 0; }
details.card[open] > summary { margin-bottom: .75rem; }
details.archived ul { margin: 0; padding-left: 1.25rem; }
/* the invitation: the one highlighted card of the list, a yellow edge on the surface */
.invite { border-left: 6px solid var(--s-accent); }
.invite-list { list-style: none; margin: 0; padding: 0; }
.invite-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem var(--s-space); padding: .75rem 0; margin: 0; list-style: none; border-top: 1px solid var(--s-line); }
.invite-list li:first-child { border-top: 0; padding-top: 0; }
.invite-list li:last-child { padding-bottom: 0; }
.invite-actions { display: flex; gap: .5rem; margin: 0; }
.invite-actions button, .row-actions button, .freeze-actions button, .rule-submit button { width: auto; margin: 0; }
html button.pill--action { border: 0; padding: .5rem 1.1rem; border-radius: var(--s-radius-pill); background: var(--s-accent); color: var(--s-accent-ink); }
html button.pill--action:hover { background: var(--s-accent-hover); color: var(--s-accent-ink); }
/* the completeness gauge (§2.5): a track, an arc for the share, the percentage inside */
svg.gauge { display: block; width: 48px; height: 48px; overflow: visible; }
.gauge circle { fill: none; stroke-width: 3; }
.gauge-track { stroke: var(--s-line); }
.gauge-arc { stroke: var(--s-ink); stroke-linecap: round; }
.gauge-arc--ok { stroke: var(--s-ok); } .gauge-arc--warn { stroke: var(--s-warn); } .gauge-arc--bad { stroke: var(--s-bad); }
.gauge text { fill: var(--s-ink); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gauge text.gauge-full { font-size: 10px; }  /* "100%" fits inside the ring */
svg.gauge--small { width: 32px; height: 32px; }
.gauge-none { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; }
/* the patients tab's centre table: the gauge gets its room, the status chip no more than it needs */
.project-centres td.gauge-col { padding-top: .35rem; padding-bottom: .35rem; }
.project-centres .gauge-col { width: 10rem; } .project-centres .status-col { width: 9rem; }
/* variables: a three-column checklist per table, the save button sticky in the toolbar */
.toolbar--sticky { position: sticky; top: 0; z-index: 2; flex-wrap: wrap; padding: .75rem 0; background: var(--s-canvas); }
.toolbar--sticky input[type="search"] { flex: 1 1 16rem; max-width: 24rem; margin: 0 0 0 auto; border-radius: var(--s-radius-pill); }
.toolbar--sticky button { margin: 0; }
.checklist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem calc(var(--s-space) * 1.5); margin: 0; padding: 0; }
.checklist h3 { grid-column: 1 / -1; margin: .75rem 0 .25rem; font-size: .875rem; font-weight: 600; color: var(--s-ink-2); }
.checklist .check-section:first-child h3 { margin-top: 0; }
/* a registry sub-section: its heading and items sit in the grid; the filter hides a section
   whose items are all hidden, heading included */
.check-section { display: contents; }
.check-section:not(:has(> .check:not([hidden]))) { display: none; }
.ticked-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 var(--s-space); padding: 0; list-style: none; }
.ticked-chips li { margin: 0; list-style: none; }
.check { padding: .35rem 0; border-bottom: 1px solid var(--s-line); }
.check label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .6rem; margin: 0; line-height: 1.35; }
.check label input[type="checkbox"] { margin: .1rem 0 0; }
.check label small { display: block; font-size: .75rem; overflow-wrap: anywhere; }
.check-extra { display: none; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: .4rem; margin: .4rem 0 0 1.75rem; }
.check:has(input[type="checkbox"]:checked) .check-extra { display: grid; }
.check-extra input { margin: 0; padding: .3rem .6rem; height: auto; font-size: .875rem; }
.checklist-head { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 .25rem; }
.checklist-head h3 { margin: 0; font-size: .9375rem; }
details.variable-group > summary { display: flex; align-items: center; gap: .5rem; }
details.variable-group > summary::after { margin-left: auto; }
/* the rule builder: a group is a card, nested groups on the second surface; conditions in rows */
.rule-group, .rule-event { margin: 0 0 .75rem; padding: 1rem 1.25rem; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-card); }
:is(.rule-group, .rule-event) :is(.rule-group, .rule-event) { background: var(--s-surface-2); }
:is(.rule-group, .rule-event) :is(.rule-group, .rule-event) :is(.rule-group, .rule-event) { background: var(--s-surface); }
:is(.rule-group, .rule-event) > legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; padding: 0; font-weight: 600; }
:is(.rule-group, .rule-event) > legend + * { clear: both; }
:is(.rule-group, .rule-event) > legend select { width: auto; margin: 0; }
.rule-condition { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.rule-condition :is(select, input) { width: auto; flex: 0 1 auto; max-width: 22rem; margin: 0; }
.rule-condition select[multiple] { min-width: 10rem; }
.rule-condition .field-error { flex-basis: 100%; }
html .rule-condition button.rule-remove { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: .3rem .7rem; font-size: 1.125rem; line-height: 1; }  /* a ≥ 32px target */
.rule-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.rule-actions button { width: auto; margin: 0; }
.rule-submit { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--s-space) 0 0; }
.rule-preview { margin: 0 0 var(--s-space); }
.rule-preview .stat { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .75rem; }
.rule-preview table { margin: 0; }
.rule-preview td:last-child { text-align: right; }
/* freezes */
.freeze-new { flex-wrap: wrap; }
.freeze-new p { margin: 0; flex: 1 1 24rem; }
.freeze-note { margin: 0 0 var(--s-space); }
.freeze-note .chip { white-space: normal; }
table.freezes .hashes { min-width: 14rem; max-width: 18rem; }
table.freezes .hashes code { display: block; padding: 0; background: none; font-size: .75rem; overflow-wrap: anywhere; color: var(--s-ink-2); }
table.freezes .hashes small { display: block; margin-top: .25rem; font-size: .75rem; }
/* header menus (D-106): a <details> per entry with sub-pages. The summary is the pill; the panel
   is a popover card of grouped entries, each an icon tile, a label and a line of help. Open and
   close is the element's own (click, Enter, Space); app.js adds hover, Escape and one-at-a-time. */
.menu { position: relative; margin: 0; padding: 0; border: 0; --pico-accordion-close-summary-color: var(--s-ink); --pico-accordion-open-summary-color: var(--s-ink); --pico-accordion-active-summary-color: var(--s-ink); }
.menu > summary { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .45rem .75rem .45rem 1rem; line-height: 1.2; list-style: none; color: var(--s-ink); font-weight: 500; white-space: nowrap; cursor: pointer; }
.menu[open] > summary { margin-bottom: 0; color: var(--s-ink); }
.menu > summary::after, .menu > summary::-webkit-details-marker { display: none; content: none; }
.menu > summary.pill--active { --pico-accordion-close-summary-color: var(--s-canvas); --pico-accordion-open-summary-color: var(--s-canvas); --pico-accordion-active-summary-color: var(--s-canvas); --pico-primary: var(--s-canvas); color: var(--s-canvas); }
.menu > summary:focus-visible { outline: 3px solid var(--s-ink); outline-offset: 2px; color: inherit; }
.menu > summary > svg { width: 1rem; height: 1rem; flex: none; color: var(--s-ink-2); transition: transform 200ms ease; }
.menu > summary.pill--active > svg { color: inherit; }
.menu[open] > summary > svg { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + .5rem); left: 0; z-index: 30; display: flex; gap: 2rem; padding: 1rem 1.25rem; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-radius-card); box-shadow: var(--s-shadow-popover); animation: menu-in 160ms ease-out; }
.menu--end .menu-panel { left: auto; right: 0; }
@keyframes menu-in { from { opacity: 0; margin-top: -.25rem; } to { opacity: 1; margin-top: 0; } }
.menu-group { min-width: 0; }
.menu-title { margin: 0 .5rem .5rem; font-size: .8125rem; font-weight: 500; color: var(--s-ink-2); }
.menu-group ul { display: flex; flex-direction: column; align-items: stretch; gap: .125rem; margin: 0; padding: 0; list-style: none; }  /* Pico centres a nav list's items */
.menu-group li { margin: 0; padding: 0; list-style: none; }
.menu-group form { margin: 0; }
.menu-link { display: flex; align-items: flex-start; gap: .75rem; width: 100%; margin: 0; padding: .4rem .5rem; border: 0; border-radius: var(--s-radius-control); background: none; color: var(--s-ink); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; line-height: 1.25; }
.menu-link:hover, .menu-link:focus-visible { background: var(--s-surface-2); color: var(--s-ink); text-decoration: none; }
.menu-link:focus-visible { outline: 3px solid var(--s-ink); outline-offset: -3px; }
.menu-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--s-line); border-radius: var(--s-radius-control); background: var(--s-surface); color: var(--s-ink); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.menu-icon svg { width: 1.125rem; height: 1.125rem; }
.menu-link:hover .menu-icon { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-canvas); }
.menu-link[aria-current="page"] .menu-icon { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-accent-ink); }
.menu-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.menu-text strong { font-weight: 500; font-size: .9375rem; }
.menu-text small { font-size: .75rem; color: var(--s-ink-2); transition: color 200ms ease; }
.menu-link:hover .menu-text small { color: var(--s-ink); }
/* the person pill is such a menu, its panel hangs from its right edge */
.who-summary { gap: .4rem; padding: .4rem .5rem .4rem 1rem; border: 1px solid var(--s-line); border-radius: var(--s-radius-pill); background: var(--s-surface); }
.who-summary:hover, .who[open] > .who-summary { background: var(--s-surface-2); }
.who-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freeze-actions { white-space: nowrap; text-align: right; }
.freeze-actions form { display: inline; }
/* tablet (spec §2.4): the pill bar wraps under the wordmark, the person stays top right; tiles
   in one column; a card's table scrolls inside it rather than wrapping, the first column stays
   in view */
@media (max-width: 63.99rem) {
  .site-nav { flex-wrap: wrap; row-gap: 0; }
  .site-nav::after { content: ""; order: 2; flex-basis: 100%; }  /* the line break before the pills */
  .site-header .pills { order: 3; flex-wrap: wrap; margin: .75rem 0 0; }
  .site-header .pills + .who { margin-left: auto; }
  .site-header .pills { position: relative; }
  .site-header .pills .menu { position: static; }
  .site-header .pills .menu-panel { flex-wrap: wrap; width: max-content; max-width: calc(100vw - 2 * var(--s-gutter)); }
  .tiles { grid-template-columns: 1fr; }
  .table-scroll td { white-space: nowrap; }
  .table-scroll :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background-color: var(--s-surface); }
  .table-scroll thead th:first-child { z-index: 3; background-color: var(--s-surface-2); }
  .table-scroll tbody tr:hover td:first-child { background-color: var(--s-surface-2); }
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the freeze actions stack, so that the row fits the card at tablet width */
  .table-scroll td.freeze-actions, .table-scroll td.hashes { white-space: normal; }
  .freeze-actions :is(a, form) { display: flex; width: max-content; margin: 0 0 .35rem auto; }
  table.freezes .hashes { min-width: 10rem; }
}
@media (max-width: 47.99rem) {
  .checklist, .form-grid { grid-template-columns: 1fr; }
}

/* Patient page (Phase 7 design §4.5): header card, course strip, section pills, record cards */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.back { margin: 0 0 .75rem; }
.back a { color: var(--s-ink-2); text-decoration: none; }
.back a:hover { color: var(--s-ink); text-decoration: underline; }
.patient-header { margin: 0 0 var(--s-space); }
.patient-header .toolbar { margin-bottom: .25rem; flex-wrap: wrap; }
.patient-title { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.patient-title h1 { margin: 0; font-variant-numeric: tabular-nums; }
.patient-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.patient-actions form { margin: 0; }
.patient-meta { margin: 0; font-size: .875rem; font-variant-numeric: tabular-nums; }
/* the patient history (Phase 8 §4): condition chips, the add form, the derived conditions */
.patient-history { margin: 0 0 var(--s-space); }
.patient-fields { margin: 0 0 var(--s-space); }
/* the projects the patient is enrolled in, each chip opening the patient in that project */
.patient-projects { margin: 0 0 var(--s-space); }
.patient-projects h2 { margin: 0; }
.patient-history .toolbar { flex-wrap: wrap; gap: .5rem var(--s-space); }
.patient-history h2 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.chips li { margin: 0; list-style: none; }
.chips a.chip { text-decoration: none; border: 1px solid transparent; }
.chips a.chip:hover { border-color: var(--s-line); }
.chip--derived { background: var(--s-surface); border: 1px dashed var(--s-line); }
.chips a.chip--derived { border-color: var(--s-line); }
.condition-add { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem var(--s-space); margin: 0; }
.condition-add label { margin: 0; font-size: .875rem; color: var(--s-ink-2); }
.condition-add :is(input, select) { margin: .25rem 0 0; }
html .condition-add button.pill--quiet { padding: .6rem 1.1rem; }
.derived-conditions { margin: 0 0 var(--s-space); padding: .75rem 1rem; border: 1px dashed var(--s-line); border-radius: var(--s-radius-control); }
.derived-conditions ul { margin: 0; padding-left: 1.25rem; }
.derived-conditions .sources { font-size: .875rem; }
/* the revealed name: a popover under the "Show name" pill (spec §2.3, §4.8) */
.reveal { position: relative; display: inline-block; }
#revealed-name { position: absolute; top: calc(100% + .5rem); right: 0; z-index: 5; }
.popover, #revealed-name > .revealed-name { display: block; padding: .75rem 1.1rem; background: var(--s-surface); color: var(--s-ink); border: 1px solid var(--s-line); border-radius: var(--s-radius-card); box-shadow: var(--s-shadow-popover); font-weight: 600; white-space: nowrap; }
/* a quiet pill: links and buttons alike (Pico's button colours are overridden here) */
html .pill--quiet, html button.pill--quiet { display: inline-block; width: auto; margin: 0; padding: .4rem .95rem; border: 1px solid var(--s-line); border-radius: var(--s-radius-pill); background: var(--s-surface); color: var(--s-ink); font-size: .875rem; font-weight: 500; line-height: 1.2; text-decoration: none; }
html .pill--quiet:hover, html button.pill--quiet:hover { background: var(--s-surface-2); border-color: var(--s-line); color: var(--s-ink); text-decoration: none; }

/* the course strip (§3): percentages across, px down; a label lane above the axis */
.course-card { margin: 0 0 var(--s-space); padding: 1rem 1.5rem .75rem; }
svg.course, svg.course svg { overflow: visible; }
svg.course { display: block; font-variant-numeric: tabular-nums; }
.course-axis { stroke: var(--s-ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: course-draw 400ms ease-out; }
.course--static .course-axis { animation: none; }
@keyframes course-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .course-axis { animation: none; stroke-dasharray: none; } }
.course-tick line { stroke: var(--s-line); stroke-width: 1; }
.course-tick text { fill: var(--s-ink-2); font-size: 12px; }
.course-today { stroke: var(--s-ink); stroke-width: 1; }
.course-hit { fill: transparent; }
.course-marker a { cursor: pointer; }
.course-marker a:focus { outline: none; }  /* the ring below is the focus mark (§2.7) */
.course-focus { fill: none; stroke: var(--s-ink); stroke-width: 3; visibility: hidden; }
.course-marker a:focus-visible .course-focus { visibility: visible; }
.course-marker--treatment .course-dot { fill: var(--s-accent); stroke: var(--s-accent-ink); stroke-width: 1; }
.course-marker--observation .course-dot { fill: var(--s-surface); stroke: var(--s-ink); stroke-width: 1.5; }
.course-marker--interval .course-dot { fill: var(--s-accent); stroke: var(--s-accent-ink); stroke-width: 1; }
.course-marker a:hover .course-dot { stroke: var(--s-ink); stroke-width: 2.5; }
.course-label { visibility: hidden; pointer-events: none; }
.course-label rect { fill: var(--s-ink); }
.course-label text { fill: var(--s-canvas); font-size: 12px; font-weight: 500; }
.course-marker:hover .course-label, .course-marker:focus-within .course-label { visibility: visible; }
.course-rest { pointer-events: none; }
.course-rest rect { fill: var(--s-surface-2); stroke: var(--s-line); stroke-width: 1; }
.course-rest text { fill: var(--s-ink-2); font-size: 12px; font-weight: 500; }
svg.course:has(.course-marker:hover, .course-marker:focus-within) .course-rest { visibility: hidden; }
.course-more { fill: var(--s-ink-2); font-size: 11px; font-weight: 600; text-anchor: middle; }
.course-empty { margin: .25rem 0 0; font-size: .875rem; }

/* section pills: the accent active state is the .tabs rule above */
nav.tabs ul.pills { margin-bottom: var(--s-space); }

/* patient sections as a segmented control: a muted track, the open section on a raised chip.
   Pico lays out every <nav> as a spaced flex row, hence display: block here. */
nav.section-tabs { display: block; margin: 0 0 var(--s-space); }
nav.section-tabs ul.pills { display: flex; flex-wrap: nowrap; gap: .25rem; width: 100%; margin: 0; padding: .25rem; overflow-x: auto; scrollbar-width: thin; border-radius: var(--s-radius-control); background: var(--s-surface-2); }
nav.section-tabs li { flex: 1 1 auto; }
nav.section-tabs a:not([role="button"]) { display: block; padding: .4rem .9rem; border: 0; border-radius: calc(var(--s-radius-control) - .25rem); background: transparent; color: var(--s-ink-2); text-align: center; white-space: nowrap; font-size: .875rem; transition: background-color .15s, color .15s, box-shadow .15s; }
nav.section-tabs a:not([role="button"]):hover { background: rgba(36, 35, 31, 0.05); color: var(--s-ink); }
nav.section-tabs a:not([role="button"]):focus-visible { outline: 2px solid var(--s-ink); outline-offset: 2px; }
nav.section-tabs a[aria-current="page"], nav.section-tabs a[aria-current="page"]:hover { background: var(--s-surface); color: var(--s-ink); box-shadow: 0 1px 2px rgba(36, 35, 31, 0.12), 0 0 0 1px var(--s-line); }

/* record tables as cards; `one` tables and the header as a two-column field grid */
.record-table { margin: 0 0 var(--s-space); }
.record-table > h2, .record-toolbar h2 { margin: 0 0 var(--s-space); }
.record-toolbar { flex-wrap: wrap; align-items: end; }
.record-toolbar h2 { margin: 0; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(var(--s-space) * 2); }
.record-section { margin: 0 0 var(--s-space); padding: 0; border: 0; }
.record-section legend { font-weight: 600; font-size: .9375rem; color: var(--s-ink-2); margin-bottom: .5rem; padding: 0; }
details.event { margin: 0 0 .5rem; padding: 0; border: 1px solid var(--s-line); border-radius: var(--s-radius-control); background: var(--s-surface); }
details.event:last-of-type { margin-bottom: 0; }
details.event > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; padding: .7rem 1rem; margin: 0; line-height: 1.3; font-variant-numeric: tabular-nums; }
details.event > summary::after { margin-left: auto; order: 99; }
details.event > summary { color: var(--s-ink); }
details.event > summary strong { font-weight: 600; margin-right: .25rem; color: var(--s-ink); }
details.event[open] { background: var(--s-surface); border-color: var(--s-ink-2); }
details.event[open] > summary { border-bottom: 1px solid var(--s-line); margin: 0; }
.event-body { padding: 1rem 1rem .5rem; scroll-margin-top: 4.5rem; }
details.event .summary-item { color: var(--s-ink-2); font-variant-numeric: tabular-nums; }
.calculated { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 var(--s-space); padding: .75rem 1rem; border-radius: var(--s-radius-control); background: var(--s-surface-2); font-size: .875rem; }
.calculated div { display: flex; gap: .4rem; }
.calculated dt { font-weight: 500; color: var(--s-ink-2); }
.calculated dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.narrow--wide { max-width: 36rem; }
@media (max-width: 47.99rem) {
  .fields { grid-template-columns: 1fr; }
}

/* Phase 3: per-field save (D-056). The "Saved" marker fades by itself; no script involved. */
.field form { margin: 0; }
.field-saved { color: var(--s-ok); animation: field-saved-fade 4s ease-in forwards; }
@keyframes field-saved-fade {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}
.field-error { display: block; color: var(--s-bad); }
.field-conflict { margin: .25rem 0 var(--s-space); padding: .5rem .75rem; border-left: 4px solid var(--s-bad); }
.field-conflict p { margin: 0 0 0.5rem; }
.field-save { width: auto; margin: 0; padding: 0.25rem 0.75rem; }

/* Phase 3: event rows — add form and the delete confirmation (D-062) */
.event-add { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem var(--s-space); margin: 0; }
.event-add label { margin: 0; font-size: .875rem; color: var(--s-ink-2); }
.event-add :is(input, select) { margin: .25rem 0 0; }
.event-add button { width: auto; }
html .event-add button.pill--quiet { padding: .6rem 1.1rem; }
.event-add .field-error { flex-basis: 100%; }
.confirm-delete { margin-top: var(--s-space); }
.confirm-delete summary { color: var(--s-bad); font-size: .875rem; }
.confirm-delete[open] { padding: .75rem 1rem; border-radius: var(--s-radius-control); background: var(--s-surface); box-shadow: var(--pico-dropdown-box-shadow); }
.confirm-delete button { width: auto; }
progress.completeness { width: 4rem; vertical-align: middle; }
/* reports: the gauge is the visible element; the progress stays in the DOM, laid over it */
.gauge-cell { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.gauge-cell progress { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.gauge-cell svg.gauge { flex: none; }
.gauge-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 1.5rem 1rem; margin: 0; padding: 0; }
.gauge-tile { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 5rem; }
.report-note { margin: calc(-1 * var(--s-space) / 2) 0 var(--s-space); padding: 0 1.5rem; }
.gauge-tile figcaption { font-size: .85rem; color: var(--s-ink-2); text-align: center; }

/* sign-in and account pages: one centred card, the wordmark above it, no navigation */
.auth { max-width: 26rem; margin: 4rem auto; }
.auth-brand { max-width: 26rem; margin: 4rem auto 0; text-align: center; }
.auth-brand + .auth { margin-top: 1rem; }
.auth .wordmark { display: inline-flex; margin: 0 0 1rem; }
.auth h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.auth p { max-width: 70ch; }
.auth .once { display: block; overflow-wrap: anywhere; }
.codes-card { background: var(--s-surface-2); border: 1px solid var(--s-line); border-radius: var(--s-radius-control); padding: 1rem 1.25rem; margin-bottom: var(--s-space); }
.codes-card .codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; margin: 0 0 .75rem; padding-left: 0; columns: auto; list-style: decimal inside; line-height: 1.9; font-size: .85rem; }
.codes-card p { margin: 0; }
/* profile: stacked cards */
.profile-stack > .card { margin-bottom: var(--s-space); }
.profile-stack h2 { font-size: 1.15rem; }
.profile-stack > .card--table { margin-top: calc(-1 * var(--s-space) / 2); } .card--table > p.muted { padding: 1rem 1.5rem; margin: 0; }
.auth-footer { text-align: center; }
.auth label:has(input[type="checkbox"]) { margin-bottom: 1rem; }
.codes-card .codes li { margin: 0; padding: 0; white-space: nowrap; }
/* Pico joins a role="search" group's corners; the search button keeps its pill */
html .search[role="search"] > button { border-radius: var(--s-radius-pill); }
/* the search and filter rows: the button sits on the inputs' baseline at their height */
.search :is(input, select) { margin-bottom: 0; }
html .search > button { height: calc(1rem * var(--pico-line-height) + 2 * var(--pico-form-element-spacing-vertical) + 2 * var(--pico-border-width)); padding-block: 0; margin: 0; }
html .form-row button.pill--quiet, html .form-row button.pill--action { padding: .7rem 1.2rem; }
html .invite-actions button.pill--quiet { padding: .5rem 1.1rem; font-size: 1rem; }

/* admin and identities (Phase 7 task 8) */
.verdict { margin: 0 0 var(--s-space); padding: 1rem 1.5rem; font-size: 1.25rem; font-weight: 600; }
.card--dark.verdict { color: var(--s-canvas); }
.verdict-detail { display: block; margin-top: .25rem; font-size: .875rem; font-weight: 500; color: var(--s-on-dark); }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .5rem 2rem; margin: 0; }
.facts dt { font-weight: 500; color: var(--s-ink-2); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.role-help { margin: .75rem 0 1rem; font-size: .875rem; }
.role-help dd { color: var(--s-ink-2); }
.access-actions, .form-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.access-actions form { margin: 0; }
html .access-actions button.pill--quiet, html .form-actions button.pill--quiet { padding: .5rem 1.1rem; font-size: 1rem; }
html :is(a, button).pill--danger, html :is(a, button).pill--danger:hover { border-color: var(--s-bad-line); color: var(--s-bad-ink); }  /* the chip--bad tone */
html :is(a, button).pill--danger:hover { background: var(--s-bad-tint); }
.form-note { margin: .75rem 0 0; }
.card .search { margin-bottom: 0; }
.search--filters label { flex: 0 1 12rem; }
.search--filters label:only-of-type { flex-basis: 20rem; }
.search--filters :is(input, select) { margin-bottom: 0; }
.summary-columns label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .6rem; margin: 0 0 .5rem; line-height: 1.35; }
.summary-columns label input[type="checkbox"] { margin: .1rem 0 0; }
.summary-columns label small { grid-column: 2; margin: 0; font-size: .75rem; overflow-wrap: anywhere; }
.card .search--filters label { flex-basis: 16rem; }

/* print (spec §4.9): the patient page as its ID, course strip and record cards on white;
   navigation, pills and actions stay on screen */
@media print {
  :root, :root[data-theme="light"] { --s-canvas: var(--s-white); --s-surface: var(--s-white); --s-surface-2: var(--s-white); }
  body, body.glow { background: var(--s-white); background-image: none; color: var(--s-ink); }
  .site-header, body > footer, .back, .patient-actions, nav.tabs, .pagination, .flash, .acting-banner, #htmx-error,
  .event-add, .confirm-delete, .field-save, .reveal, .htmx-indicator, .page-actions { display: none !important; }
  main.container { max-width: none; padding: 0; }
  .card { border-color: var(--s-line); break-inside: avoid; }
  html :is(input, select, textarea) { background-color: var(--s-white); }
  .course-axis { animation: none; stroke-dasharray: none; }
  .course-label { display: none; }
  a { color: var(--s-ink); text-decoration: none; }
}
/* the inbox (D-118): a count on the person pill and the menu entry; unread items bold */
.who-badge, .menu-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; border-radius: var(--s-radius-pill); background: var(--s-accent); color: var(--s-accent-ink); font-size: .75rem; font-weight: 600; line-height: 1; }
.inbox-list { list-style: none; margin: 0; padding: .5rem 1.5rem; }
.inbox-item { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem var(--s-space); padding: .75rem 0; margin: 0; list-style: none; border-top: 1px solid var(--s-line); }
.inbox-item:first-child { border-top: 0; }
.inbox-text { flex: 1 1 20rem; min-width: 0; }
.inbox-text p { margin: 0; color: var(--s-ink-2); }
.inbox-item--unread .inbox-text p { font-weight: 600; color: var(--s-ink); }

/* Analyses (Phase 10, design §5, §6) */
.analysis-editor .CodeMirror { height: auto; min-height: 24rem; border: 1px solid var(--s-line); border-radius: var(--s-radius-control); font-size: 0.875rem; }
.analysis-editor textarea { font-family: ui-monospace, monospace; font-size: 0.875rem; }
.findings { margin-block: var(--s-space); }
.findings h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.findings--block { background: var(--s-bad-tint); border-color: var(--s-bad-line); }
.findings--warning { background: var(--s-warn-tint); border-color: var(--s-warn); }
.findings-list { margin-bottom: 0.75rem; }
.run-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.run-facts dt { color: var(--s-ink-2); font-weight: 500; }
.run-facts dd { margin: 0; overflow-wrap: anywhere; }
.run-actions { gap: 0.5rem; margin-block: var(--s-space); }
.analysis-report { margin-block: var(--s-space); overflow-x: auto; }
.analysis-report img { max-width: 100%; height: auto; }