/* States hub (laws.html). Status colors match the state checker. */
.k-yes{--c:var(--yes);--bg:var(--yes-bg)}
.k-some{--c:var(--some);--bg:var(--some-bg)}
.k-soon{--c:var(--soon);--bg:var(--soon-bg)}
.k-no{--c:var(--no);--bg:var(--no-bg)}
.k-uns{--c:var(--unsure);--bg:var(--unsure-bg)}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--c);flex:none}

/* Hero: text, then (from 768px) the tile map. Phones get the list instead: tiles would be too small to tap. */
.hubhero .lede{font-size:1.125rem}
.hubhero .lede b{font-weight:800}
.mapcard{display:none;margin:0}
@media(min-width:768px){.mapcard{display:block;max-width:640px}}
@media(min-width:1000px){.hubhero{grid-template-columns:1fr 600px}}
.usmap{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.usmap .t{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:44px;border-radius:10px;
  background:var(--c);color:#fff;font:800 .875rem var(--display);text-decoration:none;letter-spacing:.02em}
.usmap a.t:hover,.usmap a.t:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
.legend{list-style:none;margin:12px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.legend li{display:flex;align-items:center;gap:8px;font-size:1rem;color:var(--ink-2)}
.mapcard figcaption{font-size:1rem;color:var(--ink-3)}

/* Filter chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:3px solid var(--ink);border-radius:999px;
  background:var(--white);color:var(--ink);font:800 1rem var(--body);cursor:pointer}
.chip b{font-weight:800}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--plate)}
.showing{margin:0 0 16px;font-weight:700;color:var(--ink-2)}

/* State list, grouped by rule */
.sgroups{display:grid;gap:28px;scroll-margin-top:96px}
.sgroup[hidden]{display:none}
.sgroup h3{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin:0 0 12px;font:800 1.25rem var(--display)}
.sgroup h3 small{width:100%;font:700 1rem var(--body);color:var(--ink-2)}
@media(min-width:700px){.sgroup h3 small{width:auto}}
.srows{display:grid;gap:8px}
@media(min-width:700px){.srows{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.srows{grid-template-columns:1fr 1fr 1fr}}
.srow{display:flex;align-items:center;gap:12px;min-height:44px;padding:12px 12px;background:var(--white);border:3px solid var(--ink);
  border-left:10px solid var(--c);border-radius:16px;color:var(--ink);text-decoration:none}
a.srow:hover{background:var(--bg)}
.srow .shape{flex:none}
.srow .tx{flex:1;min-width:0}
.srow b{display:block;font:800 1.125rem var(--display)}
.srow b em{font:800 .875rem var(--body);font-style:normal;color:#fff;background:var(--no);border-radius:999px;padding:2px 8px;margin-left:4px;vertical-align:middle}
.srow .tx span{display:block;color:var(--ink-2);font-size:1rem;line-height:1.4}
.srow .go{flex:none;font:800 1.5rem var(--display);color:var(--ink-3)}
.srow.nolink{border-style:dashed;border-left-style:solid}

/* Highway rules */
.rrules{display:grid;gap:12px}
@media(min-width:900px){.rrules{grid-template-columns:1fr 1fr}}
.rrule{background:var(--white);border:3px solid var(--ink);border-radius:16px;padding:16px 16px}
.rrule h3{margin:0 0 4px;font:800 1.25rem var(--display)}
.rrule p{margin:0 0 12px;color:var(--ink-2)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;border:2px solid var(--c);
  background:var(--bg);color:var(--ink);font:800 1rem var(--body);text-decoration:none}
.pill:hover{background:var(--c);color:#fff}
@media(min-width:1000px){.hubhero h1.kw{font-size:clamp(2.5rem,4.2vw,3.25rem)}}

/* Color-blind safe: every status also has its own symbol (tile + legend), so the map never relies on color alone */
.usmap .t{flex-direction:column;gap:1px;line-height:1}
.usmap .t::after,.legend .dot::after{font:800 .8125rem/1 var(--display)}
.legend .dot{width:20px;height:20px;display:inline-grid;place-items:center;color:#fff}
.legend .dot::after{font-size:.8125rem}
.t.g-yes::after,.legend .g-yes .dot::after{content:"✓"}
.t.g-lim::after,.legend .g-lim .dot::after{content:"!"}
.t.g-local::after,.legend .g-local .dot::after{content:"◐"}
.t.g-future::after,.legend .g-future .dot::after{content:"28"}
.t.g-no::after,.legend .g-no .dot::after{content:"✕"}
.t.g-uns::after,.legend .g-uns .dot::after{content:"?"}

/* Nov. 9: the "some roads / some towns" group fills with bright traffic amber and dark text (white on amber is hard to read) */
.usmap .t.k-some{background:var(--some-fill);color:var(--ink)}
.dot.k-some,.k-some .dot{background:var(--some-fill)}
.k-some .srow,.srow.k-some{border-left-color:var(--some-fill)}
.pill.k-some:hover,.k-some .pill:hover{background:var(--some-fill);color:var(--ink)}

/* Nov. 9: grid items may shrink below their content width, so the list fits a 280px phone */
.sgroups>.sgroup,.srows>.srow{min-width:0}
.srow b{overflow-wrap:anywhere}