/* glen-design: v1 */
/* ============================================================================
   Map: every site at a glance. The islands as lit clay on the world floor,
   pins sized by sales and coloured by health, the lock-on, the ranked list
   that becomes the chosen site, and the bento below. Tokens only; the clay
   colours are the Spatial Core's own (--w-*), so Map and Core are one world.
   ========================================================================== */

.mp .is-ok{ --pc: var(--ok); }
.mp .is-warn{ --pc: var(--warn); }
.mp .is-bad{ --pc: var(--bad); }

.mp .page-head > div:first-child{ flex: 1 1 480px; min-width: 0; }
.mp-actions{ display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; flex: 0 1 auto; }

/* --- four big numbers ---------------------------------------------------- */
.mp-kpis{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.mp-kpi{ display: grid; gap: var(--s1); align-content: start; padding: var(--s4) var(--s5); color: var(--ink-dim); }
.mp-kpi small{ font-size: var(--fs-sm); font-weight: 600; }
.mp-kpi .fig{ font-size: var(--fs-2xl); color: var(--ink); }
.mp-kpi-sub{ font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }

/* --- the hero: map stage beside the side column --------------------------- */
.mp-hero{ display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s4); align-items: stretch; margin-bottom: var(--s5); }
.mp-stage{ padding: 0; overflow: hidden; border-radius: var(--r-lg); display: flex; flex-direction: column; }

.mp-bar{ display: flex; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); flex-wrap: nowrap;
  min-height: 56px; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.mp-crumb{ display: flex; align-items: center; gap: var(--s1); min-width: 0; flex: 1 1 auto; overflow: hidden; }
