/* ==========================================================================
   Base — reset, typography, prose
   ========================================================================== */

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

/* `scroll-behavior: smooth` was here and has been taken out. It is not only
   anchor links that scroll this box: every time focus moves to something below
   the fold, the browser scrolls it into view through the same property, and
   made smooth that scroll is an animation the keyboard does not wait for.
   Tabbing the built page from the top, 240 stops were reached and 217 of them
   were outside the viewport at the instant they took focus — the reader presses
   Tab, the focus ring is somewhere they cannot see, and the page is still
   gliding towards it. Press Tab again before it lands and the animation
   restarts from wherever it had got to, so the viewport falls further behind
   the further down the page you go. That is 90 per cent of a keyboard reader's
   journey through this report spent following a ring they cannot see, bought in
   exchange for a nicety on anchor links that a mouse reader would not have
   missed. With the line gone the scroll is instant and the same walk reports
   240 stops reached and 0 off-screen.

   `scroll-padding-top` stays, and does the part that actually mattered: the
   masthead is sticky and 56px tall, so without it every element scrolled to —
   by link or by Tab — arrives underneath the masthead. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--s-6) + 56px);
}

/* `text-wrap: pretty` is set here rather than on the paragraph because the
   things it rescues are mostly not paragraphs. The stubs that were reported —
   a caption ending "None of / it was checked", a table cell breaking after the
   preposition, a two-word orphan under a figure — are in captions, cells and
   list items, each styled in a different file. Set on the body it reaches all
   of them by inheritance, and the headings are unaffected because they ask for
   `balance` a few rules down, which wins on the element itself. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "liga" 1;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }
svg { display: block; }

/* --- Headings ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: var(--lh-tight);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.02em; margin-top: var(--s-8); margin-bottom: var(--s-4); }
h3 { font-size: var(--step-2); font-weight: 650; margin-top: var(--s-6); margin-bottom: var(--s-3); }
/* The step between a sub-heading and the sentence under it. At body size and
   weight 600 it was not a level: a reader met a bolder first line, not a
   heading, and a page whose next level up is 24px had nothing between the two.
   18px is the smallest size that still reads as a heading beside 16px prose,
   and it is the size the glossary's own sub-level already sets. */
h4 {
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: 0;
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
}
/* Inter italic is not loaded; emphasis inside a display heading stays upright
   and carries the heading's own weight. */
h1 em, h2 em { font-style: normal; font-weight: inherit; }

/* --- Prose --------------------------------------------------------------
   Two measures, and the difference between them is the whole reason the page
   has a margin column at all.

   `--measure` is the width of the *column*: the widest thing a section may
   set, and what a table or a figure fills. Running text does not want that
   width. In Inter one `ch` is the advance of the zero, 0.63em, while an
   average lowercase character is nearer 0.49em, so 70ch at body size is not
   seventy characters of prose but about ninety — a third longer than the line
   a reader can return from without losing the row. Measured on the built page
   the body paragraphs were setting 706px lines. At 58ch they set 585px, which
   is 74 characters, and the paragraph now ends short of the tables beside it.

   That short right edge is the point, not a cost. A document with a margin
   column reads as one when the prose keeps a measure and only the evidence —
   the tables, the figures — runs the full column. Set to the same width, the
   two stop being different kinds of thing.

   `--measure-lead` is that same width and not a second opinion about it. `ch`
   scales with the font it is read in, so 54ch set on a 19px lead was 647px
   against the paragraph's 585px, and the lead is the paragraph directly above
   that paragraph: every one of the seventeen sections opened with a deck whose
   right edge stood sixty pixels proud of the prose it introduced, which is the
   ragged edge a reader feels as untidiness without being able to point at it.
   Converting by the size ratio rather than guessing a second character count
   lands both on 585px, and keeps them there if either step is ever retuned. */
:root {
  --measure-prose: 58ch;   /* ~74 characters at 16px Inter */
  --measure-lead:  calc(var(--measure-prose) * 16 / 19);  /* the same 585px at 19px */
}

