/* ===========================================================================
   Nursepedia design system

   Forked from Vetpedia's stylesheet, repainted. Same component vocabulary
   (tokens, pills, chips, cards, prose) because that part is proven; a different
   palette because this is a different person's tool, not a reskin of hers.

   Direction, from the UI/UX Pro Max database:
     · Colour  — "High contrast navy + clinical blue". Slate-900 topbar, a
                 deepened sky-700 as the accent. Cool where Vetpedia is warm.
     · Surface — paper-like and high contrast, because this is a reading app.
     · Cards   — modular, content-first browse surfaces.
     · Type    — the "medical, clean, accessible, professional" pairing, built
                 from system fonts rather than a webfont: no network request
                 stands between a nurse and a number at 3am.

   The constraint that outranks all of it, stated in NURSEPEDIA.md:
   **legible at 3am, on a phone, under bad lighting.** That has one concrete
   consequence — the dark theme is designed first here and the light theme
   second, which is the reverse of Vetpedia. Night shift is when this gets used
   under pressure, so the dark palette gets the wider contrast margins.

   Everything is a token. No component below hardcodes a colour or a size.
   =========================================================================== */

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

:root {
  /* Spacing — 4px rhythm, no arbitrary increments */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Icons — three sizes, never an ad-hoc number */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* Accessibility */
  --tap-min: 44px;

  /* Motion */
  --t-fast: 150ms;
  --t-base: 200ms;
  --ease: cubic-bezier(.2, .6, .3, 1);

  /* Type */
  --text-scale: 1;
  --base-size: 17px;
  --measure: 68ch;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-read: ui-serif, "Iowan Old Style", Charter, Georgia,
               "Palatino Linotype", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Light theme: white and light blue ----
     His palette, and the answer to the P0 question the blueprint said to ask.
     Classic nursing colours: white surfaces, a light blue bar, a deeper blue
     for anything interactive.

     Not pure #fff for the page itself — a full-white field under hospital
     fluorescents is glare, which is the daytime version of the same legibility
     problem the dark theme solves at night. Cards are white; the page they sit
     on is a hair of blue off it. */
  --bg:          #f4f9fd;
  --surface:     #ffffff;
  --surface-2:   #e4eef7;
  --ink:         #0f1f2b;
  --ink-soft:    #3d5568;
  --ink-faint:   #566d80;
  --rule:        #cfe1f0;
  --rule-strong: #9dbfda;

  --primary:      #0b6ba3;
  --primary-ink:  #095984;
  --primary-soft: #d8ecfa;
  --on-primary:   #ffffff;

  /* The topbar inverts relative to Vetpedia: a LIGHT blue bar carrying dark
     text, rather than a dark bar carrying light text. Its children are all
     scoped to these four tokens, so the whole bar flips by changing them. */
  --topbar-bg:       #cfe6f7;
  --topbar-ink:      #0f1f2b;
  --topbar-ink-soft: #3f5b73;
  --topbar-surface:  rgba(255,255,255,.72);
  --topbar-rule:     rgba(11,107,163,.22);

  /* Clinical status. These carry expected/monitor/escalate as well as
     draft/reviewed, so they are the most load-bearing colours here — and every
     one is always paired with a word. Deliberately warm against the cool
     palette: a warning that blends into the theme is a warning nobody sees. */
  --normal:      #1d7449;
  --normal-soft: #dcefe4;
  --caution:     #8a5512;
  --caution-soft:#f7e9d6;
  --caution-rule:#d9b47e;
  --danger:      #b3261e;
  --danger-soft: #fae0dd;

  /* ---- The life-stage axis ----
     Six hues that stay apart at pill size, clear 4.5:1 on both white and the
     page, and avoid the three status colours. On a blue app they must also
     avoid the LINK blue — the old slate "adult" sat ΔE 11.8 from it, so an
     Adult pill read as a hyperlink. It is now a warm neutral, which also keeps
     the young→old progression running cool→warm. */
  --neonate:     #a3327a;
  --infant:      #6a48bd;
  --child:       #1f66b0;
  --adolescent:  #0c6f80;
  --adult:       #4a423a;
  --older-adult: #8a4636;

  --shadow-sm: 0 1px 2px rgba(15,31,43,.07);
  --shadow:    0 4px 10px rgba(15,31,43,.09);
  --shadow-lg: 0 10px 26px rgba(15,31,43,.16);
}

@media (min-width: 900px) { :root { --base-size: 16.5px; } }

/* ---- Dark theme: the 3am theme, and still designed first for legibility.
        Deep blue-black rather than void black, text under pure white. ---- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
}
:root[data-theme="auto"] { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] {
  --bg:          #0c161f;
  --surface:     #15212c;
  --surface-2:   #08111a;
  --ink:         #e6eef6;
  --ink-soft:    #b2c2d1;
  --ink-faint:   #8b9db0;
  --rule:        #22303f;
  --rule-strong: #37485c;

  --primary:      #6cc0f0;
  --primary-ink:  #8fd0f6;
  --primary-soft: #12283a;
  --on-primary:   #04121c;

  /* At night the bar goes dark and carries light text — the inverse of the day
     theme. Same app; the light blue survives as an accent rather than as a
     large glowing surface at 3am. */
  --topbar-bg:       #0a1420;
  --topbar-ink:      #e6eef6;
  --topbar-ink-soft: #9aacbf;
  --topbar-surface:  rgba(255,255,255,.09);
  --topbar-rule:     rgba(255,255,255,.14);

  --normal:      #63c98d;
  --normal-soft: #10241a;
  --caution:     #e0a95c;
  --caution-soft:#2b2011;
  --caution-rule:#5b4626;
  --danger:      #f08a80;
  --danger-soft: #2e1512;

  --neonate:     #ef8fc8;
  --infant:      #ab96f0;
  --child:       #74b4ee;
  --adolescent:  #4dc2d4;
  --adult:       #acb96e;
  --older-adult: #c2a68f;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 10px 26px rgba(0,0,0,.55);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:          #0c161f;
    --surface:     #15212c;
    --surface-2:   #08111a;
    --ink:         #e6eef6;
    --ink-soft:    #b2c2d1;
    --ink-faint:   #8b9db0;
    --rule:        #22303f;
    --rule-strong: #37485c;

    --primary:      #6cc0f0;
    --primary-ink:  #8fd0f6;
    --primary-soft: #12283a;
    --on-primary:   #04121c;

    /* At night the bar goes dark and carries light text — the inverse of the day
       theme. Same app; the light blue survives as an accent rather than as a
       large glowing surface at 3am. */
    --topbar-bg:       #0a1420;
    --topbar-ink:      #e6eef6;
    --topbar-ink-soft: #9aacbf;
    --topbar-surface:  rgba(255,255,255,.09);
    --topbar-rule:     rgba(255,255,255,.14);

    --normal:      #63c98d;
    --normal-soft: #10241a;
    --caution:     #e0a95c;
    --caution-soft:#2b2011;
    --caution-rule:#5b4626;
    --danger:      #f08a80;
    --danger-soft: #2e1512;

    --neonate:     #ef8fc8;
    --infant:      #ab96f0;
    --child:       #74b4ee;
    --adolescent:  #4dc2d4;
    --adult:       #acb96e;
    --older-adult: #c2a68f;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 4px 10px rgba(0,0,0,.45);
    --shadow-lg: 0 10px 26px rgba(0,0,0,.55);
  }
}

