/* ==========================================================================
   CF-ARIA — "Signal"
   Swiss/utilitarian. Grotesk type, zero radius, 1px rules, a visible grid,
   high typographic contrast. Palette drawn from the CF-ARIA logo: the
   wordmark navy carries structure, the helix green picks out small labels,
   and red is reserved exclusively for warnings so it keeps its meaning.

   No JavaScript anywhere in this project. The mobile menu is a CSS-only
   disclosure driven by a visually-hidden checkbox.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */

:root {
  --bg:      #f8fafc;   /* cool slate paper */
  --bg-2:    #eaeff5;
  --bg-3:    #dae2ec;

  --ink:     #0c1420;   /* slate-black */
  --ink-2:   #46566b;
  --ink-3:   #74839a;

  --rule:    #0c1420;
  --rule-2:  #cbd5e1;

  --blue:    #1c477d;   /* logo wordmark navy — the structural color */
  --blue-2:  #13416f;
  --blue-bg: #e8eff7;

  --red:     #be123c;   /* rose-red, kept clear of the indigo family */
  --red-bg:  #ffecf0;

  --amber:   #92610b;
  --amber-bg:#fdf3dc;

  --green:   #0f766e;
  --green-bg:#e6f5f3;

  --on-fill: #ffffff;

  /* Solid fills (table headers, step numbers, active nav, heavy rules).
     Previously pure --ink, which is what made the page read as austere. */
  --fill:    #1c477d;
  --fill-on: #ffffff;

  /* Highlight for small labels — eyebrows, tags, card links. The logo's own
     green (#69a157) is only 2.9:1 against the page and fails WCAG AA as text,
     so this is the same hue darkened until it passes. */
  --accent:  #2f7355;   /* logo helix green, darkened */

  --sans: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --shell:   64rem;
  --measure: 38rem;
  --gut:     1.5rem;
  --bar:     3.25rem;   /* masthead height, for sticky offsets */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0b1017;
    --bg-2:    #151d28;
    --bg-3:    #1f2937;

    --ink:     #e9eef6;
    --ink-2:   #a5b4c8;
    --ink-3:   #7d8ca2;

    --rule:    #e9eef6;
    --rule-2:  #2c3947;

    --blue:    #7fb3dd;
    --blue-2:  #a5cbe9;
    --blue-bg: #12233a;

    --red:     #fb7185;
    --red-bg:  #2b1119;

    --amber:   #e2b25c;
    --amber-bg:#291f0d;

    --green:   #5eccc0;
    --green-bg:#0d2320;

    --on-fill: #0b1017;

    /* Fills invert: a light navy block with dark text on dark ground. */
    --fill:    #7fb3dd;
    --fill-on: #0b1017;

    --accent:  #6fc79a;
  }
}

/* --- Base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + .3rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.08;
  font-weight: 700;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 1.15rem + 3.9vw, 4.25rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.75rem); letter-spacing: -.022em; }
h3 { font-size: 1.05rem; letter-spacing: -.012em; line-height: 1.25; }
h4 {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
}

p, ul, ol { margin: 0 0 1rem; }
p, li { max-width: var(--measure); }
li { margin-bottom: .3rem; }

strong { font-weight: 700; }
em { font-style: italic; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* --- Skip link ----------------------------------------------------------- */

.skip-link {
  position: absolute; left: 0; top: -4rem; z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--fill); color: var(--fill-on);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  transition: top .12s ease;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* --- Masthead ------------------------------------------------------------ */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gut);
  display: flex; flex-wrap: wrap; align-items: stretch;
  position: relative;
}

.brand {
  display: flex; align-items: center;
  padding: 1rem 1.5rem 1rem 0;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.brand:hover { color: var(--ink); text-decoration: none; }
.brand__mark { display: none; }   /* Signal is wordmark-only */

.site-nav { display: flex; flex-wrap: wrap; margin-left: auto; }
.site-nav a {
  display: flex; align-items: center;
  padding: 1rem .75rem;
  font-size: .76rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2);
  border-left: 1px solid var(--rule-2);
  white-space: nowrap;
}
.site-nav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { background: var(--fill); color: var(--fill-on); }

/* --- Mobile menu: CSS-only disclosure ------------------------------------ */
/* The checkbox is the real control — visually transparent but focusable and
   sized to cover the button, so pointer and keyboard both land on it. */

