/* FieldDx — the field notebook.
 *
 * Loaded after app.css, and deliberately overrides its skin rather than
 * editing it line by line: app.css still carries the layout skeleton (grids,
 * forms, the calculators), this file carries everything you can see.
 *
 * The idea: a vet's revision card, drawn by a person. Cream paper on a
 * blue-grey desk, every box outlined twice in a slightly different hand,
 * section badges in a poster face, prose in a hand-printed face. Colour does
 * the sorting a ruled grid used to do — one box colour per kind of fact — and
 * a section is always named by its word as well as its colour.
 *
 * What does NOT change: provenance and figures. Citations stay in the mono
 * face under the box they belong to, doses stay in the plain figure face, and
 * a box with nothing to say still says "Not specified in source".
 */

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

@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-latin.woff2") format("woff2");
  font-weight: 400;
  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;
}
/* Patrick Hand sets small for its point size; size-adjust brings its x-height
   level with the Atkinson text it sits beside, so no component needs its own
   font-size bump. */
@font-face {
  font-family: "Patrick Hand";
  src: url("fonts/PatrickHand-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 112%;
  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;
}

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

:root {
  --paper:        #fdf7e8;
  --page:         #dfe8f5;
  --sunk:         #f4ead0;
  --ink:          #2b2217;
  --ink-soft:     #55452f;
  --ink-faint:    #6b5b45;
  --rule:         #dccdaa;
  --rule-strong:  #2b2217;

  --accent-brass: #c9a24a;
  --accent-marigold: #d9930d;
  --hero-bg:   #fdf7e8;
  --hero-soft: #55452f;
  --hero-gold: #8a6400;

  --sec-front:  #2b2217;
  --sec-find:   #a8381c;
  --sec-drugs:  #1f5a96;
  --sec-values: #2e6b3d;
  --sec-review: #6b2f63;
  --sec: var(--sec-front);
  --sec-wash: #f4ead0;

  --warn:      #a8381c;
  --warn-wash: #fbe6dc;

  --text:    "Patrick Hand", "Atkinson Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --figure:  "Atkinson Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Anton", "Atkinson Next", "Arial Narrow", sans-serif;

  --radius: 14px;
  --gutter: 18px;
  --shell: 1220px;

  /* one irregular outline, used by everything that is a "box": the four
     corners are not the same size, and the horizontal and vertical radii
     differ, which is what keeps it from reading as a rounded rectangle */
  --wobble-a: 22px 26px 20px 28px / 26px 20px 28px 22px;
  --wobble-b: 26px 20px 28px 22px / 20px 28px 22px 26px;
  --wobble-c: 18px 24px 22px 20px / 24px 18px 20px 24px;
  --lift: 0 2px 0 rgba(43, 34, 23, .07), 0 18px 34px -20px rgba(43, 34, 23, .42);

  --on-ink-rule: #4a3f2e;
  --on-ink-soft: #d6c9ad;
}

body.sec-find   { --sec: var(--sec-find);   --sec-wash: #fbe9e0; }
body.sec-drugs  { --sec: var(--sec-drugs);  --sec-wash: #e3edf8; }
body.sec-values { --sec: var(--sec-values); --sec-wash: #e6f1e1; }
body.sec-review { --sec: var(--sec-review); --sec-wash: #f2e4ef; }

/* Box themes. --bx is the pill and the outline; --bx-tint the fill. */
.bx-green { --bx: #2e6b3d; --bx-tint: #e9f2e3; }
.bx-rust  { --bx: #a8381c; --bx-tint: #fbe9e0; }
.bx-gold  { --bx: #8a6400; --bx-tint: #fbf1cf; }
.bx-teal  { --bx: #1e6a6e; --bx-tint: #e1f0ee; }
.bx-brown { --bx: #7a3f1d; --bx-tint: #f6e7d8; }
.bx-blue  { --bx: #1f5a96; --bx-tint: #e3edf8; }
.bx-plum  { --bx: #6b2f63; --bx-tint: #f2e4ef; }
.cbox, .pill, .callout { --bx-on: #ffffff; }

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

body {
  background-color: var(--page);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  font: 400 18px/1.45 var(--text);
  font-variant-numeric: normal;
  color: var(--ink);
}
@media (max-width: 760px) { body { font-size: 18px; } }

.fx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

h1, h2, h3 { letter-spacing: 0; }
a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* figures, controls and anything a dose is read from stay in the plain face */
input, select, textarea, button { font-family: var(--figure); }
.dose, .dose *, .dosegrid, .dosegrid *, .checker *, .reftable, .reftable *,
.scale, .scale *, .wdcalc-out, code, td, th { font-family: var(--figure); }
.dose-spec, .dose-answer, .dosegrid-rate, .dosegrid-amt, .cite p, .variant-cite,
.result-cite, .cbox-cite, .dose-source, .filter-n, .sign-n, .count { font-family: var(--mono); }

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

.masthead {
  background: var(--paper);
  border-bottom: 0;
  position: relative;
}
.masthead::after {
  content: "";
  display: block;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 9'%3E%3Cpath d='M0 4.5Q8 .5 16 4.5T32 4.5T48 4.5T64 4.5' fill='none' stroke='%232b2217' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 64px 9px;
}
.wordmark {
  font: 400 27px/1 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  gap: 10px;
}
.logo-mark { border-radius: 8px 9px 7px 10px; filter: url(#fx-grain); }
.runhead {
  font: 400 15px/1.2 var(--text);
  letter-spacing: .03em;
  text-transform: none;
  color: var(--ink-faint);
}
.install, .theme, .lang {
  border: 2px solid var(--ink);
  border-radius: 16px 20px 14px 22px / 20px 14px 22px 16px;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1 var(--text);
  padding: 0 14px;
  min-height: 42px;
}
.install { background: var(--sec-find); color: #fff; border-color: var(--sec-find); }
.install:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.theme:hover, .lang:hover { background: var(--sunk); border-color: var(--ink); }

.tabs {
  gap: 7px;
  padding: 12px var(--gutter) 0;
  border: 0;
  max-width: var(--shell);
  margin: 0 auto;
  background: none;
  align-items: flex-end;
}
.tab {
  min-height: 46px;
  border: 2.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 18px 22px 0 0 / 20px 18px 0 0;
  font: 400 clamp(15px, 4vw, 20px)/1 var(--display);
  letter-spacing: .05em;
  color: #fff;
  box-shadow: none;
  margin-bottom: 0;
}
.tab:last-child { border-right: 2.5px solid var(--ink); }
.tab:nth-child(2) { border-radius: 22px 18px 0 0 / 18px 22px 0 0; }
.tab:nth-child(3) { border-radius: 20px 24px 0 0 / 22px 18px 0 0; }
.tab[aria-current] { box-shadow: none; min-height: 54px; filter: none; }
.tab:not([aria-current]) { filter: saturate(.85) brightness(1.04); }
.tab:hover { filter: brightness(1.1); }

/* --------------------------------------------------------------- the page */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 0 0 28px 32px / 0 0 32px 26px;
  box-shadow: var(--lift);
  padding: 0 var(--gutter) 90px;
}
@media (max-width: 760px) {
  .shell { border-left: 0; border-right: 0; border-radius: 0; }
}

.block { border-bottom: 2.5px dashed var(--rule); padding: 26px 0; }
.block:last-of-type { border-bottom: 0; }

/* section opener: a banner in the section's colour, lettered in the poster face */
.section-open {
  margin: 22px 0 6px;
  padding: 16px 22px 18px;
  background: var(--sec);
  border: 3px solid var(--ink);
  border-radius: var(--wobble-a);
  color: #fff;
  font: 400 clamp(32px, 6vw, 58px)/1 var(--display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.section-open > span {
  font: 400 19px/1.35 var(--text);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, .94);
  max-width: 60ch;
  margin-top: 8px;
}
.section-code { font: 400 14px/1.2 var(--text); letter-spacing: .04em; color: #fff; }

.eyebrow {
  font: 400 26px/1.1 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  padding-bottom: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath d='M0 4Q6 0 12 4T24 4T36 4T48 4' fill='none' stroke='%23a8381c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom / 36px 6px;
  border: 0;
}
body.sec-drugs  .eyebrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath d='M0 4Q6 0 12 4T24 4T36 4T48 4' fill='none' stroke='%231f5a96' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.sec-values .eyebrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath d='M0 4Q6 0 12 4T24 4T36 4T48 4' fill='none' stroke='%232e6b3d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.sec-review .eyebrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8'%3E%3Cpath d='M0 4Q6 0 12 4T24 4T36 4T48 4' fill='none' stroke='%236b2f63' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.block-note { font-size: 17px; color: var(--ink-soft); }

/* a card carries its own title, so the page banner steps aside while one is open */
body:has(#drugDetail:not(.is-hidden)) .section-open,
body:has(#detail:not(.is-hidden)) .section-open { display: none; }

/* a card carries its own title, so the page banner steps aside while one is open */
body:has(#drugDetail:not(.is-hidden)) .section-open,
body:has(#detail:not(.is-hidden)) .section-open { display: none; }

/* ------------------------------------------------------ buttons + inputs */

.btn {
  border: 2.5px solid var(--ink);
  border-radius: 18px 22px 16px 24px / 22px 16px 24px 18px;
  font: 400 21px/1 var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 52px;
  padding: 0 24px;
}
.btn-primary { background: var(--sec-find); border-color: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ghost, .btn-on-paper { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover, .btn-on-paper:hover { background: var(--sunk); color: var(--ink); }

.search, .conc-select, .conc-input, .advselect, .wdcalc-in {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px 20px 14px 22px / 20px 14px 22px 16px;
  font: 400 18px/1 var(--figure);
  color: var(--ink);
}
.search { font-size: 19px; }
.search:focus { border-color: var(--sec); }

.species-btn, .filter, .advchip {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: 16px 20px 14px 22px / 20px 14px 22px 16px;
  color: var(--ink);
  font: 400 17px/1 var(--text);
}
.species-btn:nth-child(even), .filter:nth-child(even) { border-radius: 20px 14px 22px 16px / 14px 22px 16px 20px; }
.species-btn:hover, .filter:hover, .advchip:hover { background: var(--sunk); }
.species-btn[aria-pressed="true"], .filter[aria-pressed="true"], .advchip[aria-pressed="true"] {
  background: var(--sec); color: #fff; border-color: var(--ink);
}
.filter[aria-pressed="true"] .filter-n, .advchip[aria-pressed="true"] .filter-n { color: #fff; }
.filter-sep { background: none; border-left: 2.5px dotted var(--ink-faint); width: 0; }

/* ----------------------------------------------------------- list rows */

.results, .contents, .jumps, .signlist, .drugs-list {
  gap: 14px;
  background: none;
  border: 0;
}
.result, .content-row, .jump, .sign, .beast {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble-a);
  box-shadow: none;
}
.results > :nth-child(3n+2), .contents > :nth-child(3n+2), .signlist > :nth-child(3n+2) { border-radius: var(--wobble-b); }
.results > :nth-child(3n+3), .contents > :nth-child(3n+3), .signlist > :nth-child(3n+3) { border-radius: var(--wobble-c); }
.result:hover, .content-row:hover, .jump:hover, .sign:hover, .beast:hover { background: var(--sec-wash); }
.result.is-top { background: var(--sec-wash); box-shadow: none; border-color: var(--sec); border-width: 3.5px; }
.result-name, .jump-name {
  font: 400 24px/1.05 var(--display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.result-species, .jump-excerpt, .content-what, .drugrow-class { font-size: 17px; color: var(--ink-soft); }
.drugrow { padding: 16px 18px; }
.content-name { font: 400 26px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.sign { padding: 8px 14px; }
.sign[aria-pressed="true"] { background: var(--sec); color: #fff; }
.sign-box { border: 2px solid var(--ink); border-radius: 6px 8px 5px 8px; }
.sign[aria-pressed="true"] .sign-box { background: #fff; border-color: #fff; }
.sign[aria-pressed="true"] .sign-box::after { border-color: var(--sec); }

.dosegrid { border: 2px solid var(--ink); border-radius: 14px 18px 12px 18px / 18px 12px 18px 14px; overflow: hidden; background: var(--paper); }
.dosegrid-key { background: var(--sec); color: #fff; font: 400 16px/1 var(--display); letter-spacing: .05em; }
.wd { border: 2px solid var(--ink); border-radius: 10px 12px 9px 12px; font: 400 14px/1 var(--text); letter-spacing: 0; text-transform: none; }

.badge { border: 2px solid var(--ink); border-radius: 10px 12px 9px 12px; font: 400 14px/1 var(--text); letter-spacing: 0; text-transform: none; }

/* ----------------------------------------------------- weight bar etc. */

.scale { background: var(--ink); border-bottom: 3px solid var(--ink); }
.scale-label { font: 400 17px/1 var(--text); letter-spacing: .03em; text-transform: none; color: var(--on-ink-soft); }
.scale-input { border-radius: 14px 16px 12px 18px / 16px 12px 18px 14px; font-family: var(--figure); }
.statusbar { background: var(--ink); }

/* --------------------------------------------------- monograph: the card */

.backlink { font: 400 20px/1 var(--text); color: var(--ink); margin: 20px 0 0; }
.backlink:hover { color: var(--sec); }

.hero {
  text-align: center;
  padding: 18px 0 8px;
  border: 0;
}
.hero-title {
  margin: 4px auto 0;
  max-width: 100%;
  font: 400 clamp(42px, 11vw, 110px)/.95 var(--display);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
  hyphens: manual;
  filter: url(#fx-grain);
}
.hero-title.len-m  { font-size: clamp(38px, 8.6vw, 88px); }
.hero-title.len-l  { font-size: clamp(32px, 6.4vw, 66px); }
.hero-title.len-xl { font-size: clamp(27px, 4.6vw, 48px); letter-spacing: .01em; }
.hero-title .via { font: 400 15px/1 var(--text); letter-spacing: 0; text-transform: none; vertical-align: middle; margin-left: 10px; filter: none; }
.plate-svg { display: block; width: min(460px, 94%); margin: 6px auto 0; height: auto; overflow: visible; }
.hero-sub {
  position: relative;
  display: inline-block;
  max-width: 34em;
  margin: 6px auto 0;
  padding-bottom: 9px;
  font: 400 23px/1.3 var(--text);
  color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 8'%3E%3Cpath d='M0 4Q8 0 16 4T32 4T48 4T64 4' fill='none' stroke='%232b2217' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") repeat-x left bottom / 48px 6px;
}
.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px 6px;
  background: var(--bx, var(--sec));
  color: var(--bx-on);
  border: 2px solid var(--ink);
  border-radius: 14px 18px 12px 18px / 18px 12px 18px 14px;
  font: 400 16px/1 var(--text);
}
.pill { text-decoration: none; }
.pill svg { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 1.8; }
.hero .citeline { margin: 14px auto 0; max-width: 62ch; }

/* the cards: dose first and full width, the rest tiled in a grid. hand.js
   (FieldDxCard.layout) cuts the boxes into rows and adds span-2 / span-full so
   the tiles in a row come out level. */
.cards { --cols: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 46px 30px; align-items: stretch; margin: 34px 0 10px; }
.cards.measuring { align-items: start; }
.cards-top + .cards { margin-top: 46px; }
@media (min-width: 760px)  { .cards { --cols: 2; } }
@media (min-width: 1120px) { .cards { --cols: 3; } }
.cards > .span-2 { grid-column: span 2; }
.cards > .span-full { grid-column: 1 / -1; }
.cards > .is-cols .cbox-body { column-count: var(--cols); column-gap: 34px; }
.cards > .is-cols2 .cbox-body { column-count: 2; column-gap: 34px; }
.cards > .is-cols li, .cards > .is-cols2 li,
.cards > .is-cols .cbox-sub, .cards > .is-cols2 .cbox-sub { break-inside: avoid; }
.cards > .is-cols .cbox-sub, .cards > .is-cols2 .cbox-sub { break-after: avoid; }
.cards > .is-cols .regbox, .cards > .is-cols2 .regbox { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cards > .is-cols .cbox-blk:first-child .cbox-sub, .cards > .is-cols2 .cbox-blk:first-child .cbox-sub { margin-top: 0; }

.cbox {
  position: relative;
  display: flex; flex-direction: column;
  margin: 0;
  padding: 36px 18px 16px;
  background: var(--bx-tint);
  border: 3px solid var(--bx);
  border-radius: var(--wobble-a);
  color: var(--ink);
}
.cards > .cbox:nth-child(3n+2) { border-radius: var(--wobble-b); }
.cards > .cbox:nth-child(3n+3) { border-radius: var(--wobble-c); }
/* drawn twice: a second, fainter outline just inside the first, set off a
   little as if the pen came down again */
.cbox::after {
  content: "";
  position: absolute;
  inset: 5px 6px 4px 5px;
  border: 1.5px solid var(--bx);
  border-radius: var(--wobble-c);
  opacity: .38;
  pointer-events: none;
}
.cbox-head {
  position: absolute;
  top: -24px; left: 14px; right: 14px;
  margin: 0;
  min-height: 46px;
  padding: 6px 18px 6px 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bx);
  color: var(--bx-on);
  border: 2.5px solid var(--ink);
  border-radius: 24px 26px 22px 28px / 26px 22px 28px 24px;
  font: 400 clamp(19px, 2.2vw, 23px)/1.05 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  z-index: 1;
}
.cbox-ic {
  position: absolute; left: -10px; top: 50%;
  width: 52px; height: 52px;
  transform: translateY(-50%) rotate(-4deg);
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--bx);
  border: 3px solid var(--bx);
  border-radius: 50% 48% 52% 50% / 52% 50% 48% 50%;
  filter: url(#fx-wobble);
}
.cbox-ic svg { width: 28px; height: 28px; stroke-width: 1.9; display: block; }
.cbox-body { flex: 1 1 auto; font: 400 19px/1.38 var(--text); }
.cbox-body > p { margin: 0 0 8px; }
.cbox-body > p:last-child { margin-bottom: 0; }
.cbox-sub {
  margin: 14px 0 6px;
  font: 400 15px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bx);
}
.cbox-sub:first-child { margin-top: 0; }

.dots { list-style: none; margin: 0; padding: 0; }
.dots li { position: relative; padding-left: 22px; margin: 0 0 7px; }
.dots li::before {
  content: "";
  position: absolute; left: 3px; top: .52em;
  width: 10px; height: 10px;
  background: var(--bx);
  border-radius: 52% 48% 50% 50% / 50% 52% 48% 50%;
}
.more { margin: 8px 0 0; }
.more > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: 4px 12px 5px;
  border: 2px dashed var(--bx);
  border-radius: 12px 14px 11px 15px;
  font: 400 16px/1 var(--text); color: var(--bx);
}
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { margin-bottom: 8px; }

.cbox-cite {
  margin: 14px 0 0;
  padding-top: 9px;
  border-top: 2px dotted var(--bx);
  font: 400 11.5px/1.5 var(--mono);
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.cbox-cite .origin-tag, .origin-tag {
  font: 400 13px/1 var(--text); letter-spacing: 0; text-transform: none;
  background: var(--bx, var(--sec)); color: var(--bx-on, #fff);
  border-radius: 9px 11px 8px 11px; padding: 3px 8px 4px; margin-right: 6px;
}
.origin { font-size: 15px; color: var(--ink-soft); margin: 0 0 8px; }
.cbox .absent { color: var(--ink-faint); font-size: 18px; }

/* the amber panel: the thing a card most wants you to read twice */
.callout {
  position: relative;
  margin: 14px 0 0;
  padding: 11px 13px 11px 54px;
  background: #fff1bd;
  border: 2.5px solid #b88a0a;
  border-radius: 16px 20px 14px 20px / 20px 14px 20px 16px;
  color: #3a2c00;
  font: 400 18px/1.32 var(--text);
}
.callout-ic {
  position: absolute; left: 10px; top: 10px; width: 32px; height: 32px;
  color: #8a6400;
}
.callout-ic svg { width: 32px; height: 32px; stroke-width: 1.9; }
.callout-h { display: block; font: 400 15px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 4px; }
.callout .cbox-cite { border-top-color: #b88a0a; color: #5a4a14; }

/* dose card: full width, species blocks laid side by side */
.cards-top { margin: 34px 0 0; }
.cbox-dose { margin-bottom: 44px; }
/* species groups tile like the cards do: one column on a phone, two on a
   tablet, three on a desktop; a long group runs the full width and sets its
   lines in columns rather than standing tall and narrow */
.cbox-dose .cbox-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; grid-auto-flow: row dense; }
@media (min-width: 760px)  { .cbox-dose .cbox-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .cbox-dose .cbox-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } .doseblock.is-mid { grid-column: span 2; } }
@media (min-width: 760px)  { .doseblock.is-wide { grid-column: 1 / -1; } }
.doseblock.is-wide .dose-lines { column-width: 290px; column-gap: 30px; column-rule: 2.5px dotted var(--bx); }
.doseblock.is-wide .doseline { break-inside: avoid; margin: 0 0 14px; padding: 0 0 14px; border-top: 0; border-bottom: 2.5px dotted var(--bx); }
.doseblock.is-wide .doseline + .doseline { margin-top: 0; }
.dose-groups { grid-column: 1 / -1; margin-top: 4px; }
.dose-groups > summary { font-size: 18px; }
.dose-groups-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; grid-auto-flow: row dense; }
@media (min-width: 760px)  { .dose-groups-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .dose-groups-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dose-groups-in .doseblock.is-mid { grid-column: span 2; } }
@media (min-width: 760px)  { .dose-groups-in .doseblock.is-wide { grid-column: 1 / -1; } }
.dose-more { margin-top: 10px; }
.dose-more[open] > summary { margin-bottom: 10px; }
.doseblock.is-wide .dose-more[open] { column-width: 290px; column-gap: 30px; }
.clip > summary { cursor: pointer; list-style: none; }
.clip > summary::-webkit-details-marker { display: none; }
.clip > summary::after { content: " more"; font: 400 14px/1 var(--text); color: var(--bx); border-bottom: 1.5px dotted var(--bx); margin-left: 3px; }
.clip[open] > summary { display: none; }
.cbox-dose .cbox-body > .field-note,
.cbox-dose .cbox-body > .conc,
.cbox-dose .cbox-body > .origin,
.cbox-dose .cbox-body > .variant-cite,
.cbox-dose .cbox-body > .cbox-cite { grid-column: 1 / -1; margin: 0; }
.cbox-dose .field-note { font-size: 17px; color: var(--ink-soft); }
.doseblock {
  padding: 12px 14px 8px;
  background: var(--paper);
  border: 2.5px solid var(--bx);
  border-radius: 18px 22px 16px 24px / 22px 16px 24px 18px;
}
.doseblock:nth-child(even) { border-radius: 22px 16px 24px 18px / 16px 24px 18px 22px; }
.doseblock:first-child { border-top: 2.5px solid var(--bx); }
.doseline + .doseline { margin-top: 12px; padding-top: 12px; border-top: 2.5px dotted var(--bx); }
.dose-species { font: 400 22px/1 var(--display); letter-spacing: .05em; color: var(--bx); margin-bottom: 8px; }
.dose { border-top: 2px dotted var(--rule); }
.dose-spec { font: 500 16px/22px var(--mono); }
.dose-answer { font: 500 24px/30px var(--mono); }
.dose-amount { background: var(--bx-tint); border: 2px solid var(--bx); border-radius: 8px 10px 7px 10px; }
.dose-context { font: 400 17px/1.3 var(--text); }
.dose-source { font: 400 11.5px/1.5 var(--mono); }
.tag { border: 1.5px solid var(--ink-soft); border-radius: 8px 9px 7px 9px; font: 400 14px/1 var(--text); padding: 2px 7px; margin-left: 6px; }
.conc { padding: 8px 12px; background: var(--paper); border: 2.5px dashed var(--bx); border-radius: 16px 20px 14px 20px / 20px 14px 20px 16px; }
.conc-label { font: 400 15px/1 var(--display); letter-spacing: .07em; color: var(--bx); }

/* withdrawal */
.cbox .regbox { background: var(--paper); border: 2.5px solid var(--bx); border-radius: 14px 18px 12px 18px / 18px 12px 18px 14px; max-width: none; margin-top: 0; }
.reg-flag { font: 400 14px/1 var(--display); letter-spacing: .08em; color: var(--bx); }
.reg-text { font: 400 19px/1.35 var(--text); }
.wdcalc { margin-top: 12px; padding: 11px 13px; background: var(--paper); border: 2.5px dashed var(--bx); border-radius: 16px 20px 14px 20px / 20px 14px 20px 16px; }
.wdcalc-label { font: 400 15px/1 var(--display); letter-spacing: .07em; text-transform: uppercase; color: var(--bx); }
.wdcalc-out.is-set { background: var(--bx); color: #fff; border-radius: 12px 14px 11px 15px; padding: 7px 11px; font: 400 19px/1.3 var(--text); }

/* an entry the sources are silent on is named, not drawn as an empty box */
.silent {
  margin: 4px 0 26px;
  padding: 12px 18px 13px;
  border: 2.5px dashed var(--ink-faint);
  border-radius: var(--wobble-c);
  color: var(--ink-soft);
  font: 400 18px/1.35 var(--text);
}
.vcite { margin: 8px 0 0; font: 400 11.5px/1.5 var(--mono); color: var(--ink-faint); overflow-wrap: anywhere; }
.silent b::after { content: ":"; }
.silent b { font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-right: 8px; }

/* generic .field blocks on pages that have not been boxed (values, review) */
.field { padding: 16px 0; border-top: 2px dotted var(--rule); }
.field-label {
  font: 400 21px/1.1 var(--display);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--sec);
}
.field-note { font-size: 17px; color: var(--ink-soft); }
.variant.is-added { background: var(--sunk); border-radius: 14px 18px 12px 18px; padding: 8px 12px; }
.cite { margin-top: 10px; }
.cite-label { font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cite p, .variant-cite { font: 400 11.5px/1.5 var(--mono); color: var(--ink-faint); }
.via { border: 2px solid var(--ink); border-radius: 9px 11px 8px 11px; font: 400 14px/1 var(--text); letter-spacing: 0; text-transform: none; padding: 3px 8px 4px; }
.via-tx { background: var(--sunk); color: var(--ink-soft); }
.via-ind { background: var(--sec); color: #fff; border-color: var(--ink); }

/* sameClass, related conditions, compare: set as loose notes under the cards */
.field.drugs-field, .classlinks, .related { margin-top: 10px; }

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

.front { background-color: var(--page); }
.front-mast { background: none; padding: 28px var(--gutter) 6px; border: 0; }
.front-mast-in {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 34px 28px 32px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--wobble-a);
  box-shadow: var(--lift);
  display: grid;
  gap: 8px 36px;
  text-align: center;
  justify-items: center;
}
/* The search bar and everything under it (sources, buttons, resume card) run
   the full width of the card; the badge, title, blurb and plate above them keep
   the centred masthead. */
.front-search, .front-imprint, .front-actions, .front-recent {
  justify-self: stretch; width: 100%; max-width: none; text-align: left;
}
.front-mast-in::after {
  content: ""; position: absolute; inset: 7px 8px 6px 7px;
  border: 1.8px solid var(--sec-find); opacity: .45;
  border-radius: var(--wobble-c); pointer-events: none;
}
.front-vol {
  display: inline-block; margin: 0;
  padding: 5px 15px 6px;
  background: var(--accent-marigold); color: var(--ink);
  border: 2.5px solid var(--ink); border-left-width: 2.5px;
  border-radius: 14px 18px 12px 18px / 18px 12px 18px 14px;
  font: 400 18px/1 var(--text); letter-spacing: .03em; text-transform: none;
  transform: rotate(-1.4deg);
}
.front-title {
  margin: 8px 0 0;
  font: 400 clamp(54px, 12vw, 128px)/.92 var(--display);
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
  filter: url(#fx-grain);
}
.front-sub { font: 400 clamp(21px, 2.6vw, 27px)/1.3 var(--text); color: var(--ink); max-width: 36em; margin: 6px 0 0; }
.front-imprint {
  max-width: none; width: 100%; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 2.5px dotted var(--ink-faint);
  font: 400 17px/1.4 var(--text); color: var(--ink-soft);
}
.front-actions { justify-content: flex-start; margin-top: 18px; width: 100%; }
.front-actions .btn { flex: 1 1 150px; }
.front-art { width: min(440px, 88%); margin: 4px auto 0; }
.front-art svg { width: 100%; height: auto; display: block; }

.front-body { background: none; border: 0; max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.front-sec { padding: 36px 0; border-bottom: 0; }
.front-h {
  font: 400 clamp(32px, 5vw, 52px)/1 var(--display);
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
  display: inline-block; padding-bottom: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 9'%3E%3Cpath d='M0 4.5Q8 .5 16 4.5T32 4.5T48 4.5T64 4.5' fill='none' stroke='%23a8381c' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom / 56px 8px;
}
.front-p { font-size: 20px; color: var(--ink); max-width: 62ch; }
.front-sec-animals { background: none; }
.beasts { gap: 14px; }
.beast { padding: 14px 8px 12px; text-align: center; }
.beast:nth-child(3n+1) { border-radius: var(--wobble-a); }
.beast:nth-child(3n+2) { border-radius: var(--wobble-b); }
.beast:nth-child(3n+3) { border-radius: var(--wobble-c); }
.beast-name { font: 400 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.beast-n { font: 400 15px/1 var(--mono); }

.specimen { gap: 28px; }
.specimen-entry {
  background: var(--bx-tint); --bx: var(--sec-drugs); --bx-tint: #e3edf8;
  border: 3px solid var(--sec-drugs); border-radius: var(--wobble-a);
  padding: 20px 20px 14px; box-shadow: none;
}
.spec-name { font: 400 34px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.spec-class { font: 400 19px/1.3 var(--text); color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.spec-rule { border: 0; border-top: 2.5px dotted var(--sec-drugs); }
.spec-key { font: 400 15px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--sec-drugs); }
.spec-val { font-size: 18px; max-width: none; }
.spec-line + .spec-line { border-top: 2px dotted var(--rule); }
.specimen-note { font-size: 19px; }
.specimen-note::before { background: var(--sec-find); height: 3px; border-radius: 3px; }

.refuses { gap: 14px; max-width: none; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.refuse {
  padding: 18px 18px 16px; background: var(--sec-wash);
  border: 2.5px solid var(--ink); border-radius: var(--wobble-a);
}
.refuse:nth-child(even) { border-radius: var(--wobble-b); }
.refuse:last-child { border-bottom: 2.5px solid var(--ink); }
.refuse b { font: 400 22px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 6px; }
.refuse span { font-size: 19px; color: var(--ink-soft); }
.colophon li { border-top: 2px dotted var(--rule); font-size: 19px; }

/* app.css splits the landing into two columns at desktop (hero left, animal
   plate right, one black band). In this world the hero is a card with the
   drawn plate inside it, and the animals sit below as a row of buttons. */
@media (min-width: 1180px) {
  .front-body { display: block; }
  .front-mast { margin-left: 0; padding: 30px var(--gutter) 6px; display: block; }
  .front-mast-in {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    text-align: left; justify-items: start; align-items: center;
    padding: 40px 50px 38px;
  }
  .front-mast-in > * { grid-column: 1; }
  .front-art { grid-column: 2; grid-row: 1 / span 3; width: 100%; margin: 0; }
  .front-search, .front-imprint, .front-actions, .front-recent { grid-column: 1 / -1; }
  .front-title { font-size: clamp(76px, 8.4vw, 124px); }
  .front-sec:not(.front-sec-animals) { grid-column: auto; }
  .front-sec-animals { margin-right: 0; padding: 36px 0; background: none; }
  .front-sec-animals .beasts { grid-template-columns: repeat(9, minmax(0, 1fr)); background: none; border: 0; }
  .front-sec-animals .beast { background: var(--paper); color: var(--ink); }
  .front-sec-animals .beast:hover { background: var(--sec-wash); color: var(--ink); }
  .front-sec-animals .front-h { color: var(--ink); }
  .front-sec-animals .front-p, .front-sec-animals .beast-n { color: var(--ink-soft); }
  .front-sec-animals .beast:hover .beast-n { color: var(--ink-soft); }
  .refuses, .colophon ul { column-gap: 14px; }
}
@media (min-width: 1180px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .front-sec-animals { background: none; }
  :root:not([data-theme="light"]) .front-sec-animals .beast { background: var(--paper); color: var(--ink); }
  :root:not([data-theme="light"]) .front-sec-animals .beast:hover { background: var(--sec-wash); color: var(--ink); }
  :root:not([data-theme="light"]) .front-sec-animals .front-p,
  :root:not([data-theme="light"]) .front-sec-animals .beast-n { color: var(--ink-soft); }
}
@media (min-width: 1180px) {
  :root[data-theme="dark"] .front-sec-animals { background: none; }
  :root[data-theme="dark"] .front-sec-animals .beast { background: var(--paper); color: var(--ink); }
  :root[data-theme="dark"] .front-sec-animals .beast:hover { background: var(--sec-wash); color: var(--ink); }
  :root[data-theme="dark"] .front-sec-animals .front-p,
  :root[data-theme="dark"] .front-sec-animals .beast-n { color: var(--ink-soft); }
}

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

.footer { color: var(--ink-soft); font-size: 18px; }
/* the footer is the header's twin: the same paper, closed with the same wavy
   rule, full width, its content held to the sheet */
.sitefoot {
  max-width: none; margin: 40px 0 0;
  padding: 0 0 30px;
  background: var(--paper); color: var(--ink-soft);
  border: 0;
}
.sitefoot::before {
  content: "";
  display: block;
  height: 9px; margin-bottom: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 9'%3E%3Cpath d='M0 4.5Q8 .5 16 4.5T32 4.5T48 4.5T64 4.5' fill='none' stroke='%232b2217' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 64px 9px;
}
.sitefoot-in, .sitefoot-fine { max-width: var(--shell); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: border-box; }
.sitefoot a { color: var(--ink); }
.sitefoot-line { font: 400 20px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.sitefoot-nav a { border: 2px solid var(--ink); border-radius: 14px 18px 12px 16px / 16px 12px 18px 14px; margin-left: 8px; font: 400 16px/1 var(--text); letter-spacing: 0; text-transform: none; min-height: 42px; }
.sitefoot-nav a:first-child { margin-left: 0; }
.sitefoot-nav a:hover { background: var(--sunk); color: var(--ink); border-color: var(--ink); }
.sitefoot-nav a[aria-current] { background: var(--ink); color: var(--paper); }
.sitefoot-fine { font: 400 17px/1.4 var(--text); max-width: var(--shell); margin-top: 14px; color: var(--ink-soft); }

/* --------------------------------------------------------- hand-lettered
   tables and checkers on the values and review pages keep their structure
   and take the hand's borders and colour. */

.refcard, .checker, .case, .protocol, .regrow, .vital-row {
  border-radius: var(--wobble-a);
}
.reftable th, .reftable thead th, .checker-head, .refcard-head {
  font: 400 17px/1.2 var(--display);
  letter-spacing: .06em; text-transform: uppercase;
}
.safety { border-radius: var(--wobble-c); }

/* -------------------------------------------------------------- dark */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #251e16; --page: #130f0b; --sunk: #2f261b;
    --ink: #f6ecd6; --ink-soft: #d6c9ad; --ink-faint: #b3a488;
    --rule: #4b4030; --rule-strong: #f6ecd6;
    --accent-brass: #c9a24a; --hero-bg: #251e16; --hero-soft: #d6c9ad;
    --sec-front: #f6ecd6; --sec-find: #ff8d6e; --sec-drugs: #8fb9ec;
    --sec-values: #82d19a; --sec-review: #d9a6d1;
    --warn: #ff8d6e; --warn-wash: #3a1d14;
    --lift: 0 2px 0 rgba(0, 0, 0, .3), 0 20px 36px -18px rgba(0, 0, 0, .7);
  }
  :root:not([data-theme="light"]) body.sec-find   { --sec-wash: #3a1d14; }
  :root:not([data-theme="light"]) body.sec-drugs  { --sec-wash: #16263a; }
  :root:not([data-theme="light"]) body.sec-values { --sec-wash: #1a2e1f; }
  :root:not([data-theme="light"]) body.sec-review { --sec-wash: #2f1b2c; }
  :root:not([data-theme="light"]) .bx-green { --bx: #5bb273; --bx-tint: #1f2c21; }
  :root:not([data-theme="light"]) .bx-rust  { --bx: #e57a5b; --bx-tint: #35201a; }
  :root:not([data-theme="light"]) .bx-gold  { --bx: #d3a52a; --bx-tint: #342c14; }
  :root:not([data-theme="light"]) .bx-teal  { --bx: #4eaab0; --bx-tint: #172a2b; }
  :root:not([data-theme="light"]) .bx-brown { --bx: #c98a5c; --bx-tint: #30221a; }
  :root:not([data-theme="light"]) .bx-blue  { --bx: #6fa4e0; --bx-tint: #172539; }
  :root:not([data-theme="light"]) .bx-plum  { --bx: #c47bb7; --bx-tint: #2d1c2a; }
  :root:not([data-theme="light"]) .cbox, :root:not([data-theme="light"]) .pill { --bx-on: #1a140d; }
  :root:not([data-theme="light"]) .cbox-ic { color: var(--bx); }
  :root:not([data-theme="light"]) .callout { background: #3a3012; border-color: #d3a52a; color: #f6e7b0; }
  :root:not([data-theme="light"]) .callout-ic { color: #d3a52a; }
  :root:not([data-theme="light"]) .install,
  :root:not([data-theme="light"]) .btn-primary { color: #1a140d; }
  :root:not([data-theme="light"]) .tab,
  :root:not([data-theme="light"]) .section-open { color: #1a140d; }
  :root:not([data-theme="light"]) .section-open > span { color: rgba(26, 20, 13, .9); }
  :root:not([data-theme="light"]) .front-vol { color: #1a140d; }
  :root:not([data-theme="light"]) .scale,
  :root:not([data-theme="light"]) .statusbar { background: #0c0906; }
  :root:not([data-theme="light"]) .tab { border-color: #f6ecd6; }
  :root:not([data-theme="light"]) .shell,
  :root:not([data-theme="light"]) .front-mast-in { border-color: #f6ecd6; }
}
:root[data-theme="dark"] {
  --paper: #251e16; --page: #130f0b; --sunk: #2f261b;
  --ink: #f6ecd6; --ink-soft: #d6c9ad; --ink-faint: #b3a488;
  --rule: #4b4030; --rule-strong: #f6ecd6;
  --accent-brass: #c9a24a; --hero-bg: #251e16; --hero-soft: #d6c9ad;
  --sec-front: #f6ecd6; --sec-find: #ff8d6e; --sec-drugs: #8fb9ec;
  --sec-values: #82d19a; --sec-review: #d9a6d1;
  --warn: #ff8d6e; --warn-wash: #3a1d14;
  --lift: 0 2px 0 rgba(0, 0, 0, .3), 0 20px 36px -18px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] body.sec-find   { --sec-wash: #3a1d14; }
:root[data-theme="dark"] body.sec-drugs  { --sec-wash: #16263a; }
:root[data-theme="dark"] body.sec-values { --sec-wash: #1a2e1f; }
:root[data-theme="dark"] body.sec-review { --sec-wash: #2f1b2c; }
:root[data-theme="dark"] .bx-green { --bx: #5bb273; --bx-tint: #1f2c21; }
:root[data-theme="dark"] .bx-rust  { --bx: #e57a5b; --bx-tint: #35201a; }
:root[data-theme="dark"] .bx-gold  { --bx: #d3a52a; --bx-tint: #342c14; }
:root[data-theme="dark"] .bx-teal  { --bx: #4eaab0; --bx-tint: #172a2b; }
:root[data-theme="dark"] .bx-brown { --bx: #c98a5c; --bx-tint: #30221a; }
:root[data-theme="dark"] .bx-blue  { --bx: #6fa4e0; --bx-tint: #172539; }
:root[data-theme="dark"] .bx-plum  { --bx: #c47bb7; --bx-tint: #2d1c2a; }
:root[data-theme="dark"] .cbox, :root[data-theme="dark"] .pill { --bx-on: #1a140d; }
:root[data-theme="dark"] .callout { background: #3a3012; border-color: #d3a52a; color: #f6e7b0; }
:root[data-theme="dark"] .callout-ic { color: #d3a52a; }
:root[data-theme="dark"] .install, :root[data-theme="dark"] .btn-primary { color: #1a140d; }
:root[data-theme="dark"] .tab, :root[data-theme="dark"] .section-open { color: #1a140d; }
:root[data-theme="dark"] .section-open > span { color: rgba(26, 20, 13, .9); }
:root[data-theme="dark"] .front-vol { color: #1a140d; }
:root[data-theme="dark"] .scale, :root[data-theme="dark"] .statusbar { background: #0c0906; }
:root[data-theme="dark"] .tab { border-color: #f6ecd6; }
:root[data-theme="dark"] .shell, :root[data-theme="dark"] .front-mast-in { border-color: #f6ecd6; }

/* ------------------------------------------------------------ motion */

/* One authored moment: a card settles onto the page. */
@keyframes settle {
  from { opacity: 0; transform: translateY(10px) rotate(-.6deg); }
  to   { opacity: 1; transform: none; }
}
.cards > .cbox { animation: settle .42s cubic-bezier(.22, 1, .36, 1) both; }
.cards > .cbox:nth-child(2) { animation-delay: .05s; }
.cards > .cbox:nth-child(3) { animation-delay: .1s; }
.cards > .cbox:nth-child(4) { animation-delay: .15s; }
.cards > .cbox:nth-child(n+5) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  .cards > .cbox { animation: none; }
}

@media print {
  body { background: #fff; }
  .cbox, .cbox-head, .shell { box-shadow: none; filter: none; }
  .hero-title, .front-title, .cbox-ic { filter: none; }
  .cards { --cols: 2; }
}

/* Running text sets to the width of the sheet on a desktop. The fixed measure
   protected line length on a single narrow column; the sheet is now laid out in
   tiles, so a note capped at 68 characters just sat in the left third. */
.footer { max-width: none; }
@media (min-width: 1000px) {
  .block-note, .emptynote, .stubnote, .field-note, .prose, .notes, .note-block,
  .detail-species, .dose-context, .vital-caveat { max-width: none; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sitefoot::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 9'%3E%3Cpath d='M0 4.5Q8 .5 16 4.5T32 4.5T48 4.5T64 4.5' fill='none' stroke='%23f6ecd6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .sitefoot::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 9'%3E%3Cpath d='M0 4.5Q8 .5 16 4.5T32 4.5T48 4.5T64 4.5' fill='none' stroke='%23f6ecd6' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ------------------------------------------- weight bar and status bar
   Both were fixed dark surfaces in every theme. Only the dark theme is dark:
   in light they are a sand strip with ink type, set from the --bar-* tokens,
   and the dark theme swaps the tokens back. */
:root {
  --bar-bg: var(--sunk); --bar-fg: var(--ink); --bar-soft: var(--ink-soft);
  --bar-rule: var(--ink); --bar-field: var(--paper); --bar-warn: var(--warn);
  --bar-btn-bg: var(--ink); --bar-btn-fg: var(--paper);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bar-bg: #0c0906; --bar-fg: #f6ecd6; --bar-soft: #d6c9ad; --bar-rule: #4a3f2e;
    --bar-field: #1e2225; --bar-warn: #ffb4ab; --bar-btn-bg: #f6ecd6; --bar-btn-fg: #1a140d;
  }
}
:root[data-theme="dark"] {
  --bar-bg: #0c0906; --bar-fg: #f6ecd6; --bar-soft: #d6c9ad; --bar-rule: #4a3f2e;
  --bar-field: #1e2225; --bar-warn: #ffb4ab; --bar-btn-bg: #f6ecd6; --bar-btn-fg: #1a140d;
}

.scale { background: var(--bar-bg); color: var(--bar-fg); border-bottom: 3px solid var(--ink); }
.scale-label, .scale-hint, .scale.is-set .scale-hint { color: var(--bar-soft); }
.scale-input { background: var(--bar-field); color: var(--bar-fg); border: 2px solid var(--bar-rule); }
.scale-range::-webkit-slider-runnable-track { background: var(--bar-soft); }
.scale-range::-moz-range-track { background: var(--bar-soft); }
.scale-range::-webkit-slider-thumb { background: var(--paper); border-color: var(--ink); }
.scale-range::-moz-range-thumb { background: var(--paper); border-color: var(--ink); }
.scale-ticks i { background: var(--bar-soft); }
.scale-estimate > summary { color: var(--bar-soft); }
.scale-estimate > summary::before { color: var(--bar-fg); }
.scale-estimate > summary:hover { color: var(--bar-fg); }
.scale-estimate > summary:focus-visible { outline-color: var(--bar-fg); }
.scale-estimate .wt-lab, .scale-estimate .wt-help, .scale-estimate .wt-approx,
.scale-estimate .wt-acc, .scale-estimate .wt-detail, .scale-estimate .wt-none,
.scale-estimate .wt-borrow, .scale-estimate .wt-cite { color: var(--bar-soft); }
.scale-estimate .wt-out { background: var(--bar-field); border-color: var(--bar-rule); }
.scale-estimate .wt-est b { color: var(--bar-fg); }
.scale-estimate .wt-warn { color: var(--bar-warn); }
.scale-estimate .wt-use { background: var(--bar-btn-bg); border-color: var(--bar-btn-bg); color: var(--bar-btn-fg); }
.scale-estimate .wt-use:hover { background: transparent; color: var(--bar-fg); }

.statusbar { background: var(--bar-bg); color: var(--bar-fg); border-top: 3px solid var(--ink); }
.statusbar-sub { color: var(--bar-soft); }
.statusbar-reset { border: 2px solid var(--bar-rule); color: var(--bar-fg); }
.statusbar-go { background: var(--bar-btn-bg); color: var(--bar-btn-fg); }

/* The same rule for the other fixed-dark blocks: the weight chip, the table and
   checker heads on the Values page, and the interaction alert on Review. */
.scale-chip { background: var(--bar-field); border: 2px solid var(--bar-rule); border-radius: 14px 16px 12px 18px / 16px 12px 18px 14px; }
.checker-head, .refcard-head { background: var(--bar-bg); color: var(--bar-fg); border-bottom: 2.5px solid var(--ink); }
.checker-tag, .refcard-n { color: var(--bar-soft); }
.alert { background: var(--bar-bg); color: var(--bar-fg); border: 2.5px solid var(--ink); border-radius: var(--wobble-c); }
.alert-icon { background: var(--bar-btn-bg); color: var(--bar-btn-fg); }
.alert-pair, .alert-why { color: var(--bar-soft); }
.alert-why { border-color: var(--bar-rule); }
.alert-why b { color: var(--bar-fg); }

/* The weight field is the one control a dose depends on, so it is white on
   the bar in every theme: dark text on a light field reads best outdoors. */
html:root .scale .scale-chip { background: #fdf7e8; border: 2px solid var(--bar-rule); }
html:root .scale .scale-input { background: #fdf7e8; color: #2b2217; border: 0; }
html:root .scale .scale-unit { color: #2b2217; }
html:root .scale .scale-input::placeholder { color: #6b5b45; }

/* Static entry pages (drug/, condition/): a plain hand-ruled list. */
.entry-list { margin: 0; padding: 0 0 0 1.2em; max-width: var(--measure); }
.entry-list li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }