/* ===========================================================================
   Vetpedia design system

   Direction, from the UI/UX Pro Max database:
     · Colour  — "Healthcare App" / "Medical Clinic": calm teal-cyan + health
                 green. Deepened from the database's #0891B2 to teal-700 so
                 body-weight text and small glyphs clear 4.5:1 in both themes.
     · Surface — "E-Ink / Paper": paper-like, high contrast, calm. It is the
                 database's match for reading apps, and reading is what this is.
     · Cards   — "Bento Grids": modular, rounded, content-first browse surfaces.
     · Type    — the "medical, clean, accessible, professional" pairing, built
                 from system fonts rather than Google Fonts (see UPDATED.md).

   The constraint that outranks all of it: legibility while tired at 1am, on a
   phone, in a lab.

   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: warm sage ----
     From the Claude Design "Vetpedia" comp. Six values are a shade darker than
     the comp so body-weight text clears WCAG 4.5:1 — each is marked below with
     what the comp had. The hue and saturation are untouched, so the palette
     still reads as the same design. */
  --bg:          #f4efe1;   /* warm paper */
  --surface:     #fffdf7;
  --surface-2:   #ece4d0;
  --ink:         #262a20;
  --ink-soft:    #52564a;   /* 6.6:1 on --bg */
  --ink-faint:   #6a6e60;   /* comp #767a6a was 3.8:1 → 4.6:1 */
  --rule:        #ddd4bc;
  --rule-strong: #c4b895;

  --primary:      #5c6e4c;  /* olive */
  --primary-ink:  #40502f;  /* 7.0:1 on --bg */
  --primary-soft: #e2e8d5;
  --on-primary:   #fbf8ef;

  /* The comp's most distinctive move: a solid dark forest topbar rather than
     translucent paper. Its children invert, so they get their own tokens. */
  --topbar-bg:       #445037;
  --topbar-ink:      #f6f2e4;   /* 7.7:1 on --topbar-bg */
  --topbar-ink-soft: #c7ceb5;   /* 5.3:1 */
  --topbar-surface:  rgba(255,255,255,.14);
  --topbar-rule:     rgba(255,255,255,.18);

  --normal:      #3c764b;   /* comp #3f7d4f was 4.2:1 on its tint → 4.6:1 */
  --normal-soft: #e5f0e1;
  --caution:     #9b591e;   /* comp #a15c1f was 4.3:1 → 4.6:1 */
  --caution-soft:#f6e9d5;
  --caution-rule:#d9b784;
  --danger:      #a3372a;
  --danger-soft: #f7e3de;

  --equine: #7c5ea8;
  --bovine: #985f2c;        /* comp #a1652f was 4.1:1 → 4.6:1 */
  --canine: #3b6ea5;
  --feline: #aa4d72;        /* comp #ad4f74 was 4.4:1 → 4.6:1 */
  --exotic: #37785f;        /* comp #3f8a6d was 3.6:1 → 4.6:1 */

  --shadow-sm: 0 1px 2px rgba(38,32,20,.08);
  --shadow:    0 4px 10px rgba(38,32,20,.10);
  --shadow-lg: 0 10px 26px rgba(38,32,20,.16);
}

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

/* ---- Dark theme: soft charcoal, never void black; text under pure white so
        1am contrast is comfortable rather than glaring. ---- */
