/* The Universal Map, univirsal.com/map. Gold flight terminal: dark glass
   faces, gold hairlines, square corners, mono microtype, Chakra Petch display.
   Standalone stylesheet; ds/3 tokens are optional polish (vars have fallbacks). */

@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/chakra-petch-700.woff2?v=20260820p') format('woff2');
}

/* the token block serves both hosts: the standalone body and the embedded
   #umap-app box (the homepage hero carries the app, never the body class) */
.umap-body, #umap-app {
  --u-bg: #07080c;
  --u-ink: #d8dee6;
  --u-ink-bright: #eef2f7;
  --u-ink-dim: #8a93a8;
  --u-gold: #cc9933;
  --u-gold-bright: #e6b347;
  --u-gold-dim: #8a7434;
  --u-line: #22262f;
  --u-line-gold: rgba(204, 153, 51, 0.22);
  --u-line-gold-strong: rgba(204, 153, 51, 0.5);
  --u-face: rgba(7, 8, 12, 0.9);
  --u-face-deep: rgba(7, 8, 12, 0.96);
  --u-f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --u-f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --u-f-display: 'Chakra Petch', 'Inter', 'Helvetica Neue', sans-serif;
  --u-top: 0px;
  background: var(--u-bg);
  color: var(--u-ink);
  font-family: var(--u-f-body);
  -webkit-font-smoothing: antialiased;
}
/* layout props belong to the standalone page body only */
.umap-body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

/* absolute inside a positioned hero box; fullscreen restores the viewport box.
   --u-top (set by the host page) drops the chrome clear of a sticky nav. */
#umap-app { position: absolute; inset: 0; }
#umap-app.umap-fs:fullscreen { position: fixed; inset: 0; --u-top: 0px; }

#umap-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; outline: none; touch-action: none; cursor: grab;
}
#umap-canvas:active { cursor: grabbing; }
#umap-canvas:focus-visible { outline: 2px solid #cc9933; outline-offset: -2px; }

