/* ===== US MAP - the opportunity map component (UsMap, js/us-map.js). Prefix .um-* ===================================
   COLOUR. The five data classes are ONE gold hue from pale to deep (a sequential ramp: one hue, light to dark, magnitude only),
   and a state with nothing is a neutral grey that is not the first class. Gold here is the app's chrome colour used for a
   single measure, never an identity: no state is told apart from another by colour alone (name on hover, in the ranked list and
   in the table). Ink on each class was measured: light theme 15 / 12 / 8.4 / 5.0 / 7.6:1, dark theme 9.2 / 5.8 / 5.0 / 8.5 / 13:1
   (dark text on the light classes, white on the deepest one, flipped in dark mode where deep means bright).
   Every colour is declared twice for dark, under the media query and under [data-theme], so the toggle beats the OS. */
.um {
  --um-c0: #EBDAB0; --um-c1: #E0C58C; --um-c2: #CDA85C; --um-c3: #A87C2E; --um-c4: #6F4E15;
  --um-none: var(--inset); --um-edge: var(--surface); --um-open: var(--surface);
  --um-l0: #111113; --um-l1: #111113; --um-l2: #111113; --um-l3: #111113; --um-l4: #FFFFFF; --um-lnone: var(--text-dim);
  position: relative; min-width: 0; color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .um {
    --um-c0: #4A3F25; --um-c1: #6F5B2E; --um-c2: #A07F38; --um-c3: #D1A94E; --um-c4: #F2D58B;
    --um-l0: #F5F1E8; --um-l1: #F5F1E8; --um-l2: #14120D; --um-l3: #14120D; --um-l4: #14120D;
    --um-none: var(--surface-3); --um-open: #36322A;
  }
}
:root[data-theme="dark"] .um {
  --um-c0: #4A3F25; --um-c1: #6F5B2E; --um-c2: #A07F38; --um-c3: #D1A94E; --um-c4: #F2D58B;
  --um-l0: #F5F1E8; --um-l1: #F5F1E8; --um-l2: #14120D; --um-l3: #14120D; --um-l4: #14120D;
  --um-none: var(--surface-3); --um-open: #36322A;
}
.um [hidden] { display: none !important; }
.um-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- the bar: where you are, what the colour shows, how to see it ---- */
.um-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .6rem; }
.um-crumb { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-md); min-height: 2rem; }
.um-crumb-b { border: 0; background: none; padding: .15rem .4rem; border-radius: var(--r-xs); font: inherit; color: var(--text-soft); cursor: pointer; }
.um-crumb-b:hover { color: var(--text); background: var(--surface-3); }
.um-crumb-b.is-here { color: var(--text); font-weight: var(--fw-bold); cursor: default; background: none; }
.um-crumb-s { color: var(--text-dim); }
.um-reset { margin-left: .5rem; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); border-radius: var(--r-pill); padding: .1rem .65rem;
  font-size: var(--fs-xs); cursor: pointer; transition: border-color .14s var(--ease), color .14s var(--ease); }
.um-reset:hover { border-color: var(--accent-line); color: var(--accent-ink); }
.um-ctl { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.um-seg { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
.um-seg-b { border: 0; background: none; padding: .22rem .8rem; border-radius: var(--r-pill); font-size: var(--fs-sm); color: var(--text-soft); cursor: pointer; white-space: nowrap;
  transition: background .16s var(--ease), color .16s var(--ease); }
.um-seg-b:hover { color: var(--text); }
.um-seg-b[aria-pressed="true"] { background: var(--accent-weak); color: var(--accent-ink); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1px var(--accent-line); }
.um-seg-b:focus-visible, .um-crumb-b:focus-visible, .um-reset:focus-visible, .um-row:focus-visible, .um-tile:focus-visible, .um-open:focus-visible, .um-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- the stage and the side list ---- */
.um-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: 1rem 1.2rem; align-items: stretch; }
.um-stage { position: relative; min-width: 0; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border-soft); overflow: hidden; }
.um-svg { display: block; width: 100%; height: auto; aspect-ratio: 975 / 610; max-height: 62vh; margin: 0 auto; }
.um-st { fill: var(--um-none); stroke: var(--um-edge); stroke-width: 1px; cursor: pointer; outline: none;
  transition: fill .22s var(--ease), opacity .3s var(--ease), filter .14s var(--ease); }