.nav-toggle {
  position: absolute;
  top: 0; right: var(--gut);
  width: var(--bar); height: var(--bar);
  margin: 0; padding: 0;
  opacity: 0;
  z-index: 3;
  cursor: pointer;
  display: none;
}
.nav-toggle-ui {
  display: none;
  position: absolute; top: 0; right: var(--gut);
  width: var(--bar); height: var(--bar);
  z-index: 2;
  border-left: 1px solid var(--rule-2);
  align-items: center; justify-content: center;
  background: var(--bg);
}
.nav-toggle-ui span,
.nav-toggle-ui span::before,
.nav-toggle-ui span::after {
  display: block; width: 1.25rem; height: 2px;
  background: var(--ink);
  transition: transform .16s ease, opacity .1s ease;
}
.nav-toggle-ui span { position: relative; }
.nav-toggle-ui span::before,
.nav-toggle-ui span::after { content: ""; position: absolute; left: 0; }
.nav-toggle-ui span::before { top: -6px; }
.nav-toggle-ui span::after  { top:  6px; }

@media (max-width: 56rem) {
  .site-header__inner { padding-right: 0; }
  .brand { padding-right: var(--bar); height: var(--bar); }

  .nav-toggle, .nav-toggle-ui { display: flex; }

  .site-nav {
    display: none;
    margin-left: 0;
    width: 100%;
    flex-direction: column;
    border-top: 1px solid var(--rule);
  }
  .site-nav a {
    border-left: 0;
    border-bottom: 1px solid var(--rule-2);
    padding: .95rem var(--gut);
    font-size: .82rem;
  }
  .site-nav a:last-child { border-bottom: 0; }

  .nav-toggle:checked ~ .site-nav { display: flex; }

  /* Bars morph into a cross when open */
  .nav-toggle:checked ~ .nav-toggle-ui span { background: transparent; }
  .nav-toggle:checked ~ .nav-toggle-ui span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-ui span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* The checkbox carries focus; paint the ring on the visible button */
  .nav-toggle:focus-visible ~ .nav-toggle-ui { outline: 2px solid var(--blue); outline-offset: -2px; }
}

/* --- Layout -------------------------------------------------------------- */

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gut); }
main { display: block; padding-bottom: 5rem; }

.hero { border-bottom: 1px solid var(--rule); }
.hero__inner { max-width: var(--shell); margin: 0 auto; padding: 4rem var(--gut) 3rem; }
.hero .lede {
  font-size: 1.12rem; color: var(--ink-2);
  max-width: 44ch;
  border-left: 3px solid var(--accent); padding-left: 1rem;
}

/* Hero lockup: title, tagline, attribution, and a reserved photo slot. */
.hero__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 54rem) {
  .hero__inner--split { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
}

.hero__title {
  font-size: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);
  letter-spacing: -.04em;
  line-height: .95;
  margin: 0 0 .75rem;
}
.hero__tagline {
  font-size: clamp(1.05rem, .95rem + .55vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-2);
  max-width: 28ch;
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
}
/* Capped at the file's native 219px so it is never upscaled. */
.hero__logo {
  display: block;
  width: 100%;
  max-width: 219px;
  height: auto;
}

/* Footer lockup: logo beside the colophon, stacking on narrow screens. */
.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.footer-logo {
  flex: none;
  width: 132px;
  height: auto;
  display: block;
  padding: .5rem;
  background: #ffffff;
  border: 1px solid var(--rule-2);
}
.footer-brand .footer-note { margin-top: 0; flex: 1 1 20rem; }

.hero__credit {
  font-size: .78rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ink-3);
  max-width: 42ch;
  margin: 0;
}

/* Development-status flag. The device is a research prototype, so this must
   stay visible wherever the device is described. */
.status-flag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.5rem;
  padding: .45rem .75rem;
  background: var(--amber-bg);
  border-left: 4px solid var(--amber);
  color: var(--amber);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  max-width: none;
}
.status-flag::before {
  content: "";
  width: .5rem; height: .5rem; flex: none;
  background: var(--amber);
  border-radius: 50%;
}

/* Reserved space for the device photograph. Replace .hero__media entirely
   with <img src="assets/img/…" alt="…"> when the photo is available. */
.hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  border: 1px solid var(--rule-2);
  background: #ffffff;
}