/* ---------- projected labels ---------- */
#umap-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.umap-label {
  position: absolute; left: 0; top: 0; max-width: 220px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #cfd6e0; white-space: nowrap; pointer-events: auto; cursor: pointer;
  text-shadow: 0 0 4px #07080c, 0 0 8px #07080c, 0 1px 2px #07080c;
  transition: color .12s ease;
}
.umap-label:hover, .umap-label.umap-selected { color: #e6b347; }
.umap-label b { font-weight: 600; color: #eef2f7; }
/* tiers own size (rules first), kinds own color (rules after) */
.umap-label.umap-t1 { font-size: 13px; letter-spacing: 0.24em; font-weight: 600; max-width: 360px; }
.umap-label.umap-t2 { font-size: 12px; letter-spacing: 0.18em; max-width: 320px; }
.umap-label.umap-t3 { font-size: 10px; letter-spacing: 0.14em; max-width: 240px; }
.umap-label.umap-t4 { font-size: 9px;  letter-spacing: 0.12em; max-width: 200px; }
.umap-label.umap-k-galaxy   { color: #dfe6f0; }
.umap-label.umap-k-power    { color: #e4ebf5; }
.umap-label.umap-k-sector   { color: #b8a06a; }
.umap-label.umap-k-landmark { color: #e6b347; }
.umap-label.umap-k-satellite{ color: #7d8698; }
.umap-label.umap-k-star     { color: #efe6c8; }
.umap-label.umap-k-ring     { color: #8b8167; }
.umap-label.umap-k-blackhole{ color: #c98f83; }
.umap-label.umap-k-mega     { color: #d9b464; }
.umap-label.umap-k-planet   { color: #a8b6c6; }
.umap-label.umap-k-moon     { color: #8a93a8; }
.umap-label.umap-k-pulsar   { color: #b9a8d8; }
.umap-label.umap-k-belt     { color: #8a7a62; }
.umap-label.umap-k-redacted { color: #9aa1ad; }
.umap-label.umap-k-redacted i {
  display: inline-block; width: 54px; height: 7px; margin-left: 6px;
  background: #07080c; border-top: 2px solid #cc9933; border-bottom: 2px solid #cc9933;
  vertical-align: middle;
}
.umap-label.umap-k-chart    { color: #6f7887; font-size: 10px; letter-spacing: 0.14em; pointer-events: none; }
/* sector, ring and belt text sits over the gold or a point field: slimmer halo so it reads quiet */
.umap-label.umap-k-sector, .umap-label.umap-k-ring, .umap-label.umap-k-belt { text-shadow: 0 0 3px #07080c, 0 1px 2px #07080c; }

/* ---------- top bar ---------- */
#umap-topbar {
  /* above the dossier panel (25): the console burger stays clickable with a dossier open */
  position: absolute; top: var(--u-top, 0px); left: 0; right: 0; z-index: 26;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(7,8,12,0.92) 0%, rgba(7,8,12,0.55) 70%, rgba(7,8,12,0) 100%);
  pointer-events: none;
}
#umap-topbar > * { pointer-events: auto; }

#umap-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
#umap-brand-mark {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 50%, #e6b347 0%, #e6b347 22%, rgba(204,153,51,0.0) 30%),
              radial-gradient(circle at 50% 50%, rgba(230,179,71,0.55) 0%, rgba(230,179,71,0.0) 70%);
  border: 1px solid rgba(230,179,71,0.75);
  box-shadow: 0 0 12px rgba(230,179,71,0.35);
}
#umap-brand-text {
  display: flex; flex-direction: column; line-height: 1.25;
  font-size: 13px; font-weight: 600; letter-spacing: 0.3em; color: #eef2f7;
}
#umap-brand-sub {
  font-size: 9px; font-weight: 400; letter-spacing: 0.12em; color: #7d8698;
  text-transform: none; white-space: nowrap;
}

#umap-searchbox { position: relative; flex: 1 1 auto; max-width: 380px; margin-left: auto; }
#umap-searchbox::before {
  content: ">"; position: absolute; left: 10px; top: 50%; transform: translateY(-52%);
  font-family: var(--u-f-mono); font-size: 12px; color: var(--u-gold-bright);
  pointer-events: none; z-index: 1;
}
#umap-search {
  width: 100%; box-sizing: border-box; padding: 8px 12px 8px 26px;
  background: var(--u-face); border: 1px solid var(--u-line-gold); border-radius: 0;
  color: var(--u-ink-bright); font-family: var(--u-f-mono); font-size: 12px;
  letter-spacing: 0.02em; caret-color: var(--u-gold-bright);
}
#umap-search::placeholder { color: #5d6575; }
#umap-search:focus { outline: none; border-color: var(--u-gold); box-shadow: 0 0 0 1px rgba(204,153,51,0.4); }
#umap-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--u-face-deep); border: 1px solid var(--u-line-gold); border-radius: 0;
  max-height: 330px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.umap-result { padding: 8px 12px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.umap-result[aria-selected="true"], .umap-result:hover { background: rgba(204,153,51,0.14); }
.umap-result .umap-result-kind {
  flex: none; font-size: 9px; letter-spacing: 0.16em; color: var(--u-ink-dim);
  width: 74px; font-family: var(--u-f-mono);
}
.umap-result .umap-result-name { font-size: 13px; color: #eef2f7; }
.umap-result .umap-result-name small { color: #8a93a8; font-size: 11px; }

#umap-actions { display: flex; gap: 8px; flex: none; }
#umap-actions button, #umap-legend-head,
#umap-panel-close, #umap-panel-foot button {
  font-family: var(--u-f-mono); font-size: 10px; letter-spacing: 0.18em; color: #cfd6e0;
  background: var(--u-face); border: 1px solid var(--u-line-gold); border-radius: 0;
  padding: 8px 12px; cursor: pointer; min-height: 34px;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
#umap-actions button:hover, #umap-actions button:focus-visible,
#umap-legend-head:hover, #umap-legend-head:focus-visible,
#umap-panel-close:hover, #umap-panel-close:focus-visible,
#umap-panel-foot button:hover, #umap-panel-foot button:focus-visible {
  border-color: var(--u-gold); color: var(--u-gold-bright);
  background: rgba(204, 153, 51, 0.08);
}
#umap-btn-help { width: 34px; padding: 8px 0; }

/* ---------- tier + scale ---------- */
#umap-tier {
  position: absolute; top: calc(64px + var(--u-top, 0px)); left: 0; right: 0; text-align: center; z-index: 10;
  pointer-events: none;
}
#umap-tier-text {
  font-family: var(--u-f-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.42em; color: rgba(230,179,71,0.9);
  text-shadow: 0 0 8px #07080c;
}
/* bracket glyphs are pseudo content: invisible to textContent reads */
#umap-tier-text::before { content: "[ "; color: var(--u-gold-dim); }
#umap-tier-text::after { content: " ]"; color: var(--u-gold-dim); }
#umap-scalebar {
  position: absolute; right: 16px; bottom: 14px; z-index: 10; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
#umap-scalebar-label {
  font-family: var(--u-f-mono); font-size: 10px; letter-spacing: 0.14em; color: #a7b0bf;
}
#umap-scalebar-bar {
  height: 8px; border-left: 1px solid #a7b0bf; border-right: 1px solid #a7b0bf;
  border-bottom: 1px solid #a7b0bf;
  background:
    repeating-linear-gradient(90deg, rgba(167,176,191,0.55) 0 1px, transparent 1px 10%),
    linear-gradient(rgba(167,176,191,0.0) 3px, rgba(167,176,191,0.18) 3px);
}

/* ---------- legend ---------- */
#umap-legend {
  position: absolute; left: 16px; z-index: 15; width: 252px;
  background: var(--u-face); border: 1px solid var(--u-line-gold); border-radius: 0;
  backdrop-filter: blur(6px);
  /* TOP-pinned under the map topbar band: cycling tabs shrinks the panel upward
     (the top edge holds, the bottom edge rises) instead of collapsing toward the
     corner. The height cap rides the container so the percentage resolves against
     #umap-app's definite height (a child-level max-height % of an auto parent is
     inert - that is how the panel once grew past the top of short host boxes). */
  top: calc(var(--u-top, 0px) + 66px);
  display: flex; flex-direction: column;
  max-height: calc(100% - var(--u-top, 0px) - 66px - 14px);
}
/* flight-terminal corner brackets on the floating panels */
#umap-legend::before, #umap-legend::after,
#umap-register::before, #umap-register::after,
#umap-help::before, #umap-help::after,
#umap-panel::before, #umap-panel::after,
#umap-menu::before, #umap-menu::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
}
#umap-legend::before, #umap-register::before, #umap-help::before, #umap-panel::before, #umap-menu::before {
  top: 3px; left: 3px; border-top: 1px solid var(--u-gold); border-left: 1px solid var(--u-gold);
}
#umap-legend::after, #umap-register::after, #umap-help::after, #umap-panel::after, #umap-menu::after {
  bottom: 3px; right: 3px; border-bottom: 1px solid var(--u-gold); border-right: 1px solid var(--u-gold);
}
#umap-legend-head {
  position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center;
  border: none; background: none; border-radius: 0; text-align: left; min-height: 34px;
}
#umap-legend-title {
  font-family: var(--u-f-display); font-weight: 700; font-size: 10px;
  letter-spacing: 0.24em; color: var(--u-gold-bright);
}
#umap-legend-caret::before { content: "\25BE"; color: #8a93a8; }
#umap-legend.umap-collapsed #umap-legend-caret::before { content: "\25B8"; }
#umap-legend-body { padding: 2px 10px 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#umap-legend.umap-collapsed #umap-legend-body,
#umap-legend.umap-collapsed #umap-legend-tabs { display: none; }
/* the four sections read as tabs: one list visible at a time */
.umap-legend-tabs { display: flex; gap: 1px; padding: 0 8px; border-bottom: 1px solid var(--u-line); }
.umap-legend-tab {
  flex: 1 1 0; font: 600 9px/1 var(--u-f-mono); letter-spacing: .08em;
  color: var(--u-ink-dim); background: none; border: 0;
  border-bottom: 1px solid transparent; padding: 8px 0 7px; cursor: pointer;
}
.umap-legend-tab:hover { color: var(--u-ink-bright); }
.umap-legend-tab[aria-selected="true"] { color: var(--u-gold); border-bottom-color: var(--u-gold); }
.umap-legend-sec[hidden] { display: none !important; }
.umap-legend-row {
  display: flex; align-items: center; gap: 9px; padding: 4px 2px; cursor: pointer;
  border-radius: 0;
}
.umap-legend-row:hover { background: rgba(204,153,51,0.08); }
.umap-legend-row input { accent-color: #cc9933; width: 13px; height: 13px; margin: 0; flex: none; }
.umap-swatch {
  width: 18px; height: 11px; flex: none; border-radius: 0;
  border-top-style: solid; border-bottom-style: solid; background-clip: padding-box;
}
.umap-swatch.umap-p-solid   { border-width: 2px 0; background: currentColor; opacity: .85; }
.umap-swatch.umap-p-dashed  { border-width: 2px 0; background: transparent; }
.umap-swatch.umap-p-dashed  { border-top-style: dashed; border-bottom-style: dashed; background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); border: none; height: 4px; margin: 3.5px 0; }
.umap-swatch.umap-p-dotted  { border: none; height: 4px; margin: 3.5px 0; background: radial-gradient(circle, currentColor 1.6px, transparent 2px) repeat-x; background-size: 8px 4px; }
/* layer glyph swatches: one distinct mark per special row, currentColor-driven */
.umap-swatch.umap-sg-rings {
  border: none; background: repeating-radial-gradient(circle at 9px 5.5px,
    currentColor 0 1px, transparent 1px 3.5px);
}
.umap-swatch.umap-sg-web {
  border: none;
  background:
    linear-gradient(45deg, transparent 47%, currentColor 47% 53%, transparent 53%),
    linear-gradient(-45deg, transparent 47%, currentColor 47% 53%, transparent 53%);
  opacity: .8;
}
.umap-swatch.umap-sg-thread {
  border: none;
  background:
    radial-gradient(circle at 15px 8.5px, currentColor 0 1.6px, transparent 2.2px),
    linear-gradient(to bottom right, transparent 44%, currentColor 44% 52%, transparent 52%);
}
.umap-swatch.umap-sg-spokes {
  border: none;
  background: conic-gradient(from 0deg at 9px 5.5px,
    currentColor 0 4deg, transparent 4deg 60deg,
    currentColor 60deg 64deg, transparent 64deg 120deg,
    currentColor 120deg 124deg, transparent 124deg 180deg,
    currentColor 180deg 184deg, transparent 184deg 240deg,
    currentColor 240deg 244deg, transparent 244deg 300deg,
    currentColor 300deg 304deg, transparent 304deg 360deg);
  opacity: .85;
}
.umap-swatch.umap-sg-lattice {
  border: none;
  background:
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 4px);
  opacity: .75;
}
.umap-swatch.umap-sg-diamond {
  border: none; background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.umap-swatch.umap-sg-galaxy {
  border: none;
  background:
    radial-gradient(circle at 9px 5.5px, currentColor 0 1.5px, transparent 2px),
    radial-gradient(circle at 9px 5.5px, transparent 2.6px, currentColor 2.6px 3.4px, transparent 4px);
}
.umap-swatch.umap-sg-core {
  border: none;
  background:
    radial-gradient(circle at 9px 5.5px, currentColor 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 9px 5.5px, transparent 4px, currentColor 4px 4.8px, transparent 5.4px);
}
.umap-swatch.umap-sg-field {
  border: none;
  background:
    radial-gradient(circle at 4px 3px, currentColor 0 1.4px, transparent 2px),
    radial-gradient(circle at 10px 8px, currentColor 0 1.4px, transparent 2px),
    radial-gradient(circle at 15px 3.5px, currentColor 0 1.4px, transparent 2px);
}
.umap-swatch.umap-sg-grid {
  border: none;
  background:
    linear-gradient(90deg, transparent 48.5%, currentColor 48.5% 51.5%, transparent 51.5%),
    linear-gradient(0deg, transparent 45%, currentColor 45% 55%, transparent 55%),
    radial-gradient(circle at 9px 5.5px, transparent 3.6px, currentColor 3.6px 4.4px, transparent 5px);
  opacity: .85;
}
.umap-swatch.umap-sg-text {
  border: none;
  background:
    linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px, currentColor 8px 12px, transparent 12px),
    linear-gradient(90deg, currentColor 0 8px, transparent 8px 11px, currentColor 11px 13px, transparent 13px) 0 6px / 18px 2px no-repeat;
  height: 8px; margin: 1.5px 0;
}
.umap-legend-name { font-size: 11.5px; color: #cfd6e0; flex: 1 1 auto; }
.umap-legend-count { font-family: var(--u-f-mono); font-size: 9px; color: #5d6575; }
.umap-legend-sep {
  margin: 8px 0 4px; font-family: var(--u-f-mono); font-size: 8.5px; letter-spacing: 0.26em;
  color: var(--u-gold-dim); border-top: 1px solid var(--u-line); padding-top: 7px;
}

/* ---------- scan tick rulers on panel headers ---------- */
#umap-legend-head::after, #umap-register-top::after, #umap-help h2::after, #umap-menu-top::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 5px;
  background: repeating-linear-gradient(90deg,
    rgba(204,153,51,0.4) 0 1px, transparent 1px 7px);
  pointer-events: none;
}
#umap-register-top { position: relative; }
#umap-help h2 { position: relative; padding-bottom: 9px; }
@media (prefers-reduced-motion: no-preference) {
  #umap-legend-head::after, #umap-register-top::after, #umap-help h2::after, #umap-menu-top::after {
    animation: umap-scan 11s linear infinite;
  }
  @keyframes umap-scan {
    from { background-position: 0 0; }
    to { background-position: 14px 0; }
  }
}

/* ---------- dossier panel ---------- */
#umap-panel {
  position: absolute; top: var(--u-top, 0px); right: 0; bottom: 0; width: 360px; z-index: 25;
  background: var(--u-face-deep); border-left: 1px solid var(--u-line-gold);
  backdrop-filter: blur(10px); padding: 56px 22px 18px; overflow-y: auto;
  box-shadow: -18px 0 44px rgba(0,0,0,0.55);
}
#umap-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
#umap-panel-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.umap-chip {
  font-family: var(--u-f-mono); font-size: 9px; letter-spacing: 0.18em; padding: 4px 8px;
  border-radius: 0; border: 1px solid var(--u-line-gold); color: #cfd6e0;
}
.umap-chip.umap-chip-faction { border-color: currentColor; }
#umap-panel-title {
  margin: 4px 0 2px; font-family: var(--u-f-display); font-weight: 700;
  font-size: 23px; letter-spacing: 0.04em; color: #eef2f7;
}
#umap-panel-epithet {
  margin: 0 0 14px; font-family: var(--u-f-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--u-gold); text-transform: uppercase;
}
#umap-panel-body table { width: 100%; border-collapse: collapse; margin: 12px 0; }
#umap-panel-body th, #umap-panel-body td {
  text-align: left; padding: 6px 8px 6px 0; vertical-align: top;
  border-bottom: 1px solid #1d2129;
  font-family: var(--u-f-mono); font-size: 11px; line-height: 1.55;
}
#umap-panel-body th { color: #8a93a8; font-weight: 400; letter-spacing: 0.08em; width: 38%; text-transform: uppercase; font-size: 9.5px; }
#umap-panel-body td { color: #d8dee6; }
#umap-panel-body p.umap-blurb { font-size: 13px; line-height: 1.65; color: #c3cad5; margin: 12px 0; }
#umap-panel-body .umap-redbar {
  display: inline-block; width: 120px; height: 10px; background: #14161d;
  border-top: 2px solid #cc9933; border-bottom: 2px solid #cc9933;
}
#umap-panel-body a { color: #e6b347; text-decoration: none; border-bottom: 1px dotted rgba(230,179,71,0.5); }
#umap-panel-body a:hover { border-bottom-style: solid; }
#umap-panel-foot { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
#umap-panel-foot button {
  position: relative; flex: 1 1 auto; min-width: 88px;
  background: linear-gradient(180deg, rgba(24, 29, 38, 0.94), rgba(14, 17, 24, 0.94));
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}
#umap-panel-foot button::before, #umap-panel-foot button::after {
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none;
  transition: border-color .12s ease, width .12s ease, height .12s ease;
}
#umap-panel-foot button::before { top: 4px; right: 4px; border-top: 1px solid var(--u-gold-dim); border-right: 1px solid var(--u-gold-dim); }
#umap-panel-foot button::after { bottom: 4px; right: 4px; border-bottom: 1px solid var(--u-gold-dim); border-left: 1px solid var(--u-gold-dim); }
#umap-panel-foot button:hover::before, #umap-panel-foot button:focus-visible::before,
#umap-panel-foot button:hover::after, #umap-panel-foot button:focus-visible::after {
  border-color: var(--u-gold); width: 11px; height: 11px;
}
#umap-panel-foot button:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--u-gold); }
#umap-panel-foot button[hidden] { display: none !important; }

