/* "Plaster and cobalt" — the theme.
   Phone first: one column to 640, a wider measure above it, and nothing reflows the answer.
   The signature is the range rail — a printed band, a solid needle for the reading now, a
   hollow one for the target, and an arrow between them carrying the dose. It appears at three
   scales: full width as fig:dose_on_range, inline in every reading card, and as one row per
   parameter in fig:target_bands. There is no legend anywhere; every marking is a value the
   page states. */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: tabular-nums;
  font-kerning: normal;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-strong);
}

h1 {
  font-size: var(--t-h1);
}

h2 {
  font-size: var(--t-h2);
}

h3 {
  font-size: var(--t-h3);
}

p {
  margin: 0;
}

a {
  color: var(--c-accent);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 3px solid var(--c-focus-ring);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--c-focus);
  border-radius: 2px;
}

/* A name a screen reader reads where the glyph beside it is drawn rather than typed. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.skip:focus {
  left: var(--s3);
  top: var(--s3);
  z-index: 9;
  background: var(--c-card);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--c-ink);
}

/* ---- chrome ---------------------------------------------------------- */

.topbar {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line);
}

.topbar__in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s2) var(--s4);
  min-height: var(--hit);
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: var(--s2);
  color: var(--c-ink);
  text-decoration: none;
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-tight);
  margin-right: auto;
}

/* `flex: none`, or the mark is squeezed to a dot in the narrow footer column — measured at 360
   before the rule existed. */
.brand svg {
  display: block;
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--c-accent);
}

/* The nav takes its own row rather than clipping: three labels and a wordmark do not fit on
   one line at 360. */
@media (max-width: 26rem) {
  .topnav {
    flex: 1 0 100%;
    border-top: 1px solid var(--c-line);
  }
}

.topnav {
  display: flex;
  gap: var(--s1);
}

.topnav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s2);
  font-size: var(--t-small);
  font-weight: var(--w-label);
  text-decoration: none;
  color: var(--c-ink-2);
}

.topnav a:hover {
  color: var(--c-accent);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
}

.crumb {
  font-size: var(--t-small);
  color: var(--c-ink-2);
  margin-bottom: var(--s2);
}

.crumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumb a {
  color: inherit;
}

.head {
  margin-bottom: var(--s4);
}

.sect {
  margin-top: var(--s6);
}

.sect > h2 {
  margin-bottom: var(--s3);
}

.eyebrow {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: var(--s1);
}

/* ---- the answer plate ------------------------------------------------ */

.plate {
  position: relative;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-card);
  padding: var(--s4);
}

/* The one ornament, and it carries the site's whole point: the surface every depth on this
   site is measured from. Drawn from the accent token so the dark scheme carries it, and it
   appears once per page. */
.plate__water {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--s4);
}

.plate__water path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
  opacity: 0.5;
}

.plate__lead {
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
}

/* The shape chips switch which fields are shown with `:has()` and no script at all, so a visitor
   with no JavaScript can pick a shape the served answer was not worked for. That state says so.
   It is off once the site's recompute is bound — `calc-live` on <html> — because from then on the
   answer follows the chips. */
.plate__stale {
  display: none;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

html:not(.calc-live) body:has(.shapes input:checked:not([data-served])) .plate__stale {
  display: block;
}

.val {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t-answer);
  font-weight: var(--w-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--c-accent);
}

/* The unit keeps its own case: `g` is not `G` on a page about chemicals. It is welded to the
   value by size and baseline instead of by a sentence above the table. */
.val .u {
  font-size: 0.4em;
  font-weight: var(--w-strong);
  letter-spacing: 0.02em;
  vertical-align: 0.5em;
  margin-left: 0.12em;
  color: var(--c-ink);
}

.val--ink {
  color: var(--c-ink);
}

.val--mid {
  font-size: var(--t-h1);
}

.alt {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-answer-2);
  font-weight: var(--w-strong);
  color: var(--c-ink-2);
}

