/* Data Centers Atlas design system. One file for every page. Read DESIGN.md before changing tokens.
   Sections: 1 tokens  2 base  3 type  4 components  5 top bar  6 state app  7 map UI  8 detail  9 home  10 prose pages  11 motion  12 phones */

/* 1. Tokens ------------------------------------------------------------------------------------------------ */
:root{
  --ink-0:#06090d; --ink-1:#0a0f15; --ink-2:#0f161e; --ink-3:#16202b; --ink-4:#1e2a37;
  --line:rgba(150,172,198,.13); --line-2:rgba(150,172,198,.24); --glass:rgba(10,15,21,.78);
  --text:#e9eef4; --text-2:#aab6c4; --text-3:#728194;
  --signal:#ffc24b; --signal-ink:#1a1204; --signal-glow:rgba(255,194,75,.35);
  /* status colors: keep in sync with STATUS_COLORS in atlas.js */
  --s-operating:#3cc8ff; --s-building:#2fe39b; --s-approved:#d7f25c; --s-proposed:#ff9a4d;
  --s-paused:#8f9cab; --s-stopped:#ff5c7a; --s-unknown:#b48cff; --s-unconfirmed:#5d6b7a;
  --r-moratorium:#ff5c7a; --r-rule:#ffc24b; --r-proposed:#d7f25c;
  --f-display:"Instrument Serif",Georgia,serif;
  --f-ui:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px; --radius-sm:9px; --radius-pill:999px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.8),0 0 0 1px var(--line);
  --top:60px; --panel:420px; --ease:cubic-bezier(.2,.7,.2,1);
}

/* 2. Base -------------------------------------------------------------------------------------------------- */
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink-1)}
body{margin:0;background:var(--ink-1);color:var(--text);font:400 15px/1.55 var(--f-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3,p,li{text-wrap:pretty}

/* 3. Type -------------------------------------------------------------------------------------------------- */
.kicker{font:600 11px/1 var(--f-data);letter-spacing:.18em;text-transform:uppercase;color:var(--signal);display:inline-flex;align-items:center;gap:8px}
.kicker .live{width:7px;height:7px;border-radius:50%;background:var(--s-building);box-shadow:0 0 0 0 rgba(47,227,155,.6);animation:pulse 1.8s 5}
.display{font:400 clamp(40px,6vw,84px)/.98 var(--f-display);letter-spacing:-.01em;margin:0}
.display em{font-style:italic;color:var(--signal)}
.h2{font:400 clamp(30px,3.6vw,48px)/1.04 var(--f-display);margin:0}
.lede{font-size:18px;line-height:1.6;color:var(--text-2);max-width:62ch}
.num{font-family:var(--f-data);font-feature-settings:"tnum" 1}
.muted{color:var(--text-3)}

/* 4. Components -------------------------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--ink-3);color:var(--text);border-radius:var(--radius-pill);padding:10px 16px;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{background:var(--ink-4);border-color:var(--text-3)}
.btn:active{transform:translateY(1px)}
.btn-signal{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.btn-signal:hover{background:#ffd47a;border-color:#ffd47a}
.btn-ghost{background:transparent}
.btn svg{width:16px;height:16px;flex:none}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:transparent;border-radius:var(--radius-pill);padding:6px 11px;font-size:12.5px;font-weight:500;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:all .18s}
.chip b{font:600 11px var(--f-data);color:var(--text-3)}
.chip:hover{border-color:var(--text-3);color:var(--text)}
.chip[aria-pressed="false"]{opacity:.45}
.chip[aria-pressed="false"] .dot{background:transparent!important}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.g-operating{background:var(--s-operating)} .g-building{background:var(--s-building)} .g-approved{background:var(--s-approved)}
.g-proposed{background:var(--s-proposed)} .g-paused{background:var(--s-paused)} .g-stopped{background:var(--s-stopped)}
.g-unknown{background:var(--s-unknown)} .g-unconfirmed{background:transparent;box-shadow:inset 0 0 0 2px var(--s-unconfirmed)}
.pill{display:inline-flex;align-items:center;gap:7px;font:600 10.5px/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:var(--radius-pill);background:var(--ink-4);color:var(--text)}
.seg{display:inline-flex;padding:3px;border-radius:var(--radius-pill);background:var(--ink-0);border:1px solid var(--line)}
.seg button{border:0;background:transparent;border-radius:var(--radius-pill);padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--text-3);cursor:pointer;transition:all .18s}
.seg button[aria-pressed="true"]{background:var(--ink-4);color:var(--text);box-shadow:0 0 0 1px var(--line-2)}
.field{position:relative}
.field input{width:100%;background:var(--ink-0);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:11px 14px 11px 38px;font-size:14px;outline:none;transition:border-color .2s}
.field input:focus{border-color:var(--signal)}
.field svg{position:absolute;left:13px;top:50%;width:16px;height:16px;transform:translateY(-50%);color:var(--text-3)}
.src{display:inline-flex;align-items:center;gap:6px;font:500 11.5px var(--f-data);padding:5px 9px;border-radius:7px;background:var(--ink-0);border:1px solid var(--line);color:var(--text-2);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src:hover{border-color:var(--signal);color:var(--text)}
.stat b{display:block;font:600 clamp(24px,2.4vw,30px)/1 var(--f-data);letter-spacing:-.02em;color:var(--text)}
.stat span{display:block;margin-top:6px;font-size:12px;line-height:1.35;color:var(--text-3)}
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px}

/* 5. Top bar ----------------------------------------------------------------------------------------------- */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:30;display:flex;align-items:center;gap:18px;padding:0 18px;background:linear-gradient(180deg,rgba(6,9,13,.92),rgba(6,9,13,.72));backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.brand svg{width:26px;height:26px}
.brand i{font:400 italic 18px var(--f-display);color:var(--signal);letter-spacing:0}
.statepick{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--line-2);font-size:13px;font-weight:600;text-decoration:none;color:var(--text)}
.statepick .dot{width:7px;height:7px;background:var(--s-building)}
.nav{margin-left:auto;display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:var(--radius-pill);font-size:13.5px;font-weight:500;color:var(--text-2);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);background:var(--ink-3)}