/* ------------------------------------------------------------------ base --- */

* { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
   The user agent's `[hidden] { display: none }` loses to ANY author rule that
   sets display — `.filters { display: flex }` and `.offline-badge { display:
   flex }` both silently defeated it, so the filter bar showed on entry and
   anatomy pages and "Offline — reading from cache" sat on screen permanently
   while online. app.js was setting `.hidden = true` correctly the whole time.
   The print stylesheet's `.section[hidden]` override is more specific, so it
   still wins where it needs to. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: calc(var(--base-size) * var(--text-scale));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1;
}

h1, h2, h3, h4 { font-weight: 640; letter-spacing: -.015em; line-height: 1.25; }

a { color: var(--primary-ink); text-underline-offset: 2px; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--primary); }

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--space-1);
}

::selection { background: var(--primary-soft); color: var(--primary-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--on-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ icons --- */

.icn { flex: 0 0 auto; display: block; }
.icn-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icn-md { width: var(--icon-md); height: var(--icon-md); }
.icn-lg { width: var(--icon-lg); height: var(--icon-lg); }

/* Life-stage marks carry their own colour wherever they appear. */
/* Life-stage marks carry their own colour wherever they appear. */
.st-neonate { color: var(--neonate); }
.st-infant { color: var(--infant); }
.st-child { color: var(--child); }
.st-adolescent { color: var(--adolescent); }
.st-adult { color: var(--adult); }
.st-older-adult { color: var(--older-adult); }

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

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg);
  color: var(--topbar-ink);
  border-bottom: 1px solid var(--topbar-rule);
  padding-top: env(safe-area-inset-top);
}

.topbar-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  max-width: 1240px; margin: 0 auto;
}

.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink); text-decoration: none;
  font-weight: 680; letter-spacing: -.02em;
  flex: 0 0 auto; min-height: var(--tap-min);
}
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--primary); }
.brand-text { font-size: 1.05rem; }
@media (max-width: 560px) { .brand-text { display: none; } }

/* ---- Everything inside the topbar sits on dark forest, so it inverts. ----
   Scoped to .topbar so the same components keep their normal colours when
   they appear in the page body. */
.topbar .brand, .topbar .brand:hover, .topbar .brand-mark { color: var(--topbar-ink); }
.topbar .search-icon, .topbar .in-field-btn { color: var(--topbar-ink-soft); }
.topbar .in-field-btn:hover { color: var(--topbar-ink); background: var(--topbar-surface); }

.topbar #q {
  color: var(--topbar-ink);
  background: var(--topbar-surface);
  border-color: var(--topbar-rule);
}
.topbar #q::placeholder { color: var(--topbar-ink-soft); }
.topbar #q:focus {
  border-color: var(--topbar-ink-soft);
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
}

.topbar .icon-btn {
  background: var(--topbar-surface); border-color: var(--topbar-rule); color: var(--topbar-ink);
}
.topbar .icon-btn:hover {
  color: var(--topbar-ink); border-color: var(--topbar-ink-soft);
  background: rgba(255,255,255,.22);
}
.topbar .icon-btn[aria-expanded="true"] {
  background: var(--topbar-ink); color: var(--topbar-bg); border-color: var(--topbar-ink);
}

.topbar .tab { color: var(--topbar-ink-soft); }
.topbar .tab .icn { color: currentColor; }
.topbar .tab:hover { background: var(--topbar-surface); color: var(--topbar-ink); }
.topbar .tab[aria-current="page"] { background: var(--topbar-ink); color: var(--topbar-bg); }
.topbar .tab .count { background: var(--topbar-surface); color: var(--topbar-ink); }
.topbar .tab[aria-current="page"] .count { background: var(--topbar-bg); color: var(--topbar-ink); }
.topbar .tab.accent .count,
.topbar .tab.accent[aria-current="page"] .count { background: var(--primary); color: var(--on-primary); }
.topbar .tab-sep { background: var(--topbar-rule); }

.topbar .filters { border-top-color: var(--topbar-rule); }
.topbar .filter-legend { color: var(--topbar-ink-soft); }
.topbar .chip {
  background: var(--topbar-surface); border-color: var(--topbar-rule); color: var(--topbar-ink);
}
.topbar .chip[aria-pressed="true"] {
  background: var(--topbar-ink); border-color: var(--topbar-ink); color: var(--topbar-bg);
}
.topbar .chip[aria-pressed="true"] .chip-count { color: var(--topbar-bg); }
.topbar .link-btn { color: var(--topbar-ink); }

.search-wrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }

.search-icon {
  position: absolute; left: var(--space-3); color: var(--ink-faint);
  pointer-events: none;
}

#q {
  width: 100%;
  font-size: .95rem;
  padding: var(--space-3) calc(var(--space-4) * 2.2) var(--space-3) calc(var(--space-4) + var(--icon-md));
  min-height: var(--tap-min);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-full);
  appearance: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#q::placeholder { color: var(--ink-faint); }
#q:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
#q::-webkit-search-cancel-button { display: none; }

.in-field-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: var(--r-full);
  border: 0; background: transparent; color: var(--ink-faint);
  display: grid; place-items: center;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.in-field-btn:hover { color: var(--ink); background: var(--surface-2); }
#clear-q { right: var(--space-1); }

.icon-btn {
  flex: 0 0 auto;
  width: var(--tap-min); height: var(--tap-min);
  display: grid; place-items: center;
  border: 1px solid var(--rule-strong); border-radius: var(--r-full);
  background: var(--surface); color: var(--ink-soft);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--primary-ink); border-color: var(--primary); }
.icon-btn[aria-expanded="true"] { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); }

/* ------------------------------------------------------------------ tabs --- */

.tabs { max-width: 1240px; margin: 0 auto; position: relative; }
.tabs-scroll {
  display: flex; gap: var(--space-1);
  overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--space-4) var(--space-2);
  scroll-snap-type: x proximity;
}
.tabs-scroll::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  border: 0; background: transparent;
  color: var(--ink-soft); font-size: .875rem; font-weight: 500;
  border-radius: var(--r-sm);
  text-decoration: none; white-space: nowrap;
  scroll-snap-align: start;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab[aria-current="page"] {
  background: var(--primary-soft); color: var(--primary-ink); font-weight: 620;
}
.tab .icn { color: var(--ink-faint); }
.tab:hover .icn, .tab[aria-current="page"] .icn { color: currentColor; }
.tab .count {
  font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--ink-faint); background: var(--surface-2);
  padding: 1px var(--space-2); border-radius: var(--r-full); min-width: 20px; text-align: center;
}
.tab[aria-current="page"] .count { background: var(--surface); color: var(--primary-ink); }
.tab.accent .count { background: var(--primary); color: var(--on-primary); }
.tab.accent[aria-current="page"] .count { background: var(--primary); color: var(--on-primary); }
.tab-sep {
  flex: 0 0 auto; width: 1px; align-self: stretch;
  background: var(--rule); margin: var(--space-1) var(--space-2);
}