.page-head {
  padding: 3.5rem 0 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
.page-head h1 { max-width: 16ch; }
.page-head p.lede {
  font-size: 1.12rem; color: var(--ink-2); max-width: 46ch;
  margin-bottom: 0;
  border-left: 3px solid var(--accent); padding-left: 1rem;
}

.eyebrow {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

section { scroll-margin-top: .3rem; padding-top: 3.25rem; }
section > h2 { padding-top: .9rem; border-top: 3px solid var(--fill); max-width: 22ch; }

/* Pointer band on the home page, aimed at the audience the hero does not
   address. Uses the green accent so it reads as a departure from the
   navy-led page furniture. */
.audience-band {
  margin: 2.5rem 0 0;
  padding: 1.1rem 1.3rem;
  background: var(--bg-2);
  border-left: 6px solid var(--accent);
}
.audience-band p { margin: 0; max-width: 68ch; font-size: .97rem; }
.audience-band strong { color: var(--ink); }
.audience-band a { font-weight: 700; white-space: nowrap; }

/* --- Combined audience pages --------------------------------------------- */
/* For Patients and For Clinicians group several former pages under one roof,
   so they need a heading level above the old one. .part is the top-level
   divider; inside .part-body, h3 and h4 take over the roles h2 and h3 played
   when these sections were separate pages. */

.part {
  font-size: clamp(1.8rem, 1.35rem + 2vw, 2.6rem);
  letter-spacing: -.032em;
  line-height: 1.05;
  max-width: none;
  padding-top: 1.1rem;
  margin-top: 1rem;
  border-top: 6px solid var(--fill);
}

.part-body > h3,
.part-body > section > h3 {
  font-size: clamp(1.3rem, 1.1rem + .85vw, 1.7rem);
  letter-spacing: -.02em;
  line-height: 1.12;
  max-width: 24ch;
  margin-top: 2.75rem;
  padding-top: .85rem;
  border-top: 2px solid var(--rule-2);
}
.part-body > section:first-of-type > h3,
.part-body > h3:first-child { margin-top: 1.75rem; }

.part-body h4 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.25;
  text-transform: none;
  color: var(--ink);
  margin-top: 1.9rem;
  margin-bottom: .5em;
}
.part-body .steps h4,
.part-body .card h4,
.part-body .placeholder h4 { margin-top: 0; }

/* Sections inside a part no longer need their own top rule. */
.part-body section { padding-top: 0; }
.part-body section > h3 { border-top: 2px solid var(--rule-2); }
.part-body .region > h3 { border-top: 0; padding-top: 0; }

/* --- Cards: a hard grid of bordered cells -------------------------------- */

.card-grid {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}

/* Because the cards are hard-bordered, a part-filled final row reads as a
   missing cell rather than as whitespace. On a six-column base every row holds
   three cards; where the count would leave a short last row, those cards widen
   to close it. Counts that need help: 2, 4, 5 and 8. */
@media (min-width: 58rem) {
  .card-grid--fill { grid-template-columns: repeat(6, 1fr); }
  .card-grid--fill > li { grid-column: span 2; }

  .card-grid--fill > li:first-child:nth-last-child(2),
  .card-grid--fill > li:first-child:nth-last-child(2) ~ li,
  .card-grid--fill > li:first-child:nth-last-child(4),
  .card-grid--fill > li:first-child:nth-last-child(4) ~ li,
  .card-grid--fill > li:first-child:nth-last-child(5) ~ li:nth-child(n+4),
  .card-grid--fill > li:first-child:nth-last-child(8) ~ li:nth-child(n+7) {
    grid-column: span 3;
  }
}
.card-grid li {
  max-width: none; margin: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
}
.card {
  display: flex; flex-direction: column; width: 100%;
  padding: 1.35rem 1.25rem 1.15rem;
  color: var(--ink);
}
a.card:hover { background: var(--blue); color: var(--on-fill); text-decoration: none; }
a.card:hover .card__num,
a.card:hover .card__go { color: var(--on-fill); }
a.card:hover p { color: rgba(255,255,255,.88); }
a.card:hover h3 { color: var(--on-fill); }

.card__icon { display: none; }   /* Signal uses no icon tiles */

.card__num {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .75rem;
}
.card h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.card p { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); max-width: none; }
.card__go { margin-top: auto; padding-top: 1.1rem; font-size: .8rem; font-weight: 700; color: var(--accent); }

/* --- Steps: number in a filled block ------------------------------------- */