/* ---------- entity plates: the dossier media header + CSS-only card backs ---------- */
#umap-panel-media {
  position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 2px 0 14px;
  background: #07080c; border: 1px solid var(--u-line-gold); overflow: hidden; flex: none;
}
#umap-panel-media[hidden] { display: none; }
#umap-panel-media canvas { display: block; width: 100%; height: 100%; }
#umap-panel-media::before, #umap-panel-media::after {
  content: ""; position: absolute; width: 12px; height: 12px; z-index: 2; pointer-events: none;
}
#umap-panel-media::before { top: 3px; left: 3px; border-top: 1px solid var(--u-gold); border-left: 1px solid var(--u-gold); }
#umap-panel-media::after { bottom: 3px; right: 3px; border-bottom: 1px solid var(--u-gold); border-right: 1px solid var(--u-gold); }
#umap-panel-media .umap-media-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--u-f-mono); font-size: 8.5px; letter-spacing: 0.22em;
  color: #e6b347; text-transform: uppercase; background: rgba(7, 8, 12, 0.84);
  border-top: 1px solid var(--u-line-gold); border-right: 1px solid var(--u-line-gold);
  padding: 3px 9px 2px; max-width: 78%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#umap-panel-media .umap-media-redact { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#umap-panel-media .umap-media-redact i {
  display: block; width: 62%; height: 11px; background: #07080c;
  border-top: 2px solid #cc9933; border-bottom: 2px solid #cc9933;
}
/* card backs: a field wash + a family glyph in the entity's colour (currentColor,
   percentage geometry so one rule scales from panel plate to row thumb) */
