/* THE FIGURE SYSTEM — shared by every evidence page on this site.
   Loaded by: /briefing, /data, /data-hospital, /data-sheriff, /authority
   (and each ES twin). site.css is NOT forked: every value below is a
   design-system token.

   Add a page? Load this file, then `styles/pages/<page>.css` for anything that
   is genuinely unique to it. Add an agency's dataset? See content/data-sources.json
   and the pattern in data-hospital.html — a figure is a <figure class="brf-figure">
   with a title, a note, a plot, a collapsed data table, and a source line. All
   five parts are required; a chart without its table and its source does not ship.

   The `brf-` prefix is historical (it began life on the briefing page) and is
   kept because every evidence page now shares it.

   DESIGN RULES CARRIED FROM THE BRAND GUIDE
   - Coral (#E8826B) is decoration and large display only. Chart series that carry
     meaning use coral-DEEP (#B54A30, 5.27:1), teal-deep, or navy — never bare coral.
   - Charts must read without color: every series is labelled in the legend AND has a
     text/table equivalent underneath (.brf-figure__data), so the page is usable with
     color blindness, a screen reader, or images off.
   - Motion is an enhancement. Under prefers-reduced-motion every bar, line and
     counter renders instantly at its final value. Nothing is hidden behind an
     animation that might not run. */

/* ---- 1. Page rhythm ----------------------------------------------------- */

.brf-lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
}

/* A quiet stamp for the document's own provenance (date, author, edition). */
.brf-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: baseline;
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) 0;
}
.brf-stamp b { color: var(--navy); font-weight: 700; }

/* ---- 2. Sticky section jump-nav ---------------------------------------- */
/* Sits under the crisis bar + header stack. It is a real <nav> with links, so it
   works with JS off; figures.js only adds the "you are here" highlight. */

/* Every page carrying this file adds a THIRD sticky tier under the crisis bar +
   header, so the site-wide scroll-padding-top is short by the height of that
   strip and a jump link would park its own heading underneath it. Safe to set
   `html` here: this file is loaded only by pages that have the jump strip. */
html { scroll-padding-top: calc(var(--crisis-h) + var(--header-h) + 4.5rem); }

.brf-jump {
  position: sticky;
  top: calc(var(--crisis-h) + var(--header-h));
  z-index: 30;
  background: rgba(251, 249, 246, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brf-jump__scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: thin;
  padding: var(--sp-3) 0;
  -webkit-overflow-scrolling: touch;
}
.brf-jump__link {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.brf-jump__link:hover { color: var(--navy); border-color: var(--teal); }
.brf-jump__link[aria-current="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
@media print { .brf-jump { display: none; } }

/* ---- 3. "At a glance" headline numbers ---------------------------------- */

.brf-glance {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 60rem) {
  .brf-glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.brf-glance__item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(159, 198, 209, 0.32);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.brf-glance__num {
  font-family: var(--font-serif);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.brf-glance__label {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--light-teal);
}

/* ---- 4. The figure (chart) card ----------------------------------------- */

.brf-figure {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--sp-5);
  margin: 0;
}
@media (min-width: 48rem) { .brf-figure { padding: var(--sp-6); } }

.brf-figure__eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.brf-figure__title {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.15;
  color: var(--navy);
  margin-top: var(--sp-2);
}
.brf-figure__note {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 60ch;
}
.brf-figure__plot { margin-top: var(--sp-5); }
.brf-figure__plot svg { width: 100%; height: auto; overflow: visible; }

.brf-figure__src {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-faint);
  line-height: 1.5;
}

/* Text equivalent of every chart — a real table, collapsed by default. */
.brf-figure__data { margin-top: var(--sp-4); }
.brf-figure__data > summary {
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--teal-deep);
  list-style: none;
}
.brf-figure__data > summary::-webkit-details-marker { display: none; }
.brf-figure__data > summary::before { content: "▸ "; }
.brf-figure__data[open] > summary::before { content: "▾ "; }

.brf-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
}
.brf-table caption {
  text-align: left;
  color: var(--ink-faint);
  padding-bottom: var(--sp-2);
}
.brf-table th,
.brf-table td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.brf-table thead th {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 2px solid var(--teal);
  white-space: nowrap;
}
.brf-table td.num,
.brf-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.brf-table tbody tr:last-child td { border-bottom: 0; }
.brf-table--scroll { display: block; overflow-x: auto; }

/* ---- 5. Chart primitives (SVG) ------------------------------------------ */