@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:          #1c2016;
  --surface:     #242a1c;
  --surface-2:   #171b11;
  --ink:         #ece6d3;
  --ink-soft:    #c1bda5;
  --ink-faint:   #91907b;   /* comp #8f8d78 was 4.4:1 → 4.6:1 */
  --rule:        #363b28;
  --rule-strong: #474d34;

  --primary:      #9dc088;
  --primary-ink:  #c3dfae;
  --primary-soft: #2b3320;
  --on-primary:   #182013;

  --topbar-bg:       #12150d;
  --topbar-ink:      #ece6d3;
  --topbar-ink-soft: #a5a68e;
  --topbar-surface:  rgba(255,255,255,.08);
  --topbar-rule:     rgba(255,255,255,.12);

  --normal:      #7fbf8e;
  --normal-soft: #1e2e1e;
  --caution:     #d7a355;
  --caution-soft:#2e2515;
  --caution-rule:#5c4a26;
  --danger:      #e08a7a;
  --danger-soft: #2f1c17;

  --equine: #b39ae0;
  --bovine: #d7a35f;
  --canine: #7fa8e0;
  --feline: #e094b7;
  --exotic: #6fcda2;

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

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg:          #1c2016;
    --surface:     #242a1c;
    --surface-2:   #171b11;
    --ink:         #ece6d3;
    --ink-soft:    #c1bda5;
    --ink-faint:   #91907b;   /* comp #8f8d78 was 4.4:1 → 4.6:1 */
    --rule:        #363b28;
    --rule-strong: #474d34;

    --primary:      #9dc088;
    --primary-ink:  #c3dfae;
    --primary-soft: #2b3320;
    --on-primary:   #182013;

    --topbar-bg:       #12150d;
    --topbar-ink:      #ece6d3;
    --topbar-ink-soft: #a5a68e;
    --topbar-surface:  rgba(255,255,255,.08);
    --topbar-rule:     rgba(255,255,255,.12);

    --normal:      #7fbf8e;
    --normal-soft: #1e2e1e;
    --caution:     #d7a355;
    --caution-soft:#2e2515;
    --caution-rule:#5c4a26;
    --danger:      #e08a7a;
    --danger-soft: #2f1c17;

    --equine: #b39ae0;
    --bovine: #d7a35f;
    --canine: #7fa8e0;
    --feline: #e094b7;
    --exotic: #6fcda2;

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

/* ------------------------------------------------------------------ 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); }

/* Species marks carry their own colour wherever they appear. */
.sp-equine { color: var(--equine); }
.sp-bovine { color: var(--bovine); }
.sp-canine { color: var(--canine); }
.sp-feline { color: var(--feline); }
.sp-exotic { color: var(--exotic); }

/* --------------------------------------------------------------- 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.6) 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; }

/* These three sit below --tap-min on purpose — a 44px-tall theme switch or
   in-field button would dominate the bar. The hit area is expanded instead,
   the same way .chip does it, so the target is 44px even though the paint is
   not. Verified by hit-testing the centre and the edges, not by eye. */
.in-field-btn::after, .seg button::after, .tab::after, .mode-toggle button::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: var(--tap-min); transform: translateY(-50%);
}
.seg button, .tab, .mode-toggle button { position: relative; }

.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); }
#voice-search { right: var(--space-1); }
body:has(#clear-q:not([hidden])) #voice-search { right: 40px; }
#voice-search.listening { color: var(--danger); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }

.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(--equine), var(--bovine), var(--canine), var(--primary));
}
.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.species-equine { color: var(--equine); }
.pill.species-bovine { color: var(--bovine); }
.pill.species-canine { color: var(--canine); }
.pill.species-feline { color: var(--feline); }
.pill.species-exotic { color: var(--exotic); }
.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-species="equine"] { border-top-color: var(--equine); }
.compare-col[data-species="bovine"] { border-top-color: var(--bovine); }
.compare-col[data-species="canine"] { border-top-color: var(--canine); }
.compare-col[data-species="feline"] { border-top-color: var(--feline); }
.compare-col[data-species="exotic"] { border-top-color: var(--exotic); }

.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;
}

/* ------------------------------------------------------------------ quiz --- */

