:root{
  --bg:#070a12; --bg2:#0b0f1b;
  --surface:rgba(255,255,255,.05); --border:rgba(255,255,255,.11);
  --text:#eef2fb; --muted:#9098ac; --faint:#5d6679;
  --active:#DC3B22; --blocked:#2FA36A; --scheduled:#E0A52E; --vetoed:#5AA152; --pending:#E6CE52; --none:#3B5246;
  --failed:#6E9472; --sev1:#E85730; --sev2:#DC3B22; --sev3:#C32A1B; --sev0:#2a3344;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  line-height:1.55; overflow-x:hidden;
  background-image:radial-gradient(820px 520px at 72% -8%, rgba(255,90,54,.16), transparent 60%),
                   radial-gradient(760px 520px at 8% 4%, rgba(43,182,245,.13), transparent 56%),
                   radial-gradient(700px 600px at 92% 70%, rgba(156,123,255,.10), transparent 60%);
  background-attachment:fixed;
  animation:bgdrift 26s ease-in-out infinite alternate;
}
@keyframes bgdrift{
  0%{background-position:72% -8%, 8% 4%, 92% 70%}
  100%{background-position:60% 2%, 18% -4%, 80% 60%}
}
.grain{position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:44px 44px; mask-image:radial-gradient(circle at 50% 25%, #000, transparent 82%);}
a{color:inherit}

/* ---- header ---- */
.head{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:54px 24px 8px}
.head-slim{padding:26px 24px 4px}
.head-slim h1{margin:0}

.mapnav{display:flex; gap:6px; justify-content:center; max-width:1100px; margin:18px auto 0; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:999px; width:max-content}
.mapnav-link{appearance:none; text-decoration:none; font:600 13px var(--sans); color:var(--muted); padding:8px 20px; border-radius:999px; transition:.15s}
.mapnav-link:hover{color:var(--text)}
.mapnav-link.on{background:var(--active); color:#1a0a06}

.cd-wrap{position:relative; z-index:1; max-width:1100px; margin:16px auto 0; padding:0 24px}
.cd-card{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(90deg, rgba(224,165,46,.14), rgba(255,255,255,.03) 72%);
  border:1px solid rgba(224,165,46,.34); border-left:4px solid var(--scheduled);
  border-radius:14px; padding:15px 20px}
.cd-body{flex:1; min-width:210px}
.cd-label{font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--scheduled)}
.cd-state{font-size:20px; font-weight:800; letter-spacing:-.02em; margin:4px 0 2px; color:var(--text)}
.cd-eff{font-weight:600; font-size:14px; color:var(--muted)}
.cd-sub{font:500 12.5px var(--mono); color:var(--muted)}
.cd-clock{display:flex; flex-direction:column; align-items:flex-end; line-height:1.05}
.cd-clock>span:first-child{display:inline-block; font:800 clamp(34px,5.4vw,46px) var(--mono); color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:-.015em;
  text-shadow:0 0 18px rgba(224,165,46,.2)}
.cd-clock>span:first-child.cd-tick{animation:cdTick 1s ease-out}
@keyframes cdTick{
  0%{color:#ffda8a; text-shadow:0 0 30px rgba(224,165,46,.85), 0 0 12px rgba(224,165,46,.6)}
  60%{color:#ffe7b0; text-shadow:0 0 24px rgba(224,165,46,.5)}
  100%{color:var(--text); text-shadow:0 0 18px rgba(224,165,46,.2)}
}
.cd-units{font:600 10px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:4px}
.cd-wrap.cd-live .cd-card{border-color:rgba(220,59,34,.4); border-left-color:var(--active);
  background:linear-gradient(90deg, rgba(220,59,34,.15), rgba(255,255,255,.03) 72%)}
.cd-wrap.cd-live .cd-label{color:var(--active)}
.cd-wrap.cd-live .cd-clock>span:first-child{color:var(--active); text-shadow:0 0 22px rgba(220,59,34,.4)}
.cd-wrap.cd-live .cd-clock>span:first-child::before{content:"\25CF "; color:var(--active);
  animation:cdPulse 1.15s ease-in-out infinite}
@keyframes cdPulse{0%,100%{opacity:1} 50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.cd-wrap.cd-live .cd-clock>span:first-child::before{animation:none}}
@media(max-width:560px){.cd-clock{align-items:flex-start} .cd-state{font-size:18px}}
.eyebrow{font:600 12px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:9px; margin:0 0 18px}
.eyebrow .dot{width:9px; height:9px; border-radius:50%; background:var(--active);
  box-shadow:0 0 12px 2px rgba(255,90,54,.8); animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,90,54,.6)}70%{box-shadow:0 0 0 10px rgba(255,90,54,0)}100%{box-shadow:0 0 0 0 rgba(255,90,54,0)}}
h1{font-size:clamp(34px,6vw,64px); line-height:1.02; letter-spacing:-.028em; font-weight:800; margin:0 0 16px}
.lede{max-width:62ch; color:var(--muted); font-size:17px; margin:0 0 30px}

.stats{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 34px; margin:0 0 14px}
.stat{display:flex; flex-direction:column}
.stat .num{font:800 34px/1 var(--mono); color:var(--text)}
.stat-lead .num{font-size:68px; color:var(--active); text-shadow:0 0 26px rgba(220,59,34,.4)}
.stat .num.small{font-size:30px}
.stat .lbl{font-size:12.5px; color:var(--muted); margin-top:6px; max-width:18ch}
.stat-lead .lbl{color:#cdd4e3}
.reviewed{font:500 12px var(--mono); color:var(--faint); margin:8px 0 0; max-width:80ch}

/* ---- stage ---- */
.stage{position:relative; z-index:1; max-width:min(1500px,96vw); margin:14px auto 0; padding:0 18px;
  display:grid; grid-template-columns:1fr 332px; gap:22px; align-items:start}
.mapwrap{min-width:0}

.legend{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 0 10px}
.chip{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--muted);
  border-radius:999px; padding:7px 13px; font:600 12px var(--sans); transition:.16s}
.chip .swatch{width:12px; height:12px; border-radius:3px; box-shadow:0 0 8px var(--sw,transparent)}
.chip:hover{color:var(--text); border-color:rgba(255,255,255,.24); transform:translateY(-1px)}
.chip.on{color:var(--text); background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.32)}
.chip.c-active .swatch{background:var(--active); --sw:rgba(242,59,39,.7)}
.chip.c-active.sev-1 .swatch{background:var(--sev1)} .chip.c-active.sev-2 .swatch{background:var(--sev2)} .chip.c-active.sev-3 .swatch{background:var(--sev3)}
.chip.c-blocked .swatch{background:var(--blocked); --sw:rgba(43,182,245,.6)}
.chip.c-passed_pending .swatch{background:var(--scheduled); --sw:rgba(167,139,250,.6)}
.chip.c-vetoed .swatch{background:var(--vetoed); --sw:rgba(52,211,153,.6)}
.chip.c-pending .swatch{background:var(--pending); --sw:rgba(251,191,36,.5)}
.chip.c-failed .swatch{background:var(--failed); --sw:rgba(169,132,103,.5)}
.chip.c-none .swatch{background:var(--none)}

.map3d{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.22));
  border:1px solid var(--border); border-radius:20px; padding:18px 10px 6px; position:relative; overflow:hidden;
  perspective:1600px; perspective-origin:50% 42%}
.map3d::before{content:""; position:absolute; inset:0;
  background:radial-gradient(420px 200px at 50% -6%, rgba(255,255,255,.06), transparent 70%); pointer-events:none}
#map{width:100%; height:auto; display:block;
  transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d; transition:transform .14s ease-out}

