.viz-stage {
  --map-fg: color-mix(in srgb, var(--paper) 92%, #fff);
  --map-muted: color-mix(in srgb, var(--paper) 58%, transparent);
  --map-line: color-mix(in srgb, var(--crimson-bright) 28%, transparent);
  --map-panel: color-mix(in srgb, var(--ink) 78%, var(--crimson-deep));
  --map-air: #f0c14a;
  --map-air-soft: #ffe08a;
  --map-ocean: #3ec6d8;
  --map-ocean-soft: #7dffd4;
  --map-rail: #3dff8a;
  --map-rail-soft: #9dffc4;
  --map-road: #e8d5a3;
  --map-live: #3dff8a;
  padding: clamp(56px, 7vw, 96px) 0;
  color: var(--map-fg);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--crimson) 42%, var(--ink)) 0%, var(--crimson-deep) 46%, var(--ink) 100%);
  overflow-x: clip;
}
.viz-stage.is-supporting { padding: clamp(40px, 5vw, 72px) 0; }
.viz-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; margin-bottom: 20px; align-items: end; }
.viz-head h2 { font-size: clamp(28px, 3.4vw, 46px); text-transform: uppercase; letter-spacing: -.04em; color: var(--map-fg); }
.viz-stage.is-supporting .viz-head h2 { font-size: clamp(24px, 3vw, 38px); }
.viz-head h2 span { color: var(--crimson-bright); }
.viz-head p, .viz-caption, .viz-card-hint, .route-demo-note { color: var(--map-muted); }
.viz-stage .eyebrow.light { color: var(--crimson-bright); }
.viz-stage .eyebrow.light::before { background: var(--crimson-bright); }
.viz-layout { display: block; min-width: 0; }
.ops-bezel {
  padding: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--crimson) 28%, var(--ink)), var(--ink));
  border: 1px solid var(--map-line);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 70%, transparent),
    0 28px 80px color-mix(in srgb, var(--crimson-deep) 55%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--paper) 12%, transparent);
}
.ops-console { position: relative; }
.ops-screen {
  position: relative;
  min-width: 0;
  min-height: 0;
  background:
    radial-gradient(ellipse at 18% 30%, color-mix(in srgb, var(--crimson-bright) 10%, transparent), transparent 38%),
    radial-gradient(ellipse at 78% 62%, color-mix(in srgb, var(--map-air) 6%, transparent), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--crimson-deep) 38%, var(--ink)) 0%, var(--ink) 100%);
  border: 1px solid var(--map-line);
  border-radius: 10px;
  overflow: hidden;
}
.ops-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .08) 3px),
    radial-gradient(ellipse at center, transparent 48%, color-mix(in srgb, var(--ink) 38%, transparent) 100%);
  z-index: 4;
}
.ops-hud {
  position: absolute;
  z-index: 5;
  inset: 12px 16px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  pointer-events: none;
}
.ops-hud-brand { display: grid; gap: 2px; }
.viz-stage .ops-kicker {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--map-fg);
}
.ops-tag {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--map-muted);
}
.ops-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--map-rail-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ops-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--map-live);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--map-live) 18%, transparent);
  animation: pcLive 1.8s ease-in-out infinite;
}
.ops-clock {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--map-muted);
}
.ops-map-frame {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.ops-screen svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1680 / 780;
}
.viz-grid-line {
  fill: none;
  stroke: color-mix(in srgb, var(--crimson-bright) 10%, transparent);
}
.viz-graticule path {
  fill: none;
  stroke: color-mix(in srgb, var(--crimson-bright) 12%, transparent);
  stroke-width: 1;
}
.land-wash {
  fill: color-mix(in srgb, var(--paper) 28%, var(--crimson-dark));
  stroke: color-mix(in srgb, var(--paper) 48%, var(--crimson-bright));
  stroke-width: 1.05;
  paint-order: stroke fill;
}
.country-border {
  fill: none;
  stroke: color-mix(in srgb, var(--paper) 68%, var(--crimson-bright));
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: .9;
}
.geo-ocean, .geo-continent {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  fill: color-mix(in srgb, var(--paper) 48%, transparent);
  text-anchor: middle;
  pointer-events: none;
}
.geo-continent {
  fill: color-mix(in srgb, var(--paper) 72%, transparent);
  letter-spacing: .34em;
  font-size: 12px;
}
.route-glow { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .18; }
.route-glow.air { stroke: var(--map-air); }
.route-glow.ocean { stroke: var(--map-ocean-soft); }
.route-glow.road { stroke: var(--map-road); }
.route-glow.rail { stroke: var(--map-rail); }
.route-line {
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-dasharray: 4 10;
  opacity: .92;
  animation: pcDash 18s linear infinite;
}
.route-line.air { stroke-width: 1.85; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--map-air) 45%, transparent)); }
.route-line.ocean { animation-duration: 28s; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--map-ocean) 35%, transparent)); }
.route-line.road { animation-duration: 11s; stroke-dasharray: 3 7; }
.route-line.rail { animation-duration: 16s; stroke-dasharray: 8 6 2 6; }
.hub { cursor: pointer; outline: none; }
.hub .hub-pulse {
  fill: color-mix(in srgb, var(--crimson-bright) 28%, transparent);
  stroke: none;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: pcHub 2.8s ease-in-out infinite;
}
.hub .hub-mark { pointer-events: none; fill: var(--map-fg); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--crimson-bright) 70%, transparent)); }
.hub .hub-ring { fill: transparent; stroke: transparent; stroke-width: 1.4; pointer-events: all; }
.hub:hover .hub-ring,
.hub:focus-visible .hub-ring,
.hub.is-active .hub-ring { stroke: var(--crimson-bright); }
.hub-primary .hub-mark { fill: var(--map-air-soft); }
.hub-ocean .hub-mark { fill: var(--map-ocean-soft); }
.hub-depot .hub-mark { fill: var(--paper); }
.viz-label {
  fill: color-mix(in srgb, var(--paper) 82%, #fff);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  pointer-events: none;
  display: none;
}
.viz-label.is-primary,
.viz-label.is-emphasis { display: unset; font-size: 11px; font-weight: 800; fill: var(--map-fg); }
.token { fill: #fff; pointer-events: none; }
.token .halo { fill: color-mix(in srgb, var(--crimson-bright) 22%, transparent); }
.token-plane { fill: var(--map-air-soft); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--map-air) 70%, transparent)); }
.token-ship { fill: var(--map-ocean-soft); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--map-ocean) 55%, transparent)); }
.token-truck,
.token-van { fill: var(--map-road); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--map-road) 45%, transparent)); }
.token-train { fill: var(--map-rail-soft); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--map-rail) 40%, transparent)); }
.token-parcel { fill: var(--paper); }
.hub.is-arriving .hub-pulse { animation-duration: 1.1s; }
.hub.is-emphasis .hub-ring { stroke: var(--map-air); }
.hub.is-emphasis .hub-pulse { fill: color-mix(in srgb, var(--map-air) 32%, transparent); }
.ops-callout { pointer-events: none; }
.ops-callout-card {
  fill: color-mix(in srgb, var(--ink) 88%, transparent);
  stroke: color-mix(in srgb, var(--crimson-bright) 40%, transparent);
  stroke-width: 1;
}
.ops-callout-code {
  fill: var(--map-air);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}