.mp-crumb-all span{ white-space: nowrap; }
.mp-crumb-all{ display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--h-control); padding: 0 var(--s2); margin-left: calc(-1 * var(--s2));
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: default; font: 600 var(--fs-base)/1.2 var(--font-body);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out); }
.mp-crumb-all .ic{ width: 18px; height: 18px; color: var(--accent); }
.mp-stage.is-sel .mp-crumb-all{ cursor: pointer; color: var(--accent); }
.mp-crumb-sel{ display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; opacity: 0; transform: translateX(calc(-1 * var(--s2)));
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mp-crumb-sel .ic{ width: 14px; height: 14px; color: var(--ink-faint); flex: none; }
.mp-crumb-sel b{ font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-stage.is-sel .mp-crumb-sel{ opacity: 1; transform: none; }

.mp-legend{ display: flex; align-items: center; gap: var(--s1) var(--s2); flex-wrap: nowrap; justify-content: flex-end; flex: none; font-size: var(--fs-sm); color: var(--ink-dim); }
.mp-lg{ white-space: nowrap; }
.mp-lg{ display: inline-flex; align-items: center; gap: var(--s2); min-height: 28px; padding: 0 var(--s2); border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.mp-sw{ width: 12px; height: 12px; border-radius: 50%; background: color-mix(in oklab, var(--pc) 26%, var(--w-clay)); box-shadow: inset 0 0 0 2px var(--pc); flex: none; }
.mp-sz{ width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-faint); flex: none; }
.mp-sz--lg{ width: 16px; height: 16px; margin-left: calc(-1 * var(--s1)); }
.mp-sq{ width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--ink-dim); flex: none; }

/* --- the box: the viewBox's own aspect, and the container for cqw ------- */
.mp-box{
  --s: 1; --tx: 0; --ty: 0;
  position: relative; aspect-ratio: var(--ar, 1000 / 760); container-type: inline-size; overflow: hidden; flex: none;
  background: radial-gradient(120% 100% at 50% 38%, var(--w-floor), var(--bg-deep));
}
.mp-world{ position: absolute; inset: 0; transform-origin: 0 0;
  transform: translate(calc(var(--tx) * 1cqw), calc(var(--ty) * 1cqw)) scale(var(--s));
  transition: transform var(--dur-drawer) var(--ease-in-out); }
.mp-base, .mp-svg{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.mp-base{ pointer-events: none; }
.mp-box.no-tween .mp-world, .mp-box.no-tween .mp-lbl, .mp-box.no-tween .mp-tag{ transition: none; }

.mp-sea{ opacity: .9; }
.mp-dotgrid{ fill: var(--w-mark); }
.mp-grat line{ stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-grat text{ font-family: var(--font-mono); fill: var(--ink-faint); letter-spacing: .04em; transition: opacity var(--dur-base) var(--ease-out); }
.mp-box.has-sel .mp-grat text{ opacity: 0; }
.mp-landset{ filter: drop-shadow(0 10px 22px color-mix(in oklab, var(--mask) calc(var(--w-shadow) * 45%), transparent)); }
.mp-slab{ fill: var(--w-clay-2); }
.mp-lit-a{ stop-color: var(--w-clay); }
.mp-lit-b{ stop-color: color-mix(in oklab, var(--w-clay) 78%, var(--w-clay-2)); }
.mp-coast{ fill: none; stroke: color-mix(in oklab, var(--accent) 42%, var(--w-clay-2)); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mp-radar circle{ fill: none; stroke: color-mix(in oklab, var(--accent) 26%, transparent); stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.mp-radar line{ stroke: color-mix(in oklab, var(--accent) 30%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-radar{ transition: opacity var(--dur-slow) var(--ease-out); }

/* the sweep: over the land, under the pins; it is the assistant looking */
.mp-sweep{
  position: absolute; pointer-events: none; border-radius: 50%; aspect-ratio: 1;
  left: calc((var(--cx) - var(--rr)) * 1cqw); top: calc((var(--cy) - var(--rr)) * 1cqw); width: calc(var(--rr) * 2 * 1cqw);
  background: conic-gradient(from 0deg, transparent 0deg 286deg, var(--tint) 334deg, var(--glow) 358deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle, var(--mask) 18%, transparent 70.5%);
          mask-image: radial-gradient(circle, var(--mask) 18%, transparent 70.5%);
  opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out);
}
.mp-box.has-sel .mp-sweep, .mp-box.has-sel .mp-radar{ opacity: 0; }

/* true-position leaders for pins that were nudged apart */
.mp-trues line{ stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-trues circle{ fill: var(--ink-faint); }
.mp-trues g{ transition: opacity var(--dur-base) var(--ease-out); }

/* --- pins ------------------------------------------------------------------ */
.mp-pin{ cursor: pointer; outline: none; transition: opacity var(--dur-base) var(--ease-out); }
.mp-pin-in, .mp-pin-z{ transform-box: fill-box; transform-origin: center; }
.mp-pin-z{ transition: transform var(--dur-base) var(--ease-out); }
.mp-hit{ fill: transparent; }
.mp-dot{ fill: color-mix(in oklab, var(--pc) 24%, var(--w-clay)); stroke: var(--pc); stroke-width: 1.8; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px color-mix(in oklab, var(--pc) 42%, transparent)); transition: fill var(--dur-base) var(--ease-out); }
.mp-eye{ fill: var(--pc); }
.mp-halo{ fill: none; stroke: var(--pc); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center;
  transition: opacity var(--dur-base) var(--ease-out); }
.mp-pin.is-hot .mp-pin-z{ transform: scale(1.24); }
.mp-pin.is-hot .mp-halo{ opacity: .7; }
.mp-pin.is-hot .mp-dot{ fill: color-mix(in oklab, var(--pc) 40%, var(--w-clay)); }
.mp-pin:focus-visible .mp-halo{ opacity: 1; stroke: var(--accent); stroke-width: 2; }
.mp-pin:focus-visible .mp-pin-z{ transform: scale(1.24); }
.mp-pin.is-sel .mp-halo{ opacity: 1; stroke: var(--accent); }
.mp-pin.is-sel .mp-dot{ fill: color-mix(in oklab, var(--pc) 44%, var(--w-clay)); filter: drop-shadow(0 0 10px var(--glow)); }

/* dimming: hover, legend, selection, filter. One rule each, in that order */
.mp-box.has-hot .mp-pin:not(.is-hot), .mp-box.has-hot .mp-lbl:not(.is-hot){ opacity: .36; }
.mp-box.has-lg .mp-pin:not(.is-lg), .mp-box.has-lg .mp-lbl:not(.is-lg){ opacity: .16; }
.mp-box.has-sel .mp-pin:not(.is-sel):not(.is-hot){ opacity: .2; }
.mp-box.has-sel .mp-trues g:not(.is-sel){ opacity: 0; }
.mp-box .mp-pin.is-out, .mp-box .mp-trues g.is-out{ opacity: 0; pointer-events: none; }
.mp-box .mp-pin.is-out .mp-pin-z{ transform: scale(.4); }

/* the spotlight that settles round a chosen site */
.mp-spot{ position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle farthest-corner at var(--sx, 50%) var(--sy, 50%), transparent 0 10%, color-mix(in oklab, var(--w-floor) 62%, transparent) 72%);
  transition: opacity var(--dur-drawer) var(--ease-out); }
.mp-box.has-sel .mp-spot{ opacity: 1; }

/* --- labels: in HTML so they stay crisp at any zoom, glued to their pins ---- */
.mp-labels{ position: absolute; inset: 0; pointer-events: none; }
.mp-leads{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: opacity var(--dur-base) var(--ease-out); }
.mp-leads line{ stroke: var(--line-2); stroke-width: 1; transition: opacity var(--dur-base) var(--ease-out); }
.mp-leads line.is-out{ opacity: 0; }
.mp-lbl{
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap;
  padding: 2px var(--s2); border-radius: 7px; font: 600 var(--fs-sm)/1.3 var(--font-body); color: var(--ink);
  background: color-mix(in oklab, var(--w-clay) 86%, transparent); box-shadow: 0 0 0 1px var(--line), 0 2px 6px color-mix(in oklab, var(--mask) calc(var(--w-shadow) * 40%), transparent);
  transform: translate(calc((var(--x) * var(--s) + var(--tx)) * 1cqw + var(--ox) * 1px), calc((var(--y) * var(--s) + var(--ty)) * 1cqw + var(--oy) * 1px));
  transition: transform var(--dur-drawer) var(--ease-in-out), opacity var(--dur-base) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mp-lbl.is-hot{ z-index: 2; color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 6px 16px var(--glow); }
.mp-lbl.is-spare{ opacity: 0; pointer-events: none; }
.mp-lbl.is-spare.is-hot{ opacity: 1; }
.mp-box.has-sel .mp-lbl, .mp-box.has-sel .mp-leads{ opacity: 0; pointer-events: none; }
.mp-box .mp-lbl.is-out{ opacity: 0; pointer-events: none; }

/* the lock readout above the chosen pin */
.mp-tag{
  position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 2px; padding: 6px var(--s3); pointer-events: none; white-space: nowrap;
  border-radius: var(--r-sm); background: var(--mat-float); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent);
  transform: translate(calc((var(--x, 50) * var(--s) + var(--tx)) * 1cqw - 50%), calc((var(--y, 30) * var(--s) + var(--ty)) * 1cqw - var(--r, 20) * var(--s) * 1px - 100%));
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-drawer) var(--ease-in-out);
}
.mp-tag b{ font-size: var(--fs-sm); font-weight: 600; }
.mp-tag span{ font: 500 var(--fs-micro)/1.2 var(--font-mono); color: var(--accent); letter-spacing: .04em; }
.mp-box.has-sel .mp-tag{ opacity: 1; transition-delay: var(--dur-slow), 0s; }

/* the reticle: brackets, a dashed ring, four ticks */
.mp-ret{ pointer-events: none; }
.mp-ret path{ fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp-ret line{ stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp-ret-in, .mp-ret-ring{ transform-box: fill-box; transform-origin: center; }
.mp-ret-ring{ fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; opacity: .75; }

/* hover card on the map */
.mp-tip{ position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; display: grid; gap: 2px; min-width: 190px; max-width: 280px;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--ink-dim); font-size: var(--fs-sm); line-height: 1.4;
  background: var(--mat-float); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); }
.mp-tip b{ color: var(--ink); font-weight: 600; font-size: var(--fs-base); }
.mp-tip em{ font-style: normal; font-weight: 600; }

/* the assistant's readout, bottom left, on open sea */
.mp-readout{ position: absolute; left: var(--s3); bottom: var(--s3); z-index: 3; display: flex; align-items: center; gap: var(--s2); max-width: calc(100% - 2 * var(--s3));
  padding: 6px var(--s3) 6px 6px; border-radius: var(--r-pill); background: var(--mat-float); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); transition: opacity var(--dur-base) var(--ease-out); }
.mp-readout > span:last-child{ display: grid; min-width: 0; line-height: 1.3; }
.mp-readout b{ font-size: var(--fs-micro); font-weight: 600; }
.mp-readout small{ font-size: var(--fs-micro); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-nogeo{ position: absolute; right: var(--s3); top: var(--s3); z-index: 3; display: flex; gap: var(--s2); align-items: center; max-width: 320px; margin: 0;
  padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--mat-float); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); font-size: var(--fs-micro); color: var(--ink-dim); }
.mp-nogeo .ic{ width: 14px; height: 14px; flex: none; }

/* --- the side column: the ranked list, or the chosen site ------------------ */
.mp-side{ padding: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; border-radius: var(--r-lg); contain: size; }
.mp-listv, .mp-sitev{ grid-area: 1 / 1; min-height: 0; display: flex; flex-direction: column;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.mp-listv .card-head{ padding: var(--s4) var(--s5) var(--s2); margin: 0; }
.mp-rows{ flex: 1; min-height: 0; overflow: auto; padding: 0 var(--s2) var(--s5); scrollbar-width: thin; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, var(--mask) calc(100% - var(--s6)), transparent);
          mask-image: linear-gradient(180deg, var(--mask) calc(100% - var(--s6)), transparent); }
.mp-sitev{ overflow: auto; opacity: 0; transform: translateX(var(--s5)); overscroll-behavior: contain; scrollbar-width: thin; }
.mp-side.is-site .mp-listv{ opacity: 0; transform: translateX(calc(-1 * var(--s5))); pointer-events: none; }
.mp-side.is-site .mp-sitev{ opacity: 1; transform: none; }

.mp-row{ min-height: 56px; gap: var(--s3); padding: var(--s2) var(--s3); }
.mp-row .t{ font-size: var(--fs-base); }
.mp-row .s{ font-size: var(--fs-sm); }
.mp-row::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--tint-2); opacity: 0; pointer-events: none; }
.mp-row.is-alert::after{ background: var(--bad-tint); }
.mp-row.is-hot{ background: var(--surface-2); }
.mp-row.is-sel{ background: var(--tint); box-shadow: inset 3px 0 0 var(--accent); }
.mp-dev{ position: relative; width: 56px; height: 6px; flex: none; border-radius: var(--r-pill); background: var(--surface-3); }
.mp-dev::before{ content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-2); }
.mp-dev i{ position: absolute; left: 50%; top: 0; bottom: 0; width: 50%; border-radius: var(--r-pill); background: currentColor; transform-origin: left center; transform: scaleX(var(--v)); }
.mp-rv{ min-width: 60px; text-align: right; font-size: var(--fs-base); font-weight: 500; }
.mp-noplan{ font-size: var(--fs-micro); color: var(--ink-faint); white-space: nowrap; }
.mp-bell{ display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 0 var(--s2); border-radius: var(--r-pill); background: var(--bad-tint); color: var(--bad); font-size: var(--fs-micro); flex: none; }
.mp-bell .ic{ width: 12px; height: 12px; }
.mp-rows-empty{ padding: var(--s6) var(--s4); }

