/* The States pages (public-worker/src/pages/states.js): the tile map and table at /states, a jurisdiction's page at
 * /states/<ST> and the Compare page at /compare. On the hub's tokens (tokens.css) and the shared classes of site.css.
 * Every class here starts with st-, or is a part of a chart (ln, end, hit, c-*) or one of the map's five shades (lvl-*).
 * No page carries an inline style (the CSP allows none): what is not a number in an SVG attribute is a class below. */

:root {
  /* Chart fills. The hub's validated chart steps (database-worker/public/app/tdi-chart.css): --anti and --pro are tuned
     for text and fail as fills in the light theme. Anti and pro keep their meaning (red, teal); the dark value is
     declared first and the light-dark() pair after it, as tokens.css does. Checked with the data-viz validator, both
     themes, against the page's panel: ΔE 12.8 / 11.8 under colour-blind simulation, 27.8 / 27.7 with normal vision. */
  --st-anti: #d95544;  --st-anti: light-dark(#ba3728, #d95544);
  --st-pro:  #1fa89c;  --st-pro:  light-dark(#01948a, #1fa89c);
  --st-unc:  #646360;  --st-unc:  light-dark(#9f9e9b, #646360);
  --st-gold: #c18720;  --st-gold: light-dark(#c6871a, #c18720);
  /* A state's colour on the Compare page: identity only, so never red or teal. The data-viz palette's hues in an order
     that passes the validator in both themes against the panel (worst neighbours: ΔE 13.0 under colour-blind
     simulation, 19.3 with normal vision). The first four clear 3:1 on the panel; the fifth and sixth, in the light
     theme, are below it, so the key, the end labels, the tooltips and the numbers table carry the names. */
  --st-s1: #3987e5;  --st-s1: light-dark(#2a78d6, #3987e5);   /* blue */
  --st-s2: #d95926;  --st-s2: light-dark(#eb6834, #d95926);   /* orange */
  --st-s3: #9085e9;  --st-s3: light-dark(#4a3aa7, #9085e9);   /* violet */
  --st-s4: #008300;                                            /* green */
  --st-s5: #d55181;  --st-s5: light-dark(#e87ba4, #d55181);   /* magenta */
  --st-s6: #c98500;  --st-s6: light-dark(#eda100, #c98500);   /* yellow */
}

/* a filter form's long lists (the map's topic tags) must not push the page wider than a phone */
.filters .field { min-width: 0; max-width: 100%; }
.filters .field select, .filters .field input { max-width: 100%; }
/* A scrolling table clips its screen-reader-only text: .sr is position:absolute, which escapes an overflow box that is not
   itself positioned, and a "No data" cell far to the right would widen the whole page on a phone. */
.table-wrap { position: relative; }

.st-sec { margin-top: 30px; }
.st-sec > h2:first-child { margin-top: 0; }
.st-sub { margin: 18px 0 8px; font-size: 15px; color: var(--muted); }
.st-foot { margin-top: 32px; }
.st-now { margin: 4px 0 10px; }

/* ---- "on this page" ---- */
.st-jump ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-jump a { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 12px; font-size: 14px;
  color: var(--muted); text-decoration: none; background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); }
.st-jump a:hover { color: var(--text); border-color: var(--control-border); }

/* ---- the table of every jurisdiction, and the Compare page's glance table ---- */
.st-table table { min-width: 760px; }
.st-table tbody th, .st-glance tbody th { font-weight: 600; text-align: left; background: var(--panel); }
.st-table tbody th, .st-glance tbody th { position: sticky; left: 0; z-index: 1; }
.st-glance tbody th { font-weight: 500; min-width: 9.5em; }
.st-table tbody tr:last-child th, .st-glance tbody tr:last-child th { border-bottom: 0; }      /* site.css drops it on td only */
.st-sort { color: inherit; text-decoration: none; display: inline-block; }
.st-sort:hover { color: var(--text); text-decoration: underline; }
.st-table th[aria-sort="ascending"], .st-table th[aria-sort="descending"] { color: var(--text); }
.st-glance thead th a { color: inherit; }

/* ---- the tile map ----
 * Eleven columns by eight rows, arranged roughly by geography. A tile is a link; its shade is one of five (a square-root
 * scale: lvl-1 the fewest, lvl-5 the most). A tile gives its number (below 600px only in its name, its tooltip and the
 * table), so a shade is never the only way to read a value. The shade is a mix of the side's colour into the tile's own
 * ground, capped at 60% so the text on it keeps at least 4.7:1 in both themes (computed for every side, shade and
 * theme); a bar along the foot of the tile (2px to 6px) repeats the shade for anyone who cannot tell the shades apart. */