/* 24px, not 16px. The body sets 25.6px lines, so a 16px gap was 0.6 of a line:
   enough for the browser to know where a paragraph ended and not enough for a
   reader to. Three consecutive paragraphs of method read as one grey slab, and
   the page's argument is carried almost entirely in consecutive paragraphs.
   24px is 0.9 of a line — short of the full blank line that would turn prose
   into a list, far enough that the eye lands on the new first line rather than
   falling into it. Every context that needs its own figure — a card, a table
   cell, a sidenote — sets one in components.css, which loads after this file
   and therefore still wins; this is the document default, not a decree. */
p { margin: 0 0 var(--s-5); max-width: var(--measure-prose); }
.lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: var(--measure-lead);
}

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15rem; max-width: var(--measure-prose); }
li { margin-bottom: var(--s-3); padding-left: var(--s-1); }
li::marker { color: var(--ink-4); }
li > ul, li > ol { margin-top: var(--s-3); }

/* A link is chrome, not evidence. In the accent green it was the same colour
   as the "supports" tone, so a link inside a sentence about a negative finding
   read as a small endorsement of it, and the registry identifiers in the trial
   table read as a row of approvals. */
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 600; color: var(--ink-strong); }
em { font-style: italic; }
abbr[title] { text-decoration: underline dotted var(--ink-4); cursor: help; }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-7) 0;
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.88em; }

/* Numerals in running text line up in columns and never wrap mid-value. */
.num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: 0.93em;
  white-space: nowrap;
}

/* A compound code holds its line. It looks like nothing — no face, no colour,
   no size — because a reader should not be able to tell it is marked; all the
   mark does is take away a break opportunity the line-breaker should never
   have been offered. The hyphen in `PF-07248144` is part of the identifier,
   not a place to fold it, and in the 83-pixel Program column of the clinical
   assets table the browser folded it: `PF-` on one line, `07248144` on the
   next. Nothing else changes, so a code in running prose is set exactly as
   its neighbours are and only stops splitting in two. This is not `.ident`,
   which is the anchor a registry number is wrapped in and carries a dotted
   rule to say it resolves somewhere; a compound code resolves nowhere and is
   not drawn as though it did. */
.nobreak { white-space: nowrap; }

/* --- Utility ------------------------------------------------------------ */
/* The label that stands over a section heading and over a figure. It was set
   in tracked capitals in the accent ink, and it was wrong twice over.

   The words are already sentence case in the source — "Bottom line", "Figure
   2", "Sources cited" — so the capitals were added here, by transform, to
   nothing but volume. Above a 32px heading a 12px line does not need volume to
   read as subordinate; size and colour have already said it. And the accent
   ink made every one of them a coloured heading, which is the one thing this
   page will not print: green on this page means the evidence supports
   something, so "Corrections" and "Open questions" were being announced in the
   colour of a favourable finding.

   Set in grey at reading size the label goes back to doing its own small job.
   It also lets the same class carry the section label and the figure label
   without the figure label shouting, which is what it was doing at the head of
   every chart. Green is left to the diamond and to the rules. */
.eyebrow {
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.muted { color: var(--ink-3); }
.small { font-size: var(--step--1); line-height: 1.5; }

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

.skip-link {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--ink-strong); color: #fff;
  padding: var(--s-2) var(--s-4); border-radius: 4px;
  z-index: 100; transition: top var(--dur-1) var(--ease-out);
}
.skip-link:focus { top: var(--s-3); }

/* The focus ring follows the pointer around the page and lands on filter
   buttons, legend toggles and table headings. In the supports green it put a
   verdict colour on whatever the reader happened to be standing on. */
:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Selection wraps whatever the reader drags across, which on this page is
   usually a number. A green wash behind a negative coefficient is the same
   mistake as printing it in green. */
::selection { background: #D9F5DA; color: var(--ink-strong); }