/* IBM Plex, self-hosted (OFL). Not loaded from a third party: a Part 2 app
   should not emit a request carrying patient IP and referer on every page. */
@font-face{font-family:"IBM Plex Sans";src:url("/static/fonts/IBMPlexSans-400.woff2")format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/static/fonts/IBMPlexSans-600.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Condensed";src:url("/static/fonts/IBMPlexSansCondensed-600.woff2")format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/fonts/IBMPlexMono-500.woff2")format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ─────────────────────────────────────────────────────────────
   BRIDGE — design system. Clean, spacious, confident (Stripe-grade).
   ───────────────────────────────────────────────────────────── */
:root {
  /* Continuity as a line. Achromatic, with one signal: red marks a break in
     continuity and nothing else. Swiss transit-diagram logic — the eye should
     land on clinical meaning, not on decoration. */
  --bg: #FAFAF8;
  --bg-tint: #F3F3F0;
  --surface: #FFFFFF;
  --surface-2: #F3F3F0;
  /* Warmed 2026-10-07 from #111214, a blue-black, which fought the warm
     paper above it. Contrast on --bg goes 17.9:1 -> 17.8:1; AAA needs 7. */
  --ink: #17120F;
  --ink-2: #2A2D31;
  --muted: #4B5057;              /* 8.0:1 on --bg — Plex 400 reads lighter than the
                                    system stack it replaced, so the greys carry more weight */
  --faint: #565B62;              /* 6.7:1 on --bg */
  --line: #E3E4E2;
  --line-strong: #C9CDD3;        /* the track */

  /* The primary action is ink. Colour is not spent on ordinary affordances. */
  --accent: #17120F;
  --accent-strong: #000000;
  --accent-ink: #17120F;
  --accent-bg: #F0F0EE;
  --accent-2: #D8232A;

  --good: #1B5E4A; --good-bg: #E8F0ED;
  --warn: #6B4E12; --warn-bg: #F6F0E0;
  --bad:  #C21D24; --bad-bg: #FBEDED;   /* 5.3:1 on --bad-bg */
  --on-bad: #FFFFFF;             /* text on the signal surface; flips with the scheme */

  /* Flat. A gradient in a clinical readout is decoration competing with signal. */
  --grad: #17120F;
  --on-accent: #FAFAF8;      /* text on a primary surface; flips with the scheme */
  --grad-soft: #F3F3F0;

  /* Rules, not shadows. Depth is a Material idiom, not a Swiss one. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --r-sm: 2px; --r: 2px; --r-lg: 3px; --r-xl: 3px;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
  --serif: "IBM Plex Sans", system-ui, sans-serif;

  --maxw: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E0F11; --bg-tint: #131417; --surface: #17181B; --surface-2: #1D1F23;
    --ink: #EDEEEA; --ink-2: #C6C8C4; --muted: #B2B7BE; --faint: #A6ABB3;
    --line: #26282C; --line-strong: #3A3D42;
    --accent: #EDEEEA; --accent-strong: #FFFFFF; --accent-ink: #EDEEEA; --accent-bg: #202226;
    --accent-2: #FF6B6B;
    --good: #5FBFA3; --good-bg: #16241F;
    --warn: #D6B45F; --warn-bg: #241F12;
    --bad: #FF6B6B; --bad-bg: #2A1516; --on-bad: #1A0E0F;
    --grad: #EDEEEA; --grad-soft: #131417; --on-accent: #0E0F11;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 50px -14px rgba(0,0,0,.7);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
/* Media never blows out a narrow viewport. */
img, video { max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* ── Top bar ─────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2rem);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .brand { font-family: var(--cond); font-weight: 600; font-size: 1.22rem; letter-spacing: .01em; display: flex; align-items: baseline; gap: .62rem; }
.top .brand .mark { width: 28px; height: auto; flex: none; color: var(--ink); }
.top .brand .word { display: flex; flex-direction: column; line-height: 1.05; }
.top .brand small { font-weight: 500; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-top: 1px; }
.top .who { font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: .8rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1rem, 4vw, 1.6rem) 5rem; }

