/* The Count: Infrastructure — phased map banner (count-infra.js).
   Everything is scoped under .ig so it cannot touch the rest of the site (vzid.css uses .stage, .card, .pp, .track). */
.ig{
  --page:#05090d; --ink:#f2f0e8; --ink-soft:#aeb6bc; --ink-mute:#6e7880;
  --yellow:#f2c230; --rule:#1b2530; --panel:rgba(7,11,16,.86); --panel-line:rgba(255,255,255,.12);
  --sea:#05090d; --land:#131c24; --coast:#5d6b75; --state:#7d8a94;
  --road:#3c4954; --road-major:#6f7d88; --label:#f2f0e8; --state-label:#aeb6bc;
  --mmi6:rgba(242,194,48,.20); --mmi7:rgba(240,140,40,.30); --mmi8:rgba(224,62,45,.40); --mmi9:rgba(160,20,30,.55);
  --c-field:#c7f464;--c-col:#ff1f6b;--c-rec:#a98ef0;--c-reach:#ff9f43;--c-ce:#a78bfa;--c-ms:#4f97df;--c-google:#34d399;--c-fair1:#f7b6d2;--c-fair2:#ec5fa0;--c-fair3:#ff1f6b;
  position:relative;height:min(80vh,780px);min-height:560px;overflow:hidden;background:var(--sea);color:var(--ink);
  border:1px solid var(--rule);container-type:inline-size;container-name:ig;font-family:"IBM Plex Mono",ui-monospace,monospace
}
.ig *{box-sizing:border-box}
.ig-map{position:absolute;inset:0;background:var(--sea)}
.ig-map:focus:not(:focus-visible){outline:none}

