/* National homes: map + live-state selector. D system tokens follow the site theme. */
.d-national{min-height:100svh;display:flex;flex-direction:column}
.d-national .national-header{position:static}
.d-national .national-header .wrap{min-height:72px;justify-content:flex-start}
/* main is sized from its content (flex-basis auto, never shrinks), so the footer always follows the map + picker at any window
   height; flex:1's 0% basis left its height to the engine's minimum (NATBTN LATE ADD: Safari 1440 x ~900, footer on the buttons) */
.d-national main{flex:1 0 auto;display:grid;align-items:center}
.national-stage{width:min(100% - 32px,1040px);margin:0 auto;padding:24px 0 32px}
.national-map{display:block;width:100%;height:auto;max-height:58svh;overflow:visible}
.national-map path{fill:var(--land);stroke:var(--land-line);stroke-width:1;vector-effect:non-scaling-stroke}
.national-map .national-live{fill:var(--tn);stroke:var(--tn-deep);stroke-width:1.5}
.national-map .national-live[data-code=GA]{fill:var(--ga);stroke:var(--ga-ink)}
.national-map a:focus-visible .national-live{fill:var(--tn-deep)}@media (hover: hover) and (pointer: fine){.national-map a:hover .national-live{fill:var(--tn-deep)}}
.national-map a:focus-visible .national-live[data-code=GA]{fill:var(--ga-ink)}@media (hover: hover) and (pointer: fine){.national-map a:hover .national-live[data-code=GA]{fill:var(--ga-ink)}}
/* Boss 10-26 5418BCB1: the focus ring and the tap flash follow the state's own outline, never its bounding rectangle. */
.national-map a{outline:none;-webkit-tap-highlight-color:transparent}
.national-map a:focus-visible .national-live{stroke:var(--focus);stroke-width:3}
.national-selector{text-align:center;margin-top:24px}
.national-selector p{font-size:var(--fs-lede);font-weight:500;margin:0 0 12px;color:var(--ink)}
.national-selector ul{display:flex;justify-content:center;gap:24px;list-style:none;padding:0;margin:0}
/* A-42 Oct 5 #1: each state is an OUTLINED .btn in its own map colour (is-ga / is-tn: the state ink, edge and text); a tint of the
   same colour only under a real pointer, so a phone tap never leaves one; never a solid fill (the one-red-action rule). */
.national-selector .btn-state{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1.5px var(--c-ink);text-decoration:none}
@media (hover: hover) and (pointer: fine){.national-selector .btn-state:hover{background:var(--c-2);color:var(--c-ink)}}
.national-selector a:focus-visible,.national-header a:focus-visible,.national-footer a:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.national-footer{padding:20px 16px;border-top:1px solid var(--rule)}
.national-footer nav{display:flex;justify-content:center;gap:24px}
.national-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);font-size:var(--fs-small);text-decoration:none}
@media (hover: hover) and (pointer: fine){.national-footer a:hover{color:var(--ink)}}
@media(max-width:680px){.national-stage{padding-top:16px;padding-bottom:24px}.national-selector{margin-top:20px}.national-header .wrap{padding-inline:16px}}
/* TIERS: Sign in + Go Pro on the door page, the D header's outlined pair */
.nat-acct{margin-left:auto;display:flex;align-items:center;gap:4px}.nat-acct a{color:var(--ink);font-weight:600;font-size:var(--fs-small);padding:0 12px;min-height:44px;display:inline-flex;align-items:center;border-radius:6px;white-space:nowrap}.nat-acct a.signup{box-shadow:inset 0 0 0 1.5px var(--control-edge)}@media (hover:hover) and (pointer:fine){.nat-acct a.signup:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}}
@media(max-width:359px){.nat-acct a{padding:0 9px}}