/* map.css — the board's map view.
 *
 * Loaded after numbers.css and before client-first.css, which is where
 * it sits in the cascade: it is a view of the board, like the numbers
 * are, and the utility layer still wins over it.
 *
 * THE COLOUR STEPS ARE CLASSES, NEVER INLINE STYLES. The policy is
 * `style-src 'self'` with no 'unsafe-inline' and board.js already states
 * the rule — "Class names, not colours: a style attribute in markup this
 * script writes is exactly what style-src-attr refuses." The scale
 * values themselves live in tokens.css, declared once for every palette,
 * the same way the status colours are.
 *
 * This file names no colour of its own. Every value is a token.
 */

/* The active scale, chosen by which view is on. One indirection so the
   step rules below are written once rather than fifteen times. */
#map-stage[data-view="volume"]{
  --s1:var(--map-vol-1); --s2:var(--map-vol-2); --s3:var(--map-vol-3);
  --s4:var(--map-vol-4); --s5:var(--map-vol-5);
}
#map-stage[data-view="severity"]{
  --s1:var(--map-sev-1); --s2:var(--map-sev-2); --s3:var(--map-sev-3);
  --s4:var(--map-sev-4); --s5:var(--map-sev-5);
}
#map-stage[data-view="outcome"]{
  --s1:var(--map-out-1); --s2:var(--map-out-2); --s3:var(--map-out-3);
  --s4:var(--map-out-4); --s5:var(--map-out-5);
}

/* LEAFLET'S Z-INDEXES OUTRANK EVERYTHING: its panes are 400-700 and its
   control corners 1000, against the site bar's. The fix is not a bigger
   number on the bar, which is a race nobody wins — the map gets its own
   stacking context, so every z-index inside it is measured against the
   map. */
#map-stage{position:relative;z-index:0}

/* The lower 48 is about 1.6:1, so a much taller panel is white space
   above and below it. */