.ops-callout-meta {
  fill: var(--map-muted);
  font-size: 9px;
  letter-spacing: .08em;
}
.viz-legend {
  position: absolute;
  left: 16px;
  bottom: 42px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 8px 12px;
  max-width: min(520px, calc(100% - 340px));
  background: color-mix(in srgb, var(--map-panel) 72%, transparent);
  border: 1px solid var(--map-line);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.viz-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--map-fg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.viz-legend-item svg { flex: 0 0 auto; fill: currentColor; overflow: visible; }
.viz-legend-item.mode-air { color: var(--map-air-soft); }
.viz-legend-item.mode-ocean { color: var(--map-ocean-soft); }
.viz-legend-item.mode-road { color: var(--map-road); }
.viz-legend-item.mode-rail { color: var(--map-rail-soft); }
.viz-caption {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 8px 18px 10px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.viz-stage .ops-rail {
  position: absolute;
  top: 52px;
  right: 12px;
  bottom: 36px;
  z-index: 6;
  width: min(292px, 34%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  overflow: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--map-panel) 88%, transparent), color-mix(in srgb, var(--map-panel) 72%, transparent));
  border: 1px solid var(--map-line);
  border-radius: 8px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.ops-inspect { padding-bottom: 8px; border-bottom: 1px solid var(--map-line); }
.ops-inspect[hidden] { display: none; }
.route-id { margin: 6px 0 8px; font-size: 18px; letter-spacing: -.03em; word-break: break-word; color: var(--map-fg); }
.route-demo-note { margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.ops-inspect dl { margin: 0 0 8px; }
.ops-inspect dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--paper) 8%, transparent); }
.ops-inspect dt { color: var(--map-muted); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; flex: 0 0 auto; }
.ops-inspect dd { margin: 0; font-weight: 700; text-align: right; font-size: 12px; }
.viz-card-hint { margin: 0; font-size: 12px; line-height: 1.45; }
.ops-board-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--map-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ops-board-head b { color: var(--map-fg); }
.ops-shipments, .ops-hubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ops-shipments li,
.ops-hubs li {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.ops-shipments li.is-active,
.ops-shipments li:hover {
  background: color-mix(in srgb, var(--crimson-bright) 10%, transparent);
  border-color: var(--map-line);
}
.ops-ship-icon {
  display: grid;
  place-items: center;
  color: var(--crimson-bright);
}
.ops-ship-icon svg { width: 16px; height: 12px; overflow: visible; fill: currentColor; }
.ops-ship-icon.mode-air { color: var(--map-air-soft); }
.ops-ship-icon.mode-ocean { color: var(--map-ocean-soft); }
.ops-ship-icon.mode-rail { color: var(--map-rail-soft); }
.ops-ship-icon.mode-road { color: var(--map-road); }
.ops-shipments strong, .ops-hubs strong { display: block; font-size: 11px; letter-spacing: .04em; color: var(--map-fg); }
.ops-shipments span, .ops-hubs span { color: var(--map-muted); font-size: 10px; }
.ops-ship-meta { text-align: right; }
.ops-ship-meta em {
  display: block;
  font-style: normal;
  color: var(--map-live);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}
.ops-ship-meta small { display: block; color: var(--map-muted); font-size: 9px; letter-spacing: .04em; }
.ops-hubs li { grid-template-columns: 10px 1fr auto; }
.ops-hubs i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--map-live);
  box-shadow: 0 0 8px color-mix(in srgb, var(--map-live) 70%, transparent);
}
.ops-sim {
  margin: 4px 0 0;
  color: var(--map-muted);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.viz-stage .ops-cta { margin-top: 6px; align-self: start; }
.viz-stage .ops-cta.button.small { min-height: 34px; padding: 0 12px; font-size: 11px; }
.viz-stage .ops-cta.is-map-cta {
  width: 100%;
  justify-content: center;
  min-height: 40px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.viz-stage.is-focused .route-line:not(.is-emphasis),
.viz-stage.is-focused .route-glow:not(.is-emphasis) { opacity: .12; }
.viz-stage.is-focused .route-line.is-emphasis {
  opacity: 1;
  stroke-width: 2.4;
}
.viz-stage.is-focused .route-glow.is-emphasis { opacity: .32; }
.viz-stage.is-focused .hub:not(.is-emphasis) { opacity: .28; }
.viz-stage.is-focused .hub.is-emphasis { opacity: 1; }
.viz-stage.is-focused .token:not(.is-emphasis):not(.is-background) { opacity: .18; }
.viz-stage.is-focused .token.is-emphasis { opacity: 1; }
.viz-stage.is-focused .viz-label:not(.is-emphasis):not(.is-primary) { display: none; }
.viz-stage.is-focused .viz-label.is-primary:not(.is-emphasis) { opacity: .28; }

@keyframes pcDash {
  to { stroke-dashoffset: -280; }
}
@keyframes pcHub {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(2.1); opacity: 0; }
}
@keyframes pcLive {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (max-width: 1080px) {
  .viz-head { grid-template-columns: 1fr; }
  .ops-inspect dl div { gap: 8px; }
  .ops-inspect dd { word-break: break-word; overflow-wrap: anywhere; }
}
@media (max-width: 660px) {
  .route-line[data-mobile="0"],
  .route-glow[data-mobile="0"],
  .token[data-mobile="0"],
  .hub[data-priority="3"]:not(.is-emphasis),
  .viz-label[data-priority="2"]:not(.is-emphasis),
  .viz-label[data-priority="3"]:not(.is-emphasis),
  .ops-callout { display: none; }
  .viz-legend { left: auto; right: auto; top: auto; max-width: none; border-radius: 12px; }
  .viz-legend-item { letter-spacing: .08em; }
  .viz-stage .ops-kicker { font-size: 11px; }
  .viz-stage .ops-clock { width: auto; }
  .viz-stage { padding-top: 56px; }
  .ops-bezel { padding: 8px; border-radius: 12px; }
  .ops-shipments li,
  .ops-hubs li { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .ops-inspect dl div {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .ops-inspect dd { text-align: left; }
  .viz-stage .ops-street-panel .tt-map {
    min-height: 220px;
    height: min(48dvh, 340px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .token,
  .route-line,
  .journey-line,
  .hub-pulse,
  .track-pulse,
  .ops-live i { animation: none !important; }
}

.viz-stage.is-embedded {
  padding: 0;
  background: none;
  overflow: visible;
}
.viz-stage.is-tracking .viz-head h2 { font-size: clamp(24px, 3vw, 38px); }
.viz-embed { min-width: 0; }
.tt-desk { margin-top: 28px; }
.tt-desk .viz-stage {
  padding: 0;
  border-radius: 16px;
  overflow: clip;
}
.tt-map-rail {
  position: absolute;
  z-index: 5;
  left: 16px;
  right: min(312px, 36%);
  top: 52px;
  pointer-events: none;
}
.tt-map-rail .tt-rail-line {
  position: relative;
  height: 2px;
  background: rgba(255,255,255,.28);
  margin: 0 6px 10px;
}
.tt-map-rail .tt-rail-line b { position: absolute; left: 0; top: 0; height: 2px; background: #fff; }
.tt-map-rail .tt-rail-line i {
  position: absolute; top: -6px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transform: translateX(-50%);
}
.tt-map-rail .tt-legs { display: flex; justify-content: space-between; gap: 8px; }
.tt-map-rail .tt-legs div { flex: 1; min-width: 0; }
.tt-map-rail .tt-legs span {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4); margin-bottom: 6px;
}
.tt-map-rail .tt-legs .done span { background: #fff; }
.tt-map-rail .tt-legs strong {
  display: block; font-size: 10px; letter-spacing: .1em; color: var(--map-fg);
}
.tt-map-rail .tt-legs small { color: var(--map-muted); font-size: 10px; }
.journey-glow { fill: none; stroke-width: 10; stroke-linecap: round; opacity: .22; }
.journey-glow.air { stroke: var(--map-air); }
.journey-glow.ocean { stroke: var(--map-ocean-soft); }
.journey-glow.road { stroke: var(--map-road); }
.journey-glow.rail { stroke: var(--map-rail); }
.journey-line {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 7 11;
  opacity: .95;
  animation: pcDash 16s linear infinite;
}
.journey-line.air { stroke: var(--map-air-soft); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--map-air) 55%, transparent)); }
.journey-line.ocean { stroke: var(--map-ocean-soft); animation-duration: 26s; }
.journey-line.road { stroke: var(--map-road); animation-duration: 10s; }
.journey-line.rail { stroke: var(--map-rail-soft); }
.journey-line.is-done { stroke-dasharray: none; opacity: 1; }
.journey-line.is-remaining { opacity: .42; }
.journey-line.is-current { opacity: 1; }
.track-stop { cursor: pointer; outline: none; }
.track-stop .track-pulse {
  fill: color-mix(in srgb, var(--map-air) 30%, transparent);
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: pcHub 2.6s ease-in-out infinite;
}
.track-stop .track-ring { fill: transparent; stroke: var(--map-air-soft); stroke-width: 1.6; pointer-events: all; }
.track-stop .track-mark { fill: #fff; pointer-events: none; }
.track-stop.is-origin .track-mark { fill: var(--crimson-bright); }
.track-stop.is-destination .track-mark { fill: var(--map-rail-soft); }
.track-stop.is-airborne .track-mark { fill: var(--map-air); }
.track-stop.is-current .track-ring { stroke: #fff; stroke-width: 2; }
.track-stop.is-current .track-pulse { fill: color-mix(in srgb, #fff 35%, transparent); }
.track-stop:hover .track-ring,
.track-stop:focus-visible .track-ring,
.track-stop.is-active .track-ring { stroke: #fff; }
.track-label {
  fill: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  pointer-events: none;
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--ink) 70%, transparent);
  stroke-width: 3px;
}
.track-label.is-current { font-size: 12px; }
.journey-trace { fill: none; stroke: none; pointer-events: none; }
.token.is-pinned { opacity: 1; }
.viz-stage.is-tracking .token.is-background {
  opacity: .42;
  filter: grayscale(.35) saturate(.7);
}
.viz-stage.is-tracking.is-focused .token.is-background { opacity: .42; }
.viz-stage.is-tracking .token.is-own {
  opacity: 1;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--map-air) 70%, transparent));
}
.viz-stage.is-tracking .token.is-own .halo {
  fill: color-mix(in srgb, var(--map-air) 38%, transparent);
  animation: pcHub 2.8s ease-in-out infinite;
}
.ops-live.is-network { color: var(--map-muted); }
.ops-live.is-network i {
  background: var(--map-ocean-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--map-ocean) 18%, transparent);
}
.tt-map-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--map-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  pointer-events: auto;
}
.tt-map-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--map-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.tt-map-switch button.is-active {
  background: color-mix(in srgb, var(--crimson) 72%, var(--ink));
  color: #fff;
}
.ops-street-panel {
  display: none;
  position: absolute;
  z-index: 5;
  inset: 52px 12px 40px;
  right: calc(22px + min(292px, 34%));
  overflow: hidden;
  border: 1px solid var(--map-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 82%, #1a1f28);
}
.viz-stage[data-active-map="google"] .ops-street-panel { display: block; }
.viz-stage[data-active-map="google"] .ops-screen > .ops-map-frame,
.viz-stage[data-active-map="google"] .ops-screen > svg,
.viz-stage[data-active-map="google"] .viz-legend,
.viz-stage[data-active-map="google"] .tt-map-rail {
  visibility: hidden;
  pointer-events: none;
}
.viz-stage .ops-street-panel .tt-map {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  aspect-ratio: auto;
  min-height: 0;
  height: 100%;
  background: #e8eaed;
}
.ops-street-note {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  margin: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  color: var(--map-fg);
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.ops-street-note strong { letter-spacing: .12em; text-transform: uppercase; font-size: 10px; color: var(--crimson-bright); }
.ops-street-empty {
  margin: 0;
  padding: 28px;
  color: var(--ink);
  font-size: 14px;
}
.viz-stage.is-tracking.is-focused .route-line,
.viz-stage.is-tracking.is-focused .route-glow { opacity: .08; }
.viz-stage.is-tracking.is-focused .hub:not(.is-emphasis) { opacity: .18; }
.viz-stage.is-tracking.is-focused .hub.is-emphasis { opacity: .55; }
.viz-stage.is-tracking .viz-label { display: none; }
.ops-live.is-recorded { color: var(--map-air-soft); }
.ops-live.is-recorded i { background: var(--map-air); box-shadow: 0 0 0 4px color-mix(in srgb, var(--map-air) 18%, transparent); animation: none; }
.viz-stage.is-tracking .ops-shipments li.is-active { background: color-mix(in srgb, var(--map-air) 14%, transparent); }
@media (max-width: 980px) {
  .viz-stage,
  .tt-desk .viz-stage {
    overflow: hidden;
  }
  .viz-layout,
  .ops-bezel,
  .ops-console,
  .ops-screen,
  .ops-map-frame {
    min-width: 0;
    max-width: 100%;
  }
  .ops-console {
    display: flex;
    flex-direction: column;
  }
  .ops-screen {
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: auto;
    height: auto;
  }
  .ops-map-frame {
    overflow: hidden;
    width: 100%;
  }
  .ops-screen svg,
  .ops-map-frame svg {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1680 / 780;
  }
  .ops-hud {
    position: absolute;
    inset: 8px 8px auto;
    z-index: 5;
    gap: 8px;
    pointer-events: none;
  }
  .ops-hud-brand,
  .ops-clock,
  .ops-live.is-network { display: none; }
  .tt-map-switch { pointer-events: auto; }
  .tt-map-rail,
  .viz-legend,
  .viz-stage .ops-rail {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
  .tt-map-rail { padding: 10px 12px 6px; }
  .viz-legend {
    padding: 8px 12px;
    border-left: 0;
    border-right: 0;
  }
  .viz-stage .ops-rail {
    max-height: none;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  .viz-stage:not(.is-tracking) .viz-label { display: none; }
  .ops-street-panel {
    position: absolute;
    inset: 0;
    right: 0;
    min-height: 0;
    margin: 0;
    border-radius: 0;
  }
  .viz-stage[data-active-map="google"] .ops-screen {
    min-height: 240px;
    aspect-ratio: 16 / 10;
  }
  .viz-stage[data-active-map="google"] .ops-screen > .ops-map-frame,
  .viz-stage[data-active-map="google"] .ops-map-frame { display: none; }
  .geo-ocean,
  .geo-continent,
  .viz-graticule,
  .ops-callout,
  .token.is-background { display: none; }
}
@media (max-width: 660px) {
  .viz-stage.is-embedded { padding-top: 0; }
  .track-label { font-size: 10px; }
  .viz-stage:not(.is-tracking) .ops-shipments,
  .viz-stage:not(.is-tracking) .ops-hubs { max-height: 220px; overflow: auto; }
}

/* Tracking desk: keep shipment facts off the globe and full-width on phones */
@media (max-width: 1200px) {
  .tt-desk .viz-stage,
  .tt-desk.tt-live .viz-stage,
  .viz-stage.is-tracking {
    overflow: visible;
  }
  .tt-desk .ops-console,
  .viz-stage.is-tracking .ops-console {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
  }
  .tt-desk .ops-screen,
  .viz-stage.is-tracking .ops-screen {
    overflow: hidden;
    width: 100%;
    order: 2;
  }
  .tt-desk .ops-hud,
  .viz-stage.is-tracking .ops-hud {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    padding: 10px 12px 8px;
    pointer-events: auto;
  }
  .tt-desk .ops-map-frame,
  .viz-stage.is-tracking .ops-map-frame,
  .tt-desk .ops-screen svg,
  .viz-stage.is-tracking .ops-map-frame svg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
  .tt-desk .tt-map-rail,
  .tt-desk .viz-legend,
  .tt-desk .ops-rail,
  .viz-stage.is-tracking .tt-map-rail,
  .viz-stage.is-tracking .viz-legend,
  .viz-stage.is-tracking .ops-rail {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    border-radius: 0;
    overflow: visible;
  }
  .tt-desk .tt-map-rail,
  .viz-stage.is-tracking .tt-map-rail { order: 3; padding: 12px 14px 8px; }
  .tt-desk .viz-legend,
  .viz-stage.is-tracking .viz-legend { order: 4; padding: 10px 14px; }
  .tt-desk .ops-rail,
  .viz-stage.is-tracking .ops-rail {
    order: 5;
    padding: 14px 16px 16px;
  }
  .tt-desk .viz-caption,
  .viz-stage.is-tracking .viz-caption { order: 6; }
  .tt-desk .ops-inspect,
  .viz-stage.is-tracking .ops-inspect {
    width: 100%;
    padding: 4px 0 14px;
  }
  .tt-desk .route-id,
  .viz-stage.is-tracking .route-id {
    font-size: clamp(1.35rem, 6vw, 1.85rem);
  }
  .tt-desk .ops-inspect dl,
  .viz-stage.is-tracking .ops-inspect dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }
  .tt-desk .ops-inspect dl div,
  .viz-stage.is-tracking .ops-inspect dl div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 0;
  }
  .tt-desk .ops-inspect dt,
  .viz-stage.is-tracking .ops-inspect dt { font-size: 11px; }
  .tt-desk .ops-inspect dd,
  .viz-stage.is-tracking .ops-inspect dd {
    text-align: left;
    font-size: 15px;
    line-height: 1.35;
    word-break: break-word;
  }
  .tt-desk .ops-shipments,
  .tt-desk .ops-hubs,
  .viz-stage.is-tracking .ops-shipments {
    max-height: none;
    overflow: visible;
  }
  .tt-desk .ops-shipments li,
  .viz-stage.is-tracking .ops-shipments li {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    padding: 10px 6px;
  }
  .tt-desk .ops-street-panel,
  .viz-stage.is-tracking .ops-street-panel {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    min-height: 240px;
    margin: 0;
  }
}