/* one site */
.mp-sd-head{ position: sticky; top: 0; z-index: 1; padding: var(--s3) var(--s5) var(--s4); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--tint), transparent), var(--surface-1); }
.mp-sd-head{ display: grid; justify-items: start; }
.mp-sd-back{ margin: 0 0 var(--s2) calc(-1 * var(--s2)); }
.mp-sd-head h2{ font-size: var(--fs-xl); margin-top: var(--s2); outline: none; }
.mp-sd-body{ padding: var(--s4) var(--s5) var(--s5); }
.mp-sd-chips{ display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.mp-sd-chips .dot{ width: 7px; height: 7px; }
.mp-figs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s2); margin-bottom: var(--s4); }
.mp-fig{ display: grid; gap: 2px; align-content: start; padding: var(--s3); border-radius: var(--r-sm); color: var(--ink);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.mp-fig small{ font-size: var(--fs-micro); font-weight: 600; color: var(--ink-dim); }
.mp-fig .fig{ font-size: var(--fs-xl); }
.mp-fig > span{ font-size: var(--fs-micro); font-weight: 600; line-height: 1.35; }
.mp-sub{ color: var(--ink-dim); }
.mp-fig--ring{ display: flex; align-items: center; gap: var(--s3); grid-column: 1 / -1; }
.mp-fig--ring > span{ display: grid; gap: 2px; }
.mp-fig--ring .ring{ --thick: 6px; }
.mp-fig--ring .ring > span{ font-size: var(--fs-micro); }
.mp-short{ font-weight: 600; }
.mp-need .mp-why{ font-weight: 400; color: var(--ink-dim); margin: 0 0 var(--s2); }
.need.is-ok .need-bar{ background: var(--ok); }
.need.is-info .need-bar{ background: var(--accent); }
.mp-sys{ display: grid; gap: 2px; }
.mp-sysi{ display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 48px; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.mp-sysi > span:last-child{ display: grid; min-width: 0; line-height: 1.3; }
.mp-sysi b{ font-size: var(--fs-sm); font-weight: 600; }
.mp-sysi small{ font-size: var(--fs-micro); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-also{ font-size: var(--fs-sm); color: var(--ink-dim); margin: var(--s2) 0 0; }
.mp-proj .ic:first-child{ width: 18px; height: 18px; color: var(--accent); flex: none; }
.mp-proj .ic:last-child{ width: 16px; height: 16px; color: var(--ink-faint); flex: none; }

/* --- the bento ---------------------------------------------------------------- */
.mp-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s4); align-items: start; }
.mp-say{ font-size: var(--fs-base); color: var(--ink-dim); margin: 0 0 var(--s4); line-height: 1.5; }
.mp-fly{ display: grid; gap: var(--s3); }
.mp-fly-h, .mp-fly-r{ display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: center; gap: var(--s3); }
.mp-fly-h{ font-size: var(--fs-sm); font-weight: 600; }
.mp-fly-h span:first-child{ text-align: right; }
.mp-fly-l{ text-align: center; font-size: var(--fs-sm); color: var(--ink-dim); line-height: 1.25; transition: color var(--dur-fast) var(--ease-out); }
.mp-fly-a, .mp-fly-b{ display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.mp-fly-a{ justify-content: flex-end; }
.mp-fly b{ font-size: var(--fs-base); font-weight: 500; white-space: nowrap; }
.mp-fly-r i{ position: relative; flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.mp-fly-r i::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(var(--p)); transition: filter var(--dur-fast) var(--ease-out); }
.mp-fly-a i::after{ transform-origin: right center; }
.mp-fly-b i::after{ transform-origin: left center; }

.mp-hot-list, .mp-wh-list{ display: grid; gap: var(--s2); }
.mp-hot-i{ display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3); border: 0; border-radius: var(--r); background: var(--surface-2);
  color: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.mp-hot-i .ring{ transition: transform var(--dur-base) var(--ease-out); }
.mp-hot-t{ display: grid; gap: 2px; flex: 1; min-width: 0; line-height: 1.3; }
.mp-hot-t b{ font-size: var(--fs-base); font-weight: 600; }
.mp-hot-t small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.mp-hot-t em{ font-style: normal; font-size: var(--fs-sm); font-weight: 600; }
.mp-hot-i > .ic{ width: 16px; height: 16px; color: var(--ink-faint); flex: none; transition: transform var(--dur-base) var(--ease-out); }
.mp-wh-i{ display: grid; gap: var(--s2); width: 100%; padding: var(--s3); border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; text-align: left; cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.mp-wh-t{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.mp-wh-t b:first-child{ font-size: var(--fs-base); font-weight: 600; }
.mp-wh-t .num{ font-size: var(--fs-base); font-weight: 500; }
.mp-wh-bar{ display: block; height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.mp-wh-bar i{ display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(var(--p)); }

/* --- motion: entrance, ambient, feedback. Additive, so reduced motion gets
       the finished composition ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  /* entrance: the coast strokes in, the land fills, pins land outward from
     the radar centre, then labels settle */
  .mp-stage.in .mp-coast{ stroke-dasharray: 1; animation: mp-draw calc(var(--dur-reveal) * 2) var(--ease-in-out) backwards; animation-delay: var(--dur-base); }
  .mp-stage.in .mp-land, .mp-stage.in .mp-slab{ animation: mp-fade var(--dur-reveal) var(--ease-out) backwards; animation-delay: var(--dur-reveal); }
  .mp-stage.in .mp-grat{ animation: mp-fade var(--dur-reveal) var(--ease-out) backwards; }
  .mp-stage.in .mp-pin-in{ animation: mp-land var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--dur-reveal) + var(--d) * var(--dur-drawer)); }
  .mp-stage.in .mp-trues g, .mp-stage.in .mp-leads line{ animation: mp-fade var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--dur-reveal) * 1.6 + var(--d, 0) * var(--dur-drawer)); }
  .mp-stage.in .mp-lbl{ animation: mp-fade var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--dur-reveal) * 1.6 + var(--d) * var(--dur-drawer)); }
  .mp-stage.in .mp-radar{ animation: mp-fade var(--dur-reveal) var(--ease-out) backwards; animation-delay: calc(var(--dur-reveal) * 2); }
  .mp-stage.in .mp-sweep{ opacity: .85; }
  .mp-sweep{ transition-delay: calc(var(--dur-reveal) * 2); animation: mp-turn calc(var(--ambient-c) / 2) linear infinite; }
  .mp-box.has-sel .mp-sweep{ transition-delay: 0s; animation-play-state: paused; }
  .mp-box.no-entrance :is(.mp-coast, .mp-land, .mp-slab, .mp-grat, .mp-pin-in, .mp-trues g, .mp-leads line, .mp-lbl, .mp-radar),
  .settled .mp-box :is(.mp-coast, .mp-land, .mp-slab, .mp-grat, .mp-pin-in, .mp-trues g, .mp-leads line, .mp-lbl, .mp-radar){ animation: none; }
  .mp-box.no-entrance .mp-sweep, .settled .mp-sweep{ transition-delay: 0s; }

  /* the signature: brackets spring on, the ring turns while locked */
  .mp-ret-in{ animation: mp-lock var(--dur-slow) var(--spring) backwards; }
  .mp-ret-in.out{ animation: mp-unlock var(--dur-base) var(--ease-out) forwards; }
  .mp-ret-in.is-instant{ animation: none; }
  .mp-ret-ring{ animation: mp-turn var(--ambient-c) linear infinite; }

  /* live: the sites an event touches pulse, in a wave from the radar centre */
  .mp-pin.is-ping .mp-halo{ animation: mp-ping calc(var(--dur-reveal) * 2) var(--ease-out) both; animation-delay: calc(var(--w, 0) * var(--dur-drawer)); }
  .mp-pin.is-alert .mp-halo{ stroke: var(--bad); }
  .mp-row.is-ping::after{ animation: mp-flash calc(var(--dur-reveal) * 2) var(--ease-out) both; animation-delay: calc(var(--w, 0) * var(--dur-drawer)); }
  .mp-readout small.is-new{ animation: mp-news var(--dur-drawer) var(--ease-out); }

  /* charts fill once their card is seen */
  .mp-row .mp-dev i{ transform: scaleX(0); }
  .mp-row.in .mp-dev i{ transform: scaleX(var(--v)); transition: transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--dur-base) + var(--i, 0) * var(--stagger)); }
  .mp-cmp .mp-fly-r i::after, .mp-wh .mp-wh-bar i{ transform: scaleX(0); }
  .mp-cmp.in .mp-fly-r i::after, .mp-wh.in .mp-wh-bar i{ transform: scaleX(var(--p)); transition: transform var(--dur-reveal) var(--ease-out), filter var(--dur-fast) var(--ease-out);
    transition-delay: calc(var(--dur-base) + var(--i, 0) * var(--stagger)), 0s; }

  /* the chosen site's panel arrives in reading order */
  .mp-sd-body > *{ animation: mp-rise var(--dur-slow) var(--ease-out) backwards; }
  .mp-sd-body > :nth-child(2){ animation-delay: var(--stagger); }
  .mp-sd-body > :nth-child(3){ animation-delay: calc(var(--stagger) * 2); }
  .mp-sd-body > :nth-child(4){ animation-delay: calc(var(--stagger) * 3); }
  .mp-sd-body > :nth-child(n+5){ animation-delay: calc(var(--stagger) * 4); }
}
@keyframes mp-draw{ from{ stroke-dashoffset: 1; } }
@keyframes mp-fade{ from{ opacity: 0; } }
@keyframes mp-land{ from{ opacity: 0; transform: translateY(-10px) scale(.6); } }
@keyframes mp-turn{ to{ transform: rotate(360deg); } }
@keyframes mp-lock{ from{ opacity: 0; transform: scale(1.9) rotate(-18deg); } }
@keyframes mp-unlock{ to{ opacity: 0; transform: scale(1.5); } }
@keyframes mp-ping{ 0%{ opacity: 0; transform: scale(1); } 12%{ opacity: .95; } 100%{ opacity: 0; transform: scale(2.8); } }
@keyframes mp-flash{ 0%{ opacity: 0; } 14%{ opacity: 1; } 100%{ opacity: 0; } }
@keyframes mp-news{ from{ opacity: .2; transform: translateY(4px); } }
@keyframes mp-rise{ from{ opacity: 0; transform: translateY(var(--s2)); } }
.motion-paused .mp-sweep, .motion-paused .mp-ret-ring{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
  .mp-sweep{ display: none; }
}

