/* Copyright 2026 Ryan Gomez & Co. Inc. — PHI AI — Apache-2.0 (see LICENSE); attribution notices must be retained (see NOTICE). */
/* ==========================================================================
   PHI AI platform — product interface stylesheet.

   Visual system from the v1 product design (PHI AI v1.dc.html):
   IBM Plex Sans / Serif / Mono, deep navy #002D72, signal orange #FF5910,
   a sidebar shell with grouped spec-referenced navigation, and gates that
   show their refusals rather than hiding them.

   Fonts are vendored under /static/fonts and served same-origin — the CSP
   is `default-src 'self'` with `script-src 'none'`, so no CDN, no script,
   no third-party origin is ever in the picture. IBM Plex Sans ships as a
   single variable-weight file; Mono and Serif as static weights.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/plex-sans-var-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/assets/fonts/plex-serif-300-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/assets/fonts/plex-serif-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #002D72;
  --orange: #FF5910;
  --ink: #16233d;
  --body: #2a3550;
  --slate: #46536b;
  --mute: #6a7690;
  --faint: #8a95a9;
  --ghost: #9aa6bb;
  --disabled: #b3bdcc;
  --line: #e2e8f2;
  --line-strong: #ccd6e6;
  --line-soft: #eef2f8;
  --wash: #f4f8fd;
  --wash-2: #ebf2fb;
  --wash-3: #dfeaf8;
  --pastel-1: #eaf2fb;   /* ice blue - section grounds */
  --pastel-2: #d8e7f7;   /* powder - hovers, accents */
  --pastel-3: #c3daf3;   /* sky - borders, active fills */
  --pastel-deep: #0a2d5e; /* hero deep blue */
  --warn-bg: #fff6f1;
  --warn-fg: #c2440d;
  --good: #1d7a4f;
  --good-bg: #eef7f1;
  --good-line: #cfe4d8;
  --amber: #c98a3a;
  --amber-bg: #fdf9f1;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --serif: "IBM Plex Serif", Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: linear-gradient(180deg, #f0f6fc 0%, #f6f9fd 340px);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--orange); }
::selection { background: rgba(0, 45, 114, .14); }
*:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
textarea, input, select, button { font-family: inherit; font-size: inherit; }

@keyframes phiPulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* ---- shell: sidebar + main column ------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
  background: #fff;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static !important; height: auto !important; }
}

.side {
  position: sticky; top: 0; height: 100vh; overflow: auto;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  background: var(--wash);
}
.side .brand { display: flex; flex-direction: column; gap: 3px; padding: 0 8px 18px; }
.side .brand img { display: block; height: 44px; width: auto; }
.side .brand .sub {
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
}

.side-label {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 7px;
}

/* Signed-in persona card, plus links to enter as the other personas. */
.side-user { padding: 0 8px 12px; }
.persona {
  display: block; width: 100%; text-align: left;
  font-size: 12px; padding: 7px 9px; margin-bottom: 3px;
  border-radius: 4px; border: 1px solid var(--line);
  background: #fff; color: var(--slate);
}
.persona.on { border-color: var(--navy); background: var(--wash-3); color: var(--navy); }
.persona .who-line { font-family: var(--mono); font-size: 11px; display: block; }
.persona .role-line { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }
a.persona:hover { border-color: var(--orange); color: var(--orange); }