.alt .u {
  font-size: 0.72em;
  letter-spacing: 0.02em;
  margin-left: 0.12em;
}

.basis {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

.basis b {
  color: var(--c-ink);
  font-weight: var(--w-strong);
}

.code {
  font-family: var(--f-code);
  font-size: 0.9em;
  letter-spacing: 0;
}

/* ---- figures --------------------------------------------------------- */

.fig {
  margin: var(--s4) 0 0;
  background: var(--c-sunk);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s3);
}

.fig svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 26rem;
  margin: 0 auto;
}

.fig--tall svg {
  max-width: 30rem;
}

.fig-line {
  fill: none;
  stroke: var(--c-line-strong);
  stroke-width: 1;
}

.fig-ink {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 1.5;
}

.fig-water {
  fill: var(--c-band);
}

.fig-shell {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.fig-deck {
  fill: var(--c-line);
}

.fig-dash {
  fill: none;
  stroke: var(--c-line-strong);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.fig-used {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2.5;
}

.fig-wave {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 2;
}

.fig-bar {
  fill: var(--c-band-ideal);
  stroke: var(--c-accent);
  stroke-width: 1;
}

.fig-bar--quiet {
  fill: var(--c-band);
  stroke: var(--c-line-strong);
}

.fig-bar--warn {
  fill: var(--c-warn-wash);
  stroke: var(--c-warn);
  stroke-width: 1.5;
}

.fig-t {
  font-family: var(--f-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  fill: var(--c-ink-2);
}

.fig-t--val {
  font-size: 13px;
  font-weight: var(--w-strong);
  fill: var(--c-ink);
}

.fig-t--used {
  font-size: 13px;
  font-weight: var(--w-strong);
  fill: var(--c-accent);
}

/* De-emphasised by size and weight, never by a colour that would drop under AA. */
.fig-t--off {
  font-size: 11.5px;
  fill: var(--c-ink-2);
}

/* ---- the range rail, at all three scales ---------------------------- */

.rail-band {
  fill: var(--c-band);
  stroke: var(--c-line-strong);
  stroke-width: 1;
}

.rail-ideal {
  fill: var(--c-band-ideal);
}

.rail-ideal-edge {
  stroke: var(--c-accent);
  stroke-width: 1.5;
  fill: none;
}

.rail-axis {
  stroke: var(--c-line-strong);
  stroke-width: 1;
}

/* The open end of a band nobody closed: a chevron where the scale runs on, never a bar end and
   never a number. It is a shape, not a tint, so it survives a greyscale print. */
.rail-open {
  fill: none;
  stroke: var(--c-ink-2);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.needle-now {
  fill: var(--c-ink);
}

.needle-now--out {
  fill: var(--c-warn);
}

.needle-target {
  fill: var(--c-card);
  stroke: var(--c-accent);
  stroke-width: 2;
}

.rail-arrow {
  stroke: var(--c-accent);
  stroke-width: 2.5;
  fill: none;
}

.rail-arrow-head {
  fill: var(--c-accent);
}

/* ---- readings -------------------------------------------------------- */

.reads {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.read {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s3);
}

.read__top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
}

.read__name {
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-tight);
  margin-right: auto;
}

.read__val {
  font-size: 1.25rem;
  font-weight: var(--w-strong);
}

.read__val .u {
  font-size: 0.62em;
  font-weight: var(--w-label);
  letter-spacing: 0.02em;
  color: var(--c-ink-2);
  margin-left: 0.12em;
}

/* Capped, or the 12px markings inside a 300-unit viewBox render at 26px on a wide card and the
   inline rail shouts louder than the reading it sits under. */
.read__rail {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin-top: var(--s2);
}

.read__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

.read__foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--w-strong);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.5em;
  border-radius: var(--r-chip);
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  letter-spacing: 0.01em;
  border: 1px solid currentColor;
}

.chip--in {
  color: var(--c-ok);
  background: var(--c-ok-wash);
}

