/* /reports/: data reports generated by tools/site/state-report.ts. Charts are inline SVG; their colors are the four
   categorical slots below (validated on the paper surface #faf6ee; three sit under 3:1, so every chart has a table). */
.sr-main { --sr-c1: #2a78d6; --sr-c2: #eb6834; --sr-c3: #1baf7a; --sr-c4: #eda100; }
.sr-c1 { fill: var(--sr-c1); background: var(--sr-c1); }
.sr-c2 { fill: var(--sr-c2); background: var(--sr-c2); }
.sr-c3 { fill: var(--sr-c3); background: var(--sr-c3); }
.sr-c4 { fill: var(--sr-c4); background: var(--sr-c4); }

.sr-section .section-head { max-width: 78ch; }
.sr-section .section-head p { max-width: 78ch; }
.sr-prose { max-width: 78ch; }
.sr-prose p + p { margin-top: 12px; }
.sr-prose ul, .sr-prose ol { margin-top: 12px; padding-left: 20px; display: grid; gap: 10px; }
.sr-h3 { margin-top: 28px; font-size: 1.15rem; }
.sr-sub { margin-top: 10px; font-size: .92rem; color: var(--muted); max-width: 78ch; }

.sr-findings { max-width: 78ch; padding-left: 20px; display: grid; gap: 12px; font-size: 1.05rem; }
.sr-findings span[data-k] { font-weight: 700; }
.sr-jump { margin-top: 22px; font-size: .95rem; color: var(--muted); line-height: 1.4; }
.sr-jump a { display: inline-block; padding: 8px 0; }

.sr-fig { margin: 8px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); max-width: 640px; }
.sr-fig figcaption { font-weight: 700; color: var(--ink); }
.sr-chart-wrap { margin-top: 10px; }
.sr-chart { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; }
.sr-lab { font-size: 14px; fill: var(--paper-ink); }
.sr-val { font-size: 13px; fill: var(--paper-muted); font-variant-numeric: tabular-nums; }
.sr-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--muted); }
.sr-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sr-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

.sr-table-wrap { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow-x: auto; }
.sr-table { width: 100%; }
.sr-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-table th[scope="row"] { white-space: normal; font-weight: 600; }
.sr-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-table td b { display: block; }
.sr-quote { display: block; margin-top: 4px; font-size: .84rem; color: var(--muted); }
.sr-none { font-size: .88rem; color: var(--muted); }
.sr-tally { margin-top: 14px; font-size: .95rem; display: grid; gap: 6px; }
.sr-sources span { color: var(--muted); font-size: .9rem; }
.sr-hub { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 78ch; }
.sr-hub a { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); text-decoration: none; }
.sr-hub span { color: var(--muted); }

/* Phones: each table row becomes a stacked card with labelled fields. */
@media (max-width: 760px) {
  .sr-table, .sr-table tbody, .sr-table tr, .sr-table td, .sr-table th { display: block; width: 100%; }
  .sr-table thead { display: none; }
  .sr-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .sr-table tbody tr:last-child { border-bottom: 0; }
  .sr-table td, .sr-table th { border: 0; padding: 4px 0; }
  .sr-table td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
  .sr-table td.num { white-space: normal; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .sr-table td.num::before { margin-bottom: 0; }
  .sr-fig { padding: 12px; }
}
/* Tap targets: links in tables and lists get at least 40px of height on touch screens. */
@media (pointer: coarse) {
  .sr-hero .crumbs a, .sr-table th[scope="row"] a, .sr-sources a, .sr-jump a, .sr-prose li a { display: inline-block; min-height: 40px; padding: 9px 0; line-height: 1.35; }
}