/* ====================================================================
   usmap.css, the reach map (home #mission and the map lab).
   Scoped under .maplab- and .mm- so nothing here can leak onto other
   site pages. Colours are read from fable.css tokens where they exist,
   with local fallbacks so this file still works if loaded alone.

   R10 state (shared restorer, 2026-10-06, Dev Q10 "even the map from the
   previous ver was better"): the map renders the ROUND 8 way again. A lit
   glass plate that rests tilted in perspective, a crimson bloom under the
   hub, a coast light, a dense dot field that turns coral and brighter near
   Memphis, glowing crimson arcs that draw in, comets that run the arcs,
   labels and pin tooltips that open on hover or focus. The markup
   contract is the round 8 markup (see 99-R10-SHARED.md). The docked detail
   card of round 9 (#mmDetail, usmap.js) still works when a page carries it:
   the stage then gets .has-detail and the tooltips give way to the card.
   ==================================================================== */

:root{
  --mm-navy:var(--navy-ground, #0C1833);
  --mm-crimson:var(--crimson-vivid, #E23A46);
  --mm-coral:var(--crimson-glow, #FF6B75);
  --mm-ivory:var(--ink-on-dark, #F4F7FB);
  --mm-gold:#C9A55C;
}

.maplab-sec{
  background:var(--mm-navy);
  color:var(--mm-ivory);
  padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,5vw,4.5rem);
}

.maplab-inner{
  max-width:1400px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,420px) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}

@media (max-width:980px){
  .maplab-inner{grid-template-columns:1fr;}
}

/* ---- left column copy ---- */
.maplab-copy__kicker{
  display:inline-block;
  font-family:var(--label,'Space Grotesk',sans-serif);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mm-coral);
  margin:0 0 1.1rem;
}
.maplab-copy h2{
  font-family:var(--display,'Cabinet Grotesk',sans-serif);
  font-weight:800;
  font-size:clamp(2.1rem,1.5rem + 2.4vw,3.2rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 1.1rem;
}
.maplab-copy h2 em{
  font-style:normal;
  color:var(--mm-crimson);
}
.maplab-copy .mm-resolve{
  font-family:var(--body,'Satoshi',sans-serif);
  font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  line-height:1.35;
  margin:0 0 1rem;
  color:var(--mm-ivory);
}
.maplab-copy .mm-resolve em{
  font-style:normal;
  color:var(--mm-coral);
}
.maplab-copy .mm-zip{
  font-family:var(--body,'Satoshi',sans-serif);
  font-size:1.02rem;
  line-height:1.6;
  color:rgb(244 247 251 / .72);
  margin:0;
  max-width:46ch;
}

/* ---- right column: map stage ---- */
.maplab-stage{
  --mm-pad:clamp(.75rem,2vw,1.5rem);
  position:relative;
  width:100%;
  max-width:760px;
  min-width:0;
  margin:0 auto;
  perspective:1400px;
}

.maplab-stage__frame{
  position:relative;
  border-radius:18px;
  background:radial-gradient(120% 140% at 68% 20%, rgb(226 58 70 / .10), transparent 60%), var(--mm-navy);
  box-shadow:inset 0 0 0 1px rgb(244 247 251 / .08), 0 34px 80px -34px rgb(0 0 0 / .72);
  padding:var(--mm-pad);
  box-sizing:border-box;
  transform:rotateX(14deg) rotateY(0deg);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,.68,0,1.06);
  will-change:transform;
}
/* a soft crimson bloom under the hub, sells the plate as a lit object */
.maplab-stage__frame::before{
  content:"";
  position:absolute;
  left:var(--hub-left,65%);
  top:var(--hub-top,62%);
  width:46%;
  height:46%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgb(226 58 70 / .32), transparent 68%);
  filter:blur(18px);
  pointer-events:none;
  z-index:-1;
}

.mm-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

