:root {
  /* Indiana University digital palette. RICF uses no IU marks or signatures. */
  --iu-crimson: #990000;
  --iu-crimson-light: #f41c40;
  --iu-crimson-dark: #6d0808;
  --iu-black: #072332;
  --iu-cream: #ffffff;
  --iu-cream-light: #f8efe2;
  --iu-cream-dark: #f5e3cc;
  --iu-gray-light: #eeeef0;
  --iu-gray-dark: #b9c1c6;
  --iu-slate: #4c5a69;

  /* Semantic interface tokens keep the brand palette consistent across views. */
  --ink: var(--iu-black);
  --ink-soft: var(--iu-slate);
  --forest: var(--iu-crimson);
  --teal: var(--iu-crimson-dark);
  --teal-bright: var(--iu-crimson-light);
  --vermillion: var(--iu-crimson);
  --gold: var(--iu-cream-dark);
  --paper: var(--iu-cream-light);
  --paper-deep: var(--iu-cream-dark);
  --cream: var(--iu-cream);
  --white: var(--iu-cream);
  --line: var(--iu-gray-light);
  --line-dark: rgba(7, 35, 50, 0.22);
  --muted: var(--iu-slate);
  --shadow: 0 20px 60px rgba(109, 8, 8, 0.12);
  --chart-series-1: var(--iu-crimson);
  --chart-series-2: var(--iu-crimson-dark);
  --chart-series-3: var(--iu-crimson-light);
  --chart-track: var(--iu-gray-light);
  --radius: 4px;
  /* The site header is sticky, so anything else that sticks must clear it:
     4px accent border + 76px nav + 1px bottom border. The nav shortens at the
     820px breakpoint, where this is redefined. */
  --header-height: 81px;
  --sans: "Benton Sans", "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: "Georgia Pro", Georgia, "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  color-scheme: light;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  min-width: 320px;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

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

[hidden] {
  display: none !important;
}

.shell {
  margin-inline: auto;
  max-width: 1280px;
  padding-inline: clamp(20px, 4vw, 64px);
  width: 100%;
}

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

.skip-link {
  background: var(--white);
  border: 2px solid var(--forest);
  left: 16px;
  padding: 10px 16px;
  position: fixed;
  top: -80px;
  z-index: 100;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 3px solid var(--iu-crimson-light);
  outline-offset: 3px;
}

.hero-ledger :focus-visible,
.record-panel :focus-visible,
.profile-hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--iu-cream);
}

.site-header {
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--cream) 96%, transparent);
  border-bottom: 1px solid var(--line);
  border-top: 4px solid var(--iu-crimson);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav {
  align-items: center;
  display: flex;
  height: 76px;
  justify-content: space-between;
}

.brand {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12px;
}

.brand-mark {
  height: 40px;
  width: 40px;
}

.brand-mark path:first-child {
  fill: var(--forest);
}

.brand-mark path:last-child {
  fill: var(--cream);
}

.brand span {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand strong {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.045em;
}

.brand small {
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.055em;
  margin-top: 5px;
}

.nav-links {
  align-items: center;
  display: flex;
  gap: clamp(18px, 2.6vw, 36px);
  margin-inline: auto;
}

.nav-links a {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  position: relative;
}

.nav-links a::after {
  background: var(--vermillion);
  bottom: -9px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
  width: 100%;
}

.nav-links a:hover::after,
.nav-links a.current-section::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-actions {
  align-items: center;
  display: flex;
  gap: 14px;
}

.snapshot-pill {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  display: inline-flex;
  font-family: var(--mono);
  font-size: 0.68rem;
  gap: 7px;
  padding: 6px 10px;
}

.snapshot-pill i,
.database-state i,
.verified-mark i {
  background: var(--teal-bright);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(244, 28, 64, 0.16);
  display: inline-block;
  height: 6px;
  width: 6px;
}

.language-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 9px 3px;
}

.icon-link {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  transition: background 180ms ease, color 180ms ease;
  width: 36px;
}

.icon-link svg {
  fill: currentColor;
  height: 17px;
  width: 17px;
}

.icon-link:hover {
  background: var(--forest);
  color: var(--white);
}

.hero {
  background:
    linear-gradient(90deg, rgba(153, 0, 0, 0.045) 1px, transparent 1px) 0 0 / 76px 76px,
    linear-gradient(rgba(153, 0, 0, 0.045) 1px, transparent 1px) 0 0 / 76px 76px,
    var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.hero::before {
  background: var(--iu-crimson);
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 34%;
}

.hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(44px, 7vw, 92px);
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
  min-height: 590px;
  padding-block: clamp(58px, 7vw, 88px);
}

.eyebrow {
  align-items: center;
  color: var(--vermillion);
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 14px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow-rule {
  background: var(--vermillion);
  display: inline-block;
  height: 1px;
  width: 42px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(3.65rem, 6.6vw, 6.25rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.92;
  margin: 22px 0 26px;
  max-width: 9.8ch;
}

.hero h1 span,
.hero h1 em {
  display: block;
}

/* A `ch` measure is the width of "0", so a Latin-tuned max-width fits only
   about five full-width Chinese glyphs and splits a six-character line in two.
   Chinese also needs looser tracking than the display serif's Latin default. */
html[lang="zh-CN"] .hero h1 {
  font-size: clamp(2.85rem, 5.1vw, 4.75rem);
  letter-spacing: -0.01em;
  line-height: 1.06;
  max-width: 8em;
}

.hero h1 em {
  color: var(--teal);
  font-weight: 500;
}

.hero-lede {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  margin: 0;
  max-width: 680px;
}

.hero-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
}

.button {
  align-items: center;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 750;
  gap: 32px;
  justify-content: center;
  letter-spacing: 0.02em;
  min-height: 52px;
  padding: 12px 20px;
  transition: background 180ms ease, transform 180ms ease;
}

.button-primary {
  background: var(--forest);
  color: var(--white);
}

.button-primary:hover,
.button-search:hover {
  background: var(--teal);
  transform: translateY(-2px);
}

.text-link {
  align-items: center;
  border-bottom: 1px solid var(--ink);
  display: inline-flex;
  font-size: 0.84rem;
  font-weight: 700;
  gap: 18px;
  padding-block: 8px 5px;
}

.hero-ledger {
  background: var(--forest);
  box-shadow: 18px 18px 0 var(--gold);
  color: var(--cream);
  min-height: 360px;
  overflow: hidden;
  padding: 28px;
  position: relative;
}

.ledger-top {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  font-size: 0.68rem;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.1em;
  padding-bottom: 18px;
  text-transform: uppercase;
}

.verified-mark {
  align-items: center;
  color: var(--iu-cream-light);
  display: flex;
  gap: 7px;
}

.ledger-date {
  font-family: var(--serif);
  font-size: clamp(2.65rem, 3.6vw, 3.7rem);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 28px 0 32px;
}

.hero-ledger dl {
  display: grid;
  gap: 18px;
  margin: 0;
}

.hero-ledger dl div {
  display: grid;
  gap: 12px;
  grid-template-columns: 0.75fr 1.25fr;
}

.hero-ledger dt {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-ledger dd {
  font-size: 0.78rem;
  font-weight: 650;
  margin: 0;
}

.ledger-stamp {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  bottom: -29px;
  display: flex;
  flex-direction: column;
  height: 122px;
  justify-content: center;
  opacity: 0.35;
  position: absolute;
  right: -12px;
  transform: rotate(-12deg);
  width: 122px;
}

.ledger-stamp span {
  font-family: var(--serif);
  font-size: 1.45rem;
}

.ledger-stamp small {
  font-size: 0.43rem;
  letter-spacing: 0.12em;
}

.metrics-strip {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.metrics-grid {
  display: grid;
  /* One column per metric, so the strip is a single row rather than a full row
     plus an orphan. The count changed from four to five when the governance and
     staff rosters were published. */
  grid-template-columns: repeat(5, 1fr);
}

.metric {
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 24px clamp(16px, 3vw, 34px);
}

.metric:last-child {
  border-right: 1px solid var(--line);
}

.metric strong {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 2.5vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  letter-spacing: -0.04em;
  line-height: 1;
}

.metric span {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.section {
  padding-block: clamp(68px, 8vw, 104px);
}

.section-heading {
  margin-bottom: 38px;
}

.split-heading {
  align-items: end;
  display: grid;
  gap: 48px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
}

.kicker,
.chart-label {
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.section-heading h2,
.citation-band h2 {
  font-family: var(--serif);
  font-size: clamp(2.65rem, 4.4vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.98;
  margin: 0;
}

.split-heading > p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin: 0 0 5px;
  max-width: 540px;
}

/* The lookup is the page, so the page gets out of its way. A display heading
   and a paragraph of query rules above the card pushed the first result to
   846px on a 720px screen: a search returned nothing a reader could see
   without scrolling. The rules moved to the line under the input, where they
   are read when they matter. */
.search-section {
  padding-block: clamp(20px, 2.4vw, 30px) clamp(40px, 5vw, 68px);
}

.search-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-bottom: 14px;
}

.search-heading .kicker {
  margin: 0;
}

.search-heading h1 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  font-weight: 550;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.explorer-card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

#lookup-form {
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 3vw, 32px);
}

.segmented {
  align-items: center;
  background: var(--paper);
  display: inline-flex;
  padding: 4px;
}

.scope-button {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  font-size: 0.77rem;
  font-weight: 720;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
}

.scope-button small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
}

/* The short name is the one a phone shows; see the 560px rule below. */
.scope-name-short {
  display: none;
}

.scope-button.active {
  background: var(--white);
  box-shadow: 0 3px 12px rgba(109, 8, 8, 0.08);
}

.database-state {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.68rem;
  gap: 8px;
}

.database-state.error i {
  background: var(--vermillion);
}

/* The dataset, the query, and the filters are one decision, and they were laid
   out as two rows and a panel. */
.search-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-field {
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--line-dark);
  display: flex;
  /* A query is short, so the field does not stretch to fill a 1,100px card;
     it takes the room left over from the controls beside it. */
  flex: 1 1 280px;
  max-width: 460px;
  min-height: 48px;
  padding-inline: 16px;
}