/* Inside the code band, outside the manufacturer's ideal one: the middle state reads in ink
   rather than in a signal colour, and is told apart by its word, its glyph and its hairline
   border rather than by hue. */
.chip--off {
  color: var(--c-ink-2);
  background: var(--c-sunk);
}

.chip--out {
  color: var(--c-warn);
  background: var(--c-warn-wash);
  box-shadow: inset 0 0 0 3px var(--c-card);
  padding: 0.15em 0.55em;
  border-width: 2px;
}

.chip__mark {
  font-family: var(--f-code);
  font-weight: var(--w-strong);
}

.delta {
  font-family: var(--f-code);
  font-weight: var(--w-strong);
  color: var(--c-ink);
}

/* ---- inputs ---------------------------------------------------------- */

/* A <div>, never a <form>: there is nothing on a static page to submit, and a form with no
   submit control fails WCAG2AA H32.2 — measured on a wave of another site in this pipeline.
   Recomputation binds to #calc and writes into the [data-calc] elements; see interaction.yml. */
.inputs {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s4);
}

/* Wide enough for a field flanked by two thumb-sized steppers: one column at 360, three at 768. */
.grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

.field {
  display: block;
}

.field__label {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: var(--s1);
}

/* One bordered row holding the minus, the field and the plus, so the three read as one control
   and there is no double hairline between them. */
.field__row {
  display: flex;
  align-items: stretch;
  background: var(--c-bg);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-chip);
}

.field__row:focus-within {
  border-color: var(--c-accent);
}

/* type="text" with inputmode="decimal", never type="number": a half-typed "20." reports an
   empty value on a number input and collapses the answer mid-keystroke. */
.field input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--hit);
  padding: 0 var(--s2);
  font: inherit;
  font-weight: var(--w-strong);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--c-ink);
  background: none;
  border: 0;
}

/* A thumb outdoors, one-handed: the theme's own 48px hit square, with the glyph drawn from tokens
   rather than typed, so it needs no character the subset font does not carry and it inherits the
   ink it sits in. */
.step {
  position: relative;
  flex: 0 0 auto;
  width: var(--hit);
  min-height: var(--hit);
  padding: 0;
  border: 0;
  background: var(--c-sunk);
  color: var(--c-ink);
  cursor: pointer;
}

.step--down {
  border-right: 1px solid var(--c-line);
  border-radius: 2px 0 0 2px;
}

.step--up {
  border-left: 1px solid var(--c-line);
  border-radius: 0 2px 2px 0;
}

.step::before,
.step::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2.5px;
  margin: -1.25px 0 0 -7.5px;
  background: currentColor;
}

.step--down::after {
  display: none;
}

.step--up::after {
  transform: rotate(90deg);
}

.step:hover {
  background: var(--c-line);
}

.field .hint {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-small);
  font-weight: var(--w-normal);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink-2);
}

.shapes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.shapes label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-chip);
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  color: var(--c-ink);
  background: var(--c-bg);
  cursor: pointer;
}

/* The control is the whole chip, not a 1px hidden dot: the hit area a wet thumb gets is the
   thing being measured. */
.shapes input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.shapes label:has(input:checked) {
  border-color: var(--c-accent);
  border-width: 2px;
  color: var(--c-accent-ink);
  background: var(--c-accent);
}

.shapes label:has(input:focus-visible) {
  outline: 3px solid var(--c-focus-ring);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px var(--c-focus);
}

/* Which dimensions a shape needs is CSS, not script: every group is server-rendered and the
   checked radio reveals its own. With no JavaScript at all the picker still works. */
.shape-fields {
  display: none;
}