.umap-cardback { position: absolute; inset: 0; }
.umap-cardback .umap-cb-glyph { position: absolute; left: 50%; top: 50%; width: 52%; height: 52%; transform: translate(-50%, -50%); }
.umap-cb-generic { background: linear-gradient(180deg, rgba(20, 24, 33, 0.6), rgba(9, 11, 16, 0.85)); }
.umap-cb-generic .umap-cb-glyph { border: 1px solid currentColor; border-radius: 50%; opacity: .85; }
.umap-cb-sector { background:
  repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 9px),
  linear-gradient(180deg, rgba(20, 24, 33, 0.75), rgba(9, 11, 16, 0.9));
  background-blend-mode: overlay; }
.umap-cb-sector .umap-cb-glyph { border: 1px solid currentColor; opacity: .9; }
.umap-cb-power { background: radial-gradient(circle at 50% 50%, rgba(20, 24, 33, 0.4), rgba(9, 11, 16, 0.88)); }
.umap-cb-power .umap-cb-glyph { opacity: .9;
  background: radial-gradient(circle at 18% 50%, currentColor 0 12%, transparent 13%),
    radial-gradient(circle at 82% 50%, currentColor 0 12%, transparent 13%),
    radial-gradient(circle at 50% 82%, currentColor 0 12%, transparent 13%); }
