/* Drowning data dashboard (owner: platform:data). Scoped under .viz / .data-*; uses the core tokens.
   Chart palette (validated with the dataviz validator on white, adjacent and first-three all-pairs):
   categorical #00879C, #D9573E, #4B57B8, #AD7B00, #B4447F in that fixed order; context gray #A9B6BA;
   ordinal map ramp #7CC0CA, #3E9DAB, #1A7A87, #0B4A54. */
:root {
  --viz-1: #00879C;
  --viz-2: #D9573E;
  --viz-3: #4B57B8;
  --viz-4: #AD7B00;
  --viz-5: #B4447F;
  --viz-ctx: #A9B6BA;
  --viz-grid: #E4ECEE;
  --viz-axis: #B9CFD4;
  --viz-seq-1: #7CC0CA;
  --viz-seq-2: #3E9DAB;
  --viz-seq-3: #1A7A87;
  --viz-seq-4: #0B4A54;
  --viz-seq-na: #EEF1F2;
}

/* ---- Page parts ---------------------------------------------------------------------------------------------- */
.data-page { min-width: 0; }
.data-page > * { min-width: 0; }
.data-subnav { margin: 0 0 28px; }
.data-subnav .pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.data-subnav .pill[aria-current="page"] { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.data-subnav .pill[aria-current="page"] .icon { color: #fff; }
.data-section { margin: 48px 0 0; }
.data-section > h2 { margin-bottom: .5rem; }
.data-lead { color: var(--ink-2); max-width: 70ch; margin: 0 0 1.25rem; }

.data-kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); list-style: none; padding: 0; margin: 0 0 28px; }
.data-kpi { padding: 16px 18px 14px; border: 1px solid var(--line); border-top: 4px solid var(--teal-500); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.data-kpi p { margin: 0; }
.data-kpi-label { font: 800 .92rem/1.3 var(--display); color: var(--ink-2); }
.data-kpi-value { margin: .3rem 0 .2rem !important; font: 800 clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem)/1.05 var(--sans); color: var(--ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.data-kpi-note { font-size: .92rem; color: var(--ink-3); }
.data-kpi-src { margin-top: .45rem !important; font-size: .85rem; }

.data-takeaways { margin: 0 0 12px; }
.data-takeaways li { margin-bottom: .55rem; }
.data-cite { font-size: .9em; color: var(--ink-3); white-space: normal; }

.data-quote { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--teal-500); background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.data-quote p { margin: 0; }
.data-quote footer { margin-top: .5rem; font-size: .92rem; color: var(--ink-3); }
.data-quotes { list-style: none; padding: 0; margin: 0; }

.data-method { margin: 56px 0 0; padding: 22px 22px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.data-method h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.45rem; margin-bottom: 1rem; }
.data-method dl { margin: 0 0 1rem; display: grid; gap: 14px; }
.data-method dt { font: 800 1rem/1.3 var(--display); color: var(--ink); }
.data-method dd { margin: .25rem 0 0; color: var(--ink-2); max-width: 78ch; }

.data-today { margin: 48px 0 0; }
.data-today h2 { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.data-today-list { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.data-today-list li { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.data-today-list a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.data-today-list a:hover strong { text-decoration: underline; }
.data-today-list p { margin: .3rem 0 0; color: var(--ink-3); font-size: .95rem; }

.data-cards { list-style: none; padding: 0; }
.data-downloads { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.data-dl-group h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.data-dl-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .95rem; }
.data-dl-group a { display: inline-flex; gap: .35rem; align-items: baseline; }
.data-dl-group .icon { position: relative; top: 3px; }
.data-dl-group li > .muted { display: block; padding-left: 22px; font-size: .88rem; }
.data-more { margin: 1.5rem 0 0; }
.data-rule { padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; max-width: 78ch; }
.data-rule-status { font-size: 1.1rem; }
.data-state-list { margin-top: 0; }

/* ---- Chart figure -------------------------------------------------------------------------------------------- */
.viz { margin: 0 0 28px; padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-width: 0; }
.viz-cap { margin: 0 0 4px; }
.viz-title { font: 800 1.15rem/1.3 var(--display); color: var(--ink); margin: 0; }
.viz-sub { margin: .25rem 0 0; color: var(--ink-3); font-size: .95rem; }
.viz-note { margin: 10px 0 0; color: var(--ink-3); font-size: .92rem; max-width: 80ch; }
.viz-source { margin: 10px 0 0; font-size: .9rem; color: var(--ink-3); }
.viz-actions { margin: 12px 0 0; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 12px 0 0; font-size: .92rem; color: var(--ink-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.viz-key { flex: none; }
.viz-table { margin-top: 12px; }
.viz-table > summary { cursor: pointer; font: 800 .95rem/1.2 var(--display); color: var(--teal-700); padding: 8px 0; width: max-content; max-width: 100%; }
.viz-table > summary:hover { text-decoration: underline; }
.viz-tableonly .table-wrap { margin-top: 12px; }

/* Plot areas. The svg is the plot; labels hang into the padding (overflow visible). */
.viz-plot { position: relative; margin-top: 10px; }
.viz-plot-xy { padding: 18px 22px 30px 46px; }
.viz-plot-bar-above { padding: 6px 64px 6px 0; }
.viz-plot-bar-above.viz-plot-stack100 { padding-right: 6px; }
.viz-plot-bar-left { padding: 6px 64px 6px var(--viz-label-w, 136px); }
.viz-plot-tiles { max-width: 560px; padding: 4px 0; }
.viz-svg { display: block; width: 100%; overflow: visible; font-family: var(--sans); }
.viz-svg-tiles { height: auto; aspect-ratio: 11 / 8; }
.viz-svg text { font-size: 12px; fill: var(--ink-3); }
.viz-svg .viz-tick { font-variant-numeric: tabular-nums; }
.viz-svg .viz-label { font-size: 13px; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 7px; stroke-linejoin: round; }
.viz-svg .viz-value { font-size: 12.5px; font-weight: 700; fill: var(--ink-2); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.viz-svg .viz-flagtext { font-style: italic; fill: var(--ink-3); paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.viz-svg .viz-ref-label { font-size: 12px; font-weight: 700; fill: var(--ink-2); }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-base { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz-ref { stroke: var(--ink-2); stroke-width: 1.5; }
.viz-gap { stroke: #fff; stroke-width: 2; }
.viz-dot { stroke: #fff; stroke-width: 2; }
.viz-c1 { color: var(--viz-1); }
.viz-c2 { color: var(--viz-2); }
.viz-c3 { color: var(--viz-3); }
.viz-c4 { color: var(--viz-4); }
.viz-c5 { color: var(--viz-5); }
.viz-cctx { color: var(--viz-ctx); }
.viz-hit { fill: transparent; pointer-events: all; }
.viz-cross { stroke: var(--ink-3); stroke-width: 1; opacity: 0; pointer-events: none; }
.viz-cross.is-on { opacity: .6; }
.viz-focus circle { stroke: #fff; stroke-width: 2; pointer-events: none; }
.viz-mark { transition: opacity .12s; }
.viz-mark.is-active { opacity: .78; }

/* Tile map (CDC bands as a one-hue ordinal ramp; text picks ink or white by fill) */
.viz-tile rect { stroke: none; }
.viz-svg.viz-svg-tiles text { font-size: .32px; font-weight: 800; pointer-events: none; }
.viz-svg.viz-svg-tiles .is-highlight text { font-size: .38px; }
.viz-seq-1 rect, rect.viz-seq-1 { fill: var(--viz-seq-1); }
.viz-seq-2 rect, rect.viz-seq-2 { fill: var(--viz-seq-2); }
.viz-seq-3 rect, rect.viz-seq-3 { fill: var(--viz-seq-3); }
.viz-seq-4 rect, rect.viz-seq-4 { fill: var(--viz-seq-4); }
.viz-seq-na rect, rect.viz-seq-na { fill: var(--viz-seq-na); stroke: var(--viz-axis); stroke-width: .03; }
.viz-svg .viz-seq-1 text, .viz-svg .viz-seq-2 text, .viz-svg .viz-seq-na text { fill: var(--ink); }
.viz-svg .viz-seq-3 text, .viz-svg .viz-seq-4 text { fill: #fff; }
.viz-tile .viz-tile-ring { fill: none !important; stroke: var(--ink); stroke-width: .07; }
.viz-tile.is-highlight rect:not(.viz-tile-ring) { stroke: #fff; stroke-width: .05; }
.viz-tile.is-active rect:not(.viz-tile-ring) { stroke: var(--sun); stroke-width: .07; }
.viz-tile-key { stroke: none; }
.viz-legend-seq { gap: 6px 14px; }

/* Small screens: thin out the x-axis labels marked as alternates. */
@media (max-width: 520px) {
  .viz { padding: 14px 12px 12px; }
  .viz-svg .is-alt { display: none; }
  .viz-plot-xy { padding: 18px 16px 30px 40px; }
  .viz-plot-bar-left { padding-left: min(var(--viz-label-w, 136px), 120px); padding-right: 52px; }
  .viz-plot-bar-left .viz-label { font-size: 12px; }
}

/* Tooltip (public/data/data.js). Values lead, labels follow; line keys, not boxes. */
.viz-tip { position: absolute; z-index: 5; left: 0; top: 0; min-width: 190px; max-width: min(300px, 92%); padding: 9px 11px; background: var(--ink); color: #fff; border-radius: 10px; box-shadow: var(--shadow); font-size: .88rem; line-height: 1.35; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity .1s; }
.viz-tip.is-on { opacity: 1; }
.viz-tip-title { margin: 0 0 4px; font: 800 .9rem/1.2 var(--display); color: #fff; }
.viz-tip-row { display: flex; align-items: baseline; gap: 7px; margin: 2px 0 0; }
.viz-tip-key { flex: none; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: currentColor; transform: translateY(-3px); }
.viz-tip-key.viz-c1 { color: #4FC3D4; }
.viz-tip-key.viz-c2 { color: #F08B73; }
.viz-tip-key.viz-c3 { color: #9AA4EA; }
.viz-tip-key.viz-c4 { color: #E3B54A; }
.viz-tip-key.viz-c5 { color: #E58DBA; }
.viz-tip-key.viz-cctx { color: #C9D2D5; }
.viz-tip-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.viz-tip-name { color: #D5DCDF; }
.viz-svg:focus-visible { outline: 3px solid var(--teal-700); outline-offset: 6px; border-radius: 4px; }

/* Data tables */
.data-table caption { caption-side: top; text-align: left; padding: 10px 12px; font-weight: 700; color: var(--ink-2); background: #fff; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table th.num { white-space: normal; }
.data-table .is-flag { font-style: italic; color: var(--ink-3); white-space: normal; }
.data-table td, .data-table th { font-size: .93rem; }
.data-table tbody tr:nth-child(even) { background: #FAFCFC; }
.data-filter { max-width: 360px; margin: 12px 0 0; }

/* The state card on /water-safety/<state> */
.data-card { margin: 2.5rem 0 0; padding: 20px 20px 16px; border: 1px solid var(--line); border-left: 5px solid var(--teal-500); border-radius: var(--radius); background: var(--bg-soft); }
.data-card > h2 { margin: 0 0 .4rem; }
.data-card-lead { color: var(--ink-2); }
.data-card .data-kpis { margin-bottom: 16px; }
.data-card .viz { margin-bottom: 12px; }
.data-card-rule { font-size: .97rem; }

@media (prefers-reduced-motion: reduce) {
  .viz-tip, .viz-mark { transition: none; }
}
@media (forced-colors: active) {
  .viz-mark, .viz-line, .viz-dot, .viz-tile rect { forced-color-adjust: none; }
}
@media print {
  .viz-tip, .viz-actions, .data-subnav, .data-filter { display: none !important; }
  .viz, .data-kpi, .data-method { break-inside: avoid; box-shadow: none; }
}