.quiz-form {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--space-5); margin: 0 0 var(--space-5);
}
.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);
  transition: border-color var(--t-fast) var(--ease);
}
.field select:focus, .field input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.switch-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.switch-label { font-size: .78rem; color: var(--ink-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: var(--space-1); }
.scope-note { font-size: .85rem; color: var(--ink-soft); margin: 0 0 var(--space-3); }

.quiz-session { max-width: 46rem; margin: 0 auto; }
.quiz-progress { margin-bottom: var(--space-4); }
.bar { height: 5px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: var(--r-full); transition: width var(--t-base) var(--ease); }
.quiz-progress-meta {
  display: flex; justify-content: space-between; gap: var(--space-3); align-items: center;
  font-size: .78rem; color: var(--ink-faint); margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.flashcard {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--space-5);
  box-shadow: var(--shadow); min-height: 13rem;
}
.card-kind {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--ink-faint); margin: 0 0 var(--space-3);
}
.card-face.front { font-size: 1.14rem; line-height: 1.55; font-weight: 550; }
.card-face.back { font-size: 1rem; color: var(--ink-soft); }
.card-face.back strong { color: var(--ink); }
.flashcard hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-4) 0; }
.card-note { font-size: .85rem; color: var(--ink-faint); font-style: italic; }

.grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-5); }
.btn.grade { flex-direction: column; gap: 0; padding: var(--space-2) var(--space-1); text-align: center; min-height: 54px; }
.btn.grade small { font-size: .68rem; font-weight: 400; color: var(--ink-faint); }
.btn.grade.g1 { border-color: var(--danger); color: var(--danger); }
.btn.grade.g1:hover { background: var(--danger-soft); color: var(--danger); }
.btn.grade.g5 { border-color: var(--normal); color: var(--normal); }
.btn.grade.g5:hover { background: var(--normal-soft); color: var(--normal); }

.mc-options { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.mc-option {
  display: flex; align-items: center; gap: var(--space-3);
  text-align: left; font-size: .9rem; line-height: 1.5;
  padding: var(--space-3) var(--space-4); min-height: var(--tap-min);
  border-radius: var(--r-sm); border: 1px solid var(--rule-strong);
  background: var(--bg); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mc-option:hover:not(:disabled) { border-color: var(--primary); background: var(--surface); }
.mc-option .icn { flex: 0 0 auto; }
.mc-option.correct { border-color: var(--normal); background: var(--normal-soft); color: var(--normal); font-weight: 620; }
.mc-option.wrong { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }

.quiz-footer { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-4); font-size: .78rem; }
.srs-meta { color: var(--ink-faint); margin-left: auto; font-variant-numeric: tabular-nums; }

.test-yourself {
  margin-top: var(--space-6); padding: var(--space-5);
  background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r-md);
}
.test-yourself h2 { display: flex; align-items: center; gap: var(--space-2); font-size: 1rem; margin: 0 0 var(--space-3); }

.qa { border-bottom: 1px solid var(--rule); }
.qa:last-of-type { border-bottom: 0; }
.qa summary {
  display: flex; align-items: flex-start; gap: var(--space-2);
  cursor: pointer; padding: var(--space-3) 0; font-size: .93rem; font-weight: 550;
  list-style: none; min-height: var(--tap-min);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::marker { content: ''; }
.qa summary .icn { color: var(--primary); margin-top: 3px; transition: transform var(--t-fast) var(--ease); }
.qa[open] summary .icn { transform: rotate(90deg); }
.qa-answer { padding: 0 0 var(--space-3) calc(var(--icon-sm) + var(--space-2)); font-size: .92rem; color: var(--ink-soft); }
.qa-answer > :last-child { margin-bottom: 0; }
.lapses {
  font-size: .7rem; color: var(--danger); background: var(--danger-soft);
  padding: 1px var(--space-2); border-radius: var(--r-full); margin-left: var(--space-2); font-weight: 650;
}

.histogram { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--space-2); align-items: end; height: 140px; margin: 0 0 var(--space-5); }
.hist-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.hist-bar {
  background: var(--primary-soft); border: 1px solid var(--primary);
  border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 3px;
  display: flex; align-items: flex-start; justify-content: center;
}
.hist-bar span { font-size: .68rem; color: var(--primary-ink); font-weight: 700; margin-top: -1.15rem; }
.hist-col small { font-size: .68rem; color: var(--ink-faint); margin-top: var(--space-1); }
.weak-list { margin-bottom: var(--space-4); }

