@import url("atlas.css");

/* atlas.css locks body/main to a fixed-height, non-scrolling flex shell for the
   two-pane atlas layout. This page stacks a map above a chart and needs to
   scroll normally, so relax those constraints here. */
html,body{height:auto;min-height:100%}
body{overflow:auto;display:block}
main{display:block;flex:none}

.trends-section{max-width:1100px;margin:0 auto;padding:16px;border-top:1px solid var(--rule,#ddd)}
.trends-section h2{margin-top:0;font-family:var(--serif);font-weight:500}

/* Side by side by default: the county-level disease trends and the hexagon-resolution
   explorer are two lenses on the same underlying data, easiest to compare when visible
   at once rather than requiring a scroll between them. Collapses to a single stacked
   column below ~1100px per section (~2260px total), where two full-width maps can no
   longer fit side by side without each becoming too narrow to read. */
.trends-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;
  max-width:2260px;margin:0 auto;border-top:1px solid var(--rule,#ddd)}
.trends-cols .trends-section{max-width:none;margin:0;border-top:0}
.trends-cols .trends-section#hexSection{border-left:1px solid var(--rule,#ddd)}
@media (max-width:1180px){
  .trends-cols{display:block;max-width:1100px}
  .trends-cols .trends-section{border-top:1px solid var(--rule,#ddd)}
  .trends-cols .trends-section#hexSection{border-left:0}
}

.range-controls{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;margin:8px 0 14px;font-size:.85rem;color:var(--ink-2)}
.range-controls label{display:flex;align-items:center;gap:4px;cursor:pointer}
.range-controls select{font:inherit;font-size:.85rem;padding:6px 10px;border-radius:8px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.range-controls input[type=number]{width:80px;font:inherit;font-size:.85rem;padding:6px 8px;
  border-radius:8px;border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.range-controls input:disabled,.range-controls button:disabled{opacity:.4;cursor:not-allowed}
#playBtn{min-width:80px}

#diseaseMap{border-radius:10px;overflow:hidden;border:1px solid var(--rule)}

.snapshot-note{margin:10px 0;padding:10px 12px;border-radius:8px;
  background:var(--sunk);border:1px solid var(--rule);color:var(--ink-2);font-size:.85rem;line-height:1.5}
.snapshot-note b{color:var(--ink)}
/* Same warning treatment as the main atlas's #metricWarn (a step above routine
   without the full-alarm loaderr styling) — a thin-coverage single year, not a
   failed data load. */
.snapshot-note.warn{background:transparent;border-color:#c14e28;color:#c14e28;font-weight:500}

#rangeChart{width:100%;height:180px;margin-top:12px;background:var(--sunk);border-radius:8px}

/* Single-year controls: the year slider + its "Year: XXXX" readout, which is the only
   thing on screen that says which year the map is painting (including during playback). */
#yearSingleWrap,#yearRangeWrap{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
#yearSingleWrap[hidden],#yearRangeWrap[hidden]{display:none}
#yearSingle{width:180px}
.year-readout{font-family:var(--mono);font-size:.78rem;color:var(--ink);
  background:var(--sunk);border:1px solid var(--rule);border-radius:6px;padding:3px 8px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* Key for #rangeChart. Colours here must stay in step with drawChart()'s stroke
   colours in trends.js (#2a78d6 observed, #8f3818 modeled). */
.chart-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;
  font-size:.78rem;color:var(--ink-2)}
.chart-key[hidden]{display:none}
.kitem{display:flex;align-items:center;gap:6px}
.kitem b{font-weight:600;color:var(--ink);letter-spacing:.02em}
.kline{width:24px;height:0;border-top:2px solid currentColor;flex:none}
.kline.obs{color:#2a78d6}
.kline.mdl{color:#8f3818;border-top-style:dashed}
.kdot{width:9px;height:9px;border-radius:50%;background:#8f3818;
  box-shadow:0 0 0 1.5px var(--surface);flex:none}
#chartModelNote{margin-top:6px}
#chartModelNote[hidden]{display:none}

#csvBtn{margin-top:10px}
.legend-row{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.78rem;color:var(--muted)}
.legend-swatches{display:flex}
.legend-swatches span{width:20px;height:12px}

/* Hex map: wraps #hexMap so the click-readout (reusing atlas.css's .map-readout/
   #roName/.ro-close, imported above) can float over its bottom-left corner, matching
   the main atlas's county click behavior exactly. */
.hexmap-wrap{position:relative}

/* .lgrow/.sw come from atlas.css's aside legend (a vertical list there); here the
   swatches sit in a horizontal, wrapping strip under the map instead, so override the
   row itself to size to its content rather than stretch full-width. */
.hex-legend{flex-wrap:wrap;row-gap:6px}
.hex-legend .lgrow{display:inline-flex;margin-bottom:0;flex:none}