/* title */
.ig-card{position:absolute;z-index:1000;top:16px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--panel);border:1px solid var(--panel-line);padding:10px 18px;text-align:center;white-space:nowrap;transition:opacity .5s ease}
.ig-card.out{opacity:0}
.ig-card h2{margin:0;font:600 clamp(16px,2vw,24px)/1.2 Fraunces,Georgia,serif;white-space:nowrap;color:var(--ink)}
.ig-card h2 a{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
.ig-card h2 a:hover{color:var(--yellow)}
@keyframes igfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* box beside the map */
.ig-legend{position:absolute;z-index:1000;right:16px;top:84px;width:300px;max-height:calc(100% - 164px);overflow-y:auto;background:var(--panel);border:1px solid var(--panel-line);padding:10px 12px;font-size:12px;display:grid;gap:5px;transition:opacity .8s ease,transform .8s ease}
.ig-legend.off{opacity:0;transform:translateX(12px);pointer-events:none}
.ig-legend.wide{width:380px}
.ig-legend .grp{margin-top:4px;color:var(--ink-soft);font-size:11.5px}
.ig-legend .grp a{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:2px}
.ig-legend .row{display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .5s}
.ig-legend .row.on{opacity:1}
.ig-legend .row span{flex:1;line-height:1.3}
.ig-legend .row b{font-weight:400;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ig-legend summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;font-weight:500;color:var(--ink-soft);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.ig-legend summary::-webkit-details-marker{display:none}
.ig-legend summary::after{content:"+";color:var(--yellow);font-size:13px}
.ig-legend details[open] summary::after{content:"\2212"}
.ig-legend details[open] summary{margin-bottom:6px}
.ig-legend summary:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.ig-legend .body{display:grid;gap:5px}
.ig-legend .tot{display:flex;justify-content:space-between;gap:10px;margin-top:4px;color:var(--ink);font-size:12px;opacity:0;transition:opacity .5s}
.ig-legend .tot.on{opacity:1}
.ig-legend .tot b{font:600 15px/1 Fraunces,Georgia,serif;color:var(--yellow);font-variant-numeric:tabular-nums}
.ig-legend .small{margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--ink-mute)}
.ig-legend .gov-r{display:flex;justify-content:space-between;gap:10px;opacity:0;transition:opacity .6s}
.ig-legend .gov-r.on{opacity:1}
.ig-legend .gov-r b{font:600 14px/1.1 Fraunces,Georgia,serif;color:var(--yellow);font-variant-numeric:tabular-nums}
.ig-legend .gov-r em{font-style:normal;color:var(--ink-mute)}
.ig-legend .gov-r em a{white-space:nowrap;color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:2px}
.ig-legend .gov-warn{color:var(--ink);font-size:11.5px;line-height:1.35;padding:6px 8px;border-left:2px solid var(--yellow);background:rgba(242,194,48,.07)}
.ig-legend .gov-census{display:flex;justify-content:space-between;gap:10px;color:var(--ink)}
.ig-legend .gov-census b{font:600 14px/1.1 Fraunces,Georgia,serif;color:var(--yellow);font-variant-numeric:tabular-nums}
.ig-legend .gov-note{margin:0;font-size:11px;line-height:1.4;color:var(--ink-soft);opacity:0;transition:opacity .6s}
.ig-legend .gov-note.on{opacity:1}
.ig-legend .gov-t{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums}
.ig-legend .gov-t th{font-weight:400;color:var(--ink-mute);text-align:right;padding:0 0 3px 6px;white-space:nowrap}
.ig-legend .gov-t td a,.ig-legend .gov-t th a{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:2px}
.ig-legend .gov-t td{text-align:right;padding:3px 0 3px 6px;border-top:1px solid var(--rule);color:var(--ink-soft);white-space:nowrap}
.ig-legend .gov-t td:first-child,.ig-legend .gov-t th:first-child{text-align:left;padding-left:0;color:var(--ink);white-space:normal}
.ig-legend .gov-t tr.last td,.ig-legend .gov-t td.last{color:var(--yellow);font-weight:600}
.ig-legend .gov-t tr.c,.ig-legend .gov-t .c{opacity:0;transition:opacity .6s}
.ig-legend .gov-t tr.c.on,.ig-legend .gov-t .c.on{opacity:1}
.ig .sw{width:18px;height:12px;flex:none}
.ig .sw.dot{width:9px;height:9px;margin-inline:4px}
.ig .sw.f2,.ig .sw.f1,.ig .sw.f0{width:10px;height:10px;margin-inline:4px;transform:rotate(45deg);border-radius:1px}
.ig .sw.f2{background:var(--c-field)} .ig .sw.f1{border:2px solid var(--c-field)} .ig .sw.f0{border:1px solid var(--c-field);width:7px;height:7px;margin-inline:5px}
.ig .sw.rec{width:9px;height:9px;border-radius:50%;margin-inline:4px}
.ig-legend .gov-r b a{color:inherit;text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:2px}
.ig-legend .gov-r.st{color:var(--ink-soft)}.ig-legend .gov-r.st b{font-size:13px}
/* on-map label for the dwelling numbers */
.ig .dw-key{display:flex;gap:7px;align-items:center;background:var(--panel);border:1px solid var(--panel-line);padding:5px 9px;font:500 11px/1.2 "IBM Plex Mono",monospace;color:var(--ink);opacity:0}
.ig .dw-key i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--yellow);background:rgba(242,194,48,.16);flex:none}
@container ig (max-width:760px){.ig .dw-key{font-size:10px;padding:4px 7px}}
/* UNDRR phase */
.ig-legend .u-head{margin:0;font:600 17px/1.25 Fraunces,Georgia,serif;color:var(--yellow)}
.ig-legend .u-key{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--ink-soft)}
.ig-legend .u-key span{display:flex;gap:5px;align-items:center}
.ig .sw.u1{background:#feffd5}.ig .sw.u2{background:#fee19d}.ig .sw.u3{background:#feb350}.ig .sw.u4{background:#ef8120}.ig .sw.u5{background:#cc560c}.ig .sw.u6{background:#993504}
.ig .sw.u1,.ig .sw.u2,.ig .sw.u3,.ig .sw.u4,.ig .sw.u5,.ig .sw.u6{width:14px;height:10px}
.ig-legend .u-st{font-size:12px;line-height:1.5;color:var(--yellow);opacity:0;transition:opacity .5s}
.ig-legend .u-st.on{opacity:1}
.ig-legend .u-st b{font-weight:600}

/* phase bar: one strip, one progress line */
.ig-bar{position:absolute;z-index:1001;left:0;right:0;bottom:0;display:flex;gap:6px;align-items:stretch;padding:10px 16px;background:linear-gradient(transparent,rgba(5,9,13,.92) 35%)}
.ig-bar button{font:500 12px/1 "IBM Plex Mono",monospace;background:var(--panel);color:var(--ink-soft);border:1px solid var(--panel-line);border-radius:2px;cursor:pointer;padding:0 12px;min-height:40px}
.ig-bar button:hover{color:var(--ink);border-color:var(--ink-soft)}
.ig-bar button:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.ig-phs{flex:1;min-width:0;display:flex;position:relative}
/* each button as wide as its name, so no name is cut off; the spare width is shared out */
.ig-bar .ig-ph{flex:1 0 auto;min-width:0;position:relative;overflow:hidden;text-align:left;display:flex;align-items:center;gap:8px;white-space:nowrap;border-radius:0;border-right-width:0}
.ig-bar .ig-ph:first-child{border-radius:2px 0 0 2px}
.ig-bar .ig-ph:last-of-type{border-right-width:1px;border-radius:0 2px 2px 0}
.ig-bar .ig-ph[aria-current="true"]{color:var(--ink);background:rgba(242,194,48,.08)}
.ig-track{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);pointer-events:none}
.ig-track i{display:block;height:100%;width:0;background:var(--yellow)}