/* Theme switch lives in the topbar, as the comp has it — so it inverts. */
.topbar-seg { flex: 0 0 auto; background: var(--topbar-surface); border-color: var(--topbar-rule); }
.topbar-seg button { color: var(--topbar-ink-soft); }
.topbar-seg button[aria-pressed="true"] {
  background: var(--topbar-ink); color: var(--topbar-bg); box-shadow: none;
}
@media (max-width: 760px) { .topbar-seg { display: none; } }

.tabs-label {
  flex: 0 0 auto; padding-left: var(--space-4);
  font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--topbar-ink-soft);
}
.tabs { display: flex; align-items: center; gap: var(--space-2); }
.tabs .tabs-scroll { flex: 1 1 auto; padding-left: 0; }

/* ☰ section grid — the design comp's default navigation. All 15 reference
   sections visible at once, which a horizontally scrolling strip could never
   manage on a phone. */
.nav-panel { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-4) var(--space-3); }
.nav-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px; padding: var(--space-2);
  background: var(--topbar-surface);
  border: 1px solid var(--topbar-rule); border-radius: var(--r-md);
}
.nav-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); min-height: var(--tap-min);
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--topbar-ink); font-size: .875rem; font-weight: 500;
  text-decoration: none; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item:hover { background: rgba(255,255,255,.16); color: var(--topbar-ink); }
.nav-item[aria-current="page"] { background: var(--topbar-ink); color: var(--topbar-bg); }
.nav-item .icn { color: currentColor; }
.nav-item .count {
  margin-left: auto; font-size: .72rem; font-variant-numeric: tabular-nums;
  padding: 0 var(--space-2); border-radius: var(--r-full);
  background: rgba(255,255,255,.16); color: var(--topbar-ink);
}
.nav-item[aria-current="page"] .count { background: var(--topbar-bg); color: var(--topbar-ink); }

/* --------------------------------------------------------------- filters --- */

/* Filters sit on the page, not in the topbar. The comp keeps the dark bar for
   identity and navigation only; stacking three rows of chips up there pushed
   the actual content most of the way down the screen. */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  margin: 0 0 var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--r-md);
}
.filter-group { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.filter-group + .filter-group { border-left: 1px solid var(--rule); padding-left: var(--space-3); }
.filter-legend {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-faint); font-weight: 700; margin-right: var(--space-1);
}

/* Chips meet the 44px tap minimum via an invisible hit area, so the visual
   density stays tight without failing the touch-target rule. */
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink-soft);
  font-size: .8rem; font-weight: 500; line-height: 1.4;
  padding: var(--space-1) var(--space-3);
  min-height: 30px;
  border-radius: var(--r-full);
  white-space: nowrap; text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.chip::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: var(--tap-min); transform: translateY(-50%);
}
.chip:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--surface-2); }
.chip[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600;
}
.chip[aria-pressed="true"] .chip-count { color: var(--on-primary); opacity: .85; }
.chip-count { font-size: .7rem; opacity: .7; font-variant-numeric: tabular-nums; }

.link-btn {
  border: 0; background: none; color: var(--primary-ink);
  font-size: .82rem; text-decoration: underline;
  padding: var(--space-2); min-height: var(--tap-min);
}

/* ------------------------------------------------------------ more panel --- */

.more-panel {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-lg);
  max-height: 88vh; overflow-y: auto;
  padding-top: env(safe-area-inset-top);
}
.more-inner {
  max-width: 1240px; margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.more-panel h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); margin: 0 0 var(--space-3); font-weight: 700;
}
.more-links { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.more-link {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3); border-radius: var(--r-sm);
  border: 0; background: none; color: var(--ink);
  font-size: .92rem; text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.more-link:hover { background: var(--surface-2); color: var(--primary-ink); }
.more-link .icn { color: var(--ink-faint); }
.more-link:hover .icn { color: var(--primary); }

.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3); font-size: .9rem;
  min-height: var(--tap-min);
}
.setting-note { font-size: .82rem; color: var(--ink-faint); margin: 0 0 var(--space-3); }

.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-full);
}
.seg button {
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: .8rem; font-weight: 600;
  padding: var(--space-2) var(--space-3); min-height: 34px;
  border-radius: var(--r-full);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button[aria-pressed="true"] {
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: .875rem; font-weight: 550;
  padding: var(--space-2) var(--space-4);
  min-height: var(--tap-min);
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.btn:hover:not(:disabled) {
  border-color: var(--primary); color: var(--primary-ink); background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.btn:active:not(:disabled) { box-shadow: none; }
.btn:disabled { opacity: .45; }
.btn .icn { color: currentColor; }

.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover:not(:disabled) {
  color: var(--on-primary); background: color-mix(in srgb, var(--primary) 88%, var(--ink));
  border-color: transparent; box-shadow: var(--shadow);
}
.btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.btn.subtle { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn.subtle:hover { background: var(--surface-2); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn.wide { width: 100%; margin-top: var(--space-4); }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.danger-row { margin-top: var(--space-6); }

/* ------------------------------------------------------------------ main --- */

main { max-width: 1240px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); }
main:focus { outline: none; }
@media (min-width: 768px) { main { padding-inline: var(--space-5); } }
@media (min-width: 1024px) { main { padding-inline: var(--space-6); } }

.loading { color: var(--ink-faint); }
.muted { color: var(--ink-faint); }

.page-head { margin-bottom: var(--space-5); }
.page-head h1 { font-size: 1.6rem; margin: 0 0 var(--space-2); }
.page-head p { margin: 0; color: var(--ink-soft); font-size: .94rem; max-width: var(--measure); }

.result-count { color: var(--ink-faint); font-size: .85rem; margin: 0 0 var(--space-4); }

.section-title {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
}
.section-title:first-of-type { margin-top: 0; }

/* ------------------------------------------------------------------ hero --- */

.hero {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  margin: 0 0 var(--space-5);
  box-shadow: var(--shadow);
}
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--neonate), var(--child), var(--adult), var(--older-adult));
}
.hero h1 { font-size: 1.45rem; margin: var(--space-2) 0 var(--space-2); }
.hero p { margin: 0 0 var(--space-4); color: var(--ink-soft); font-size: .94rem; max-width: 62ch; }

/* Hero, per the design comp: eyebrow → welcome → lede → counts → two CTAs. */
.hero .eyebrow {
  margin: 0 0 var(--space-2);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-ink);
}
.hero h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.1rem); margin: 0 0 var(--space-3); }
.hero-lede { max-width: 62ch; color: var(--ink-soft); margin: 0 0 var(--space-5); }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5);
}