/* -------------------------------------------------------------- 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 --- */

.species-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;
}
.species-heading.species-equine { color: var(--equine); }
.species-heading.species-bovine { color: var(--bovine); }
.species-heading.species-canine { color: var(--canine); }
.species-heading.species-feline { color: var(--feline); }
.species-heading.species-exotic { color: var(--exotic); }
.species-heading.species-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; }

/* ----------------------------------------------------------- animal wiki --- */
/* Photo-led cards. Every image is third-party and loads from its origin, so
   the frame reserves its space to keep CLS at zero on a slow connection. */

.animal-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.animal-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.animal-thumb {
  aspect-ratio: 4 / 3; background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.animal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.animal-body { padding: var(--space-3); display: grid; gap: var(--space-2); }
.animal-body h3 { margin: 0; font-size: .98rem; }
.animal-latin {
  margin: 0; font-style: italic; font-size: .82rem; color: var(--ink-faint);
}
.animal-latin.big { font-size: 1rem; }

.animal-figure {
  margin: 0 0 var(--space-5); background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden;
}
.animal-figure img {
  width: 100%; max-height: 460px; object-fit: cover; display: block;
}
.animal-figure figcaption {
  padding: var(--space-2) var(--space-3);
  font-size: .76rem; color: var(--ink-faint); border-top: 1px solid var(--rule);
}

.fact-table {
  display: grid; gap: 0; margin: 0 0 var(--space-4);
  border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
}
.fact-row {
  display: grid; grid-template-columns: minmax(7rem, 22%) 1fr; gap: var(--space-3);
  padding: var(--space-3); border-bottom: 1px solid var(--rule);
  background: var(--surface); font-size: .88rem;
}
.fact-row:last-child { border-bottom: 0; }
.fact-label { color: var(--ink-faint); font-weight: 600; }
.fact-value { color: var(--ink); }
@media (max-width: 520px) {
  .fact-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

.small { font-size: .8rem; }

/* ----------------------------------------------------------------- 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);
}

/* Small ruminants and pigs — added when the vault grew beyond the core three.
   The design comp collapses these three to --ink-faint; keeping them distinct
   is better (all eight species stay colour-coded), so they are re-toned into
   the warm palette instead. All clear 4.5:1 light and ~6.9:1 dark. */
:root { --ovine: #7062aa; --caprine: #307676; --porcine: #a14f8a; }
:root[data-theme="dark"] { --ovine: #ab9fdb; --caprine: #3db8b8; --porcine: #d692c3; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --ovine: #ab9fdb; --caprine: #3db8b8; --porcine: #d692c3; }
}
.sp-ovine, .pill.species-ovine, .species-heading.species-ovine, .compare-col[data-species="ovine"] { color: var(--ovine); }
.sp-caprine, .pill.species-caprine, .species-heading.species-caprine, .compare-col[data-species="caprine"] { color: var(--caprine); }
.sp-porcine, .pill.species-porcine, .species-heading.species-porcine, .compare-col[data-species="porcine"] { color: var(--porcine); }
.compare-col[data-species="ovine"] { border-top-color: var(--ovine); }
.compare-col[data-species="caprine"] { border-top-color: var(--caprine); }
.compare-col[data-species="porcine"] { border-top-color: var(--porcine); }

/* ------------------------------------------------------------ 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;
  /* width must be pinned. With `width: auto`, min-height wins over the aspect
     ratio and the browser then back-computes the WIDTH from that height —
     320px tall at 4/3 became 427px wide inside a 358px column, which scrolled
     the whole page sideways on a phone. */
  width: 100%;
  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 --- */

/* .embed-stage and .high-detail were removed: nothing has rendered them since
   the anatomy page dropped its second stage, and .embed-stage carried the same
   aspect-ratio + min-height overflow bug as .anatomy-stage. Dead CSS with a
   latent bug in it is worse than no CSS. */
@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: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: flex-start; align-content: flex-start;
  max-height: 19rem; 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-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);
}