.steps { list-style: none; counter-reset: step; margin: 1.75rem 0; padding: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 0 0 1.6rem 3.5rem;
  max-width: calc(var(--measure) + 3.5rem);
  margin: 0;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  width: 2.4rem; height: 1.55rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--fill); color: var(--fill-on);
  font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.steps h3 { margin: 0 0 .3rem; }
.steps p { margin-bottom: 0; font-size: .95rem; color: var(--ink-2); }
.steps p + p { margin-top: .5rem; }

/* --- Callouts: solid blocks ---------------------------------------------- */

.callout {
  margin: 1.75rem 0;
  padding: 1.15rem 1.3rem;
  background: var(--blue-bg);
  border-left: 6px solid var(--blue);
}
.callout > :last-child { margin-bottom: 0; }
.callout__title {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .5rem;
}
.callout p, .callout li { font-size: .95rem; max-width: 60ch; }

.callout--warn   { background: var(--amber-bg); border-left-color: var(--amber); }
.callout--warn   .callout__title { color: var(--amber); }
.callout--danger { background: var(--red-bg);   border-left-color: var(--red); }
.callout--danger .callout__title { color: var(--red); }
.callout--ok     { background: var(--green-bg); border-left-color: var(--green); }
.callout--ok     .callout__title { color: var(--green); }

/* --- Disclosure ---------------------------------------------------------- */

.clinical { margin: 1.75rem 0; border: 1px solid var(--rule); }
.clinical > summary {
  cursor: pointer; list-style: none;
  padding: .8rem 1rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-2);
  display: flex; align-items: center; gap: .7rem;
}
.clinical > summary::-webkit-details-marker { display: none; }
.clinical > summary::before {
  content: ""; width: .6rem; height: .6rem; flex: none; background: var(--blue);
}
.clinical[open] > summary::before { background: var(--fill); }
.clinical > summary:hover { background: var(--fill); color: var(--fill-on); }
.clinical > summary:hover::before { background: var(--fill-on); }
.clinical__body { padding: 1.15rem 1rem .2rem; border-top: 1px solid var(--rule); }
.clinical__body p, .clinical__body li { font-size: .95rem; color: var(--ink-2); }
.clinical__body > :last-child { margin-bottom: 0; padding-bottom: .9rem; }

/* --- Tables -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 1.75rem 0; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .92rem; }
/* Fixed layout pins the table to its container's width whatever the content,
   so it grows downward instead of overflowing sideways. break-word then only
   splits a word that genuinely cannot fit its column, unlike `anywhere`,
   which breaks every word once the columns get narrow. */
th, td { overflow-wrap: break-word; hyphens: auto; }
thead th:first-child { width: 23%; }
caption {
  caption-side: top; text-align: left;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: .8rem;
}
thead th {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--fill); color: var(--fill-on);
  padding: .55rem .85rem; text-align: left;
  vertical-align: bottom;
}
tbody th, tbody td {
  padding: .8rem .85rem;
  border-bottom: 1px solid var(--rule-2);
  text-align: left; vertical-align: top;
}

/* On phones the padding alone can outweigh the text, so buy back width. */
@media (max-width: 40rem) {
  table { font-size: .84rem; }
  thead th { padding: .5rem .45rem; letter-spacing: .02em; font-size: .62rem; }
  tbody th, tbody td { padding: .65rem .45rem; }
}
tbody th { font-weight: 700; }
tbody td { color: var(--ink-2); }

/* --- Figures ------------------------------------------------------------- */

figure { margin: 2.25rem 0; padding: 0; border: 1px solid var(--rule); }

/* Portrait: sits beside the prose on wider screens, above it on phones.
   Reuses the figure frame and caption bar. */
.portrait { max-width: 15rem; margin: .5rem 0 1.75rem; }
.portrait img { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) {
  .portrait { float: right; width: 15rem; margin: .35rem 0 1.25rem 2.25rem; }
}

/* Keep a floated figure from escaping its part and colliding with the
   next section's rule. */
.part-body::after { content: ""; display: block; clear: both; }
figure svg { display: block; width: 100%; height: auto; padding: 1.25rem; }
figcaption {
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
  font-size: .87rem; color: var(--ink-2); max-width: none;
}

/* Reserved image slots. Replace an .image-slot wholesale with an <img>
   once the artwork exists. */