.umap-cb-mega { background: radial-gradient(circle at 50% 50%, rgba(20, 24, 33, 0.4), rgba(9, 11, 16, 0.88)); }
.umap-cb-mega .umap-cb-glyph { border: 1px solid currentColor; border-radius: 50%;
  background: radial-gradient(circle, currentColor 0 8%, transparent 9%); opacity: .9; }
.umap-cb-landmark { background: linear-gradient(180deg, rgba(20, 24, 33, 0.6), rgba(9, 11, 16, 0.85)); }
.umap-cb-landmark .umap-cb-glyph { border: 1px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.umap-cb-belt { background:
  repeating-linear-gradient(90deg, currentColor 0, currentColor 1px, transparent 1px, transparent 6px),
  linear-gradient(180deg, rgba(20, 24, 33, 0.6), rgba(9, 11, 16, 0.85));
  background-blend-mode: overlay; }
.umap-cb-belt .umap-cb-glyph { border: 1px solid currentColor; opacity: .9; }
.umap-cb-territory { background:
  repeating-linear-gradient(-45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 12px),
  linear-gradient(180deg, rgba(20, 24, 33, 0.75), rgba(9, 11, 16, 0.9));
  background-blend-mode: overlay; }
.umap-cb-territory .umap-cb-glyph { border: 1px dashed currentColor; opacity: .85; }

/* ---------- plate thumbnails in the list rows (register, search, console) ---------- */
.umap-regthumb, .umap-result-thumb, .umap-conthumb {
  flex: none; width: 26px; height: 26px; background: #07080c;
  border: 1px solid var(--u-line); overflow: hidden; position: relative;
}
.umap-regthumb canvas, .umap-result-thumb canvas, .umap-conthumb canvas,
.umap-regthumb .umap-cardback, .umap-result-thumb .umap-cardback, .umap-conthumb .umap-cardback {
  display: block; width: 100%; height: 100%;
}
/* the mini elision bar a redacted row carries in place of a picture */
.umap-mini-redact {
  position: absolute; left: 15%; right: 15%; top: 50%; height: 6px; margin-top: -3px;
  border-top: 1px solid #cc9933; border-bottom: 1px solid #cc9933;
}

/* ---------- tooltip / help / live ---------- */
#umap-tooltip {
  position: absolute; z-index: 28; pointer-events: none; max-width: 240px;
  background: var(--u-face-deep); border: 1px solid var(--u-line-gold); border-radius: 0;
  padding: 6px 10px; font-size: 11.5px; color: #d8dee6; letter-spacing: 0.04em;
}
#umap-tooltip b { color: #eef2f7; letter-spacing: 0.1em; }
#umap-tooltip small {
  display: block; color: #8a93a8; font-size: 10px; margin-top: 2px; letter-spacing: 0.14em;
  font-family: var(--u-f-mono);
}

#umap-help {
  position: absolute; z-index: 40; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(430px, calc(100% - 32px)); background: var(--u-face-deep);
  border: 1px solid var(--u-line-gold); border-radius: 0; padding: 22px 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7);
  /* capped on the panel itself (definite basis vs #umap-app) so short boxes scroll
     the controls list instead of spilling past both edges */
  max-height: calc(100% - 32px); overflow-y: auto;
}
#umap-help h2 {
  margin: 0 0 14px; font-family: var(--u-f-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.3em; color: #e6b347;
}
#umap-help dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 0; }
#umap-help dt {
  font-family: var(--u-f-mono); font-size: 10px; letter-spacing: 0.12em;
  color: #8a93a8; text-transform: uppercase;
}
#umap-help dd { margin: 0; font-size: 12.5px; color: #cfd6e0; }
#umap-help-note { margin: 16px 0 0; font-size: 11px; line-height: 1.6; color: #77808f; border-top: 1px solid #1d2129; padding-top: 12px; }

#umap-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- fallbacks ---------- */
#umap-fallback, #umap-noscript {
  position: absolute; inset: 0; z-index: 50; overflow-y: auto; padding: calc(60px + var(--u-top, 0px)) 24px;
  background: #07080c;
}
#umap-fallback h1, #umap-noscript h1 {
  font-family: var(--u-f-display); font-weight: 700; font-size: 20px;
  letter-spacing: 0.24em; color: #e6b347;
}
#umap-fallback p, #umap-noscript p, #umap-fallback li { font-size: 13px; line-height: 1.7; color: #b8c0cc; }
#umap-fallback dl { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; }
#umap-fallback dt {
  font-family: var(--u-f-mono); color: #e6b347; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
#umap-fallback dd { margin: 0; font-size: 12.5px; color: #b8c0cc; }
#umap-noscript a { color: #e6b347; }

/* ---------- responsive ---------- */
/* the data console burger (top right): the span centers in the pad box, the pseudo bars align to it */
#umap-btn-menu { width: 34px; padding: 8px 0; position: relative; }
.umap-menu-bars, .umap-menu-bars::before, .umap-menu-bars::after {
  position: absolute; width: 20px; height: 2px;
  background: var(--u-gold-bright);
  transition: transform 0.25s ease, top 0.25s ease, background-color 0.25s ease;
}
.umap-menu-bars { left: 50%; top: 50%; margin: -1px 0 0 -10px; }
.umap-menu-bars::before, .umap-menu-bars::after { content: ""; left: 0; }
.umap-menu-bars::before { top: -6px; }
.umap-menu-bars::after { top: 6px; }
#umap-btn-menu[aria-expanded="true"] .umap-menu-bars { background: transparent; }
#umap-btn-menu[aria-expanded="true"] .umap-menu-bars::before { top: 0; transform: rotate(45deg); }
#umap-btn-menu[aria-expanded="true"] .umap-menu-bars::after { top: 0; transform: rotate(-45deg); }

