/* ============================================================================
   Who Paid My Doc — public website

   Direction: "the filing". The visual language is the disclosure record itself —
   field labels above values, identifiers shown rather than hidden, monospace for
   anything that is a reported value rather than our own prose.

   Palette is inherited from the Flutter app (Physio tokens) so app and web read
   as one product. Purple is dropped: it was the source theme's clinic secondary
   and has no job on a public record.

   Accessibility note that drives the whole colour system: teal-500 (#16B5A7) is
   2.56:1 on white and is therefore a NON-TEXT colour — rules, marks, fills only.
   Every teal word uses teal-700 (#0C7D73, 5.0:1).
   ============================================================================ */

:root {
  /* --- Ground ------------------------------------------------------------ */
  /* Faintly cool, pulled from teal-50 and desaturated. Not white (flat), not
     cream (belongs to a warmer product than this one). */
  --paper: #f7fafa;
  --paper-raised: #ffffff;

  /* --- Ink --------------------------------------------------------------- */
  --ink: #14202e;
  --ink-soft: #1c2a3a;
  --ink-body: #25364a;
  --ink-muted: #5c6b7d;

  /* --- Teal -------------------------------------------------------------- */
  --teal-mark: #16b5a7; /* rules, marks, fills — never text */
  --teal-text: #0c7d73; /* links and any teal word */
  --teal-deep: #0a6359;
  --teal-wash: #e9f8f6;

  /* --- Amber: spent once per view --------------------------------------- */
  --amber: #f9a828;
  --amber-deep: #c97f10;

  /* --- Structure --------------------------------------------------------- */
  --rule: #dbe6e6;
  --rule-strong: #b9cfcf;

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: 1.75rem;
  --step-4: 2.25rem;
  --step-5: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);

  --measure: 68ch;
  --shell: 1120px;
  --radius: 10px;

  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
}

/* ---------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: var(--teal-text);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--teal-deep);
}

img {
  max-width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--teal-text);
  outline-offset: 3px;
  border-radius: 3px;
}

/* On the ink surfaces teal-text is ~3:1 against the ground; the ring there is the
   light teal, which clears 10:1. */
.site-header :focus-visible,
.band :focus-visible,
.site-footer :focus-visible,
.toast :focus-visible,
.skip-link:focus-visible {
  outline-color: #7fe3d8;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: var(--space-2) var(--space-3);
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------- the shell - */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

@media (min-width: 48rem) {
  .shell {
    padding-inline: var(--space-4);
  }
}

/* --------------------------------------------------------------- header -- */

.site-header {
  position: relative;
  background: var(--ink);
  color: #e8eef2;
  border-bottom: 2px solid var(--teal-mark);
}

.site-header__inner {
  display: flex;
  /* One row on every width. The stacked header cost ~90px above the fold on a phone,
     which is what pushed the first figure — the answer — off the first screen. */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-2);
}

/* The full search field is a tablet-and-up affordance; below that the icon link goes to
   /search, which is a page built around the same field. */

.finder-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8eef2;
  text-decoration: none;
  background: #24344a;
}

.finder-link:hover {
  background: #2b3d55;
  color: #fff;
}

@media (min-width: 48rem) {
  .finder-link {
    display: none;
  }
}

/* On the narrowest phones the icon carries the link alone (it has an aria-label), so
   the wordmark, Search and Menu share one row without wrapping. */
@media (max-width: 25.999rem) {
  .finder-link__text {
    display: none;
  }

  .finder-link {
    min-width: 44px;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ menu -- */
/* The section links below the width that fits them in the masthead. A <details>, so
   it works with no script; the panel drops over the page from the header's edge. */

.menu {
  flex: none;
}

.menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8eef2;
  background: #24344a;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.menu__toggle::-webkit-details-marker {
  display: none;
}

.menu__toggle:hover,
.menu[open] > .menu__toggle {
  background: #2b3d55;
  color: #fff;
}

.menu__icon {
  color: var(--teal-mark);
}

.menu__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
  background: var(--ink);
  border-bottom: 2px solid var(--teal-mark);
  box-shadow: 0 12px 24px rgba(20, 32, 46, 0.25);
}

.menu__panel nav {
  display: flex;
  flex-direction: column;
  max-width: var(--shell);
  margin-inline: auto;
  padding: var(--space-1) var(--space-3) var(--space-3);
}

.menu__panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid #2b3d55;
  color: #e8eef2;
  text-decoration: none;
  font-size: var(--step-0);
}

.menu__panel a:first-child {
  border-top: 0;
}

.menu__panel a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 62rem) {
  .menu {
    display: none;
  }
}

/* ---------------------------------------------------------------- pickers -- */
/* The facet control a person actually uses. The anchors below it are what a crawler
   uses; neither is a fallback for the other's job. */