/* 6. State app --------------------------------------------------------------------------------------------- */
.app{overflow:hidden;height:100vh;height:100dvh}
.stage{position:fixed;inset:var(--top) 0 0 0}
#map{position:absolute;inset:0;background:var(--ink-0)}
.panel{position:absolute;z-index:20;top:14px;left:14px;bottom:14px;width:var(--panel);display:flex;flex-direction:column;background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.panel-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent}
.grip{display:none}
.intro{padding:22px 22px 6px}
.intro h1{font:400 34px/1.06 var(--f-display);margin:12px 0 10px;letter-spacing:.004em}
.intro h1 em{color:var(--signal)}
.intro p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 22px 18px;border-bottom:1px solid var(--line)}
.stats .stat b{font-size:22px}
.stats .stat span{font-size:11px}
.controls{position:sticky;top:0;z-index:2;padding:14px 22px;display:grid;gap:12px;background:linear-gradient(var(--ink-1),rgba(10,15,21,.96));border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.row-controls{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer;user-select:none}
.toggle input{appearance:none;width:30px;height:18px;border-radius:9px;background:var(--ink-4);position:relative;cursor:pointer;transition:background .2s;margin:0}
.toggle input:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-2);transition:transform .2s var(--ease)}
.toggle input:checked{background:var(--signal)}
.toggle input:checked:after{transform:translateX(12px);background:var(--signal-ink)}
.list{list-style:none;margin:0;padding:6px 10px 10px}
.list li{margin:0}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;text-decoration:none;transition:background .15s}
.row:hover,.row.hover{background:var(--ink-3)}
.row.on{background:var(--ink-4)}
.row .t{min-width:0}
.row b{display:block;font-weight:600;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row small{display:block;font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row em{font:500 10.5px var(--f-data);font-style:normal;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.list-head{display:flex;justify-content:space-between;align-items:baseline;padding:14px 22px 2px;font:600 11px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.empty{padding:18px 22px;color:var(--text-3);font-size:14px}
.panel-foot{padding:14px 22px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--text-3);display:flex;flex-wrap:wrap;gap:6px 14px}
.panel-foot a{color:var(--text-2);text-decoration:none}
.panel-foot a:hover{color:var(--signal)}

/* 7. Map UI ------------------------------------------------------------------------------------------------ */
.mapui{position:absolute;z-index:15;right:14px;top:14px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.mapui .seg{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.zoombox{display:flex;flex-direction:column;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.zoombox button{width:40px;height:40px;border:0;background:transparent;cursor:pointer;color:var(--text);display:grid;place-items:center}
.zoombox button+button{border-top:1px solid var(--line)}
.zoombox button:hover{background:var(--ink-3)}
.zoombox svg{width:18px;height:18px}
.legend{position:absolute;z-index:15;right:14px;bottom:34px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;font-size:12px;color:var(--text-2);display:grid;gap:7px;min-width:190px}
.legend h4{margin:0 0 2px;font:600 10.5px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.legend div{display:flex;align-items:center;gap:9px}
.legend .p{width:12px;height:12px;border-radius:50%;flex:none}
.legend .p-exact{background:var(--text);box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.legend .p-approx{background:rgba(233,238,244,.35);box-shadow:inset 0 0 0 2px var(--text)}
.legend .p-county{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.legend .sw{width:14px;height:10px;border-radius:3px;flex:none}
.legend[data-rules="off"] .rules{display:none}
.legend-toggle{border:0;background:transparent;color:var(--text-2);font:600 10.5px var(--f-data);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:12px}
.legend-toggle:after{content:"−";font-size:14px;color:var(--text-3)}
.legend.closed{min-width:0;padding:10px 14px}
.legend.closed>*:not(.legend-toggle){display:none!important}
.legend.closed .legend-toggle:after{content:"+"}
.hint{position:absolute;z-index:15;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:9px 16px;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;transition:opacity .35s,transform .35s var(--ease)}
.hint.show{opacity:1;transform:translateX(-50%) translateY(0)}
.hint b{color:var(--signal);font-weight:600}
.tip{position:absolute;z-index:16;pointer-events:none;background:var(--ink-0);border:1px solid var(--line-2);border-radius:10px;padding:8px 11px;font-size:12.5px;line-height:1.35;max-width:260px;transform:translate(-50%,calc(-100% - 14px));box-shadow:var(--shadow)}
.tip b{display:block;font-weight:600}
.tip span{color:var(--text-3);font-size:11.5px}
.maplibregl-ctrl-attrib{background:rgba(6,9,13,.7)!important;color:var(--text-3)!important;font:11px var(--f-ui)!important}
.maplibregl-ctrl-attrib a{color:var(--text-2)!important}
@media (min-width:861px){.app .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib{max-width:calc(100vw - var(--panel) - 80px);line-height:1.4}}
.maplibregl-ctrl-attrib-button{filter:invert(1)}
.maplibregl-canvas:focus-visible{outline:none}
.selring{width:22px;height:22px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2.5px var(--signal);animation:selring 1.8s var(--ease) 5}
@keyframes selring{0%{box-shadow:0 0 0 2.5px rgba(255,194,75,1),0 0 0 0 rgba(255,194,75,.5)}100%{box-shadow:0 0 0 2.5px rgba(255,194,75,.9),0 0 0 22px rgba(255,194,75,0)}}

/* 8. Detail view ------------------------------------------------------------------------------------------- */
.detail{padding:16px 22px 26px;animation:rise .35s var(--ease)}
.back{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--text-3);font-size:13px;font-weight:600;cursor:pointer;padding:6px 0;margin-bottom:10px}
.back:hover{color:var(--text)}
.back svg{width:16px;height:16px}
.detail h2{font:400 32px/1.05 var(--f-display);margin:12px 0 6px;letter-spacing:-.005em}
.detail .where{color:var(--text-2);font-size:14px;margin:0 0 14px}
.precision{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:11px;background:var(--ink-0);border:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--text-2);margin:0 0 16px}
.precision svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--signal)}
.precision b{color:var(--text);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:0 0 18px}
.facts div{background:var(--ink-2);padding:11px 13px;min-width:0}
.facts dt{font:600 10px var(--f-data);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 0 4px}
.facts dd{margin:0;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.facts .wide{grid-column:1/-1}
.detail h3{font:600 11px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:22px 0 10px}
.detail p.note{margin:0;color:var(--text-2);font-size:14px;line-height:1.6}
.timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:1px solid var(--line-2);display:grid;gap:12px}
.timeline li{position:relative;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.timeline li:before{content:"";position:absolute;left:-18.5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--ink-1);box-shadow:inset 0 0 0 2px var(--signal)}
.timeline time{display:block;font:600 11px var(--f-data);color:var(--text);letter-spacing:.04em}
.sources{display:flex;flex-wrap:wrap;gap:6px}
.rulebox{border:1px solid rgba(255,92,122,.3);background:rgba(255,92,122,.06);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--text-2)}
.rulebox b{color:var(--text)}
.rulebox+.rulebox{margin-top:8px}
.rulebox.r-rule{border-color:rgba(255,194,75,.3);background:rgba(255,194,75,.06)}
.rulebox.r-proposed,.rulebox.r-history{border-color:var(--line-2);background:var(--ink-0)}
.rulebox p{margin:6px 0 8px}

/* 9. National home ----------------------------------------------------------------------------------------- */
.page{padding-top:var(--top)}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.hero{position:relative;overflow:hidden;padding:72px 0 64px;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 72% 40%,rgba(255,194,75,.10),transparent 70%),radial-gradient(40% 50% at 20% 90%,rgba(60,200,255,.06),transparent 70%);pointer-events:none}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent 75%);-webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent 75%);opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hero .display{margin:18px 0 20px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tilemap{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;aspect-ratio:12/8.4}
.tile{position:relative;border-radius:7px;background:var(--ink-2);border:1px solid var(--line);display:grid;place-items:center;font:600 clamp(9px,1vw,12px) var(--f-data);color:var(--text-3);text-decoration:none;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s;animation:tilein .6s var(--ease) both}
.tile:hover{border-color:var(--line-2);color:var(--text-2);transform:translateY(-2px)}
.tile.live{background:linear-gradient(160deg,#ffd27a,var(--signal));border-color:var(--signal);color:var(--signal-ink);box-shadow:0 0 0 0 var(--signal-glow),0 18px 40px -12px var(--signal-glow);animation:tilein .6s var(--ease) both,glow 2.4s 1s 3}
.tile.live:after{content:"Live";position:absolute;left:50%;top:-26px;transform:translateX(-50%);font:600 10px var(--f-data);letter-spacing:.14em;text-transform:uppercase;color:var(--signal);white-space:nowrap}
.tile.research{background:var(--ink-3);color:var(--text-2)}
.tilekey{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:12px;color:var(--text-3)}
.tilekey span{display:inline-flex;align-items:center;gap:8px}
.tilekey i{width:12px;height:12px;border-radius:3px;background:var(--ink-2);border:1px solid var(--line)}
.tilekey i.l{background:var(--signal);border-color:var(--signal)}
.tilekey i.r{background:var(--ink-3)}
.band{padding:84px 0;border-bottom:1px solid var(--line)}
.band-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:40px}
.band-head p{margin:0;color:var(--text-2);font-size:16.5px;line-height:1.6}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{position:relative;overflow:hidden}
.feature .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ink-4);color:var(--signal);margin-bottom:18px}
.feature .ic svg{width:20px;height:20px}
.feature h3{font:600 18px/1.25 var(--f-ui);margin:0 0 8px}
.feature p{margin:0;color:var(--text-2);font-size:14.5px}
.statecard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);overflow:hidden;padding:0;text-decoration:none;transition:border-color .25s,transform .25s var(--ease)}
.statecard:hover{border-color:var(--line-2);transform:translateY(-2px)}
.statecard .info{padding:34px}
.statecard .stats4{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:26px 0}
.statecard .shot{position:relative;min-height:340px;background:var(--ink-0)}
.statecard .shot canvas,.statecard .shot svg{position:absolute;inset:0;width:100%;height:100%}
.footer{padding:44px 0 56px;color:var(--text-3);font-size:13px}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.footer a{color:var(--text-2);text-decoration:none}
.footer a:hover{color:var(--signal)}