/* the data console (hamburger drop from the top right) */
#umap-menu {
  position: absolute; top: calc(64px + var(--u-top, 0px)); right: 12px; z-index: 35; width: 336px;
  max-height: calc(100% - 96px - var(--u-top, 0px)); display: flex; flex-direction: column;
  background: var(--u-face-deep); border: 1px solid var(--u-line-gold); border-radius: 0;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
}
#umap-menu[hidden] { display: none !important; }
#umap-menu-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; position: relative; }
#umap-menu-title {
  margin: 0; font-family: var(--u-f-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.26em; color: #e6b347; flex: 1;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#umap-menu-back, #umap-menu-close {
  font-family: var(--u-f-mono); font-size: 9px; letter-spacing: 0.16em; color: #cfd6e0;
  background: rgba(14, 17, 24, 0.9); border: 1px solid var(--u-line-gold); border-radius: 0;
  padding: 7px 9px; cursor: pointer;
}
#umap-menu-back:hover, #umap-menu-close:hover { border-color: #cc9933; color: #e6b347; }
#umap-menu-body { flex: 1; overflow-y: auto; padding: 4px 0 10px; overscroll-behavior: contain; }
.umap-catrow {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 9px 14px; background: none; border: none; border-radius: 0;
  cursor: pointer; text-align: left; font-family: var(--u-f-body);
}
.umap-catrow:hover { background: rgba(204, 153, 51, 0.12); }
.umap-catglyph { font-family: var(--u-f-mono); font-size: 11px; color: var(--u-gold-bright); flex: none; width: 18px; }
.umap-catname { flex: 1; min-width: 0; font-size: 12.5px; letter-spacing: 0.06em; color: #d8dee6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umap-catcount { font-family: var(--u-f-mono); font-size: 9px; letter-spacing: 0.08em; color: #6f7887; flex: none; }
.umap-conhead {
  font-family: var(--u-f-mono); font-size: 8.5px; letter-spacing: 0.26em;
  color: var(--u-gold-dim); padding: 10px 14px 4px;
}
.umap-conrow {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 14px; background: none; border: none; border-radius: 0;
  cursor: pointer; text-align: left; font-family: var(--u-f-body);
}
.umap-conrow:hover { background: rgba(204, 153, 51, 0.12); }
.umap-conname { flex: 1; min-width: 0; font-size: 12.5px; color: #d8dee6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umap-conmeta { font-family: var(--u-f-mono); font-size: 9px; color: #6f7887; letter-spacing: 0.08em; flex: none; max-width: 130px; white-space: nowrap; overflow: hidden; }
.umap-datarow {
  display: flex; align-items: baseline; gap: 10px; padding: 4px 14px;
  font-family: var(--u-f-mono); font-size: 10px; letter-spacing: 0.06em;
}
.umap-datalabel {
  flex: 1; min-width: 0; color: #8a93a8; text-transform: uppercase;
  font-size: 9px; letter-spacing: 0.14em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.umap-dataval { flex: none; color: #d8dee6; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umap-wp-del {
  flex: none; width: 22px; padding: 2px 0; background: none;
  border: 1px solid var(--u-line-gold); border-radius: 0; color: #8a93a8;
  font-family: var(--u-f-mono); font-size: 10px; cursor: pointer;
}
.umap-wp-del:hover { border-color: #cc9933; color: #e6b347; }
.umap-wp-go {
  font-family: var(--u-f-body); padding: 0; background: none; border: none;
  cursor: pointer; text-align: left;
}
.umap-wp-go:hover { color: #e6b347; }
.umap-conempty { padding: 10px 14px; font-size: 11.5px; line-height: 1.5; color: #77808f; }

/* bottom-center HUD: flight log above the telemetry line */
#umap-hud {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  pointer-events: none; max-width: min(560px, calc(100% - 420px));
}
#umap-hud-line { display: flex; gap: 14px; font-family: var(--u-f-mono); font-size: 10px; letter-spacing: 0.12em; color: #a7b0bf; }
#umap-hud-line span { white-space: nowrap; }
#umap-hud-fps { color: #77808f; }
#umap-log {
  pointer-events: auto; cursor: pointer; display: flex; flex-direction: column-reverse;
  align-items: center; gap: 1px; max-width: 100%;
}
.umap-logline {
  font-family: var(--u-f-mono); font-size: 9px; letter-spacing: 0.08em; color: #8a93a8;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.umap-logline:nth-child(1) { color: #a7b0bf; }
.umap-logline:nth-child(2) { opacity: 0.75; }
.umap-logline:nth-child(3) { opacity: 0.55; }
.umap-logline:nth-child(4) { opacity: 0.35; }
#umap-log.umap-log-open {
  background: var(--u-face-deep); border: 1px solid var(--u-line-gold); border-radius: 0;
  /* 40% of the auto-height hud parent was inert; a vh cap holds on every host */
  padding: 10px 12px; max-height: min(40vh, 240px); overflow-y: auto; align-items: stretch; cursor: default;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
}

/* survey ticker under the tier line */
#umap-ticker {
  margin-top: 6px; min-height: 12px; text-align: center;
  font-family: var(--u-f-mono); font-size: 9px; letter-spacing: 0.16em;
  color: rgba(138, 147, 168, 0.72);
  max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: no-preference) {
  #umap-ticker { transition: opacity 0.45s ease; }
}

@media (max-width: 860px) {
  #umap-brand-sub { display: none; }
  #umap-brand-text { font-size: 11px; letter-spacing: 0.2em; }
  #umap-searchbox { max-width: none; }
  #umap-actions button { padding: 8px 9px; }
  #umap-btn-full { display: none; }
  #umap-tier { top: calc(58px + var(--u-top, 0px)); }
  #umap-hud { max-width: calc(100% - 24px); }
}
@media (max-width: 767px) {
  #umap-topbar { flex-wrap: wrap; gap: 8px; padding: 10px; }
  #umap-searchbox { order: 3; flex-basis: 100%; max-width: none; }
  #umap-legend { width: 216px; }
  /* the legend cap lives on the container now; the old body-level % was inert */
  #umap-scalebar { bottom: auto; top: calc(108px + var(--u-top, 0px)); }
  #umap-panel {
    top: auto; left: 0; right: 0; width: auto; max-height: 62%;
    border-left: none; border-top: 1px solid var(--u-line-gold); border-radius: 0;
    padding: 40px 18px 14px;
  }
  /* the bottom sheet takes its ::before back as the drag handle */
  #umap-panel::before {
    content: ""; top: 10px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; border: none; border-radius: 2px; background: #3a4150;
  }
  #umap-panel-title { font-size: 20px; }
  #umap-panel-media { width: 128px; margin: 0 auto 12px; }
  #umap-panel-media .umap-media-tag { font-size: 7.5px; padding: 2px 7px 1px; }
  .umap-label.umap-t1 { font-size: 12px; }
  #umap-menu { left: 10px; right: 10px; width: auto; top: calc(132px + var(--u-top, 0px)); max-height: calc(100% - 150px - var(--u-top, 0px)); }
  #umap-hud { bottom: 60px; max-width: calc(100% - 24px); }
  #umap-hud-az, #umap-hud-pol, #umap-log { display: none; }
}

/* higher-contrast preference: stronger HUD borders and label weight */
@media (prefers-contrast: more) {
  .umap-label { font-weight: 600; }
  #umap-legend, #umap-panel, #umap-tooltip, #umap-register, #umap-help, #umap-search-results, #umap-menu {
    border-color: var(--u-line-gold-strong);
  }
  #umap-legend::before, #umap-legend::after, #umap-register::before, #umap-register::after,
  #umap-help::before, #umap-help::after, #umap-panel::after, #umap-menu::before, #umap-menu::after {
    border-color: var(--u-gold-bright);
  }
}