/* map furniture */
.ig .plabel{background:none;border:0}
.ig .plabel span{display:block;white-space:nowrap}
.ig .plabel.state span{transform:translate(-50%,-50%);color:var(--state-label);font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 3px var(--land),0 0 3px var(--land)}
.ig .plabel.cap span{transform:translate(8px,-50%);color:var(--label);font:600 13px/1 Fraunces,Georgia,serif;text-shadow:0 0 3px var(--page),0 0 3px var(--page),0 0 2px var(--page)}
.ig .callout{position:absolute;left:0;top:0;width:0;height:0}
.ig .callout.anim{animation:igfade 1.8s ease both}
.ig .callout svg{position:absolute;left:0;top:0;overflow:visible}
.ig .callout line{stroke:var(--yellow);stroke-width:1;opacity:.7}
.ig .callout span{position:absolute;white-space:nowrap;text-align:center;color:var(--ink);font:500 11px/1.25 "IBM Plex Mono",monospace;text-shadow:0 0 3px var(--page),0 0 3px var(--page),0 0 3px var(--page)}
.ig .callout b{display:block;font:600 15px/1.1 Fraunces,Georgia,serif;color:var(--yellow)}
.ig .callout em{font-style:normal;color:var(--ink-soft);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase}
.ig .epi{background:none;border:0}
.ig .epi::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px var(--page)}
.ig .fpt{background:none;border:0}
.ig .fpt::before{content:"";position:absolute;inset:2px;transform:rotate(45deg);background:var(--page);border:2px solid var(--c-field)}
.ig .fpt.f2::before{background:var(--c-field);border-color:var(--page);border-width:1px}
.ig .fpt.f0::before{inset:4px;border-width:1px}
.ig .leaflet-container{font-family:"IBM Plex Mono",ui-monospace,monospace;background:var(--sea)}
.ig .leaflet-container a{color:var(--yellow)}
.ig .leaflet-bar a,.ig .leaflet-bar a:hover{background:var(--panel);color:var(--ink);border-bottom-color:var(--panel-line)}
.ig .leaflet-bar{border:1px solid var(--panel-line)!important;box-shadow:none!important}
.ig .leaflet-bottom.leaflet-left{bottom:62px}
.ig .leaflet-bottom.leaflet-right{bottom:60px}
.ig .leaflet-control-attribution{background:var(--panel)!important;color:var(--ink-mute)!important;font-size:10.5px}
.ig .leaflet-popup-content-wrapper,.ig .leaflet-popup-tip{background:var(--ink);color:var(--page);box-shadow:none;border-radius:2px}
.ig .leaflet-popup-content{margin:9px 12px;font:12.5px/1.45 "IBM Plex Mono",monospace}
.ig .leaflet-popup-content .pa{opacity:.7;font-size:11px}
.ig .leaflet-container a.leaflet-popup-close-button{color:var(--page)}
.ig .fadepane{transition:opacity 1.2s ease}

/* narrow banner (phones): box docks above the bar, smaller title and callouts */
/* between phone and full width the four names wrap onto two lines rather than being cut */
@container ig (max-width:980px){.ig-bar .ig-ph{flex:1 1 0;white-space:normal;line-height:1.2}}
@container ig (max-width:760px){
  .ig-card{padding:9px 12px;top:10px;max-width:calc(100% - 20px)}
  .ig-card h2{font-size:4.2cqw}
  .ig-legend,.ig-legend.wide{left:10px;right:10px;top:auto;bottom:64px;width:auto;max-height:30%}
  .ig-legend.off{transform:translateY(12px)}
  .ig .leaflet-left .leaflet-control-zoom{display:none}
  .ig .leaflet-bottom.leaflet-right{display:none}
  .ig .callout b{font-size:12px}.ig .callout em{font-size:8.5px}
  .ig-bar .ig-ph{white-space:normal;font-size:10.5px;line-height:1.2;justify-content:center;text-align:center;padding:0 6px}
}
@media (max-width:760px){.ig{height:82vh;min-height:520px}}

/* a jump from the phase bar shows the finished frame: nothing fades in */
.ig.instant .ig-card,.ig.instant .ig-card *,.ig.instant .ig-legend,.ig.instant .ig-legend *,.ig.instant .callout,.ig.instant .plabel span{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.ig *,.ig *::before,.ig *::after{animation:none!important;transition:none!important}}