.image-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 1.75rem 0;
}
@media (min-width: 42rem) {
  .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  border: 1px dashed var(--ink-3);
  background: var(--bg-2);
  text-align: center;
}
.image-slot span {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Diagram color hooks, so inline SVG follows light/dark automatically. */
.dg-surface { fill: var(--bg-2); }
.dg-line    { stroke: var(--ink-3); }
.dg-ink     { fill: var(--ink); }
.dg-soft    { fill: var(--ink-2); }
.dg-brand   { fill: var(--blue); }
.dg-brand-s { fill: var(--bg-3); }
.dg-warn    { fill: var(--amber); }
.dg-danger  { fill: var(--red); }
.dg-halo    { paint-order: stroke; stroke: var(--bg); stroke-width: 6px; stroke-linejoin: round; }

/* --- Placeholder --------------------------------------------------------- */

.placeholder {
  margin: 2rem 0;
  padding: 2.25rem 1.5rem;
  border: 1px dashed var(--ink-3);
  background: var(--bg-2);
  color: var(--ink-2);
}
.placeholder h3 { margin-top: 0; color: var(--ink); }
.placeholder p:last-child { margin-bottom: 0; }
.placeholder__tag {
  display: inline-block; margin-bottom: .9rem;
  padding: .25rem .6rem;
  background: var(--accent); color: var(--fill-on);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}

/* --- Regions (resources page) -------------------------------------------- */

.region { margin: 2.5rem 0; padding: 0 0 1.5rem; border-top: 3px solid var(--fill); }
.region > h2 {
  padding-top: .9rem; border-top: 0; margin-bottom: 1rem;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
}
.region__flag {
  font-size: .66rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--bg); background: var(--blue);
  padding: .2rem .5rem;
}

.link-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.link-list li {
  padding: .9rem 0; border-top: 1px solid var(--rule-2);
  max-width: none; margin: 0;
}
.link-list li:first-child { border-top: 0; }
.link-list a { font-weight: 700; }
.link-list .desc {
  display: block; font-size: .89rem; color: var(--ink-2);
  margin-top: .25rem; max-width: 64ch; line-height: 1.5;
}

/* --- Sources ------------------------------------------------------------- */

.sources {
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem; color: var(--ink-2);
}
.sources h2 {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border-top: 0; padding-top: 0; margin-bottom: .9rem;
}
.sources ol { padding-left: 1.6rem; }
.sources li { margin-bottom: .6rem; scroll-margin-top: .3rem; }

/* Section and sub-section headings are the in-page link targets. Aligning
   the heading box, rather than the section box, skips the section's 3.25rem
   top padding so the words land just under the masthead. */
h2.part[id], .part-body > h3[id], .part-body > section > h3[id] { scroll-margin-top: .3rem; }
.sources li:target { background: var(--blue-bg); outline: 3px solid var(--blue-bg); }