.um-st.um-c-0 { fill: var(--um-c0); } .um-st.um-c-1 { fill: var(--um-c1); } .um-st.um-c-2 { fill: var(--um-c2); }
.um-st.um-c-3 { fill: var(--um-c3); } .um-st.um-c-4 { fill: var(--um-c4); }
.um-st:hover, .um-st.is-hot { filter: brightness(1.04) saturate(1.1) drop-shadow(0 4px 6px rgba(17, 17, 19, .30)); stroke: var(--text); stroke-width: 1.6px; }
.um-svg.has-hot .um-st:not(.is-hot):not(.is-open) { opacity: .8; }
.um-st:focus-visible { stroke: var(--accent-ink); stroke-width: 2.4px; }
.um-st.is-away, .um-st.is-away:hover { opacity: .55 !important; fill: var(--um-none); filter: none; stroke: var(--um-edge); stroke-width: 1px; cursor: pointer; }
.um-st.is-open { fill: var(--um-open); stroke: var(--text-soft); stroke-width: 1.4px; filter: none; cursor: default; }
.um-borders { fill: none; stroke: var(--um-edge); stroke-width: .8px; pointer-events: none; }
.um-labels { pointer-events: none; font-family: inherit; }
.um-lab { font-size: 13px; font-weight: 700; fill: var(--um-lnone); letter-spacing: .02em; }
.um-lab.um-l-0 { fill: var(--um-l0); } .um-lab.um-l-1 { fill: var(--um-l1); } .um-lab.um-l-2 { fill: var(--um-l2); } .um-lab.um-l-3 { fill: var(--um-l3); } .um-lab.um-l-4 { fill: var(--um-l4); }
.um-lab-out { fill: var(--text-soft); font-weight: 600; }
.um-lead { stroke: var(--text-dim); stroke-width: .8px; fill: none; }
.um-dots { transition: opacity .3s var(--ease); }
.um-dot { r: calc(var(--px, 6) / var(--um-k, 1) * 1px); fill: var(--um-c3); fill-opacity: .78; stroke: var(--text); stroke-width: 1.2px; cursor: pointer; outline: none; transform-box: fill-box; transform-origin: center;
  animation: um-pop .38s var(--ease-out) backwards; animation-delay: calc(var(--um-i, 0) * 12ms); }
:root[data-theme="dark"] .um-dot { fill: var(--um-c4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .um-dot { fill: var(--um-c4); } }
.um-dot:hover { fill-opacity: 1; stroke-width: 2px; }
.um-dot.is-sel, .um-dot:focus-visible { fill-opacity: 1; stroke: var(--accent-ink); stroke-width: 3px; }
@keyframes um-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.um-state-msg { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; text-align: center;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent); color: var(--text-soft); font-size: var(--fs-md); }
.um-state-msg.is-error { color: var(--bad-ink, var(--text)); }
.um-spin { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: um-spin .8s linear infinite; }
@keyframes um-spin { to { transform: rotate(360deg); } }

