/* FieldDx — the formulary.
 *
 * The app is compiled from six veterinary handbooks, so it is set like one:
 * running heads, thumb tabs, monograph entries with hanging indents, tabular
 * figures, and a bracketed reference mark on every clinical line.
 *
 * Deliberately not a scan of a book. A printed formulary is a hard white page
 * with saturated section tabs, not aged parchment, and the previous parchment
 * -and-serif treatment is the thing this replaces. The ground is bright because
 * the screen is read outdoors at midday; the tabs are saturated because a
 * thumb tab has to be findable at arm's length.
 */

/* ------------------------------------------------------------------ face */

@font-face {
  font-family: "Atkinson Next";
  src: url("fonts/AtkinsonHyperlegibleNext-latin.woff2") format("woff2");
  font-weight: 400 800;                       /* one variable file, 400 to 800 */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Next";
  src: url("fonts/AtkinsonHyperlegibleNext-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+2020, U+20A0-20AB,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Hard data only: doses, ranges, counts, citations. Monospaced so columns of
   figures line up down the page and a digit cannot be mistaken for a letter. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Paper and ink. The page is pure white on a light canvas so structure comes
     from tonal layering and hairlines, never from a shadow. */
  --paper:        #ffffff;
  --page:         #f2f2f2;
  --sunk:         #e8e8e8;
  --ink:          #000000;
  --ink-soft:     #4c4546;
  --ink-faint:    #7c7475;   /* #7e7576 from the source palette is 4.47:1 */
  --rule:         #cfc4c5;
  --rule-strong:  #000000;

  /* Section colours. Vermilion and deep green are two steps darker than the
     source palette: at #E63946 and #2A9D8F white 14px bold text lands at
     4.17:1 and 3.32:1, under AA, and this screen is read in direct sun. Hue
     and saturation are unchanged. */
  --sec-front:  #000000;
  --sec-find:   #e42534;
  --sec-drugs:  #1d3557;
  --sec-values: #238378;
  --sec-review: #6d597a;

  --sec: var(--sec-front);
  --sec-wash: #e8e8e8;

  --warn:      #ba1a1a;
  --warn-wash: #ffdad6;

  --text: "Atkinson Next", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  --tap: 46px;
  --gutter: 16px;
  --shell: 1180px;
  --measure: 68ch;
  --radius: 0;                                /* the shape language is square */

  --on-ink-rule: #333333;
  --on-ink-soft: #c6c6c6;
}

body.sec-find   { --sec: var(--sec-find);   --sec-wash: #f9efec; }
body.sec-drugs  { --sec: var(--sec-drugs);  --sec-wash: #ecf0f7; }
body.sec-values { --sec: var(--sec-values); --sec-wash: #e9f2ed; }
body.sec-review { --sec: var(--sec-review); --sec-wash: #f4ecf3; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 17px/1.6 var(--text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--sec); text-underline-offset: 2px; }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; z-index: 20;
}
.skip:focus { left: 8px; top: 8px; }

.is-hidden { display: none !important; }

/* ------------------------------------------------------- masthead + tabs */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead-in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}

.wordmark {
  font: 700 20px/1 var(--text);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}

/* The running head: a book tells you where you are on every single page. */
/* The running head sits under the wordmark as a volume line, the way a manual
   states which edition you are holding. */
.runhead {
  flex: 1 1 auto;
  margin: 0;
  font: 700 11px/16px var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auto and Install belong together in the corner, not scattered along the
   bar. The runhead takes the slack between the wordmark and this pair. */
.mast-tools {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.install {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;              /* was 33px, beside a 38px theme button */
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: 700 13px/1 var(--text);
  padding: 0 13px;
  border-radius: var(--radius);
  cursor: pointer;
}
.install:hover { background: var(--ink); color: #fff; }

/* Thumb tabs. Bottom-aligned to the masthead rule so the active one reads as
   the page you have opened the book to. */
/* Four equal blocks across the full width, each permanently in its own
   colour, so the section you are in is legible at arm's length and the other
   three are always one thumb away. The current one is ringed in white rather
   than recoloured — recolouring would cost the section its identity. */
.tabs {
  display: flex;
  border-top: 1px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.tab {
  flex: 1 1 0;
  /* Without this a flex item refuses to shrink below its own text, so the
     fourth tab was pushed off a 375px screen entirely. */
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 0;
  border-right: 1px solid var(--ink);
  background: var(--sunk);
  color: #fff;
  font: 700 clamp(12px, 3.4vw, 14px)/1 var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab:last-child { border-right: 0; }
.tab-find   { background: var(--sec-find);   }
.tab-drugs  { background: var(--sec-drugs);  }
.tab-values { background: var(--sec-values); }
.tab-review { background: var(--sec-review); }
.tab:hover { filter: brightness(1.12); }
.tab[aria-current] { box-shadow: inset 0 0 0 3px #fff; }

/* --------------------------------------------------------------- shell */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 0;
}

.block { padding: 20px 0; border-bottom: 3px solid var(--ink); }
.block:last-of-type { border-bottom: 0; }

.block-head { margin-bottom: 16px; }

/* Section heads carry a rule, the way a monograph's sub-heads do. */
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }

/* The section opener is a full-bleed bar in the section colour, the way a
   manual prints a running section head across the top of the page. It breaks
   the shell's gutter deliberately so the colour reaches both edges. */
.section-open {
  margin: 0 calc(var(--gutter) * -1);
  padding: 10px var(--gutter) 12px;
  background: var(--sec);
  color: #fff;
  font: 800 clamp(22px, 3.2vw, 28px)/1.15 var(--text);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 14px;
}
/* A printed manual numbers its running heads. The code sits on the baseline of
   the title and is set in the figure face, so a page with no code simply has an
   empty auto column and nothing shifts. */
.section-code {
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Pure white, not a faded white. The values green is the tightest of the four
     section colours at 4.58:1 against #fff, so any transparency here drops the
     smallest text on the page below AA. Hierarchy comes from size and face. */
  color: #ffffff;
  text-align: right;
}
.section-open > span {
  grid-column: 1 / -1;
  display: block;
  margin-top: 6px;
  font: 400 14px/20px var(--text);
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  max-width: var(--measure);
}

.eyebrow {
  font: 700 18px/22px var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  display: block;
}

.block-note {
  margin: 9px 0 0;
  max-width: var(--measure);
  font-size: 14px;
  color: var(--ink-soft);
}

.footer {
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
  margin-top: 26px;
  font-size: 13px;
  color: var(--ink-faint);
  max-width: var(--measure);
}

/* ------------------------------------------------------------- landing */

.front { background: var(--paper); }

.front-mast {
  background: var(--ink);
  color: #fff;
  padding: 54px var(--gutter) 46px;
}
.front-mast-in { max-width: var(--shell); margin: 0 auto; }

/* Set the way a manual sets its own title page: uppercase, heavy, tight,
   under a volume line. */
.front-vol {
  margin: 0 0 12px;
  font: 700 11px/16px var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
}
.front-title {
  font: 800 clamp(32px, 6.6vw, 60px)/1.03 var(--text);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
}
.front-sub {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  color: var(--on-ink-soft);
}
.front-imprint {
  margin: 26px 0 0;
  font: 400 14px/1.65 var(--text);
  letter-spacing: 0.01em;
  color: var(--on-ink-soft);
  max-width: 62ch;
  padding-top: 18px;
  border-top: 1px solid var(--on-ink-rule);
}

.front-actions { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 11px; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 22px;
  border-radius: var(--radius);
  font: 700 16px/1 var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: #fff; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }
.btn-primary:hover { background: var(--sec-find); color: #fff; }
/* On the black mast an outline has to be white to exist at all — #333 on
   #000 is 1.4:1 and simply disappears. */
.btn-ghost { border-color: #fff; color: #fff; background: none; }
.btn-ghost:hover { background: #fff; color: var(--ink); }
/* The ghost button assumes the dark masthead; on the page it needs the ink. */
.btn-on-paper { border-color: var(--rule-strong); color: var(--ink); }
.btn-on-paper:hover { border-color: var(--ink); background: var(--sunk); }

.front-body {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 0;
}

.front-sec { padding: 44px 0; border-bottom: 1px solid var(--rule); }
.front-sec:last-child { border-bottom: 0; }

.front-h {
  font: 700 clamp(24px, 3.4vw, 33px)/1.2 var(--text);
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.front-p {
  margin: 14px 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 17px;
}

/* The specimen: a real monograph with the parts named in the margin, which is
   exactly how a formulary's front matter teaches you to read it. */
.specimen {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 640px) 232px;
  gap: 0 26px;
  align-items: start;
}
.specimen-entry {
  border: 1px solid var(--ink);
  padding: 20px 22px 22px;
  background: var(--paper);
}
.specimen-notes { display: grid; gap: 15px; padding-top: 6px; }
.specimen-note {
  position: relative;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.specimen-note::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 10px;
  border-top: 1px solid var(--rule-strong);
}
.specimen-note b { color: var(--ink); font-weight: 700; }

.spec-name { font: 700 25px/1.15 var(--text); letter-spacing: -0.02em; }
.spec-class {
  margin: 4px 0 0;
  font: 400 11.5px/1 var(--text);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.spec-rule { margin: 15px 0; border: 0; border-top: 2px solid var(--ink); }
.spec-line { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 13px; padding: 7px 0; }
.spec-line + .spec-line { border-top: 1px solid var(--rule); }
.spec-key {
  font: 700 10.5px/1.5 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}
.spec-val { max-width: 62ch; font-size: 15px; }
.spec-dose { font-weight: 700; }

/* The contents page. Numbers are the proof, so they are set as figures. */
.contents { margin-top: 26px; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 17px 18px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
}
.content-row:hover { background: var(--sunk); }

.content-name { font: 700 19px/1.25 var(--text); letter-spacing: -0.01em; }
.content-what { margin: 3px 0 0; font-size: 14px; color: var(--ink-soft); }
.content-n {
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-align: right;
  white-space: nowrap;
}

/* The animals, as a boxed plate — the way a field manual opens with the
   species it covers before it says anything else. Hairline grid, no gaps, so
   it reads as one printed block rather than nine cards. */
/* Nine animals, so the column count is chosen rather than left to auto-fit:
   a clean 3x3 block on a phone, one unbroken row of nine on a wide screen.
   auto-fit gave ten tracks for nine cells and left a hole in the plate. */
.beasts {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
@media (min-width: 620px)  { .beasts { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1000px) { .beasts { grid-template-columns: repeat(9, 1fr); } }
.beast {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 16px 8px 13px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  min-height: 118px;
}
.beast:hover { background: var(--sunk); }
.beast-icon { display: block; }
.beast-icon svg {
  width: 46px; height: 46px; display: block; stroke-width: 1.6;
}
.beast-name {
  font: 700 14px/1 var(--text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.beast-n {
  font: 500 12px/1 var(--mono);
  color: var(--ink-faint);
}

/* What it refuses to do. The restraint is the product, so it is stated. */
.refuses { margin-top: 22px; display: grid; gap: 0; max-width: var(--measure); }
.refuse {
  padding: 15px 0;
  border-top: 1px solid var(--rule);
  font-size: 16px;
}
.refuse:last-child { border-bottom: 1px solid var(--rule); }
.refuse b { display: block; font-weight: 700; }
.refuse span { color: var(--ink-soft); font-size: 15px; }

/* The colophon: which books this was set from. */
.colophon { margin-top: 20px; display: grid; gap: 9px; max-width: var(--measure); }
.colophon li {
  list-style: none;
  padding-left: 15px;
  border-left: 1px solid var(--rule-strong);
  font-size: 14px;
  color: var(--ink-soft);
}
.colophon ul { margin: 0; padding: 0; display: grid; gap: 9px; }

/* --------------------------------------------------------- search + list */

.search-wrap { position: relative; max-width: 560px; }
.search {
  width: 100%;
  min-height: var(--tap);
  padding: 0 40px 0 13px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1 var(--text);
}
.search:focus { border-color: var(--ink); }
.search::placeholder { color: var(--ink-faint); }
.search-clear {
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 0; background: none;
  color: var(--ink-faint);
  font-size: 21px; line-height: 1;
  cursor: pointer;
}

.species-row, .filterbar { display: flex; flex-wrap: wrap; gap: 7px; }

/* Square, hard-edged, 1px of ink. Selected is a solid black fill, never a
   tint — the same state language as the index rows, so one glance reads the
   same way everywhere. */
.species-btn, .filter {
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 700 14px/1 var(--text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.species-btn svg { width: 30px; height: 30px; display: block; flex: 0 0 auto; stroke-width: 2; }
.species-btn:hover, .filter:hover { background: var(--sunk); }
.species-btn[aria-pressed="true"], .filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.filter[disabled] { opacity: 0.42; cursor: default; }
.filter-n { font: 500 13px/1 var(--mono); color: var(--ink-soft); }
.filter[aria-pressed="true"] .filter-n { color: #fff; }
.filter-sep { flex: 0 0 auto; width: 1px; align-self: stretch; margin: 3px 4px; background: var(--rule); }

/* An index sets in columns. Run as one column across a 1180px shell, a sign
   and its count sit a whole page apart and the eye has to travel to pair them. */
.signlist {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
/* A row in a printed index: name on the left in bold, its count on the right
   in mono so the figures form a column the eye can run down. The chosen row
   inverts to solid ink rather than tinting — at arm's length in sun, a wash is
   not a state, but black is. */
.sign {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 9px 14px;
  background: var(--paper);
  border: 0;
  text-align: left;
  color: var(--ink);
  font: 700 16px/24px var(--text);
  cursor: pointer;
  width: 100%;
}
.sign:hover { background: var(--sunk); }
.sign[aria-pressed="true"] { background: var(--ink); color: #fff; }
.sign[aria-pressed="true"] .sign-n { color: #fff; }

.sign-box {
  width: 18px; height: 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.sign[aria-pressed="true"] .sign-box {
  background: var(--paper);
  border-color: var(--paper);
  position: relative;
}
.sign[aria-pressed="true"] .sign-box::after {
  content: "";
  position: absolute; left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
.sign-name { min-width: 0; }
.sign-n { font: 500 14px/18px var(--mono); color: var(--ink-soft); }

.listmore {
  min-height: var(--tap);
  width: 100%;
  border: 1px solid var(--ink);
  border-top: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 700 14px/1 var(--text);
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}
.listmore:hover { background: var(--sunk); }

.emptynote, .stubnote {
  margin: 14px 0 0;
  max-width: var(--measure);
  font-size: 15px;
  color: var(--ink-soft);
}
.stubnote { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.stub-toggle {
  border: 0; background: none;
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 0 2px;      /* was a 14px-tall tap target */
  color: var(--sec); font: 700 14px/1 var(--text);
  cursor: pointer; text-decoration: underline;
}

/* Named matches — a jump out of the picker, so it is ruled off from it. */
.jumps { margin-top: 15px; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.jump {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: var(--tap);
  padding: 9px 14px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--rule);
}
.jump:first-child { border-top: 0; }
.jump:hover { background: var(--sec-wash); }
.jump-kind {
  flex: 0 0 74px;
  font: 700 10px/1.3 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sec);
}
.jump-name { flex: 1 1 auto; font: 700 16px/1.3 var(--text); }
.jump-note {
  flex: 0 0 auto;
  font: 400 11.5px/1 var(--mono);
  color: var(--ink-faint);
  text-align: right;
  max-width: 38%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jump-text { align-items: flex-start; }
.jump-text .jump-kind { padding-top: 3px; }
.jump-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.jump-excerpt { max-width: var(--measure); font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* Chosen signs. */
.chosen { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; }
.chip { display: inline-flex; align-items: stretch; border: 1px solid var(--sec); border-radius: var(--radius); overflow: hidden; }
.chip-state {
  border: 0; background: var(--sec); color: #fff;
  font: 700 14px/1 var(--text);
  padding: 0 11px; min-height: 36px; cursor: pointer;
}
.chip.is-absent .chip-state { background: var(--paper); color: var(--ink-soft); text-decoration: line-through; }
.chip-drop {
  border: 0; border-left: 1px solid var(--sec);
  background: var(--paper); color: var(--ink-soft);
  font-size: 17px; line-height: 1; width: 32px; cursor: pointer;
}
.chip-drop:hover { background: var(--warn-wash); color: var(--warn); }

/* Control glyphs carry no intrinsic size; without this they fill their button. */
.chip-drop svg, .search-clear svg, .case-drop svg {
  width: 17px; height: 17px; display: block; margin: 0 auto;
}


/* --------------------------------------------------- drug entry (list row) */

/* Each entry is a ruled band, not a card: 1px between rows, nothing floating.
   The name and the withdrawal sit on one line so the flag is read before the
   dose is, which is the order that matters for a food animal. */
.drugrow { display: block; padding: 16px var(--gutter); }
.drugrow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.drugrow-id { display: block; min-width: 0; }
.drugrow-class {
  display: block;
  margin-top: 3px;
  font: 400 14px/20px var(--text);
  color: var(--ink-soft);
}
.drugrow-flags { flex: 0 0 auto; display: grid; gap: 3px; justify-items: stretch; }

/* Filled, not outlined. This is the one line on the page with a consequence
   after the animal has left the yard. */
.wd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--ink);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wd svg { width: 13px; height: 13px; display: block; }
.wd-meat { background: var(--warn); color: #fff; border-color: var(--warn); }
.wd-milk { background: var(--paper); color: var(--ink); }

/* The dose, boxed and labelled the way a table cell is: a grey key cell on the
   left, the figure and the resolved amount on the right. */
.dosegrid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  border: 1px solid var(--ink);
}
.dosegrid-key {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border-right: 1px solid var(--ink);
  background: var(--sunk);
  font: 700 11px/1 var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.dosegrid-val { display: block; padding: 11px 13px; min-width: 0; }
.dosegrid-rate {
  display: block;
  font: 500 19px/22px var(--mono);
  color: var(--ink);
}
.dosegrid-sp {
  display: block;
  margin-top: 3px;
  font: 700 11px/1 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dosegrid-calc {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* The amount drops to its own line rather than pushing the card off the
     screen. A 650 kg penicillin dose reads "14,300,000-42,900,000 units per
     dose"; on one nowrap line that was 22px wider than a 375px phone. */
  flex-wrap: wrap;
  gap: 6px 10px;
}
.dosegrid-for { font: 400 13px/16px var(--text); color: var(--ink-soft); }
.dosegrid-amt {
  font: 500 14px/18px var(--mono);
  background: var(--sunk);
  padding: 3px 8px;
  /* Wraps at the space before the unit, so the figure itself stays whole.
     anywhere is the last resort for a number too long even for its own line —
     a broken figure is still readable, a clipped one may not be. */
  overflow-wrap: anywhere;
}
.drugrow .result-cite { display: block; margin-top: 11px; text-align: right; }

/* ------------------------------------------------------------ weight bar */

.scale-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scale-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--on-ink-rule);
  background: #000;
  padding: 5px 9px;
}
.scale-track { position: relative; margin-top: 0; }
/* The height here is the touch target, not the rail. This element used to be
   2px tall — the rail itself — so on a phone the only grabbable part was the
   thumb, and a tap anywhere along the bar missed. The rail is now drawn on the
   track pseudo-element and the input is a normal-sized control around it. */
.scale-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  background: none;
  outline: none;
  margin: 0;
  cursor: pointer;
}
.scale-range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--on-ink-soft);
}
.scale-range::-moz-range-track {
  height: 2px;
  background: var(--on-ink-soft);
}
.scale-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  margin-top: -8px;
  background: #fff;
  border: 2px solid #000;
  cursor: pointer;
}
.scale-range::-moz-range-thumb {
  width: 18px; height: 18px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 0;
  cursor: pointer;
}
.scale-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  pointer-events: none;
}
.scale-ticks i { width: 1px; height: 9px; background: var(--on-ink-soft); }
.scale-ticks i.lo { height: 5px; opacity: 0.55; }

/* --------------------------------------------------------------- results */


/* The explicit minmax(0, 1fr) is load-bearing. Without it the single implicit
   column is auto-sized, a grid item's default min-width is its content, and one
   long drug name or dose string widened the whole track past the viewport —
   drugs.html measured 429px of content inside a 375px phone. */
.results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.result {
  min-width: 0;
  display: block;
  padding: 15px 17px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.result:hover { background: var(--sunk); }
.result-name { font: 700 18px/22px var(--text); text-transform: uppercase; letter-spacing: 0.01em; }
.result-species { margin: 4px 0 0; max-width: var(--measure); font-size: 14px; color: var(--ink-soft); }
.result-cite {
  margin: 9px 0 0;
  max-width: var(--measure);
  font: 400 11.5px/1.45 var(--mono);
  color: var(--ink-faint);
}

.badges { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font: 700 11px/1 var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 8px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
}
.badge-dose { background: var(--sec-wash); color: var(--sec); border-color: currentColor; }
.badge-book { background: var(--paper); }
/* Solid fill, not an outline. This badge decides whether milk can be sold
   this week, and it has to survive being glanced at. */
.badge-withdraw {
  background: var(--warn);
  color: #fff;
  border-color: var(--warn);
  font-family: var(--mono);
  font-weight: 500;
}

.meter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 10px;
}
/* One tick per sign asked for; filled ticks are the ones this condition carries. */
.tally { display: inline-flex; gap: 3px; }
.tally i {
  display: block;
  width: 9px; height: 9px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
}
.tally i.on { background: var(--sec); border-color: var(--sec); }
.result.is-top { background: var(--sunk); border-left: 0; box-shadow: inset 0 0 0 2px var(--ink); }
.result.is-top .result-name { text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--sec); }

.hitlist, .tally { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.hitlist-against { color: var(--warn); }
.tally-label { font: 400 11.5px/1 var(--mono); color: var(--ink-faint); }
.cluster { font: 700 11px/1 var(--text); letter-spacing: 0.07em; text-transform: uppercase; color: var(--sec); }
.depth { font: 400 11.5px/1 var(--mono); color: var(--ink-faint); }

/* "Check next" — a prompt to go back to the animal, so it is set apart. */
.ask { margin: 0 0 18px; padding: 15px 16px; background: var(--sunk); border: 1px solid var(--rule); }
.ask-head {
  margin: 0 0 10px;
  font: 700 11px/1 var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ask-item {
  display: flex; align-items: center; justify-content: space-between; gap: 11px;
  width: 100%; min-height: var(--tap);
  margin-bottom: 1px; padding: 8px 12px;
  background: var(--paper); border: 1px solid var(--rule);
  color: var(--ink); font: 400 15px/1.35 var(--text);
  text-align: left; cursor: pointer;
}
.ask-item:hover { background: var(--sec-wash); border-color: var(--sec); }
.ask-split { flex: 0 0 auto; font: 400 11.5px/1 var(--mono); color: var(--ink-faint); }
.ask-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* States and cells the renderers emit. */
.conc-manual { display: inline-flex; align-items: center; gap: 6px; }
.conc-unit {
  min-height: 38px; padding: 0 8px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font: 400 15px/1 var(--text);
}
.doseblock.is-book { border-left: 0; }
.regbox.is-stated { border-color: var(--warn); }
.scale.is-set .scale-hint { color: var(--on-ink-soft); }
.c-param { font-weight: 700; }
.reftable td { vertical-align: top; }
.variant.is-added { background: var(--sunk); padding-left: 12px; }
.drugs-field .absent { display: block; max-width: var(--measure); }
.ask-name { flex: 1 1 auto; }

/* ------------------------------------------------------------- monograph */

.backlink {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 22px 0 0;
  border: 0; background: none; padding: 0;
  color: var(--sec); font: 700 14px/1 var(--text); cursor: pointer;
}

.detail-head { padding: 20px 0 16px; border-bottom: 2px solid var(--ink); }
.detail-name {
  font: 700 clamp(26px, 4vw, 38px)/1.12 var(--text);
  letter-spacing: -0.025em;
}
.detail-species { margin: 9px 0 0; max-width: var(--measure); color: var(--ink-soft); font-size: 15px; }

/* Each field is a monograph section: a labelled head, then hanging content. */
.field { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.field-label {
  font: 700 11px/1 var(--text);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sec);
  margin-bottom: 12px;
}
.field-note { margin: 12px 0 0; max-width: var(--measure); font-size: 14px; color: var(--ink-soft); }

.notes, .note-block { max-width: var(--measure); }
.notes li { margin-bottom: 7px; }

.absent { color: var(--ink-faint); font-style: normal; }

.variant { padding: 12px 0; border-top: 1px solid var(--rule); }
.variant:first-child { border-top: 0; padding-top: 0; }
.variant-cite, .cite {
  margin: 7px 0 0;
  font: 400 11.5px/1.5 var(--mono);
  color: var(--ink-faint);
}
.cite-label { font-weight: 700; color: var(--ink-soft); }

/* Provenance marks. Colour never carries this alone — each has a word. */
.origin-tag, .via, .tag {
  display: inline-block;
  font: 700 10px/1 var(--text);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 6px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  background: var(--paper);
  margin-right: 6px;
}
.via-tx  { color: var(--sec); border-color: currentColor; }
.via-ind { color: var(--ink); border-color: var(--ink); }
.block-origin { margin: 0 0 10px; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill {
  display: inline-flex; align-items: center;
  min-height: 34px; padding: 0 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink); text-decoration: none;
  font-size: 14px;
}
.pill:hover { border-color: var(--sec); color: var(--sec); }
.pill-tx { border-color: var(--sec); color: var(--sec); }

.drugsuggest {
  display: block; padding: 13px 15px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  border: 1px solid var(--rule); margin-bottom: -1px;
}
.drugsuggest:hover { background: var(--sunk); }
.drugsuggest-name { font-weight: 700; }
.drugsuggest-class { font: 400 11.5px/1 var(--text); color: var(--ink-faint); margin-left: 7px; }
.drugsuggest-dose { display: block; margin-top: 5px; font-size: 14px; color: var(--ink-soft); }

/* ------------------------------------------------------------ dose block */

.scale { position: sticky; top: 0; z-index: 10; background: var(--ink); color: #fff; }
.scale-in {
  max-width: var(--shell); margin: 0 auto;
  padding: 11px var(--gutter);
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.scale-label { font: 700 11px/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-soft); }
.scale-field { display: inline-flex; align-items: center; gap: 7px; }
.scale-input {
  width: 108px; min-height: 38px;
  border: 1px solid var(--on-ink-rule); border-radius: var(--radius);
  background: #1e2225; color: #fff;
  font: 700 17px/1 var(--text);
  padding: 0 11px;
}
.scale-unit { font-weight: 700; }
.scale-hint { margin: 0; flex: 1 1 220px; font-size: 13px; color: var(--on-ink-soft); }

.doseblock { padding: 16px 0; border-top: 1px solid var(--rule); }
.doseblock:first-child { border-top: 0; }
.dose-species {
  font: 700 12px/1 var(--text);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sec); margin-bottom: 9px;
}
.dose-species a { color: inherit; }
.dose { padding: 10px 0; border-top: 1px solid var(--rule); }
.dose:first-of-type { border-top: 0; }
.dose-spec { font: 500 15px/20px var(--mono); }
/* The resolved amount is the reason the page exists, so it is set at display
   size in the data face rather than folded into the prose. */
.dose-answer { font: 500 24px/28px var(--mono); }
.dose-amount { color: var(--ink); background: var(--sunk); padding: 2px 8px; }
.dose-for, .dose-unit { font-size: 14px; color: var(--ink-soft); font-weight: 400; }
.dose-ml { display: inline-block; margin-left: 9px; font-weight: 700; }
.dose-ml-note { font: 400 11.5px/1 var(--mono); color: var(--ink-faint); margin-left: 6px; }
.dose-context { margin: 7px 0 0; max-width: var(--measure); font-size: 14px; color: var(--ink-soft); }
.dose-source { font: 400 11.5px/1.5 var(--mono); color: var(--ink-faint); }
.dose-waiting, .dose-unparsed { color: var(--ink-faint); font-size: 14px; }
.dosepreview { margin: 8px 0 0; max-width: var(--measure); font: 500 15px/20px var(--mono); }

.conc { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 12px 0; }
.conc-label { font: 700 11px/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.conc-select, .conc-input {
  min-height: 38px; padding: 0 10px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font: 400 15px/1 var(--text);
}
.conc-input { width: 96px; }
.conc-note { margin: 0; font-size: 13px; color: var(--ink-faint); flex-basis: 100%; }

/* Regulatory: the one finding with a consequence after the animal leaves. */
.regbox, .withdraw {
  margin: 10px 0 0;
  padding: 12px 14px;
  background: var(--warn-wash);
  border: 1px solid var(--warn);
  font-size: 14px;
  color: var(--ink);
  max-width: var(--measure);
}
.reg-flag, .withdraw b {
  display: block;
  font: 700 10px/1 var(--text);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 6px;
}
.reg-text { margin: 0; }

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

.tablewrap { overflow-x: auto; margin-top: 14px; border: 1px solid var(--rule); }
.reftable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
.reftable th, .reftable td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--rule); }
.reftable th {
  font: 700 10.5px/1.3 var(--text);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--sunk);
}
.reftable tbody tr:last-child td { border-bottom: 0; }
/* A reference table sets its label column in the text face and its value
   column in the data face, so a column of figures lines up down the page. */
.c-value { font: 500 15px/20px var(--mono); white-space: nowrap; }
.c-unit, .c-sp { color: var(--ink-soft); }
.c-src { font: 400 11px/1.4 var(--mono); color: var(--ink-faint); }

.ref-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ref-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  color: var(--ink);
  font: 700 12.5px/1 var(--text);
  text-decoration: none;
}
.ref-nav a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ref-group { padding-top: 24px; }
.ref-count { font: 400 11.5px/1 var(--mono); color: var(--ink-faint); }

/* Vitals checker: a reading set against every published band. */
.vitals { display: flex; flex-wrap: wrap; gap: 13px; align-items: flex-end; }
/* The review's weight row sits under a picker, not against a heading. */
.vitals-spaced { margin-top: 14px; }
.vital { display: grid; gap: 5px; }
.vital-label { font: 700 10.5px/1 var(--text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.vital-field { display: inline-flex; align-items: center; gap: 6px; }
.vital-input, .vital-select {
  min-height: 42px; padding: 0 11px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
  font: 400 16px/1 var(--text);
}
.vital-input { width: 108px; }
.vital-unit { font-size: 14px; color: var(--ink-soft); }
.vital-clear {
  min-height: 42px; padding: 0 15px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); color: var(--ink-soft);
  font: 700 14px/1 var(--text); cursor: pointer;
}
.vital-clear:hover { border-color: var(--ink); color: var(--ink); }

.vital-block { margin-top: 18px; }
.vital-head { font: 700 11px/1 var(--text); letter-spacing: 0.11em; text-transform: uppercase; color: var(--sec); margin-bottom: 9px; }
.vital-summary { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }
.vital-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 4px 13px;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  margin-bottom: -1px;
  background: var(--paper);
}
.vital-verdict {
  font: 700 10.5px/1.4 var(--text);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.vital-row.is-high, .vital-row.is-low { background: var(--warn-wash); border-color: var(--warn); }
.vital-row.is-high .vital-verdict, .vital-row.is-low .vital-verdict { color: var(--warn); }
.vital-row.is-ok .vital-verdict { color: var(--sec-values); }
.vital-range { max-width: var(--measure); font: 500 15px/20px var(--mono); }
.vital-where { grid-column: 2; max-width: var(--measure); font-size: 14px; color: var(--ink-soft); }
.vital-src { grid-column: 2; font: 400 11px/1.45 var(--mono); color: var(--ink-faint); }
.vital-caveat { margin: 11px 0 0; font-size: 13px; color: var(--ink-soft); max-width: var(--measure); }

/* ------------------------------------------------------------ case sheet */

/* The mock's full-width confirm bar. Saving a case is the one committing
   action on this page, so it gets the whole measure and the solid fill. */
.casebar { display: flex; flex-wrap: wrap; gap: 9px; align-items: stretch; }
.casebar-id { flex: 1 1 100%; min-width: 0; }
.casebar-save {
  flex: 0 0 auto; min-height: var(--tap); padding: 0 20px;
  border: 0; border-radius: 0;
  background: var(--ink); color: #fff;
  font: 700 14px/1 var(--text); text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}
.casebar-save {
  flex: 1 1 100%;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.casebar-save:hover { background: var(--sec); }
.casebar-save svg { width: 16px; height: 16px; display: block; }

.cases { margin-top: 15px; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.case { display: flex; align-items: stretch; background: var(--paper); }
.case-open {
  flex: 1 1 auto; min-width: 0;
  display: grid; gap: 2px;
  padding: 10px 14px;
  border: 0; background: none; text-align: left;
  color: var(--ink); cursor: pointer;
}
.case-open:hover { background: var(--sec-wash); }
.case-ref { font: 700 15px/1.3 var(--text); }
.case-line { max-width: var(--measure); font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-when { font: 400 11px/1 var(--mono); color: var(--ink-faint); }
.case-drop {
  flex: 0 0 auto; width: var(--tap);
  border: 0; border-left: 1px solid var(--rule);
  background: none; color: var(--ink-faint);
  font-size: 21px; line-height: 1; cursor: pointer;
}
.case-drop:hover { background: var(--warn-wash); color: var(--warn); }

/* --------------------------------------------------------------- status */

.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--ink); color: #fff;
  transform: translateY(100%);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 12;
}
.statusbar.is-up { transform: translateY(0); }
.statusbar-in {
  max-width: var(--shell); margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 12px;
}
.statusbar-count { flex: 1 1 auto; font-size: 14px; }
.statusbar-sub { display: block; font: 400 11.5px/1.4 var(--text); color: var(--on-ink-soft); }
.statusbar-reset, .statusbar-go {
  min-height: 40px; padding: 0 15px;
  border-radius: var(--radius);
  font: 700 14px/1 var(--text); cursor: pointer;
}
.statusbar-reset { border: 1px solid var(--on-ink-rule); background: none; color: #fff; }
.statusbar-go { border: 0; background: #fff; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .statusbar { transition: none; }
}


/* ----------------------------------------------------------------- dark
 *
 * The light theme is chosen from the use scene — a phone read at midday in
 * open sun — so it stays the default. Dark is for the other half of the job:
 * a shed at night, a late calving, a torch in the other hand. It is a real
 * inversion of the same formulary, not a dimmed screenshot of it: the page
 * goes to ink, the rules stay hairlines, and the four section colours are
 * relit so they still clear 4.5:1 on a dark ground.
 *
 * The system preference decides unless the reader has said otherwise, and
 * data-theme on the root wins in both directions.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0a0a0a;
    --page:         #000000;
    --sunk:         #1b1b1b;
    --ink:          #ffffff;
    --ink-soft:     #c6c6c6;
    --ink-faint:    #9a9a9a;
    --rule:         #333333;
    --rule-strong:  #ffffff;
    --sec-front:  #ffffff;
    --sec-find:   #ff6b6b;
    --sec-drugs:  #7ea6dd;
    --sec-values: #4ec9b0;
    --sec-review: #c9a5d8;
    --warn:      #ff6b6b;
    --warn-wash: #2b1010;
    --on-ink-rule: #333333;
    --on-ink-soft: #c6c6c6;
  }
  :root:not([data-theme="light"]) body.sec-find   { --sec: var(--sec-find);   --sec-wash: #1f1010; }
  :root:not([data-theme="light"]) body.sec-drugs  { --sec: var(--sec-drugs);  --sec-wash: #0e1520; }
  :root:not([data-theme="light"]) body.sec-values { --sec: var(--sec-values); --sec-wash: #0c1a17; }
  :root:not([data-theme="light"]) body.sec-review { --sec: var(--sec-review); --sec-wash: #171019; }
  :root:not([data-theme="light"]) .section-open, :root:not([data-theme="light"]) .tab { color: #000; }
  :root:not([data-theme="light"]) .sign[aria-pressed="true"] { background: #fff; color: #000; }
  :root:not([data-theme="light"]) .sign[aria-pressed="true"] .sign-n { color: #000; }
  :root:not([data-theme="light"]) .sign[aria-pressed="true"] .sign-box { background: #000; border-color: #000; }
  :root:not([data-theme="light"]) .sign[aria-pressed="true"] .sign-box::after { border-color: #fff; }
  :root:not([data-theme="light"]) .species-btn[aria-pressed="true"],
  :root:not([data-theme="light"]) .filter[aria-pressed="true"],
  :root:not([data-theme="light"]) .casebar-save { background: #fff; color: #000; }
  :root:not([data-theme="light"]) .badge-withdraw { color: #000; }
  :root:not([data-theme="light"]) .front-mast, :root:not([data-theme="light"]) .scale, :root:not([data-theme="light"]) .statusbar { background: #000; }
  :root:not([data-theme="light"]) .btn-primary { background: #fff; color: #000; }
  :root:not([data-theme="light"]) .skip { background: #fff; color: #000; }
  /* The section bar inverts to a light colour in dark mode, so everything
   printed on it has to invert with it. The description span carried its own
   white and was being left behind. */
:root:not([data-theme="light"]) .section-open > span { color: rgba(0, 0, 0, 0.80); }
:root:not([data-theme="light"]) .section-code { color: rgba(0, 0, 0, 0.72); }
:root:not([data-theme="light"]) .checker-verdict.is-ok, :root:not([data-theme="light"]) .checker-verdict.is-out { color: #000; }
:root:not([data-theme="light"]) .front-imprint { color: var(--on-ink-soft); border-top-color: #333; }}

/* The reader's explicit choice, which must win over the system either way. */
:root[data-theme="dark"] {
    --paper:        #0a0a0a;
    --page:         #000000;
    --sunk:         #1b1b1b;
    --ink:          #ffffff;
    --ink-soft:     #c6c6c6;
    --ink-faint:    #9a9a9a;
    --rule:         #333333;
    --rule-strong:  #ffffff;
    --sec-front:  #ffffff;
    --sec-find:   #ff6b6b;
    --sec-drugs:  #7ea6dd;
    --sec-values: #4ec9b0;
    --sec-review: #c9a5d8;
    --warn:      #ff6b6b;
    --warn-wash: #2b1010;
    --on-ink-rule: #333333;
    --on-ink-soft: #c6c6c6;
}
:root[data-theme="dark"] body.sec-find   { --sec: var(--sec-find);   --sec-wash: #1f1010; }
:root[data-theme="dark"] body.sec-drugs  { --sec: var(--sec-drugs);  --sec-wash: #0e1520; }
:root[data-theme="dark"] body.sec-values { --sec: var(--sec-values); --sec-wash: #0c1a17; }
:root[data-theme="dark"] body.sec-review { --sec: var(--sec-review); --sec-wash: #171019; }
:root[data-theme="dark"] .section-open, :root[data-theme="dark"] .tab { color: #000; }
:root[data-theme="dark"] .sign[aria-pressed="true"] { background: #fff; color: #000; }
:root[data-theme="dark"] .sign[aria-pressed="true"] .sign-n { color: #000; }
:root[data-theme="dark"] .sign[aria-pressed="true"] .sign-box { background: #000; border-color: #000; }
:root[data-theme="dark"] .sign[aria-pressed="true"] .sign-box::after { border-color: #fff; }
:root[data-theme="dark"] .species-btn[aria-pressed="true"],
:root[data-theme="dark"] .filter[aria-pressed="true"],
:root[data-theme="dark"] .casebar-save { background: #fff; color: #000; }
:root[data-theme="dark"] .badge-withdraw { color: #000; }
:root[data-theme="dark"] .front-mast, :root[data-theme="dark"] .scale, :root[data-theme="dark"] .statusbar { background: #000; }
:root[data-theme="dark"] .btn-primary { background: #fff; color: #000; }
:root[data-theme="dark"] .skip { background: #fff; color: #000; }
/* The section bar inverts to a light colour in dark mode, so everything
   printed on it has to invert with it. The description span carried its own
   white and was being left behind. */
:root[data-theme="dark"] .section-open > span { color: rgba(0, 0, 0, 0.80); }
:root[data-theme="dark"] .section-code { color: rgba(0, 0, 0, 0.72); }
:root[data-theme="dark"] .checker-verdict.is-ok, :root[data-theme="dark"] .checker-verdict.is-out { color: #000; }
:root[data-theme="dark"] .front-imprint { color: var(--on-ink-soft); border-top-color: #333; }


/* The toggle itself: three states, and the label says which, because an icon
   alone cannot distinguish "following the system" from "forced light". */
.theme {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
  font: 700 12px/1 var(--text);
  cursor: pointer;
}
.theme:hover { border-color: var(--ink); color: var(--ink); }
.theme svg { width: 15px; height: 15px; display: block; }

/* ------------------------------------------------- values: the checker */

/* The ruled grid is drawn by the container, not by borders on the cells: the
   container is filled with ink and the cells are laid out with a 1px gap, so
   every rule is exactly one pixel and no two cells can double one up between
   them. This is the same device the drug page's dose grid uses. */
.checker {
  margin-top: 14px;
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}

.checker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  background: var(--ink);
  color: var(--paper);
}
.checker-title {
  font: 700 15px/1.2 var(--text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.checker-tag { font: 500 11.5px/1 var(--mono); color: var(--on-ink-soft); }

.checker-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 104px;
  gap: 1px;
  background: var(--ink);
}
.checker-pick { grid-template-columns: 88px minmax(0, 1fr); }

.checker-key {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--sunk);
  font: 700 11.5px/1.2 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.checker-field {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 12px;
  background: var(--paper);
}
.checker-in, .checker-sel {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 11px 0;
  background: none;
  color: var(--ink);
  font: 500 19px/1.2 var(--mono);
}
.checker-sel { font: 400 16px/1.2 var(--text); cursor: pointer; }
.checker-in:focus, .checker-sel:focus { outline: 2px solid var(--sec); outline-offset: -2px; }
.checker-in::placeholder { color: var(--ink-faint); }
.checker-unit { flex: 0 0 auto; font: 400 13px/1 var(--text); color: var(--ink-soft); }

/* One reading, one chip. It summarises the cited rows underneath and never
   outranks them — see chipFor() in assets/reference.js. */
.checker-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  background: var(--sunk);
  color: var(--ink-soft);
  font: 700 12px/1.2 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
}
.checker-verdict.is-ok    { background: var(--sec-values); color: #fff; }
.checker-verdict.is-out   { background: var(--warn); color: #fff; }
.checker-verdict.is-mixed { background: var(--ink); color: var(--paper); letter-spacing: 0.04em; }

.checker-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 13px;
  background: var(--paper);
}
.checker-clear {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-soft);
  font: 700 11.5px/1 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.checker-clear:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.checker-note { flex: 1 1 200px; font-size: 13px; color: var(--ink-faint); }

/* --------------------------------------------- values: species tables */

.refcards { display: grid; gap: 26px; padding-top: 8px; }
.ref-group { scroll-margin-top: 12px; }

.refcard {
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.refcard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  background: var(--ink);
  color: var(--paper);
}
.refcard-name {
  font: 700 17px/1.2 var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.refcard-n { flex: 0 0 auto; font: 500 11.5px/1 var(--mono); color: var(--on-ink-soft); }

/* Narrow: parameter beside the figure, citation on its own line under both.
   Wide: three columns. The citation is never the thing that scrolls away. */
.refrow {
  display: grid;
  grid-template-columns: minmax(104px, 33%) minmax(0, 1fr);
  gap: 1px;
  background: var(--ink);
}
.refrow-key {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 12px;
  background: var(--sunk);
}
.refrow-param { font: 700 14.5px/19px var(--text); color: var(--ink); }
.refrow-qual {
  font: 400 11.5px/1.3 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.refrow-val {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  background: var(--paper);
}
.refrow-num {
  font: 500 15px/21px var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.refrow-unit { color: var(--ink-soft); }
.refrow-cite {
  grid-column: 1 / -1;
  padding: 8px 12px;
  background: var(--paper);
  font: 400 11px/1.5 var(--mono);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

@media (min-width: 900px) {
  .refrow { grid-template-columns: 260px minmax(0, 1fr) minmax(220px, 32%); }
  .refrow-cite { grid-column: auto; display: flex; align-items: center; padding: 10px 12px; }
}

/* ------------------------------------------------ review: the protocol */

/* What the findings were computed from, restated once. */
.sumplate {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.sumrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 10px var(--gutter);
  background: var(--sunk);
}
.sumrow-k {
  flex: 0 0 auto;
  font: 700 11px/1.4 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sumrow-v {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font: 700 16px/1.3 var(--text);
  color: var(--ink);
}
.sumrow-num { font: 500 16px/1.3 var(--mono); }

/* Does this drug belong to this condition's protocol? */
.fitline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.fitbox {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
}
.fitbox.is-no { background: var(--warn); color: #fff; }
.fitbox svg { width: 15px; height: 15px; display: block; }
.fitline-body { flex: 1 1 auto; min-width: 0; max-width: var(--measure); font-size: 15px; line-height: 1.5; }
.fitline-cite {
  display: block;
  margin-top: 3px;
  font: 400 11px/1.45 var(--mono);
  color: var(--ink-faint);
}

/* An interaction is the finding that changes what you do next, so it is the
   one block on the page printed as a solid panel rather than a ruled row. */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 12px 0;
  padding: 12px 13px;
  background: var(--ink);
  color: var(--paper);
}
.alert-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
}
.alert-icon svg { width: 16px; height: 16px; display: block; }
.alert-body { flex: 1 1 auto; min-width: 0; }
.alert-h {
  font: 700 13px/1.2 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.alert-pair { margin: 5px 0 0; font: 500 14px/1.4 var(--mono); color: var(--on-ink-soft); }
.alert-p { margin: 7px 0 0; max-width: var(--measure); font-size: 15px; line-height: 1.55; }
/* The inference, shown rather than assumed. */
.alert-why {
  margin: 9px 0 0;
  padding: 7px 9px;
  max-width: var(--measure);
  border: 1px solid var(--on-ink-rule);
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-ink-soft);
}
.alert-why b { color: var(--paper); font-weight: 700; }
.alert-cite { margin: 8px 0 0; font: 400 11px/1.45 var(--mono); color: var(--on-ink-soft); }

/* The regimen table: the same ruled grid the drug page and the values page
   use, so a dose looks the same wherever the reader meets it. */
.regimen { margin: 18px 0 0; padding-top: 4px; }
.regimen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 9px;
}
.regimen-name {
  font: 700 18px/22px var(--text);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.regimen-name:hover { color: var(--sec); }
.regimen-org {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.reggrid {
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.regrow { display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr); gap: 1px; background: var(--ink); }
.regrow-k {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  background: var(--sunk);
  font: 700 12.5px/1.3 var(--text);
  color: var(--ink);
}
.regrow-v {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 9px 12px;
  background: var(--paper);
  font: 500 15px/20px var(--mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.regrow-v.is-strong { background: var(--sunk); font-weight: 700; }

.regimen-cite {
  margin: 7px 0 0;
  text-align: right;
  font: 400 11px/1.5 var(--mono);
  color: var(--ink-faint);
}
.regnote {
  margin: 9px 0 0;
  max-width: var(--measure);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.regnote b {
  display: inline-block;
  margin-right: 5px;
  font: 700 10.5px/1.6 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
}

.wdhead {
  margin: 16px 0 8px;
  font: 700 11px/1 var(--text);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}
.wdgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.wdcell {
  display: grid;
  gap: 5px;
  justify-items: center;
  align-content: center;
  padding: 13px 8px;
  background: var(--paper);
  text-align: center;
}
.wdcell-t {
  font: 700 11px/1.3 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Whether, not how long — see withdrawalGrid() in assets/plan.js. */
.wdcell-s {
  font: 700 17px/1.2 var(--text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.wdcell.is-on .wdcell-s { color: var(--warn); }
.wdtext {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--sunk);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}
.wdtext.is-absent { color: var(--ink-soft); }

/* ------------------------------------------------------- end matter */

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 13px; font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }
.inline-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.inline-link:hover { color: var(--sec); }

.factgrid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 620px)  { .factgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .factgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fact {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: 15px 14px;
  background: var(--paper);
}
.fact b { font: 500 27px/1 var(--mono); color: var(--ink); }
.fact span { font-size: 14px; line-height: 1.45; color: var(--ink-soft); }

.addressplate {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.addressplate-key {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--sunk);
  font: 700 11.5px/1.2 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.addressplate-val {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 11px 12px;
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.35 var(--mono);
  overflow-wrap: anywhere;
}
a.addressplate-val:hover { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------- mail form */

.mailform { margin-top: 14px; max-width: 660px; display: grid; gap: 14px; }
.mailfield { display: grid; gap: 6px; }
.mailfield-k {
  font: 700 11px/1.3 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mailfield-v {
  width: 100%;
  min-height: var(--tap);
  padding: 11px 13px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--text);
}
textarea.mailfield-v { min-height: 150px; resize: vertical; }
.mailfield-v:focus { outline: 2px solid var(--sec); outline-offset: -2px; border-color: var(--ink); }
.mailfield-v::placeholder { color: var(--ink-faint); }

/* Off-screen rather than display:none — some bots skip anything hidden. */
.mailtrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mailsend {
  justify-self: start;
  min-height: var(--tap);
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font: 700 13px/1 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}
.mailsend:hover { background: var(--sec); }
.mailsend:disabled { background: var(--sunk); color: var(--ink-faint); cursor: not-allowed; }

.mailform.is-offline::after {
  content: "No connection. This page is the one part of FieldDx that needs one — the message cannot be sent until you are back online.";
  padding: 10px 12px;
  border: 1px solid var(--warn);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 14px;
  line-height: 1.5;
}

.formsay {
  margin: 14px 0 0;
  padding: 11px 13px;
  max-width: 660px;
  border-left: 4px solid var(--ink);
  background: var(--sunk);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.formsay.is-ok { border-left-color: var(--sec-values); }
.formsay.is-no { border-left-color: var(--warn); color: var(--warn); background: var(--warn-wash); }

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

/* Below the shell and joined to it, the way a colophon sits under the last
   page of text. The year is stamped by assets/store.js. */
.sitefoot {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px var(--gutter) 30px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ink);
}
.sitefoot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
}
.sitefoot-line { margin: 0; font: 500 12.5px/1.4 var(--mono); color: var(--ink-soft); }
.sitefoot-nav { display: flex; flex-wrap: wrap; }
.sitefoot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-left: -1px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  color: var(--ink);
  font: 700 11px/1 var(--text);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.sitefoot-nav a:first-child { margin-left: 0; }
.sitefoot-nav a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sitefoot-nav a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sitefoot-fine {
  margin: 14px 0 0;
  max-width: var(--measure);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 760px) {
  body { font-size: 17px; }
  .masthead-in { flex-wrap: wrap; gap: 8px 12px; }
  .runhead { flex-basis: 100%; order: 3; }
  .shell, .front-body { border-left: 0; border-right: 0; }
  .specimen { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .specimen-notes { padding-top: 0; }
  .spec-line { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .front-mast { padding: 40px var(--gutter) 34px; }
  .regrow { grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); }
  .sumrow-v { text-align: left; flex-basis: 100%; }
  .checker-line { grid-template-columns: 78px minmax(0, 1fr) 92px; }
  .checker-pick { grid-template-columns: 78px minmax(0, 1fr); }
  .vital-row { grid-template-columns: minmax(0, 1fr); }
  .vital-where, .vital-src { grid-column: 1; }
  .jump-note { display: none; }
}

@media (max-width: 360px) {
  .checker-line { grid-template-columns: 66px minmax(0, 1fr) 80px; }
  .checker-pick { grid-template-columns: 66px minmax(0, 1fr); }
  .checker-verdict { font-size: 11px; letter-spacing: 0.05em; }
  .refrow { grid-template-columns: minmax(92px, 38%) minmax(0, 1fr); }
}

@media (min-width: 1000px) {
  /* A formulary's dense prose sets to a two-column measure. */
  .notes.is-wide { column-count: 2; column-gap: 34px; }
}

/* ------------------------------------------------------------- desktop
   The layout was built up from the phone and never given anything to do with
   the extra width: on a 1600px screen every card list ran one item wide down
   the middle, and the two browse pages were 9,290px and 11,354px tall. */

/* The section tabs are full-bleed signage, but --shell was pinned at 1180px,
   so on a 1920px screen the nav ran the whole width while everything under it
   sat in a 1180px strip with 370px of dead grey down each side. The bar looked
   like it belonged to a wider page than the one below it.

   Releasing the token fixes every band at once: the masthead, the shell, the
   sticky weight bar and the footer all measure from --shell, so they stay
   flush with each other and with the tabs. Prose does not sprawl as a result —
   reading blocks are held to --measure independently of the shell. */
/* 1180px, not 1240: between those two the fixed shell was still 22px
   narrower each side than the tab bar above it. */
@media (min-width: 1180px) {
  :root { --shell: 100%; --gutter: 26px; }
}

@media (min-width: 1080px) {
  /* Two up. Halves the scroll on the drug guide and the condition results,
     and a drug card at 570px is still wider than the 375px it was designed
     against. The 1px grid gap keeps drawing the rules between cards. */
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Reading measure. These had no cap and were setting to the full 1,146px
     shell — around 190 characters a line, roughly triple what is readable. */
  .dose-waiting, .dose-unparsed, .cluster, .dose-context, .reg-text {
    max-width: var(--measure);
  }

  /* Controls are not content and should not grow with the page. A number
     input 950px wide reads as a bug, not as generosity. */
  .checker { max-width: 620px; }
  .reggrid, .wdgrid, .wdtext { max-width: 720px; }
  .addressplate { max-width: 520px; }
  .scale-in { max-width: var(--shell); }
}

/* --------------------------------------------------- landing at desktop
   The title page was one narrow column down the middle of a wide screen: at
   1920px the hero's copy stopped at 568px inside a 1905px black band, and the
   refusals and colophon ran 749px inside an 1851px section. The right-hand
   half of the masthead was simply empty.

   The hero now sits in the left column and the species plate in the right, so
   the black band is one object again and the animals — the first thing a vet
   actually wants to press — are above the fold instead of below it. The hero
   was moved inside .front-body in the markup purely so the two are siblings a
   grid can pair; at narrow widths it is still the first thing in the flow and
   still full-bleed, so nothing about the phone or tablet layout moves. */
@media (min-width: 1180px) {
  .front-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  /* Break out of .front-body's gutter and border on the outer edge only, so
     the band still reaches the screen edge under the full-bleed tabs. */
  .front-mast {
    grid-column: 1;
    margin-left: calc(var(--gutter) * -1);
    padding-right: 40px;
    /* The species plate is the taller of the two and sets the row height, so
       the masthead's copy is centred in what it is given rather than sitting
       against the top with 178px of empty black under the buttons. */
    display: grid;
    align-content: center;
  }
  .front-sec:not(.front-sec-animals) { grid-column: 1 / -1; }

  .front-sec-animals {
    grid-column: 2;
    margin-right: calc(var(--gutter) * -1);
    padding: 54px var(--gutter) 46px 40px;
    background: var(--ink);
    border-bottom: 0;
  }
  .front-sec-animals .front-h { color: #fff; border-bottom-color: var(--on-ink-rule); }
  .front-sec-animals .front-p { color: var(--on-ink-soft); }

  /* Three across in half the width, not the nine the full-width plate used. */
  .front-sec-animals .beasts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--on-ink-rule);
    border-color: var(--on-ink-rule);
  }
  .front-sec-animals .beast { background: var(--ink); color: #fff; }
  .front-sec-animals .beast:hover { background: #fff; color: var(--ink); }
  .front-sec-animals .beast-n { color: var(--on-ink-soft); }
  .front-sec-animals .beast:hover .beast-n { color: var(--ink-soft); }

  /* Two blocks that were sitting at a reading measure inside a section three
     times their width. They are lists, not prose, so they take the room. */
  .refuses { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; column-gap: 38px; }
  .colophon ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 38px; }
  .colophon { max-width: none; }

  /* The specimen's annotation column was pinned at 232px, so on a wide screen
     the notes were squeezed into a hard-to-read ribbon while 659px sat empty
     to their right. Both columns are proportional now: the facsimile entry
     keeps the larger share and the notes run to the end of the row. */
  .specimen { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .specimen-note { font-size: 14px; }

  /* "Built to work with nothing" is a full-width section whose contents were
     not: two stacked paragraphs at a 749px measure down the left, with half
     the row empty. Side by side they fill it and each keeps its measure. */
  #offline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 38px;
    align-items: start;
  }
  #offline .front-h,
  #offline .front-actions { grid-column: 1 / -1; }
  #offline .front-p { max-width: none; }
}

/* Both dark blocks force the masthead to true black, and the species plate is
   now part of that same band, so it has to follow.

   Width-gated on purpose. An earlier version of these rules sat outside the
   media query and painted the section black at every size — on a phone that
   meant a black panel under text that is only recoloured at desktop, so the
   plate went black-on-black. The plate is only part of the masthead when it is
   beside it. */
@media (min-width: 1180px) {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .front-sec-animals { background: #000; }
    :root:not([data-theme="light"]) .front-sec-animals .beast { background: #000; color: #fff; }
    :root:not([data-theme="light"]) .front-sec-animals .beast:hover { background: #fff; color: #000; }
  }
  :root[data-theme="dark"] .front-sec-animals { background: #000; }
  :root[data-theme="dark"] .front-sec-animals .beast { background: #000; color: #fff; }
  :root[data-theme="dark"] .front-sec-animals .beast:hover { background: #fff; color: #000; }
}

@media (min-width: 1560px) {
  /* Three up. With the shell released, two columns on a 1920px screen would
     just make each card 940px wide — the same wasted measure as before, moved
     inside the card instead of beside it. */
  .results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The values page keeps the 900px row split, deliberately.
   Two rearrangements were tried at desktop width and both measured worse than
   leaving it alone (baseline 11,354px at 1600px):

     two columns of species cards   9,944px of taller rows, and the card
                                    dropped to 560px, so citations wrapped to
                                    four lines — median row 70px to 125px
     narrow figure / wide citation  14,865px. The premise was wrong: plenty of
                                    values are compound strings such as
                                    "Average: 38.5°C ; Critical Point: 39.5°C ;
                                    Beef Cow Range: …", and starving that
                                    column wraps them badly

   The page is long because the citations are long — two full book titles with
   page and table numbers on most rows. That is a content problem, not a
   layout one, and shortening a citation is not a change to make casually. */

@media print {
  .masthead, .tabs, .statusbar, .scale, .install { display: none; }
  .shell, .front-body { border: 0; max-width: none; }
}