/* reduced motion: no hover transitions on labels, no scan shimmer
   (the shimmer keyframes live only inside the no-preference block) */
@media (prefers-reduced-motion: reduce) {
  .umap-label { transition: none; }
  #umap-legend-head::after, #umap-register-top::after, #umap-help h2::after, #umap-menu-top::after { animation: none; }
  .umap-menu-bars, .umap-menu-bars::before, .umap-menu-bars::after { transition: none; }
}

/* worlds register in the dossier panel */
.umap-worlds { margin-top: 12px; }
.umap-worlds-head { font-size: 10px; letter-spacing: 0.14em; color: #8a93a8; margin-bottom: 5px; }
button.umap-world {
  display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 8px;
  background: rgba(18, 22, 30, 0.65); border: 1px solid #232a36; border-radius: 0;
  color: #d8dee6; padding: 6px 9px; margin: 3px 0; font-family: var(--u-f-mono);
  font-size: 11.5px; cursor: pointer; text-align: left;
}
button.umap-world:hover, button.umap-world:focus-visible { border-color: #cc9933; }
.umap-world-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umap-world-cls { color: #8a93a8; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }

/* legend select-all / none */
#umap-legend-actions { display: flex; gap: 6px; padding: 7px 10px 0; }
#umap-legend-actions button {
  flex: 1; background: rgba(18, 22, 30, 0.5); border: 1px solid var(--u-line-gold); border-radius: 0;
  color: #a7b0bf; font-family: var(--u-f-mono); font-size: 9.5px; letter-spacing: 0.14em;
  padding: 4px 0; cursor: pointer;
}
#umap-legend-actions button:hover, #umap-legend-actions button:focus-visible { border-color: #cc9933; color: #e6b347; }

/* galactic north dial: round is semantic here, a real instrument */
#umap-compass {
  position: absolute; right: 16px; bottom: 66px; z-index: 10;
  width: 46px; height: 46px; border: 1px solid var(--u-line-gold-strong);
  border-radius: 50%; background: rgba(10, 12, 18, 0.72);
  pointer-events: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
#umap-compass-n {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  font-size: 8px; letter-spacing: 0.1em; color: #8a93a8;
}
#umap-compass-needle {
  position: absolute; top: 7px; left: calc(50% - 1px); width: 2px; height: 32px;
  transform-origin: 50% 50%;
  background: linear-gradient(to bottom, rgba(167, 176, 191, 0.9) 0 12px, rgba(167, 176, 191, 0.25) 12px 100%);
}
#umap-compass-needle::before {
  content: ''; position: absolute; left: -3px; top: -6px; width: 8px; height: 11px;
  background: #e6b347; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* the register: browsable library of every charted entity */