.brf-axis { stroke: var(--line); stroke-width: 1; }
.brf-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.brf-tick {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.brf-vlabel {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  fill: var(--navy);
  font-variant-numeric: tabular-nums;
}
.brf-vlabel--onnavy { fill: var(--white); }
.brf-note-text {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--ink-soft);
}

/* Series fills. Named for meaning, not hue — see the legend in each figure. */
.s-custody  { fill: var(--coral-deep); }
.s-transfer { fill: var(--navy); }
.s-transport{ fill: var(--teal); }
.s-jail     { fill: var(--navy); }
.s-ed       { fill: var(--coral-deep); }
.s-quiet    { fill: var(--light-teal); }
.s-hours    { fill: var(--teal); }

/* Bars grow from their baseline when scrolled into view. */
@media (prefers-reduced-motion: no-preference) {
  .brf-bar {
    transform-box: fill-box;
    transform-origin: bottom center;
    transform: scaleY(0);
    transition: transform 0.9s var(--ease);
  }
  .is-revealed .brf-bar { transform: scaleY(1); }
  .brf-bar--h {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.9s var(--ease);
  }
  .is-revealed .brf-bar--h { transform: scaleX(1); }
  .brf-bar:nth-of-type(2) { transition-delay: 0.08s; }
  .brf-bar:nth-of-type(3) { transition-delay: 0.16s; }
  .brf-bar:nth-of-type(4) { transition-delay: 0.24s; }
}

.brf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.brf-legend__key {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.brf-legend__swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  flex: 0 0 auto;
}
.brf-legend__swatch--custody  { background: var(--coral-deep); }
.brf-legend__swatch--transfer { background: var(--navy); }
.brf-legend__swatch--transport{ background: var(--teal); }
.brf-legend__swatch--jail     { background: var(--navy); }
.brf-legend__swatch--ed       { background: var(--coral-deep); }
.brf-legend__swatch--quiet    { background: var(--light-teal); }

/* ---- 6. Controls: segmented switch + slider ----------------------------- */

.brf-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: flex-end;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--mist);
  border-radius: var(--r-md);
}
.brf-control { flex: 1 1 14rem; min-width: 0; }
.brf-control__label {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-2);
}
.brf-control__hint {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: var(--sp-2);
  line-height: 1.45;
}

.brf-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--white);
  border: 1px solid var(--line-cool);
  border-radius: var(--r-pill);
}
.brf-seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
}
.brf-seg__btn:hover { color: var(--navy); }
.brf-seg__btn[aria-pressed="true"] {
  background: var(--navy);
  color: var(--white);
}

.brf-range { width: 100%; accent-color: var(--teal-deep); }
.brf-readout {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.brf-readout small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: var(--sp-1);
  letter-spacing: 0;
}

/* The live figure the controls drive. */
.brf-result {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--r-md);
  background: var(--paper);
}
.brf-result__num {
  font-family: var(--font-serif);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.brf-result__label {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* ---- 7. Assumption chips ------------------------------------------------ */
/* Every estimate on this page states its inputs in the open. */

.brf-assump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: 0;
  list-style: none;
}
.brf-assump li {
  font-size: var(--step--1);
  color: var(--ink-soft);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.75rem;
}
.brf-assump b { color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---- 8. Accordion (caveats, funding pathways) --------------------------- */

.brf-acc { display: grid; gap: var(--sp-3); }
.brf-acc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.brf-acc__item[open] { border-color: var(--teal); }
.brf-acc__sum {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  color: var(--navy);
  list-style: none;
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  line-height: 1.4;
}
.brf-acc__sum::-webkit-details-marker { display: none; }
.brf-acc__sum::after {
  content: "+";
  margin-left: auto;
  color: var(--teal-deep);
  font-size: var(--step-1);
  line-height: 1;
  flex: 0 0 auto;
}
.brf-acc__item[open] .brf-acc__sum::after { content: "–"; }
.brf-acc__sum:hover { background: var(--mist); }
.brf-acc__body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.6;
}
.brf-acc__body > * + * { margin-top: var(--sp-3); }
.brf-acc__tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-deep);
  background: var(--sand);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
  flex: 0 0 auto;
}

/* ---- 9. Real / Not real ------------------------------------------------- */