.stats { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.hero-stats { margin: 0 0 var(--space-5); }
.stat { min-width: 62px; }
a.stat { text-decoration: none; color: inherit; border-radius: var(--r-sm); }
a.stat:hover b { color: var(--primary-ink); }
.stat b {
  display: block; font-size: 1.4rem; line-height: 1.15;
  font-variant-numeric: tabular-nums; font-weight: 660;
  transition: color var(--t-fast) var(--ease);
}
.stat span {
  font-size: .72rem; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}

.callout {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center; justify-content: space-between;
  background: var(--primary-soft); border: 1px solid var(--primary);
  border-radius: var(--r-md); padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
}
.callout-body { display: flex; gap: var(--space-3); align-items: flex-start; min-width: 0; }
.callout .icn { color: var(--primary-ink); margin-top: 2px; }
.callout p { margin: var(--space-1) 0 0; font-size: .88rem; color: var(--ink-soft); max-width: 54ch; }
.callout strong { color: var(--primary-ink); }

.disclaimer {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: .85rem; color: var(--ink-soft);
  background: var(--caution-soft); border-left: 3px solid var(--caution-rule);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-5);
}
.disclaimer .icn { color: var(--ink-faint); margin-top: 2px; }

/* ----------------------------------------------------------------- cards --- */

.card-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.card-grid.tight { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--space-4);
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.card:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.card:active { transform: none; }

.card-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.card-head .icn { color: var(--ink-faint); margin-top: 3px; }
.card h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.card .summary {
  margin: 0; font-size: .87rem; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.card .snippet { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.card .snippet mark {
  background: var(--primary-soft); color: var(--primary-ink);
  padding: 0 .15em; border-radius: 3px; font-weight: 600;
}
.card.compact { padding: var(--space-3) var(--space-4); }
.card.compact .summary { -webkit-line-clamp: 2; line-clamp: 2; }
.count-inline {
  font-size: .72rem; font-weight: 600; color: var(--ink-faint);
  /* `margin-left:auto` only works in a flex parent; these sit inside a plain
     <h3>, where it silently did nothing and the count ran into the label. */
  margin-left: var(--space-2); font-variant-numeric: tabular-nums;
}

.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin-top: auto; }

/* Status is never colour alone — every pill carries a word or a glyph. */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: .7rem; font-weight: 650; letter-spacing: .01em;
  padding: 2px var(--space-2); border-radius: var(--r-full);
  border: 1px solid currentColor; white-space: nowrap;
}
.pill .icn { width: 12px; height: 12px; }
.pill.type { color: var(--ink-faint); }
.pill.stage-neonate { color: var(--neonate); }
.pill.stage-infant { color: var(--infant); }
.pill.stage-child { color: var(--child); }
.pill.stage-adolescent { color: var(--adolescent); }
.pill.stage-adult { color: var(--adult); }
.pill.stage-older-adult { color: var(--older-adult); }
.pill.draft { color: var(--caution); background: var(--caution-soft); border-color: var(--caution-rule); }
.pill.reviewed { color: var(--normal); background: var(--normal-soft); }
.pill.saved { color: var(--caution); }
.pill.noted { color: var(--primary); }
.pill.severity { color: var(--danger); background: var(--danger-soft); }
.pill.auto { color: var(--ink-faint); }

/* ---------------------------------------------------------------- reader --- */

.entry { max-width: var(--measure); }
.entry-wide { max-width: none; }

.crumbs {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: .82rem; color: var(--ink-faint); margin: 0 0 var(--space-2);
}
.crumbs a { color: var(--ink-faint); }
.crumbs a:hover { color: var(--primary); }

.entry-head { margin-bottom: var(--space-4); }
.entry-head h1 { font-size: 1.7rem; margin: 0 0 var(--space-2); letter-spacing: -.025em; }
.entry-head .summary { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 var(--space-3); }

/* Loud on purpose. Never subtle. */
.draft-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--caution-soft);
  border: 1px solid var(--caution-rule);
  border-left: 4px solid var(--caution);
  border-radius: var(--r-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: .88rem;
}
.draft-banner strong { color: var(--caution); }
.draft-banner .icn { color: var(--caution); margin-top: 2px; }

/* The positive counterpart. Without it, marking an entry reviewed only made a
   warning disappear, which is indistinguishable from the edit not working. */
.reviewed-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--normal-soft);
  border: 1px solid var(--normal);
  border-left: 4px solid var(--normal);
  border-radius: var(--r-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: .88rem;
}
.reviewed-banner strong { color: var(--normal); }
.reviewed-banner .icn { color: var(--normal); margin-top: 2px; }

.entry-dates {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: .8rem; color: var(--ink-faint);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: var(--space-3) 0; margin: 0 0 var(--space-5);
}
.entry-dates b { color: var(--ink-soft); font-weight: 600; }
.vol { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 650; }
.vol-stable   { color: var(--normal); }
.vol-periodic { color: var(--caution); }
.vol-volatile { color: var(--danger); }

.detail-table { margin: 0 0 var(--space-5); overflow-x: auto; }
.detail-table table { border-collapse: collapse; width: 100%; font-size: .86rem; }
.detail-table th {
  text-align: left; vertical-align: top; font-weight: 620; color: var(--ink-soft);
  padding: var(--space-2) var(--space-4) var(--space-2) 0; white-space: nowrap; width: 1%;
}
.detail-table td { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.detail-table tr:last-child td, .detail-table tr:last-child th { border-bottom: 0; }

.signs-strip { margin: 0 0 var(--space-5); }
.signs-strip h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); margin: 0 0 var(--space-2); font-weight: 700;
}

/* mode toggle */
.mode-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border-radius: var(--r-full);
  border: 1px solid var(--rule);
  margin: 0 0 var(--space-5);
}
.mode-toggle button {
  display: inline-flex; align-items: center; gap: var(--space-1);
  border: 0; background: transparent; color: var(--ink-soft);
  font-size: .82rem; font-weight: 620;
  padding: var(--space-2) var(--space-4); min-height: 36px;
  border-radius: var(--r-full);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.mode-toggle button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
.mode-toggle button[data-mode="normal"][aria-pressed="true"]   { color: var(--normal); }
.mode-toggle button[data-mode="abnormal"][aria-pressed="true"] { color: var(--danger); }
.mode-toggle button[data-mode="both"][aria-pressed="true"]     { color: var(--ink); }

/* ------------------------------------------------------------------ prose --- */

.prose { font-family: var(--font-read); font-size: 1.03rem; line-height: 1.72; }
.prose h2 {
  font-family: var(--font);
  font-size: 1.16rem; margin: var(--space-6) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 6.5rem;
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-family: var(--font); font-size: 1.02rem; margin: var(--space-5) 0 var(--space-2); }
.prose p { margin: 0 0 var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin: 0 0 var(--space-2); }
.prose li::marker { color: var(--ink-faint); }
.prose li > ul, .prose li > ol { margin: var(--space-2) 0 var(--space-1); }
.prose strong { font-weight: 680; color: var(--ink); }
.prose code {
  font-family: var(--font-mono); font-size: .87em;
  background: var(--surface-2); padding: .1em .35em; border-radius: var(--space-1);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-6) 0; }