#umap-register {
  position: absolute; top: calc(64px + var(--u-top, 0px)); left: 12px; bottom: 14px; z-index: 22;
  width: 320px; display: flex; flex-direction: column;
  background: var(--u-face-deep); border: 1px solid var(--u-line-gold); border-radius: 0;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
}
#umap-register-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; position: relative; }
#umap-register-top h2 {
  margin: 0; font-family: var(--u-f-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.26em; color: #e6b347; flex: none;
}
#umap-register-q {
  flex: 1; min-width: 0; padding: 6px 9px; background: rgba(14, 17, 24, 0.9);
  border: 1px solid var(--u-line-gold); border-radius: 0; color: #eef2f7;
  font-family: var(--u-f-mono); font-size: 11px; caret-color: var(--u-gold-bright);
}
#umap-register-q:focus { outline: none; border-color: #cc9933; }
#umap-register-close {
  font-family: var(--u-f-mono); font-size: 9px; letter-spacing: 0.16em; color: #cfd6e0;
  background: rgba(14, 17, 24, 0.9); border: 1px solid var(--u-line-gold); border-radius: 0;
  padding: 7px 9px; cursor: pointer;
}
#umap-register-close:hover { border-color: #cc9933; color: #e6b347; }
#umap-register-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 12px 8px; border-bottom: 1px solid #20262f; }
.umap-regchip {
  font-family: var(--u-f-mono); font-size: 9px; letter-spacing: 0.1em; padding: 4px 8px; cursor: pointer;
  background: rgba(20, 24, 32, 0.8); border: 1px solid var(--u-line-gold); border-radius: 0; color: #a7b0bf;
}
.umap-regchip[aria-pressed="true"] { border-color: #cc9933; color: #e6b347; background: rgba(204, 153, 51, 0.14); }
#umap-register-list { flex: 1; overflow-y: auto; padding: 4px 0 10px; }
.umap-reggroup {
  font-family: var(--u-f-mono); font-size: 8.5px; letter-spacing: 0.26em;
  color: var(--u-gold-dim); padding: 10px 14px 4px;
}
.umap-regrow {
  display: flex; align-items: center; gap: 8px; padding: 5px 14px; cursor: pointer;
}
.umap-regrow:hover { background: rgba(204, 153, 51, 0.12); }
.umap-regrow .umap-regname { font-size: 12.5px; color: #d8dee6; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.umap-regrow .umap-regmeta { font-family: var(--u-f-mono); font-size: 9px; color: #6f7887; letter-spacing: 0.08em; flex: none; max-width: 130px; white-space: nowrap; overflow: hidden; }

/* the hidden attribute must win over the drawer's display: flex */
#umap-register[hidden] { display: none !important; }

/* the exit action belongs to the embedded gate: standalone IS the page */
body:not([data-page='home']) #umap-btn-exit { display: none; }

/* ---------- embedded gate (homepage hero only) ----------
   The host page owns the bit: body.umap-engaged means the visitor took the
   controls; every other state is dormant (page scroll wins, chrome hides).
   Scoped to data-page="home" so the standalone page never matches. */
body[data-page='home']:not(.umap-engaged) #umap-app { pointer-events: none; }
/* .umap-label (labels block above), #umap-topbar > * and #umap-log set
   pointer-events: auto, and a descendant with auto stays hit-testable under
   a none ancestor: close those three explicitly */
body[data-page='home']:not(.umap-engaged) #umap-app .umap-label,
body[data-page='home']:not(.umap-engaged) #umap-app #umap-topbar > *,
body[data-page='home']:not(.umap-engaged) #umap-app #umap-log { pointer-events: none; }

body[data-page='home']:not(.umap-engaged) #umap-topbar,
body[data-page='home']:not(.umap-engaged) #umap-register,
body[data-page='home']:not(.umap-engaged) #umap-menu,
body[data-page='home']:not(.umap-engaged) #umap-tier,
body[data-page='home']:not(.umap-engaged) #umap-scalebar,
body[data-page='home']:not(.umap-engaged) #umap-compass,
body[data-page='home']:not(.umap-engaged) #umap-hud,
body[data-page='home']:not(.umap-engaged) #umap-legend,
body[data-page='home']:not(.umap-engaged) #umap-panel,
body[data-page='home']:not(.umap-engaged) #umap-help,
body[data-page='home']:not(.umap-engaged) #umap-tooltip,
body[data-page='home']:not(.umap-engaged) #umap-fallback,
body[data-page='home']:not(.umap-engaged) #umap-labels {
  visibility: hidden; opacity: 0;
}
body[data-page='home'].umap-engaged #umap-topbar,
body[data-page='home'].umap-engaged #umap-register,
body[data-page='home'].umap-engaged #umap-menu,
body[data-page='home'].umap-engaged #umap-tier,
body[data-page='home'].umap-engaged #umap-scalebar,
body[data-page='home'].umap-engaged #umap-compass,
body[data-page='home'].umap-engaged #umap-hud,
body[data-page='home'].umap-engaged #umap-legend,
body[data-page='home'].umap-engaged #umap-panel,
body[data-page='home'].umap-engaged #umap-help,
body[data-page='home'].umap-engaged #umap-fallback,
body[data-page='home'].umap-engaged #umap-labels {
  visibility: visible; opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  /* dormant side: visibility waits out the fade; engaged side: immediate */
  body[data-page='home'] #umap-topbar, body[data-page='home'] #umap-register,
  body[data-page='home'] #umap-menu, body[data-page='home'] #umap-tier,
  body[data-page='home'] #umap-scalebar, body[data-page='home'] #umap-compass,
  body[data-page='home'] #umap-hud, body[data-page='home'] #umap-legend,
  body[data-page='home'] #umap-panel, body[data-page='home'] #umap-help,
  body[data-page='home'] #umap-fallback, body[data-page='home'] #umap-labels {
    transition: opacity .35s ease, visibility 0s linear .35s;
  }
  body[data-page='home'].umap-engaged #umap-topbar, body[data-page='home'].umap-engaged #umap-register,
  body[data-page='home'].umap-engaged #umap-menu, body[data-page='home'].umap-engaged #umap-tier,
  body[data-page='home'].umap-engaged #umap-scalebar, body[data-page='home'].umap-engaged #umap-compass,
  body[data-page='home'].umap-engaged #umap-hud, body[data-page='home'].umap-engaged #umap-legend,
  body[data-page='home'].umap-engaged #umap-panel, body[data-page='home'].umap-engaged #umap-help,
  body[data-page='home'].umap-engaged #umap-fallback {
    transition: opacity .35s ease;
  }
  body[data-page='home'].umap-engaged #umap-labels { transition: opacity .5s ease .12s; }
}