:root {
  --ink:#13233a; --muted:#647184; --line:#d9e0e8; --paper:#f6f8fb;
  --blue:#0b57d0; --navy:#092f62;
  --delta-increase:#9a6700; --delta-decrease:#0f766e; --delta-neutral:#647184;
  --font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --card:#f4f7fb;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.5 var(--font-sans); }
.num,.metric strong,code,.checksum-value { font-variant-numeric:tabular-nums; }

.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; background:#fff; padding:.7rem; z-index:5; }

header {
  height:76px; padding:0 max(24px,calc((100vw - 1180px)/2));
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border-bottom:1px solid var(--line);
}
.brand { display:flex; gap:12px; align-items:center; }
.brand strong { display:block; font-size:17px; }
.brand small,.freshness,.panel label,.page-status,.chart-note,.delta-legend { color:var(--muted); }
.brand small { display:block; }
.freshness { font-size:13px; }
.mark {
  display:grid; place-items:center; width:40px; height:40px;
  background:var(--navy); color:#fff; border-radius:10px; font:700 22px Georgia,serif;
}

main { max-width:1180px; margin:auto; padding:58px 24px 70px; }
.intro { display:grid; grid-template-columns:1fr 290px; gap:40px; align-items:end; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.13em; }
.intro h1 { margin:0; font:700 clamp(36px,5vw,60px)/1.06 Georgia,serif; letter-spacing:-.035em; }
.intro > div > p:last-child { max-width:650px; color:var(--muted); font-size:18px; }
.source { padding:22px; background:var(--navy); color:#fff; border-radius:14px; }
.source span,.source small { display:block; opacity:.72; font-size:11px; letter-spacing:.08em; }
.source strong { display:block; margin:6px 0; font-size:18px; }

.summary { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:42px 0; }
.metric,.panel { background:#fff; border:1px solid var(--line); border-radius:14px; }
.metric { padding:20px; }
.metric span { display:block; color:var(--muted); font-size:12px; }
.metric strong { display:block; margin-top:8px; font:700 28px var(--font-sans); }
.panel { padding:26px; margin-top:18px; }
.panel-head { display:flex; justify-content:space-between; gap:20px; align-items:end; }
.panel h2 { margin:0; font:700 28px Georgia,serif; }
.panel label { font-size:12px; }

input {
  display:block; width:270px; margin-top:6px; border:1px solid #b8c2cf;
  border-radius:8px; padding:10px 12px; font:inherit;
}
.controls { display:flex; gap:8px; margin:24px 0 14px; }
.controls button,.pagination button,.checksum-copy {
  border:1px solid var(--line); background:#fff; cursor:pointer; font:inherit;
}
.controls button {
  border-radius:20px; padding:8px 13px; min-height:44px; color:var(--muted);
}
.controls button.active { background:var(--navy); color:#fff; border-color:var(--navy); }

.delta-increase { color:var(--delta-increase); }
.delta-decrease { color:var(--delta-decrease); }
.delta-neutral { color:var(--delta-neutral); }
.delta-legend { margin:0 0 14px; font-size:12px; }
.delta-legend .delta-sep { margin:0 8px; color:var(--line); }

.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:760px; }
th,td { padding:14px 10px; border-bottom:1px solid #e8edf2; text-align:right; }
th { font-size:11px; color:var(--muted); letter-spacing:.07em; text-transform:uppercase; }
th.rank,td.rank { width:3.25rem; padding-inline:8px; text-align:center; }
th:nth-child(2),td.agency { text-align:left; }
tbody tr:hover { background:var(--card); }
tbody tr { cursor:default; }
.agency strong,.agency small { display:block; }
.agency small { color:var(--muted); }
.empty { text-align:center; color:var(--muted); padding:28px 10px; }

code,.checksum-value {
  font:11px/1.4 var(--mono); color:var(--muted); white-space:nowrap;
}
.checksum-wrap { display:inline-flex; align-items:center; gap:6px; max-width:100%; }
.checksum-copy {
  flex:0 0 auto; min-height:32px; padding:4px 8px; border-radius:6px;
  color:var(--ink); font-size:11px; font-family:var(--font-sans);
}
.checksum-copy:hover,.pagination button:hover:not(:disabled) { background:var(--card); }

.pagination-wrap {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:12px 20px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.page-status { margin:0; flex:1 1 220px; font-size:13px; }
.pagination { display:flex; align-items:center; gap:10px; }
.pagination button {
  min-height:44px; min-width:44px; padding:10px 16px; border-radius:8px; color:var(--ink);
}
.pagination button:disabled { opacity:.45; cursor:not-allowed; background:#f0f3f7; color:var(--muted); }
.page-indicator { min-width:6.5rem; text-align:center; font-size:13px; color:var(--ink); }

#chart-figure { margin:0; }
.chart-subtitle { margin:6px 0 0; color:var(--muted); font-size:15px; }
.chart-summary {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  max-width:760px; margin:18px auto 0;
}
.chart-summary .metric { padding:12px 14px; background:var(--card); }
.chart-summary .metric span { font-size:11px; letter-spacing:.04em; }
.chart-summary .metric strong { margin-top:6px; font-size:18px; font-weight:700; }
.chart,.chart-zero,.chart-empty { width:100%; max-width:760px; margin-inline:auto; }
.chart { margin-top:12px; }
.chart-svg { width:100%; height:auto; display:block; margin-inline:auto; }
.chart-baseline { stroke:var(--line); stroke-width:1; }
.chart-svg .chart-bar { fill:#0b57d0; }
.chart-svg text { font-family:var(--font-sans); font-variant-numeric:tabular-nums; }
.chart-svg .chart-change.delta-increase { fill:var(--delta-increase); }
.chart-svg .chart-change.delta-decrease { fill:var(--delta-decrease); }
.chart-svg .chart-change.delta-neutral { fill:var(--delta-neutral); }
.chart-note { margin-top:24px; font-size:13px; }
.chart-empty { margin-top:28px; text-align:center; }
.chart-zero {
  display:flex; align-items:center; justify-content:center; min-height:190px;
  margin-top:28px; font-size:14px; text-align:center; padding:0 1rem;
}

footer { border-top:1px solid var(--line); padding:25px; text-align:center; color:var(--muted); font-size:13px; }
footer a { color:var(--blue); }

:focus-visible { outline:3px solid var(--blue); outline-offset:2px; border-radius:3px; }
button:focus-visible,.agency-btn:focus-visible,.checksum-copy:focus-visible { outline-color:var(--navy); }

.agency-btn {
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:0; cursor:pointer; font:inherit; color:inherit;
}
.agency-btn:hover strong { color:var(--blue); }
.agency-btn:focus-visible { border-radius:4px; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:760px) {
  .intro { grid-template-columns:1fr; }
  .summary { grid-template-columns:1fr 1fr; }
  .source,.freshness { display:none; }
  .panel-head { display:block; }
  input { width:100%; }
  .controls { overflow:auto; }
  main { padding-top:36px; }
  .pagination-wrap { justify-content:center; }
  .page-status { flex-basis:100%; text-align:center; }
  .chart-summary { grid-template-columns:1fr; }
}