/* Inline reference markers, linking down to the numbered source list. */
.ref {
  font-size: .68em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  white-space: nowrap;
}
.ref a { text-decoration: none; padding: 0 .08em; }
.ref a:hover { text-decoration: underline; }
/* Consecutive markers need separating, or "3" then "2" reads as "32". */
.ref--seq::before { content: ","; color: var(--ink-3); }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 3px solid var(--fill);
  background: var(--bg);
  padding: 2.25rem 0 3rem;
  font-size: .88rem; color: var(--ink-2);
}
.site-footer strong { color: var(--ink); }
.disclaimer {
  padding: 1.1rem 1.25rem;
  background: var(--amber-bg);
  border-left: 6px solid var(--amber);
  max-width: none;
}
.disclaimer p { max-width: 62ch; margin: 0; font-size: .9rem; }
.footer-note {
  margin-top: 1.75rem;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Utilities ----------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.stack-lg > * + * { margin-top: 2rem; }
.text-soft { color: var(--ink-2); }

/* --- Print --------------------------------------------------------------- */

/* ====================================================================
   IN-PAGE SECTION NAVIGATION
   A sticky table of contents for long pages. Sits inside the normal
   64rem shell, so the masthead and page heading stay aligned with
   every other page; the prose column still clears the 38rem measure.
   The active-section highlight uses CSS scroll-driven animations,
   wrapped in @supports. Browsers without them get a plain sticky list
   that still links and still marks the clicked target.
   ==================================================================== */

.toc__title {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .6rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { max-width: none; margin: 0; }

.toc a {
  display: block;
  padding: .3rem 0 .3rem .8rem;
  border-left: 2px solid var(--rule-2);
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.3;
}
.toc a:hover,
.toc a:focus-visible { color: var(--ink); border-left-color: var(--ink-3); }

.toc__part > a { font-weight: 600; }

/* --- narrow screens: a plain list above the content ------------------ */
.toc {
  font-size: .86rem;
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-2);
}

/* --- wide screens: sticky sidebar ------------------------------------ */
@media (min-width: 64rem) {
  .toc-layout {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: 3.25rem;
    align-items: start;
  }
  /* The nav spans both rows so it can stay stuck for the whole page, and
     starts level with the page heading so it never travels before pinning. */
  .toc-layout > .page-head   { grid-column: 2; grid-row: 1; }
  .toc-layout > .toc         { grid-column: 1; grid-row: 1 / span 2; }
  .toc-layout > .toc-content { grid-column: 2; grid-row: 2; }
  .toc {
    position: sticky;
    top: calc(var(--bar) + 1.25rem);
    margin: 0;
    padding-bottom: 1rem;
    border-bottom: 0;
    font-size: .82rem;
  }
}

/* --- active section tracking ----------------------------------------- */
@supports (animation-timeline: view()) {
  @media (min-width: 64rem) {
    .toc-layout {
      timeline-scope: --sec-1, --sec-2, --sec-3, --sec-4, --sec-5,
                      --sec-6, --sec-7, --sec-8, --sec-9;
    }
    /* A thin band near the top of the viewport decides what counts as
       "current", so sections do not all light up at once. */
    .toc-content > section[id] {
      view-timeline-axis: block;
      view-timeline-inset: 12vh 82vh;
    }
    .toc-content > section:nth-of-type(1) { view-timeline-name: --sec-1; }
    .toc-content > section:nth-of-type(2) { view-timeline-name: --sec-2; }
    .toc-content > section:nth-of-type(3) { view-timeline-name: --sec-3; }
    .toc-content > section:nth-of-type(4) { view-timeline-name: --sec-4; }
    .toc-content > section:nth-of-type(5) { view-timeline-name: --sec-5; }
    .toc-content > section:nth-of-type(6) { view-timeline-name: --sec-6; }
    .toc-content > section:nth-of-type(7) { view-timeline-name: --sec-7; }
    .toc-content > section:nth-of-type(8) { view-timeline-name: --sec-8; }
    .toc-content > section:nth-of-type(9) { view-timeline-name: --sec-9; }

    .toc__part:nth-of-type(1) > a { animation-timeline: --sec-1; }
    .toc__part:nth-of-type(2) > a { animation-timeline: --sec-2; }
    .toc__part:nth-of-type(3) > a { animation-timeline: --sec-3; }
    .toc__part:nth-of-type(4) > a { animation-timeline: --sec-4; }
    .toc__part:nth-of-type(5) > a { animation-timeline: --sec-5; }
    .toc__part:nth-of-type(6) > a { animation-timeline: --sec-6; }
    .toc__part:nth-of-type(7) > a { animation-timeline: --sec-7; }
    .toc__part:nth-of-type(8) > a { animation-timeline: --sec-8; }
    .toc__part:nth-of-type(9) > a { animation-timeline: --sec-9; }

    .toc__part > a {
      animation-name: toc-current;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes toc-current {
  0%          { color: var(--ink-2); border-left-color: var(--rule-2); }
  0.5%, 99.5% { color: var(--fill);  border-left-color: var(--fill); }
  100%        { color: var(--ink-2); border-left-color: var(--rule-2); }
}

@media print {
  .toc { display: none; }
  :root {
    --bg: #fff; --bg-2: #fff; --ink: #000; --ink-2: #222; --ink-3: #555;
    --rule: #000; --rule-2: #999; --blue: #00c; --on-fill: #fff;
    --fill: #000; --fill-on: #fff; --accent: #000;
  }
  .site-header, .skip-link, .card__go, .nav-toggle, .nav-toggle-ui,
  .footer-logo { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .card-grid li, figure, .table-scroll, .callout, .clinical, .region { break-inside: avoid; }
  .clinical > summary { background: none; color: #000; }
  .clinical[open] .clinical__body { display: block; }
  a[rel~="external"]::after { content: " (" attr(href) ")"; font-size: .8em; font-weight: 400; }
}