.prose blockquote {
  margin: var(--space-5) 0; padding: var(--space-4);
  background: var(--surface-2);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .96rem;
}
.prose blockquote > :first-child { margin-top: 0; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose blockquote h2 { border-top: 0; padding-top: 0; margin: 0 0 var(--space-3); font-size: 1.02rem; }

.table-scroll { overflow-x: auto; margin: 0 0 var(--space-5); border-radius: var(--r-sm); }
.prose table {
  border-collapse: collapse; width: 100%;
  font-family: var(--font); font-size: .87rem; line-height: 1.5;
}
.prose th, .prose td {
  text-align: left; vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.prose th { font-weight: 650; color: var(--ink); background: var(--surface-2); position: sticky; top: 0; }
.prose tbody tr { transition: background var(--t-fast) var(--ease); }
.prose tbody tr:hover { background: var(--surface-2); }

.wikilink { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.wikilink:hover { text-decoration-color: var(--primary); }
.wikilink.broken { color: var(--danger); text-decoration: underline wavy; cursor: help; }

/* Section mode: a coloured rule AND a label, never colour alone. */
.section[data-mode="normal"]   > h2 { border-left: 3px solid var(--normal); padding-left: var(--space-3); margin-left: calc(var(--space-3) * -1); }
.section[data-mode="abnormal"] > h2 { border-left: 3px solid var(--danger); padding-left: var(--space-3); margin-left: calc(var(--space-3) * -1); }
.section[hidden] { display: none; }

/* --------------------------------------------------------------- related --- */

.related { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 2px solid var(--rule); }
.related h2 { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; margin: 0 0 var(--space-3); }
.related + .related { margin-top: var(--space-5); }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.chip-list a {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: .82rem; text-decoration: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-full);
  padding: var(--space-1) var(--space-3); min-height: 32px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip-list a:hover { border-color: var(--primary); color: var(--primary-ink); }

/* --------------------------------------------------------------- compare --- */

.compare-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-4); }
.compare-controls select {
  font-size: .9rem; padding: var(--space-2) var(--space-3);
  min-height: var(--tap-min);
  border-radius: var(--r-sm); border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink);
}
.section-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }

.compare-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.compare-col {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 0 var(--space-4) var(--space-4);
  min-width: 0;
}
.compare-col[data-stage="neonate"] { border-top-color: var(--neonate); }
.compare-col[data-stage="infant"] { border-top-color: var(--infant); }
.compare-col[data-stage="child"] { border-top-color: var(--child); }
.compare-col[data-stage="adolescent"] { border-top-color: var(--adolescent); }
.compare-col[data-stage="adult"] { border-top-color: var(--adult); }
.compare-col[data-stage="older-adult"] { border-top-color: var(--older-adult); }

.compare-col > .col-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--surface); z-index: 1;
}
.col-head-name { display: flex; align-items: center; gap: var(--space-2); }
.compare-col .col-head h3 { margin: 0; font-size: .98rem; }
.compare-col .col-head a { font-size: .78rem; white-space: nowrap; }
.compare-col .prose { font-size: .95rem; }
.compare-col .prose h2 { display: none; }
.compare-col .prose table { font-size: .82rem; }
.compare-hint {
  font-size: .85rem; color: var(--ink-soft);
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4); margin: var(--space-4) 0 0;
}

/* -------------------------------------------------------------- personal --- */

.notes-block {
  margin-top: var(--space-6); padding: var(--space-5);
  border: 2px dashed var(--rule-strong); border-radius: var(--r-md);
  background: var(--surface);
}
.notes-block h2 { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; margin: 0 0 var(--space-2); color: var(--primary-ink); }
.notes-hint { font-size: .82rem; color: var(--ink-faint); margin: 0 0 var(--space-3); max-width: 62ch; }
.notes-input {
  width: 100%; font-size: .93rem; line-height: 1.65;
  padding: var(--space-3); border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong); background: var(--bg); color: var(--ink);
  resize: vertical; min-height: 6rem;
  transition: border-color var(--t-fast) var(--ease);
}
.notes-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.notes-meta { font-size: .75rem; color: var(--ink-faint); margin: var(--space-2) 0 0; min-height: 1em; }

.note-list { display: grid; gap: var(--space-3); }
.note-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md); padding: var(--space-4);
}
.note-card h3 { margin: 0 0 var(--space-2); font-size: .98rem; }
.note-body { margin: 0 0 var(--space-2); font-size: .9rem; white-space: pre-wrap; }

/* ------------------------------------------------- differentials / lists --- */

.stage-heading {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: .92rem; margin: var(--space-5) 0 var(--space-3);
  padding-left: var(--space-3); border-left: 3px solid currentColor;
}
.stage-heading.stage-neonate { color: var(--neonate); }
.stage-heading.stage-infant { color: var(--infant); }
.stage-heading.stage-child { color: var(--child); }
.stage-heading.stage-adolescent { color: var(--adolescent); }
.stage-heading.stage-adult { color: var(--adult); }
.stage-heading.stage-older-adult { color: var(--older-adult); }
.stage-heading.stage-unspecified { color: var(--ink-faint); }

.az-jump { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-5); }
.az-jump .chip { min-width: 36px; justify-content: center; }
.az-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.az-list li {
  display: flex; justify-content: space-between; gap: var(--space-4); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); min-height: var(--tap-min);
}
.az-list li > a { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; }
.az-type { font-size: .75rem; color: var(--ink-faint); white-space: nowrap; }

/* ------------------------------------------------------------- dashboard --- */

table.matrix { border-collapse: collapse; width: 100%; font-size: .86rem; margin-bottom: var(--space-5); }
table.matrix th, table.matrix td { border: 1px solid var(--rule); padding: var(--space-2) var(--space-3); text-align: center; }
table.matrix thead th, table.matrix tbody th { background: var(--surface-2); text-align: left; font-weight: 650; }
table.matrix td.has { background: var(--normal-soft); font-weight: 650; }
table.matrix td.has a { color: var(--normal); text-decoration: none; }
table.matrix td.gap { background: transparent; }

/* ----------------------------------------------------------------- tools --- */

.calc { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--space-5); margin: 0 0 var(--space-4); }
.calc h2 { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; margin: 0 0 var(--space-2); }
.calc .muted { font-size: .84rem; margin: 0 0 var(--space-4); max-width: 62ch; }
.calc-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.calc-out { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.calc-headline { font-size: 1.3rem; font-weight: 660; margin: 0 0 var(--space-2); color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.calc-working { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft); margin: 0; }
.convert-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); min-height: var(--tap-min); }
.convert-row:last-child { border-bottom: 0; }
.convert-label { font-size: .84rem; color: var(--ink-soft); width: 7rem; font-weight: 600; }
.convert-row input {
  font-size: .9rem; width: 6.5rem; color: var(--ink); min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3); border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong); background: var(--bg);
}
.convert-eq { color: var(--ink-faint); }

/* ----------------------------------------------------------------- empty --- */

.empty {
  border: 1px dashed var(--rule-strong); border-radius: var(--r-md);
  padding: var(--space-6) var(--space-5); color: var(--ink-soft); font-size: .92rem;
  background: var(--surface-2);
}
.empty h2 { margin: 0 0 var(--space-2); font-size: 1.05rem; color: var(--ink); }
.empty p { margin: 0 0 var(--space-2); max-width: 60ch; }
.empty p:last-child { margin-bottom: 0; }
.empty code { font-family: var(--font-mono); font-size: .87em; background: var(--surface); padding: .1em .35em; border-radius: var(--space-1); }

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