.st-mapbox { --hue: var(--st-gold); }
.st-mapbox.hue-anti { --hue: var(--st-anti); }
.st-mapbox.hue-pro { --hue: var(--st-pro); }
.st-map { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; max-width: 900px; margin: 12px 0 8px; }
.st-gap { aspect-ratio: 1 / .86; }
.st-tile { aspect-ratio: 1 / .86; min-width: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; line-height: 1.15; overflow: hidden; text-decoration: none; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.st-tile:hover { border-color: var(--text); }
.st-code { font-weight: 700; font-size: 14px; }
.st-val { font-size: 12px; font-variant-numeric: tabular-nums; }
.lvl-0 { background: var(--panel2); }
.lvl-1 { background: color-mix(in srgb, var(--hue) 12%, var(--panel2)); box-shadow: inset 0 -2px 0 var(--hue); }
.lvl-2 { background: color-mix(in srgb, var(--hue) 24%, var(--panel2)); box-shadow: inset 0 -3px 0 var(--hue); }
.lvl-3 { background: color-mix(in srgb, var(--hue) 36%, var(--panel2)); box-shadow: inset 0 -4px 0 var(--hue); }
.lvl-4 { background: color-mix(in srgb, var(--hue) 48%, var(--panel2)); box-shadow: inset 0 -5px 0 var(--hue); }
.lvl-5 { background: color-mix(in srgb, var(--hue) 60%, var(--panel2)); box-shadow: inset 0 -6px 0 var(--hue); }
.lvl-na { background: transparent; border-style: dashed; color: var(--muted); }
.st-legend { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px;
  color: var(--muted); }
.st-legend li { display: inline-flex; align-items: center; gap: 6px; }
.st-sw { display: inline-block; width: 22px; height: 16px; border: 1px solid var(--border-strong); border-radius: 3px; }
.st-others { display: flex; flex-wrap: wrap; gap: 4px; }
.st-others .st-tile { width: 84px; aspect-ratio: auto; height: 54px; }
@media (max-width: 600px) {
  .st-map { gap: 2px; }
  .st-map .st-tile, .st-gap { aspect-ratio: 1 / 1; }
  .st-map .st-code { font-size: 11px; }
  .st-map .st-val { display: none; }
}

/* ---- charts: drawn on the server as SVG, once wide and once narrow; one is shown ----
 * A drawing is scaled to its box, so the wide one (720 units) would shrink its labels to a few pixels on a phone and the narrow
 * one (360 units) would swell on a desktop. Up to 600px the narrow drawing is shown, at most 480px across; it has no tooltips
 * (a phone has no hover) and the table below each chart has the numbers. */
.st-chart { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 8px 10px 4px;
  margin: 8px 0; }
.st-chart svg { display: block; width: 100%; height: auto; }
.st-chart .st-svg-narrow { display: none; max-width: 480px; margin: 0 auto; }
@media (max-width: 600px) {
  .st-chart .st-svg-wide { display: none; }
  .st-chart .st-svg-narrow { display: block; }
}
.st-grid { stroke: var(--border); stroke-width: 1; }
.st-axis { stroke: var(--border-strong); stroke-width: 1; }
.st-tick { fill: var(--muted); font: 11px var(--font-sans); font-variant-numeric: tabular-nums; }
.st-end { fill: var(--text); font: 600 11px var(--font-sans); }
.c-anti { fill: var(--st-anti); background: var(--st-anti); }
.c-pro { fill: var(--st-pro); background: var(--st-pro); }
.c-unc { fill: var(--st-unc); background: var(--st-unc); }
.ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln-0 { stroke: var(--st-s1); } .ln-1 { stroke: var(--st-s2); } .ln-2 { stroke: var(--st-s3); }
.ln-3 { stroke: var(--st-s4); } .ln-4 { stroke: var(--st-s5); } .ln-5 { stroke: var(--st-s6); }
.end { stroke: var(--panel); stroke-width: 2; }
.end-0 { fill: var(--st-s1); } .end-1 { fill: var(--st-s2); } .end-2 { fill: var(--st-s3); }
.end-3 { fill: var(--st-s4); } .end-4 { fill: var(--st-s5); } .end-5 { fill: var(--st-s6); }
/* a hit area larger than the mark: it shows the tooltip (the <title> inside it) and a faint wash under the pointer */
.hit { fill: transparent; }
.hit:hover { fill: var(--text); fill-opacity: .12; }
@media (forced-colors: active) {
  .c-anti, .c-pro, .c-unc, .ln, .end { forced-color-adjust: none; }
}
.st-key { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px;
  color: var(--muted); }
.st-key li { display: inline-flex; align-items: center; gap: 6px; }
.st-key a { color: var(--muted); }
.st-key a:hover { color: var(--text); }
.st-keyline { flex: none; }
.st-details { margin: 8px 0 14px; }
.st-details summary { cursor: pointer; color: var(--gold); min-height: 32px; display: inline-flex; align-items: center; }
.st-details[open] summary { margin-bottom: 4px; }