.mapwrap{position:relative}
.usmap{width:100%;height:auto;display:block;overflow:visible}
.usmap .st{fill:var(--ink-3);stroke:var(--ink-1);stroke-width:.9;stroke-linejoin:round;transition:fill .25s}
.usmap path.st:hover{fill:var(--ink-4)}
.usmap .live path{fill:var(--signal);stroke:#ffe1a1;stroke-width:1;filter:drop-shadow(0 0 14px rgba(255,194,75,.55));transition:filter .25s}
.usmap .live:hover path{filter:drop-shadow(0 0 22px rgba(255,194,75,.8))}
.usmap .states{animation:rise .8s var(--ease) both}
.usmap .pin{pointer-events:none}
.usmap .pin circle{fill:#fff}
.usmap .pin .ring{fill:none;stroke:#fff;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ring 2.2s var(--ease) 4}
.usmap .pin text{font:600 17px var(--f-ui);fill:var(--text);paint-order:stroke;stroke:var(--ink-1);stroke-width:4px}
.usmap .pin text.sub{font:600 11px var(--f-data);fill:var(--signal);letter-spacing:.08em;text-transform:uppercase}
.mapwrap .tip{transform:translate(-50%,calc(-100% - 16px))}
.statecard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statecard .shot img{object-position:right center}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(4.2);opacity:0}}

/* 10. Prose pages (about, method, state notes) ------------------------------------------------------------- */
.prose{max-width:760px;margin:0 auto;padding:72px 28px 40px}
.prose h1{font:400 clamp(40px,5vw,64px)/1 var(--f-display);margin:16px 0 18px}
.prose h2{font:400 32px/1.1 var(--f-display);margin:48px 0 12px}
.prose p,.prose li{color:var(--text-2);font-size:16.5px;line-height:1.7}
.prose a{color:var(--signal)}
.prose dl{display:grid;gap:0;border-top:1px solid var(--line)}
.prose dl div{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.prose dt{font-weight:600;color:var(--text)}
.prose dd{margin:0;color:var(--text-2)}

/* 11. Motion ----------------------------------------------------------------------------------------------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,227,155,.55)}70%{box-shadow:0 0 0 9px rgba(47,227,155,0)}100%{box-shadow:0 0 0 0 rgba(47,227,155,0)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 var(--signal-glow),0 18px 40px -12px var(--signal-glow)}50%{box-shadow:0 0 0 8px rgba(255,194,75,0),0 18px 50px -10px var(--signal-glow)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tilein{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* 12. Phones and tablets ----------------------------------------------------------------------------------- */
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .band-head{grid-template-columns:1fr;gap:16px}
  .statecard{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--top:56px}
  .nav a:not(.keep){display:none}
  .brand .word{display:none}
  .panel{top:auto;left:0;right:0;bottom:0;width:auto;height:44vh;border-radius:20px 20px 0 0;border-bottom:0;transition:height .35s var(--ease)}
  .panel.full{height:calc(100% - 12px)}
  .panel.mid{height:62vh}
  .grip{display:block;flex:none;height:22px;cursor:grab;position:relative;border:0;background:transparent;width:100%}
  .grip:before{content:"";position:absolute;left:50%;top:8px;width:42px;height:5px;border-radius:3px;background:var(--line-2);transform:translateX(-50%)}
  .intro{padding:4px 18px 4px}
  .intro h1{font-size:28px;margin:8px 0 6px}
  .intro p{font-size:13.5px}
  .stats{padding:12px 18px 14px;gap:8px}
  .stats .stat b{font-size:19px}
  .controls{padding:12px 18px}
  .list-head,.panel-foot,.detail{padding-left:18px;padding-right:18px}
  .mapui{top:10px;right:10px}
  .legend{display:none}
  .hint{bottom:calc(44vh + 14px)}
  .grid3{grid-template-columns:1fr}
  .wrap{padding:0 16px}
  .hero{padding:48px 0}
  .band{padding:56px 0}
  .statecard .info{padding:24px}
  .prose{padding:48px 16px 32px}
  .prose dl div{grid-template-columns:1fr;gap:4px}
  .tile.live:after{top:-20px}
}

/* 2026-10-15 (Shaun: type felt squeezed on the state map): the state page panel uses regular-width Inter, a touch of tracking. */
body.app{--f-ui:"Inter","Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.003em}
/* 2026-10-15: live-state label on the U.S. map reads at phone size (the SVG scales to ~0.35x there) and sits clear of the state. */
.usmap .pin text{stroke-width:5px}
@media (max-width:700px){.usmap .pin text{font-size:34px;stroke-width:9px}.usmap .pin text.sub{font-size:21px;letter-spacing:.04em}}
.usmap .pin .lead{stroke:rgba(255,255,255,.7);stroke-width:1.2}
@media (max-width:700px){.usmap .pin .lead{stroke-width:2.4}}

/* National edition: the existing atlas tokens and components carry into the directory. */
.featured-states{display:grid;gap:22px}
.directory-tools{display:flex;gap:18px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.directory-tools .field{flex:1;min-width:180px;max-width:440px}
.directory-sort{display:flex;align-items:center;gap:10px;color:var(--text-2);font-size:13px}
.directory-sort select{background:var(--ink-2);border:1px solid var(--line-2);color:var(--text);border-radius:20px;padding:10px;font:inherit}
.directory-table{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.directory-table table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}
.directory-table th,.directory-table td{padding:16px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.directory-table thead{color:var(--text-3);font:500 11px var(--f-data);background:var(--ink-2)}
.directory-table tbody th{font-weight:600}.directory-table td{color:var(--text-2)}
.directory-table tbody tr:last-child>*{border-bottom:0}.directory-table a{text-decoration:none}.directory-table a:hover{color:var(--signal)}
.evidence{padding:14px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.evidence .facts{margin-top:12px}.evidence .note{margin:0 0 10px!important;font-size:13px!important}
.event-list{list-style:none;padding:0}.event-list li{padding:28px 0;border-bottom:1px solid var(--line)}
.event-list h2{font-size:25px;margin:12px 0}.event-list p{margin:8px 0}.event-list a{text-decoration:none}
.usmap .pin{pointer-events:none}
.app .hint{white-space:normal;max-width:min(520px,90vw);text-align:center;width:max-content}
@media(max-width:700px){.directory-table th,.directory-table td{padding:13px 10px;font-size:12px}.directory-table th:nth-child(4),.directory-table td:nth-child(4){display:none}.directory-sort{width:100%}.statepick{max-width:calc(100vw - 155px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.directory-table td:nth-child(3){font-size:13px}.app .intro .kicker{line-height:1.5;letter-spacing:.1em}}

/* Usability pass: existing palette and typography, direct state switching and touch targets. */
.state-switch{position:relative;flex:none;max-width:240px}
.state-switch:after{content:"";position:absolute;right:14px;top:18px;width:6px;height:6px;border-right:1.5px solid var(--text-2);border-bottom:1.5px solid var(--text-2);transform:rotate(45deg);pointer-events:none}
.state-switch select{appearance:none;display:block;width:100%;max-width:240px;min-height:44px;border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:9px 34px 9px 14px;background:var(--ink-1);color:var(--text);font:600 13px var(--f-ui);cursor:pointer;text-overflow:ellipsis}
.state-switch option{background:var(--ink-1);color:var(--text)}
.nav-toggle{display:none;min-height:44px;padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--radius-pill);background:transparent;color:var(--text-2);font:600 13px var(--f-ui);cursor:pointer}
.swd-credit{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--text-2);text-decoration:none;font-size:12px}
.swd-credit img{width:36px;height:36px;flex:none;display:block}
.swd-credit:hover span{color:var(--signal)}
.panel-foot .swd-credit{flex-basis:100%;margin-top:4px}
.skip-link{position:fixed;z-index:100;top:8px;left:8px;padding:12px 18px;background:var(--signal);color:var(--signal-ink);border-radius:20px;transform:translateY(-200%)}
.skip-link:focus{transform:translateY(0)}
.reset-row{padding:0 22px}.reset-row:has([hidden]){display:none}.reset-row .btn{margin-top:12px;font-size:12px}
.evidence,.detail .where{overflow-wrap:anywhere}
.back,.nav a{min-height:44px;align-content:center}
@media(max-width:860px){
 .topbar{gap:10px;padding:0 12px}.state-switch{flex:1;min-width:0;max-width:260px}.state-switch select{max-width:none;width:100%}.nav-toggle{display:block;margin-left:auto}
 .topbar>.nav{display:none;position:absolute;top:calc(var(--top) + 8px);left:12px;right:12px;padding:8px;background:var(--ink-1);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow)}
 .topbar.nav-open>.nav{display:grid;grid-template-columns:1fr 1fr}.topbar.nav-open>.nav a{display:block!important;padding:12px}
 .chip{min-height:44px}.src{min-height:36px}.back{min-height:44px}.reset-row{padding:0 18px}.panel-foot>a:not(.swd-credit){min-height:36px;align-content:center}.hint{font-size:12px}.swd-credit{font-size:12px}
}
/* The featured state keeps Claude's amber glow; published neighbors remain clickable. */
.usmap .st.live:not(.featured) path{fill:var(--ink-3);stroke:var(--line-2);filter:none}
.usmap .st.live:not(.featured):hover path{fill:var(--ink-4);stroke:var(--signal)}
.hero-network{pointer-events:none;fill:none}.network-base{stroke:var(--signal);stroke-width:1;opacity:.22}
.network-flow{stroke:#ffe1a1;stroke-width:1.7;stroke-dasharray:3 18;opacity:0;animation:network-travel 1s linear 6,network-settle 6.5s linear forwards;animation-delay:var(--delay,0s)}
@keyframes network-travel{from{stroke-dashoffset:42}to{stroke-dashoffset:0}}
@keyframes network-settle{0%,85%{opacity:.8}100%{opacity:0}}
.map-caption{font:400 11px/1.5 var(--f-ui);color:var(--text-3);margin:10px 0 0}
.map-loading{position:absolute;z-index:16;top:18px;left:50%;transform:translateX(-50%);padding:10px 16px;background:var(--ink-1);border:1px solid var(--line-2);border-radius:24px;color:var(--text-2);font-size:13px;max-width:70vw;text-align:center}
.hint.load-error{pointer-events:auto;width:min(420px,90vw);white-space:normal;display:grid;gap:8px;justify-items:center}
@media(prefers-reduced-motion:reduce){.network-flow{opacity:0!important}}

/* 13. Width system (2026-10-15). Backgrounds and maps run full bleed; content sits in one fluid column.
   --gutter grows from 16px on phones to 56px on wide screens; --wrap-max caps line length on big monitors. */
:root{--gutter:clamp(16px,4vw,56px);--wrap-max:1360px}
.wrap{max-width:calc(var(--wrap-max) + 2 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}