.footer {
  max-width: 1240px; margin: 0 auto;
  padding: var(--space-5) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--ink-faint);
}
.footer .primacy { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-2); max-width: 72ch; }
.footer .primacy strong { color: var(--ink-soft); }
.footer .primacy .icn { color: var(--caution); margin-top: 2px; }
.build-meta { margin: 0; font-variant-numeric: tabular-nums; }

.offline-badge, .toast {
  position: fixed; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  font-size: .82rem; font-weight: 500;
  padding: var(--space-2) var(--space-4); border-radius: var(--r-full);
  z-index: 50; box-shadow: var(--shadow-lg); max-width: 90vw;
  display: flex; align-items: center; gap: var(--space-2);
}
.toast { z-index: 60; }

/* ----------------------------------------------------------------- print --- */

.print-list li { margin-bottom: var(--space-3); }
.print-footer { font-size: .8rem; color: var(--ink-faint); margin-top: var(--space-6); }

@media print {
  .topbar, .footer, .mode-toggle, .offline-badge, .toast, .related,
  .notes-block, .row-actions, .more-panel, .no-print { display: none !important; }
  .page-break { break-before: page; }
  .print-sheet, .prose { font-size: 11pt; }
  .print-list li, .card { break-inside: avoid; }
  .section[hidden] { display: block !important; }
  a { text-decoration: none; color: inherit; }
}

/* ------------------------------------------------------- start / shortcuts --- */

.step-num {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.shortcut-table th, .shortcut-table td { text-align: left; }
.shortcut-table th { width: 1%; white-space: nowrap; }
kbd {
  display: inline-block;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  padding: 2px var(--space-2);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: var(--space-1);
}

/* ------------------------------------------------------------ 3D anatomy --- */

.anatomy-controls { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }

.anatomy-stage {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 40%, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 320px;
}
@media (max-width: 640px) { .anatomy-stage { aspect-ratio: 4 / 3; } }




.swatch {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--rule-strong); margin-top: 3px;
}

.anatomy-card { text-align: left; font: inherit; cursor: pointer; }
.anatomy-card .card-head { align-items: flex-start; }

@media print { .anatomy-stage, .anatomy-controls { display: none; } }

/* --------------------------------------------------- high-detail embeds --- */

.high-detail { margin-top: var(--space-6); }

.embed-stage {
  position: relative;
  /* width must be explicit: with only aspect-ratio set, capping the height made
     the browser derive the WIDTH from it too, shrinking the viewer and leaving
     a dead gap down the right of the page. */
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 300px;
  /* Capped. The viewer sits at the top of the page now, and at 16:10 across a
     wide window an *empty* placeholder was taking the whole viewport — so the
     page opened on a large blank box with everything else below the fold.
     Prominent, not monopolising. */
  max-height: min(58vh, 540px);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 640px) { .embed-stage { aspect-ratio: 4 / 3; } }

.embed-frame { width: 100%; height: 100%; border: 0; display: block; }

.embed-placeholder {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  color: var(--ink-faint); text-align: center; padding: var(--space-5);
}
.embed-placeholder p { margin: 0; max-width: 44ch; font-size: .9rem; }

.embed-credit {
  font-size: .82rem; color: var(--ink-soft);
  padding: var(--space-3) 0; min-height: 1.5rem;
}
.embed-credit p { margin: 0 0 var(--space-1); }
.licence-warn {
  display: flex; align-items: flex-start; gap: var(--space-2);
  color: var(--caution); font-weight: 550;
}

.embed-picker { margin-bottom: var(--space-3); }

.embed-add {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.embed-input {
  flex: 1 1 16rem; min-width: 0;
  font-size: .9rem; color: var(--ink); min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm); border: 1px solid var(--rule-strong);
  background: var(--bg);
}
.embed-input.short { flex: 0 1 10rem; }
.embed-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }

@media print { .high-detail { display: none; } }

/* embed picker — grouped so gaps in the catalogue are visible, not silent */
.embed-groups { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.embed-group {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--rule);
}
.embed-group:last-child { border-bottom: 0; }
.embed-group .switch-label { min-width: 6.5rem; }
.embed-empty { font-size: .82rem; color: var(--ink-faint); font-style: italic; }

/* scan picker — hundreds of models per species, so: tabs, a filter, a list.
   The list scrolls inside itself rather than pushing the viewer off-screen. */
.anatomy-picker { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.scan-filter {
  width: 100%; padding: var(--space-2) var(--space-3);
  font: inherit; font-size: .9rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); min-height: var(--tap-min);
}
.scan-filter:focus {
  border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft);
}
.filter-count { margin: 0; font-size: .8rem; }

.scan-list {
  display: block;
  max-height: 30rem; overflow-y: auto;
  padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface-2);
}
.scan-chip {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; min-height: var(--tap-min); max-width: 100%;
}
.scan-name { overflow-wrap: anywhere; }
/* The English gloss for the German and Spanish collections. */
.scan-gloss { font-size: .74rem; color: var(--ink-faint); font-style: italic; }
.scan-chip[aria-pressed='true'] .scan-gloss { color: inherit; opacity: .8; }

.embed-stage { position: relative; }
.embed-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.spin { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* Connectivity-driven mode: one stage, one honest status line. */
.anatomy-status {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: .84rem; color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.anatomy-status .icn { color: var(--primary); }
.anatomy-controls .seg button:disabled { opacity: .4; cursor: not-allowed; }
.anatomy-controls .link-btn { padding: 0 var(--space-2); min-height: auto; }

/* Loading/error overlay sits on top of the iframe. The iframe is never
   re-parented — doing so makes the browser reload it, which fires load again
   and loops. */
.embed-placeholder.is-overlay {
  position: absolute; inset: 0; z-index: 2;
  background: var(--surface-2);
}

/* ======================================================================== */
/*  Nursepedia additions — the components this app has and Vetpedia doesn't  */
/* ======================================================================== */

/* --------------------------------------------------------------- fields --- */
/* Used by the calculators. (Vetpedia declared these inside its quiz form; the
   quiz is gone, the form controls are still needed.) */

.field-row {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: var(--space-4);
}
.field {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-size: .78rem; color: var(--ink-soft); font-weight: 600;
}
.field select, .field input {
  font-size: .9rem; color: var(--ink); font-weight: 400;
  padding: var(--space-2) var(--space-3); min-height: var(--tap-min);
  border-radius: var(--r-sm); border: 1px solid var(--rule-strong);
  background: var(--bg);
}
.field select:focus, .field input:focus {
  border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft);
}

/* --------------------------------------------------- the standing notice --- */
/* NURSEPEDIA.md: "the disclaimer is a feature, not a footer". It sits in the
   app shell, above the content, on every route — not on an about page, and not
   only in the footer where a scrolled reader never sees it. */

.primacy-bar {
  position: sticky; top: 0; z-index: 15;
  display: flex; gap: var(--space-2); align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--caution-soft);
  border-bottom: 1px solid var(--caution-rule);
  color: var(--ink);
  font-size: .8rem; line-height: 1.4;
}
.primacy-bar .icn { color: var(--caution); flex: 0 0 auto; }
.primacy-bar strong { color: var(--caution); }
.primacy-bar p { margin: 0; max-width: 90ch; }

/* ---------------------------------------------------------- stage table --- */
/* The cross-stage values table: the flagship view. One parameter per row, one
   life stage per column, so "normal respiratory rate" reads as the six
   different numbers it actually is. */