/* ---- tooltip ---- */
.um-tip { position: absolute; left: 0; top: 0; z-index: 4; will-change: transform; width: max-content; max-width: 19rem; pointer-events: none; padding: .55rem .7rem .5rem; border-radius: var(--r-sm);
  background: var(--shell-800); color: #F2EEE4; box-shadow: var(--shadow-lg); font-size: var(--fs-sm); line-height: 1.35; }
.um-tt { font-weight: var(--fw-bold); font-size: var(--fs-md); margin-bottom: .25rem; color: #FFFFFF; }
.um-tt span { font-weight: 400; opacity: .78; font-size: var(--fs-sm); }
.um-tv { display: flex; justify-content: space-between; gap: 1.1rem; padding: .08rem 0; color: rgba(255,255,255,.72); }
.um-tv b { color: #FFFFFF; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.um-tv.is-cur b { color: var(--gold-300); }
.um-tk { margin: .45rem 0 .1rem; font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.um-th { margin: .4rem 0 0; font-size: var(--fs-xs); color: rgba(255,255,255,.62); }
.um-tip .um-biz { margin: 0; padding: 0; list-style: none; }
.um-tip .um-biz li { display: flex; justify-content: space-between; gap: .8rem; padding: .04rem 0; }
.um-tip .um-bn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 13rem; color: #F2EEE4; }
.um-tip .um-bv { color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }

/* ---- the side list ---- */
.um-side { min-width: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 36rem; overflow: auto; padding-right: .2rem; }
.um-sh { padding-bottom: .4rem; border-bottom: 1px solid var(--border-soft); }
.um-sh-t { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.um-sh-s { margin: .1rem 0 .4rem; color: var(--text-soft); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.um-sh-k { margin: .3rem 0 0; font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.um-open { border: 1px solid var(--accent-line); background: var(--accent-weak); color: var(--accent-ink); border-radius: var(--r-pill); padding: .25rem .8rem; font-size: var(--fs-sm);
  font-weight: var(--fw-bold); cursor: pointer; transition: background .14s var(--ease); }
.um-open:hover { background: var(--gold-200); }
.um-rank { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.um-row { width: 100%; display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) 3.2rem 3.6rem; align-items: center; gap: .5rem; padding: .32rem .35rem; border: 0; background: none; text-align: left;
  border-radius: var(--r-xs); color: inherit; font: inherit; font-size: var(--fs-md); cursor: pointer; transition: background .12s var(--ease); }
.um-row:hover, .um-row.is-hot, .um-row.is-sel { background: var(--accent-weak); }
.um-rk { color: var(--text-dim); font-size: var(--fs-xs); text-align: right; font-variant-numeric: tabular-nums; }
.um-rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-rl i { font-style: normal; color: var(--text-soft); font-size: var(--fs-sm); }
.um-rb { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.um-rb span { display: block; height: 100%; background: var(--gold-500); border-radius: 3px; transform-origin: left; animation: um-grow .5s var(--ease-out) backwards; }
@keyframes um-grow { from { transform: scaleX(0); } }
.um-rv { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.um-zd { font-size: var(--fs-md); padding: .5rem .6rem; border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--gold-050); margin: .2rem 0 .3rem; }
.um-zd-h { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .3rem; }
.um-zd-h .um-link { margin-left: auto; }
.um-zd .um-tv { color: var(--text-soft); } .um-zd .um-tv b { white-space: nowrap; } .um-zd .um-tv b { color: var(--text); } .um-zd .um-tv.is-cur b { color: var(--accent-ink); }
.um-zd .um-biz { margin: .35rem 0 0; padding: 0; list-style: none; }
.um-zd .um-biz li { display: flex; justify-content: space-between; gap: .6rem; padding: .12rem 0; font-size: var(--fs-md); }
.um-zd .um-bn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-zd a.um-bn { color: var(--accent-ink); text-decoration: none; } .um-zd a.um-bn:hover { text-decoration: underline; }
.um-zd .um-bv { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.um-note { margin: .2rem 0; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.4; }
.um-note.is-bad { color: var(--bad-ink, var(--text)); }
.um-link { border: 0; background: none; padding: 0; color: var(--accent-ink); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---- legend ---- */
.um-foot { margin-top: .7rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; }
.um-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: var(--fs-sm); color: var(--text-soft); }
.um-lg-t { font-weight: var(--fw-bold); color: var(--text); }
.um-lg { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: 0; padding: 0; list-style: none; }
.um-lg li { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
.um-sw { width: 1.05rem; height: .8rem; border-radius: 2px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(17,17,19,.14); }
.um-sw.um-c-0 { background: var(--um-c0); } .um-sw.um-c-1 { background: var(--um-c1); } .um-sw.um-c-2 { background: var(--um-c2); } .um-sw.um-c-3 { background: var(--um-c3); } .um-sw.um-c-4 { background: var(--um-c4); }
.um-sw.um-c-none { background: var(--um-none); }
.um-basis { margin: 0; flex: 1 1 22rem; font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.4; }

/* ---- the tile grid ---- */
.um-tgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(3.6rem, auto)); gap: 4px; max-width: 62rem; margin: 0 auto; }
.um-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; border: 0; border-radius: var(--r-sm); background: var(--um-none); color: var(--um-lnone);
  cursor: pointer; font: inherit; transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.um-tile b { font-size: var(--fs-md); } .um-tile span { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.um-tile.um-c-0 { background: var(--um-c0); color: var(--um-l0); } .um-tile.um-c-1 { background: var(--um-c1); color: var(--um-l1); } .um-tile.um-c-2 { background: var(--um-c2); color: var(--um-l2); }
.um-tile.um-c-3 { background: var(--um-c3); color: var(--um-l3); } .um-tile.um-c-4 { background: var(--um-c4); color: var(--um-l4); }
.um-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ---- the table ---- */
.um-tw { overflow: auto; max-height: 62vh; border: 1px solid var(--border-soft); border-radius: var(--r-sm); }
.um-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.um-tbl th, .um-tbl td { padding: .38rem .7rem; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.um-tbl thead th { position: sticky; top: 0; background: var(--surface-3); font-size: var(--fs-sm); z-index: 1; }
.um-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) { .um-body { grid-template-columns: minmax(0, 1fr); } .um-side { max-height: none; } }
@media (prefers-reduced-motion: reduce) {
  .um-st, .um-dots, .um-dot, .um-rb span, .um-tile, .um-spin { transition: none; animation: none; }
}

.um-tiles, .um-table { margin-top: .2rem; }
.um-lg-none { color: var(--text-dim); }

/* ================== ROUND 3: CAMERA, LAYERS, SELECTION, POLISH ================== */
/* the sea: a soft radial wash and a faint graticule, behind the states (CSS, so it costs the camera nothing) */
.um-stage { --um-sea-a: #F6F7FA; --um-sea-b: #EDEFF4; --um-grat: rgba(17, 17, 19, .045);
  background: radial-gradient(ellipse 80% 70% at 50% 42%, var(--um-sea-a), var(--um-sea-b)),
    repeating-linear-gradient(0deg, transparent 0 59px, var(--um-grat) 59px 60px), repeating-linear-gradient(90deg, transparent 0 59px, var(--um-grat) 59px 60px);
  touch-action: none; }
:root[data-theme="dark"] .um-stage { --um-sea-a: #1F1D18; --um-sea-b: #14130F; --um-grat: rgba(255, 255, 255, .04); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .um-stage { --um-sea-a: #1F1D18; --um-sea-b: #14130F; --um-grat: rgba(255, 255, 255, .04); } }
.um-stage.is-panning, .um-stage.is-panning .um-st { cursor: grabbing; }

/* the camera's controls */
.um-zb { position: absolute; right: .6rem; top: .6rem; z-index: 3; display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-md); background: var(--border); }
.um-zb button { width: 2.1rem; height: 2.1rem; border: 0; background: var(--surface); color: var(--text-soft); cursor: pointer; font-size: var(--fs-md); transition: background .14s var(--ease), color .14s var(--ease); }
.um-zb button:hover { background: var(--accent-weak); color: var(--accent-ink); }
.um-zb button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.um-mini { position: absolute; left: .6rem; bottom: .6rem; z-index: 3; width: 9.5rem; padding: .25rem; border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); box-shadow: var(--shadow-md); cursor: pointer; }
.um-mini svg { display: block; width: 100%; height: auto; aspect-ratio: 975 / 610; }
.um-mini-o { fill: var(--surface-3); stroke: var(--text-dim); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.um-mini-r { fill: var(--accent-weak); fill-opacity: .55; stroke: var(--accent-ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.um-hint { margin: .5rem 0 0; font-size: var(--fs-xs); line-height: 1.35; color: var(--text-dim); }

/* the second measure */
.um-bubsel { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); color: var(--text-soft); }
.um-sel { height: 1.9rem; padding: 0 1.6rem 0 .6rem; border-radius: var(--r-pill); border: 1px solid var(--border); background-color: var(--surface-2); color: var(--text); font-size: var(--fs-sm); cursor: pointer; }
.um-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.um-tog { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-soft); border-radius: var(--r-pill); padding: .22rem .8rem; font-size: var(--fs-sm); cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease); }
.um-tog[aria-pressed="true"] { background: var(--accent-weak); border-color: var(--accent-line); color: var(--accent-ink); font-weight: var(--fw-bold); }
.um-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.um-bubs { pointer-events: none; }
.um-bub { r: calc(var(--px, 8) / var(--um-k, 1) * 1px); fill: var(--accent-fill); fill-opacity: .28; stroke: var(--accent-ink); stroke-width: 1.4px; pointer-events: none; animation: um-pop .5s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 14ms); transform-box: fill-box; transform-origin: center; }
.um-dot.um-d-0 { fill: var(--um-c0); } .um-dot.um-d-1 { fill: var(--um-c1); } .um-dot.um-d-2 { fill: var(--um-c2); } .um-dot.um-d-3 { fill: var(--um-c3); } .um-dot.um-d-4 { fill: var(--um-c4); }
.um-dots.is-heat .um-dot { fill-opacity: .24; stroke: none; filter: blur(5px); transform: scale(2.6); transform-box: fill-box; transform-origin: center; animation: none; }
.um-dots.is-heat .um-dot:hover { fill-opacity: .5; }

/* selection */
.um-st.is-multi { stroke: var(--text); stroke-width: 2.8px; filter: drop-shadow(0 3px 5px rgba(17, 17, 19, .26)); }
.um-st.is-faded { opacity: .22; }
.um-tile.is-faded { opacity: .3; }
.um-tile.is-multi { box-shadow: 0 0 0 2px var(--text); }
.um-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem; margin: 0 0 .6rem; padding: .5rem .8rem; border: 1px solid var(--accent-line); border-radius: var(--r-sm); background: var(--accent-weak); animation: um-slide .28s var(--ease-out) backwards; }
@keyframes um-slide { from { transform: translateY(-6px); } }
.um-sum-t { font-weight: var(--fw-bold); color: var(--accent-ink); }
.um-sum-n { color: var(--text-soft); font-size: var(--fs-sm); }
.um-sum-i { font-size: var(--fs-md); color: var(--text-soft); }
.um-sum-i b { color: var(--text); font-variant-numeric: tabular-nums; }
.um-sum-a { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.um-sum-b { border: 1px solid var(--accent-line); background: var(--surface); color: var(--accent-ink); border-radius: var(--r-pill); padding: .2rem .75rem; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; transition: background .14s var(--ease); }
.um-sum-b:hover { background: var(--gold-100); }
.um-sum-b.is-quiet { border-color: var(--border); color: var(--text-soft); font-weight: var(--fw-normal); }
.um-sum-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the legend is a filter */
.um-lg-b { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; background: none; padding: .1rem .4rem; margin: 0 -.4rem; border-radius: var(--r-pill); font: inherit; color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; transition: background .14s var(--ease); }
.um-lg-b:hover { background: var(--accent-weak); }
.um-lg-b.is-on { border-color: var(--accent-fill); background: var(--accent-weak); color: var(--accent-ink); font-weight: var(--fw-bold); }
.um-lg-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the waiting state keeps the SHAPE of the map and breathes (never transparent) */
.um-stage.is-loading .um-st { animation: um-breathe 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes um-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.um-state-msg.is-loading { background: color-mix(in srgb, var(--surface-2) 30%, transparent); pointer-events: none; }

.um-row { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .um-stage.is-loading .um-st, .um-bub, .um-sum, .um-dots.is-heat .um-dot { animation: none; }
  .um-row { transition: none !important; transform: none !important; }
  .um-st { transition: none; }
}
@media (max-width: 1100px) { .um-hint { display: none; } }

.um-svg.is-deep .um-labels { display: none; }
.um-sum-l { color: var(--text-soft); font-size: var(--fs-sm); }