.pickers {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .pickers {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.picker__label {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Native control, deliberately. A custom listbox over 403 options would have to
   re-implement type-ahead, keyboard paging and the phone's own picker wheel, and would
   be worse at all three. Only the chrome is restyled. */
.picker__select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 0 2.5rem 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background-color: var(--paper-raised);
  /* The chevron is a background image rather than a glyph, so it cannot be selected,
     read out, or inherit the option text's colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230c7d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
  text-overflow: ellipsis;
}

.picker__select:hover {
  border-color: var(--teal-mark);
}

/* Facet groups sit below the results. The dropdown above is the control; this is the
   crawl path and the no-script route, so it stays in the DOM and stays collapsed. */
.facets {
  margin-top: var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}

.facets > summary {
  cursor: pointer;
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.facets > summary:hover {
  color: var(--teal-deep);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  white-space: nowrap;
}

/* Was a bare teal square drawn in CSS; now the real mark. Aligned on its centre
   rather than the baseline the wordmark uses, or the tile hangs below the text. */
.wordmark__mark {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  align-self: center;
  display: block;
}

.wordmark:hover {
  color: #fff;
}

/* The search field is the site's front door and lives in the header on every
   page — people arrive from a search engine and very often want one more name.

   Drawn as a single pill rather than a field and a button side by side: the whole
   control is one target, and the shape reads as "type here" before the placeholder
   is read at all. */
.finder {
  /* Hidden below 48rem — .finder-link takes its place there. Declared here rather than earlier
     because this is the later rule and would otherwise win. */
  display: none;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 44px;
  padding-left: 1rem;
  background: var(--ink-soft);
  border: 1px solid #25364a;
  border-radius: 999px;
}

.finder:focus-within {
  border-color: var(--teal-mark);
}

/* The one place teal-mark may carry a glyph: it is a mark, not a word. */
.finder__icon {
  flex: none;
  color: var(--teal-mark);
}

.finder__input {
  flex: 1 1 auto;
  /* The field fills the pill's full height, so the whole 44px is the target
     rather than a 20px line of text in the middle of it. */
  align-self: stretch;
  height: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.finder__input::placeholder {
  color: #93a6b8;
}

.finder__input:focus-visible {
  outline: none;
}

.finder__go {
  flex: none;
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px;
  padding: 0 1rem;
  height: 34px;
  border: 0;
  border-radius: 999px;
  /* teal-text, not teal-mark: this one carries a word. */
  background: var(--teal-text);
  color: #fff;
  cursor: pointer;
}

.finder__go:hover {
  background: var(--teal-mark);
  color: #04312c;
}

/* Masthead navigation. Mono uppercase, so it reads as filing-cabinet tabs rather
   than as marketing. Below the shell width the footer columns carry the same links. */
.site-nav {
  display: none;
}

.site-nav a {
  /* A 44px-tall target (WCAG 2.5.8 asks 24px) on a one-line label. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dbe6e6;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .site-header__inner {
    gap: var(--space-4);
    padding-block: var(--space-3);
  }

  .finder {
    display: flex;
    max-width: 26rem;
  }
}

@media (min-width: 62rem) {
  .site-nav {
    display: flex;
    margin-left: auto;
    gap: var(--space-3);
  }

  /* Between 62rem and the shell width the brand, the field and four links only
     just fit; the field is the part that can give, so it does, rather than the
     page scrolling sideways by a few pixels. */
  .site-header .finder {
    flex: 1 1 auto;
    min-width: 12rem;
  }
}

@media (min-width: 75rem) {
  .site-nav {
    gap: var(--space-4);
  }
}

/* ----------------------------------------------------------------- main -- */

.main {
  padding-block: var(--space-4) var(--space-6);
}

/* ---------------------------------------------------------- breadcrumb --- */

.breadcrumb {
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-3);
}

.breadcrumb a {
  color: var(--ink-muted);
  text-decoration: none;
  /* 24px is the WCAG 2.5.8 floor; the padding reaches it without moving the text. */
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.breadcrumb a:hover {
  color: var(--teal-text);
  text-decoration: underline;
}

.breadcrumb > * + *::before {
  content: "/";
  margin-right: 0.4rem;
  color: var(--rule-strong);
}

/* ------------------------------------------------------------- the file -- */
/* A record sheet: a mono masthead strip, then identity, then values. */

.file {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

/* The masthead strip: what kind of record this is, which year it covers, what it was
   reported from. Fields, not a headline — so they sit as peers separated by a rule
   rather than pushed to opposite ends of the bar. */
.file__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.85rem;
  padding: 0.6rem var(--space-3);
  background: var(--teal-wash);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.file__strip > * + *::before {
  content: "|";
  margin-right: 0.85rem;
  color: var(--rule-strong);
}

/* The trailing fields are context, not identity. On a phone they would push the name
   itself down the screen, so they go — and because they are last, the separators of
   the fields that remain are unaffected. */
@media (max-width: 47.999rem) {
  .file__strip > .file__strip-wide {
    display: none;
  }
}

.file__body {
  padding: var(--space-3);
}

@media (min-width: 48rem) {
  .file__body {
    padding: var(--space-4);
  }
}

.file__name {
  font-size: var(--step-5);
  font-weight: 700;
}

/* The disambiguator. Never optional: 27.4% of profiles share a name, so a bare
   name identifies nobody and the design must not let one ship alone. */
.file__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--step-1);
  color: var(--ink-soft);
}

.file__who > * + *::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--rule-strong);
}

.file__ids {
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The sentence answer engines lift verbatim. Sized as lead text because it is
   also the fastest path to the answer for a person who reads one line. */
.lead {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink-body);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* The figures inside the sentence are the only words in it that are also data. */
.lead strong,
.lead b {
  font-weight: 600;
  color: var(--ink);
}

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

.figures {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  /* Two-up on tablet. Three across at 768px leaves ~200px per panel, which broke
     "$9,383,041" onto two lines — the one element on the site that must never wrap. */
  .figures {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Two lines reserved once the panels sit side by side. "Ownership & investment
     interest" wraps where the other two labels do not, and three headline figures that
     do not share a baseline read as three unrelated numbers rather than as peers. */
  .figure__label {
    min-height: 3.3em;
  }
}

.figure {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal-mark);
  border-radius: var(--radius);
  padding: var(--space-3);
}

/* A kind with nothing reported keeps its panel and reads zero. Removing it
   would imply the data is missing rather than empty. */
.figure--empty {
  border-top-color: var(--rule-strong);
}

.figure__label {
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

@media (min-width: 62rem) {
  .figures {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The headline figure is display type, not tabular data: it is the answer the page
   exists to give, and it is read once rather than scanned down a column. Values that
   sit inside a table stay in the mono face, where a decimal point has a column to
   line up in. */
.figure__amount {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  /* Shrinks to fit rather than wrapping: a figure broken across two lines reads as two
     numbers. Floor is legible at 320px, ceiling is the old fixed size. */
  font-size: clamp(1.5rem, 1.05rem + 2.1vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-top: var(--space-2);
  white-space: nowrap;
}

.figure--empty .figure__amount {
  color: var(--ink-muted);
}

.figure__meta {
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

/* --- THE SIGNATURE -------------------------------------------------------
   A ledger closes with a sum. This one closes with the reason there isn't
   one. It sits exactly where the eye expects a bottom line, and it is the
   single element on this site allowed to draw attention to an absence. */

.no-total {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
}

.no-total__slot {
  font-family: var(--font-data);
  font-size: var(--step-3);
  color: var(--rule-strong);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  line-height: 1;
}

.no-total__text {
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: 56ch;
}

.no-total__text b {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
}

/* ------------------------------------------------------------ percentile - */

/* A position in a distribution, stated as quietly as any other piece of context.
   Sized below the lead on purpose: a rank set in headline type would read as the
   finding, and the finding is the figure. */
.percentile {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.percentile b {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --------------------------------------------------------------- blocks -- */

.block {
  margin-top: var(--space-5);
}

/* A section on a record page is labelled, not headlined. The label is a mono field
   name in the record's own voice; the panel or table beneath it carries the border,
   so a second heavy rule here would only draw a line under a line. */
.block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.block__title {
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
}

/* Prose is the exception. Where the section is something to read rather than
   something to scan, it gets a real heading in the display face. */
.block--prose .block__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

/* Truncation is stated, never implied. A top ten that looks complete is a lie
   by omission, so the count sits in the heading rather than in a tooltip. */
.block__count {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

/* CSV in windows of 5,000 rows, for lists longer than one file. */
.csv-windows {
  margin: 0 0 var(--space-3);
}
.csv-windows > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  cursor: pointer;
  color: var(--teal-text);
  font-weight: 600;
}
.csv-windows__hint {
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-muted);
}
.csv-windows__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}
.csv-windows__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--font-data);
  font-size: var(--step--1);
  text-decoration: none;
}

/* ---------------------------------------------------------------- table -- */

/* A sheet inside a panel is a filing card: the border belongs to the container so the
   table's own first and last rows do not have to draw one. */
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.sheet {
  font-size: var(--step-0);
}

.panel .sheet th {
  background: var(--paper);
  padding: var(--space-2) var(--space-3);
  border-bottom-color: var(--rule);
}

.panel .sheet td {
  padding: var(--space-2) var(--space-3);
}

.panel .sheet tr:last-child td {
  border-bottom: 0;
}

/* Relative bar — scaled to the largest value of its own kind in this one table, and
   to nothing else. It never compares this record to another record, and it never
   compares a meal to a research grant. Every bar is mirrored by its own number in the
   next column, so the chart adds emphasis and never carries information alone. */
.sheet__rel {
  width: 100%;
  min-width: 4rem;
}

.rel {
  height: 10px;
  border-radius: 999px;
  background: var(--teal-wash);
  overflow: hidden;
}

.rel > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal-mark);
}

.sheet th {
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.sheet td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.sheet .num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 0;
  white-space: nowrap;
}

.sheet th.num {
  text-align: right;
}

/* Primary figures must never need a sideways drag, so below the table
   breakpoint each row becomes a labelled stack instead of a scrolling grid. */
@media (max-width: 39.999rem) {
  .sheet thead {
    display: none;
  }

  .sheet tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
  }

  .sheet td {
    border: 0;
    padding: 0;
  }

  .sheet td[data-label]::before {
    content: attr(data-label);
    display: block;
    /* A figure cell keeps its number on one line, but its label may wrap: a long
       label ("John Smith (Optometrist · Elyria, OH)") inherited nowrap and pushed
       the stacked row wider than the phone. */
    white-space: normal;
    font-family: var(--font-data);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .sheet .num {
    text-align: right;
  }

  /* The bar keeps its own line under the stacked row rather than fighting the amount
     for the right-hand column. */
  .sheet .sheet__rel {
    grid-column: 1 / -1;
    margin-top: var(--space-1);
  }

  .panel .sheet td {
    padding: 0;
  }

  .panel .sheet tr {
    padding: var(--space-2) var(--space-3);
  }
}

/* ----------------------------------------------------------------- wall -- */
/* Rendered, visible, and identical for crawler and visitor. Never hidden
   behind script, never swapped by user agent. What is behind it is named,
   because a vague lock does not convert. */

.wall {
  margin-top: var(--space-5);
  /* A plain hairline: the amber belongs to the one CTA inside, not to a stripe
     down the card's edge. */
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 48rem) {
  .wall {
    padding: var(--space-4);
  }
}

/* Wide enough for the copy and the action to sit side by side, which puts the one
   amber element of the viewport on the same line as the reason to press it. */
@media (min-width: 62rem) {
  .wall {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }

  .wall__said {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .wall .cta {
    flex: none;
    margin-top: 0;
  }
}

.wall__eyebrow {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.wall__title {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.3;
}

.wall__say {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* What is behind the wall, named item by item. A vague lock does not convert, and an
   unnamed one is indistinguishable from a page that is simply missing something. */
.wall__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-body);
}

.wall__list li {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  background: var(--paper);
}

/* The single amber element of any viewport. Ink on amber, not white: white on amber
   is 1.9:1 and unreadable at this size. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 52px;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
}

.cta:hover {
  background: #ffb949;
  color: var(--ink);
}

/* The quiet action: teal word on a teal hairline, never a fill. Anything on this site
   that acts and is not the one amber CTA looks like this. */
.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid var(--teal-text);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);
  text-decoration: none;
  cursor: pointer;
}

.btn-quiet:hover {
  background: var(--teal-wash);
  color: var(--teal-deep);
}

/* --------------------------------------------------------------- prose --- */

.prose {
  max-width: var(--measure);
}

.prose h2 {
  font-size: var(--step-2);
  margin-top: var(--space-4);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin-top: var(--space-2);
}

.prose ul {
  margin-top: var(--space-2);
  padding-left: 1.2rem;
}

.prose li + li {
  margin-top: var(--space-1);
}

/* --------------------------------------------------------- provenance --- */
/* Quiet standing text. Not a banner, not dismissible: the disclaimers are part
   of the record, and styling them as an alert would imply an accusation the
   data does not support. */

.provenance {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.provenance p + p {
  margin-top: var(--space-2);
}

.provenance__source {
  font-family: var(--font-data);
  color: var(--ink-soft);
}

.provenance__eyebrow {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-1);
}

/* ---------------------------------------------------------- the citation -- */
/* A card with a real button, so it reads as something to do — and visibly not as the
   legal fine print it sits above. */

.cite {
  margin-top: var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cite__said {
  flex: 1 1 24rem;
  min-width: 0;
}

.cite__eyebrow {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: var(--space-2);
}

.cite__line {
  font-family: var(--font-data);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink-body);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
  word-break: break-word;
}

.cite__note {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* ----------------------------------------------------------------- grid -- */

.cards {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .cards--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: block;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.card:hover {
  border-color: var(--teal-mark);
  color: inherit;
}

.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
}

.card__sub {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.card__figure {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-2);
  color: var(--ink);
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------- the home -- */

.gate {
  padding-block: var(--space-5) var(--space-4);
}

.gate__eyebrow {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.gate__title {
  font-size: var(--step-5);
  font-weight: 700;
  margin-top: var(--space-2);
  max-width: 18ch;
}

.gate__say {
  margin-top: var(--space-3);
  font-size: var(--step-2);
  max-width: var(--measure);
  color: var(--ink-body);
  text-wrap: pretty;
}

.gate__finder {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  max-width: 36rem;
}

.gate__finder input {
  font-family: var(--font-body);
  font-size: var(--step-1);
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  width: 100%;
}

.gate__finder button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}

.gate__finder button:hover {
  background: var(--teal-deep);
}

@media (min-width: 34rem) {
  .gate__finder {
    flex-direction: row;
  }

  .gate__finder button {
    flex: none;
  }
}

/* The scale of the record, stated as reported counts rather than as a claim. */
.scale {
  margin-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
  /* Single column on the narrowest phones. Two columns only once there is room for a ten-digit
     amount: the program-year page prints figures in full ($3,935,229,481) where the home page
     abbreviates, and two of those side by side overflow a 375px screen. */
  grid-template-columns: 1fr;
  font-family: var(--font-data);
}

@media (min-width: 26rem) {
  .scale {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48rem) {
  .scale {
    grid-template-columns: repeat(4, 1fr);
  }
}

.scale__item {
  border-top: 2px solid var(--teal-mark);
  padding-top: var(--space-2);
  min-width: 0;
}

.scale__n {
  font-variant-numeric: tabular-nums;
  /* Scales with the viewport so a long amount shrinks rather than pushing the page sideways. */
  font-size: clamp(1.25rem, 0.85rem + 1.9vw, 1.75rem);
  color: var(--ink);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.scale__k {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------------- search -- */

.group + .group {
  margin-top: var(--space-5);
}

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

.results li {
  border-bottom: 1px solid var(--rule);
}

.result {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  text-decoration: none;
  color: inherit;
}

.result:hover .result__title {
  color: var(--teal-text);
  text-decoration: underline;
}

.result__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
}

.result__sub {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.result__figure {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: var(--step-0);
}

/* The period the figure above covers. Quieter than the figure and on its own line, so it reads as a
   qualifier rather than a second statistic. */
.result__years {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

@media (min-width: 40rem) {
  .result {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--space-4);
  }

  .result__sub {
    grid-column: 1;
  }

  .result__figure {
    grid-row: 1 / span 2;
    grid-column: 2;
    text-align: right;
  }
}

.empty {
  padding: var(--space-5) 0;
  max-width: var(--measure);
}

.empty__title {
  font-size: var(--step-3);
  font-weight: 600;
}

.empty p {
  margin-top: var(--space-2);
}

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

.site-footer {
  margin-top: var(--space-6);
  background: var(--ink);
  color: #a9bccb;
  padding-block: var(--space-4);
  font-size: var(--step--1);
}

/* Grouped and labelled rather than run together: nine links in one line is a list
   nobody reads, and the groups are the site's own three jobs — find a record,
   understand a record, know who is publishing it. */
.site-footer nav {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid #2b3d55;
  margin-bottom: var(--space-3);
}

@media (min-width: 34rem) {
  .site-footer nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) {
  .site-footer nav {
    grid-template-columns: repeat(3, 1fr) 16rem;
  }
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.foot-col__label {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* A mark, not a link: teal-mark is legible here because the ground is ink, where it
     runs 5.6:1 rather than the 2.56:1 it manages on white. */
  color: var(--teal-mark);
}

.foot-col a {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}

/* Who publishes this, stated in the record's own face. */
.site-footer__by {
  font-family: var(--font-data);
  font-size: var(--step--1);
  line-height: 1.8;
  color: #8ba0b1;
}

.site-footer a {
  color: #cfe0e0;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer p {
  max-width: var(--measure);
}

.site-footer p + p {
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------- motion -- */
/* One orchestrated moment: the figures arrive. Opacity and transform only, on
   elements whose space is already reserved, so nothing shifts and CLS stays 0. */

@media (prefers-reduced-motion: no-preference) {
  .figure {
    animation: rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
  }

  .figure:nth-child(2) {
    animation-delay: 70ms;
  }

  .figure:nth-child(3) {
    animation-delay: 140ms;
  }

  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

@media print {
  .site-header .finder,
  .wall,
  .cta {
    display: none;
  }
}

/* ====================================================================== visuals =
   The home page's imagery is the record itself. There is no photography on this
   site: a picture of a clinician above a page about pharmaceutical payments
   misrepresents what the reader is looking at.
   ================================================================================ */

/* --- hero band ---------------------------------------------------------------- */
/* Full-bleed ink ground behind the opening screen. The flow marks are decorative
   but derived from the subject: three streams that never meet. */

.band {
  position: relative;
  background: var(--ink);
  color: #e8eef2;
  overflow: hidden;
  margin-bottom: var(--space-5);
}

.band__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}

.band > .shell {
  position: relative;
}

.band .gate__eyebrow {
  color: var(--teal-mark);
}

.band .gate__title,
.band .scale__n {
  color: #fff;
}

.band .gate__say {
  color: #c4d3de;
}

.band .scale__item {
  border-top-color: var(--teal-mark);
}

.band .scale__k,
.band .no-total__text {
  color: #93a6b8;
}

.band .no-total {
  border-color: #35485f;
}

.band .no-total__text b {
  color: #cfe0e0;
}

.band .no-total__slot {
  color: #35485f;
}

.band .card__sub {
  color: #93a6b8;
}

.band .card__sub a {
  color: var(--teal-mark);
  display: inline-block;
  padding-block: 0.35rem;
}

.band .gate__finder button {
  background: var(--amber);
  color: #3d2600;
}

.band .gate__finder button:hover {
  background: #ffb949;
}

.band .gate__finder input {
  border-color: #35485f;
  background: #1b2a3c;
  color: #fff;
}

.band .gate__finder input::placeholder {
  color: #8095a8;
}

/* --- flow diagram -------------------------------------------------------------- */
/* Three streams, drawn apart and never merged, because they are three kinds of
   money. Nothing here may read as a single pipeline that sums. */

.flow {
  width: 100%;
  height: auto;
  display: block;
}

.flow__label {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-muted);
}

.flow__amount {
  font-family: var(--font-data);
  font-size: 19px;
  fill: var(--ink);
}

.flow__kind {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--teal-deep);
}

/* --- state tiles --------------------------------------------------------------- */
/* Navigation and picture at once: fifty links to the state hubs, tinted by how much
   money each reported. The share is printed in every tile, so the tint is a second
   encoding rather than the only one. */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: var(--space-1);
}

.tile {
  display: block;
  padding: var(--space-2);
  border-radius: 6px;
  border: 1px solid var(--rule);
  text-decoration: none;
  background: var(--paper-raised);
  min-width: 0;
}

.tile:hover {
  border-color: var(--teal-text);
}

.tile__code {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--ink);
  display: block;
}

.tile__share {
  font-family: var(--font-data);
  font-size: var(--step--1);
  /* Ink, not ink-muted: the tint behind it runs up to full teal-mark, where muted grey
     fell to 2.1:1. Ink holds 6.5:1 on the darkest tile. */
  color: var(--ink);
  display: block;
}

/* --- nature bars --------------------------------------------------------------- */

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

.bars li + li {
  margin-top: var(--space-2);
}

.bar__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
}

.bar__name {
  font-size: var(--step-0);
  color: var(--ink-body);
}

.bar__value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-0);
  color: var(--ink);
  white-space: nowrap;
}

.bar__track {
  margin-top: var(--space-1);
  height: 8px;
  border-radius: 999px;
  background: var(--teal-wash);
  overflow: hidden;
}

.bar__fill {
  height: 100%;
  background: var(--teal-mark);
  border-radius: 999px;
}

/* A full-bleed page supplies its own shells; the band must reach the viewport edge,
   so the top padding moves onto the band instead of the main element. */
.main--bleed {
  padding-block: 0 var(--space-6);
}

.main--bleed .band .gate {
  padding-block: var(--space-5) var(--space-5);
}

/* --------------------------------------------------------------- charts -- */

/* Charts are server-rendered HTML and one stretched SVG. Rules they share: teal for
   this record's own marks, ink for the subject line, muted ink for anything that is a
   population rather than a person. No red, no warning colour — a chart on this site
   describes a record, it never flags one. Every mark's value is also written as text. */
.chart {
  margin: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.chart + .chart {
  margin-top: var(--space-3);
}

.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-3);
}

.chart__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
}

.chart__caption,
.chart__note {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.chart__note {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: 1.55;
}

.chart__more {
  margin-top: var(--space-2);
  font-size: var(--step--1);
}

.chart__table {
  margin-top: var(--space-3);
  font-size: var(--step--1);
}

.chart__table summary {
  cursor: pointer;
  color: var(--teal-text);
  display: flex;
  align-items: center;
  min-height: 44px;
  width: fit-content;
}

.chart__table .sheet {
  margin-top: var(--space-2);
  font-size: var(--step--1);
}

/* An opened chart table can be wider than a phone (one column per compared record, or
   five figures a year). It scrolls inside its own region — focusable so a keyboard can
   scroll it too — and never widens the page. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.table-scroll:focus-visible {
  outline: 2px solid var(--teal-text);
  outline-offset: 2px;
}

.charts-2 {
  display: grid;
  gap: var(--space-3);
}

.charts-2 > .chart + .chart {
  margin-top: 0;
}

@media (min-width: 62rem) {
  .charts-2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Ranked bars: label, track, amount. On a phone the label takes the full row and the
   track and amount share the line beneath it. */
.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.bars__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "track value";
  gap: 0.2rem var(--space-2);
  align-items: center;
}

/* Sized by the chart, not the viewport: the same list sits full-width on one page and
   in half a two-column grid on another, and a squeezed track reads as a small number. */
.chart--bars {
  container-type: inline-size;
}

@container (min-width: 34rem) {
  .bars__row {
    grid-template-columns: minmax(10rem, 16rem) 1fr auto;
    grid-template-areas: "label track value";
  }
}

.bars__label {
  grid-area: label;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
  color: var(--ink);
}

.bars__sub {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.bars__track {
  grid-area: track;
  height: 10px;
  border-radius: 999px;
  background: var(--teal-wash);
  overflow: hidden;
}

.bars__track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--teal-mark);
}