/* ── Typography ──────────────────────────────────────────── */
h1 { font-family: var(--cond); font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.6rem); line-height: 1.04; letter-spacing: -.015em; margin: .1rem 0 .5rem; font-weight: 600; text-wrap: balance; }
h2 { font-family: var(--cond); font-size: 1.3rem; letter-spacing: -.008em; margin: 2.2rem 0 .9rem; font-weight: 600; }
h3 { font-family: var(--cond); font-size: 1.05rem; margin: 0; font-weight: 600; }
p { margin: .5rem 0; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.kicker { font-family: var(--cond); font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; font-weight: 600; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .faint { color: var(--faint); }

/* Page intro — clear, consistent instruction block */
.pageintro { margin-bottom: 1.4rem; }
.pageintro .hint { color: var(--muted); max-width: 64ch; margin-top: .3rem; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 1.3rem; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 1rem; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px){ .grid.two, .grid.three { grid-template-columns: 1fr; } }

/* ── Buttons ─────────────────────────────────────────────── */
button, .btn {
  font: inherit; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  background: var(--grad); color: var(--on-accent); border-radius: var(--r-sm);
  padding: .6rem 1.05rem; box-shadow: var(--shadow-sm);
  transition: transform .08s ease, box-shadow .15s ease, background .2s ease, opacity .15s ease;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
button:active, .btn:active { transform: translateY(0); }
.btn.ghost { background: var(--surface); color: var(--accent-ink); border-color: var(--line-strong); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-2); box-shadow: var(--shadow-sm); }
.btn.sm { padding: .38rem .75rem; font-size: .86rem; }
.btn.lg { padding: .8rem 1.4rem; font-size: 1.02rem; }
/* A stacked action: a bold label with a line of detail under it. Needed because
   .btn is display:flex with flex-wrap:nowrap, so a <strong> and a <span>
   separated by a <br> became two SIDE-BY-SIDE columns — on the crisis page that
   turned "I'm in immediate danger — call 911" into a four-line sliver beside its
   own description. Someone in crisis should scan a list, not parse a table. */
.btn.stack { flex-direction: column; align-items: flex-start; gap: .18rem; text-align: left; }
.btn.stack br { display: none; }
.btn.stack > span { font-weight: 500; font-size: .85rem; opacity: .9; line-height: 1.4; }
:focus-visible { outline: 2.5px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ── Forms ───────────────────────────────────────────────── */
label { display: block; font-size: .86rem; color: var(--ink-2); font-weight: 550; margin: .85rem 0 .3rem; }
input, select, textarea {
  font: inherit; width: 100%; padding: .58rem .7rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
/* RADIO as well as checkbox. `input, select, textarea` above sets width:100%,
   which is right for a text field and wrong for a 13px control — and the label
   that wraps these is a flex container, so a 100%-wide radio took the entire
   row and pushed its own text into a narrow column beside it. At 375px that
   read as the button having floated away from its label. Checkboxes were fine
   because this line already excused them; radios were not, because it did not
   name them. (`.scale .chip input` sets width:100% deliberately and wins on
   specificity, so the tap-scale chips are untouched.) */
input[type=checkbox], input[type=radio] { width: auto; flex: 0 0 auto; accent-color: var(--accent); }
label:has(input[type=checkbox]), label:has(input[type=radio]) { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; color: var(--ink-2); }

/* ── Tap-scale — instant 1–10 taps instead of typing/dragging (check-in) ──
   Radio chips: no keyboard needed, no drag lag, no-JS-safe, and accessible
   (arrow-key nav within the group, visible focus). Posts the plain integer,
   so the server contract is unchanged. */
.scalefield { border: 0; padding: 0; margin: .85rem 0 0; min-width: 0; }
.scalefield legend { font-size: .86rem; color: var(--ink-2); font-weight: 550; padding: 0; margin-bottom: .4rem; }
.scale { display: flex; flex-wrap: wrap; gap: .3rem; }
.scale .chip { position: relative; margin: 0; flex: 1 1 2rem; min-width: 2rem; }
.scale .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scale .chip span {
  display: grid; place-items: center; height: 2.6rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
  font-weight: 650; font-variant-numeric: tabular-nums;
  transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.scale .chip input:hover + span { border-color: var(--accent); }
.scale .chip input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.scale .chip input:focus-visible + span { outline: 2.5px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
@media (max-width: 640px){ .scale .chip { flex-basis: 2.6rem; } .scale .chip span { height: 2.9rem; } }

/* ── Collapsible secondary sections ("More" disclosure) ──────
   Progressive disclosure: the two core actions lead the page; optional
   tools collapse, except the wellness invitation before a baseline exists.
   The visible action beside the heading makes the disclosure discoverable. */
details.more { margin: 2rem 0 .9rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
details.more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink-2);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "Show ▾"; flex-shrink: 0; font-size: .8rem; color: var(--muted); }
details.more[open] > summary { color: var(--ink); margin-bottom: .4rem; }
details.more[open] > summary::after { content: "Hide ▴"; }
details.more > summary:hover { color: var(--accent-ink); }

/* ── Option chips — tap a labelled choice instead of a dropdown ──────
   Same principle as .scale, for multi-option questions (wellness baseline).
   Radios, so it posts one value; keyboard/focus accessible; wraps on mobile. */
.optset { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .3rem; }
.optset .opt { position: relative; margin: 0; }
.optset .opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.optset .opt span {
  display: block; padding: .5rem .85rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2); font-size: .9rem; font-weight: 550;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.optset .opt input:hover + span { border-color: var(--accent); }
.optset .opt input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.optset .opt input:focus-visible + span { outline: 2.5px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* ── Pills / badges ──────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  padding: .24rem .6rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap;
}
.pill.good { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.pill.bad  { background: var(--bad-bg);  color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 34%, transparent); }

/* ── Tables ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--line); }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: var(--surface-2); }
th { font-family: var(--cond); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Banners ─────────────────────────────────────────────── */
.banner { border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); background: var(--accent-bg); color: var(--accent-ink); padding: .9rem 1.1rem; border-radius: var(--r); margin-bottom: 1rem; }
.banner.bad { border-color: color-mix(in srgb, var(--bad) 34%, transparent); background: var(--bad-bg); color: var(--bad); }
.banner.warn { border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: var(--warn-bg); color: var(--warn); }

/* ── Misc utilities ──────────────────────────────────────── */
.row { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.score { font-size: 2.8rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wedges { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.2rem; }
ul.events { list-style: none; padding: 0; margin: 0; }
ul.events li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
ul.events li:last-child { border-bottom: 0; }
ul.events .w { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.pos { color: var(--good); } .neg { color: var(--bad); }
.notice { font-size: .82rem; color: var(--faint); border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .8rem; }
.tagline { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

/* ── Help line — persistent, calm support affordance ─────── */
.helpline {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 1.1rem; padding: .7rem 1rem;
  background: var(--accent-bg); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: var(--r); font-size: .92rem; box-shadow: var(--shadow-sm);
}
.helpline:hover { text-decoration: none; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.helpline strong { font-weight: 700; }
.helpline .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ── Physician patient-analytics ─────────────────────────── */
.analytics { display: grid; gap: 1rem; }
.analytics .filters { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--surface); color: var(--ink-2); border: 0; border-right: 1px solid var(--line); padding: .32rem .72rem; font: inherit; font-size: .82rem; cursor: pointer; box-shadow: none; border-radius: 0; transition: background .12s ease; }
.seg button:hover { background: var(--surface-2); transform: none; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.chartcard { border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.chartcard > header { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.chartcard h3 { font-size: .98rem; margin: 0; font-weight: 700; }
.chartcard .cardctl { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.chartbody { width: 100%; overflow: hidden; }
.legend { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-2); }
.legend .key { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; user-select: none; }
.legend .key[aria-pressed="false"] { opacity: .4; }
.legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.spark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.spark { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; }
.spark-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: var(--muted); text-transform: capitalize; margin-bottom: .2rem; }
.spark-head strong { color: var(--ink); font-size: .95rem; }
.empty-note { color: var(--faint); font-size: .85rem; margin: .4rem 0; }
.chart-tip { position: fixed; pointer-events: none; background: var(--ink); color: var(--surface); font-size: .76rem; line-height: 1.35; padding: .4rem .55rem; border-radius: 6px; box-shadow: var(--shadow-md); z-index: 200; opacity: 0; transition: opacity .08s; max-width: 240px; }

/* ── Hero (landing) ──────────────────────────────────────── */
.hero { background: var(--grad-soft); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto -20% -60% auto; width: 460px; height: 460px; background: var(--grad); filter: blur(80px); opacity: .10; border-radius: 50%; pointer-events: none; }
.hero h1 { max-width: 18ch; }
.hero .lead { margin-top: .7rem; }
.hero .cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.3rem; }

/* Steps — "how it works" */
.steps { counter-reset: s; display: grid; gap: 1rem; grid-template-columns: repeat(3,1fr); margin-top: 1.2rem; }
@media (max-width: 760px){ .steps { grid-template-columns: 1fr; } }
.step { counter-increment: s; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.step::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-bg); color: var(--accent-ink); font-weight: 800; font-size: .95rem; margin-bottom: .6rem; }
.step h3 { margin-bottom: .25rem; }
.step p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Role picker rows */
.pickrow { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.pickrow:last-child { border-bottom: 0; }

/* ── Mobile / small-screen refinements ───────────────────────
   The layout is already fluid (clamp, collapsing grids, self-sizing
   charts); this tier tightens chrome, guarantees no horizontal
   overflow, and grows tap targets on phones. */
/* ── Narrow viewports: buy back measure ──────────────────────
   Measured at 390px: .wrap contributed 16px of side padding and .hero a
   further 25.6px, so 21% of the screen was margin and the lead paragraph
   ran about 33 characters per line. Readable prose wants 45-75. A short
   measure with 1.6 leading makes the eye return-sweep every few words
   across a wide vertical gap — real work for someone reading this while
   unwell. Generous whitespace is right for the design and wrong for a
   390px phone, so it is spent only where there is room for it. */
@media (max-width: 420px) {
  /* The header carried the wordmark, "Name · role", and three buttons. At 390px
     the name span collapsed to a single letter — "BRIDGE W" — and "Sign out"
     wrapped onto two lines, so the header ate ~85px of a phone screen to show
     nothing useful. Hiding the identity line also stops a patient's name and
     the word "patient" sitting at the top of a screen someone else can glance
     at, which is the same concern discreet mode exists for. */
  .who > span { display: none; }
  .who .btn.sm { padding: .4rem .6rem; white-space: nowrap; }
  .wrap { padding-left: .85rem; padding-right: .85rem; }
  .hero { padding: 1.15rem 1.1rem; }
  .hero .lead { font-size: 1.05rem; line-height: 1.5; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }

  /* Keep form fields at 16px so iOS Safari doesn't auto-zoom the viewport on focus. */
  input, select, textarea { font-size: 16px; }

  /* Top bar: tighter, and never let a long name shove the account controls. */
  .top { padding: .7rem 1rem; gap: .55rem; }
  .top .brand { font-size: 1.05rem; gap: .5rem; }
  .top .brand .mark { width: 24px; height: auto; }
  .top .who { font-size: .8rem; gap: .55rem; min-width: 0; }
  .top .who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .wrap { padding-bottom: 3.5rem; }
  h2 { margin-top: 1.7rem; }

  /* Wide, multi-column tables scroll horizontally instead of overflowing
     the page — the row stays intact and swipeable. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }

  /* Comfortable touch targets — a ~44px minimum on the small controls and tap-chips. */
  .btn.sm, button.sm, .seg button { padding: .5rem .85rem; min-height: 44px; }
  .optset .opt span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .helpline { padding: .8rem 1rem; }

  /* Two-up content grids stack on phones. */
  .wedges { grid-template-columns: 1fr; }
}

/* Extra-small phones: give the intro headline room to breathe. */
@media (max-width: 380px) {
  .top .brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Screen-reader-only utility: visually hidden, still announced by assistive tech. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Skip link — first focusable element on the page; slides into view on keyboard focus. */
.skip-link{position:absolute;left:8px;top:-48px;z-index:100;background:var(--surface);
  color:var(--accent-ink);padding:.55rem .9rem;border:1px solid var(--line-strong);
  border-radius:8px;box-shadow:var(--shadow-md);transition:top .15s ease;}
.skip-link:focus{top:8px;}

/* Destructive action button — visually distinct from the primary gradient so a
   halt/stop action can't be mistaken for a routine one. */
.btn.danger, button.danger {
  background: var(--bad); color: var(--on-bad); border-color: var(--bad); background-image: none;
}
.btn.danger:hover, button.danger:hover { filter: brightness(1.06); }


/* ── Figures ──────────────────────────────────────────────────────────────
   Days supply, scores and dates are meant to be compared down a column, so
   every numeral is mono and tabular. This is the transit-timetable rule. */
.num, td .num, .score, [data-num] {
  font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500;
}

/* ── The break ────────────────────────────────────────────────────────────
   Red appears where continuity is interrupted and nowhere else. */
.continuity-line { display:block; width:100%; height:1.25rem; overflow:visible }
.continuity-line .held   { stroke: var(--line-strong); stroke-width:2 }
.continuity-line .broken { stroke: var(--bad); stroke-width:2 }
.continuity-line .stop   { fill: var(--ink) }
.continuity-line .stop-break { fill: var(--bad) }

/* State, set as a timetable label rather than a coloured pill. */
.state{font-family:var(--cond);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.state.brk{color:var(--bad)}

/* ── Target size, all pointers ─────────────────────────────────────────────
   WCAG 2.2 AA (2.5.8) sets a 24px floor regardless of input device. Measured
   at 1180px with a mouse, 11 controls sat at 20-23px — including every
   checkbox row on the check-in, which is the form this product runs on. */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: .45rem; min-height: 24px;
}
/* min-height does nothing to a non-replaced inline box, so these need a
   display that establishes one — the reason the first pass here had no effect. */
a.btn, .card a[href]:not(.btn), .banner a[href]:not(.btn), .notice a[href]:not(.btn),
.top .brand {
  min-height: 24px; display: inline-flex; align-items: center;
}
button, .btn, summary { min-height: 24px; }

/* ── Touch targets ────────────────────────────────────────────────────────
   Measured 2026-09-17 at a 390px viewport: 21 interactive elements were under
   the 44px minimum (WCAG 2.5.5, Apple HIG). This population includes people
   who are stressed, unwell, or have a tremor, and the core action is one a
   patient takes in exactly those states. Mis-tapping a continuity report is
   not a cosmetic failure.

   Applied on coarse pointers only, so a mouse keeps the tighter desktop
   rhythm the Swiss grid depends on. */
@media (pointer: coarse) {
  button, .btn, summary, .scale .chip span, .optset .opt span {
    min-height: 44px;
  }
  button, .btn {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn.sm { padding: .55rem .9rem; }
  details > summary, details.more > summary, .more-tools summary {
    display: flex; align-items: center; min-height: 44px;
  }
  /* A label wrapping a checkbox IS the tap target, not the 13px box inside it —
     so the label is what has to clear 44px. :has() is the honest selector here;
     every browser that reports a coarse pointer supports it. */
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    /* flex-start, not center: when the text wraps to two lines — which it does
       at 375px — centring puts the control halfway down the block, away from
       the line it belongs to. */
    display: flex; align-items: flex-start; gap: .5rem; min-height: 44px;
  }
  label > input[type="checkbox"], label > input[type="radio"] {
    min-width: 22px; min-height: 22px; flex: none;
  }
  /* Inline links that act as buttons still need a thumb-sized target. */
  a.btn, .card a[href]:not(.btn), .banner a[href]:not(.btn), .notice a[href]:not(.btn) {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .top .brand { min-height: 44px; }
  input, select, textarea { min-height: 44px; }
}