/* --- hover and press (hover only where hover is real) ------------------------ */
@media (hover: hover) and (pointer: fine){
  .mp-kpi:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2), var(--ring); }
  .mp-lg[data-health]:hover, .mp-lg[data-kind]:hover{ color: var(--ink); background: var(--surface-2); }
  .mp-stage.is-sel .mp-crumb-all:hover{ background: var(--tint); transform: translateY(-1px); }
  .mp-actions .seg button:hover{ transform: translateY(-1px); }
  .mp-pin:hover .mp-pin-z{ transform: scale(1.24); }
  .mp-pin:hover .mp-halo{ opacity: .7; }
  .mp-box.has-sel .mp-pin:hover{ opacity: 1; }
  .mp-rows .mp-row:hover{ transform: translateY(-2px); background: var(--surface-1); box-shadow: var(--shadow-1), var(--ring); z-index: 1; }
  .mp-rows .mp-row.is-sel:hover{ background: var(--tint); }
  .mp-fig:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
  .mp-sysi:hover{ background: var(--surface-2); transform: translateX(2px); }
  .mp-hot-i:hover{ transform: translateY(-2px); background: var(--surface-1); box-shadow: var(--shadow-1), var(--ring); }
  .mp-hot-i:hover .ring{ transform: scale(1.06); }
  .mp-hot-i:hover > .ic{ transform: translateX(3px); color: var(--accent); }
  .mp-wh-i:hover{ transform: translateY(-2px); background: var(--surface-2); box-shadow: var(--ring); }
  .mp-fly-r:hover .mp-fly-l{ color: var(--ink); }
  .mp-fly-r:hover i::after{ filter: brightness(1.15); }
}
.mp-rows .mp-row:active, .mp-hot-i:active, .mp-wh-i:active, .mp-sysi:active{ transform: scale(.98); }
.mp-stage.is-sel .mp-crumb-all:active{ transform: scale(.97); }
.mp-actions .seg button:active, .mp-kpi:active{ transform: scale(.97); }
.mp-pin:active .mp-pin-z{ transform: scale(1.1); }
.mp-lbl:active{ opacity: .8; }