.stage-table { margin: 0 0 var(--space-5); }
.stage-table .table-scroll { margin-bottom: var(--space-2); }
.stage-table table {
  border-collapse: collapse; width: 100%;
  font-family: var(--font); font-size: .86rem; line-height: 1.5;
}
.stage-table th, .stage-table td {
  text-align: left; vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.stage-table th:last-child, .stage-table td:last-child { border-right: 0; }
.stage-table thead th {
  background: var(--surface-2); font-weight: 650;
  border-bottom: 2px solid var(--rule-strong);
  border-top: 3px solid currentColor;
  white-space: nowrap;
}
.stage-table thead th:first-child { border-top-color: var(--rule-strong); color: var(--ink); }
.stage-table thead th .stage-range {
  display: block; font-size: .72rem; font-weight: 500; color: var(--ink-faint);
}
/* The parameter column is the anchor when the table scrolls sideways on a
   phone — losing it mid-scroll makes the numbers meaningless. */
.stage-table tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--surface); font-weight: 620; white-space: nowrap;
}
.stage-table tbody tr:hover td { background: var(--surface-2); }
.stage-table td.empty-cell { color: var(--ink-faint); font-style: italic; }

.stage-table thead th.st-neonate     { color: var(--neonate); }
.stage-table thead th.st-infant      { color: var(--infant); }
.stage-table thead th.st-child       { color: var(--child); }
.stage-table thead th.st-adolescent  { color: var(--adolescent); }
.stage-table thead th.st-adult       { color: var(--adult); }
.stage-table thead th.st-older-adult { color: var(--older-adult); }

.table-note {
  font-size: .8rem; color: var(--ink-faint);
  margin: 0 0 var(--space-4); max-width: var(--measure);
}

/* ----------------------------------------------------------- tier table --- */
/* Reassuring vs concerning. Three tiers, and the tier word always stays in the
   cell — the colour is reinforcement, never the signal. */

.tier-expected, .tier-monitor, .tier-escalate { font-weight: 650; white-space: nowrap; }
.tier-expected { color: var(--normal); }
.tier-monitor  { color: var(--caution); }
.tier-escalate { color: var(--danger); }

.prose tbody tr.tier-expected-row td:first-child { border-left: 3px solid var(--normal); }
.prose tbody tr.tier-monitor-row  td:first-child { border-left: 3px solid var(--caution); }
.prose tbody tr.tier-escalate-row td:first-child { border-left: 3px solid var(--danger); }
.prose tbody tr.tier-escalate-row { background: var(--danger-soft); }
.prose tbody tr.tier-escalate-row:hover { background: var(--danger-soft); }

/* The standing frame around that section. It is the one most easily misread as
   advice, so the framing ships with it rather than being left to the reader. */
.tier-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: .82rem; color: var(--ink-soft);
  background: var(--surface-2);
  border-left: 3px solid var(--rule-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.tier-note .icn { color: var(--ink-faint); margin-top: 2px; }

/* --------------------------------------------------------- values lookup --- */
/* "Is that number okay for this person's age", answered in one screen. Skips
   the entry entirely and goes straight to the table. */

.values-controls {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  margin: 0 0 var(--space-4);
}
.values-filter {
  flex: 1 1 16rem; min-width: 0;
  font-size: 1rem; color: var(--ink); min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--r-full); border: 1px solid var(--rule-strong);
  background: var(--surface);
}
.values-filter:focus {
  border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft);
}
.value-source {
  font-size: .74rem; color: var(--ink-faint); white-space: nowrap;
}
.value-source a { color: var(--ink-faint); }
/* The row header is a <th>, not a <td> — targeting td here silently marked
   nothing, which on a screen whose entire job is numbers meant unverified
   values looked verified. */
.value-row-draft th:first-child::after {
  content: 'draft'; margin-left: var(--space-2);
  display: inline-block; vertical-align: middle;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--caution);
  border: 1px solid var(--caution-rule); border-radius: var(--r-full);
  padding: 0 var(--space-2);
}

/* ------------------------------------------------------------ scope badge --- */
/* Scope of practice stays visible on every skill entry. A reference that blurs
   that line is a liability to the person holding it. */

.scope-banner {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--primary);
  border-radius: var(--r-sm);
  padding: var(--space-4); margin: 0 0 var(--space-5);
  background: var(--surface); font-size: .88rem;
}
.scope-banner .icn { color: var(--primary); margin-top: 2px; }
.scope-banner strong { color: var(--primary-ink); }
.scope-banner.scope-provider { border-left-color: var(--danger); }
.scope-banner.scope-provider .icn { color: var(--danger); }
.scope-banner.scope-provider strong { color: var(--danger); }
.scope-banner.scope-rn-certified { border-left-color: var(--caution); }
.scope-banner.scope-rn-certified .icn { color: var(--caution); }
.scope-banner.scope-rn-certified strong { color: var(--caution); }

.pill.scope { color: var(--primary-ink); }
.pill.scope-provider { color: var(--danger); }
.pill.scope-rn-certified { color: var(--caution); }

/* ------------------------------------------------------- models & imaging --- */
/* References, never files. Every card states its licence, and where a licence
   could not be verified it says exactly that instead of implying clearance. */

.media-strip { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 2px solid var(--rule); }
.media-strip h2 { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; margin: 0 0 var(--space-2); }
.media-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.media-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--space-3);
  font-size: .84rem;
}
.media-card h3 { margin: 0; font-size: .92rem; }
.media-licence { margin: 0; font-size: .76rem; color: var(--ink-faint); }
.media-card .row-actions { margin: auto 0 0; }

/* The pediatric gap, stated rather than hidden. Where no pediatric model
   exists, the page says so — blank beats an adult model on a child's page. */
.gap-note {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: .84rem; color: var(--ink-soft);
  background: var(--caution-soft);
  border: 1px dashed var(--caution-rule);
  border-radius: var(--r-sm);
  padding: var(--space-3) var(--space-4); margin: var(--space-3) 0 0;
}
.gap-note .icn { color: var(--caution); margin-top: 2px; }

/* ------------------------------------------------------------- stage bar --- */
/* The stage switcher on a system entry: the same system at another age is one
   tap away, which is the whole point of the axis. */

.stage-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center;
  margin: 0 0 var(--space-5); padding: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.stage-bar .stage-link {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-2) var(--space-3); min-height: var(--tap-min);
  border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink-soft); font-size: .84rem; font-weight: 600;
  border-top: 3px solid transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.stage-bar .stage-link:hover { background: var(--surface); color: var(--ink); }
.stage-bar .stage-link[aria-current="page"] { background: var(--surface); color: var(--ink); }
.stage-bar .stage-link .stage-range { font-size: .7rem; font-weight: 500; color: var(--ink-faint); }
.stage-bar .stage-link.missing { color: var(--ink-faint); cursor: default; opacity: .65; }
.stage-bar .stage-link.missing:hover { background: transparent; }

