/* ============================================================
   Quarterly report pages (/stats/reports/<q>/). Loads after site.css,
   services.css and stats-pages.css. Generator: scripts/data/build-report.mjs
   - scroll-told layout: copy column sticks while its figures scroll by
   - CSS scroll-driven reveals and line drawing (progressive enhancement:
     only with animation-timeline support AND no reduced-motion request)
   - print: a clean black-on-white handout ("Save as PDF")
   ============================================================ */

/* ---------- table of contents ---------- */
.rp-toc { position: sticky; top: 0; z-index: 20; background: rgba(247, 245, 240, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline); }
.rp-toc ol { list-style: none; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.rp-toc ol::-webkit-scrollbar { display: none; }
.rp-toc a { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; }
.rp-toc a span { font-size: 10.5px; font-weight: 700; color: #8A5B00; font-variant-numeric: tabular-nums; }
.rp-toc a:hover { background: var(--paper-deep); }
.rp-toc a:focus-visible { outline: 2px solid #8A5B00; outline-offset: 1px; }
.rp-sec { scroll-margin-top: 120px; }

/* ---------- scroll-told section ---------- */
.rp-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }
.rp-copy { position: sticky; top: 132px; }
.rp-copy h2 { margin-top: 12px; max-width: 13.84em; text-wrap: balance; }
.rp-copy p[data-copy] { margin-top: 16px; font-size: 16px; line-height: 1.75; color: var(--k-dim); max-width: 44.58em; }
.rp-copy p[data-copy] b { color: var(--k-text); font-weight: 700; }
.rp-dark .rp-copy p[data-copy] { color: #B9BEC6; }
.rp-figs { display: grid; gap: 18px; min-width: 0; }
.rp-fig { margin: 0; }
.rp-fig .k-chart-body svg a { fill: var(--k-text); text-decoration: none; }
.rp-fig .k-chart-body svg a:hover { fill: var(--k-accent); text-decoration: underline; }
.rp-fig .k-chart-body svg a:focus-visible { outline: 2px solid var(--k-focus); }
.rp-band { fill: var(--k-mark); opacity: .12; }
.rp-db { stroke: var(--k-s3); stroke-width: 2; }
.rp-db-a { fill: var(--k-surface); stroke: var(--k-s3); stroke-width: 2; }
.rp-chg { font-weight: 700; }
.rp-chg.up { fill: var(--k-good); }
.rp-chg.down { fill: var(--k-bad); }
.rp-v { fill: var(--k-text); font-weight: 700; }
.rp-after { margin-top: clamp(24px, 3vw, 36px); }
.rp-table { margin-top: 2px; }
.rp-table td.num { white-space: nowrap; }
.rp-na { color: var(--k-dim); }
.rp-table .k-table { min-width: 860px; font-size: 13.5px; }
.rp-table th:first-child, .rp-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--k-surface); white-space: nowrap; }
.rp-table tr.rp-all td { font-weight: 700; background: var(--k-flat-bg); }

/* leaders (dark slab) */
.rp-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.rp-leader { padding: 16px 16px 12px; border: 1px solid var(--k-line); border-radius: 12px; background: var(--k-surface); }
.rp-leader-k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.rp-leader ol { list-style: none; counter-reset: rp; margin-top: 8px; display: grid; gap: 2px; }
.rp-leader li { counter-increment: rp; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--k-line); font-size: 13px; }
.rp-leader li::before { content: counter(rp); font-weight: 800; color: var(--k-dim); font-size: 11.5px; }
.rp-leader li a { color: var(--k-text); font-weight: 700; text-decoration: none; line-height: 1.35; }
.rp-leader li a:hover { color: var(--amber); }
.rp-leader li span { font-weight: 800; color: var(--k-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-leader li small { font-weight: 600; color: var(--k-dim); }
.rp-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rp-next .st-door { min-height: 180px; }

/* ---------- scroll-driven motion (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rp-fig { animation: rp-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .rp-fig { view-timeline-name: --rp-fig; }
    .rp-fig .rp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rp-draw linear both; animation-timeline: --rp-fig; animation-range: entry 20% cover 50%; }
    .rp-fig .rp-grow { transform-box: fill-box; transform-origin: bottom; animation: rp-grow linear both; animation-timeline: --rp-fig; animation-range: entry 20% cover 45%; }
    .rp-fig .rp-growx { transform-box: fill-box; transform-origin: left; animation: rp-growx linear both; animation-timeline: --rp-fig; animation-range: entry 20% cover 45%; }
  }
}
/* reveal by motion only: a fading figure leaves its captions below 4.5:1 for anyone (and any checker)
   who has not scrolled to it yet (axe on 2026-10-12 read the chart source line at 3.65:1 mid-fade) */
@keyframes rp-in { from { transform: translateY(22px); } to { transform: none; } }
@keyframes rp-draw { to { stroke-dashoffset: 0; } }
@keyframes rp-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rp-growx { from { transform: scaleX(0); } to { transform: none; } }

@media (max-width: 980px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-copy { position: static; }
}
@media (max-width: 700px) {
  .rp-copy p[data-copy] { font-size: 15px; }
  .rp-next { grid-template-columns: minmax(0, 1fr); }
  .rp-fig .k-chart-body { overflow-x: auto; }
  .rp-fig .k-chart-body svg { min-width: 520px; }
  .rp-fig .k-chart-body { scrollbar-width: thin; }
  .rp-fig .k-chart-foot::before { content: 'Swipe the chart sideways to see all of it.'; display: block; margin-bottom: 4px; font-weight: 700; color: var(--k-accent); }
}

/* ---------- print: clean handout ---------- */
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #fff !important; }
  #site-header, #site-footer, .ep-dock, .rp-toc, .lead-band, .hero-ctas, .st-cite-btns, .st-hero-line, .rp-next, .k-tip { display: none !important; }
  .k-hero-data, .term, .rp-dark, .k-alt, .k-dark { background: #fff !important; color: #111 !important;
    --k-surface: #fff; --k-surface-2: #fff; --k-line: #ddd; --k-text: #111; --k-dim: #444; --k-accent: #8A5B00; --k-s2: #111; --k-s3: #888; --k-good: #1B7A3D; --k-bad: #A8332E; --k-flat-bg: #f2f2f2; }
  .k-hero-data h1, .k-hero-data .k-lede, .k-hero-data .eyebrow, .k-hero-data .k-crumbs, .k-hero-side .k-asof, .rp-dark h2, .term h2 { color: #111 !important; }
  .k-hero-side .k-kpi { background: #fff !important; border-color: #ccc !important; backdrop-filter: none !important; }
  .k-hero-in { min-height: 0 !important; padding: 0 0 12px !important; display: block !important; }
  .k-hero-side { margin-top: 12px; }
  .k-sec { padding-block: 14px !important; }
  .rp-grid { display: block; }
  .rp-copy { position: static; }
  .rp-copy p[data-copy], .rp-dark .rp-copy p[data-copy] { color: #222 !important; font-size: 11pt; }
  .rp-fig, .rp-leader, .st-cite, tr { break-inside: avoid; }
  .rp-sec + .rp-sec { break-before: page; }
  .rp-fig { margin-top: 10px; }
  .rp-fig, .rp-reveal, .rp-fig .rp-draw, .rp-fig .rp-grow, .rp-fig .rp-growx { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .k-crumbs, .k-crumbs * { color: #444 !important; }
  .eyebrow, h2, h3 { break-after: avoid; }
  .k-table-wrap { overflow: visible !important; border: 0 !important; }
  .rp-table td.num { white-space: normal; }
  .rp-table th, .rp-table td { padding: 6px 7px !important; }
  .rp-table .k-table { min-width: 0; font-size: 8.5pt; }
  .rp-table th { font-size: 7pt; letter-spacing: .04em; white-space: normal; }
  .st-cite { background: #fff !important; color: #111 !important; border: 1px solid #ccc; }
  .st-cite p { color: #111 !important; }
  a { color: inherit !important; text-decoration: none !important; }
}