:root {
  color-scheme: light;
  --teal: #123f43;
  --ink: #17363a;
  --muted: #60797c;
  --line: #d8e5e3;
  --wash: #f3f7f6;
  --orange: #ed6a32;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--wash); font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.data-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; padding: .8rem clamp(1rem,4vw,3rem); background: var(--teal); color: #fff; }
.brand { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.brand img { border-radius: 12px; }
.brand span { display: grid; }
.brand small { color: #cbe2df; }
.data-header nav { display: flex; gap: 1rem; }
.data-header nav a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
main { width: min(1280px,100%); margin: auto; padding: clamp(1rem,3vw,2.3rem); }
.intro { margin-bottom: 1rem; }
.eyebrow { display: block; color: var(--orange); font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: .2rem 0 .5rem; font-size: clamp(1.8rem,4vw,2.7rem); }
h2 { margin: .1rem 0 .7rem; font-size: clamp(1.2rem,2.5vw,1.55rem); }
.intro p { max-width: 65rem; line-height: 1.5; }
.status { min-height: 1.5rem; color: var(--muted); }
.panel { margin-bottom: 1rem; padding: clamp(1rem,3vw,1.5rem); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 10px 32px rgba(18,63,67,.055); }
#dataFilters { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; align-items: end; }
label { display: grid; gap: .35rem; min-width: 0; color: var(--muted); font-size: .78rem; font-weight: 750; }
select,input,button { min-height: 44px; width: 100%; padding: .55rem .7rem; border: 1px solid #9eafae; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
#purposeField { grid-column: span 2; }
button { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 750; cursor: pointer; }
button:disabled,select:disabled { opacity: .55; cursor: default; }
.fine-print { margin-bottom: 0; color: var(--muted); font-size: .84rem; }
.summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .7rem; margin-bottom: .9rem; }
.summary article { display: grid; gap: .2rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.summary span { color: var(--muted); font-size: .78rem; }
.summary strong { font-size: 1.4rem; }
.coverage { margin: .3rem 0 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: #eaf4f1; color: var(--muted); font-size: .83rem; }
.coverage p { margin: .3rem 0; }
.family-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.family-heading label { min-width: min(17rem,100%); }
.empty { padding: .8rem 1rem; border-radius: 10px; background: #f3f7f6; color: var(--muted); }
.metric-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin: .8rem 0; }
.metric-summary article { display: grid; gap: .15rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.metric-summary span { color: var(--muted); font-size: .77rem; }
.metric-summary strong { font-size: 1.2rem; }
.chart-host { min-height: 215px; margin: .8rem 0; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfd; }
.chart-host svg { display: block; width: 100%; height: 215px; }
.chart-host p { margin: 0; padding: 1rem; color: var(--muted); }
.chart-grid { stroke: #dce8e6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-dot { fill: var(--teal); }
.chart-label { fill: var(--muted); font-size: 11px; }
.comparison { margin: .9rem 0 1.2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: #f8fbfa; }
.comparison h3 { margin: 0 0 .3rem; font-size: 1rem; }
.comparison p { margin: 0 0 .6rem; color: var(--muted); font-size: .83rem; }
.comparison table { min-width: 820px; }
.table-wrap { overflow: auto; }
table { width: 100%; min-width: 690px; border-collapse: collapse; }
caption { text-align: left; padding: .5rem 0; color: var(--muted); font-size: .82rem; }
th,td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); text-align: left; font-size: .83rem; }
th { color: var(--muted); }
:focus-visible { outline: 3px solid #73b9ff; outline-offset: 2px; }
[hidden] { display: none !important; }
@media (max-width: 900px) { #dataFilters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { #dataFilters,.summary,.metric-summary { grid-template-columns: 1fr; } #purposeField { grid-column: auto; } .family-heading { display: grid; } .family-heading label { width: 100%; } }