/* Shared look for the area code map options (stats page). Brand pink is an accent only. */
body.map-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.map-page main{flex:1;display:flex;flex-direction:column;padding-bottom:56px}
.mp{--mute:#6E6E73;--line:#ECECEE;--soft:#F6F6F7;flex:1;display:flex;flex-direction:column;width:100%}
.mp-eyebrow{display:flex;align-items:center;gap:12px;font:700 13px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.mp-h{font:900 clamp(40px,4.4vw,68px)/.98 var(--display);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.mp-h span{color:var(--pink);display:inline;white-space:normal}
.mp-sub{font:400 clamp(17px,1.35vw,20px)/1.45 var(--body);color:#3a3a3c;max-width:34em}
.mp-note{font:400 13px/1.4 var(--body);color:#8E8E93}
.hg-map{display:block;width:100%;height:auto;overflow:visible}
.mp b,.mp .num{font-variant-numeric:tabular-nums}
.tip{position:fixed;z-index:50;pointer-events:none;padding:10px 12px;border-radius:12px;background:#0B0B0C;color:#fff;font:500 13px/1.3 var(--body);opacity:0;transition:opacity .15s;white-space:nowrap}
.tip b{display:block;font:700 15px/1.2 var(--body)}
@media (max-width:760px){
  .map-page main{padding-bottom:28px}
  .mp-h{font-size:clamp(34px,10vw,44px)}
  .mp-sub{font-size:16px}
  .mp-eyebrow{font-size:12px}
}
/* shared split layout: words left, map right; stacks on phones */
.split{flex:1;display:grid;grid-template-columns:minmax(360px,.7fr) 1.6fr;gap:clamp(32px,4.4vw,80px);align-items:center;padding-top:8px}
.split .mapbox svg{max-height:calc(100vh - 200px)}
.split .txt > * + *{margin-top:22px}
.legend .lg-t{display:block;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#8E8E93;margin-bottom:10px}
.legend .lg-row{display:flex;flex-wrap:wrap;gap:6px 14px}
.legend .lg-s{display:inline-flex;align-items:center;gap:6px;font:500 13px/1 var(--body);color:#3a3a3c}
.legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
@media (max-width:760px){
  .split{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding-top:12px}
  .split .txt{display:contents}
  .split .txt > *{order:5}
  .split .txt > * + *{margin-top:0}
  .split .txt > .mp-eyebrow,.split .txt > .mp-h,.split .txt > .mp-sub{order:1}
  .split .mapbox{order:2;margin:4px 0 6px}
  .split .mapbox svg{max-height:none}
}
.m-only{display:none}
@media (max-width:760px){
  .m-only{display:block}
  .mini{margin-top:18px}
  .mini .ml-t{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#8E8E93;margin-bottom:8px}
  .mini ol{list-style:none;border-top:1px solid var(--line,#ECECEE)}
  .mini li{display:grid;grid-template-columns:20px 58px 1fr auto;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line,#ECECEE);font:500 15px/1 var(--body)}
  .mini li span:first-child{font-size:12px;color:#8E8E93}
  .mini .ac{font:800 15px/1 var(--display)}
  .mini .ct{color:#3a3a3c}
  .mini li > b:last-child{font:800 17px/1 var(--display)}
  .dark .mini li,.dark .mini ol{border-color:#2C2C30}.dark .mini .ct{color:#AEAEB2}.dark .mini li{color:#fff}
}

/* map page (option 1) */
.o1-top{list-style:none;border-top:1px solid var(--line)}
.o1-top li{display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font:500 18px/1 var(--body);cursor:default}
.o1-top li span:first-child{font:600 13px/1 var(--body);color:#8E8E93}
.o1-top li b{font:800 20px/1 var(--display);letter-spacing:-.02em}
.o1-top li:hover b{color:var(--pink)}
.hg-states path{transition:stroke .15s}
@media (max-width:760px){.o1-top li{font-size:16px;padding:11px 0}}

/* fit one screen */
.map-page .hgb-foot-beta{display:inline}
@media (min-width:761px){
 .mp1 .split{padding-top:0}
 .mp1 .split .txt > * + *{margin-top:18px}
 .mp1 .mp-h{font-size:clamp(40px,4vw,60px)}
 .mp1 .o1-top li{padding:11px 0;font-size:17px}
 .mp1 .split .mapbox svg{max-height:calc(100vh - 230px)}
 .map-page main{padding-bottom:44px}
}
@media (max-width:760px){.mp1 .o1-top li{padding:8px 0}.mp1 .split{gap:12px}.mp1 .split .mapbox{margin:2px 0 4px}}

/* Watch Us Grow active in the desktop nav */
@media (min-width:761px){html:not([data-tmenu]) .map-page .nav > .links > a[aria-current="page"]{color:var(--pink)}}

/* empty state (no live map stats yet): quiet grey map, short muted note */
.mp-empty{font:500 16px/1.4 var(--body);color:#8E8E93;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mp [hidden]{display:none!important}
@media (max-width:760px){.mp-empty{font-size:15px;padding:12px 0}}
@media (max-width:760px){.mp1:not(.is-live) .split{justify-content:center;padding-bottom:40px}}