.search-field:focus-within {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.search-field svg {
  fill: none;
  flex: 0 0 auto;
  height: 18px;
  margin-right: 11px;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-width: 1.8;
  width: 18px;
}

.search-field input {
  background: transparent;
  border: 0;
  font-size: 0.9rem;
  height: 46px;
  outline: 0;
  padding: 0;
  width: 100%;
}

.search-field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.filter-field {
  display: flex;
  min-width: 208px;
}

.filter-field select {
  appearance: none;
  /* Centred rather than measured from the top: this select is 48px tall in the
     search row and 32px in the filter panel, and a fixed offset put the caret
     off the bottom edge of the shorter one. */
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 17px) calc(50% - 2px) / 6px 6px no-repeat,
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 11px) calc(50% - 2px) / 6px 6px no-repeat,
    var(--cream);
  border: 1px solid var(--line-dark);
  cursor: pointer;
  font-size: 0.78rem;
  min-height: 32px;
  padding: 0 32px 0 12px;
  width: 100%;
}

/* The dataset filter sits beside the query field and matches its height. */
.search-row .filter-field select {
  font-size: 0.82rem;
  min-height: 48px;
  padding-left: 14px;
}

.button-search {
  background: var(--forest);
  color: var(--white);
  flex: 0 0 auto;
  min-height: 48px;
  min-width: 112px;
  padding-block: 0;
}

/* Closed until asked for, and it counts what is active: a filter narrowing the
   results from behind a closed panel would be a result set that lies. */
.filters-toggle {
  align-items: center;
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.73rem;
  font-weight: 700;
  gap: 7px;
  min-height: 48px;
  padding: 0 13px;
}

.filters-toggle:hover,
.filters-toggle[aria-expanded="true"] {
  border-color: var(--teal);
  color: var(--teal);
}

.filters-toggle.has-filters {
  border-color: var(--iu-crimson);
  color: var(--iu-crimson);
}

.filters-count {
  background: var(--iu-crimson);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.6rem;
  min-width: 17px;
  padding: 2px 4px;
  text-align: center;
}

.filters-chevron {
  font-size: 0.6rem;
  transition: transform 140ms ease;
}

.filters-toggle[aria-expanded="true"] .filters-chevron {
  transform: rotate(180deg);
}

.facet-row {
  align-items: end;
  border: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 0;
  padding: 12px 0 0;
}

