.server-map:has(.atlas-shell), .home-map:has(.atlas-shell) { height: auto; min-height: 0; background: #e8f3f4; }
.atlas-shell { --atlas-ink: #1e515c; --atlas-blue: #176e9b; --atlas-paper: #faf6e9; --atlas-border: #9db7b4; --atlas-muted: #42666b; width: 100%; min-width: 0; color: var(--atlas-ink); font-family: "IBM Plex Sans", sans-serif; background: var(--atlas-paper); text-align: left; }
.atlas-shell *, .atlas-shell *::before, .atlas-shell *::after { box-sizing: border-box; }
.atlas-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid #a1b9b6; }
.atlas-kicker, .atlas-edition { font-family: "IBM Plex Mono", monospace; font-size: 9px; line-height: 1.5; letter-spacing: .14em; }
.atlas-head h3 { margin: 5px 0 0; font-family: "IBM Plex Sans Condensed", sans-serif; font-size: clamp(28px, 3vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; }
.atlas-edition { align-self: flex-start; padding-top: 5px; white-space: nowrap; color: #577c7c; }
.atlas-instrument { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 16px; padding: 10px 22px; font-family: "IBM Plex Mono", monospace; font-size: 11px; line-height: 1.6; border-bottom: 1px solid #b7ccca; }
.atlas-status { color: #557c7c; }
.atlas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--atlas-border); }
.atlas-presets, .atlas-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.atlas-help { font-size: 12px; line-height: 1.5; color: var(--atlas-muted); }
.atlas-viewport { position: relative; overflow: hidden; background: #deeff1; isolation: isolate; }
.atlas-surface { display: block; width: 100%; height: clamp(300px, 40vw, 460px); overflow: hidden; touch-action: none; cursor: grab; outline-offset: -4px; }
.atlas-surface.is-dragging { cursor: grabbing; }
.atlas-ocean { fill: #deeff1; }
.atlas-graticule { stroke: #94bcc3; stroke-width: .5; opacity: .55; }
.atlas-country { fill: #f4f0df; stroke: #89a5a3; stroke-width: .55; transition: fill .15s; }
.atlas-country.is-network-country { fill: #e2eddc; stroke: #608a87; }
.atlas-country.is-selected { fill: #b9d5b9; stroke: #356d72; stroke-width: 1.1; }
.atlas-labels { fill: #567e85; opacity: .65; font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 2px; pointer-events: none; }
.atlas-route { fill: none; stroke: #287f9e; stroke-width: 1.6; stroke-opacity: .66; pointer-events: none; }
.atlas-route[hidden], .atlas-route-hit[hidden] { display: none; }
.atlas-route.is-muted { stroke-opacity: .18; }
.atlas-route-hit { cursor: pointer; pointer-events: stroke; outline: none; }
.atlas-route-hit:focus-visible { stroke: #176e9b; stroke-opacity: .22; }
.atlas-route.is-selected { stroke: #0d5f89; stroke-opacity: 1; stroke-width: 2.4; }
.atlas-node { cursor: pointer; outline: none; }
.atlas-node .atlas-node-halo { fill: #fffbed; stroke: #286981; stroke-width: 1.5; }
.atlas-node.is-selected .atlas-node-halo, .atlas-node:focus .atlas-node-halo { stroke-width: 3; stroke: #13475e; fill: #c7e1dd; }
.atlas-node-label { font-size: 12px; font-weight: 600; fill: var(--atlas-ink); pointer-events: none; }
.atlas-node-count { font: 10px "IBM Plex Mono", monospace; fill: var(--atlas-muted); pointer-events: none; }
.atlas-callout rect { fill: #fffbed; stroke: #63898e; stroke-width: 1; }
.atlas-node:hover .atlas-callout rect { fill: #e8f0e6; stroke: var(--atlas-blue); }
.atlas-node.is-selected .atlas-callout rect, .atlas-node.is-route-endpoint .atlas-callout rect, .atlas-node:focus-visible .atlas-callout rect { fill: #d7e8db; stroke: #13475e; stroke-width: 2.5; }
.atlas-callout-leader { pointer-events: none; }
.atlas-zoom, .atlas-pan { position: absolute; z-index: 1; display: flex; background: #fcf9ef; border: 1px solid #63898e; box-shadow: 2px 2px 0 #85adb13b; }
.atlas-zoom { top: 12px; left: 12px; }
.atlas-pan { bottom: 12px; right: 12px; }
.atlas-shell button { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; color: #24596a; background: transparent; font: 21px "Courier New", monospace; cursor: pointer; box-shadow: none; }
.atlas-shell button + button { border-left: 1px solid #b5c8c5; }
.atlas-shell button:hover { background: #deece6; }
.atlas-shell button:focus-visible, .atlas-shell select:focus-visible, .atlas-surface:focus-visible { outline: 3px solid #126c9b; outline-offset: -3px; }
.atlas-shell button:disabled { opacity: .4; cursor: default; }
.atlas-shell .atlas-presets button, .atlas-shell .atlas-filters button { width: auto; min-width: 44px; min-height: 44px; height: auto; padding: 10px 14px; border: 1px solid var(--atlas-border); font: 14px "IBM Plex Sans", sans-serif; line-height: 1.5; background: #fffdf5; touch-action: manipulation; }
.atlas-shell .atlas-presets button:hover, .atlas-shell .atlas-filters button:hover { background: #deece6; }
.atlas-shell .atlas-presets button[aria-pressed="true"] { background: #d7e8db; border-color: #24596a; box-shadow: inset 0 -3px 0 #24596a; }
.atlas-shell .atlas-filters button[aria-pressed="true"] { background: #24596a; color: #fffdf5; border-color: #24596a; }
.atlas-projection { position: absolute; bottom: 15px; left: 15px; font-size: 8px; letter-spacing: .1em; color: #537e87; pointer-events: none; }
.atlas-selection { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 22px; border-top: 1px solid #9db9b7; border-bottom: 1px solid #bdcfca; }
.atlas-selection label, .atlas-selection output { font-family: "IBM Plex Mono", monospace; font-size: 11px; white-space: nowrap; }
.atlas-shell select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 26px 9px 10px; border: 1px solid var(--atlas-border); border-radius: 0; color: #24596a; background: #fffdf5; font: 16px "IBM Plex Sans", sans-serif; }
.atlas-shell select:disabled { opacity: .65; }
.atlas-route-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 12px 22px; border-bottom: 1px solid #bdcfca; }
.atlas-route-controls label { font: 11px "IBM Plex Mono", monospace; }
.atlas-filters { grid-column: 2; }
.atlas-route-details { background: #f0f2e5; border-bottom: 1px solid #bdcfca; }
.atlas-details { padding: 16px 22px; min-height: 102px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.atlas-details strong { font-size: 16px; }
.atlas-details p { margin: 5px 0 0; max-width: 70ch; color: var(--atlas-muted); font-size: 13px; line-height: 1.7; }
.atlas-details ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 5px 20px; list-style: none; padding: 0; margin: 12px 0 0; }
.atlas-details li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px dotted #b2c5bb; padding-top: 5px; }
.atlas-detail-reading { color: #4f7475; text-align: right; }
.atlas-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; border-top: 1px solid #bdcfca; padding: 10px 22px; font-size: 11px; line-height: 1.5; color: #537873; }
.atlas-legend span { display: inline-flex; align-items: center; gap: 7px; }
.atlas-legend span:last-child { margin-left: auto; }
.atlas-legend-dot { width: 7px; height: 7px; border: 1px solid #316c7a; border-radius: 50%; background: #fdf9e9; }
.atlas-legend-line { width: 18px; height: 1px; background: #287f9e; }
@media (max-width: 600px) {
  .atlas-head { padding: 16px 14px 12px; }
  .atlas-toolbar { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .atlas-help { font-size: 11px; }
  .atlas-instrument { padding: 9px 14px; font-size: 10px; }
  .atlas-edition { font-size: 8px; }
  .atlas-surface { height: 460px; }
  .atlas-selection { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 10px 14px; }
  .atlas-selection label { grid-column: 1 / -1; }
  .atlas-route-controls { padding: 10px 14px; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .atlas-filters { grid-column: 1; margin-top: 4px; }
  .atlas-details { padding: 14px; }
  .atlas-legend { padding: 10px 14px; gap: 7px 12px; }
  .atlas-zoom { top: 9px; left: 9px; }
  .atlas-pan { bottom: 9px; right: 9px; }
  .atlas-projection { left: 12px; bottom: 17px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) { .atlas-country { transition: none; } }