.bars__value {
  grid-area: value;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.bars__meta {
  display: block;
  color: var(--ink-muted);
}

.bars__row--muted .bars__label,
.bars__row--muted .bars__value {
  color: var(--ink-muted);
}

.bars__row--muted .bars__track > span {
  background: var(--rule-strong);
}

/* Year columns: one small multiple per kind of money, each on its own scale. */
.cols {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

@media (min-width: 40rem) {
  .cols {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

.cols__panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3) var(--space-2);
}

.cols__kind,
.cols__peak {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cols__peak {
  text-transform: none;
  letter-spacing: 0.02em;
  margin-top: 0.2rem;
}

.cols__plot {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 5.5rem;
  margin-top: var(--space-2);
  border-bottom: 1px solid var(--rule-strong);
}

.cols__col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.cols__fill {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--teal-mark);
}

.cols__fill--zero {
  background: var(--rule);
}

.cols__years {
  display: flex;
  gap: 4px;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.cols__years > span {
  flex: 1;
  text-align: center;
}

/* Trend against peers. */
.trend__legend {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-body);
}

.trend__legend li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.key {
  display: inline-block;
  width: 1.4rem;
  height: 0;
  border-top: 2px solid var(--ink);
}

.key--peer {
  border-top: 2px dashed var(--teal-mark);
}

.key--band {
  height: 0.7rem;
  border: 0;
  background: var(--teal-wash);
  border-radius: 2px;
}

.key--national {
  border-top: 2px dotted var(--ink-muted);
}

.trend {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  grid-template-rows: 12rem auto;
}

@media (min-width: 48rem) {
  .trend {
    grid-template-rows: 15rem auto;
  }
}

.trend__ticks {
  position: relative;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

.trend__ticks > span {
  position: absolute;
  right: var(--space-1);
  transform: translateY(50%);
  white-space: nowrap;
}

.trend__plot {
  position: relative;
  border-left: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.trend__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trend__plot path,
.trend__plot line {
  vector-effect: non-scaling-stroke;
  fill: none;
}

.trend__grid {
  stroke: var(--rule);
  stroke-width: 1;
}

.trend__plot .trend__band {
  fill: var(--teal-wash);
  stroke: none;
}

.trend__peer {
  stroke: var(--teal-mark);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

.trend__national {
  stroke: var(--ink-muted);
  stroke-width: 2;
  stroke-dasharray: 2 4;
}

.trend__subject {
  stroke: var(--ink);
  stroke-width: 2.5;
}

.trend__dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper-raised);
}

.trend__years {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  padding-top: 0.3rem;
  font-family: var(--font-data);
  font-size: 0.6875rem;
  color: var(--ink-muted);
}

/* Postal address under the identifiers: it is how two people with one name are told apart. */
.file__address {
  margin-top: 0.2rem;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* Kind tabs on a records page: two plain links, the current one underlined in teal. */
.tabs {
  display: flex;
  gap: var(--space-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-3);
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) 0 var(--space-2);
  margin-bottom: -1px;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.tabs__tab--on {
  color: var(--ink);
  border-bottom-color: var(--teal-mark);
}

.picker--actions {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-3);
}

.picker--actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* A record's fields: label above value, the disclosure form's own layout. */
.fields {
  display: grid;
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

@media (min-width: 40rem) {
  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fields dt {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fields dd {
  margin: 0.15rem 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.sheet--records td:first-child {
  white-space: nowrap;
}

/* ------------------------------------------------ save, compare, share -- */

/* The three next moves under a record's identity. Quiet by default: they sit
   beside the answer, never compete with it. Sentence case, because these are
   verbs a reader acts on, not field names. */
.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.record-actions[hidden] {
  display: none;
}

.act {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1rem 0 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper-raised);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out,
    color 160ms ease-out;
}

.act:hover {
  border-color: var(--teal-mark);
  color: var(--teal-deep);
}

.act__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.act[aria-pressed="true"] {
  background: var(--teal-wash);
  border-color: var(--teal-mark);
  color: var(--teal-deep);
}

/* Only the star fills: a saved record reads as saved at a glance. */
.act[data-act="save"][aria-pressed="true"] .act__icon {
  fill: currentColor;
}

/* The compare tray: rises from the bottom when something is in it and stays
   across pages, so gathering two records and comparing them is one tap away. */
.tray {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  padding: 0 var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  animation: tray-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tray__inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "names go clear"
    "hint  go clear";
  align-items: center;
  column-gap: var(--space-2);
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(20, 32, 46, 0.16), 0 2px 6px rgba(20, 32, 46, 0.08);
}

.tray__names {
  grid-area: names;
  min-width: 0;
  display: flex;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tray__names > span:not(.tray__sep) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tray__sep {
  color: var(--ink-muted);
}

.tray__hint {
  grid-area: hint;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.tray__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper-raised);
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
  white-space: nowrap;
}

.tray__go:hover {
  background: var(--teal-deep);
  color: var(--paper-raised);
}

.tray__go--off {
  background: var(--rule);
  color: #45525f;
  cursor: default;
}

.tray__clear {
  grid-area: clear;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}

.tray__clear:hover {
  background: var(--paper);
  color: var(--ink);
}

.tray__clear svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Keep the footer reachable under the tray. */
body.has-tray {
  padding-bottom: 6.5rem;
}

/* One line of feedback for a save, an undo, a copied link. Ink, not a colour
   that means anything: the site has no alarms. */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(36rem, calc(100vw - 2rem));
  padding: 0.7rem 0.7rem 0.7rem 1.1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper-raised);
  font-size: var(--step--1);
  box-shadow: 0 10px 30px rgba(20, 32, 46, 0.28);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.has-tray .toast {
  bottom: calc(6.5rem + env(safe-area-inset-bottom));
}

.toast--on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.toast__action {
  flex: none;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #bdf0ea;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.toast__action:hover {
  background: rgba(255, 255, 255, 0.2);
}

@keyframes tray-in {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tray,
  .toast,
  .act {
    animation: none;
    transition: none;
  }
}

/* --------------------------------------------------------------- compare -- */

/* Series colours by position, from the brand's own marks. Never red, never amber:
   a colour here identifies a record, it never judges one. */
.series-0 { --series: var(--teal-mark); }
.series-1 { --series: var(--ink); }
.series-2 { --series: var(--teal-deep); }
.series-3 { --series: var(--ink-muted); }

.key-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--series);
  vertical-align: 0.05em;
}

.key--series {
  border-top: 2.5px solid var(--series);
}

.trend__series {
  stroke: var(--series);
  stroke-width: 2.5;
}

.trend__dot.series-0,
.trend__dot.series-1,
.trend__dot.series-2,
.trend__dot.series-3 {
  background: var(--series);
}

.compare__title {
  font-size: var(--step-4);
  max-width: 30ch;
}

.compare-legend {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (min-width: 48rem) {
  .compare-legend {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1) var(--space-2) var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.compare-legend__item .key-dot {
  width: 12px;
  height: 12px;
  flex: none;
}

.compare-legend__who {
  flex: 1;
  min-width: 0;
  display: grid;
  line-height: 1.35;
}

.compare-legend__who a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.compare-legend__who a:hover {
  color: var(--teal-deep);
  text-decoration: underline;
}

.compare-legend__who span {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.compare-legend__remove {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  color: var(--ink-muted);
}

.compare-legend__remove:hover {
  background: var(--paper);
  color: var(--ink);
}

.compare-legend__remove svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* One nature, one bar per record, on that nature's own scale. */
.pairs {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 48rem) {
  .pairs {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
  }
}

.pairs__label {
  margin-bottom: 0.35rem;
  color: var(--ink);
  line-height: 1.35;
}

.pairs__row {
  display: grid;
  grid-template-columns: 1fr 6.5rem;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0.25rem;
}

.pairs__track {
  height: 8px;
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}

.pairs__track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--series);
}

.pairs__value {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  text-align: right;
  color: var(--ink);
}

.shared {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.shared__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.shared__item:last-child {
  border-bottom: 0;
}

.shared__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.shared__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
}

/* The set wraps, and so does each entry's label: two same-named people are told
   apart by specialty and city, which can be long. Below 48rem the amounts stack
   under the name, one per line, so compared records never push the row sideways. */
.shared__amounts > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 47.999rem) {
  .shared__amounts {
    flex-direction: column;
    flex-basis: 100%;
  }
}

/* ----------------------------------------------------------------- saved -- */

.saved__list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.saved__item {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* A removed row folds away; the grid display above would otherwise beat [hidden]. */
.saved__item[hidden] {
  display: none;
}

@media (min-width: 48rem) {
  .saved__item {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .saved__item .record-actions {
    margin-top: 0;
  }
}

.saved__who {
  display: grid;
  min-width: 0;
  line-height: 1.4;
}

.saved__kind {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.saved__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.saved__name:hover {
  color: var(--teal-deep);
  text-decoration: underline;
}

.saved__sub {
  color: var(--ink-body);
}

.saved__figures {
  margin-top: 0.2rem;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.saved__empty {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------- find a doctor -- */
/* Name, state and specialty as one form above the list, with an explicit button:
   the selects never navigate by themselves. One column on a phone, one row when
   there is room for all four. */

.doc-finder {
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

@media (min-width: 40rem) {
  .doc-finder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-finder__field--name {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62rem) {
  .doc-finder {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
  }

  .doc-finder__field--name {
    grid-column: auto;
  }
}

.doc-finder__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.doc-finder__input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

.doc-finder__input::placeholder {
  color: #6b7a8b;
}

.doc-finder__input:hover {
  border-color: var(--teal-mark);
}

.doc-finder__go {
  min-height: 44px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-0);
  cursor: pointer;
  white-space: nowrap;
}

.doc-finder__go:hover {
  background: var(--teal-deep);
}

/* ---------------------------------------------------------- search form --- */

.search-form {
  flex-direction: column;
  margin-top: var(--space-3);
}

.search-form__label {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.search-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.search-form__row input {
  min-height: 48px;
}

.search-form__row button {
  min-height: 48px;
}

@media (min-width: 34rem) {
  .search-form {
    flex-direction: column;
  }

  .search-form__row {
    flex-direction: row;
  }
}

/* "See every doctor named …" under a truncated group, and the one-line hint beside it. */
.group__more {
  margin-top: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.group__hint {
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin-top: var(--space-2);
}

.group__more .group__hint {
  margin-top: 0;
}

/* ------------------------------------------------------------ not listed -- */
/* What a missing doctor means. A hairline panel, not an alert: nothing is wrong. */

.not-listed {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  max-width: 48rem;
}

.not-listed__title {
  font-size: var(--step-1);
  font-weight: 600;
}

.not-listed p,
.not-listed ul {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  line-height: 1.6;
}

.not-listed ul {
  padding-left: 1.2rem;
}

/* ------------------------------------------------------------ pagination -- */

.pager {
  margin-top: var(--space-3);
}

.pager__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-data);
  font-size: var(--step--1);
}

.pager__list li:empty {
  display: none;
}

.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--teal-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.pager__link:hover {
  border-color: var(--teal-mark);
  background: var(--teal-wash);
  color: var(--teal-deep);
}

.pager__link--on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.pager__link--on:hover {
  background: var(--ink);
  color: #fff;
}

.pager__gap {
  padding: 0 0.25rem;
  color: var(--ink-muted);
}

/* Tray entries: the name, then the line that tells two same-named people apart. */
.tray__who {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.tray__name,
.tray__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tray__sub {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.tray__names {
  align-items: center;
}

.toast__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: calc(var(--space-2) * -1);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c4d3de;
  cursor: pointer;
}

.toast__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.toast__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Compare: every value names its record in words above its bar. With two people of
   one name the words carry the specialty and city too — colour only repeats it. */
.pairs__who {
  grid-column: 1 / -1;
  font-size: var(--step--1);
  color: var(--ink-body);
  line-height: 1.35;
  margin-top: 0.35rem;
}

.shared__amount {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}

.shared__who {
  font-family: var(--font-body);
  color: var(--ink-body);
}

/* Facts under an entity's figures — a study's sponsor and trial registration. */
.fields--facts {
  margin-top: var(--space-3);
}

/* Research a doctor led as principal investigator: under the figures, labelled like
   one, but a line rather than a fourth panel — it was paid to an institution. */
.investigator {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
}

.investigator__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem var(--space-2);
  margin-top: 0.2rem;
}

.investigator__amount {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-2);
  color: var(--ink);
}

.investigator__meta {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* Records filters: a disclosure on a phone, always open on anything wider. */
.filters > .filters__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper-raised);
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);
  cursor: pointer;
  list-style: none;
}

.filters > .filters__toggle::-webkit-details-marker {
  display: none;
}

.filters[open] > .filters__toggle {
  margin-bottom: var(--space-3);
}

.filters__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 48rem) {
  .filters > .filters__toggle {
    display: none;
  }
}

/* A doctor list's own sentence about its slice, under the finder. */
.list-summary {
  margin-top: var(--space-3);
  max-width: var(--measure);
  color: var(--ink-body);
}

/* The facet link walls: each link fills its pill, so the target is the pill. */
.facets .wall__list li {
  padding: 0;
}

.facets .wall__list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.8rem;
}

.tray__who {
  flex: 1 1 0;
}

/* On a phone the tray is one compact line — names, Compare, clear — so it never
   covers more than a thumb's height of the page (about 60px plus the safe area).
   The line that tells two same-named people apart lives on the comparison itself,
   which labels every value with it. */
@media (max-width: 39.999rem) {
  .tray {
    padding: 0 var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));
  }

  .tray__inner {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "names go clear";
    row-gap: 0;
    padding: 0.375rem 0.25rem 0.375rem 0.75rem;
  }

  .tray__hint,
  .tray__sub {
    display: none;
  }

  .tray__names {
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
  }

  .tray__who {
    flex: 0 1 auto;
    min-width: 0;
  }

  .tray__name {
    max-width: none;
  }

  .tray__go {
    padding: 0 0.9rem;
  }

  body.has-tray {
    padding-bottom: 5.5rem;
  }

  body.has-tray .toast {
    bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}

/* The results start a clear step below the search form, not tucked under it. */
.search-form + .group,
.search-form + .empty {
  margin-top: var(--space-5);
}

.search-form + .empty {
  padding-top: 0;
}

/* ======================================================================= */
/* Home page, 2026-09-29 — journalist-first. Same filing: mono for reported */
/* figures, display face for headings, teal as a mark, amber once (the     */
/* search button).                                                          */
/* ======================================================================= */

.gate__title--problem {
  max-width: 22ch;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  letter-spacing: -0.02em;
}

.gate__try {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  color: #93a6b8;
}

.gate__try a {
  color: var(--teal-mark);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* The separator reads only when both sit on one line; the app link takes its own. */
.gate__or {
  display: none;
}

.gate__try .gate__app {
  display: flex;
  width: fit-content;
}

.band .gate__try .gate__app {
  font-weight: 600;
  color: #fff;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
}

/* One line of proof: four reported facts, each a link, set as record fields. */
.proof {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  padding-top: var(--space-1);
  border-top: 1px solid #35485f;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: #c4d3de;
}

.proof__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  color: #c4d3de;
  text-decoration: none;
}

a.proof__item:hover {
  color: #fff;
  text-decoration: underline;
}

.proof__item b {
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.proof__item a {
  color: var(--teal-mark);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.gate__note {
  margin-top: var(--space-1);
  font-size: var(--step--1);
  color: #93a6b8;
  max-width: 60ch;
}

/* --- sections -------------------------------------------------------------- */

.home-sec {
  margin-top: var(--space-6);
}

.home-sec:first-child {
  margin-top: 0;
}

.home-h2 {
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.home-intro {
  margin-top: var(--space-1);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.home-intro a {
  display: inline-block;
  padding-block: 0.6rem;
}

.home-foot {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.home-foot a {
  display: inline-block;
  padding-block: 0.7rem;
}

/* --- worked examples ----------------------------------------------------------- */
/* A question, the figure that answers it, the sentence around the figure, and the
   way in. Ruled columns, not floating cards: the three read as one exhibit. */

.examples {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--rule-strong);
}

.example {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}

@media (min-width: 62rem) {
  .examples {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--rule);
  }

  .example {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-bottom: 0;
  }

  .example + .example {
    padding-left: var(--space-4);
    border-left: 1px solid var(--rule);
  }
}

.example__q {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}

.example__figure {
  margin-top: var(--space-2);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.example__figure a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration-color: var(--teal-mark);
  text-decoration-thickness: 2px;
}

.example__text {
  margin-top: var(--space-2);
  color: var(--ink-body);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.example__link {
  margin-top: auto;
  padding-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* --- research paths ------------------------------------------------------------- */
/* An index: the figure in the margin, the path beside it. Each row is one link. */

.paths {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}

.paths li {
  border-bottom: 1px solid var(--rule);
}

.path {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-1);
  text-decoration: none;
  color: inherit;
  min-height: 44px;
}

.path:hover {
  background: var(--teal-wash);
  color: inherit;
}

.path__fig {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1);
  color: var(--teal-deep);
  overflow-wrap: anywhere;
}

.path__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--ink);
}

.path:hover .path__title {
  text-decoration: underline;
  text-decoration-color: var(--teal-mark);
  text-underline-offset: 0.18em;
}

.path__sub {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
  max-width: 70ch;
}

@media (min-width: 40rem) {
  .path {
    grid-template-columns: 12rem 1fr;
    gap: var(--space-4);
    align-items: baseline;
  }
}

/* --- year in figures ----------------------------------------------------------- */

.figblock {
  margin-top: var(--space-4);
}

.figblock__title {
  font-family: var(--font-data);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
}

.figblock__count {
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-transform: none;
}

.figblock__more {
  margin-top: var(--space-1);
  font-size: var(--step--1);
}

.figblock__more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.kinds {
  margin: var(--space-2) 0 0;
  display: grid;
  gap: var(--space-1) var(--space-3);
  grid-template-columns: 1fr;
  font-size: var(--step--1);
}

@media (min-width: 48rem) {
  .kinds {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kinds dt {
  color: var(--ink-muted);
}

.kinds dd {
  margin: 0;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- read it right --------------------------------------------------------------- */

.rules {
  margin-top: var(--space-3);
  display: grid;
  gap: var(--space-3) var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .rules {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rule {
  border-top: 2px solid var(--teal-mark);
  padding-top: var(--space-2);
}

.rule__title {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
}

.rule p {
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  color: var(--ink-body);
}

.rule a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
}

/* --- for journalists: terms as record fields ------------------------------------- */

.terms {
  margin: var(--space-3) 0 0;
  border-top: 1px solid var(--rule-strong);
}

.terms > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 40rem) {
  .terms > div {
    grid-template-columns: 8rem 1fr;
    gap: var(--space-3);
  }
}

.terms dt {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.terms dd {
  margin: 0;
  max-width: 70ch;
}

.terms__cite {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-data);
  font-size: var(--step--1);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: var(--space-1) var(--space-2);
  overflow-wrap: anywhere;
}

/* --- CSV, one line ------------------------------------------------------------ */

.csv-line {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
}

.csv-line__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.csv-line__hint,
.csv-windows__more {
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.csv-windows__more {
  margin-top: var(--space-2);
  max-width: var(--measure);
}

/* --- records pages ------------------------------------------------------------- */

.records-title {
  font-size: var(--step-4);
  overflow-wrap: anywhere;
}

.records-who {
  margin-top: var(--space-2);
}

/* A study title or company name with no break opportunity widened the stacked row past
   the phone, and the panel clipped it. */
@media (max-width: 39.999rem) {
  .sheet--records tr {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sheet--records td {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}


/* ------------------------------------------------- Medicare panels (Part D / B) -- */

/* The Medicare tables stack under the figures with the page's usual rhythm. */
.medicare-table {
  margin-top: var(--space-3);
}

/* A second line inside a cell: the generic name under a brand, a billing code under its description. */
.medicare-sub {
  display: block;
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-muted);
}

/* What the file leaves out, in the same quiet type as the percentile sentence. */
.medicare-note {
  margin-top: var(--space-2);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* The standing sentence on the payments panel. Same size, heavier lead-in: it must be read before the
   table, and it must not look like a warning, so it takes no colour of its own. */
.medicare-note--lead {
  color: var(--ink-soft);
}

.medicare-note--lead b {
  font-family: var(--font-data);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Paying companies under a product: one line each, the amount in the data face beside the name. */
.payers {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
}

.payers li + li {
  margin-top: 2px;
}

.payers__amount {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  margin-left: var(--space-1);
}

/* A figure Medicare did not publish. A dash, in the muted tone, so it never reads as a zero. */
.sheet td.cell--none {
  color: var(--ink-muted);
}

/* The remaining rows of a table, collapsed. All of it is in the HTML, so a crawler and a screen reader read it
   without opening anything. */
.medicare-more {
  margin-top: var(--space-2);
}

.medicare-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--teal-text);
  font-weight: 600;
}

/* ------------------------------------------------------ dashboard links -- */
/* Links from a public record to the same record in the signed-in dashboard (app.whopaidmydoc.com). Plain
   links, so they work with scripts off; teal like every link, with an arrow that says "this leaves the page". */

.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--teal-text);
  text-decoration: none;
}

.dash-link::after {
  content: "92";
  transition: transform 160ms ease-out;
}

.dash-link:hover,
.dash-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dash-link:hover::after {
  transform: translateX(3px);
}

.dash-link--record {
  margin-top: var(--space-1);
}

.dash-link--more {
  margin-top: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .dash-link::after {
    transition: none;
  }
}