/* ==========================================================================
   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 706px every block now shares runs about a hundred characters at
   14px and about a hundred and fifteen at 12px, and a hundred and fifteen 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 again to 706px, 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 752px, and a paragraph capped
     at 585px stopped 167px 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. 70ch is 706px, or about 89 characters: longer than the sixty-six
     a printed page would set, and at the top of the range a reader carries
     without losing the head of the next line. It is taken as close to the track
     as the measure honestly goes, because the track is held open by the widest
     table in the document rather than chosen for the prose, and because a
     reading column set far inside its own frame reads as a strip of text
     stranded in white paper rather than as a page. The step from 66ch was made
     with the shell and not on its own; see `--shell-max`. */
  --measure-prose: 70ch;   /* ~89 characters at 16px Inter */
  /* The small type is not given a narrower width of its own, although 706px
     runs a 14px caption to about a hundred characters and a 12px source line
     past a hundred and fifteen. 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;
}

/* That guard does not reach the section a reader has just opened, because the
   focus that lands there is not the kind it excludes. Opening a section from the
   contents leaves `land` in report.js holding an element the browser cannot
   focus on its own, so it stamps `tabindex="-1"` on the section and focuses it,
   which is what lets a screen reader announce the arrival and what makes the
   next Tab press continue from the new place rather than from the top of the
   document. Chrome reads a focus that arrives with a fragment navigation as
   keyboard driven, so `:focus-visible` matches, and the rule above then drew a
   two pixel blue rectangle around the entire section: a box the width of the
   page, which the reader had not asked for and had no way to dismiss.
   Suppressed here rather than merely excluded from the rule above, because an
   element that matches `:focus-visible` and has no outline of its own is given
   one by the browser, and the browser's ring is the same rectangle in a slightly
   different blue.
   Nothing is given up for it. An element carrying `tabindex="-1"` is not in the
   tab order, so nobody can arrive at it by tabbing, and telling somebody tabbing
   through the page where they are is the only work the ring does. Focus still
   moves; only the rectangle goes. Every control that is genuinely reachable from
   the keyboard carries `tabindex="0"` instead, which this does not touch: the
   chart marks, the sortable table headings, and the structure canvas once it has
   been activated all keep their ring.
   Held at the same weight as the rule it answers, in the `:where()` the rest of
   this file is written in, so the two are ordered rather than ranked. They must
   stay in this order.
   The radius goes with it. That rule declares three things and this cancels two,
   because the three pixel rounding is there to soften the corners of the ring and
   with no ring there is nothing for it to soften. What it softened instead was the
   hairline every section carries along its top edge, tapering the two ends of it on
   whichever section the reader had just opened and leaving every other section
   square. Fourteen pixels at a largest difference of twenty one parts in
   two hundred and fifty five, so no reader was ever going to see it, which is a
   reason to fix it quietly rather than a reason to leave it. Any element that
   carries a radius of its own is unaffected: the rule that gives it one is written
   at ordinary weight and this is written at none. */
:where([tabindex="-1"]):focus-visible {
  outline: none;
  border-radius: 0;
}

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