.side-group { padding: 14px 8px 0; }
.side-group .items { display: flex; flex-direction: column; gap: 1px; }
.side-item {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 12.5px; padding: 7px 9px; border-radius: 4px;
  color: var(--slate);
}
.side-item:hover { background: var(--wash-3); color: var(--slate); }
.side-item .ref {
  font-family: var(--mono); font-size: 9.5px; color: var(--ghost);
  min-width: 26px; flex: none;
}
.side-item.on { background: var(--navy); color: #fff; font-weight: 500; }
.side-item.on .ref { color: rgba(255, 255, 255, .55); }
.side-item.on:hover { background: var(--navy); color: #fff; }

.side-note {
  margin-top: 22px; padding: 12px 8px 0; border-top: 1px solid var(--line);
  font-size: 10.5px; line-height: 1.6; color: var(--faint);
}

/* Disclosures: the calm-by-default pattern. Same affordance an EMR user
   knows from collapsible chart sections - closed is a label, open is
   the detail, and the state is theirs to set. */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸"; display: inline-block; margin-right: 6px;
  font-size: 9px; color: var(--ghost); transition: transform .12s ease;
}
details[open] > summary::before { transform: rotate(90deg); }

.side-fold { padding: 2px 0 0; }
.side-fold > summary {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding: 5px 9px;
}
.side-fold > summary:hover { color: var(--navy); }
.side-fold[open] { padding-bottom: 4px; }

.side-collapsible > summary.side-label { margin-bottom: 0; padding: 4px 0 7px; }
.side-collapsible > summary.side-label:hover { color: var(--navy); }

/* ---- embedded (SMART-launched inside an EMR) ---------------------------
   When this interface renders inside Epic or another EMR, the EMR is the
   shell: it owns the navigation, the patient banner and the footer, and
   a second chrome inside its frame is noise. Embedded mode keeps only
   the context strip and the working surface. */
body.embedded .side,
body.embedded .colophon,
body.embedded .askbar { display: none; }
body.embedded .layout { grid-template-columns: minmax(0, 1fr); }

/* ---- top bar ----------------------------------------------------------- */

.maincol { min-width: 0; display: flex; flex-direction: column; }
.maincol > main { flex: 1 1 auto; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 12px 30px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .screen-ref {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange);
}
.topbar .screen-title { font-size: 14px; font-weight: 500; color: var(--navy); margin-top: 2px; }
.topbar .spacer { flex: 1 1 auto; min-width: 8px; }
.topbar .bar-label {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.topbar .purpose-form { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topbar .purpose-form select {
  font-family: var(--mono); font-size: 11.5px; padding: 6px 9px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: #fff; color: var(--ink);
}
.topbar .purpose-form button {
  font-size: 10.5px; padding: 6px 10px; border: 1px solid var(--line-strong);
  border-radius: 4px; background: #fff; color: var(--navy); cursor: pointer;
}
.topbar .purpose-form button:hover { border-color: var(--orange); color: var(--orange); }
.topbar .context-chip {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding-left: 12px; border-left: 1px solid var(--line);
}
.topbar .context-chip .val { font-family: var(--mono); font-size: 11.5px; color: var(--navy); }

/* ---- main content spine ------------------------------------------------ */

main { padding: 30px; }
main.fullbleed { max-width: none; padding: 0; }

.kicker {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
h1 {
  margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 300;
  letter-spacing: -.02em; color: var(--navy);
}
h2 {
  margin: 34px 0 0; font-family: var(--serif); font-size: 23px;
  font-weight: 400; color: var(--navy);
}
h3 { margin: 22px 0 0; font-size: 14px; font-weight: 500; color: var(--navy); }
.lede {
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.65;
  color: var(--slate);
}
p { color: var(--body); }
.small, small { font-size: 12px; }
.quiet, .mute, .muted { color: var(--faint); }
.mono { font-family: var(--mono); font-size: .92em; }
.num { font-family: var(--mono); text-align: right; }
.nowrap { white-space: nowrap; }
.hr { height: 1px; background: var(--line); margin: 22px 0; border: 0; }
hr { height: 1px; background: var(--line); margin: 22px 0; border: 0; }

/* Invariant / capability chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chip {
  font-family: var(--mono); font-size: 10px; padding: 4px 8px;
  border: 1px solid var(--line-strong); border-radius: 3px; color: var(--navy);
}
.chip.filled { background: var(--wash-3); border-color: var(--wash-3); }
.chip.warn { background: var(--warn-bg); border-color: var(--warn-bg); color: var(--warn-fg); }
.chip.good { background: var(--good-bg); border-color: var(--good-bg); color: var(--good); }

.pill, .tag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  padding: 3px 7px; border-radius: 3px; background: var(--wash-3); color: var(--navy);
}
.tag-outline { background: transparent; border: 1px solid var(--line); color: var(--mute); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }

/* ---- cards & stats ----------------------------------------------------- */

.grid { display: grid; gap: 16px; margin-top: 20px; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.card { border: 1px solid var(--line); border-radius: 7px; padding: 18px; background: #fff; }
.card.stat .n { font-family: var(--mono); font-size: 23px; color: var(--navy); }
.card.stat .n.warn { color: var(--orange); }
.card.stat .n.good { color: var(--good); }
.card.stat .k { font-size: 12px; line-height: 1.55; color: var(--mute); margin-top: 6px; }
.card-kicker {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.card-title { font-size: 13px; font-weight: 500; color: var(--navy); }
.card-body { font-size: 12.5px; line-height: 1.65; color: var(--slate); margin-top: 8px; }

/* Left-ruled list items (design "isList" sections) */
.ruled { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ruled > div { padding-left: 14px; border-left: 2px solid #dde5f0; }
.ruled .t { font-size: 14px; font-weight: 500; color: var(--navy); }
.ruled .b { font-size: 13.5px; line-height: 1.7; color: var(--slate); margin-top: 5px; }

/* Callouts */
.callout {
  display: flex; gap: 12px; padding: 14px 16px; margin-top: 18px;
  border-left: 2px solid var(--navy); background: var(--wash-2);
  font-size: 13px; line-height: 1.7; color: var(--body);
}
.callout strong { color: var(--navy); }
.callout.warn { border-left-color: var(--orange); background: var(--warn-bg); }
.callout p { margin: 0; }

/* Status banners (existing templates) */
.status {
  padding: 14px 16px; margin-top: 18px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--wash-2);
  font-size: 13px; line-height: 1.65; color: var(--body);
}
.status.ok { border-color: var(--good-line); background: var(--good-bg); }
.status.ok strong { color: var(--good); }
.status.danger { border-color: #f3c1ad; background: var(--warn-bg); }
.status.danger strong { color: var(--warn-fg); }
.status.warn { border-color: #ecd9b8; background: var(--amber-bg); }
.status.warn strong { color: var(--amber); }

/* ---- tables ------------------------------------------------------------ */

.tablewrap {
  margin-top: 18px; border: 1px solid var(--line); border-radius: 7px;
  overflow-x: auto; background: #fff;
}
table { border-collapse: collapse; width: 100%; }
thead th {
  text-align: left; padding: 11px 18px;
  background: var(--wash-2); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}
tbody td {
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.6; color: var(--body);
  /* break-word, not anywhere: long tokens still wrap when a line truly
     cannot hold them, but a column is never squeezed below word width,
     so "complete" never renders as "comple / te". Wide tables scroll in
     .tablewrap instead. */
  vertical-align: baseline; overflow-wrap: break-word;
}
tbody tr:last-child td { border-bottom: 0; }
td .sub, td .hint { font-size: 11.5px; color: var(--mute); margin-top: 3px; }
td.empty, .empty { color: var(--faint); font-size: 13px; }

/* Verdict-colored mono cells; a verdict word never wraps */
.v-good { font-family: var(--mono); font-size: 11px; color: var(--good); white-space: nowrap; }
.v-warn { font-family: var(--mono); font-size: 11px; color: var(--warn-fg); white-space: nowrap; }
.v-amber { font-family: var(--mono); font-size: 11px; color: var(--amber); white-space: nowrap; }
.v-mute { font-family: var(--mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
.v-navy { font-family: var(--mono); font-size: 11px; color: var(--navy); white-space: nowrap; }

/* ---- forms & buttons --------------------------------------------------- */

.field { margin-top: 14px; }
.field label { display: block; font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
input[type=text], input[type=password], input[type=date], input[type=email], select, textarea {
  width: 100%; max-width: 520px; padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: 5px;
  background: #fff; color: var(--ink); font-size: 13px;
}
textarea { max-width: none; resize: vertical; line-height: 1.6; }
select { width: auto; }
button, .btn {
  font-size: 12.5px; font-weight: 500; padding: 8px 16px;
  border: 1px solid var(--navy); border-radius: 5px;
  background: var(--navy); color: #fff; cursor: pointer;
}
button:hover, .btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
button.bare, .btn.bare {
  background: #fff; color: var(--navy); border: 1px solid var(--line-strong);
}
button.bare:hover, .btn.bare:hover { color: var(--orange); border-color: var(--orange); background: #fff; }
button.ghost { background: transparent; border: none; color: var(--mute); padding: 4px 8px; }
button[disabled], .btn[disabled] {
  background: #fff; color: var(--disabled); border-color: var(--line-soft); cursor: default;
}

/* Ask/compose panel (assistant, cohort) */
.composer { margin-top: 20px; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
.composer textarea {
  display: block; width: 100%; max-width: none; border: none; border-radius: 0;
  padding: 15px 17px; font-size: 14px; line-height: 1.6; color: var(--ink); outline: none;
}
.composer .foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 11px 13px 11px 17px; border-top: 1px solid var(--line-soft); background: var(--wash);
}
.composer .foot .meta { font-family: var(--mono); font-size: 10.5px; color: var(--ghost); }

/* Starter question chips */
.starters { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.starters button, .starters .starter {
  font-size: 12px; padding: 7px 12px; border: 1px solid var(--line-strong);
  border-radius: 18px; background: #fff; color: var(--navy); cursor: pointer; font-weight: 400;
}
.starters button:hover, .starters .starter:hover { border-color: var(--orange); color: var(--orange); background: #fff; }

/* Segmented control (modality, cloud tabs) */
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--wash-3); border-radius: 5px; }
.seg a, .seg button {
  font-size: 11.5px; padding: 7px 12px; border: none; border-radius: 3px;
  background: transparent; color: var(--mute); cursor: pointer; font-weight: 400;
}
.seg .on { background: var(--navy); color: #fff; }
.seg a:hover { color: var(--navy); }
.seg .on:hover { background: var(--navy); color: #fff; }
.seg.mono a, .seg.mono button { font-family: var(--mono); }

/* ---- population-health charts ------------------------------------------ */
.ph-chart { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  margin: 12px 0; padding: 6px 4px; overflow: hidden; }
.ph-chart svg { display: block; width: 100%; height: auto;
  max-width: 880px; margin: 0 auto; }
.ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .ph-row { grid-template-columns: 1fr; } }

/* ---- pagination --------------------------------------------------------
   Distinct from .seg (a segmented control): a pager is two actions and a
   position, not a set of choices, so it does not paint the position like
   a selected button. */
.pager { display: inline-flex; align-items: center; gap: 8px; }
.pager a, .pager span.pg-btn {
  font-size: 12px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  font-weight: 500; white-space: nowrap; }
.pager a:hover { border-color: var(--orange); color: var(--orange); }
.pager span.pg-btn { color: var(--faint); background: var(--wash);
  cursor: default; }
.pg-at { font-size: 12px; color: var(--mute); padding: 0 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-at b { color: var(--navy); font-weight: 600; }
@media (max-width: 700px) { .pager a, .pager span.pg-btn { padding: 8px 11px; } }

/* ---- verdict panel (consent gate) -------------------------------------- */

.verdict {
  margin-top: 22px; padding: 22px; border-radius: 8px;
  border: 1px solid var(--orange); background: var(--warn-bg);
}
.verdict.allow { border-color: var(--good); background: #f7fbf8; }
.verdict .verdict-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange);
}
.verdict.allow .verdict-label { color: var(--good); }
.verdict .verdict-headline {
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  color: var(--navy); margin-top: 8px;
}
.verdict p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--body); }
.verdict .cite { font-family: var(--mono); font-size: 11px; color: var(--mute); margin-top: 12px; overflow-wrap: anywhere; }
.verdict .audit-line { font-family: var(--mono); font-size: 10.5px; color: var(--ghost); margin-top: 10px; }

/* ---- assistant answers -------------------------------------------------- */

.askbar {
  padding: 12px 30px; border-bottom: 1px solid var(--line); background: var(--wash);
}
.askbar form { display: flex; gap: 8px; }
.askbar input[type=text] { flex: 1 1 auto; max-width: none; }
.askbar-note { font-size: 11px; color: var(--faint); margin: 8px 0 0; }

.thread-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.thread-list a { display: block; }
.thread-q { font-size: 12px; font-weight: 500; color: var(--navy); overflow-wrap: anywhere; }
.asked { font-size: 14.5px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.thread-when { font-family: var(--mono); font-size: 10.5px; color: var(--ghost); }

.gates { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gates .chip { border: none; background: var(--wash-3); }
.gates .chip.refused { background: var(--warn-bg); color: var(--warn-fg); }

.answer {
  margin-top: 16px; padding-left: 15px; border-left: 2px solid var(--navy);
}
.answer.refused { border-left-color: var(--orange); }
.answer.abstained { border-left-color: var(--amber); }
.answer .answer-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy);
}
.answer.refused .answer-label { color: var(--orange); }
.answer.abstained .answer-label { color: var(--amber); }
.answer .claim { margin-top: 13px; font-size: 14px; line-height: 1.7; color: var(--body); }
.answer .cites { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.answer .cites .cite, .cites .cite {
  font-family: var(--mono); font-size: 10px; padding: 3px 7px;
  border: 1px solid var(--line); border-radius: 3px; color: var(--mute);
}
.answer .note {
  font-size: 12.5px; line-height: 1.65; color: var(--mute); margin-top: 14px;
  padding: 11px 13px; background: var(--wash-2); border-radius: 5px;
}
.answer .audit-line, .audit-line {
  font-family: var(--mono); font-size: 10.5px; color: var(--ghost);
  margin-top: 14px; overflow-wrap: anywhere;
}

.turn { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.said { font-size: 14px; line-height: 1.7; color: var(--body); }
.who-said { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }

.thinking {
  display: flex; align-items: center; gap: 11px; margin-top: 22px;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: 7px;
}
.thinking .phi { font-family: var(--mono); font-size: 12px; color: var(--orange);
  animation: phiPulse 1.1s ease-in-out infinite; }
.thinking .label { font-size: 13px; color: var(--slate); }

.empty-state {
  margin-top: 28px; padding: 26px; border: 1px dashed #dde5f0; border-radius: 7px;
  font-size: 13px; line-height: 1.7; color: var(--faint);
}

/* Two-column section with sticky right rail (assistant spine) */
.with-rail { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(240px, 320px); gap: 0; align-items: start; }
@media (max-width: 1100px) { .with-rail { grid-template-columns: minmax(0, 1fr); } .rail { position: static !important; border-left: none !important; border-top: 1px solid var(--line); } }
.with-rail > .rail-main { padding: 30px; min-width: 0; }
.rail { position: sticky; top: 63px; padding: 30px 24px; border-left: 1px solid var(--line); }
.rail-step { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; margin-top: 9px; }
.rail-step .n { font-family: var(--mono); font-size: 10px; color: var(--orange); }
.rail-step .t { font-size: 12.5px; font-weight: 500; color: var(--navy); }
.rail-step .b { font-size: 11.5px; line-height: 1.55; color: var(--mute); margin-top: 3px; }
.withheld { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.withheld .w {
  font-family: var(--mono); font-size: 10px; padding: 3px 7px; border-radius: 3px;
  background: var(--warn-bg); color: var(--warn-fg);
}

/* ---- key/value, bars, misc from existing templates ---------------------- */

.keyvalue { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin-top: 14px; font-size: 13px; }
.keyvalue dt { color: var(--faint); }
.keyvalue dd { margin: 0; color: var(--body); overflow-wrap: anywhere; }

.bar { height: 6px; border-radius: 3px; background: var(--wash-3); overflow: hidden; margin-top: 6px; }
.bar-fill { height: 100%; background: var(--navy); }

.disclaimer, .phi-notice {
  font-size: 12px; line-height: 1.7; color: var(--faint); margin-top: 18px;
}
details.fine { margin-top: 18px; }
details.fine > summary {
  font-size: 11.5px; color: var(--mute);
}
details.fine > summary:hover { color: var(--navy); }
details.fine .disclaimer { margin-top: 8px; }
.phi-notice { padding: 11px 13px; background: var(--wash-2); border-radius: 5px; }

pre, code { font-family: var(--mono); font-size: 11.5px; }
pre {
  margin: 0; padding: 18px; line-height: 1.8; color: var(--body);
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: #fff;
}
/* The mapping chain in the setup guide: a diagram, not prose — it must keep
   its column alignment, so it scrolls sideways rather than wrapping. */
.doc-chain {
  margin: 16px 0 18px; padding: 15px 18px; border-radius: 9px;
  background: #fff7f1; border: 1px solid #ffd6ba;
  border-left: 4px solid var(--orange);
  white-space: pre; overflow-x: auto; line-height: 1.75;
  font-size: 11px; color: var(--body);
}

.codeblock { margin-top: 22px; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.codeblock .head {
  padding: 12px 18px; background: var(--wash-2); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute);
}

.source-card { border: 1px solid var(--line); border-radius: 7px; padding: 14px 16px; margin-top: 10px; }

/* ---- footer colophon --------------------------------------------------- */

.colophon { border-top: 1px solid var(--line); background: var(--wash); margin-top: 40px; }
.colophon .cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px 30px; padding: 22px 30px;
}
.colophon .col-label {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.colophon .col-label.hot { color: var(--orange); }
.colophon .col-body { font-size: 12px; line-height: 1.6; color: var(--slate); margin-top: 6px; }
.colophon .col-body.mono { font-family: var(--mono); font-size: 11.5px; }
.colophon .who-name { font-family: var(--mono); font-size: 12.5px; color: var(--navy); margin-top: 6px; }
.colophon .who-detail { font-size: 12px; line-height: 1.6; color: var(--mute); margin-top: 4px; }
.colophon .legal {
  padding: 12px 30px;
  font-size: 11.5px; line-height: 1.6; color: var(--faint);
}
.colophon-fold > summary.legal:hover { color: var(--slate); }
.colophon-fold .fold-more { color: var(--navy); }
.colophon-fold[open] .cols { border-top: 1px solid var(--line-soft); }

/* ---- sign-in pages ------------------------------------------------------ */

.signin {
  max-width: 400px; margin: 9vh auto 0; padding: 30px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.signin h1 { font-size: 26px; }
.signin .field input { max-width: none; width: 100%; }
.signin button { width: 100%; margin-top: 18px; }
.login-shell { min-height: 100vh; background: var(--wash); padding: 1px 16px; }
.login-brand { display: block; margin: 8vh auto 0; text-align: center; }
.login-brand img { height: 40px; width: auto; }

/* ---- assistant workspace: rail | thread | rail -------------------------- */

.workspace {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 280px;
  gap: 0; align-items: start;
}
@media (max-width: 1150px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .rail-left, .rail-right { position: static !important; border: none !important;
    border-top: 1px solid var(--line) !important; height: auto !important; }
}
.rail-left {
  position: sticky; top: 63px; max-height: calc(100vh - 63px); overflow: auto;
  padding: 30px 18px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 22px;
}
.rail-left .rail-item {
  display: block; width: 100%; text-align: left; font-size: 12.5px;
  padding: 7px 9px; border: none; border-radius: 4px; background: transparent;
  color: var(--slate); cursor: pointer; font-weight: 400;
}
.rail-left .rail-item:hover { background: var(--wash-3); color: var(--slate); }
.rail-left .rail-item.on { background: var(--navy); color: #fff; font-weight: 500; }
.rail-right {
  position: sticky; top: 63px; max-height: calc(100vh - 63px); overflow: auto;
  padding: 30px 24px; border-left: 1px solid var(--line);
}
.thread { padding: 30px; min-width: 0; }
.thread .ask { margin-top: 6px; }
.thread .ask textarea { max-width: none; }
.scope { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px;
  font-size: 11.5px; margin: 12px 0 0; }
.scope dt { color: var(--faint); }
.scope dd { margin: 0; color: var(--slate); }

/* Prompt history / saved prompts rail */
.prompt-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.prompt-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.prompt-row form:first-child { flex: 1 1 auto; min-width: 0; }
.prompt-run {
  display: block; width: 100%; text-align: left; font-size: 11.5px;
  padding: 6px 8px; border: none; border-radius: 4px; background: transparent;
  color: var(--slate); cursor: pointer; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prompt-run:hover { background: var(--wash-3); color: var(--navy); }
.prompt-act {
  flex: none; font-size: 12px; line-height: 1; padding: 5px 6px;
  border: none; border-radius: 4px; background: transparent;
  color: var(--ghost); cursor: pointer; font-weight: 400;
}
.prompt-act:hover { background: var(--wash-3); color: var(--orange); }


/* Buttons never wrap mid-label: an action button is a word or two, and a
   wrapped one reads as broken. Labels long enough to wrap opt in with
   .btn-long, which wraps deliberately with room to breathe. */
button, .btn { white-space: nowrap; line-height: 1.35; }
.btn-long, a.btn-long, button.btn-long {
  white-space: normal; text-align: left; line-height: 1.45;
  display: block; max-width: 100%;
}
button.persona, .persona { white-space: normal; }
.starters button, .starters .starter { white-space: normal; line-height: 1.35; }
td form { display: inline-block; }

/* ---- legacy aliases kept so existing templates render ------------------- */

.masthead { display: none; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.scope { font-size: 12px; color: var(--faint); }
.hint { font-size: 12px; color: var(--faint); }
.back-to-emr { font-size: 12px; }
.intact { color: var(--good); }
.transcript { margin-top: 20px; }
.ask-row { display: flex; gap: 8px; }
.ask-actions { margin-top: 10px; }
.rail-head { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.rail-item { font-size: 12.5px; margin-top: 8px; }
.rail-foot { font-size: 11px; color: var(--faint); margin-top: 12px; }

/* ---- header documentation menu ---------------------------------------- */
.docs-menu { position: relative; }
.docs-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--navy); padding: 7px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--wash); white-space: nowrap;
}
.docs-menu > summary::-webkit-details-marker { display: none; }
.docs-menu > summary::after { content: " ▾"; color: var(--mute); }
.docs-menu[open] > summary { background: var(--wash-3); }
.docs-drop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 264px; padding: 6px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(0,45,114,.12);
}
.docs-drop a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: 12.5px; color: var(--slate); text-decoration: none;
}
.docs-drop a:hover { background: var(--wash-3); color: var(--navy); }

/* ---- model management panels ------------------------------------------ */
.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px; margin-top: 14px; }
.model-panel { border: 1px solid var(--line); border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; overflow: hidden; }
.model-panel .mp-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.model-panel .mp-name { font-family: var(--serif); font-size: 17px; color: var(--navy); }
.model-panel .mp-kind { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); }
.model-panel .mp-state { margin-left: auto; }
.model-panel .mp-body { padding: 12px 16px; flex: 1; }
.model-panel .mp-facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px;
  font-size: 12px; }
.model-panel .mp-facts dt { color: var(--mute); white-space: nowrap; }
.model-panel .mp-facts dd { margin: 0; color: var(--body); overflow-wrap: break-word; }
.model-panel .mp-foot { padding: 12px 16px; border-top: 1px solid var(--line-soft);
  background: var(--wash-2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.model-panel .mp-note { font-size: 11.5px; color: var(--mute); }

/* ---- documentation pages ---------------------------------------------- */
.doc-prose h2 { margin-top: 34px; }
.doc-prose h3 { font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  color: var(--navy); margin: 22px 0 6px; }
.doc-prose p, .doc-prose li { font-size: 13.5px; line-height: 1.75; color: var(--body); }
.doc-prose ul, .doc-prose ol { padding-left: 22px; }
.doc-prose code { font-family: var(--mono); font-size: 12px; background: var(--wash-3);
  padding: 1px 5px; border-radius: 4px; }
.diagram-frame { border: 1px solid var(--line); border-radius: 10px; background: #fff;
  margin: 18px 0 8px; overflow: hidden; }
.diagram-frame svg { display: block; width: 100%; height: auto; }
.diagram-title { padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); }
.diagram-caption { font-size: 12px; color: var(--mute); line-height: 1.65;
  margin: 6px 0 22px; }
.doc-toc { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.doc-toc a { font-family: var(--mono); font-size: 11px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--slate);
  text-decoration: none; white-space: nowrap; }
.doc-toc a.on { border-color: var(--navy); color: var(--navy); background: var(--wash-3); }
.doc-toc a:hover { border-color: var(--navy); }

/* ---- header hover menu: the sections your role can reach --------------- */
.nav-menu { position: relative; }
.nav-menu-label {
  display: inline-block; cursor: default;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--navy); padding: 7px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--wash); white-space: nowrap;
}
.nav-menu-label::after { content: " ▾"; color: var(--mute); }
.nav-menu:hover .nav-menu-label,
.nav-menu:focus-within .nav-menu-label { background: var(--wash-3); }
.nav-menu-drop {
  display: none; position: absolute; right: 0; top: 100%; z-index: 60;
  min-width: 250px; max-height: 70vh; overflow-y: auto;
  padding: 6px 6px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; box-shadow: 0 10px 28px rgba(0,45,114,.12);
}
/* Hover-open, with keyboard access via focus-within; no gap between the
   label and the panel so the pointer never falls through. */
.nav-menu:hover .nav-menu-drop,
.nav-menu:focus-within .nav-menu-drop { display: block; }
.nav-menu-group {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  padding: 9px 12px 3px;
}
.nav-menu-drop a {
  display: block; padding: 6px 12px; border-radius: 6px;
  font-size: 12.5px; color: var(--slate); text-decoration: none;
}
.nav-menu-drop a:hover { background: var(--wash-3); color: var(--navy); }

/* ---- repo button & footer credit --------------------------------------- */
.repo-btn {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .05em; color: #fff; background: var(--navy);
  padding: 7px 14px; border-radius: 6px; text-decoration: none;
  white-space: nowrap; border: 1px solid var(--navy);
}
.repo-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.footer-credit {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px; color: var(--mute);
}
.footer-credit a { color: var(--navy); }
.footer-credit a:hover { color: var(--orange); }

/* ---- assistant role-scope notice --------------------------------------- */
.scope-notice {
  margin-top: 14px; border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: 8px; background: var(--wash); padding: 12px 16px;
}
.scope-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy); margin-bottom: 5px;
}
.scope-body { font-size: 12.5px; line-height: 1.65; color: var(--body); }
.scope-cannot { color: var(--warn-fg); }

/* ---- AI-core feature banner -------------------------------------------- */
.model-banner {
  display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px;
  font-size: 12px; color: var(--slate); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; background: var(--wash);
}
.model-banner .mb-dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--good); animation: phiPulse 2.4s ease-in-out infinite; }
.risk-pill { font-family: var(--mono); font-size: 11px; padding: 2px 9px;
  border-radius: 999px; white-space: nowrap; }
.risk-high { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid #f3c1ad; }
.risk-med  { background: var(--amber-bg); color: var(--amber); border: 1px solid #ead9b8; }
.risk-low  { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line); }

/* ---- Inter, vendored locally (design handoff, constraint 2) ------------ */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────────
   φ(ai) interface kit — append to www-demo/public/assets/app.css
   ─────────────────────────────────────────────────────────────
   Fonts: Inter 400/500/600 + 400 italic, IBM Plex Mono 400/500.
   Vendor them locally as latin + latin-ext woff2 subsets and keep
   the CSP at default-src 'self' — do NOT add a Google Fonts link.
   See design_handoff_phi_ai_assistant/README.md, constraint 2.

   No JavaScript. No new markup, with one optional exception:
   the refusal treatment needs the "refused" class on .answer
   (README, "The one optional markup change").
   ───────────────────────────────────────────────────────────── */

/* ── φ(ai) interface kit ──────────────────────────────
   Every selector below already exists in app.css or is a
   variant it already defines (.answer.refused, .chip.refused,
   .card.stat .n.warn). Nothing new is asked of the views.
   ───────────────────────────────────────────────────── */
:root {
  /* One family for everything but references — matches Crossfoot */
  --sans:          "Inter", system-ui, -apple-system, sans-serif;
  --serif:         "Inter", system-ui, sans-serif;  /* display = tracked sans */
  --accent:        var(--orange);   /* the ask, and nothing else */
  --chrome:        var(--wash-2);
  --rail-w:        300px;
  --sidebar-w:     248px;
  --thread-indent: 52px;
}

h1, h2, h3   { font-family: var(--sans); font-weight: 600;
               letter-spacing: -.025em; }
h1           { font-size: 31px; }
.lede        { font-size: 14.5px; line-height: 1.65; }
.model-panel .mp-name { font-family: var(--sans); font-weight: 600;
               font-size: 16px; letter-spacing: -.02em; }
.doc-prose h3 { font-family: var(--sans); }

/* Sidebar — the active item becomes a 2px orange mark on white
   instead of the current solid navy fill */
.side .brand img { height: 44px; }          /* the vector mark, not type */
.side-item     { padding: 7px 18px; font-size: 13px; color: var(--slate);
                 border-left: 2px solid transparent; border-radius: 0; }
.side-item:hover      { background: var(--wash-3); color: var(--ink); }
.side-item.on         { background: #fff; color: var(--navy); font-weight: 500;
                        border-left-color: var(--orange); }
.side-item.on:hover   { background: #fff; color: var(--navy); }
.side-item.on .ref    { color: var(--ghost); }
.side-label    { padding: 0 18px 8px; color: var(--ghost); }
.side-group    { padding: 16px 0 0; }

/* Topbar — the screen title lifts into the serif */
.topbar        { gap: 18px; padding: 14px 26px; }
.topbar .screen-title { font-weight: 600; font-size: 19px;
                        letter-spacing: -.02em; }
.topbar .purpose-form button:hover { border-color: var(--orange);
                        color: var(--orange); }

/* Composer — the one filled control in the product */
.composer      { box-shadow: 0 1px 2px rgb(0 45 114 / .05); }
.composer textarea { padding: 15px 17px 12px; font-size: 14.5px;
                     line-height: 1.6; color: var(--ink); }
.composer textarea::placeholder { color: var(--ghost); }
.composer .foot { gap: 14px; padding: 11px 17px; background: var(--wash-2);
                  border-top: 1px solid var(--line-soft); }
.composer .foot button { background: var(--orange); color: #fff; border: 0;
                  border-radius: 6px; padding: 8px 20px;
                  font: 500 13px/1 var(--sans); cursor: pointer; }
.composer .foot button:hover  { background: #e04d0c; }
.composer .foot button:active { background: #c2440d; }
.composer .foot .meta { font-family: var(--sans); font-size: 11.5px;
                        color: var(--mute); }
.starters button:hover, .starters .starter:hover { border-color: var(--orange);
                        color: var(--orange); }

/* Thread — question in the serif, answer against a navy rule */
.thread-list   { gap: 0; }
.thread-list > * + * { margin-top: 28px; }
.asked         { font-weight: 500; font-size: 19px; line-height: 1.45;
                 letter-spacing: -.015em; }
.gates         { margin: 13px 0 0 var(--thread-indent); }
.gates .chip   { font-family: var(--mono); font-size: 10.5px;
                 border-radius: 4px; padding: 3px 8px; color: var(--navy); }
.gates .chip.refused { color: var(--warn-fg); }
.answer        { margin-left: var(--thread-indent);
                 border-left: 2px solid var(--navy); padding-left: 18px; }
.answer.refused  { border-left-color: var(--orange); }
.answer.abstained{ border-left-color: var(--amber); }
.answer .answer-label { font-family: var(--mono); font-size: 9.5px;
                 letter-spacing: .1em; text-transform: uppercase;
                 color: var(--orange); }
.answer .claim { margin-top: 9px; font-size: 14.5px; line-height: 1.7; }
.answer .claim sup { font-family: var(--mono); font-size: 10px;
                 color: var(--orange); padding-left: 2px; }
.answer .cites { margin-top: 10px; }
.answer .cites .cite { background: var(--wash-2); border: 1px solid var(--line);
                 border-radius: 4px; padding: 3px 8px; color: var(--navy); }
.answer .audit-line { margin-top: 10px; color: var(--ghost); }

/* Chips — rounded = a property, square mono = a tool that ran */
.chips         { gap: 7px; }
.chip          { border-radius: 20px; padding: 4px 11px; background: var(--wash);
                 border: 1px solid var(--line); color: var(--slate); }
.chip.filled   { font-family: var(--mono); font-size: 10.5px; color: var(--navy);
                 border-radius: 4px; padding: 3px 8px; }

/* Rail */
.with-rail     { grid-template-columns: minmax(380px, 1fr) var(--rail-w); }
.with-rail > .rail-main { padding: 28px 26px 34px; }
.rail          { background: var(--wash); padding: 28px 20px; }
.rail-head     { font-family: var(--mono); }
.prompt-list   { gap: 0; margin-top: 11px; }
.prompt-row    { align-items: flex-start; gap: 8px; padding: 2px 0;
                 border-bottom: 1px solid var(--line-soft); }
.prompt-run    { font-size: 12.5px; line-height: 1.45; padding: 7px 6px; }
.prompt-act    { color: var(--disabled); }
.prompt-act:hover { background: transparent; color: var(--orange); }
.rail-foot     { font-size: 11.5px; line-height: 1.5; }

/* Figures and states — the demo's own shapes, joined into one band */
.grid.stats    { gap: 0; border: 1px solid var(--line); border-radius: 7px;
                 overflow: hidden; }
.grid.stats .card.stat { border: 0; border-right: 1px solid var(--line);
                 border-radius: 0; }
.grid.stats .card.stat:last-child { border-right: 0; }
.card.stat .n  { font-variant-numeric: tabular-nums; }
.num           { font-variant-numeric: tabular-nums; }
.tag-outline   { text-transform: uppercase; letter-spacing: .04em; }
.status        { border-left-width: 2px; border-radius: 0 5px 5px 0; }
.status.danger { border-left-color: var(--orange); }
.empty-state   { border: 1px dashed var(--line-strong); border-radius: 6px; }
.phi-notice    { border-left: 2px solid var(--orange); background: var(--warn-bg);
                 color: var(--warn-fg); border-radius: 0 5px 5px 0; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
::selection    { background: color-mix(in oklch, var(--navy) 18%, transparent); }

@media (max-width: 1100px) {
  .with-rail   { grid-template-columns: 1fr; }
  .rail        { position: static; border-left: 0;
                 border-top: 1px solid var(--line); }
  .answer, .gates { margin-left: 0; }
}

/* ---- persona switch buttons: readable hover ---------------------------
   The generic button:hover fills orange with white text, but the card's
   .role-line keeps its faint color - illegible on orange (and a persona
   card is a card, not a call to action). Hover stays a quiet card. */
button.persona:hover {
  background: var(--wash-3);
  border-color: var(--orange);
  color: var(--navy);
}
button.persona:hover .who-line { color: var(--navy); }
button.persona:hover .role-line { color: var(--slate); }

/* ─────────────────────────────────────────────────────────────
   Horizontal shell: one header row — logo left, horizontal nav
   with hover/touch dropdowns, persona + docs + repo at right.
   Below 1020px the group bar collapses into one Menu dropdown;
   everything holds a single row down to phone widths.
   ───────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px; background: rgba(243,248,253,.96);
  backdrop-filter: saturate(1.2) blur(6px);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.site-head .brand { display: flex; align-items: center; flex: none; }
.site-head .brand img { display: block; height: 40px; width: auto; }
.site-head .spacer { flex: 1 1 auto; }

.top-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.top-nav .nav-menu-label {
  border: 0; background: transparent; border-radius: 6px;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0;
  color: var(--slate); padding: 8px 11px; cursor: default;
}
.top-nav .nav-menu-label.on { color: var(--navy); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--orange); border-radius: 6px 6px 0 0; }
.top-nav .nav-menu:hover .nav-menu-label,
.top-nav .nav-menu:focus-within .nav-menu-label { background: var(--wash-3); color: var(--ink); }
.top-nav .nav-menu-drop { left: 0; right: auto; }
.nav-menu-drop a.on { color: var(--navy); font-weight: 600;
  border-left: 2px solid var(--orange); border-radius: 0 6px 6px 0; }
.nav-menu-drop .persona { margin: 4px 6px; width: auto; }
.drop-right { left: auto; right: 0; }
.persona-menu .persona-short, .docs-menu .docs-short { display: none; }

/* The one-menu fallback: hidden while the bar fits */
.all-menu { display: none; }
@media (max-width: 1019px) {
  .top-nav { display: none; }
  .all-menu { display: block; }
  .all-menu .nav-menu-drop { left: 0; right: auto; max-height: 75vh; }
}
@media (max-width: 700px) {
  .site-head { padding: 8px 12px; gap: 6px; }
  .site-head .brand img { height: 32px; }
  .persona-menu .persona-name, .docs-menu .docs-full { display: none; }
  .persona-menu .persona-short, .docs-menu .docs-short { display: inline; }
  .site-head .repo-btn { display: none; }
  .footer-credit { font-size: 11px; }
}

/* Page container replacing the old sidebar grid */
.page { margin: 0 auto; }
.page > main { padding: 4px 26px 40px; }
@media (max-width: 700px) { .page > main { padding: 4px 14px 34px; } }
.colophon { border-top: 1px solid var(--line); background: var(--wash);
  padding: 14px 22px 46px; }
/* Rail sticks below the new header */
.rail { top: 61px; }
/* Made by Ryan Gomez & Co. Inc. */

/* ---- design review fixes ----------------------------------------------- */
/* Footer repo button: .footer-credit a overrode .repo-btn's white text
   (navy on navy - invisible). Restate with the specificity it needs. */
.footer-credit a.repo-btn { color: #fff; }
.footer-credit a.repo-btn:hover { color: #fff; }

/* Stat figures clipped at mid viewport widths ($14,404,031.85 needs more
   than a 170px card). Size the figure to its own card. */
.card.stat { container-type: inline-size; }
.card.stat .n { font-size: clamp(14px, 11cqw, 23px); }

/* Prompt bookmark star sat at 1.9:1 contrast - effectively invisible. */
.prompt-act { color: var(--mute); }

/* ---- merged documentation parts ---------------------------------------- */
.doc-part { margin-top: 70px; border-top: 3px solid var(--navy); padding-top: 26px; }
.doc-part h1 { font-size: 25px; }

/* ---- documentation assistant column ------------------------------------ */
.docs-cols { display: grid; grid-template-columns: minmax(300px, 1fr) 2fr;
  gap: 30px; align-items: start; }
.docs-main { min-width: 0; }
.docs-assist { position: sticky; top: 76px; display: flex;
  flex-direction: column; gap: 12px; max-height: calc(100vh - 100px);
  border: 1px solid var(--line); border-radius: 10px; background: var(--wash);
  padding: 16px 16px 14px;
  /* Nothing in this panel may ever paint outside it - a clipped panel is
     a bug you can scroll, an overflowing one covers the page. */
  overflow: hidden; }
.da-head { font-weight: 600; font-size: 15px; color: var(--navy);
  letter-spacing: -.01em; }
.da-sub { font-size: 11.5px; line-height: 1.55; color: var(--body);
  background: #ffeede; border: 1px solid #ffd6ba;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 4px; }
.da-sub a { color: var(--orange); font-weight: 600; }
.da-sub a:hover { text-decoration: underline; }
/* The thread caps ITSELF rather than inheriting a height through the
   flex chain: <details> wraps everything after <summary> in an anonymous
   box, so `flex: 1 1 auto` here never reaches the panel's max-height and
   the thread grew to the full answer instead of scrolling. A direct
   max-height needs no cooperation from any ancestor. */
.da-thread { flex: 1 1 auto; overflow-y: auto; display: flex;
  flex-direction: column; gap: 10px; padding-right: 2px;
  min-height: 140px; max-height: calc(100vh - 430px); }
.da-empty { font-size: 12px; line-height: 1.6; color: var(--faint);
  border: 1px dashed var(--line-strong); border-radius: 6px; padding: 12px; }
.da-q { font-weight: 500; font-size: 13px; color: var(--navy); }
.da-a { font-size: 12.5px; line-height: 1.6; color: var(--body);
  border-left: 2px solid var(--navy); padding-left: 10px;
  white-space: pre-wrap; overflow-wrap: break-word; }
.da-src { font-family: var(--mono); font-size: 9.5px; color: var(--orange);
  margin-top: 5px; }
.da-form { display: flex; flex-direction: column; gap: 8px; }
.da-form textarea { width: 100%; max-width: none; min-height: 104px;
  font-size: 13px; line-height: 1.5; resize: vertical; }
.da-actions { display: flex; gap: 8px; align-items: center; }
.da-form button.ask { background: var(--orange); color: #fff; border: 0;
  border-radius: 6px; padding: 8px 20px; font: 500 13px/1 var(--sans);
  cursor: pointer; }
.da-form button.ask:hover { background: #e04d0c; }
.da-clear { background: transparent; border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 12px; font: 500 11.5px/1 var(--sans);
  color: var(--mute); cursor: pointer; }
.da-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.da-examples button { font-size: 11px; padding: 4px 10px; border-radius: 14px;
  border: 1px solid var(--line); background: #fff; color: var(--slate);
  cursor: pointer; }
.da-examples button:hover { border-color: var(--orange); color: var(--orange); }
@media (max-width: 1019px) {
  .docs-cols { grid-template-columns: 1fr; }
  /* Stacked above the docs, the panel is in normal flow and can be as
     tall as its content - only the thread is capped, so a long answer
     scrolls in place instead of being clipped out of reach. */
  .docs-assist { position: static; max-height: none; }
  .da-thread { max-height: 260px; }
}

/* ---- homepage ---------------------------------------------------------- */
.home { display: flex; flex-direction: column; gap: 64px; padding-top: 26px; }
.home-hero { text-align: center; max-width: 880px; margin: 0 auto; padding: 30px 0 6px; }
.hh-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--orange); }
.hh-title { margin: 18px 0 0; font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.12; letter-spacing: -.03em; color: var(--navy); }
.hh-lede { margin: 22px auto 0; font-size: 16.5px; line-height: 1.7;
  color: var(--slate); }
.hh-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px; }
.hh-cta { display: inline-block; padding: 11px 24px; border-radius: 7px;
  font: 500 14px/1 var(--sans); text-decoration: none;
  border: 1px solid var(--line-strong); color: var(--navy); background: #fff; }
.hh-cta:hover { border-color: var(--orange); color: var(--orange); }
.hh-cta.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.hh-cta.primary:hover { background: #e04d0c; color: #fff; }
.hh-note { margin-top: 20px; font-family: var(--mono); font-size: 11px;
  color: var(--mute); }
.hb-title { font-size: 26px; letter-spacing: -.025em; color: var(--navy);
  text-align: center; margin: 0; }
.hb-sub { max-width: 660px; margin: 12px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.65; color: var(--slate); }
.home-band { background: var(--wash); border: 1px solid var(--line);
  border-radius: 12px; padding: 40px 34px; }
.home-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px; margin-top: 30px; }
.pillar .p-head { font-weight: 600; font-size: 15px; color: var(--navy);
  border-top: 2px solid var(--orange); padding-top: 12px; }
.pillar p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--body); }
.feature-grid { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; margin-top: 28px; }
.feature { display: block; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; padding: 18px; text-decoration: none;
  flex: 1 1 250px; max-width: 350px; min-width: 250px; }
.feature:hover { border-color: var(--orange); }
.feature .f-name { font-weight: 600; font-size: 14px; color: var(--navy); }
.feature:hover .f-name { color: var(--orange); }
.feature p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--body); }
.home-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.principle { padding: 26px 24px; border-right: 1px solid var(--line); background: #fff; }
.principle:last-child { border-right: 0; }
.pr-word { font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange); }
.principle p { margin: 10px 0 0; font-size: 13px; line-height: 1.65; color: var(--body); }
.home-close { text-align: center; padding-bottom: 12px; }
@media (max-width: 700px) {
  .home { gap: 44px; }
  .home-band { padding: 28px 20px; }
  .principle { border-right: 0; border-bottom: 1px solid var(--line); }
  .principle:last-child { border-bottom: 0; }
}

/* ---- documentation readability (per the tech-writing pass) ------------- */
/* Scannable hierarchy: sections separated by rules, subsections that
   actually read as subsections, keyword-first list items, inline code as
   chips, striped tables. */
.doc-prose h2 { font-size: 20px; letter-spacing: -.02em; color: var(--navy);
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line); }
.doc-prose h1 + .lede + h2, .doc-prose h1 + h2,
.doc-prose h2:first-child { border-top: 0; padding-top: 0; }
.doc-prose h3 { font-size: 15px; font-weight: 600; color: var(--navy);
  margin-top: 30px; letter-spacing: -.01em; }
.doc-prose p { margin-top: 12px; }
.doc-prose ul, .doc-prose ol { margin-top: 12px; padding-left: 22px; }
.doc-prose li { margin-top: 9px; }
.doc-prose li::marker { color: var(--orange); }
.doc-prose ol > li::marker { color: var(--navy); font-weight: 600; }
/* Keyword-first scanning: the bolded lead phrase carries the color. */
.doc-prose li > strong:first-child, .doc-prose p > strong:first-child {
  color: var(--navy); }
/* Inline identifiers read as code, not as emphasis. */
.doc-prose p .mono, .doc-prose li .mono, .doc-prose dd .mono {
  background: var(--wash-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; font-size: .92em; }
.doc-prose .hint { border-left: 2px solid var(--line-strong);
  padding: 8px 0 8px 14px; color: var(--mute); }
.tablewrap { margin-top: 14px; }
.tablewrap tbody tr:nth-child(even) { background: var(--wash); }
/* In-page jump navigation. */
.doc-jump { margin: 14px 0 4px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--wash); font-size: 12.5px; }
.doc-jump summary { cursor: pointer; padding: 10px 14px; font-weight: 600;
  color: var(--navy); list-style: none; }
.doc-jump summary::before { content: "☰  "; color: var(--orange); }
.doc-jump[open] summary { border-bottom: 1px solid var(--line); }
.doc-jump nav { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 10px 14px 12px; }
.doc-jump a { color: var(--slate); text-decoration: none; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; padding: 3px 10px; font-size: 11.5px; }
.doc-jump a:hover { color: var(--orange); border-color: var(--orange); }
.doc-prose h2[id], .doc-part[id] { scroll-margin-top: 74px; }

/* ---- ISO 9241 audit fixes ---------------------------------------------- */
/* M4: walkthrough headers are h2 for document order, styled as subheads. */
.doc-prose h2.wt { font-size: 15px; border-top: 0; padding-top: 0;
  margin-top: 26px; }
/* M3: minimum touch-target sizes on small controls. */
.doc-toc a { padding: 8px 14px; }
.doc-jump a { padding: 7px 12px; min-height: 30px; display: inline-flex;
  align-items: center; }
.da-examples button { padding: 7px 12px; min-height: 32px; }
.prompt-act { min-width: 32px; min-height: 32px; }
.starters button, .starters .starter { min-height: 32px; }
/* M5: hold the mono micro-type floor at 11px. */
.da-src { font-size: 11px; }
.answer .answer-label { font-size: 11px; }
.demo-badge { font-size: 11px; }
.gates .chip, .chip.filled { font-size: 11px; }
/* H2/H3: busy state while a model call is in flight. */
form.busy { opacity: .75; }
form.busy textarea { pointer-events: none; }
form.busy button[disabled] { cursor: progress; opacity: .8; }
.composer .foot button, .da-form button.ask, .askbar button { min-height: 32px; }

/* ---- imaging viewer ---------------------------------------------------- */
.ivwr { display: grid; grid-template-columns: minmax(320px, 560px) minmax(220px, 1fr);
  gap: 22px; margin-top: 20px; align-items: start; }
.iv-main { position: relative; background: #000; border-radius: 10px;
  overflow: hidden; border: 1px solid var(--line-strong); }
.iv-main img { display: block; width: 100%; height: auto; }
.iv-hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex;
  justify-content: space-between; padding: 8px 12px; font-family: var(--mono);
  font-size: 11px; color: #9fd49f; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.iv-side { display: flex; flex-direction: column; gap: 8px; }
.iv-lab { font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mute); margin-top: 8px; }
.iv-side input[type=range] { width: 100%; max-width: none; accent-color: var(--orange); }
.iv-wl-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-wl-btns button { font-size: 12px; padding: 6px 12px; min-height: 32px;
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  color: var(--slate); cursor: pointer; }
.iv-wl-btns button.on { border-color: var(--navy); color: var(--navy); font-weight: 600; }
.iv-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.iv-thumbs img { width: 58px; height: 58px; object-fit: cover; border-radius: 5px;
  border: 2px solid var(--line); cursor: pointer; background: #000; }
.iv-thumbs img.on { border-color: var(--orange); }
.iv-note { font-size: 11.5px; line-height: 1.6; color: var(--mute); margin-top: 10px; }
.wl-mod { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 8px; background: var(--pastel-1);
  border: 1px solid var(--pastel-3); color: var(--navy); font-weight: 700;
  font-size: 12px; letter-spacing: .04em; }
.wl-mod:hover { border-color: var(--orange); color: var(--orange); }
.wl-thumb { display: block; width: 46px; height: 46px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--line-strong); background: #0b0d10; }
a:hover > .wl-thumb { border-color: var(--orange); }
/* The worklist pairs a 46px frame with text: baseline alignment (the table
   default) hangs the image off the first line's baseline, so every row
   reads as misaligned. Centre the row instead and keep headers on one line. */
.wl-table td { vertical-align: middle; }
.wl-table th { white-space: nowrap; }
@media (max-width: 800px) { .ivwr { grid-template-columns: 1fr; } }

/* ---- ambient documentation --------------------------------------------- */
.amb-scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin-top: 14px; }
.amb-card { display: block; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; padding: 16px 18px; text-decoration: none; }
.amb-card:hover { border-color: var(--orange); }
.amb-card.on { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--orange); }
.amb-title { font-weight: 600; font-size: 14.5px; color: var(--navy); }
.amb-meta { margin-top: 6px; font-size: 12px; color: var(--mute); }
.amb-player { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; }
.amb-player audio { flex: 1 1 320px; max-width: 560px; }
.amb-asr { font-size: 11px; color: var(--mute); }
.amb-transcript { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--wash); max-height: 340px; overflow-y: auto; padding: 14px 16px; }
.amb-seg { display: flex; gap: 12px; padding: 7px 10px; border-radius: 7px;
  font-size: 13.5px; line-height: 1.6; cursor: pointer; opacity: .55; }
.amb-seg.seen { opacity: .85; }
.amb-seg.on { opacity: 1; background: #fff; box-shadow: inset 2px 0 0 var(--orange); }
.amb-spk { flex: 0 0 74px; font-family: var(--mono); font-size: 11px;
  padding-top: 3px; }
.amb-spk.doc { color: var(--navy); } .amb-spk.pat { color: var(--orange); }
.amb-text { color: var(--body); }

/* ---- permission-matrix tables: icons, centering, sticky labels --------- */
table.pm td.pm-y, table.pm td.pm-n { text-align: center; vertical-align: middle; }
.pm-dot { display: inline-flex; width: 22px; height: 22px; border-radius: 50%;
  align-items: center; justify-content: center; font-size: 12px; }
.pm-dot.y { background: var(--good, #1d7a4f); color: #fff; }
.pm-dot.n { background: var(--wash-2); color: var(--faint);
  border: 1px solid var(--line); font-size: 10px; }
table.pm th:first-child, table.pm td:first-child {
  position: sticky; left: 0; z-index: 1; background: #fff; }
table.pm thead th:first-child { background: var(--wash-2); }
.tablewrap tbody tr:nth-child(even) td:first-child { background: var(--wash); }

/* ---- search/form rows: button sits beside the input, not the label ----- */
form .row { align-items: flex-end; }
form .row .field { flex: 1 1 260px; max-width: 560px; }
form .row .field input[type=text] { width: 100%; max-width: none; }
form .row button[type=submit] { margin-bottom: 1px; }

/* ---- hero over artwork; pastel accents --------------------------------- */
.home-hero { position: relative; max-width: none; margin: 0; align-self: stretch; border-radius: 16px;
  overflow: hidden; padding: 74px 40px 66px; text-align: center;
  background:
    linear-gradient(100deg, rgba(3,18,44,.88) 0%, rgba(6,32,72,.72) 46%, rgba(10,45,94,.42) 100%),
    url('hero-bg.svg') center / cover no-repeat, var(--pastel-deep); }
.home-hero .hh-eyebrow { color: #ffb38c; }
.home-hero .hh-title { color: #ffffff; text-shadow: 0 2px 18px rgba(3,18,44,.55); }
.home-hero .hh-lede { color: #dbe8f7; max-width: 760px;
  text-shadow: 0 1px 12px rgba(3,18,44,.6); }
.home-hero .hh-note { color: #9fc0e8; }
.home-hero .hh-cta { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55);
  color: #fff; backdrop-filter: blur(3px); }
.home-hero .hh-cta:hover { border-color: #ffb38c; color: #ffd9c4; }
.home-hero .hh-cta.primary { background: var(--orange); border-color: var(--orange); }
.home-hero .hh-cta.primary:hover { background: #e04d0c; color: #fff; }
.home { padding-top: 16px; }

/* pastel section grounds */
.home-band { background: linear-gradient(135deg, var(--pastel-1), var(--pastel-2));
  border-color: var(--pastel-3); }
.pillar .p-head { border-top-color: var(--orange); }
.feature { border-color: var(--pastel-3); background: #fff; }
.feature:hover { border-color: var(--orange); box-shadow: 0 4px 16px rgba(0,45,114,.08); }
.home-principles { border-color: var(--pastel-3); }
.principle { background: linear-gradient(180deg, #fff, var(--pastel-1)); }
.home-close { background: linear-gradient(135deg, var(--pastel-1), var(--pastel-2));
  border: 1px solid var(--pastel-3); border-radius: 16px; padding: 44px 30px; }

/* pastel accents across the UI */
.doc-toc a.on { background: var(--pastel-2); border-color: var(--pastel-3); }
.doc-jump { background: var(--pastel-1); border-color: var(--pastel-3); }
.doc-jump a:hover { background: #fff; }
.docs-assist { background: linear-gradient(180deg, var(--pastel-1), #fff 240px);
  border-color: var(--pastel-3); }
.nav-menu-drop, .docs-drop { border-color: var(--pastel-3); }
.card { border-color: var(--line); }
.grid.stats { background: #fff; }
.patient-banner { background: var(--pastel-1); border-color: var(--pastel-3); }
.model-banner { background: var(--pastel-1); border-color: var(--pastel-3); }
.amb-transcript { background: var(--pastel-1); border-color: var(--pastel-3); }
.callout { background: var(--pastel-1); border-color: var(--pastel-3); }
.callout.warn { background: var(--warn-bg); border-color: #f3c1ad; }

/* ---- AI chart summary --------------------------------------------------- */
.ai-sum { margin-top: 16px; border: 1px solid var(--pastel-3); border-radius: 12px;
  background: linear-gradient(120deg, var(--pastel-1), #fff 70%);
  padding: 18px 22px; box-shadow: inset 3px 0 0 var(--navy); }
.ai-sum-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ai-sum-title { font-weight: 600; font-size: 15px; color: var(--navy);
  letter-spacing: -.01em; }
.ai-sum-title::before { content: "✦ "; color: var(--orange); }
.ai-sum-model { font-size: 11px; color: var(--mute); }
.ai-sum-overview { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7;
  color: var(--body); }
.ai-sum-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 28px; margin-top: 12px; }
.ai-sum-lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy); }
.ai-sum-lab.warn { color: var(--warn-fg); }
.ai-sum-cols ul { margin: 6px 0 0; padding-left: 18px; }
.ai-sum-cols li { font-size: 12.5px; line-height: 1.6; color: var(--body);
  margin-top: 3px; }
.btn-sm { display: inline-flex; align-items: center; min-height: 30px;
  padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 6px;
  font-size: 12px; color: var(--navy); background: #fff; text-decoration: none; }
.btn-sm:hover { border-color: var(--orange); color: var(--orange); }

/* ---- hero zero-to-one line --------------------------------------------- */
.hh-zero { margin-top: 26px; display: flex; flex-direction: column; gap: 6px;
  align-items: center; }
.hh-zero-mark { font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #ffb38c; }
.hh-zero-quote { font-size: 15.5px; font-style: italic; letter-spacing: -.01em;
  color: #eaf2fb; text-shadow: 0 1px 12px rgba(3,18,44,.6); }
.home-hero .hh-note a { color: #cfe3fa; text-decoration: underline; }
.home-hero .hh-note a:hover { color: #ffb38c; }

/* ---- sticky documentation section menu --------------------------------- */
.docs-main .doc-toc { position: sticky; top: 58px; z-index: 40;
  background: rgba(243,248,253,.96); backdrop-filter: blur(6px);
  margin: 0 -6px; padding: 10px 6px; border-bottom: 1px solid var(--line);
  border-radius: 0 0 10px 10px; }
@media (max-width: 700px) { .docs-main .doc-toc { top: 50px; } }

/* ---- feature index & sticky group subnav ------------------------------- */
.feat-subnav { position: sticky; top: 104px; z-index: 39; display: flex;
  flex-wrap: wrap; gap: 6px; padding: 8px 6px; margin: 10px -6px 0;
  background: rgba(243,248,253,.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line); }
.feat-subnav a { font-size: 12px; padding: 6px 12px; min-height: 30px;
  display: inline-flex; align-items: center; border: 1px solid var(--pastel-3);
  border-radius: 15px; background: #fff; color: var(--navy);
  text-decoration: none; }
.feat-subnav a:hover { border-color: var(--orange); color: var(--orange); }
.feat-table tbody tr { cursor: pointer; }
.feat-table tbody tr:hover { background: var(--pastel-1); }
.feat-table tbody tr:hover td a { color: var(--orange); }
.feat-table td a { font-weight: 600; color: var(--navy); }
.feat-num { color: var(--orange); font-size: 10.5px; margin-right: 2px; }
.doc-prose h3[id] { scroll-margin-top: 150px; }
@media (max-width: 700px) { .feat-subnav { top: 92px; } }

/* ---- out-of-box feature cards, upgraded -------------------------------- */
.feature { position: relative; padding: 20px 18px 18px; transition: transform .16s ease,
  box-shadow .16s ease, border-color .16s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,45,114,.13); }
.f-icon { display: inline-flex; width: 42px; height: 42px; border-radius: 11px;
  align-items: center; justify-content: center; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--pastel-2), var(--pastel-1));
  border: 1px solid var(--pastel-3); color: var(--navy); }
.f-icon svg { width: 22px; height: 22px; }
.f-icon .ac { stroke: var(--orange); }
.feature:hover .f-icon { background: var(--navy); color: #fff;
  border-color: var(--navy); }
.feature:hover .f-icon .ac { stroke: #ffb38c; }

/* ---- feature cards: icon inline with the copy -------------------------- */
.feature { display: flex; gap: 14px; align-items: flex-start; }
.f-icon { flex: 0 0 42px; margin-bottom: 0; margin-top: 2px; }
.f-body { min-width: 0; }
.f-body p { margin-top: 6px; }

/* ---- supported-stack section ------------------------------------------- */
.home-support { display: flex; flex-direction: column; gap: 26px; }
.sup-group { }
.sup-head { font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mute); margin: 6px 0 10px;
  text-align: center; }
.sup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; }
.sup-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sup-tile { display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--pastel-3); border-radius: 10px; padding: 13px 15px;
  transition: transform .15s ease, box-shadow .15s ease; }
.sup-tile:hover { transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,45,114,.10); }
.sup-mark { flex: 0 0 40px; height: 40px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font: 700 14px/1 var(--sans);
  letter-spacing: -.02em; color: #fff;
  background: linear-gradient(135deg, var(--mk), color-mix(in srgb, var(--mk) 72%, #06225a)); }
.sup-name { font-weight: 600; font-size: 14px; color: var(--navy);
  letter-spacing: -.01em; }
.sup-cap { font-size: 10.5px; color: var(--mute); margin-top: 3px; }
.sup-legal { text-align: center; font-size: 11px; color: var(--faint);
  max-width: 640px; margin: 2px auto 0; line-height: 1.6; }

/* ---- brand tiles ------------------------------------------------------- */
.sup-logo { flex: 0 0 44px; height: 44px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: #fff;
  border: 1px solid var(--line); }
.sup-logo svg { width: 26px; height: 26px; fill: var(--lg); }
.sup-logo.app { background: var(--lg); border-color: color-mix(in srgb, var(--lg) 80%, #000); }
.sup-logo.app b { color: #fff; line-height: 1; }
.sup-logo.glyph { color: var(--lg);
  background: color-mix(in srgb, var(--lg) 7%, #fff);
  border-color: color-mix(in srgb, var(--lg) 26%, #fff); }
.sup-logo.glyph svg { fill: none; }

/* ---- homepage section headers, redesigned ------------------------------ */
.hb-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange); text-align: center;
  margin-bottom: 10px; }
.hb-eyebrow::before, .hb-eyebrow::after { content: ""; display: inline-block;
  width: 26px; height: 1px; background: var(--pastel-3); vertical-align: middle;
  margin: 0 12px; }
.hb-title { font-size: 30px; letter-spacing: -.03em; line-height: 1.15;
  text-wrap: balance; }
.hb-title::after { content: ""; display: block; width: 46px; height: 4px;
  border-radius: 2px; margin: 14px auto 0;
  background: linear-gradient(90deg, var(--orange), #ffb38c); }
.hb-sub { font-size: 14.5px; color: var(--slate); max-width: 600px;
  margin-top: 14px; }
.sup-head { color: var(--navy); font-size: 12px; margin-top: 14px; }
.sup-head::before, .sup-head::after { content: ""; display: inline-block;
  width: 40px; height: 1px; background: var(--pastel-3);
  vertical-align: middle; margin: 0 14px; }
.sup-grid-models { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ---- clinical cohesion: context strip, action bar, AI notation --------- */
.ctx-strip { position: sticky; top: 59px; z-index: 55; display: flex;
  align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 0;
  padding: 10px 18px; border: 1px solid #ffc9a8;
  border-left: 4px solid var(--orange); border-radius: 9px;
  background: linear-gradient(90deg, #ffe3d1, #fff2e8 70%);
  box-shadow: 0 6px 16px -8px rgba(255, 89, 16, .45);
  backdrop-filter: blur(6px); }
.ctx-lab { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--orange); padding: 2px 8px; border-radius: 99px;
  font-weight: 700; }
.ctx-name { font-weight: 700; color: var(--navy); font-size: 14.5px; }
.ctx-meta { font-size: 11px; color: var(--mute); }
.ctx-acts { display: flex; gap: 14px; margin-left: auto; }
.ctx-acts a { font-size: 12px; color: var(--navy); display: inline-flex;
  align-items: center; gap: 5px; }
.ctx-clear button { border: 0; background: transparent; color: var(--mute);
  font-size: 15px; cursor: pointer; padding: 2px 6px; }
.ctx-clear button:hover { color: var(--orange); }
.ai-chip { display: inline-flex; align-items: center; font-family: var(--mono);
  font-size: 9px; letter-spacing: .05em; color: var(--orange);
  border: 1px solid #f3c1ad; background: var(--warn-bg); border-radius: 8px;
  padding: 1px 6px; vertical-align: middle; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pt-act { display: inline-flex; align-items: center; gap: 7px; min-height: 36px;
  padding: 7px 15px; border: 1px solid var(--pastel-3); border-radius: 8px;
  background: #fff; color: var(--navy); font-size: 13px; font-weight: 500;
  text-decoration: none; }
.pt-act:hover { border-color: var(--orange); color: var(--orange); }
.pt-count { font-family: var(--mono); font-size: 11px; background: var(--wash-3);
  border-radius: 9px; padding: 1px 7px; }
.pt-count.warn { background: var(--warn-bg); color: var(--warn-fg); }
.cite-link { border-bottom: 1px dotted var(--orange); }
/* A choice between charts, offered as a choice. */
.chart-picks { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.chart-picks-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
/* Specificity note: .thread-list a sets display:block and would win over a
   bare .chart-pick, flattening the chips into full-width rows. */
.chart-picks .chart-pick { display: inline-flex; flex-direction: column; gap: 2px;
  margin: 0 8px 8px 0; padding: 8px 13px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: #fff; color: var(--navy); vertical-align: top; }
.chart-picks .chart-pick:hover { border-color: var(--orange); background: var(--pastel-1);
  color: var(--navy); }
.chart-picks .cp-name { font-weight: 600; font-size: 13px; }
.chart-picks .cp-meta { font-size: 11px; color: var(--mute); }

/* ---- patient selector --------------------------------------------------- */
.psel { margin-top: 16px; border: 1px solid var(--pastel-3); border-radius: 12px;
  background: linear-gradient(120deg, var(--pastel-1), #fff 70%);
  padding: 18px 22px; box-shadow: inset 3px 0 0 var(--navy); }
.psel-head { font-weight: 600; font-size: 15px; color: var(--navy); }
.psel-sub { margin: 6px 0 0; font-size: 12.5px; color: var(--mute); line-height: 1.6; }
.psel-search { display: flex; gap: 8px; margin-top: 12px; }
.psel-search input[type=text] { flex: 1 1 auto; max-width: 420px; }
.psel-list { margin-top: 10px; display: flex; flex-direction: column; }
.psel-row { display: flex; align-items: center; gap: 14px; padding: 8px 6px;
  border-bottom: 1px solid var(--line-soft); }
.psel-row:last-child { border-bottom: 0; }
.psel-name { font-weight: 600; font-size: 13px; color: var(--navy); flex: 0 0 220px; }
.psel-meta { font-size: 11px; color: var(--mute); flex: 1; }
.psel-row button { min-height: 30px; padding: 5px 14px; }
.psel-collapse { margin-top: 16px; border: 1px dashed var(--line-strong);
  border-radius: 9px; padding: 10px 14px; }
.psel-collapse summary { cursor: pointer; font-size: 12.5px; color: var(--slate); }
.psel-collapse .psel { margin-top: 10px; box-shadow: none; border: 0;
  background: transparent; padding: 4px 0 0; }
button.linklike { border: 0; background: transparent; padding: 0; cursor: pointer;
  color: var(--navy); text-align: left; font: inherit; font-weight: 600; }
button.linklike:hover { color: var(--orange); text-decoration: underline; }

/* Context scope bar — the one banner every patient-list screen renders */
.scope-bar { display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: 6px; background: var(--pastel-1, var(--wash)); font-size: 13px; }
.scope-bar.wide { border-left-color: var(--warn-fg); background: var(--warn-bg); }
.scope-bar .scope-act { white-space: nowrap; font-size: 12px; font-weight: 600; }
.amb-card .amb-open { display: block; text-decoration: none; color: inherit; }
.amb-card .amb-meta a { font-weight: 600; }

/* White wordmark centered in the hero */
.home-hero .hh-logo { color: #fff; margin: 0 auto; }
.home-hero .hh-logo svg { display: block; margin: 0 auto; width: min(290px, 52vw);
  height: auto; }
.home-hero .hh-eyebrow { margin-top: 2px; letter-spacing: .22em; font-size: 14px;
  animation: eyebrow-breathe 5s ease-in-out infinite; }
@keyframes eyebrow-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .hh-eyebrow { animation: none; opacity: .92; }
}
.home-hero .hh-title { margin-top: 30px; }

/* Ambient capture controls */
.amb-rec { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--wash); }
.rec-btn { display: inline-flex; align-items: center; gap: 8px; border: 0;
  cursor: pointer; padding: 9px 18px; border-radius: 7px; background: #c92a2a;
  color: #fff; font: 600 13px/1 var(--sans); }
.rec-btn:hover { background: #a61e1e; }
.rec-btn:disabled { background: var(--line-strong); cursor: default; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.amb-rec.rec .rec-dot, .amb-rec.rec .rec-time { animation: rec-pulse 1.2s infinite; }
.amb-rec.rec { border-color: #c92a2a; box-shadow: inset 3px 0 0 #c92a2a; }
.amb-rec.paused { border-color: var(--warn-fg); }
.amb-rec.standby { opacity: .85; border-style: dashed; }
.rec-open { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: #c92a2a; color: #fff; border-radius: 7px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 600; }
.rec-open:hover { background: #a61e1e; color: #fff; }
.amb-card.on .rec-open { background: var(--navy); }
.amb-rec.done { border-color: var(--good, #2b8a3e); }
.rec-ctl { border: 1px solid var(--line-strong); background: #fff; color: var(--navy);
  padding: 8px 14px; border-radius: 7px; font: 500 13px/1 var(--sans); cursor: pointer; }
.rec-ctl:disabled { color: var(--mute); border-color: var(--line); cursor: default; }
.rec-state { font-size: 11.5px; color: var(--mute); }
.rec-time { font-size: 12.5px; color: var(--slate); }
#rec-meter, #live-meter { border-radius: 4px; background: #0b1526; }
.amb-seg.hid { display: none; }
/* Publish is the step that puts something on a chart - it reads as the
   commitment it is, and greys out until there is a transcript to draft
   a note from. */
.rec-ctl.pub { font-weight: 600; }
.rec-ctl.pub:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
.rec-ctl.pub:not(:disabled):hover { background: #001f4f; }
.rec-ctl:disabled, #amb-draft-btn:disabled { opacity: .45; cursor: default; }
#live-transcript:empty { display: none; }
/* A recording's own controls live on its row - small, and never a dead
   cell: whatever state the capture is in, its next step is right there. */
td .rec-ctl { padding: 6px 12px; font-size: 12px; }
.rec-tx > summary { cursor: pointer; }
.rec-tx[open] > summary { margin-bottom: 2px; }
@keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .amb-rec.rec .rec-dot, .amb-rec.rec .rec-time { animation: none; } }

/* AI imaging read */
.ai-read { border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: 9px; background: var(--wash); padding: 16px 18px; }
.ai-read-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ai-read-title { font-weight: 650; color: var(--navy); }
.ai-read-meta { font-size: 11px; color: var(--mute); }
.ai-read-body { white-space: pre-wrap; font: 12.5px/1.65 var(--mono);
  color: var(--slate); margin: 0; max-height: 460px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; }

/* Collapsible documentation assistant */
/* The collapsible wrapper has to CARRY the panel's height, not size to
   its own content: .da-thread scrolls only if every ancestor between it
   and the max-height panel is a flex item that can shrink. Left at the
   default `flex: 0 1 auto` the details box grew to the full answer and,
   with the panel's overflow visible, a long answer painted straight over
   the documentation and the footer beneath it. */
.da-wrap { display: flex; flex-direction: column; gap: 10px;
  min-height: 0; flex: 1 1 auto; }
.da-wrap > summary.da-head { cursor: pointer; list-style: none; user-select: none; }
.da-wrap > summary.da-head::-webkit-details-marker { display: none; }
.da-wrap > summary.da-head::after { content: '▾'; float: right; color: var(--mute);
  transition: transform .15s ease; }
.da-wrap:not([open]) > summary.da-head::after { transform: rotate(-90deg); }
/* Collapsed, it is a slim bar - never stretched to fill the panel. */
.da-wrap:not([open]) { flex: 0 0 auto; }
@media (min-width: 1020px) {
  .docs-cols:has(.da-wrap:not([open])) { grid-template-columns: 230px 1fr; }
  .docs-cols:has(.da-wrap:not([open])) .docs-assist { align-self: start; }
}
@media (max-width: 1019px) {
  /* Mobile stacks the columns; a collapsed assistant is just a slim bar
     above the docs - never a squeezed side column. */
  .docs-cols:has(.da-wrap:not([open])) { grid-template-columns: 1fr; }
  .docs-assist:has(.da-wrap:not([open])) { max-height: none; }
}
.ai-read-sec { font: 600 11px/1 var(--mono); letter-spacing: .08em; color: var(--orange);
  margin: 12px 0 6px; }
.seg-op-row td { border-top: 0; }


/* "PHI AI" wordmark subtitle, everywhere the logo appears */
.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.brand-sub { font: 700 8.5px/1 var(--sans); letter-spacing: .34em; color: var(--navy);
  margin-top: 2px; padding-left: .34em; }
.hh-logo-sub { font: 700 15px/1 var(--sans); letter-spacing: .42em; color: #fff;
  margin-top: 10px; padding-left: .42em; }

.hh-open { margin-top: 18px; font: 650 17px/1.2 var(--sans); letter-spacing: .06em;
  color: #ffb38c; }
.hh-open a { color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hh-open a:hover { color: #fff; }

/* A re-run control buried as link-text in a caption reads as decoration.
   Give the stat card a real, full-width action button. */
.stat-act { margin-top: 12px; }
.btn-rerun { display: block; width: 100%; padding: 9px 14px; border-radius: 7px;
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  font: 600 12.5px/1.2 var(--sans); letter-spacing: .02em; cursor: pointer; }
.btn-rerun:hover { background: var(--orange); border-color: var(--orange); }
.btn-rerun:disabled { background: var(--line-strong); border-color: var(--line-strong);
  cursor: default; }