.brf-ledger {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 52rem) {
  .brf-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.brf-ledger__col {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--teal);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.brf-ledger__col--not { border-top-color: var(--coral-deep); }
.brf-ledger__h {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.brf-ledger__col--not .brf-ledger__h { color: var(--coral-deep); }
.brf-ledger__list {
  margin-top: var(--sp-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
}
.brf-ledger__list li {
  display: flex;
  gap: var(--sp-3);
  line-height: 1.5;
  font-size: var(--step-0);
}
.brf-ledger__list li::before {
  content: "✓";
  color: var(--teal-deep);
  font-weight: 700;
  flex: 0 0 auto;
}
.brf-ledger__col--not .brf-ledger__list li::before {
  content: "—";
  color: var(--coral-deep);
}

/* ---- 10. Pull quote ----------------------------------------------------- */

.brf-pull {
  border-left: 4px solid var(--coral);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  margin: 0;
}
.brf-pull p {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--navy);
}
.brf-pull footer {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---- 11. Signature block — see §21, below (kept in one place) ----------- */

/* ---- 12. Print — the briefing has to survive being handed across a desk -- */

@media print {
  .brf-controls,
  .brf-figure__data,
  .btn-row,
  .crisis-bar,
  .site-header,
  .site-footer,
  .back-to-top,
  .skip-link,
  #scbhc-cookie { display: none !important; }   /* consent banner would stamp every page */

  .brf-figure {
    box-shadow: none;
    break-inside: avoid;
    border-color: #999;
  }
  .brf-acc__item { break-inside: avoid; }
  .brf-acc__body { display: block !important; }
  .section { padding: 0.75rem 0 !important; }
  .section--navy { background: #fff !important; color: #000 !important; }
  .section--navy h2,
  .section--navy .brf-glance__num { color: #000 !important; }
  .section--navy .brf-glance__label { color: #333 !important; }
  /* On screen these links are white-on-navy via an inline style. The navy fill is
     dropped for print, so without this they print white on white — the text
     silently disappears from the paper copy. */
  .section--navy a[style],
  .section--navy .status-line { color: #1F3A60 !important; }
  .brf-glance__item { border-color: #999; }
  .brf-bar,
  .brf-bar--h { transform: none !important; }
  a[href]::after { content: ""; }
}

/* ==========================================================================
   PART TWO — components added for the per-agency data pages and /authority.
   Everything above this line is shared chart furniture; everything below is
   shared page furniture. Both are used by more than one page.
   ========================================================================== */

/* ---- 13. Breadcrumb ----------------------------------------------------- */
/* Evidence pages sit two levels down (/data → /data-hospital). Without a
   crumb a reader who arrives from a forwarded link has no idea there is a
   collection behind the page they are on. */

.brf-crumb {
  font-size: var(--step--1);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.brf-crumb a { color: var(--teal-deep); }
.brf-crumb span[aria-hidden] { color: var(--ink-faint); }

/* ---- 14. The record hub: one card per contributing agency --------------- */

.brf-hub {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .brf-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .brf-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.brf-source {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  min-width: 0;
}
.brf-source--published { border-left-color: var(--teal); }
.brf-source--review    { border-left-color: var(--coral-deep); }
.brf-source--awaiting  { border-left-color: var(--ink-faint); }

.brf-source__status {
  align-self: flex-start;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  background: var(--sand);
}
.brf-source--published .brf-source__status { color: var(--teal-deep); background: var(--mist); }
.brf-source--review .brf-source__status    { color: var(--coral-deep); background: var(--sand); }

.brf-source__name {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--navy);
  margin-top: var(--sp-3);
  line-height: 1.2;
}
.brf-source__role {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.brf-source__what {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  line-height: 1.55;
}
.brf-source__figs {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
}
.brf-source__figs li { font-size: var(--step--1); color: var(--ink-soft); }
.brf-source__figs b {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.brf-source__cta { margin-top: auto; padding-top: var(--sp-4); }

/* ---- 15. Flow diagram labels (where the encounters went) ---------------- */

.brf-flow-note {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* ---- 16. The alarm: what the delay itself costs ------------------------- */
/* Used to close each evidence page. It is deliberately restrained — the number
   does the shouting, not the styling. Never put a countdown or a siren here:
   this is a health organisation, not an ad. */

.brf-alarm {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border-top: 5px solid var(--coral);
}
.brf-alarm__eyebrow {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
}
.brf-alarm__num {
  font-family: var(--font-serif);
  font-size: var(--step-4);
  line-height: 1;
  margin-top: var(--sp-3);
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.brf-alarm__label {
  margin-top: var(--sp-3);
  color: var(--light-teal);
  font-size: var(--step-0);
  line-height: 1.55;
  max-width: 62ch;
}
.brf-alarm__math {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(159, 198, 209, 0.3);
  font-size: var(--step--1);
  color: var(--light-teal);
  line-height: 1.55;
}
.brf-alarm .btn-row { margin-top: var(--sp-5); }

/* ---- 17. Timeline (how long the authority has been sitting there) ------- */

.brf-time {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.brf-time::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: linear-gradient(var(--light-teal), var(--coral));
}
.brf-time__item {
  position: relative;
  padding: 0 0 var(--sp-6) var(--sp-7);
}
.brf-time__item:last-child { padding-bottom: 0; }
.brf-time__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--teal);
}
.brf-time__item--now::before { border-color: var(--coral-deep); background: var(--coral-deep); }
.brf-time__when {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.brf-time__item--now .brf-time__when { color: var(--coral-deep); }
.brf-time__what {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--navy);
  margin-top: var(--sp-1);
  line-height: 1.25;
}
.brf-time__body {
  margin-top: var(--sp-2);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.6;
  max-width: 62ch;
}

/* ---- 18. The statute reader -------------------------------------------- */
/* Left: the actual words of the law, with the operative phrase highlighted.
   Right: what that phrase means for this initiative. The two must never be
   confusable — the quoted column is serif and boxed, the reading is not. */

.brf-clause {
  display: grid;
  gap: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
}
@media (min-width: 56rem) {
  .brf-clause { grid-template-columns: 1.1fr 1fr; padding: var(--sp-6); }
}
.brf-clause__cite {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.brf-clause__text {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--navy);
  margin-top: var(--sp-3);
  border-left: 3px solid var(--line-cool);
  padding-left: var(--sp-4);
}
.brf-clause__text mark {
  background: rgba(232, 130, 107, 0.24);
  color: inherit;
  padding: 0.05em 0.15em;
  border-radius: 3px;
}
.brf-clause__reading > h3 {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--navy);
}
.brf-clause__reading > * + * { margin-top: var(--sp-3); }
.brf-clause__reading p { font-size: var(--step-0); line-height: 1.6; }
.brf-clause__tag {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--coral-deep);
  background: var(--sand);
  border-radius: var(--r-pill);
  padding: 0.15rem 0.6rem;
}

/* ---- 19. Match list: what the law asks for vs. what already exists ------ */

.brf-match { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.brf-match__row {
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 1.75rem 1fr;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
@media (min-width: 52rem) {
  .brf-match__row { grid-template-columns: 1.75rem 1fr 1fr; align-items: center; }
}
.brf-match__tick {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--mist); color: var(--teal-deep);
  display: grid; place-items: center; font-weight: 700;
}
.brf-match__need { font-family: var(--font-serif); color: var(--navy); font-size: var(--step-0); line-height: 1.35; }
.brf-match__have { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }
.brf-match__have b { color: var(--teal-deep); }

/* ---- 20. Print additions for the pages above ---------------------------- */

@media print {
  .brf-alarm { background: #fff !important; color: #000 !important; border-top: 3px solid #999; }
  .brf-alarm__num, .brf-alarm__label, .brf-alarm__math { color: #000 !important; }
  .brf-alarm__eyebrow { color: #333 !important; }
  .brf-clause, .brf-time__item, .brf-source, .brf-match__row { break-inside: avoid; }
  .brf-crumb { display: none; }
}

/* ---- 21. Preparer / signature block ------------------------------------ */
/* The analysis on these pages is a named person's work product. Signing it is
   part of the honesty posture: a reader who wants to argue with a number knows
   exactly whose arithmetic to argue with. */

.brf-sign {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
  font-size: var(--step-0);
  line-height: 1.6;
}
.brf-sign__label {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: var(--sp-2);
}
.brf-sign strong { color: var(--navy); }
.brf-sign span { display: block; color: var(--ink-soft); font-size: var(--step--1); }

/* ---- 22. Disposition series (agency record pages) ----------------------- */
/* Four outcomes of one emergency department encounter. Teal is the outcome we
   want more of; the rest are the ones that are growing. */

.s-home { fill: var(--teal); }
.s-ama  { fill: var(--ink-faint); }
.brf-legend__swatch--home { background: var(--teal); }
.brf-legend__swatch--ama  { background: var(--ink-faint); }

/* On the alluvial, the four outcome ribbons reuse the same names. */
.s-lawenf { fill: var(--coral-deep); }

/* The tick is an inline SVG, not a ✓ character: a check glyph is not guaranteed
   in every system font stack, and a mark that carries meaning must not depend on
   one being present. */
.brf-match__tick svg { display: block; }