.inputs:has(#shape-rectangle:checked) .shape-fields[data-shape="rectangle"],
.inputs:has(#shape-round:checked) .shape-fields[data-shape="round"],
.inputs:has(#shape-oval:checked) .shape-fields[data-shape="oval"],
.inputs:has(#shape-freeform:checked) .shape-fields[data-shape="freeform"] {
  display: grid;
}

.inputs__note {
  margin-top: var(--s3);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

.go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hit);
  margin-top: var(--s3);
  padding: 0 var(--s5);
  border: 0;
  border-radius: var(--r-chip);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font: inherit;
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  font-size: var(--t-small);
  text-decoration: none;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  font-size: var(--t-data);
}

caption {
  caption-side: bottom;
  margin-top: var(--s2);
  font-size: var(--t-small);
  color: var(--c-ink-2);
  text-align: left;
}

th,
td {
  padding: var(--s2) var(--s3);
  text-align: right;
  border-bottom: 1px solid var(--c-line);
  vertical-align: baseline;
}

thead th {
  font-size: var(--t-micro);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
  border-bottom: 1.5px solid var(--c-line-strong);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.l {
  text-align: left;
}

td b,
th b {
  font-weight: var(--w-strong);
}

.u-sm {
  font-size: 0.82em;
  font-weight: var(--w-label);
  color: var(--c-ink-2);
}

/* A quantity never breaks away from its unit. Only the quantity carries this, so the table
   still has a column that can wrap. */
.nw {
  white-space: nowrap;
}

@media (max-width: 26rem) {
  th,
  td {
    padding: var(--s2);
  }
}

/* A row the page singles out is marked twice over — a tinted fill and a rule — so it survives
   greyscale and a colour-blind reader. */
tr.is-target td,
tr.is-target th {
  background: var(--c-band);
  border-top: 2px solid var(--c-accent);
}

.group-head {
  margin: var(--s5) 0 var(--s2);
}

/* ---- product and limit rows, which are too wide to be columns at 360 -- */

.rows {
  display: grid;
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--s3);
}

.row__name {
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-tight);
}

.row__sub {
  display: block;
  font-size: var(--t-small);
  font-weight: var(--w-normal);
  color: var(--c-ink-2);
}

.facts {
  display: grid;
  gap: var(--s2) var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  margin: var(--s2) 0 0;
}

.facts > div {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s1);
}

.facts dt {
  font-size: var(--t-micro);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.facts dd {
  margin: 0;
  font-weight: var(--w-strong);
}

.facts .u-sm {
  display: block;
  font-weight: var(--w-normal);
}

/* ---- notes, links, faq, provenance ---------------------------------- */

.note {
  background: var(--c-sunk);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-line-strong);
  border-radius: var(--r-card);
  padding: var(--s3) var(--s4);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

.note strong {
  color: var(--c-ink);
}

.note--safe {
  border-left-color: var(--c-warn);
}

.tiles {
  display: grid;
  gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The card is the <li> and the anchor is its text: the link goes through the core's `link()`,
   which writes the anchor itself, so anything that is not link text — the eyebrow — sits outside
   it. The whole card is still the hit area. */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hit);
  padding: var(--s2) var(--s3);
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-chip);
  color: var(--c-ink);
  font-weight: var(--w-strong);
}

.tile:hover {
  border-color: var(--c-accent);
}

.tile a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  color: var(--c-ink);
  text-decoration: none;
}

.tile a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tile a:hover {
  text-decoration: underline;
}

.tile a:focus-visible {
  outline: none;
}

.tile:focus-within {
  outline: 3px solid var(--c-focus-ring);
  outline-offset: 2px;
  border-color: var(--c-focus);
}