.stage-link.st-neonate     { border-top-color: var(--neonate); }
.stage-link.st-infant      { border-top-color: var(--infant); }
.stage-link.st-child       { border-top-color: var(--child); }
.stage-link.st-adolescent  { border-top-color: var(--adolescent); }
.stage-link.st-adult       { border-top-color: var(--adult); }
.stage-link.st-older-adult { border-top-color: var(--older-adult); }
.stage-link.missing { border-top-color: var(--rule) !important; }

/* --------------------------------------------------------------- pinned --- */

.pin-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }

/* ---------------------------------------------------------------- print --- */
/* A printed page leaving the app without the disclaimer is the one way this
   escapes its own framing — so the notice is forced visible on paper even
   though the sticky bar is hidden. */

@media print {
  .primacy-bar { position: static; display: flex !important; border: 1px solid #000; }
  .stage-bar, .values-controls, .media-strip { display: none !important; }
  .tier-note { display: flex !important; border-left: 3px solid #000; }
  .stage-table thead th { border-top: 2px solid #000; }
  .prose tbody tr.tier-escalate-row td:first-child { border-left: 3px solid #000; }
}

/* ------------------------------------------------------------ 3D anatomy --- */

.model-note {
  font-size: .9rem; color: var(--ink-soft);
  background: var(--surface-2); border-left: 3px solid var(--primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--space-3) var(--space-4); margin: var(--space-3) 0;
  max-width: var(--measure);
}

.switch-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* The viewer never loads until asked, so the placeholder is a real control
   rather than a spinner — on a bad connection that difference is the whole
   experience. */
.embed-placeholder .btn { margin-top: var(--space-2); }

/* 3D is an enhancement over the written entry, never a replacement, so it
   never goes to paper. */
@media print {
  .embed-stage, .anatomy-picker, .embed-add { display: none !important; }
}

/* ---------------------------------------------- 3D model sections --------- */
/* Bones, joints and organs as separate collapsible sections. One flat list of
   ~390 chips made "where do organs start" unanswerable; a heading with a count
   answers it before you read a single model name. */

.model-sections { display: grid; gap: var(--space-2); }

.model-section {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}

.model-section-head {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4); min-height: var(--tap-min);
  border: 0; background: transparent; color: var(--ink);
  font-size: .92rem; font-weight: 650;
  transition: background var(--t-fast) var(--ease);
}
.model-section-head:hover { background: var(--surface-2); }
.model-section-head .icn { color: var(--ink-faint); }
.model-section-head .count {
  margin-left: auto;
  font-size: .74rem; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--ink-faint); background: var(--surface-2);
  padding: 1px var(--space-2); border-radius: var(--r-full); min-width: 22px; text-align: center;
}
.model-section-name { overflow-wrap: anywhere; }

.model-section-blurb {
  margin: 0; padding: 0 var(--space-4) var(--space-2);
  font-size: .8rem; color: var(--ink-faint); max-width: var(--measure);
}

.model-chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: flex-start; align-content: flex-start;
  padding: 0 var(--space-3) var(--space-3);
  max-height: 17rem; overflow-y: auto;
}

/* Icons are display:block by default, which drops them onto their own line
   inside a text link. Anywhere a link ends in one, keep it on the baseline. */
.embed-credit a,
.table-note a,
.gap-note a { display: inline-flex; align-items: center; gap: var(--space-1); }

/* The sex filter sits under the life-stage bar and reads as a second axis, so
   it is visually quieter than the stages — those are colour-coded, this is not. */
.sex-bar { margin-top: calc(var(--space-5) * -1 + var(--space-2)); }
.sex-bar .switch-label { align-self: center; padding: 0 var(--space-2); }
.sex-bar .stage-link { border-top-color: transparent; }
.sex-bar .stage-link[aria-current="page"] { border-top-color: var(--primary); }

/* Secondary filter rows (sex, type) sit under the age bar and read as
   subordinate to it — the age axis is colour-coded, these are not. */
.sub-bar { margin-top: calc(var(--space-5) * -1 + var(--space-2)); }
.sub-bar .switch-label { align-self: center; padding: 0 var(--space-2); }
.sub-bar .stage-link { border-top-color: transparent; }
.sub-bar .stage-link[aria-current="page"] { border-top-color: var(--primary); }

/* ====================================================================== */
/*  Touch targets and narrow phones                                        */
/* ====================================================================== */

/* Three control families were 34–37px tall — under the 44px this app
   declares. Measured in a real browser at 320/375/768px, not guessed at.
   The fix expands the HIT area without changing the visual size, the same
   trick .chip already uses, so nothing gets bigger or looser on screen. */

.in-field-btn, .seg button, .mode-toggle button { position: relative; }

.in-field-btn::after,
.seg button::after,
.mode-toggle button::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: var(--tap-min);
  min-width: var(--tap-min);
}

/* Small phones. At 320px the top bar overflowed by 14px: the search field
   cannot shrink below its own horizontal padding, so the last icon button was
   pushed off the edge and the whole page scrolled sideways. Reclaim the space
   from padding rather than from the tap targets. */
@media (max-width: 380px) {
  .topbar-row { padding-inline: var(--space-2); gap: var(--space-1); }
  #q {
    padding-left: calc(var(--space-2) + var(--icon-md));
    padding-right: calc(var(--space-4) * 1.9);
  }
  .search-icon { left: var(--space-2); }
  main { padding-inline: var(--space-3); }
  .primacy-bar { padding-inline: var(--space-3); }
}

/* Wide content must scroll inside its own box, never widen the page. */
.table-scroll, .scan-list, .model-chips, .tabs-scroll { max-width: 100%; }

/* The nav tabs and the related-entry chips were 32–39px — and the tabs are the
   most-tapped things in the app.

   The tabs get a REAL min-height rather than the ::after trick used elsewhere:
   .tabs-scroll sets overflow-x, which makes the vertical axis clip too, so an
   expanded pseudo-element is cut off exactly where the extra hit area was
   supposed to be. Verified by hit-testing elementFromPoint at the edges of the
   intended target — a min-height check in CSS cannot see this either way. */
.tab { min-height: var(--tap-min); }

.chip-list a { position: relative; }
.chip-list a::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: var(--tap-min);
}

/* Standalone links that were genuinely under-sized on a phone. Inline links
   inside a sentence are deliberately NOT chased here — WCAG 2.5.8 exempts them,
   and padding them out would wreck the prose and the dense value tables they
   sit in. These three are standalone controls, so they get the target. */
.compare-col .col-head a,
.value-source a,
.media-licence a,
.embed-credit a { position: relative; display: inline-flex; align-items: center; }
.compare-col .col-head a::after,
.value-source a::after,
.media-licence a::after,
.embed-credit a::after {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  top: 50%; transform: translateY(-50%);
  height: var(--tap-min);
}

/* The theme switcher must actually disappear on phones.
   `@media (max-width: 760px) { .topbar-seg { display: none } }` is declared
   earlier in this file, but the base `.seg { display: inline-flex }` comes
   AFTER it at the same specificity — and a media query adds none — so the base
   rule won and the switcher never hid. It stole ~150px from the top bar and
   squeezed the search field to 60px on a 375px screen, which is unusable for an
   app whose primary interaction is search.
   Re-declared here, after everything, so source order settles it. */
@media (max-width: 760px) {
  .topbar-seg { display: none; }
}