.facet-row .filter-field {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.facet-row .filter-field > span {
  color: var(--muted);
  font-size: 0.63rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.facet-reset {
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.7rem;
  min-height: 32px;
  padding: 0 12px;
}

.facet-reset:hover {
  border-color: var(--iu-crimson);
  color: var(--iu-crimson);
}

.empty-shortcuts {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.empty-shortcuts-label {
  color: var(--muted);
  font-size: 0.68rem;
}

.empty-shortcut {
  background: none;
  border: 1px solid var(--line-dark);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.68rem;
  min-height: 32px;
  padding: 0 11px;
}

.empty-shortcut:hover {
  border-color: var(--iu-crimson);
  color: var(--iu-crimson);
}

.search-helper {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.69rem;
  gap: 6px 18px;
  margin-top: 12px;
}

.search-helper #search-guidance {
  flex: 1 1 260px;
}

.search-helper .database-state {
  margin-left: auto;
}

.example-queries {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.example-queries button {
  background: transparent;
  border: 0;
  border-bottom: 1px dotted var(--muted);
  color: var(--teal);
  cursor: pointer;
  font-size: inherit;
  padding: 1px 0;
}

/* Where the reader is in the result set, and the controls for moving through
   it, in one bar pinned under the menu. These were two blocks — a status line
   and a "Results" header with a count that repeated it — costing 208px above
   the first card, and the only paging control sat below the whole list. */
.results-toolbar {
  align-items: center;
  background: var(--paper);
  border-block: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  padding: 6px clamp(18px, 3vw, 32px);
  position: sticky;
  top: var(--header-height);
  z-index: 18;
}

.lookup-feedback {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  font-size: 0.73rem;
  margin: 0;
  min-height: 34px;
}

.results-paging {
  align-items: center;
  display: flex;
  gap: 8px;
}

.page-step {
  background: var(--white);
  border: 1px solid var(--line-dark);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  min-height: 30px;
  min-width: 30px;
}

.page-step:hover:not(:disabled) {
  border-color: var(--iu-crimson);
  color: var(--iu-crimson);
}

.page-step:disabled {
  color: var(--iu-gray-dark);
  cursor: not-allowed;
  opacity: 0.55;
}

.page-position {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  white-space: nowrap;
}

.lookup-feedback.loading::before {
  animation: pulse 1s ease infinite alternate;
  background: var(--gold);
  border-radius: 50%;
  content: "";
  height: 7px;
  margin-right: 9px;
  width: 7px;
}

@keyframes pulse {
  to {
    opacity: 0.3;
  }
}

/* No reserved height. The pane held a 340px floor so an empty result list did
   not collapse the card, which meant the page always scrolled past a block of
   nothing before a reader had asked anything. The results themselves give the
   pane its height once there are any. */
.lookup-workspace {
  display: grid;
}

.results-pane {
  min-width: 0;
  padding: clamp(24px, 3vw, 32px);
}


/* A line and its shortcuts, not a panel. This was a centred 220px column
   behind a 72px decorative glyph, which is a lot of page to say "nothing yet"
   on the one screen a reader arrives at before typing. */
.empty-state {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.empty-glyph {
  align-items: center;
  border: 1px solid var(--line);
  color: var(--teal);
  display: flex;
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 1.05rem;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.empty-state p {
  flex: 1 1 240px;
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0;
  min-width: 0;
}

/* Shrinkable, or the three buttons sit on one unbreakable 508px line and take
   a 390px page 155px wider than the screen. */
.empty-shortcuts {
  flex: 1 1 auto;
  justify-content: flex-start;
  margin-top: 0;
  min-width: 0;
}

.result-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A grid item floors at its own min-content width unless told otherwise. A
   result card holds long names, credit codes, and a year strip, so without this
   the track grew past the viewport and the narrow-screen rules below never got
   a chance to lay the card out. */
.result-item {
  min-width: 0;
}

/* Numbered pages, so a result set can be cited rather than only scrolled. */
.result-pagination {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
}

.page-button {
  background: var(--white);
  border: 1px solid var(--line-dark);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  min-height: 32px;
  min-width: 32px;
  padding: 6px 9px;
}

.page-button:hover:not(:disabled):not(.current) {
  border-color: var(--iu-crimson);
  color: var(--iu-crimson);
}

.page-button.current {
  background: var(--iu-crimson);
  border-color: var(--iu-crimson);
  color: var(--white);
  cursor: default;
  font-weight: 700;
}

.page-button:disabled {
  color: var(--iu-gray-dark);
  cursor: not-allowed;
  opacity: 0.55;
}

.page-arrow {
  font-size: 0.85rem;
  line-height: 1;
}

.page-edge {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.page-gap {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  padding-inline: 2px;
}

.page-size {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.63rem;
  gap: 6px;
  letter-spacing: 0.05em;
  margin-left: auto;
  text-transform: uppercase;
}

.page-size select {
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  min-height: 32px;
  padding: 5px 22px 5px 8px;
}

.result-card {
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.result-card:has(.result-record-link:hover),
.result-card:has(.result-record-link[aria-current="true"]) {
  border-color: var(--teal);
  box-shadow: 0 8px 24px rgba(109, 8, 8, 0.09);
}

/* The card body is not a control. Its two actions are named and sit at the
   corners: the record it belongs to, upper right, and the data profile a
   foundation also has, lower left. A card that was itself one big link could
   only ever open one of them, and which one changed with the dataset the
   reader had selected. */
.result-head {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 18px 11px;
}

.result-record-link {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line-dark);
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.66rem;
  font-weight: 700;
  gap: 6px;
  padding: 6px 9px;
  white-space: nowrap;
}

.result-record-link:hover,
.result-record-link:focus-visible,
.result-record-link[aria-current="true"] {
  background: var(--iu-crimson);
  border-color: var(--iu-crimson);
  color: var(--white);
}

.result-record-link:hover .result-arrow,
.result-record-link:focus-visible .result-arrow,
.result-record-link[aria-current="true"] .result-arrow {
  color: currentColor;
}

.result-name {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: 5px;
}

.result-code {
  color: var(--muted);
  display: block;
  font-family: var(--mono);
  font-size: 0.69rem;
  overflow-wrap: anywhere;
}

.result-arrow {
  color: var(--vermillion);
  font-size: 1rem;
  font-style: normal;
}

/* One line, not a 2x2 grid. Three labelled facts in a grid cost 96px of a
   317px card, which is why only two cards reached a 720px screen. */
.result-facts {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-inline: 18px;
  padding-block: 9px;
}

.result-fact {
  align-items: baseline;
  display: flex;
  /* The separator below is a flex item of this box and inherits from it. Left
     at the body's 16px it sat on a lower baseline than the label and the value,
     so the two facts that have one printed 6px below the one that does not. */
  font-size: 0.73rem;
  gap: 5px;
  line-height: 1.4;
  min-width: 0;
}

.result-fact + .result-fact::before {
  color: var(--line-dark);
  content: "·";
  margin-right: 9px;
}

.result-fact small {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.result-fact strong {
  color: var(--ink-soft);
  font-size: 0.73rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.result-coverage {
  border-top: 1px solid var(--line);
  margin-inline: 18px;
  padding-block: 10px;
}

.result-coverage > strong {
  color: var(--ink-soft);
  display: block;
  font-size: 0.69rem;
  margin-bottom: 6px;
}

.result-years {
  display: flex;
  gap: 5px;
  /* Twenty-two years do not fit a half-width card, so the strip scrolls. The
     fade says there is more rather than leaving a year clipped mid-chip, which
     reads as a rendering fault. */
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.result-years a,
.tag-list a {
  border: 1px solid var(--teal);
  color: var(--teal);
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 5px 7px;
  text-decoration: none;
}

.result-years a.current,
.tag-list a.current {
  background: var(--teal);
  color: var(--white);
}

.result-years a.archived,
.tag-list a.archived {
  background: var(--iu-cream-light);
  border-color: var(--iu-crimson-light);
  border-bottom-width: 3px;
  color: var(--iu-crimson-dark);
}

.result-years a.derived,
.tag-list a.derived {
  border-color: var(--iu-slate);
  border-bottom-style: dotted;
  border-bottom-width: 3px;
  color: var(--iu-slate);
}

.result-years a:hover,
.result-years a:focus-visible,
.tag-list a:hover,
.tag-list a:focus-visible {
  background: var(--vermillion);
  border-color: var(--vermillion);
  color: var(--white);
}

.result-footer {
  align-items: center;
  background: var(--paper);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 8px 18px;
}

.result-footer > span {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.4;
}

.result-profile-link {
  color: var(--teal);
  font-size: 0.69rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

/* A centred modal card. As a grid sibling of the results pane this stretched to
   the height of the whole result list, so a 318px record drew a 5,000px column;
   on a narrow screen it rendered below every card with nothing scrolling to it.
   A dialog also brings Escape, a backdrop, focus trapping, and an inert
   background without hand-written behaviour. */
.record-panel {
  background: var(--forest);
  border: 0;
  color: var(--cream);
  max-height: min(86vh, 760px);
  max-width: min(560px, calc(100vw - 32px));
  min-width: 0;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 42px);
  width: 100%;
}

.record-panel::backdrop {
  background: rgba(7, 35, 50, 0.55);
}

.record-panel-top {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}

.record-kind {
  color: var(--iu-cream-light);
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.panel-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  font-size: 1.3rem;
  height: 34px;
  line-height: 1;
  padding: 0 0 2px;
  width: 34px;
}

.record-heading {
  margin-block: 28px 30px;
}

.record-heading h3 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 14px;
}

.record-heading code {
  color: rgba(255, 255, 255, 0.64);
  font-family: var(--mono);
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.record-actions button,
.record-actions a {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  cursor: pointer;
  font-size: 0.71rem;
  padding: 8px 11px;
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.record-field {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  min-width: 0;
  padding: 15px 12px 15px 0;
}

.record-field:nth-child(even) {
  padding-left: 12px;
}

.record-field dt {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.record-field dd {
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

.record-section {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 22px;
  padding-top: 20px;
}

.record-section h4 {
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-list a {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--white);
}

.tag-list a.current {
  background: var(--iu-cream-light);
  border-color: var(--iu-cream-light);
  color: var(--forest);
}

.tag-list a.archived {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.tag-list a.derived {
  color: var(--white);
}

.year-legend {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.66rem;
  line-height: 1.5;
  margin: 10px 0 0;
}

.provenance-list {
  display: grid;
  gap: 7px;
  margin: 0;
}

.provenance-list div {
  display: grid;
  font-size: 0.69rem;
  gap: 12px;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
}

.provenance-list dt {
  color: rgba(255, 255, 255, 0.46);
}

.provenance-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.source-note {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.7;
  margin: 18px 0 0;
}

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

.notice {
  background: var(--iu-cream-light);
  margin: 0;
  padding: 18px 30px;
}

.insights-section {
  background: var(--paper);
  border-block: 1px solid var(--line);
}

.insights-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-card {
  background: var(--cream);
  border: 1px solid var(--line);
  min-height: 360px;
  padding: clamp(22px, 2.6vw, 32px);
  /* A grid item floors at its own min-content width unless told otherwise, and
     these cards hold a 900-unit chart. Without this the single-column track
     inherited that floor and the whole page scrolled sideways on a phone. */
  min-width: 0;
}

.chart-card-wide {
  grid-column: span 2;
  min-height: 370px;
}

.chart-card header {
  align-items: start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}

.chart-card h3 {
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 550;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
}

.chart-unit {
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.donut-layout {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(180px, 0.85fr) minmax(200px, 1.15fr);
  min-height: 230px;
}

.donut-chart {
  margin: auto;
  max-width: 230px;
}

.donut-chart svg {
  overflow: visible;
  width: 100%;
}

.donut-chart .donut-total {
  fill: var(--ink);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  text-anchor: middle;
}

.donut-chart .donut-subtitle {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 0.42rem;
  text-anchor: middle;
}

/* Sector totals from the harmonized panel. */
.sector-layout {
  display: grid;
  gap: 18px;
}

.sector-chart svg {
  display: block;
  height: auto;
  width: 100%;
}

.sector-layout .chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.sector-layout .chart-legend li {
  align-items: center;
  display: flex;
  font-size: 0.72rem;
  gap: 8px;
  grid-template-columns: none;
}

.sector-swatch {
  border-radius: 50%;
  display: block;
  height: 9px;
  width: 9px;
}

.sector-series-0 {
  background: var(--chart-series-1);
  stroke: var(--chart-series-1);
}

.sector-series-1 {
  background: var(--chart-series-2);
  stroke: var(--chart-series-2);
}

.sector-series-2 {
  background: var(--chart-series-3);
  stroke: var(--chart-series-3);
}

.sector-line {
  fill: none;
  stroke-width: 2;
}

.sector-point {
  fill: var(--white);
  stroke-width: 2;
}

/* Evidence completeness by year. */
.coverage-summary {
  max-width: 100%;
  overflow-x: auto;
}

.coverage-summary-table {
  border-collapse: collapse;
  font-size: 0.71rem;
  min-width: 460px;
  width: 100%;
}

.coverage-summary-table th,
.coverage-summary-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}

.coverage-summary-table thead th {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.coverage-summary-table tbody th {
  font-family: var(--mono);
  font-weight: 650;
}

.coverage-summary-table .numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* A year with no filing of its own is a documented gap, not a zero. */
.coverage-summary-table tr.coverage-gap-row {
  background: var(--iu-cream-light);
}

.coverage-summary-table tr.coverage-gap-row th,
.coverage-summary-table tr.coverage-gap-row td {
  color: var(--muted);
}

.coverage-summary-table tr.coverage-sparse-row {
  box-shadow: inset 4px 0 0 var(--iu-crimson-light);
}

.chart-legend {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chart-legend li {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
}

.legend-swatch {
  height: 8px;
  margin-top: 6px;
  width: 8px;
}

.legend-label strong {
  display: block;
  font-size: 0.74rem;
}

.legend-label small {
  color: var(--muted);
  display: block;
  font-size: 0.66rem;
  margin-top: 2px;
}

.legend-value {
  font-family: var(--mono);
  font-size: 0.71rem;
}

/* One column per year the series carries, set from the data rather than
   hardcoded: the coverage range changes by snapshot, and a fixed count wraps
   later years onto a second row. */
.bar-chart {
  align-items: end;
  border-bottom: 1px solid var(--line-dark);
  display: grid;
  gap: clamp(3px, 0.8vw, 10px);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 200px;
  padding-top: 12px;
}

.bar-column {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: end;
  min-width: 0;
}

/* A column whose year the chart does not print. Twenty-two labels do not fit
   this card's width and ran into one another, so only round years are shown.
   The label keeps its place in the layout rather than being removed, or the
   labelled and unlabelled bars would sit on different baselines. The chart
   carries role="img", so its description — not these labels — is what
   assistive technology reads, and every bar still names its year on hover. */
.bar-year.is-quiet {
  visibility: hidden;
}

.bar-shape {
  background: var(--teal);
  min-height: 3px;
  transition: background 160ms ease;
}

.bar-column:nth-child(odd) .bar-shape {
  background: var(--forest);
}

.bar-column:hover .bar-shape {
  background: var(--vermillion);
}

/* A year the database reaches only through a neighbouring filing's
   prior-period columns. Hatched rather than recoloured, so the distinction
   survives a monochrome print and a colour-vision difference. */
.bar-column .bar-shape.bar-derived,
.bar-column:nth-child(odd) .bar-shape.bar-derived {
  background-image: repeating-linear-gradient(
    135deg,
    var(--paper) 0 2px,
    transparent 2px 5px
  );
}

.bar-year {
  color: var(--muted);
  font-size: 0.66rem;
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
}

.chart-caption {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.55;
  margin: 22px 0 0;
}

.timeline-chart {
  min-height: 210px;
  width: 100%;
}

.timeline-chart svg {
  height: auto;
  overflow: visible;
  width: 100%;
}

.timeline-grid {
  stroke: var(--line);
  stroke-width: 1;
}

.timeline-area {
  fill: rgba(153, 0, 0, 0.12);
}

.timeline-line {
  fill: none;
  stroke: var(--teal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.timeline-label {
  fill: var(--muted);
  font-family: var(--sans);
  font-size: 10px;
}

.timeline-value {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
}

.timeline-peak {
  fill: var(--chart-series-3);
  stroke: var(--cream);
  stroke-width: 2;
}

.region-chart {
  display: grid;
  gap: 12px;
}

.region-row {
  align-items: center;
  display: grid;
  gap: 14px;
  /* Wide enough for the longest registration authority name, which is
     "Xinjiang Production and Construction Corps". */
  grid-template-columns: minmax(150px, 0.34fr) minmax(160px, 1fr) 58px;
}

.region-name {
  font-size: 0.74rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-track {
  background: var(--paper-deep);
  height: 11px;
}

.region-fill {
  background: var(--teal);
  /* The bar is the measure. A span is inline by default, and an inline box
     ignores width, so the percentage set per row was silently discarded and
     every region rendered an identical empty track. */
  display: block;
  height: 100%;
  /* A region with a small share still has to be visible as a mark. */
  min-width: 2px;
}

.region-row:nth-child(3n) .region-fill {
  background: var(--vermillion);
}

.region-value {
  font-family: var(--mono);
  font-size: 0.69rem;
  text-align: right;
}

.citation-band {
  background: var(--gold);
  border-top: 1px solid rgba(7, 35, 50, 0.18);
  padding-block: 54px;
}

.citation-grid {
  align-items: center;
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
}

.citation-band .kicker {
  color: var(--forest);
}

.citation-band h2 {
  font-size: clamp(2.3rem, 4vw, 4rem);
}

.citation-copy {
  border-left: 1px solid rgba(7, 35, 50, 0.28);
  padding-left: 42px;
}

.citation-copy p {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 22px;
}

.citation-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.citation-copy a,
.citation-copy button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  cursor: pointer;
  font-size: 0.69rem;
  font-weight: 700;
  padding: 4px 0;
}

.site-footer {
  background: var(--iu-black);
  color: var(--cream);
  padding-top: 48px;
}

.footer-grid {
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  padding-bottom: 42px;
}

.footer-brand .brand-mark path:first-child {
  fill: var(--cream);
}

.footer-brand .brand-mark path:last-child {
  fill: var(--forest);
}

.footer-brand small {
  color: rgba(255, 255, 255, 0.52);
}

.footer-grid > div:first-child > p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  margin: 24px 0 0;
  max-width: 440px;
}

.footer-links {
  display: grid;
  gap: 44px;
  grid-template-columns: repeat(2, 1fr);
}

.footer-links div {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links strong {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.footer-links a {
  font-size: 0.73rem;
}

.footer-links a:hover {
  color: var(--iu-cream-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  font-size: 0.6rem;
  justify-content: space-between;
  padding-block: 20px 28px;
}

.documentation-page {
  background: var(--paper);
}

.documentation-shell {
  align-items: start;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 210px minmax(0, 850px);
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding-block: 52px 80px;
}

.documentation-aside {
  min-width: 0;
  position: sticky;
  top: 108px;
  width: 100%;
}

.documentation-aside nav,
.documentation-aside-links {
  display: flex;
  flex-direction: column;
}

.documentation-aside nav {
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.documentation-aside-links {
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.documentation-aside span {
  color: var(--vermillion);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.documentation-aside a {
  color: var(--muted);
  border-left: 2px solid transparent;
  font-size: 0.76rem;
  line-height: 1.35;
  padding: 5px 8px;
}

.documentation-aside a:hover,
.documentation-aside a[aria-current="page"] {
  border-left-color: var(--iu-crimson);
  color: var(--teal);
}

.documentation-aside a[aria-current="page"] {
  background: var(--iu-cream-light);
  font-weight: 720;
}

.prose {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  min-width: 0;
  padding: clamp(32px, 4.5vw, 58px);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 550;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.prose h1 {
  border-bottom: 3px solid var(--gold);
  font-size: clamp(2.35rem, 4vw, 3.6rem);
  margin: 0 0 36px;
  padding-bottom: 18px;
}

.prose h2 {
  border-top: 1px solid var(--line);
  font-size: 1.75rem;
  margin: 42px 0 18px;
  padding-top: 26px;
}

.prose h3 {
  font-size: 1.28rem;
  margin-top: 30px;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.72;
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

.prose a {
  border-bottom: 1px solid var(--teal);
  color: var(--teal);
}

.prose code {
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.78em;
  overflow-wrap: anywhere;
  padding: 2px 5px;
  word-break: break-word;
}

.prose pre {
  background: var(--forest);
  color: var(--cream);
  overflow-x: auto;
  padding: 22px;
}

.prose pre code {
  background: transparent;
  border: 0;
  color: inherit;
  overflow-wrap: normal;
  padding: 0;
  white-space: inherit;
  word-break: normal;
}

.prose table {
  border-collapse: collapse;
  display: block;
  font-size: 0.82rem;
  max-width: 100%;
  overflow-x: auto;
}

.prose th,
.prose td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--paper);
}

.documentation-footer {
  background: var(--iu-black);
  color: rgba(255, 255, 255, 0.62);
}

.documentation-footer > div {
  display: flex;
  font-size: 0.69rem;
  justify-content: space-between;
  padding-block: 22px;
}

.organization-page {
  background: var(--paper);
}

.profile-hero {
  background:
    linear-gradient(120deg, rgba(153, 0, 0, 0.98), rgba(109, 8, 8, 0.99)),
    var(--forest);
  color: var(--cream);
  overflow: hidden;
  padding-block: 28px 46px;
  position: relative;
}

.profile-hero::after {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
  height: 440px;
  position: absolute;
  right: -160px;
  top: -210px;
  width: 440px;
}

.profile-back {
  align-items: center;
  color: rgba(255, 255, 255, 0.66);
  display: inline-flex;
  font-size: 0.71rem;
  gap: 8px;
  /* Keeps the only navigation link on the page at a comfortable tap size. */
  margin-bottom: 22px;
  min-height: 26px;
  padding: 4px 0;
}

.profile-back:hover {
  color: var(--iu-cream-light);
}

.profile-hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(40px, 7vw, 96px);
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.55fr);
}

.profile-eyebrow {
  align-items: center;
  color: var(--iu-cream-light);
  display: flex;
  font-size: 0.68rem;
  font-weight: 750;
  gap: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.profile-eyebrow span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
  padding-left: 12px;
}

.profile-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.45rem, 5vw, 4.6rem);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin: 18px 0 14px;
  max-width: 16ch;
}

.profile-hero > .shell > .profile-hero-grid > div > code {
  color: rgba(255, 255, 255, 0.64);
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.profile-actions button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--white);
  cursor: pointer;
  font-size: 0.69rem;
  padding: 8px 11px;
}

.profile-actions button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.profile-actions button.copied {
  background: var(--iu-cream-light);
  border-color: var(--iu-cream-light);
  color: var(--iu-crimson-dark);
}

.profile-identity {
  border-top: 3px solid var(--gold);
  min-width: 0;
  padding-top: 17px;
}

.profile-identity > span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-identity dl {
  margin: 16px 0 0;
}

.profile-identity dl div {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1.3fr);
  padding-block: 10px;
}

.profile-identity dt {
  color: rgba(255, 255, 255, 0.43);
  font-size: 0.63rem;
}

.profile-identity dd {
  font-size: 0.75rem;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

/* The two evidence levels are separated by background as well as heading, so a
   reader can see at a glance whether a section answers "this organization" or
   "this organization-year". */
.org-evidence {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding-block: 34px 40px;
}

.year-evidence {
  background: var(--white);
  padding-block: 34px 44px;
}

.evidence-level-heading {
  align-items: end;
  display: grid;
  gap: 60px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  margin-bottom: 22px;
}

.evidence-level-heading h2 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.8rem);
  font-weight: 530;
  letter-spacing: -0.035em;
  margin: 8px 0 0;
}

.evidence-level-heading > p,
.evidence-level-heading > div > p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.65;
  margin: 0;
}

/* The all-years block is tall, so a reader who came for one year needs a way
   past it that does not depend on scrolling. */
.level-skip-link {
  align-items: center;
  color: var(--iu-crimson);
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 650;
  gap: 6px;
  margin-top: 12px;
  text-decoration: none;
}

.level-skip-link:hover,
.level-skip-link:focus-visible {
  text-decoration: underline;
}

.research-summary {
  border-block: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 18px;
}

.research-summary > div {
  min-width: 0;
  padding: 12px 16px 12px 0;
}

.research-summary > div + div {
  border-left: 1px solid var(--line);
  padding-left: 16px;
}

.research-summary dt {
  color: var(--muted);
  font-size: 0.61rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.research-summary dd {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 650;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.year-nav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: thin;
}

.year-link {
  align-items: center;
  border: 1px solid var(--line-dark);
  color: var(--ink-soft);
  display: flex;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  height: 38px;
  justify-content: center;
  min-width: 52px;
  padding-inline: 8px;
  text-decoration: none;
}

.year-link.historical {
  background: var(--iu-cream-light);
  border-color: var(--iu-crimson);
  border-bottom-width: 3px;
  color: var(--iu-crimson-dark);
}

.year-link.current {
  border-color: var(--teal);
  color: var(--teal);
}

.year-link.archived {
  background: var(--iu-cream-light);
  border-color: var(--iu-crimson-light);
  border-bottom-width: 3px;
  color: var(--iu-crimson-dark);
}

/* Held, but only through a neighbouring filing. Dotted rather than dashed so
   it is not read as the gap it sits beside, and never solid like a filed
   year. */
.year-link.derived {
  border-color: var(--iu-slate);
  border-bottom-width: 3px;
  border-bottom-style: dotted;
  color: var(--iu-slate);
}

.year-link.gap {
  border-style: dashed;
  color: var(--iu-slate);
  cursor: not-allowed;
}

.year-link[aria-current="page"] {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
  transform: translateY(-3px);
}

.year-link:not(.gap):hover {
  background: var(--vermillion);
  border-color: var(--vermillion);
  color: var(--white);
}

.year-key {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.65rem;
  gap: 18px;
  margin-top: 10px;
}

.year-key > span {
  align-items: center;
  display: flex;
  gap: 6px;
}

.year-key i {
  border: 1px solid;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.year-key i.historical {
  background: var(--iu-cream-light);
  border-color: var(--iu-crimson);
  border-bottom-width: 3px;
}

.year-key i.archived {
  background: var(--white);
  border-color: var(--iu-crimson-light);
  border-bottom-width: 3px;
}

.year-key i.current {
  background: var(--teal);
  border-color: var(--teal);
}

/* Matches the dotted underline a recovered year carries in the year strip. */
.year-key i.derived {
  border-color: var(--iu-slate);
  border-bottom-style: dotted;
  border-bottom-width: 3px;
}

.year-key i.gap {
  border-color: var(--iu-gray-dark);
  border-style: dashed;
}

.selected-observation {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-top: 3px solid var(--iu-crimson);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(220px, 0.62fr) minmax(320px, 1fr) minmax(240px, 0.75fr);
  margin-bottom: 16px;
  padding: 16px 18px;
}

.selected-observation-title > div {
  align-items: baseline;
  display: flex;
  gap: 12px;
  margin-top: 3px;
}

.selected-observation-title strong {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 520;
  letter-spacing: -0.04em;
  line-height: 1;
}

.selected-observation-title span {
  color: var(--teal);
  font-size: 0.67rem;
  font-weight: 700;
  line-height: 1.4;
}

.selected-observation dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.selected-observation dl div {
  border-left: 1px solid var(--line);
  min-width: 0;
  padding-inline: 14px;
}

.selected-observation dt {
  color: var(--muted);
  font-size: 0.61rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.selected-observation dd {
  font-family: var(--mono);
  font-size: 0.73rem;
  font-weight: 650;
  margin: 3px 0 0;
  overflow-wrap: anywhere;
}

.selected-observation-note {
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.55;
  margin: 0;
}

.selected-observation.no-year {
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
}

.selected-observation.no-year dl {
  display: none;
}

.profile-panels {
  min-width: 0;
}

.profile-status {
  background: var(--iu-cream-light);
  border: 1px solid var(--iu-cream-dark);
  color: var(--iu-crimson-dark);
  font-size: 0.71rem;
  margin-bottom: 14px;
  padding: 10px 13px;
}

.profile-status.error {
  background: color-mix(in srgb, var(--iu-crimson-light) 9%, white);
  border-color: color-mix(in srgb, var(--iu-crimson) 28%, white);
  color: var(--iu-crimson-dark);
  margin-bottom: 14px;
}

.profile-tabs {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  overflow-x: auto;
  position: sticky;
  scrollbar-width: thin;
  top: 76px;
  z-index: 8;
}

.profile-tabs button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.69rem;
  font-weight: 680;
  padding: 14px 15px;
  position: relative;
  white-space: nowrap;
}

.profile-tabs button.has-data::after {
  background: var(--teal);
  border-radius: 50%;
  content: "";
  height: 4px;
  position: absolute;
  right: 7px;
  top: 8px;
  width: 4px;
}

.profile-tabs button[aria-selected="true"] {
  background: var(--forest);
  color: var(--white);
}

.profile-tabs button[aria-selected="true"]::after {
  background: var(--iu-cream-light);
}

.profile-tab-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 0;
  min-height: 520px;
  outline-offset: 4px;
  padding: clamp(24px, 4vw, 48px);
}

.data-panel-heading {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.65fr);
  margin-bottom: 32px;
  padding-bottom: 24px;
}

.data-panel-heading span {
  color: var(--vermillion);
  display: block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.data-panel-heading h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  font-weight: 530;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
}

.data-panel-heading > p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.65;
  margin: 0;
}

.research-section {
  border-top: 1px solid var(--line);
  margin-top: 38px;
  padding-top: 26px;
}

.research-section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.research-section-heading {
  align-items: end;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.research-section-heading h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 560;
  margin: 0;
}

.trend-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.trend-note {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
  margin-top: 12px;
  padding-top: 10px;
}

.selected-evidence-section > h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 560;
  margin: 0;
}

.research-section-heading p {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.6;
  margin: 7px 0 0;
  max-width: 78ch;
}

.coverage-matrix-wrap {
  border: 1px solid var(--line);
  max-width: 100%;
  overflow: auto;
}

.coverage-matrix {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.66rem;
  min-width: 840px;
  width: 100%;
}

.coverage-matrix th,
.coverage-matrix td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  height: 38px;
  min-width: 48px;
  padding: 0;
  text-align: center;
}

.coverage-matrix tr:last-child th,
.coverage-matrix tr:last-child td {
  border-bottom: 0;
}

.coverage-matrix tr > :last-child {
  border-right: 0;
}

.coverage-matrix thead th {
  background: var(--white);
  font-family: var(--mono);
  font-weight: 650;
  position: sticky;
  top: 0;
  z-index: 2;
}

.coverage-matrix thead th:first-child,
.coverage-matrix tbody th {
  left: 0;
  min-width: 170px;
  padding-inline: 13px;
  position: sticky;
  text-align: left;
  z-index: 3;
}

.coverage-matrix tbody th {
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-weight: 630;
}

.coverage-matrix thead a,
.coverage-matrix thead th > span {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 5px;
}

.coverage-matrix thead a:hover {
  background: var(--iu-cream-light);
  color: var(--iu-crimson);
}

.coverage-matrix thead small {
  color: var(--muted);
  display: block;
  font-family: var(--sans);
  font-size: 0.54rem;
  line-height: 1;
  margin-top: 2px;
}

.coverage-matrix .selected {
  background: color-mix(in srgb, var(--iu-cream-dark) 56%, white);
}

.coverage-matrix thead .selected {
  box-shadow: inset 0 3px var(--iu-crimson);
}

.coverage-matrix td a,
.coverage-matrix td > span {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.coverage-matrix td.available a {
  color: var(--iu-crimson-dark);
  font-family: var(--mono);
  font-size: 0.63rem;
  font-weight: 750;
}

.coverage-matrix td.available a:hover {
  background: var(--iu-crimson);
  color: var(--white);
}

.coverage-matrix td.unavailable > span {
  color: var(--iu-gray-dark);
}

.trend-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trend-card {
  border: 1px solid var(--line);
  min-width: 0;
  padding: 18px;
}


.trend-card-heading {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.trend-card-heading h4 {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 570;
  margin: 0;
}

.trend-card-heading p {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.5;
  margin: 5px 0 0;
}

.trend-latest {
  border-left: 2px solid var(--iu-crimson);
  min-width: 112px;
  padding-left: 10px;
}

.trend-latest span,
.trend-latest small {
  color: var(--muted);
  display: block;
  font-size: 0.57rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trend-latest strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.77rem;
  line-height: 1.35;
  margin-block: 2px;
}

.trend-figure {
  margin: 14px 0 4px;
}

.trend-figure svg {
  height: auto;
  overflow: visible;
  width: 100%;
}

.trend-gridline {
  stroke: var(--chart-track);
  stroke-width: 1;
}

.trend-selected-year {
  stroke: var(--iu-crimson-light);
  stroke-dasharray: 3 3;
  stroke-width: 1;
}

.trend-axis-label {
  fill: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

.trend-axis-year.selected {
  fill: var(--iu-crimson);
  font-weight: 750;
}

.trend-line {
  fill: none;
  stroke-width: 2.5;
}

.trend-line.trend-series-0 {
  stroke: var(--chart-series-1);
}

.trend-line.trend-series-1 {
  stroke: var(--chart-series-2);
  stroke-dasharray: 6 4;
}

.trend-point {
  stroke: var(--white);
  stroke-width: 2;
}

.trend-point.trend-series-0 {
  fill: var(--chart-series-1);
}

.trend-point.trend-series-1 {
  fill: var(--chart-series-2);
}

.trend-point.selected {
  stroke: var(--iu-black);
  stroke-width: 2.5;
}

.trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.trend-legend span {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.62rem;
  gap: 6px;
}

.trend-legend i {
  display: inline-block;
  height: 3px;
  width: 20px;
}

.trend-legend i.trend-series-0 {
  background: var(--chart-series-1);
}

.trend-legend i.trend-series-1 {
  background:
    repeating-linear-gradient(
      90deg,
      var(--chart-series-2) 0 6px,
      transparent 6px 9px
    );
}

.trend-evidence {
  border-top: 1px solid var(--line);
  margin-top: 5px;
  padding-top: 10px;
}

.trend-evidence summary {
  color: var(--iu-crimson-dark);
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 680;
}

.trend-evidence-table-wrap {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
}

.trend-evidence-table {
  border-collapse: collapse;
  font-size: 0.62rem;
  min-width: 600px;
  width: 100%;
}

.trend-evidence-table th,
.trend-evidence-table td {
  border-bottom: 1px solid var(--line);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.trend-evidence-table thead th {
  color: var(--muted);
  font-size: 0.57rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.trend-evidence-table tbody th,
.trend-evidence-table .field-code {
  font-family: var(--mono);
  white-space: nowrap;
}

.trend-evidence-table td:last-child {
  overflow-wrap: anywhere;
}


.trend-control {
  flex: 0 0 min(320px, 42%);
}

.trend-control > label {
  color: var(--muted);
  display: block;
  font-size: 0.59rem;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.trend-control select {
  background: var(--white);
  border: 1px solid var(--line-dark);
  border-radius: 0;
  font-size: 0.71rem;
  min-height: 36px;
  padding: 7px 28px 7px 9px;
  width: 100%;
}

.trend-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.trend-note {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.5;
  margin-top: 12px;
  padding-top: 10px;
}

.selected-evidence-section > h3 {
  margin-bottom: 18px;
}

.data-section {
  border-top: 1px solid var(--line);
  margin-top: 34px;
  padding-top: 26px;
}

.data-section > h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 560;
  margin: 0 0 18px;
}

.filing-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filing-card {
  border: 1px solid var(--line);
  min-width: 0;
  padding: 18px;
}

.filing-card-number {
  color: var(--vermillion);
  display: block;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.filing-card dl {
  margin: 0;
}

.filing-card dl div {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(105px, 0.7fr) minmax(0, 1.3fr);
  padding-block: 8px;
}

.filing-card dt {
  color: var(--muted);
  font-size: 0.63rem;
}

.filing-card dd {
  font-size: 0.73rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.source-data-panel {
  border: 1px solid var(--line);
  margin-top: 18px;
  min-width: 0;
}

.source-panel-meta {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 15px;
}

.source-panel-meta strong,
.source-panel-meta > span {
  color: var(--ink-soft);
  font-size: 0.67rem;
}

.source-panel-meta code {
  color: var(--muted);
  font-size: 0.62rem;
  overflow-wrap: anywhere;
}

.data-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.data-field-grid > div {
  border-bottom: 1px solid var(--line);
  min-width: 0;
  padding: 15px;
}

.data-field-grid > div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.data-field-grid dt {
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.35;
}

.data-field-grid code {
  color: var(--teal);
  display: block;
  font-size: 0.59rem;
  margin-top: 4px;
}

/* The source column behind a variable, on the same line and visibly secondary
   to it: the variable is what a reader compares across years, the column is
   what changed between them. */
.data-field-grid .row-source-field {
  color: var(--muted);
  margin-left: 6px;
}

.data-field-grid .row-source-field::before {
  content: "←";
  margin-right: 4px;
}

.data-field-grid dd {
  font-size: 0.78rem;
  line-height: 1.55;
  margin: 9px 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.data-table-wrap {
  max-width: 100%;
  overflow: auto;
}

/* The trend card's evidence table. It is built with role="region" and an
   aria-label promising a scrollable table, but had no rule of its own, so on a
   phone it pushed the page wider than the viewport instead of scrolling. */
.table-scroll {
  max-width: 100%;
  overflow: auto;
}

.data-table {
  border-collapse: collapse;
  font-size: 0.71rem;
  min-width: 720px;
  width: 100%;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  background: var(--forest);
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.data-table tbody th {
  color: var(--ink);
  font-weight: 640;
  min-width: 190px;
}

/* A roster's first column is a person's name, not a field label, so it needs
   no room for one. Twelve columns of short values fit without the wide
   row-header measure the source-native tables need, but they do need enough
   width that a name or a term does not break mid-token; the table sits in a
   horizontal scroller, so asking for that width costs nothing. */
.roster-table {
  min-width: 1120px;
}

@media (min-width: 561px) {
  .roster-table th,
  .roster-table td {
    white-space: nowrap;
  }
}

/* No nowrap here. The mobile layout stacks each cell into a grid, and a
   non-wrapping row header widened the track past the viewport, so the page
   scrolled sideways instead of the table. Names are short enough to sit on one
   line without being told to. */
.roster-table tbody th {
  min-width: 0;
}

.roster-provenance {
  display: grid;
  gap: 3px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

/* Link-method names and source paths are long unbroken tokens, so they need
   explicit permission to break. The roster's source table is a path like
   `companion/RICF_private/dataset_cleaned/board/chinanpo_board_2016.parquet`,
   which pushed the page sideways on a phone rather than wrapping. */
.roster-provenance li,
.roster-source {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.66rem;
  overflow-wrap: anywhere;
}

.data-table tbody tr:nth-child(even) {
  background: var(--iu-cream-light);
}

.data-table .field-code {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 0.63rem;
}

.source-native-table thead th.field-code {
  color: var(--iu-cream-light);
  font-family: var(--mono);
  text-transform: none;
}

.source-native-table thead th code {
  color: var(--iu-cream-light);
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  margin-top: 3px;
  text-transform: none;
}

.mixed-era-note {
  border-left: 3px solid var(--gold);
  padding-left: 12px;
}

.source-native-table tbody th {
  font-weight: 600;
}

/* --- Unified statement tables ------------------------------------------
   A historical panel and a current filing are rendered with the same row
   identity and the same measure columns, so one set of rules styles both. */

.data-table .numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.statement-table tbody th {
  line-height: 1.4;
}

/* Stripes are assigned per data row so a section heading never shifts them. */
.statement-table tbody tr:nth-child(even) {
  background: none;
}

.statement-table tbody tr.row-alternate {
  background: var(--iu-cream-light);
}

/* The codebook's English column is a machine translation that repeats wording
   across distinct codes, so every field shows the other language beneath it. */
.row-alt-label {
  color: var(--muted);
  display: block;
  font-size: 0.63rem;
  font-weight: 450;
  margin-top: 2px;
}

.statement-table tbody tr.statement-section,
.statement-table tbody tr.statement-section:nth-child(even) {
  background: var(--iu-cream-light);
}

.statement-table tr.statement-section th {
  border-bottom: 1px solid var(--line-dark);
  border-top: 1px solid var(--line-dark);
  color: var(--iu-crimson);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  min-width: 0;
  padding-block: 9px;
  text-transform: uppercase;
}

.statement-table .value {
  display: block;
}

.statement-table .value + .value {
  margin-top: 3px;
}

.statement-table .value-absent {
  color: var(--iu-gray-dark);
}

/* A value that describes this year but was read from a neighbouring filing,
   marked only where the same statement also holds values the organization filed
   for the year. Where every value is carried, the year's badge says so and the
   marking would be noise on every line.

   The underline carries the distinction on its own. Muting the colour dropped
   these to 1.65:1 against the conflicting-cell background, and they are data a
   reader has to be able to read, not decoration. */
.statement-table .value-carried {
  border-bottom: 1px dotted var(--iu-gray-dark);
}

.statement-table td.conflicting {
  background: var(--pale-gold, #fdf3dc);
  box-shadow: inset 2px 0 0 var(--gold);
}

.statement-table .value-conflict-note {
  color: var(--vermillion);
  display: block;
  font-size: 0.6rem;
  margin-top: 3px;
  white-space: normal;
}

.prior-period-note {
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 74ch;
}

.statement-evidence {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 16px;
}

.statement-evidence > summary {
  color: var(--iu-crimson);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 640;
}

.statement-evidence-body {
  display: grid;
  gap: 20px;
  margin-top: 16px;
}

.statement-evidence-body h4 {
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.statement-evidence-body > p {
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.55;
  margin: 0;
}

.statement-source-list,
.statement-grade-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.statement-source-list li {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.statement-source-list code {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 0.66rem;
  overflow-wrap: anywhere;
}

.statement-source-list span,
.statement-grade-list li {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.statement-absent-codes,
.statement-column-codes {
  color: var(--teal);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.7;
  margin: 0;
  overflow-wrap: anywhere;
}

.statement-column-groups {
  display: grid;
  gap: 4px;
  margin: 0;
}

.statement-column-groups dt {
  font-size: 0.7rem;
  font-weight: 640;
}

.statement-column-groups dd {
  margin: 0 0 10px;
}

.year-section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.year-section-link {
  border: 1px solid var(--line-dark);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 8px 12px;
  text-decoration: none;
}

.year-section-link:hover,
.year-section-link:focus-visible {
  background: var(--iu-cream-light);
  border-color: var(--iu-crimson);
  color: var(--iu-crimson);
}

.source-native-note {
  background: var(--iu-cream-light);
  border-left: 3px solid var(--gold);
  margin: 18px 0;
  padding: 15px 17px;
}

.source-native-note strong {
  display: block;
  font-size: 0.72rem;
  margin-bottom: 5px;
}

.source-native-note p {
  color: var(--ink-soft);
  font-size: 0.7rem;
  line-height: 1.55;
  margin: 0;
}

.data-empty {
  background: var(--paper);
  border: 1px dashed var(--line-dark);
  margin-top: 20px;
  padding: 22px;
}

.data-empty strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 560;
}

.data-empty p {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.65;
  margin: 8px 0 0;
}

.provenance-cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.provenance-cards > article {
  border: 1px solid var(--line);
  min-width: 0;
  padding: 15px;
}

.provenance-cards > article > code {
  color: var(--teal);
  display: block;
  font-size: 0.63rem;
  overflow-wrap: anywhere;
}

.provenance-cards dl,
.provenance-list-light {
  margin: 12px 0 0;
}

.provenance-cards dl div,
.provenance-list-light div {
  border-top: 1px solid var(--line);
  display: grid;
  font-size: 0.69rem;
  gap: 12px;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  padding-block: 8px;
}

.provenance-cards dt,
.provenance-list-light dt {
  color: var(--muted);
}

.provenance-cards dd,
.provenance-list-light dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-method {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding-block: 42px;
}

.profile-method-grid {
  align-items: start;
  display: grid;
  gap: 54px;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
}

.profile-method h2 {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 530;
  letter-spacing: -0.035em;
  margin: 8px 0 0;
}

.profile-method-grid > p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.75;
  margin: 0;
}

.profile-footer {
  padding-top: 0;
}

@media (max-width: 1040px) {
  .nav-links {
    gap: 18px;
  }

  .snapshot-pill {
    display: none;
  }

  .hero-grid {
    gap: 48px;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  }

  .hero h1 {
    font-size: clamp(3.5rem, 7vw, 5.4rem);
  }
}

@media (max-width: 820px) {
  .nav {
    height: 68px;
  }

  .brand small {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 58px 66px;
  }

  .hero h1 {
    max-width: 10ch;
  }

  .hero-ledger {
    min-height: 320px;
    width: min(100%, 480px);
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .metric:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  /* Five metrics in two columns leave the last one alone on its own row. It
     spans the pair instead, which reads as a deliberate full-width figure
     rather than a tile that failed to find a neighbour. */
  .metric:last-child:nth-child(odd) {
    border-right: 1px solid var(--line);
    grid-column: 1 / -1;
  }

  .metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .split-heading {
    align-items: start;
    gap: 26px;
    grid-template-columns: 1fr;
  }

  .search-row {
    flex-wrap: wrap;
  }

  .search-field {
    flex-basis: calc(100% - 140px);
  }

  .filter-field {
    flex: 1 1 240px;
    min-height: 52px;
  }

  .button-search {
    flex: 1 1 130px;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .chart-card-wide {
    grid-column: span 1;
  }

  .citation-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .citation-copy {
    border-left: 0;
    border-top: 1px solid rgba(7, 35, 50, 0.28);
    padding: 30px 0 0;
  }

  .documentation-shell {
    gap: 22px;
    grid-template-columns: 1fr;
    padding-block: 38px 60px;
  }

  .documentation-aside {
    overflow: hidden;
    position: static;
  }

  .documentation-aside nav {
    align-items: stretch;
  }

  .documentation-aside-links {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 7px;
    scrollbar-width: thin;
  }

  .documentation-aside a {
    background: var(--white);
    border: 1px solid var(--line);
    flex: 0 0 auto;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .documentation-aside a:hover,
  .documentation-aside a[aria-current="page"] {
    border-color: var(--iu-crimson);
  }

  .profile-hero-grid,
  .evidence-level-heading {
    grid-template-columns: 1fr;
  }

  .profile-hero-grid {
    align-items: start;
  }

  .profile-identity {
    max-width: 560px;
  }

  .evidence-level-heading {
    align-items: start;
    gap: 20px;
  }

  .research-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .research-summary > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .research-summary > div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .selected-observation {
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.3fr);
  }

  .selected-observation-note {
    grid-column: 1 / -1;
  }

  .trend-grid {
    grid-template-columns: 1fr;
  }

  .profile-tabs {
    top: 68px;
  }

  .data-panel-heading,
  .profile-method-grid {
    align-items: start;
    gap: 20px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .shell {
    padding-inline: 18px;
  }

  .icon-link {
    display: none;
  }

  .hero::before {
    width: 62%;
  }

  .hero-grid {
    gap: 30px;
    padding-block: 42px 48px;
  }

  .eyebrow {
    align-items: flex-start;
    flex-wrap: wrap;
    font-size: 0.61rem;
    gap: 8px;
  }

  .eyebrow-rule {
    display: none;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 12.5vw, 3.5rem);
    line-height: 0.92;
    margin-block: 18px;
    max-width: none;
  }

  .hero-lede {
    font-size: 0.96rem;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
  }

  .button-primary {
    justify-content: space-between;
    width: 100%;
  }

  .hero-ledger {
    box-shadow: 10px 10px 0 var(--gold);
    min-height: 0;
    padding: 20px;
  }

  .ledger-date {
    font-size: 2.25rem;
    margin-block: 20px;
  }

  .hero-ledger dl {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-ledger dl div {
    align-content: start;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .hero-ledger dl div:first-child {
    grid-column: 1 / -1;
  }

  .ledger-stamp {
    display: none;
  }

  .metric {
    min-height: 88px;
    padding: 16px 14px;
  }

  .metric strong {
    font-size: 1.72rem;
  }

  .metric span {
    font-size: 0.65rem;
    line-height: 1.35;
  }

  .section {
    padding-block: 52px;
  }

  .section-heading {
    margin-bottom: 28px;
  }

  .section-heading h2 {
    font-size: 2.35rem;
  }

  .split-heading > p {
    font-size: 0.88rem;
  }

  #lookup-form {
    padding: 18px;
  }

  .search-helper {
    align-items: stretch;
    flex-direction: column;
  }

  .search-helper .database-state {
    margin-left: 0;
  }

  /* Two equal tabs across the card rather than an inline pair that leaves a
     strip of empty paper beside them. */
  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .scope-button {
    justify-content: center;
  }

  .search-field {
    flex-basis: 100%;
  }

  .button-search {
    flex-basis: 52px;
    justify-content: space-between;
  }

  /* The helper stacks on a narrow screen, and a flex-basis meant for a row
     becomes a height in a column: the guidance line reserved 260px of empty
     space under itself. */
  .search-helper #search-guidance {
    flex: 0 0 auto;
  }

  /* The toolbar has to stay one line on a phone, because it is pinned and
     every row it takes is a row of results the reader cannot see. The label
     goes; the select still announces itself through its accessible name. */
  .page-size > span {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .page-size select {
    padding-inline: 8px 20px;
  }

  .lookup-feedback {
    padding-inline: 18px;
  }

  .results-pane,
  .record-panel {
    padding: 20px 18px;
  }

  .result-head {
    padding: 14px;
  }

  .result-facts {
    grid-template-columns: 1fr;
    margin-inline: 14px;
  }

  .result-fact:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }

  .result-coverage {
    margin-inline: 14px;
  }

  .result-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-inline: 14px;
  }

  .record-grid {
    grid-template-columns: 1fr;
  }

  .record-field:nth-child(even) {
    padding-left: 0;
  }

  .donut-layout {
    gap: 18px;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .donut-chart {
    max-width: 180px;
  }

  .chart-card {
    min-height: 0;
    padding: 18px 16px;
  }

  .chart-card header {
    gap: 16px;
  }

  .chart-card h3 {
    font-size: 1.35rem;
  }

  .bar-chart {
    height: 190px;
  }

  .timeline-chart {
    min-height: 0;
  }

  .region-row {
    gap: 8px;
    grid-template-columns: 88px minmax(100px, 1fr) 46px;
  }

  .citation-band {
    padding-block: 40px;
  }

  .footer-links {
    gap: 28px;
  }

  .footer-bottom,
  .documentation-footer > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .documentation-shell {
    gap: 18px;
    padding-block: 28px 48px;
  }

  .documentation-aside span {
    font-size: 0.61rem;
  }

  .prose {
    padding: 24px 18px;
  }

  .prose h1 {
    font-size: 2.2rem;
    margin-bottom: 28px;
    padding-bottom: 14px;
  }

  .prose h2 {
    font-size: 1.55rem;
    margin-top: 34px;
    padding-top: 22px;
  }

  .prose h3 {
    font-size: 1.2rem;
  }

  .prose p,
  .prose li {
    font-size: 0.94rem;
    line-height: 1.68;
  }

  .profile-hero {
    padding-block: 22px 36px;
  }

  .profile-back {
    margin-bottom: 22px;
  }

  .profile-hero h1 {
    font-size: clamp(2.25rem, 10.5vw, 3.2rem);
    max-width: none;
  }

  .profile-eyebrow {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .profile-eyebrow span + span {
    border-left: 0;
    padding-left: 0;
  }

  .profile-identity dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-identity dl div {
    align-content: start;
    gap: 4px;
    grid-template-columns: 1fr;
    padding-right: 8px;
  }

  .org-evidence {
    padding-block: 28px 30px;
  }

  .year-evidence {
    padding-block: 26px 44px;
  }

  .evidence-level-heading h2 {
    font-size: 2.35rem;
  }

  .research-summary > div,
  .research-summary > div + div {
    padding-block: 9px;
  }

  .selected-observation {
    align-items: start;
    gap: 14px;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .selected-observation.no-year {
    grid-template-columns: 1fr;
  }

  .selected-observation dl {
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 5px;
  }

  .selected-observation dl div {
    border-left: 0;
    padding: 8px 0;
  }

  .selected-observation dl div + div {
    border-left: 1px solid var(--line);
    padding-left: 12px;
  }

  .selected-observation-note {
    grid-column: auto;
  }

  .profile-tabs button {
    padding: 13px 12px;
  }

  .profile-tab-panel {
    min-height: 360px;
    padding: 22px 16px;
  }

  .coverage-matrix {
    min-width: 730px;
  }

  .coverage-matrix thead th:first-child,
  .coverage-matrix tbody th {
    min-width: 142px;
    padding-inline: 10px;
    white-space: normal;
  }

  .research-section-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .trend-control {
    flex-basis: auto;
    width: 100%;
  }

  .trend-card {
    padding: 14px 10px;
  }

  .trend-card-heading {
    grid-template-columns: 1fr;
    padding-inline: 4px;
  }

  .trend-latest {
    min-width: 0;
  }

  .filing-cards,
  .provenance-cards {
    grid-template-columns: 1fr;
  }

  .data-field-grid {
    grid-template-columns: 1fr;
  }

  .data-field-grid > div:nth-child(odd) {
    border-right: 0;
  }

  .source-panel-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .data-table {
    display: block;
    min-width: 0;
  }

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

  .data-table tbody,
  .data-table tbody tr {
    display: grid;
  }

  .data-table tbody tr {
    border-bottom: 1px solid var(--line);
    padding-block: 5px;
  }

  .data-table th,
  .data-table td,
  .data-table tbody th {
    align-items: start;
    border: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(78px, 0.38fr) minmax(0, 1fr);
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 7px 12px;
  }

  .data-table th::before,
  .data-table td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.52rem;
    font-weight: 680;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .source-native-table tbody th {
    color: var(--teal);
  }

  /* A stacked row keeps its own field label, so the section heading becomes a
     full-width band rather than a label-and-value pair. */
  .statement-table tr.statement-section th {
    display: block;
    grid-template-columns: none;
    padding: 10px 12px;
  }

  .statement-table tr.statement-section th::before {
    content: none;
  }

  .statement-table .numeric {
    text-align: left;
    white-space: normal;
  }

  /* A stacked cell is a label-and-value grid, so the secondary label belongs
     under the primary one rather than back in the label column. */
  .data-table .row-alt-label {
    grid-column: 2;
  }

  .profile-method {
    padding-block: 36px;
  }

  .profile-method h2 {
    font-size: 2rem;
  }
}

/* Mobile refinements --------------------------------------------------------
   Placed after the breakpoint blocks above so equal-specificity rules win
   without inflating specificity. */

/* Both collapsible navigations are driven by a checkbox rather than <details>.
   A disclosure that must be permanently expanded above a breakpoint has to
   override the user agent's closed-state rendering, and that override is not
   reliable across engines: it left the desktop menu bar invisible. A checkbox
   inverts the dependency, so the desktop bar is a plain flex row with nothing
   to override and the collapse is additive on small screens only. */
.nav-toggle,
.nav-toggle-button {
  display: none;
}

.docs-toggle {
  display: none;
}

/* On wide screens the sidebar label is a heading, not a control. */
.docs-toggle-button {
  pointer-events: none;
}

.disclosure-chevron {
  display: none;
}

@media (min-width: 1041px) {
  /* With the record panel closed the results pane spans the whole card, so one
     column of cards leaves half the width empty and doubles the scrolling. When
     the panel is open the pane is narrow again and one column is correct. */
  .result-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  :root {
    /* 4px accent border + 68px nav + 1px bottom border. */
    --header-height: 73px;
  }

  /* The sector and timeline charts draw into a 900-unit viewBox. Scaled to a
     phone-width card they would render their labels near 4px, so the chart body
     scrolls at a legible floor instead. The donut is already capped at 180px
     and the bar chart rotates its own labels below, so neither is touched. */
  .sector-chart,
  .timeline-chart {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .sector-chart svg,
  .timeline-chart svg {
    min-width: 560px;
  }

  /* Both charts scale their 900-unit viewBox to that 560px floor, so a label's
     px value is multiplied by 0.62 before a reader sees it. The two charts had
     been written to different scales — the sector axis at 16 units rendered at
     10px, the timeline label at 10 units rendered at 6.2px — so the timeline was
     the one chart on the site whose axis could not be read. Both now state the
     size that survives the scaling. */
  .timeline-axis,
  .timeline-label {
    font-size: 19px;
  }

  /* 4px of padding on a 20px line gave the citation controls a 28px tap target.
     They are real controls rather than body links, so they get a comfortable
     one; the underline that carries their affordance is unchanged. */
  .citation-copy a,
  .citation-copy button {
    min-height: 40px;
    padding: 10px 0;
  }

  /* The primary navigation collapses behind a menu icon. Below this width it
     was display:none, so a phone had no navigation at all. */
  .nav {
    position: relative;
  }

  .nav-toggle {
    /* Focusable and operable; the label carries the visuals. */
    display: block;
    height: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 0;
  }

  .nav-toggle-button {
    align-items: center;
    color: var(--ink-soft);
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .nav-toggle-button svg {
    height: 14px;
    width: 20px;
  }

  .nav-toggle:focus-visible + .nav-toggle-button {
    outline: 2px solid var(--vermillion);
    outline-offset: 2px;
  }

  .nav-links {
    display: none;
  }

  .nav-toggle:checked ~ .nav-links {
    background: var(--cream);
    border: 1px solid var(--line-dark);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-inline: 0;
    min-width: 216px;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
  }

  .nav-toggle:checked ~ .nav-links a {
    align-items: center;
    display: flex;
    min-height: 44px;
    padding-inline: 12px;
  }

  /* The underline animation reads as a mis-render on stacked menu rows. */
  .nav-toggle:checked ~ .nav-links a::after {
    display: none;
  }

  /* Eight documentation links sat in a 949px horizontal scroller, which left
     most of them off-screen with nothing to indicate they existed. */
  .docs-toggle-button {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    min-height: 44px;
    pointer-events: auto;
  }

  .documentation-aside-links {
    display: none;
  }

  .docs-toggle:checked ~ .documentation-aside-links {
    display: flex;
  }

  .docs-toggle:focus-visible + .docs-toggle-button {
    outline: 2px solid var(--vermillion);
    outline-offset: 2px;
  }

  .documentation-aside-links {
    flex-direction: column;
    gap: 6px;
    overflow-x: visible;
    padding-bottom: 0;
  }

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

  .disclosure-chevron {
    display: block;
    flex: 0 0 auto;
    height: 10px;
    transition: transform 160ms ease;
    width: 10px;
  }

  .docs-toggle:checked + .docs-toggle-button .disclosure-chevron {
    transform: rotate(180deg);
  }
}

@media (max-width: 560px) {
  /* "All social organizations 1.2M" needs about 210px and has about 160px, so
     the two tabs take the short name of each dataset. Each still carries its
     record count: that is how a reader tells the two apart by size. */
  .scope-name {
    display: none;
  }

  .scope-name-short {
    display: inline;
  }

  .scope-button {
    gap: 6px;
    padding-inline: 11px;
  }

  /* Below this width the three facts no longer share a line, so the middots
     that separate them turn into bullets hanging off the start of one. */
  .result-facts {
    flex-direction: column;
    gap: 4px;
  }

  .result-fact + .result-fact::before {
    content: none;
  }

  /* Mobile type floor. Every rule below sets type under 12px, which reads
     acceptably in a dense desktop layout and not on a phone. Desktop keeps
     its scale; only these widths are lifted. SVG text is excluded: its px
     values are not literal sizes. */
  .bar-year,
  .brand small,
  .chart-caption,
  .chart-label,
  .chart-unit,
  .citation-copy a,
  .citation-copy button,
  .coverage-matrix,
  .coverage-matrix td.available a,
  .coverage-matrix thead small,
  .coverage-summary-table,
  .coverage-summary-table thead th,
  .data-field-grid code,
  .data-field-grid dt,
  .data-panel-heading span,
  .data-table,
  .data-table .field-code,
  .data-table td::before,
  .data-table th::before,
  .data-table thead th,
  .database-state,
  .documentation-aside span,
  .documentation-footer > div,
  .empty-shortcut,
  .empty-shortcuts-label,
  .eyebrow,
  .facet-reset,
  .facet-row .filter-field > span,
  .facet-row > legend,
  .filing-card dd,
  .filing-card dt,
  .filing-card-number,
  .footer-bottom,
  .footer-links a,
  .footer-links strong,
  .hero-ledger dt,
  .kicker,
  .ledger-stamp small,
  .ledger-top,
  .legend-label small,
  .legend-label strong,
  .legend-value,
  .level-skip-link,
  .lookup-feedback,
  .metric span,
  .page-button,
  .page-gap,
  .page-size,
  .prior-period-note,
  .profile-actions button,
  .profile-back,
  .profile-eyebrow,
  .profile-identity > span,
  .profile-identity dt,
  .profile-status,
  .profile-tabs button,
  .provenance-cards > article > code,
  .provenance-cards dl div,
  .provenance-list div,
  .provenance-list-light div,
  .record-actions a,
  .record-actions button,
  .record-field dt,
  .record-kind,
  .record-section h4,
  .region-name,
  .region-value,
  .research-section-heading p,
  .research-summary dt,
  .result-code,
  .result-coverage > strong,
  .result-fact small,
  .result-fact strong,
  .result-footer > span,
  .result-profile-link,
  .result-record-link,
  .result-years a,
  .page-position,
  .row-alt-label,
  .scope-button small,
  .search-helper,
  .sector-layout .chart-legend li,
  .selected-observation dd,
  .selected-observation dt,
  .selected-observation-note,
  .selected-observation-title span,
  .snapshot-pill,
  .source-native-note p,
  .source-native-note strong,
  .source-native-table thead th code,
  .source-note,
  .source-panel-meta > span,
  .source-panel-meta code,
  .source-panel-meta strong,
  .statement-absent-codes,
  .statement-column-codes,
  .statement-column-groups dt,
  .statement-evidence > summary,
  .statement-evidence-body > p,
  .statement-evidence-body h4,
  .statement-grade-list li,
  .statement-source-list code,
  .statement-source-list span,
  .statement-table .value-conflict-note,
  .statement-table tr.statement-section th,
  .tag-list a,
  .trend-card-heading p,
  .trend-control > label,
  .trend-evidence summary,
  .trend-evidence-table,
  .trend-evidence-table thead th,
  .trend-latest small,
  .trend-latest span,
  .trend-legend span,
  .trend-note,
  .year-key,
  .year-legend,
  .year-link,
  .year-section-link {
    font-size: 0.75rem;
  }

  /* Controls go to 16px, not 12px: iOS zooms the viewport when a focused
     form control has smaller type, which strands the reader mid-page. */
  .page-size select,
  .trend-control select {
    font-size: 1rem;
  }

  /* Inline code is sized in em, so inside an already-small table cell or list
     item it compounds down to about 10px. Floor it without flattening the
     ratio where the surrounding text is full size. */
  .prose code {
    font-size: max(0.75rem, 0.78em);
  }

  /* Touch targets. WCAG 2.5.5 asks for 44x44. These are the ones a thumb
     actually misses; controls already at 36-40px keep their designed size. */
  #language-toggle,
  #profile-language-toggle {
    min-height: 44px;
    min-width: 44px;
  }

  /* The reset button shares this row with the selects, so it is lifted with
     them rather than left as the one 32px target among 44px ones. */
  .facet-reset,
  .facet-row .filter-field select {
    min-height: 44px;
  }

  .example-queries button {
    min-height: 44px;
  }

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

  /* An 88px name column truncated most region names to two words. Give the name
     its own full-width row so the bar and its value keep the width they need. */
  .region-row {
    grid-template-columns: minmax(0, 1fr) 46px;
    row-gap: 4px;
  }

  .region-name {
    grid-column: 1 / -1;
    overflow: visible;
    white-space: normal;
  }

  /* The credit code is this database's canonical key, and the base rule lets it
     break anywhere, so at 12px it split mid-identifier with one character left
     on its own line. Give the identity the full card width and keep all 18
     characters together; the record action takes its own row rather than
     competing for the space. */
  .result-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .result-code {
    white-space: nowrap;
  }

  /* Search results repeat their controls once per card, so an undersized target
     here is one a reader meets 25 times a page rather than once. */
  .result-profile-link,
  .result-record-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .result-years a,
  .tag-list a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .page-button,
  .page-step {
    min-height: 44px;
    min-width: 44px;
  }

  /* The pinned toolbar reads at one size on a phone. The per-page select is
     the one control that cannot join it: iOS zooms the viewport when a focused
     form control is under 16px, so rather than sit 4px larger than every
     figure beside it, it steps aside until there is room for it. Twenty-five
     per page is the default it would have offered anyway. */
  .results-paging .page-size {
    display: none;
  }

  /* "‹ Previous" is a 92px button, and the pair of them pushed the numbered
     pages onto a third line. The arrow carries the meaning here; the button's
     accessible name still says which page it goes to. */
  .page-word {
    display: none;
  }

  .page-button {
    padding-inline: 4px;
  }

  /* The dataset switch is the first control on the page and was two rows of
     40px targets. */
  .scope-button {
    min-height: 44px;
  }

  .page-size select {
    min-height: 44px;
  }

  /* Icon-only and the only way out of the record panel, so it has less margin
     for a missed tap than a labelled button. */
  .panel-close {
    min-height: 44px;
    min-width: 44px;
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .hero-actions,
  #lookup-form,
  .site-footer {
    display: none;
  }

  body {
    background: white;
  }

  .hero,
  .insights-section {
    background: white;
  }
}