/* ==========================================================================
   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 toward 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 percent 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 3.5rem 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) + var(--masthead-h));
  /* No font-size is set here, so the root holds whatever the reader's browser
     is set to and the document scales from that. Every width in the theme is
     now stated in rem or in ch rather than in pixels, so a reader running at
     twenty pixels receives a proportionally larger page instead of the same
     page with larger words crowded into it.
     A viewport ramp stood here briefly and was taken out. It filled a wide
     display by enlarging the type, which is arithmetically the only place the
     spare room can go once the measure is already at the top of its range, but
     past about eighteen pixels the result reads as a page that has been zoomed
     rather than one that has been set: the body copy stops looking like body
     copy. Blank paper down the flanks of a very wide window is the lesser
     fault, and the honest remedy for it is to let tables, figures and the
     glossary break out of the reading column, not to inflate the prose. */
}

/* `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 was the point while the page still carried a
   provenance column. A document with three columns reads as one when the prose
   keeps a measure and only the evidence, the tables and the figures, runs the
   full width. With the provenance column gone there is nothing to the right of
   the paragraph for it to be short of, so the short edge stopped being a signal
   and became a void, and the measure was widened to close it.

   `--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 the one width, and keeps them there if either step is ever
   retuned.

   `--measure-fine` is the same undoing downward, and was missed for as long as
   the correction had only ever been needed upward. A source line is a `<p>`,
   so it matches the rule below at 58ch like everything else, and it is read at
   12px, so those 58 characters come to 439px: a caption 146 pixels narrower
   than the prose it sits among and 489 narrower than the table it describes.
   Seventeen of the fifty-seven on the built page ran past three lines and one
   ran to eight, which in gray italic is a slab rather than a caption.

   `--measure-cap` is the last of them, and the figure is where the fault was
   easiest to see because it is the one place three of these blocks are set
   touching. A `<figure>` stacks a caption, sometimes a stand-in note, and the
   source line. The caption and the stand-in had both been given `74ch`, which
   looks as though it was read off the line above — 58ch at 16px *is* 74
   characters — and 74 characters is not 74ch. Typed at 14px it came to 654px
   and at 12px to 560px, so all nine figures on the page stood their caption 69
   pixels proud of the line beneath it, and the one figure with a stand-in ran
   654, 560, 585: out, in, and out again down three touching blocks.

   The trade this makes is worth stating, because it does not go one way. A
   column held at a single width carries more characters the smaller the type
   gets, so the 666px every block now shares runs about 97 characters at 14px
   and about 113 at 12px, and 113 is a long line by any measure-in-characters.
   The
   lead makes the same trade in the other direction and takes fewer characters
   than the ideal. Both are accepted for the same reason: these blocks are read
   stacked against each other, and an edge a reader can see beats a character
   count a reader cannot. That still held when the reading column was widened to
   666px, which is why the small type was carried up with it rather than left
   where it was: the measurement finds the step between two stacked blocks, and
   does not find the extra characters.

   What is deliberately not corrected here. The arithmetic reaches a hundred and
   seventy-two blocks page-wide — every note panel, every rail, every list set
   at 14px — and those are not stacked against one another the way a figure's
   three are, so each wants a judgment in front of the page rather than a ride
   on this one. */
:root {
  /* 58ch, or 585px, was the measure of a text column that was one of three.
     With the provenance column gone the track is 704px, and a paragraph capped
     at 585px stopped 119px short of the rule that closes the section above it,
     so every block of prose read as though it had been indented away from its
     own frame. 66ch is 666px, or about 84 characters: longer than the sixty-six
     a printed page would set, shorter than the ninety at which a reader starts
     losing the head of the next line, and as close to the track as the measure
     can be taken, because the track is held open by the widest table in the
     document rather than chosen for the prose. */
  --measure-prose: 66ch;   /* ~84 characters at 16px Inter */
  /* The small type is not given a narrower width of its own, although 666px
     runs a 14px caption to about ninety-seven characters and a 12px source line
     past a hundred and ten. Holding it at 585px while the body went to 666px
     was tried, and the layout measurement returned a hundred and twenty-six
     blocks whose right edge stood 81px inside the block directly above them at
     760px wide: a caption and the paragraph it belongs to share a left edge and
     were parting at the right. A reader sees that step. A reader does not count
     characters. */
  --measure-lead:  calc(var(--measure-prose) * 16 / 19);  /* the prose measure at 19px */
  --measure-cap:   calc(var(--measure-prose) * 16 / 14);  /* the prose measure at 14px */
  --measure-fine:  calc(var(--measure-prose) * 16 / 12);  /* the prose measure at 12px */
  /* A section heading is set in the display face at 32px, so 66ch of it is
     1332px and the general prose cap does not describe it. Stated the same way
     as the three above: the width of the reading column, expressed in the units
     of the type that will occupy it. */
  --measure-head:  calc(var(--measure-prose) * 16 / 32);  /* the prose measure at 32px */
}

/* 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 gray 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 color
   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 color,
   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 neighbors 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 color have already said it. And the accent
   ink made every one of them a colored heading, which is the one thing this
   page will not print: green on this page means the evidence supports
   something, so a label like "Corrections" was being announced in the
   color of a favorable finding.

   Set in gray 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 color 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;
}

/* A pointer already knows where it just clicked. Opening a disclosure or
   following a link in the contents left the element focused, and a focused
   element with no ring of its own is given one by the browser, so a blue box
   stayed behind on the heading a reader had merely clicked through and sat
   there until something else was clicked. Suppressing the ring for focus that
   did not arrive from the keyboard leaves the rule above to do the only job the
   ring exists for, which is telling somebody tabbing through the page where
   they are; a reader who never touches Tab now never sees it. */
:where(a, button, summary, input, select, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

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