#map-canvas{height:460px;background:var(--card);border-radius:var(--radius-sm)}
@media (max-width:620px){#map-canvas{height:380px}}
.leaflet-container{background:var(--card);font-family:var(--sans);outline:none}
.leaflet-control-zoom a{font-family:var(--cond);color:var(--ink)}

/* A STEP CLASS MUST OUT-SPECIFY THE BASE CLASS, or `.map-s3` loses to
   `.map-area` at equal specificity and every area renders empty while
   carrying the right class. Leaflet writes `fill` as a presentation
   ATTRIBUTE, which any CSS rule beats — that is what lets the scale live
   in CSS at all. */
.map-area{fill:var(--map-nodata);stroke:var(--card);stroke-width:1;cursor:pointer}
.map-area.map-s1{fill:var(--s1)}
.map-area.map-s2{fill:var(--s2)}
.map-area.map-s3{fill:var(--s3)}
.map-area.map-s4{fill:var(--s4)}
.map-area.map-s5{fill:var(--s5)}
.map-area.map-below{fill:url(#map-hatch)}
.map-area.map-sel{stroke:var(--ink);stroke-width:3.5}
/* The marker an area too small to tap gets, and the class that takes it
   away once its own shape is big enough to stand for itself. */
.map-dot{stroke:var(--card);stroke-width:1.5}
.map-dot.map-dot-off{display:none}

/* ---- Alaska, Hawaii and the territories ----
   Their own panel rather than insets on the map: on one canvas those
   seven compete with Texas for room, so whatever they get is too small.
   A tile does not pretend to be geography, so "that is not where it is"
   does not apply to it. UNDER the map rather than beside it, which is a
   measurement and not a preference — the lower 48 is about 1.6:1, so
   narrowing the map to make a column costs more width than the column
   saves. */
.map-tiles-wrap{margin-top:13px;padding-top:12px;border-top:1px solid var(--rule-soft)}
.map-tiles-cap{font-family:var(--cond);font-weight:600;font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 8px}
/* Four across, not seven. At seven to a row each tile is about ninety
   pixels wide and a shape several times longer than it is tall renders
   as a hairline; you cannot fix a long island by making its box taller. */
.map-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
@media (max-width:760px){.map-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:380px){.map-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.map-tile{display:flex;flex-direction:column;align-items:center;gap:1px;
  background:var(--card);border:1px solid var(--rule-soft);border-radius:var(--radius-sm);
  padding:8px 8px 6px;cursor:pointer;min-width:0}
.map-tile:hover{border-color:var(--ink)}
.map-tile.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.map-tile .shape{display:flex;align-items:center;justify-content:center;
  width:100%;height:66px;margin-bottom:4px}
.map-tile svg{display:block;width:100%;height:100%}
/* A stroke, so an island that really is long and thin still reads as a
   mark rather than a hairline. */
.map-tile svg path{stroke:var(--card);stroke-width:1.2;vector-effect:non-scaling-stroke}
.map-tile .nm{font-family:var(--cond);font-weight:600;font-size:11px;
  color:var(--ink);line-height:1.25;text-align:center}
.map-tile .ct{font-family:var(--mono);font-weight:500;font-size:15px;line-height:1.2}
.map-tile .ct.none{color:var(--muted);font-size:13px}

/* ---- legend ---- */
.map-legend{margin-top:12px;padding-top:11px;border-top:1px solid var(--rule-soft)}
.map-ramp{display:flex;max-width:340px}
.map-ramp i{flex:1;height:16px;border:1px solid var(--rule-soft)}
.map-ramp i:nth-child(1){background:var(--s1)}
.map-ramp i:nth-child(2){background:var(--s2)}
.map-ramp i:nth-child(3){background:var(--s3)}
.map-ramp i:nth-child(4){background:var(--s4)}
.map-ramp i:nth-child(5){background:var(--s5)}
.map-ramp-ends{display:flex;justify-content:space-between;max-width:340px;
  font-size:11.5px;color:var(--muted);margin-top:4px;font-family:var(--mono)}
.map-keys{display:flex;flex-wrap:wrap;gap:5px 18px;margin-top:11px;font-size:12.5px;color:var(--muted)}
.map-keys span{display:flex;align-items:center;gap:6px}
.map-keys b{width:14px;height:14px;border:1px solid var(--rule-soft);display:block;flex:none}
.map-keys .k-none{background:var(--map-nodata)}
.map-keys .k-below{background:repeating-linear-gradient(45deg,
  var(--map-nodata),var(--map-nodata) 3px,var(--rule) 3px,var(--rule) 4.5px)}
.map-hint{font-size:11.5px;color:var(--muted);margin:9px 0 0;font-style:italic}

/* ---- layout ---- */
.map-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media (max-width:920px){.map-cols{grid-template-columns:minmax(0,1fr)}}

/* ---- readout ---- */
.map-code{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:12px}
.map-big{font-family:var(--cond);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.02em}
.map-big small{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--muted);
  letter-spacing:0;display:block;margin-top:3px}
.map-bars{margin-top:14px}
.map-bar{display:grid;grid-template-columns:66px 1fr 26px;gap:8px;align-items:center;
  font-size:12.5px;margin-bottom:5px}
.map-bar u{text-decoration:none;color:var(--muted)}
.map-bar div{height:10px;background:var(--paper);border:1px solid var(--rule-soft);overflow:hidden}
.map-bar div>i{display:block;height:100%;background:var(--muted)}
.map-bar b{text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:500}
.map-bar.pos div>i{background:var(--map-out-1)}
.map-bar.neg div>i{background:var(--map-out-5)}
.map-warn{margin-top:13px;padding:9px 11px;background:var(--card);
  border:2px solid var(--act);border-radius:var(--radius-sm);font-size:12.5px;line-height:1.45}
.map-note{font-size:12.5px;color:var(--muted);margin:13px 0 0;padding-top:11px;
  border-top:1px solid var(--rule-soft);line-height:1.45}

/* ---- figures ---- */
.map-figures dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0;font-size:13px}
.map-figures dt{color:var(--muted)}
.map-figures dd{margin:0;font-family:var(--mono);font-weight:500;font-size:13px;text-align:right}
.map-figures hr{border:0;border-top:1px solid var(--rule-soft);margin:9px 0;grid-column:1/-1}

/* ---- the table behind the map ---- */
.map-table-scroll{overflow-x:auto}
.map-table-scroll table{border-collapse:collapse;width:100%;font-size:13px}
.map-table-scroll th,.map-table-scroll td{text-align:left;padding:6px 10px;
  border-bottom:1px solid var(--rule-soft);white-space:nowrap}
.map-table-scroll th{font-family:var(--cond);font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);border-bottom:2px solid var(--rule)}
.map-table-scroll td.n,.map-table-scroll th.n{text-align:right;font-family:var(--mono)}
.map-table-scroll tr.below td{color:var(--muted)}