/* extrusion */
.extrude{transform:translate(0,13px)}
.ext{fill:url(#g-wall); animation:fade .8s ease backwards; animation-delay:var(--d,0ms)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* caps */
.cap{stroke:rgba(255,255,255,.55); stroke-width:1; vector-effect:non-scaling-stroke; cursor:pointer; pointer-events:all;
  transform-box:fill-box; transform-origin:center;
  transition:transform .2s cubic-bezier(.2,.8,.25,1), filter .2s ease, opacity .2s ease;
  animation:rise .55s cubic-bezier(.2,.8,.25,1) backwards; animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0; transform:translateY(38px) scale(.94)}to{opacity:1; transform:translateY(0) scale(1)}}
.cap.c-active{fill:var(--active); --glow:rgba(220,59,34,.7); filter:drop-shadow(0 2px 6px rgba(220,59,34,.35))}
.cap.c-active.sev-1{fill:var(--sev1); --glow:rgba(232,87,48,.7); filter:drop-shadow(0 2px 6px rgba(232,87,48,.32))}
.cap.c-active.sev-2{fill:var(--sev2); --glow:rgba(220,59,34,.72); filter:drop-shadow(0 2px 6px rgba(220,59,34,.38))}
.cap.c-active.sev-3{fill:var(--sev3); --glow:rgba(195,42,27,.8); filter:drop-shadow(0 3px 7px rgba(195,42,27,.45))}
.cap.c-blocked{fill:var(--blocked); --glow:rgba(47,163,106,.6); filter:drop-shadow(0 2px 6px rgba(47,163,106,.3))}
.cap.c-passed_pending{fill:var(--scheduled); --glow:rgba(224,165,46,.6); filter:drop-shadow(0 2px 6px rgba(224,165,46,.3))}
.cap.c-vetoed{fill:var(--vetoed); --glow:rgba(90,161,82,.55); filter:drop-shadow(0 2px 6px rgba(90,161,82,.28))}
.cap.c-pending{fill:var(--pending); --glow:rgba(230,206,82,.5)}
.cap.c-failed{fill:var(--failed); --glow:rgba(110,148,114,.45)}
.cap.c-none{fill:var(--none); --glow:rgba(110,150,130,.3)}
.cap:hover,.cap:focus,.cap.sel{animation:none; transform:scale(1.09);
  filter:drop-shadow(0 4px 12px var(--glow)) brightness(1.2); outline:none}
.map3d.filtering .cap{opacity:.12; filter:none}
.map3d.filtering .cap.match{opacity:1}

/* glossy sheen overlay */
.sheen{pointer-events:none; mix-blend-mode:screen}
.shn{fill:url(#sheen); opacity:.38}

/* When the viewBox zooms in, the extrusion / gloss / status glows are sized in
   SVG units, so they balloon and blur. Drop them once zoomed for a crisp read. */
.map3d.zoomed .extrude{display:none}
.map3d.zoomed .sheen{display:none}
.map3d.zoomed .cap{filter:none}

/* World map reads better fully flat: no perspective tilt, no extruded walls, no
   gloss, no constant glow -- at every zoom level. */
.map3d.flat-map{perspective:none}
.map3d.flat-map #map{transform:none}
.map3d.flat-map .extrude{display:none}
.map3d.flat-map .sheen{display:none}
.map3d.flat-map .cap{filter:none}

.lab-ab{fill:#ffffff; font:800 14.5px var(--mono); text-anchor:middle; paint-order:stroke;
  stroke:rgba(0,0,0,.72); stroke-width:3.6px; pointer-events:none; letter-spacing:.01em}

/* time machine */
.timemachine{margin-top:16px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px}
.tm-row{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.tm-label{font:600 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tm-date{font:800 19px var(--mono); color:var(--text); margin-left:2px}
.tm-reset{margin-left:auto; background:transparent; border:1px solid var(--border); color:var(--muted);
  border-radius:8px; padding:6px 11px; font:600 12px var(--sans); cursor:pointer; transition:.15s}
.tm-reset:hover{color:var(--text); border-color:rgba(255,255,255,.3)}
input[type=range]#tm{width:100%; -webkit-appearance:none; appearance:none; height:7px; border-radius:6px;
  background:linear-gradient(90deg,#1d2433,#33405a); outline:none; cursor:pointer}
#tm::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--active); border:3px solid #1a0f0c; box-shadow:0 0 16px rgba(255,90,54,.8)}
#tm::-moz-range-thumb{width:19px; height:19px; border:3px solid #1a0f0c; border-radius:50%; background:var(--active); box-shadow:0 0 16px rgba(255,90,54,.8)}
.tm-count{font-size:13px; color:var(--muted); margin:10px 0 0}
.tm-count strong{font:800 16px var(--mono); color:var(--active)}

/* panel */
.panel{position:sticky; top:18px; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:20px; min-height:240px; max-height:calc(100vh - 40px); overflow-y:auto}
.panel-eye,.panel-status{font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase}
.panel-empty .panel-eye{color:var(--faint)} .panel-empty p{color:var(--muted); margin:12px 0 0}
.panel-status{display:inline-block; padding:4px 11px; border-radius:999px; color:#0a0a0a}
.panel-status.c-active{background:var(--active); color:#1a0a06} .panel-status.c-blocked{background:var(--blocked)}
.panel-status.c-passed_pending{background:var(--scheduled)} .panel-status.c-pending{background:var(--pending)}
.panel-status.c-vetoed{background:var(--vetoed); color:#05291d}
.panel-status.c-none{background:var(--none); color:#dfe5f0}
.panel-body h2{font-size:27px; margin:12px 0 16px; letter-spacing:-.02em}
.panel-body dl{margin:0; display:grid; gap:12px}
.panel-body dt{font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.panel-body dd{margin:3px 0 0; font-size:15px}
.panel-note{color:var(--muted); font-size:13.5px; margin:16px 0 0; border-top:1px solid var(--border); padding-top:14px}
.panel-note:empty{display:none}
.panel-news{margin-top:16px; border-top:1px solid var(--border); padding-top:14px}
.panel-news h3{font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.pn-item{display:block; text-decoration:none; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.pn-item:last-of-type{border-bottom:none}
.pn-item .pn-date{font:600 11px var(--mono); color:var(--blocked); display:block; margin-bottom:2px}
.pn-item .pn-title{font-size:14px; color:#dde3f0; line-height:1.4}
.pn-item:hover .pn-title{color:#fff}
.pn-more{display:inline-flex; align-items:center; gap:6px; margin-top:12px; text-decoration:none;
  font:600 13px var(--sans); color:var(--blocked); border:1px solid rgba(43,182,245,.4);
  border-radius:9px; padding:8px 13px; transition:.15s}
.pn-more:hover{background:rgba(43,182,245,.12); border-color:rgba(43,182,245,.7)}
.pn-none{font-size:13px; color:var(--muted); margin:0 0 4px}

/* ticker -- bigger, bolder, slower */
.ticker{position:relative; z-index:2; margin:36px 0 0; border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); background:rgba(0,0,0,.32); display:flex; align-items:stretch}
.ticker-top{margin:0 0 0; border-top:0; border-bottom:1px solid rgba(73,194,93,.45);
  background:#06080f; box-shadow:0 6px 24px rgba(0,0,0,.5)}
.ticker-tag{flex:none; font:800 13px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:#1a0a06; background:var(--active); padding:0 18px; display:flex; align-items:center; gap:8px;
  box-shadow:0 0 24px rgba(255,90,54,.45)}
.ticker-view{overflow:hidden; flex:1}
.ticker-track{display:inline-flex; white-space:nowrap; gap:46px; padding:18px 28px; will-change:transform;
  animation:marquee linear infinite; animation-duration:140s}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk-item{flex:none; color:#e4e9f4; text-decoration:none; font-size:18px; font-weight:700; letter-spacing:-.005em}
.tk-item:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.tk-date{font:800 14px var(--mono); color:var(--active); margin-right:11px}
.tk-empty{color:var(--muted); font-weight:600; font-size:15px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* footer */
.foot{position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:28px 24px 60px; color:var(--muted)}
.foot p{font-size:13.5px; max-width:90ch; margin:0 0 8px}
.foot strong{color:var(--text)}
.foot-meta{font:500 12px var(--mono); color:var(--faint)}
.foot-meta a{color:var(--blocked); text-decoration:none}

@media (max-width:860px){
  .stage{grid-template-columns:1fr; max-width:760px}
  .panel{position:static; max-height:none; overflow:visible}
  .stat-lead .num{font-size:50px}
  #map{transform:rotateX(7deg)}
  .tk-item{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .ticker-track{animation:none!important}
  #map{transform:rotateX(8deg)}
}

/* ---- editorial: the case against ---- */
.manifesto{position:relative; z-index:1; max-width:1100px; margin:50px auto 0; padding:0 24px}
.man-head{font-size:clamp(26px,4.2vw,42px); line-height:1.05; letter-spacing:-.025em; font-weight:800; margin:0 0 16px; max-width:20ch}
.man-intro{color:var(--muted); font-size:16.5px; max-width:66ch; margin:0 0 30px}
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.pillar{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px 22px 22px 26px; position:relative; overflow:hidden; transition:transform .18s ease, border-color .18s ease}
.pillar::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--active)}
.pillar:nth-child(1)::before{background:var(--active)}
.pillar:nth-child(2)::before{background:var(--blocked)}
.pillar:nth-child(3)::before{background:var(--scheduled)}
.pillar:nth-child(4)::before{background:var(--pending)}
.pillar:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.2)}
.pillar h3{font-size:18.5px; margin:0 0 9px; letter-spacing:-.01em; color:var(--text)}
.pillar p{color:var(--muted); font-size:14px; line-height:1.62; margin:0}
.man-close{margin:26px 0 0; font-size:17px; color:#cdd4e3; line-height:1.6;
  border-left:4px solid var(--active); padding:8px 0 8px 18px; max-width:72ch; background:linear-gradient(90deg, rgba(255,90,54,.08), transparent 70%)}
.man-close strong{color:#fff}
@media (max-width:700px){ .pillars{grid-template-columns:1fr} }

/* ---- share controls ---- */
.share{display:flex; align-items:center; gap:9px; margin-top:20px; flex-wrap:wrap}
.share-bar{position:relative; z-index:1; max-width:min(1500px,96vw); margin:18px auto 0; padding:0 18px}
.share-bar .share{margin-top:0}
.share-btn{cursor:pointer; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text);
  border-radius:10px; padding:10px 17px; font:700 13px var(--sans); transition:.15s}
.share-btn:hover{background:var(--active); border-color:var(--active); color:#1a0a06}
.share-btn:disabled{opacity:.6; cursor:default; background:rgba(255,255,255,.06); border-color:var(--border); color:var(--text)}
.share-ico{height:34px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:999px; color:var(--muted); text-decoration:none;
  font:600 12.5px var(--mono); white-space:nowrap; transition:.15s}
.share-ico:hover{color:var(--text); border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.05); transform:translateY(-1px)}
.share-msg{font:600 12px var(--mono); color:var(--vetoed); margin-left:4px}
.share-note{font:500 12px var(--mono); color:var(--muted); margin:11px 0 0; max-width:84ch; line-height:1.5}

/* ---- mobile hardening ---- */
@media (max-width:560px){
  .head{padding:38px 18px 8px}
  .stat-lead .num{font-size:44px}
  .stat .num{font-size:28px}
  .legend{gap:6px}
  .chip{padding:6px 10px; font-size:11.5px}
  .ticker-tag{padding:0 12px; font-size:11px}
  .tk-item{font-size:15px}
  .map3d{padding:10px 6px 4px; border-radius:14px}
  .panel{padding:16px}
}
/* keep tap targets comfortable and prevent text inflation on iOS */
.chip, .share-btn, .share-ico, .tm-reset, .pn-more{min-height:34px}

/* ---- vp.net partnership ---- */
.sponsor{position:relative; z-index:1; max-width:1100px; margin:42px auto 0; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:18px}
.sponsor-item{display:flex; align-items:center; gap:20px; padding:22px 24px;
  background:linear-gradient(120deg, rgba(73,194,93,.12), rgba(255,255,255,.03));
  border:1px solid rgba(73,194,93,.3); border-radius:18px}
.sponsor-logo{width:78px; height:78px; object-fit:contain; object-position:left center; flex:none}
.sponsor-logo-bmail{width:auto; height:38px; max-width:150px}
.sponsor-copy{flex:1; min-width:0}
.sponsor-lead{font:800 20px var(--sans); margin:0 0 6px; letter-spacing:-.015em; color:var(--text)}
.sponsor-sub{color:var(--muted); font-size:14px; margin:0 0 14px}
.sponsor-btn{display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:#3fb853; color:#04210b; font:700 14px var(--sans); border-radius:10px; padding:11px 18px; transition:.15s}
.sponsor-btn:hover{background:#56cf6b; transform:translateY(-1px)}
.foot-sponsor{display:flex; align-items:center; gap:12px; margin-top:20px}
.foot-sponsor span{font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.foot-logo{height:auto; width:72px; opacity:.85; display:block; transition:opacity .15s}
.foot-logo:hover{opacity:1}
@media (max-width:560px){
  .sponsor{padding:18px; gap:14px}
  .sponsor-logo{width:68px; height:68px}
  .sponsor-lead{font-size:18px}
}

/* ---- hover tooltip ---- */
.tip{position:absolute; pointer-events:none; z-index:6; max-width:240px;
  background:rgba(9,13,22,.97); border:1px solid var(--border); border-radius:11px;
  padding:10px 13px; transform:translate(-50%,-118%); box-shadow:0 10px 28px rgba(0,0,0,.55)}
.tip[hidden]{display:none}
.tip-name{font:700 14.5px var(--sans); color:var(--text); margin:0 0 6px}
.tip-row{display:flex; align-items:center; gap:8px; font-size:13px; color:#c7cedd}
.tip-dot{width:10px; height:10px; border-radius:3px; flex:none}
.tip-eff{font:600 11.5px var(--mono); color:var(--faint); margin-top:6px}
.tip-dot.c-active{background:var(--active)} .tip-dot.c-blocked{background:var(--blocked)}
.tip-dot.c-passed_pending{background:var(--scheduled)} .tip-dot.c-vetoed{background:var(--vetoed)}
.tip-dot.c-pending{background:var(--pending)} .tip-dot.c-none{background:var(--none)}

/* ---- download/share buttons ---- */
.share-btn{text-decoration:none}
.share-btn.primary{background:var(--active); border-color:var(--active); color:#1a0a06}
.share-btn.primary:hover{background:var(--active); filter:brightness(1.09); color:#1a0a06}

/* ---- map mode: by intrusiveness ---- */
.modeswitch{display:inline-flex; gap:4px; padding:4px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; margin:0 0 14px}
.modeswitch .mode{appearance:none; border:0; background:transparent; color:var(--muted);
  font:600 13px var(--sans); padding:7px 15px; border-radius:9px; cursor:pointer; transition:.15s}
.modeswitch .mode.on{background:var(--active); color:#1a0a06}
.modeswitch .mode:not(.on):hover{color:var(--text)}

.typeswitch{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.typeswitch .tfilter{appearance:none; background:var(--surface); border:1px solid var(--border);
  color:var(--muted); font:600 12.5px var(--sans); padding:6px 13px; border-radius:999px; cursor:pointer; transition:.15s}
.typeswitch .tfilter:not(.on):hover{color:var(--text); border-color:var(--faint)}
.typeswitch .tfilter.on{background:#26324a; border-color:#3a4a6a; color:#eef2fb}

.panel-laws{margin:16px 0 0; display:flex; flex-direction:column; gap:10px}
.lw-count{font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:0 0 2px}
.lawcard{background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:11px; padding:12px 13px}
.lw-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.lw-type{font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.lw-pill{margin-left:auto; font:600 10.5px var(--mono); letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; color:#0a0a0a; white-space:nowrap}
.lw-pill.c-active{background:var(--active); color:#1a0a06} .lw-pill.c-blocked{background:var(--blocked); color:#05291d}
.lw-pill.c-passed_pending{background:var(--scheduled); color:#1a0a06} .lw-pill.c-pending{background:var(--pending); color:#1a0a06}
.lw-pill.c-vetoed{background:var(--vetoed); color:#05291d} .lw-pill.c-failed{background:var(--failed); color:#06200f}
.lw-pill.c-none{background:var(--none); color:#dfe5f0}
.lw-meta{font-size:13px; color:var(--text); margin:8px 0 0}
.lw-author{font:500 12px var(--mono); color:var(--faint); margin:5px 0 0; letter-spacing:.01em}
.lw-sevrow{font-size:12.5px; color:var(--muted); margin:6px 0 0}
.lw-sev{font-weight:600} .lw-sev.sev-1{color:var(--sev1)} .lw-sev.sev-2{color:var(--sev2)} .lw-sev.sev-3{color:var(--sev3)}
.lw-note{font-size:12.8px; color:var(--muted); line-height:1.55; margin:8px 0 0}
.lw-empty{color:var(--muted); font-size:14px; margin:16px 0 0}

.legend-sev .chip{cursor:pointer}
.chip.s-1 .swatch{background:var(--sev1)} .chip.s-2 .swatch{background:var(--sev2)}
.chip.s-3 .swatch{background:var(--sev3)} .chip.s-0 .swatch{background:var(--sev0)}

.legend-note{max-width:780px; margin:-4px auto 14px; color:var(--faint);
  font-size:12.5px; line-height:1.5; text-align:center}

.map3d.mode-sev .cap{fill:var(--sev0); --glow:rgba(120,140,170,.35); filter:none; animation:none}
.map3d.mode-sev .cap.sev-1{fill:var(--sev1); --glow:rgba(232,87,48,.6)}
.map3d.mode-sev .cap.sev-2{fill:var(--sev2); --glow:rgba(220,59,34,.65); filter:drop-shadow(0 2px 7px rgba(220,59,34,.38))}
.map3d.mode-sev .cap.sev-3{fill:var(--sev3); --glow:rgba(195,42,27,.75); filter:drop-shadow(0 3px 8px rgba(195,42,27,.45))}
.map3d.mode-sev .cap:hover,.map3d.mode-sev .cap:focus,.map3d.mode-sev .cap.sel{
  transform:translateY(-8px) scale(1.04); filter:drop-shadow(0 12px 18px var(--glow)) brightness(1.15)}

.panel-status.c-failed{background:var(--failed); color:#1a120c}
.tip-dot.c-failed{background:var(--failed)}

/* ---- intro band (below the map) ---- */
.intro{position:relative; z-index:1; max-width:1100px; margin:20px auto 0; padding:0 24px}
.intro .lede{margin:6px 0 18px}

/* ---- footer: vp.net & bmail ---- */
.foot-amp{color:var(--faint); font-size:15px; font-weight:700}
.foot-logo-bmail{width:72px}

/* ---- sponsored-by badge on the map ---- */
.map-badge{position:absolute; right:14px; bottom:12px; z-index:4;
  display:flex; align-items:center; gap:8px; padding:7px 11px;
  background:rgba(6,8,15,.74); border:1px solid rgba(255,255,255,.12); border-radius:10px;
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:.8; transition:opacity .15s}
.map-badge:hover{opacity:1}
.mb-label{font:600 9.5px var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--faint)}
.map-badge a{display:flex; align-items:center}
.mb-logo{height:14px; width:auto; display:block}
.mb-bmail{height:11px}
.mb-amp{color:var(--faint); font-size:12px; font-weight:700}

@media (max-width:860px){ .sponsor{grid-template-columns:1fr} }
@media (max-width:560px){
  .map-badge{right:8px; bottom:8px; padding:5px 8px; gap:6px}
  .mb-label{display:none}
  .sponsor-logo{width:60px; height:60px}
}

/* ---- "watch it spread" looping animation (bottom of page) ---- */
.spread{max-width:1080px; margin:8px auto 6px; padding:14px 22px 8px}
.spread-head{text-align:center; margin-bottom:16px}
.spread-title{font-size:clamp(26px,4vw,36px); line-height:1.05; letter-spacing:-.015em; margin:8px 0 8px}
.spread-sub{color:var(--muted); max-width:560px; margin:0 auto; font-size:15px; line-height:1.5}
.spread-stage{position:relative; background:radial-gradient(120% 90% at 50% 0%, rgba(40,52,84,.32), rgba(7,10,18,0) 70%); border:1px solid rgba(255,255,255,.07); border-radius:20px; padding:20px 20px 22px}
#spreadmap{width:100%; height:auto; display:block; max-height:560px}
.scap{stroke:rgba(255,255,255,.5); stroke-width:1.1; fill:var(--none); transition:fill .55s ease, filter .55s ease}
.scap.c-active{fill:var(--sev2)}
.scap.c-active.sev-1{fill:var(--sev1)}
.scap.c-active.sev-2{fill:var(--sev2)}
.scap.c-active.sev-3{fill:var(--sev3)}
.scap.c-blocked{fill:var(--blocked)}
.scap.c-passed_pending{fill:var(--scheduled)}
.scap.c-vetoed{fill:var(--vetoed)}
.scap.c-pending{fill:var(--pending)}
.scap.c-failed{fill:var(--failed)}
.scap.c-none{fill:var(--none)}
.scap.justlit{animation:scapPulse .8s ease-out}
@keyframes scapPulse{0%{filter:drop-shadow(0 0 0 rgba(255,210,180,0))}30%{filter:drop-shadow(0 0 9px rgba(255,200,170,.95))}100%{filter:drop-shadow(0 0 0 rgba(255,210,180,0))}}
.spread-labels .slab{fill:rgba(255,255,255,.66); font:700 13px/1 "Inter",system-ui,sans-serif; text-anchor:middle; pointer-events:none; paint-order:stroke; stroke:rgba(3,6,14,.55); stroke-width:2.4px}
.spread-readout{display:flex; align-items:baseline; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:6px}
.spread-date{font-size:clamp(28px,5vw,40px); font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:.01em; min-width:6.5ch; text-align:right}
.spread-count{color:var(--muted); font-size:15px; margin:0}
.spread-count strong{color:var(--active); font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; margin-right:3px}
.spread-track{height:5px; background:rgba(255,255,255,.08); border-radius:3px; max-width:660px; margin:14px auto 2px; overflow:hidden}
.spread-bar{height:100%; width:0; background:linear-gradient(90deg,var(--sev1),var(--sev3)); border-radius:3px; transition:width .12s linear}
.spread-toggle{position:absolute; top:18px; right:20px; z-index:2; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:var(--muted); border-radius:999px; padding:6px 15px; font-size:12px; font-weight:600; letter-spacing:.02em; cursor:pointer; transition:color .15s,border-color .15s,background .15s}
.spread-toggle:hover{color:#fff; border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.12)}
@media (max-width:640px){ .spread-toggle{top:12px; right:12px} .scap{stroke-width:.9} .spread-labels{display:none} }
@media (prefers-reduced-motion: reduce){ .scap{transition:none} .scap.justlit{animation:none} .spread-bar{transition:none} }

/* ---- "Take action" panel block ---- */
.panel-action{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08)}
.action-h{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 9px}
.action-btn{display:block; text-align:center; background:var(--active); color:#fff; font-weight:700; font-size:14px; padding:10px 12px; border-radius:10px; text-decoration:none; transition:filter .15s}
.action-btn:hover{filter:brightness(1.08)}
.action-sub{color:var(--muted); font-size:12.5px; line-height:1.5; margin:11px 0 7px}
.action-bills{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.action-bills li{font-size:12.5px; line-height:1.45; color:#cdd6e4}
.ab-st{display:inline-block; font-weight:700; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; padding:1px 6px; border-radius:5px; background:rgba(255,255,255,.06); margin-right:3px}
.ab-st.c-active{color:var(--sev2)} .ab-st.c-passed_pending,.ab-st.c-pending{color:var(--scheduled)}
.ab-st.c-blocked,.ab-st.c-vetoed,.ab-st.c-failed{color:var(--vetoed)} .ab-st.c-none{color:var(--muted)}
.ab-type{font-weight:600; color:#e7edf5}
.ab-link{color:var(--scheduled); text-decoration:none; white-space:nowrap}
.ab-link:hover{text-decoration:underline}
/* ---- footer version indicator ---- */
.foot-ver{margin-top:12px; text-align:center; font-size:11px; letter-spacing:.04em; color:rgba(170,185,205,.5); font-variant-numeric:tabular-nums}

/* ---- map zoom / pan ---- */
#map{touch-action:pan-y}
.map3d.zoomed{cursor:grab}
.map3d.panning,.map3d.panning .cap{cursor:grabbing}
.zoomctl{position:absolute; right:12px; bottom:12px; z-index:7; display:flex; flex-direction:column; gap:6px}
.zoomctl button{width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(18,20,26,.74); border:1px solid var(--border); color:var(--text);
  border-radius:9px; font:700 19px var(--sans); cursor:pointer; line-height:1; padding:0;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:.14s}
.zoomctl button:hover{background:var(--active); color:#1a0a06; border-color:var(--active)}
.zoomctl button:disabled{opacity:.38; cursor:default}
.zoomctl button:disabled:hover{background:rgba(18,20,26,.74); color:var(--text); border-color:var(--border)}
.zoomctl .zreset{font-size:15px}
.zoomhint{position:absolute; left:12px; bottom:12px; z-index:7; font:600 11px var(--mono);
  color:var(--faint); background:rgba(18,20,26,.62); border:1px solid var(--border);
  padding:4px 9px; border-radius:7px; pointer-events:none; opacity:0; transition:opacity .3s}
.map3d:hover .zoomhint{opacity:.85}
@media (max-width:560px){ .zoomhint{display:none} .zoomctl button{width:40px; height:40px} }

/* ===== light theme ===== */
[data-theme="light"]{
  --bg:#eef1f7; --bg2:#e7ebf4;
  --surface:rgba(15,23,42,.05); --border:rgba(15,23,42,.15);
  --text:#101a2e; --muted:#4b5566; --faint:#79839a;
  --none:#aeb9c8; --sev0:#cdd5e2;
}
[data-theme="light"] body{
  background-image:radial-gradient(820px 520px at 72% -8%, rgba(220,59,34,.10), transparent 60%),
                   radial-gradient(760px 520px at 8% 4%, rgba(43,130,200,.10), transparent 56%),
                   radial-gradient(700px 600px at 92% 70%, rgba(120,90,210,.08), transparent 60%);
}
[data-theme="light"] .grain{
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
}
[data-theme="light"] .map3d{background:linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.09))}
[data-theme="light"] .cap{stroke:rgba(20,28,44,.34)}
[data-theme="light"] .zoomctl button{background:rgba(255,255,255,.92); color:#101a2e}
[data-theme="light"] .zoomctl button:hover{background:var(--active); color:#fff}
[data-theme="light"] .zoomctl button:disabled:hover{background:rgba(255,255,255,.92); color:#101a2e}
[data-theme="light"] .zoomhint{background:rgba(255,255,255,.82); color:#4b5566}
[data-theme="light"] .share-btn:hover{color:#fff}
[data-theme="light"] .cd-clock>span:first-child{color:var(--text)}

/* ===== theme toggle ===== */
.float-actions{position:fixed; right:16px; bottom:16px; z-index:20; display:flex; align-items:center; gap:10px}
.fa-pill{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none;
  font:700 13px var(--sans); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:.16s; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.22)}
.fa-pill:hover{border-color:var(--scheduled); color:var(--scheduled)}
.fa-pill svg{width:15px; height:15px; flex:none}
.theme-toggle{appearance:none; cursor:pointer; flex:none;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); display:inline-flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.16s; box-shadow:0 6px 20px rgba(0,0,0,.22)}
.theme-toggle:hover{border-color:var(--active); color:var(--active)}
.theme-toggle .ic-moon{display:none} .theme-toggle .ic-sun{display:block}
[data-theme="light"] .theme-toggle .ic-sun{display:none}
[data-theme="light"] .theme-toggle .ic-moon{display:block}
[data-theme="light"] .fa-pill{box-shadow:0 6px 18px rgba(15,23,42,.12)}
[data-theme="light"] .theme-toggle{box-shadow:0 6px 18px rgba(15,23,42,.12)}
@media(max-width:860px){ .zoomctl{left:12px; right:auto} .zoomhint{display:none} }
@media(max-width:560px){
  .float-actions{right:12px; bottom:12px; gap:8px}
  .theme-toggle{width:36px; height:36px}
  .fa-pill{height:36px; padding:0 13px; font-size:12.5px}
}

/* ===== submission form ===== */
.submit-wrap{position:relative; z-index:1; max-width:700px; margin:34px auto 60px; padding:0 20px}
.submit-card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 24px}
.submit-card h1{margin:0 0 8px; font-size:27px; letter-spacing:-.02em; line-height:1.1}
.submit-card .sub-lede{color:var(--muted); margin:0 0 22px; font-size:15px; line-height:1.55}
.fld2{margin:0 0 16px; display:flex; flex-direction:column; gap:6px}
.fld2 label{font:600 13px var(--sans); color:var(--text)}
.fld2 label .opt{font:500 11.5px var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.08em; margin-left:6px}
.fld2 .hint{font:500 12px var(--mono); color:var(--faint)}
.fld2 input,.fld2 select,.fld2 textarea{width:100%; background:var(--bg2); border:1px solid var(--border);
  color:var(--text); border-radius:10px; padding:11px 13px; font:500 14px var(--sans)}
.fld2 textarea{resize:vertical; min-height:100px}
.fld2 input:focus,.fld2 select:focus,.fld2 textarea:focus{outline:none; border-color:var(--active)}
.hp-field{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; opacity:0}
.pow-status{font:600 12.5px var(--mono); margin:2px 0 0; display:flex; align-items:center; gap:8px; min-height:18px}
.pow-status.working{color:var(--scheduled)} .pow-status.ok{color:var(--vetoed)} .pow-status.err{color:var(--active)}
.pow-status .spin{width:12px; height:12px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.submit-btn{appearance:none; cursor:pointer; border:1px solid var(--active); background:var(--active); color:#fff;
  border-radius:11px; padding:12px 24px; font:700 14px var(--sans); transition:.15s; margin-top:10px}
.submit-btn:hover{filter:brightness(1.08)}
.submit-btn:disabled{opacity:.5; cursor:not-allowed; filter:none}
.submit-note{font:500 12.5px var(--mono); color:var(--faint); margin:16px 0 0; line-height:1.5}
.submit-msg{border-radius:12px; padding:15px 16px; margin:0 0 20px; font-size:14.5px; line-height:1.5}
.submit-msg.ok{background:rgba(90,161,82,.14); border:1px solid rgba(90,161,82,.42); color:var(--text)}
.submit-msg.err{background:rgba(220,59,34,.12); border:1px solid rgba(220,59,34,.42); color:var(--text)}
.submit-back{display:inline-block; margin-top:20px; color:var(--muted); text-decoration:none; font:600 13px var(--sans)}
.submit-back:hover{color:var(--text)}
.submit-brand{display:block; text-align:center; margin:0 auto 22px; font:800 16px var(--sans); letter-spacing:-.02em; color:var(--text); text-decoration:none; width:max-content}
.submit-brand span{color:var(--active)}
.foot-submit a{color:var(--scheduled); text-decoration:none; font-weight:600}
.foot-submit a:hover{text-decoration:underline}

/* ===== light-mode contrast fixes ===== */
/* hover tooltip (state / country name) -- was a dark box, so dark text vanished */
[data-theme="light"] .tip{background:rgba(255,255,255,.98); border-color:rgba(15,23,42,.14); box-shadow:0 12px 30px rgba(15,23,42,.18)}
[data-theme="light"] .tip-row{color:#3a4456}
/* header + ticker + manifesto text that was hardcoded light */
[data-theme="light"] .stat-lead .lbl{color:var(--muted)}
[data-theme="light"] .tk-empty{color:var(--muted)}
[data-theme="light"] .man-close{color:#2b3445}
[data-theme="light"] .man-close strong{color:#101a2e}
/* legend chips + type filter active states */
[data-theme="light"] .chip.on{background:rgba(15,23,42,.08); border-color:rgba(15,23,42,.26)}
[data-theme="light"] .chip:hover{border-color:rgba(15,23,42,.26)}
[data-theme="light"] .typeswitch .tfilter.on{background:#dde6f4; border-color:#b3c0d6; color:#101a2e}
[data-theme="light"] .tm-reset:hover{border-color:rgba(15,23,42,.28)}
[data-theme="light"] .share-ico:hover{border-color:rgba(15,23,42,.3)}
[data-theme="light"] .pillar:hover{border-color:rgba(15,23,42,.18)}
/* detail panel: status pills, news titles, action bills */
[data-theme="light"] .panel-status.c-none,
[data-theme="light"] .lw-pill.c-none{color:#28303f}
[data-theme="light"] .pn-item .pn-title{color:#1f2937}
[data-theme="light"] .pn-item:hover .pn-title{color:var(--active)}
[data-theme="light"] .action-bills li{color:#3a4456}
[data-theme="light"] .ab-type{color:#1f2937}
[data-theme="light"] .ab-st{background:rgba(15,23,42,.07)}
/* "watch it spread" timeline section */
[data-theme="light"] .spread-stage{background:linear-gradient(180deg, rgba(15,23,42,.035), rgba(15,23,42,.075)); border-color:rgba(15,23,42,.12)}
[data-theme="light"] .spread-date{color:var(--text)}
[data-theme="light"] .spread-labels .slab{fill:rgba(20,28,44,.82); stroke:rgba(255,255,255,.72)}
[data-theme="light"] .spread-track{background:rgba(15,23,42,.1)}
[data-theme="light"] .spread-toggle{background:rgba(15,23,42,.05); border-color:rgba(15,23,42,.16)}
[data-theme="light"] .spread-toggle:hover{color:var(--text); background:rgba(15,23,42,.1); border-color:rgba(15,23,42,.28)}

/* ===== layers panel + overlay system ===== */
.layers{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0 0 12px; padding:0}
.layers-lbl{font:700 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-right:2px}
.layer-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.layer-toggle{position:relative; display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none;
  background:var(--surface); border:1px solid var(--border); color:var(--muted);
  border-radius:999px; padding:7px 14px 7px 11px; font:600 12.5px var(--sans); transition:.16s}
.layer-toggle:hover{border-color:rgba(255,255,255,.24); color:var(--text)}
.layer-toggle.on{color:var(--text); border-color:rgba(255,255,255,.32); background:rgba(255,255,255,.07)}
.layer-toggle input{position:absolute; opacity:0; width:0; height:0}
.ly-box{position:relative; width:30px; height:17px; border-radius:999px; background:var(--sev0); border:1px solid var(--border); flex:none; transition:background .16s}
.ly-box::after{content:""; position:absolute; top:1px; left:1px; width:13px; height:13px; border-radius:50%; background:#cfd6e6; transition:transform .16s}
.layer-toggle.on .ly-box{background:var(--active); border-color:transparent}
.layer-toggle.on .ly-box::after{transform:translateX(13px); background:#fff}
.ly-name{white-space:nowrap}
.ly-mini{width:16px; height:16px; border-radius:4px; flex:none; border:1px solid var(--border)}
.basemode{display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--surface)}
.bm{appearance:none; border:0; background:transparent; color:var(--muted); font:600 11.5px var(--sans); padding:6px 13px; cursor:pointer; transition:.14s}
.bm:hover{color:var(--text)}
.bm.on{background:rgba(255,255,255,.12); color:var(--text)}

/* key (non-interactive legend) */
.legend.iskey .chip{cursor:default; background:transparent; border-color:transparent; padding:5px 8px}
.legend.iskey .chip:hover{transform:none; color:var(--muted); border-color:transparent}
.keysub{margin-top:-4px}
.keylabel{font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; margin-right:2px}
.sw-stripe.c-active{background:repeating-linear-gradient(45deg, var(--active) 0 3px, transparent 3px 6px)}
.sw-stripe.c-passed_pending{background:repeating-linear-gradient(45deg, var(--scheduled) 0 3px, transparent 3px 6px)}
.sw-stripe.c-pending{background:repeating-linear-gradient(45deg, var(--pending) 0 3px, transparent 3px 6px)}
.sw-stripe.c-blocked{background:repeating-linear-gradient(45deg, var(--blocked) 0 3px, transparent 3px 6px)}
.sw-dot.v-banned{background:radial-gradient(circle, #0E7490 1.6px, transparent 1.8px) 0 0/6px 6px}
.sw-dot.v-restricted{background:radial-gradient(circle, #0891B2 1.6px, transparent 1.8px) 0 0/6px 6px}
.sw-dot.v-proposed{background:radial-gradient(circle, #22B8CF 1.6px, transparent 1.8px) 0 0/6px 6px}
.ly-mini.sw-stripe.c-active{background:repeating-linear-gradient(45deg, var(--active) 0 3px, #2a3344 3px 6px)}
.ly-mini.sw-dot.v-banned{background:radial-gradient(circle, #0E7490 2px, #1c2740 2.2px) 0 0/7px 7px}

/* overlay layers on the map */
.ov{pointer-events:none}
.ov-social, .ov-vpn{display:none}
.map3d.show-social .ov-social{display:block}
.map3d.show-vpn .ov-vpn{display:block}
.ovp{stroke:none}
.cap.c-off{fill:var(--sev0); --glow:transparent}
.tip-dot.v-banned{background:#0E7490} .tip-dot.v-restricted{background:#0891B2} .tip-dot.v-proposed{background:#22B8CF}
.tip-social, .tip-vpn{margin-top:5px}

/* layers panel -- light mode */
[data-theme="light"] .ly-box::after{background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.25)}
[data-theme="light"] .layer-toggle.on{background:rgba(15,23,42,.06)}
[data-theme="light"] .layer-toggle:hover{border-color:rgba(15,23,42,.24)}
[data-theme="light"] .bm.on{background:rgba(15,23,42,.1)}
[data-theme="light"] .legend.iskey .chip:hover{color:var(--muted)}
[data-theme="light"] .ly-mini.sw-stripe.c-active{background:repeating-linear-gradient(45deg, var(--active) 0 3px, #d8deea 3px 6px)}
[data-theme="light"] .ly-mini.sw-dot.v-banned{background:radial-gradient(circle, #0E7490 2px, #dde3ee 2.2px) 0 0/7px 7px}
.lw-pill.v-banned{background:#0E7490; color:#fff} .lw-pill.v-restricted{background:#0891B2; color:#062a33} .lw-pill.v-proposed{background:#22B8CF; color:#062a33}
.lw-vpn{border-left:3px solid #0891B2}
.keynote{font:500 12px var(--sans); color:var(--muted); display:flex; align-items:center; line-height:1.4}

/* ===== collapsible color key ===== */
.key-toggle{display:inline-flex; align-items:center; gap:9px; cursor:pointer; margin:0 0 12px;
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  border-radius:999px; padding:7px 14px; font:600 12.5px var(--sans); transition:.16s}
.key-toggle:hover{border-color:rgba(255,255,255,.26)}
.kt-preview{display:inline-flex; gap:4px}
.kt-dot{width:11px; height:11px; border-radius:3px; display:inline-block}
.kt-dot.c-active{background:var(--active)} .kt-dot.c-passed_pending{background:var(--scheduled)}
.kt-dot.c-blocked{background:var(--blocked)} .kt-dot.c-none{background:var(--none)}
.kt-caret{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--muted); transition:transform .18s}
.key-toggle.open .kt-caret{transform:rotate(180deg)}
.keys{margin:0 0 4px}

/* ===== legislative history timeline ===== */
.hx{margin:16px 0 2px; border-top:1px solid var(--border); padding-top:14px}
.hx-title{font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--faint); cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px}
.hx-title::-webkit-details-marker{display:none}
.hx-title::before{content:""; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--faint); transition:transform .18s}
details[open] .hx-title::before{transform:rotate(180deg)}
.hx-count{font:700 10px var(--mono); background:var(--surface); border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:1px 7px}
.hx-list{list-style:none; margin:12px 0 0; padding:0; position:relative}
.hx-list::before{content:""; position:absolute; left:5px; top:5px; bottom:6px; width:2px; background:var(--border)}
.hx-item{position:relative; display:flex; gap:10px; padding:0 0 12px 20px; align-items:baseline}
.hx-item:last-child{padding-bottom:0}
.hx-dot{position:absolute; left:0; top:5px; width:12px; height:12px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border)}
.hx-dot.c-active{background:var(--active)} .hx-dot.c-passed_pending{background:var(--scheduled)} .hx-dot.c-pending{background:var(--pending)}
.hx-dot.c-blocked{background:var(--blocked)} .hx-dot.c-vetoed{background:var(--vetoed)} .hx-dot.c-failed{background:var(--failed)} .hx-dot.c-none{background:var(--none)}
.hx-date{flex:none; font:600 11.5px var(--mono); color:var(--faint); min-width:74px}
.hx-ev{font-size:13.5px; color:var(--text); line-height:1.42}
.hx-bill{color:var(--muted); font-size:12px}
[data-theme="light"] .key-toggle:hover{border-color:rgba(15,23,42,.26)}
[data-theme="light"] .hx-dot{border-color:#fff}

/* ===== digital-ID layer (crosshatch) ===== */
.ov-digitalid{display:none}
.map3d.show-digitalid .ov-digitalid{display:block}
.sw-grid.c-active{background:repeating-linear-gradient(0deg, var(--active) 0 1.4px, transparent 1.4px 5px), repeating-linear-gradient(90deg, var(--active) 0 1.4px, transparent 1.4px 5px)}
.sw-grid.c-passed_pending{background:repeating-linear-gradient(0deg, var(--scheduled) 0 1.4px, transparent 1.4px 5px), repeating-linear-gradient(90deg, var(--scheduled) 0 1.4px, transparent 1.4px 5px)}
.sw-grid.c-pending{background:repeating-linear-gradient(0deg, var(--pending) 0 1.4px, transparent 1.4px 5px), repeating-linear-gradient(90deg, var(--pending) 0 1.4px, transparent 1.4px 5px)}
.ly-mini.sw-grid.c-active{background-color:#2a3344; background-image:repeating-linear-gradient(0deg, var(--active) 0 1.4px, transparent 1.4px 5px), repeating-linear-gradient(90deg, var(--active) 0 1.4px, transparent 1.4px 5px)}
.lw-did{border-left:3px solid var(--scheduled)}
[data-theme="light"] .ly-mini.sw-grid.c-active{background-color:#d8deea}

/* ===== distinct overlay hues (stack clarity): social=violet, vpn=cyan, digital-id=amber ===== */
.sw-stripe{background:repeating-linear-gradient(45deg, #8B5CF6 0 3px, transparent 3px 6px)}
.sw-grid{background:repeating-linear-gradient(0deg, #D97706 0 1.4px, transparent 1.4px 5px), repeating-linear-gradient(90deg, #D97706 0 1.4px, transparent 1.4px 5px)}
.swatch.faint{opacity:.42}
.ly-mini.sw-stripe{background-color:#2a3344; background-image:repeating-linear-gradient(45deg, #8B5CF6 0 3px, transparent 3px 6px)}
.ly-mini.sw-grid{background-color:#2a3344; background-image:repeating-linear-gradient(0deg, #D97706 0 1.4px, transparent 1.4px 5px), repeating-linear-gradient(90deg, #D97706 0 1.4px, transparent 1.4px 5px)}
.tip-dot.l-social{background:#8B5CF6} .tip-dot.l-vpn{background:#0E7490} .tip-dot.l-did{background:#D97706}
.lw-vpn{border-left:3px solid #0891B2} .lw-did{border-left:3px solid #D97706}
[data-theme="light"] .ly-mini.sw-stripe, [data-theme="light"] .ly-mini.sw-grid{background-color:#d8deea}

/* ===== light-mode readability: countdown tick + footer ===== */
/* countdown digits: the per-tick flash uses near-white gold, invisible on light bg.
   give light mode a dark-amber pulse that settles to the normal dark text. */
@keyframes cdTickLight{
  0%{color:#a85f00; text-shadow:0 0 14px rgba(168,95,0,.4)}
  60%{color:#7a4600; text-shadow:0 0 9px rgba(168,95,0,.22)}
  100%{color:var(--text); text-shadow:0 0 11px rgba(168,95,0,.14)}
}
[data-theme="light"] .cd-clock>span:first-child{text-shadow:0 0 11px rgba(168,95,0,.15)}
[data-theme="light"] .cd-clock>span:first-child.cd-tick{animation-name:cdTickLight}
/* footer: build line is a 50%-opacity light gray -> invisible on light; partnership labels too faint */
[data-theme="light"] .foot-ver{color:rgba(75,85,102,.78)}
[data-theme="light"] .foot-sponsor span, [data-theme="light"] .foot-meta{color:var(--muted)}

/* ===== navbar: logo (home) + map toggle + about + submit ===== */
.navbar{position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between;
        flex-wrap:wrap; gap:10px 20px; max-width:1100px; margin:0 auto; padding:16px 24px 8px}
.nav-brand{display:inline-flex; line-height:0; text-decoration:none; flex:none}
.nav-logo{height:42px; width:auto; display:block}
.nav-actions{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap}
.navbar .mapnav{margin:0; max-width:none; flex:none}
.nav-link{font:600 14px var(--sans); color:var(--muted); text-decoration:none; padding:9px 8px; border-radius:8px; transition:.15s; white-space:nowrap}
.nav-link:hover{color:var(--text)}
.nav-link.on{color:var(--text)}
.nav-submit{flex:none}
.about-cta{margin:26px 0 4px}
@media (max-width:760px){
  .navbar{padding:12px 16px 6px; gap:8px 12px}
  .nav-logo{height:30px}
  .nav-actions{gap:6px 10px}
}
@media (max-width:430px){
  .nav-link{font-size:13px; padding:8px 5px}
  .nav-submit{font-size:12.5px}
}

/* ===== theme-aware sponsor logos: dark-ink variants for light mode ===== */
:root:not([data-theme="light"]) .logo-onlight{display:none}
[data-theme="light"] .logo-ondark{display:none}
[data-theme="light"] .logo-onlight{opacity:1}
[data-theme="light"] .foot-logo[src*="vpnet_text_ink"]{width:62px}

/* ===== time machine hint (fades after first interaction) ===== */
.tm-hint{display:flex; align-items:center; gap:8px; font:600 11.5px var(--mono); letter-spacing:.03em; color:var(--active); margin:-2px 0 10px; opacity:.96; transition:opacity .4s ease, max-height .4s ease, margin .4s ease; max-height:40px}
.tm-hint-ico{flex:none; display:inline-flex; width:19px; height:19px; align-items:center; justify-content:center; border-radius:50%; background:rgba(220,59,34,.16); border:1px solid rgba(220,59,34,.42); font-size:12px; animation:tmHintNudge 1.5s ease-in-out infinite}
@keyframes tmHintNudge{0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)}}
.timemachine.tm-used .tm-hint{opacity:0; max-height:0; margin:0; overflow:hidden; pointer-events:none}
@media(prefers-reduced-motion:reduce){.tm-hint-ico{animation:none}}

/* ============================================================
   Per-jurisdiction pages (place.php) + crawlable jurisdiction index
   ============================================================ */
.place{max-width:880px; margin:0 auto; padding:34px 22px 60px}
.place-404{text-align:center; padding-top:54px}
.place-404 h1{font:800 30px/1.15 var(--sans); margin:0 0 14px}
.place-404 .fa-pill{margin-top:6px}

/* breadcrumb */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:600 12.5px var(--mono);
  letter-spacing:.02em; color:var(--muted); margin-bottom:22px}
.crumbs a{color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; transition:.15s}
.crumbs a:hover{color:var(--text); border-bottom-color:var(--active)}
.crumb-sep{color:var(--faint)}
.crumb-cur{color:var(--text)}

/* hero */
.place-hero{margin-bottom:32px; padding-bottom:26px; border-bottom:1px solid var(--border)}
.place-hero h1{font:800 clamp(28px,5vw,40px)/1.12 var(--sans); letter-spacing:-.02em; margin:10px 0 16px}
.ph-sub{display:block; font-weight:600; font-size:.46em; letter-spacing:.01em; color:var(--muted); margin-top:7px}
.place-status{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:18px}
.ps-lead{font:700 14px var(--mono); color:var(--text)}
.ps-eff{font:600 13px var(--mono); color:var(--muted)}
.place-hero .lede{font-size:17px; line-height:1.6; color:var(--muted); max-width:64ch; margin:0}

/* status pill / law badge -- shared status colors */
.ps-pill,.law-badge{display:inline-flex; align-items:center; font:800 12px var(--mono); letter-spacing:.03em;
  text-transform:uppercase; padding:5px 11px; border-radius:999px; white-space:nowrap}
.ps-pill.c-active,.law-badge.c-active{background:var(--active); color:#1a0a06}
.ps-pill.c-passed_pending,.law-badge.c-passed_pending{background:var(--scheduled); color:#231806}
.ps-pill.c-pending,.law-badge.c-pending{background:var(--pending); color:#231e06}
.ps-pill.c-blocked,.law-badge.c-blocked{background:var(--blocked); color:#05291d}
.ps-pill.c-vetoed,.law-badge.c-vetoed{background:var(--vetoed); color:#05291d}
.ps-pill.c-failed,.law-badge.c-failed{background:var(--failed); color:#0a140b}
.ps-pill.c-none,.law-badge.c-none{background:transparent; color:var(--muted); box-shadow:inset 0 0 0 1px var(--border)}

/* law cards */
.place-laws{margin-bottom:14px}
.place-laws>h2,.place-extra>h2,.place-faq>h2,.place-more>h2{font:800 20px var(--sans); letter-spacing:-.01em; margin:0 0 16px}
.law-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px 20px 16px; margin-bottom:16px}
.law-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px}
.law-type{font:800 17px var(--sans); margin:0}
.law-meta{margin:0 0 12px}
.law-meta>div{display:flex; gap:10px; flex-wrap:wrap; font-size:14px; line-height:1.5; padding:5px 0; border-top:1px solid var(--border)}
.law-meta>div:first-child{border-top:none}
.law-meta dt{flex:0 0 110px; color:var(--faint); font:600 12.5px var(--mono); text-transform:uppercase; letter-spacing:.03em; padding-top:1px}
.law-meta dd{flex:1 1 200px; margin:0; color:var(--text)}
.law-note{font-size:15px; line-height:1.62; color:var(--muted); margin:13px 0 0}
.law-hist{margin-top:14px; padding-top:13px; border-top:1px dashed var(--border)}
.lh-h{display:block; font:700 11px var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:8px}
.law-hist ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.law-hist li{display:flex; gap:12px; font-size:13.5px; line-height:1.4}
.lh-date{flex:0 0 92px; color:var(--muted); font:600 12.5px var(--mono)}
.lh-ev{color:var(--text)}
.law-src{margin:13px 0 0; font:600 12.5px var(--mono); color:var(--faint)}
.law-src a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border)}
.law-src a:hover{color:var(--active); border-bottom-color:var(--active)}

/* extra (vpn / digital id) */
.place-extra{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; margin:0 0 16px}
.place-extra p{font-size:15px; line-height:1.62; color:var(--muted); margin:0 0 8px}
.muted-line{font:600 12.5px var(--mono); color:var(--faint)}

/* FAQ */
.place-faq{margin:30px 0}
.faq-item{border:1px solid var(--border); border-radius:12px; margin-bottom:10px; background:var(--surface); overflow:hidden}
.faq-item summary{cursor:pointer; padding:15px 44px 15px 18px; font:700 15px var(--sans); list-style:none; position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; position:absolute; right:17px; top:50%; transform:translateY(-50%); font:400 22px var(--mono); color:var(--active); line-height:1}
.faq-item[open] summary::after{content:"\2212"}
.faq-a{padding:0 18px 16px}
.faq-a p{margin:0; font-size:14.5px; line-height:1.6; color:var(--muted)}

/* "other jurisdictions" footer link + main-page index */
.place-more{margin-top:30px; padding-top:24px; border-top:1px solid var(--border)}
.map-back-row{margin:0 0 22px}
.map-back{font:700 14px var(--mono); color:var(--active); text-decoration:none}
.map-back:hover{text-decoration:underline}

.jindex-wrap{max-width:1080px; margin:0 auto; padding:56px 22px 10px; text-align:center}
.jindex-title{font:800 26px var(--sans); letter-spacing:-.02em; margin:8px 0 8px}
.jindex-intro{color:var(--muted); max-width:62ch; margin:0 auto 26px; line-height:1.55}
.jindex{list-style:none; margin:0; padding:0; text-align:left;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:2px 16px}
.jindex li{margin:0}
.jindex a{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px;
  color:var(--text); text-decoration:none; font-size:14px; transition:.13s}
.jindex a:hover{background:var(--surface)}
.ji-dot{flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--none)}
.ji-dot.c-active{background:var(--active)}
.ji-dot.c-passed_pending{background:var(--scheduled)}
.ji-dot.c-pending{background:var(--pending)}
.ji-dot.c-blocked{background:var(--blocked)}
.ji-dot.c-vetoed{background:var(--vetoed)}
.ji-dot.c-failed{background:var(--failed)}
.ji-dot.c-none{background:var(--none)}
.ji-name{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width:560px){
  .place{padding:24px 16px 48px}
  .law-meta dt{flex-basis:100%}
  .jindex{grid-template-columns:1fr 1fr}
}

/* "full jurisdiction page" link in the map's click panel (added v2-b09) */
.action-full{display:block; margin:0 0 14px; padding:11px 14px; border-radius:10px;
  background:var(--active); color:#1a0a06; font:800 12.5px var(--mono); letter-spacing:.01em;
  text-decoration:none; text-align:center; transition:.15s}
.action-full:hover{filter:brightness(1.07)}
[data-theme="light"] .action-full{color:#fff}

/* jurisdiction index: filter box + collapsed "browse all" toggle (v2-b10) */
.jindex-box{margin:0 auto}
.jindex-search{display:block; width:100%; max-width:520px; box-sizing:border-box;
  margin:0 auto 16px; padding:12px 16px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font:500 15px var(--sans); transition:.15s}
.jindex-search::placeholder{color:var(--faint)}
.jindex-search:focus{outline:none; border-color:var(--active); box-shadow:0 0 0 3px rgba(220,59,34,.18)}
.jindex-details{text-align:center}
.jindex-details summary{cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  list-style:none; font:700 13px var(--mono); letter-spacing:.02em; color:var(--muted);
  padding:9px 17px; border-radius:999px; border:1px solid var(--border); background:var(--surface); transition:.15s}
.jindex-details summary::-webkit-details-marker{display:none}
.jindex-details summary:hover{color:var(--text); border-color:var(--active)}
.jindex-details summary::after{content:"\25BE"; font-size:10px; color:var(--active)}
.jindex-details[open] summary::after{content:"\25B4"}
.jindex-details[open] summary{margin-bottom:22px}
.jindex-none{color:var(--muted); font-size:14px; margin:6px 0 0}

/* filterable jurisdiction combobox on the submit form (v2-b11) */
.combo{position:relative}
.combo-results{position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:30; margin:0;
  padding:6px; list-style:none; max-height:290px; overflow-y:auto; background:var(--bg2);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 46px rgba(0,0,0,.5)}
.combo-opt{display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
  padding:9px 12px; border-radius:8px; font:500 14.5px var(--sans); color:var(--text)}
.combo-opt:hover,.combo-opt.on{background:var(--surface)}
.co-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.co-scope{flex:0 0 auto; font:700 10px var(--mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--active); background:rgba(220,59,34,.13); padding:2px 7px; border-radius:999px}
.co-scope.dim{color:var(--faint); background:var(--surface)}
.combo-none{padding:10px 12px; color:var(--muted); font:500 13.5px var(--sans)}
.combo-hint{color:var(--active); font:600 12.5px var(--mono); margin:8px 0 0}
.combo-input.combo-err{border-color:var(--active) !important}