/* land mass: a lit gradient plate, not a flat navy void */
.mm-land{
  fill:url(#mmLandGrad);
  stroke:none;
}
.mm-coast-glow{
  fill:none;
  stroke:rgb(244 247 251 / .30);
  stroke-width:14;
  filter:blur(6px);
  pointer-events:none;
}

/* dot matrix: colour and alpha both come from the mmDotGlow radial
   gradient baked in the data build (coral and brighter near Memphis,
   settling to plain white father out), so no extra opacity needed here */
.mm-dots circle{
  fill:url(#mmDotGlow);
}

/* state + nation outlines */
.mm-mesh{
  fill:none;
  stroke:rgb(244 247 251 / .14);
  stroke-width:.6;
  stroke-linejoin:round;
}
.mm-nation{
  fill:none;
  stroke:rgb(244 247 251 / .38);
  stroke-width:1.1;
  stroke-linejoin:round;
}

/* ---- hub: Memphis ---- */
.mm-hub-halo{
  fill:none;
  stroke:var(--mm-crimson);
  stroke-width:1.4;
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
  will-change:transform,opacity;
}
.maplab-stage.is-armed .mm-hub-halo{
  animation:mmPulse 3.2s cubic-bezier(.22,.68,0,1.06) infinite;
}
.maplab-stage.is-armed .mm-hub-halo.mm-ring2{
  animation-delay:1.6s;
}
@keyframes mmPulse{
  0%{opacity:.55; transform:scale(1);}
  70%{opacity:0; transform:scale(2.6);}
  100%{opacity:0; transform:scale(2.6);}
}
.mm-hub-core{
  fill:var(--mm-crimson);
  filter:drop-shadow(0 0 6px rgb(226 58 70 / .9)) drop-shadow(0 0 16px rgb(255 107 117 / .55));
}
.maplab-stage.is-armed .mm-hub-core{
  animation:mmHubBeat 2.4s ease-in-out infinite;
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes mmHubBeat{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.12);}
}
.mm-hub-label{
  font-family:var(--label,'Space Grotesk',sans-serif);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  fill:#FBDEE1;
  paint-order:stroke;
  stroke:var(--mm-navy);
  stroke-width:3.5px;
  stroke-linejoin:round;
}

/* ---- arcs ---- */
.mm-arc{
  fill:none;
  stroke:url(#mmArcGrad);
  stroke-width:2.2;
  stroke-linecap:round;
  filter:url(#mmArcGlow);
  stroke-dasharray:1;
  stroke-dashoffset:0;
  opacity:.96;
  transition:opacity .35s ease, stroke-width .35s ease;
}
/* only hide-then-draw when JS has armed the stage; otherwise (no JS)
   arcs render fully drawn, satisfying the static no-JS requirement */
.maplab-stage.jsmap .mm-arc{
  stroke-dashoffset:1;
}
.maplab-stage.jsmap .mm-arc.is-drawn{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.1s var(--ease,cubic-bezier(.22,.68,0,1.06));
}
.mm-arc.is-bright{
  stroke-width:3;
  opacity:1;
}

/* comet travelling the arc: a short fading tail (moving dash on a ghost
   copy of the arc) plus a bright head riding the same timing on top */
.mm-comet-tail{
  fill:none;
  stroke:url(#mmArcGrad);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:.05 1;
  stroke-dashoffset:1;
  opacity:0;
  filter:url(#mmArcGlow);
}
.maplab-stage.is-armed .mm-comet-tail{
  animation:mmCometTail 3.6s linear infinite;
  animation-delay:var(--comet-delay,0s);
}
@keyframes mmCometTail{
  0%{stroke-dashoffset:1; opacity:0;}
  6%{opacity:.95;}
  92%{opacity:.95;}
  100%{stroke-dashoffset:.001; opacity:0;}
}
.mm-comet{
  opacity:0;
  fill:var(--mm-ivory);
  filter:drop-shadow(0 0 6px rgb(255 255 255 / .95)) drop-shadow(0 0 13px rgb(255 107 117 / .85));
}
.maplab-stage.is-armed .mm-comet{
  opacity:1;
  offset-rotate:0deg;
  animation:mmComet 3.6s linear infinite;
  animation-delay:var(--comet-delay,0s);
}
@keyframes mmComet{
  0%{offset-distance:0%; opacity:0;}
  6%{opacity:1;}
  92%{opacity:1;}
  100%{offset-distance:100%; opacity:0;}
}
.maplab-stage.is-paused .mm-comet,
.maplab-stage.is-paused .mm-comet-tail,
.maplab-stage.is-paused .mm-hub-halo,
.maplab-stage.is-paused .mm-hub-core,
.maplab-stage.is-paused .mm-pin-ring{
  animation-play-state:paused;
}

/* ---- destination pins ----
   The visible pin (halo + core) lives inside the SVG at its real
   projected x,y. The tap target is a plain HTML button positioned over
   it by percentage (left/top), because a real <button> with a glass
   tooltip child is far more robust than trying to make SVG text/shape
   children behave like a tooltip. JS pairs the two by data-city and
   toggles .is-hover / .is-bright to keep them in sync. */
.mm-pin-ring{
  fill:none;
  stroke:var(--mm-crimson);
  stroke-width:1.1;
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
}
.maplab-stage.is-armed .mm-pin-ring{
  animation:mmPinBreathe 4.2s ease-in-out infinite;
  animation-delay:calc(var(--order,0) * .35s);
}
@keyframes mmPinBreathe{
  0%,100%{opacity:.4; transform:scale(1);}
  50%{opacity:0; transform:scale(1.9);}
}
.mm-pin-halo{
  fill:var(--mm-crimson);
  opacity:.32;
  transition:opacity .25s ease, r .25s ease;
}
.mm-pin-core{
  fill:var(--mm-ivory);
  stroke:var(--mm-crimson);
  stroke-width:1.3;
  filter:drop-shadow(0 0 4px rgb(226 58 70 / .7));
  transition:r .22s var(--ease,ease), fill .22s ease;
}
.mm-pin-label{
  font-family:var(--label,'Space Grotesk',sans-serif);
  font-size:10.5px;
  font-weight:600;
  fill:rgb(244 247 251 / .8);
  paint-order:stroke;
  stroke:var(--mm-navy);
  stroke-width:3px;
  stroke-linejoin:round;
  transition:fill .22s ease;
}
.maplab-stage.jsmap .mm-pin-g{
  opacity:0;
  transform:scale(.4);
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .4s ease, transform .4s cubic-bezier(.22,.68,0,1.06);
}
.maplab-stage.jsmap .mm-pin-g.is-drawn{
  opacity:1;
  transform:scale(1);
}
.mm-pin-g.is-hover .mm-pin-halo{
  opacity:.6;
  r:10;
}
.mm-pin-g.is-hover .mm-pin-core{
  r:6.4;
  fill:var(--mm-coral);
}
.mm-pin-g.is-hover .mm-pin-label{
  fill:var(--mm-ivory);
}

.mm-pin-hits{
  position:absolute;
  inset:var(--mm-pad);
  pointer-events:none;
}
.mm-pin-hit{
  position:absolute;
  transform:translate(-50%,-50%);
  width:32px;
  height:32px;
  background:transparent;
  border:0;
  margin:0;
  padding:0;
  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.mm-pin-hit:focus-visible{
  outline:none;
  border-radius:50%;
  box-shadow:0 0 0 2px var(--mm-navy), 0 0 0 4px var(--mm-coral);
}

/* cursor-proximity dot brighten (pointer:fine only, class set by JS) */
.mm-dot-near{
  opacity:1 !important;
  fill:var(--mm-ivory) !important;
}

/* ---- tooltip (glass card), compact, beside the pin ----
   --side-l (set per city in the data build, for every city that has
   room on its left and would either overflow the stage or cover
   Memphis on its right) opens the tooltip to the left of the pin.
   --side-t (Tupelo, Nashville: close to the hub and already past the
   stage's midpoint, so neither side is safe) opens it straight up
   instead. Either way it never sits above/over Memphis or the arc
   still arriving from the hub side. */
.mm-tip{
  position:absolute;
  z-index:5;
  width:max-content;
  min-width:180px;
  max-width:280px;
  padding:.7rem .85rem .65rem;
  border-radius:10px;
  background:rgb(12 24 51 / .82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgb(244 247 251 / .18);
  box-shadow:0 18px 40px -18px rgb(0 0 0 / .6);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  text-align:left;
  white-space:normal;
}
.mm-tip::before{
  content:"";
  position:absolute;
  top:0; left:14px;
  width:24px; height:2px;
  background:linear-gradient(90deg,var(--mm-crimson),var(--mm-coral));
  border-radius:0 0 2px 2px;
}
.mm-tip b{
  display:block;
  font-family:var(--label,'Space Grotesk',sans-serif);
  font-size:.82rem;
  color:var(--mm-ivory);
  margin:.2rem 0 .15rem;
}
.mm-tip i{
  display:block;
  font-style:normal;
  font-size:.72rem;
  color:rgb(244 247 251 / .62);
}
.mm-tip ul{
  list-style:none;
  margin:.25rem 0 0;
  padding:0;
}
.mm-tip li{
  margin:.3rem 0 0;
  padding-top:.3rem;
  font-size:.82rem;
  border-top:1px solid rgb(244 247 251 / .12);
}

/* default / --side-l: tooltip opens to the left of the pin. The hit
   layer sits outside the tilted plate (see .mm-pin-hits below) so the
   tooltip is a plain flat card, no counter-rotation needed. */
.mm-tip{
  top:50%;
  right:calc(100% + 12px);
  transform-origin:right center;
  transform:translateY(-50%) translateX(6px) scale(.98);
}
.mm-pin-hit[aria-expanded="true"] .mm-tip,
.mm-pin-hit:hover .mm-tip,
.mm-pin-hit:focus-visible .mm-tip{
  opacity:1;
  transform:translateY(-50%) translateX(0) scale(1);
}

/* Tupelo / Nashville: tooltip opens straight up instead */
.mm-pin-hit--side-t .mm-tip{
  top:auto;
  right:auto;
  left:50%;
  bottom:calc(100% + 12px);
  transform-origin:center bottom;
  transform:translateX(-50%) translateY(6px) scale(.98);
}
.mm-pin-hit--side-t.mm-pin-hit[aria-expanded="true"] .mm-tip,
.mm-pin-hit--side-t:hover .mm-tip,
.mm-pin-hit--side-t:focus-visible .mm-tip{
  transform:translateX(-50%) translateY(0) scale(1);
}

.mm-cap{
  display:block;
  text-align:center;
  margin-top:.9rem;
  font-family:var(--label,'Space Grotesk',sans-serif);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgb(244 247 251 / .45);
}

/* ---- mobile tap-target list (replaces hover tooltips under 700px) ---- */
.mm-list{
  display:none;
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
}
.mm-list li{
  padding:.85rem 0;
  border-top:1px solid rgb(244 247 251 / .14);
  font-family:var(--body,'Satoshi',sans-serif);
  font-size:.92rem;
}
.mm-list li:last-child{border-bottom:1px solid rgb(244 247 251 / .14);}
.mm-list b{
  display:block;
  font-weight:600;
  color:var(--mm-ivory);
}
.mm-list span{
  display:block;
  color:rgb(244 247 251 / .6);
  font-size:.82rem;
  margin-top:.2rem;
}

@media (max-width:700px){
  .mm-tip{display:none;}
  .mm-list{display:block;}
}

/* ---- reduced motion: finished state, no loops, no tilt changes ---- */
@media (prefers-reduced-motion:reduce){
  .mm-hub-halo,.mm-hub-core,.mm-comet,.mm-comet-tail,.mm-pin-ring,
  .maplab-stage.is-armed .mm-hub-halo,
  .maplab-stage.is-armed .mm-hub-core,
  .maplab-stage.is-armed .mm-comet,
  .maplab-stage.is-armed .mm-comet-tail,
  .maplab-stage.is-armed .mm-pin-ring{
    animation:none !important;
  }
  .mm-comet,.mm-comet-tail,.mm-pin-ring{opacity:0 !important;}
  .mm-hub-halo{opacity:0;}
  .maplab-stage.jsmap .mm-arc,
  .maplab-stage.jsmap .mm-pin-g{
    transition:none !important;
    stroke-dashoffset:0 !important;
    opacity:1 !important;
    transform:scale(1) !important;
  }
  /* the plate keeps its fixed resting tilt; usmap.js never attaches the
     pointer-follow listener under reduced motion, so this is the only
     transform it will ever have */
  .maplab-stage__frame{
    transition:none !important;
  }
}

/* ---- R10: pages that carry the docked card (#mmDetail): the card replaces the tooltip and the phone list ---- */
.maplab-stage.has-detail .mm-tip{display:none;}
@media (max-width:700px){
  .maplab-stage.has-detail .mm-list{display:none;}
}

/* ---- the docked detail card: the stop that is selected (or touring) ---- */
.mm-detail{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:clamp(1rem,3vw,1.8rem);
  max-width:760px;
  min-height:7.5rem;
  margin:1.4rem auto 0;
  padding:20px 24px;
  border:1px solid rgb(244 247 251 / .16);
  border-radius:12px;
  background:none;
  box-shadow:none;
  transition:border-color .22s ease;
}
.mm-detail:empty{display:none;}
@media (hover:hover) and (pointer:fine){
  .mm-detail:hover{border-color:rgb(244 247 251 / .4);}
}
.mm-detail:focus-visible{outline:none;border-color:rgb(244 247 251 / .4);}
.mm-detail__yr{
  font-family:var(--display,'Cabinet Grotesk',sans-serif);
  font-weight:800;
  font-size:clamp(2.6rem,5vw,3.6rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.mm-detail__txt{min-width:0;}
.mm-detail__txt b{
  display:block;
  font-family:var(--display,'Cabinet Grotesk',sans-serif);
  font-weight:800;
  font-size:17px;
  line-height:1.3;
  color:var(--mm-ivory);
}
.mm-detail__txt i{
  display:block;
  margin-top:.15rem;
  font-style:normal;
  font-size:17px;
  line-height:1.4;
  color:rgb(244 247 251 / .72);
}
.mm-detail__txt ul{
  list-style:none;
  margin:.55rem 0 0;
  padding:0;
}
.mm-detail__txt li{
  margin:.3rem 0 0;
  font-size:17px;
  line-height:1.4;
  color:var(--mm-ivory);
}
.mm-detail__in{display:contents;}
/* the cross-fade is opacity only, 200ms */
.mm-detail > *{transition:opacity .2s ease;}
.mm-detail.is-swap > *{opacity:0;}
@media (max-width:560px){
  .mm-detail{grid-template-columns:1fr;gap:.6rem;padding:18px 20px;}
}

@media (prefers-reduced-motion:reduce){
  .mm-detail > *{transition:none;}
}