/* --- widths -------------------------------------------------------------------- */
@media (max-width: 1280px){
  .mp-hero{ grid-template-columns: minmax(0, 1fr) 340px; }
  .mp-bar{ flex-wrap: wrap; }
  .mp-crumb{ flex: 1 0 auto; }
  .mp-legend{ flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; }
  .mp-grid{ grid-template-columns: 1fr 1fr; }
  .mp-cmp{ grid-column: 1 / -1; }
}
@media (max-width: 1100px){
  .mp-actions{ flex: 1 1 100%; }
}
@media (max-width: 960px){
  .mp-hero{ grid-template-columns: minmax(0, 1fr); }
  .mp-side{ contain: none; }
  .mp-rows{ overflow: visible; padding-bottom: var(--s3); -webkit-mask-image: none; mask-image: none; }
  .mp-sitev{ display: none; }
  .mp-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .mp-actions{ width: 100%; }
  .mp-actions .seg{ width: 100%; }
  .mp-actions .seg button{ flex: 1; min-height: var(--h-control); }
  .mp-actions .btn{ width: 100%; min-height: var(--h-touch); }
  .mp-kpis{ gap: var(--s2); }
  .mp-kpi{ padding: var(--s3) var(--s4); }
  .mp-kpi .fig{ font-size: var(--fs-xl); }
  .mp-kpi-sub{ font-size: var(--fs-micro); }
  .mp-stage{ margin: 0 calc(-1 * var(--s4)); border-radius: 0; }
  .mp-bar{ padding: var(--s2) var(--s4); min-height: 0; flex-wrap: wrap; }
  .mp-legend{ flex-wrap: wrap; justify-content: flex-start; flex: 1 1 100%; }
  .mp-legend{ gap: 0 var(--s1); font-size: var(--fs-micro); margin-left: calc(-1 * var(--s2)); }
  .mp-lg{ min-height: 24px; }
  .mp-lbl{ font-size: var(--fs-micro); padding: 1px 6px; border-radius: 6px; }
  .mp-grat text{ display: none; }
  .mp-readout{ left: var(--s2); bottom: var(--s2); padding: 4px var(--s2) 4px 4px; }
  .mp-readout b{ display: none; }
  .mp-listv .card-head{ padding: var(--s4) var(--s4) var(--s2); }
  .mp-grid{ grid-template-columns: minmax(0, 1fr); }
  .mp-dev{ width: 36px; }
  .mp-rv{ min-width: 52px; }
  .mp-fly-h, .mp-fly-r{ grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: var(--s2); }
  .mp-fly b{ font-size: var(--fs-sm); }
  .mp-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mp-fig--ring{ grid-column: 1 / -1; }
}