.tile small {
  display: block;
  font-size: var(--t-micro);
  font-weight: var(--w-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.qa {
  border-top: 1px solid var(--c-line);
}

.qa details {
  border-bottom: 1px solid var(--c-line);
}

.qa summary {
  display: flex;
  align-items: center;
  min-height: var(--hit);
  padding: var(--s2) var(--s6) var(--s2) 0;
  font-weight: var(--w-strong);
  cursor: pointer;
  position: relative;
}

.qa summary::after {
  content: "";
  position: absolute;
  right: var(--s2);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform var(--mo-lift) var(--mo-ease);
}

.qa details[open] summary::after {
  transform: rotate(225deg);
}

.qa div {
  padding: 0 0 var(--s3);
  color: var(--c-ink-2);
}

.prose p {
  margin-bottom: var(--s4);
  max-width: 38rem;
}

.prose h2 {
  margin: var(--s6) 0 var(--s2);
}

/* The sources fold away and the stamp does not: a page whose product is one number says when it
   was checked without spending a screen on its footnotes. Native <details>, like the FAQ, so it
   works with no script. */
.sect--prov {
  margin-top: var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--c-line);
}

.prov__stamp {
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
}

.prov {
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

/* Visible, not folded into the sources disclosure: it is a caveat on the ranges the page states,
   and a caveat nobody opens is not one. */
.prov__note {
  margin-top: var(--s2);
  font-size: var(--t-small);
  color: var(--c-ink-2);
}

.prov > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-right: var(--s6);
  font-weight: var(--w-strong);
  color: var(--c-ink);
  cursor: pointer;
  position: relative;
}

.prov > summary::after {
  content: "";
  position: absolute;
  right: var(--s3);
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(45deg);
  transition: transform var(--mo-lift) var(--mo-ease);
}

.prov[open] > summary::after {
  transform: rotate(225deg);
}

.prov__body {
  padding-bottom: var(--s3);
}

.prov ul {
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s4);
  font-size: var(--t-micro);
  line-height: 1.45;
}

/* A secondary link is still a target held by a wet thumb: inline padding lifts a 24px line box
   to a 34px hit area without moving where the text sits. */
td a,
th a,
.prose a {
  padding-block: 5px;
}

.prov a {
  padding-block: 8px;
}

.prov a {
  display: inline-block;
  min-height: 24px;
  overflow-wrap: anywhere;
}

/* ---- ad slots: position only, and nothing is drawn --------------------
   While ads are off the generator renders each slot display:none inline, so these rules paint
   nothing at all. They exist so that switching them on does not need a template edit. */

.ad-slot {
  min-height: var(--ad-reserve, 0);
  margin: var(--s6) 0;
}

.ad-slot--anchor {
  position: fixed;
  inset: auto 0 0;
  z-index: 8;
  margin: 0;
  background: var(--c-card);
  border-top: 1px solid var(--c-line);
}

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

.foot {
  background: var(--c-card);
  border-top: 1px solid var(--c-line);
  margin-top: var(--s7);
}

.foot__in {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
  display: grid;
  gap: var(--s4);
}

.foot__groups {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

/* The wordmark is one unbreakable word. In a 1fr column beside two link groups it hangs 8px past
   a 360px viewport — measured on the 404, which is the document that renders the fewest groups.
   Its own row, whatever the site fills the groups with. */
.foot__brand {
  grid-column: 1 / -1;
}

.foot h2 {
  font-size: var(--t-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: var(--s1);
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-small);
  font-weight: var(--w-label);
}

.foot__legal {
  font-size: var(--t-small);
  color: var(--c-ink-2);
  border-top: 1px solid var(--c-line);
  padding-top: var(--s3);
}

.dead {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s4);
}

.dead p {
  margin-top: var(--s2);
  color: var(--c-ink-2);
}

/* ---- wider than a phone --------------------------------------------- */

@media (min-width: 40rem) {
  .wrap {
    padding-top: var(--s6);
  }

  .plate {
    padding: var(--s5);
  }

  .read__top {
    align-items: center;
  }
}

/* ---- motion: two gestures, and the answer is already there ----------- */

@keyframes lift {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes draw {
  from {
    transform: scaleX(0);
  }
}

.val {
  animation: lift var(--mo-lift) var(--mo-ease) both;
}

.rail-arrow-group {
  animation: draw var(--mo-draw) var(--mo-ease) both;
  transform-box: fill-box;
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  .val,
  .rail-arrow-group {
    animation: none;
  }

  .qa summary::after,
  .prov > summary::after {
    transition: none;
  }
}