.network-explorer { min-width: 0; }
.network-explorer [hidden] { display: none !important; }
.network-toolbar, .network-legend, .network-info, .network-camera-tools { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; margin-block: var(--space-3, 12px); }
.network-toolbar label { flex: none; min-width: min(100%, 8rem); }
.network-legend { gap: var(--space-2, 8px); }
.network-modes { flex: none; display: inline-flex; width: fit-content; max-width: 100%; padding: var(--space-0-5, 2px); border: 1px solid var(--border, #d4d4d8); border-radius: var(--radius, 6px); background: var(--background-subtle, var(--surface, #f4f4f5)); }
.network-modes .btn:not([aria-pressed="true"]) { border-color: transparent; background: transparent; }
.network-modes { overflow-x: auto; overscroll-behavior-inline: contain; }
.network-modes .btn { flex: none; white-space: nowrap; }
.network-explorer .network-modes .btn[aria-pressed="true"] { background: var(--background, #fff); color: var(--foreground, #18181b); border-color: var(--border, #d4d4d8); box-shadow: var(--shadow-xs); }
.network-legend { align-items: start; }
.network-legend > label { display: grid; gap: var(--space-1, 4px); min-width: 0; max-width: 100%; font-size: var(--fs-sm, 14px); }
.network-legend select { max-width: 100%; }
.network-journey { flex: 1; min-width: min(100%, 12rem); border: 0; padding: var(--space-2, 8px) 0; }
.network-journey summary { width: fit-content; cursor: pointer; font-size: var(--fs-sm, 14px); font-weight: 500; }
.network-journey .network-toolbar { margin-bottom: 0; }
.network-journey .network-toolbar label { display: grid; gap: var(--space-1, 4px); max-width: 100%; font-size: var(--fs-sm, 14px); }
.network-explorer .btn[aria-pressed="true"] { background: var(--foreground, #18181b); color: var(--background, #fff); border-color: var(--foreground, #18181b); }
.network-stage { min-width: 0; position: relative; }
.network-viewport { position: relative; isolation: isolate; width: 100%; height: clamp(26rem, 68svh, 46rem); overflow: hidden; border: 1px solid var(--border, #d4d4d8); border-radius: var(--radius-lg, 8px); background: var(--background, #fff); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.network-viewport[data-mode="map"][data-lighting="true"] { background: color-mix(in srgb, var(--surface, #f4f4f5) 65%, var(--background, #fff)); }
.network-viewport[data-mode="map"][data-lighting="true"]::before, .network-viewport[data-mode="map"][data-lighting="true"]::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.network-viewport[data-mode="map"][data-lighting="true"]::before { background: radial-gradient(ellipse at 22% 18%, color-mix(in srgb, var(--primary, #1b7ac7) 6%, transparent), transparent 65%), radial-gradient(ellipse at 80% 85%, color-mix(in srgb, var(--accent, #7c45d8) 4%, transparent), transparent 60%); }
.network-viewport[data-mode="map"][data-lighting="true"]::after { background: radial-gradient(ellipse at 45% 40%, transparent 40%, color-mix(in srgb, var(--foreground, #18181b) 7%, transparent)); box-shadow: inset var(--shadow-md, 0 1px 3px #0001); }
/* Keep ambient light while moving; vector shadows return when the camera settles. */
.network-viewport[data-mode="map"][data-lighting="true"][data-motion="idle"] [data-buildings] { filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--foreground, #18181b) 18%, transparent)); }
.network-viewport[data-mode="map"][data-lighting="true"][data-motion="idle"] [data-route-shape] { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--primary, #1b7ac7) 22%, transparent)); }
.network-viewport[data-show-road="false"] [data-infrastructure="road"], .network-viewport[data-show-rail="false"] [data-infrastructure="rail"], .network-viewport[data-show-buildings="false"] [data-buildings], .network-viewport[data-show-buildings="false"] [data-heatmap], .network-viewport[data-show-labels="false"] [data-station] text { display: none; }
.network-viewport:active { cursor: grabbing; }
.network-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.network-camera-tools { position: absolute; inset: var(--space-3, 12px) var(--space-3, 12px) auto auto; flex-direction: column; gap: 0; margin: 0; padding: var(--space-1, 4px); background: var(--background, #fff); border: 1px solid var(--border, #d4d4d8); border-radius: var(--radius-lg, 8px); box-shadow: var(--shadow-md, 0 4px 6px #0001); }
.network-camera-tools .btn { position: relative; width: var(--control-h-l, 48px); height: var(--control-h-l, 48px); min-width: 0; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.network-camera-tools .btn:not([aria-pressed="true"]):hover { background: var(--surface, #f4f4f5); }
.network-camera-tools .btn:nth-child(3), .network-camera-tools .btn:nth-child(5) { border-top: 1px solid var(--border, #d4d4d8); border-radius: 0; }
.network-camera-tools svg { pointer-events: none; }
.network-viewport .network-svg { width: 100%; height: 100%; display: block; }
.network-motion-canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.network-viewport[data-preview="true"] .network-motion-canvas { display: block; }
.network-viewport[data-preview="true"] :is([data-terrain], [data-infrastructure], [data-buildings], [data-heatmap]) { display: none; }
.network-svg { --road-casing: color-mix(in srgb, var(--foreground, #18181b) 55%, var(--background, #fff)); --road-surface: color-mix(in srgb, var(--background, #fff) 90%, var(--surface, #f4f4f5)); }
.network-road-casing { stroke-width: calc(var(--road-width, .8px) + 1.2px); transition: none !important; }
.network-road-surface { stroke-width: var(--road-width, .8px); transition: none !important; }
.network-viewport [data-selected-road] { stroke-width: calc(var(--road-width, .8px) + 2px); pointer-events: none; }
.network-viewport[data-show-transit="false"] [data-buildings] { opacity: .2; }
:root[data-theme="dark"] .network-svg { --road-casing: color-mix(in srgb, var(--foreground) 48%, var(--background)); --road-surface: color-mix(in srgb, var(--surface) 88%, var(--foreground)); }
.network-viewport:focus-visible { outline: 2px solid var(--ring, #18181b); outline-offset: var(--space-1, 4px); }
/* Camera compensation must not inherit global reduced-motion transitions. */
.network-svg [data-station] { cursor: pointer; transition: none !important; }
.network-svg [data-station]:focus-visible { outline: none; }
.network-svg [data-station]:focus-visible [data-marker] { stroke-width: 4; stroke: var(--ring, #18181b); }
.network-explorer .network-layers { border: 0; padding: 0; margin-left: auto; }
.network-layers summary { cursor: pointer; font-size: var(--fs-sm, 14px); font-weight: 500; }
.network-layers[open] { flex-basis: 100%; margin-left: 0; }
.network-explorer .network-layers[open] summary { margin-bottom: var(--space-2, 8px); }
.network-zoom { color: var(--muted-foreground, #52525b); font-size: var(--fs-2xs, 12px); font-variant-numeric: tabular-nums; white-space: nowrap; padding-block: var(--space-1, 4px); }
.network-hud { position: absolute; inset: auto var(--space-3, 12px) var(--space-3, 12px); display: flex; justify-content: space-between; align-items: end; gap: var(--space-3, 12px); pointer-events: none; font-size: var(--fs-2xs, 12px); color: var(--foreground, #18181b); }
.network-scale, .network-north { background: var(--background, #fff); padding: var(--space-1, 4px) var(--space-2, 8px); border-radius: var(--radius-sm, 4px); }
.network-scale { text-align: center; font-variant-numeric: tabular-nums; }
.network-scale::after { content: ''; display: block; width: var(--scale-width, 90px); height: var(--space-1, 4px); border: solid currentColor; border-width: 0 1px 1px; }
.network-stage:fullscreen { display: flex; flex-direction: column; gap: var(--space-2, 8px); padding: var(--space-4, 16px); background: var(--background, #fff); color: var(--foreground, #18181b); }
.network-stage:fullscreen .network-viewport { flex: 1; min-height: 0; height: 100%; max-height: none; }
.network-stage:fullscreen .network-camera-tools { inset-block-start: var(--space-6, 24px); inset-inline-end: var(--space-6, 24px); }
.network-info { min-height: var(--control-h, 40px); padding: var(--space-3, 12px); border-left: 3px solid var(--border, #d4d4d8); font-size: var(--fs-sm, 14px); }
.network-info span { overflow-wrap: anywhere; }
.network-result { font-size: var(--fs-sm, 14px); overflow-wrap: anywhere; }
.density-legend { font-size: var(--fs-sm, 14px); padding-block: var(--space-2, 8px); }
.density-legend::after { content: ''; display: inline-block; width: 7rem; height: .6rem; margin-inline-start: var(--space-3, 12px); background: linear-gradient(90deg, #2563eb, #06b6d4, #22c55e, #facc15, #ef4444); }
:root[data-theme="hc-light"] .network-viewport, :root[data-theme="hc-dark"] .network-viewport { background: var(--background) !important; }
:root[data-theme^="hc-"] .network-viewport::before, :root[data-theme^="hc-"] .network-viewport::after { display: none; }
:root[data-theme^="hc-"] .network-viewport [data-buildings], :root[data-theme^="hc-"] .network-viewport [data-route-shape] { filter: none !important; }
:root[data-theme^="hc-"] .network-svg { --road-casing: var(--foreground); --road-surface: var(--background); }
@media (max-width: 640px) { .network-viewport { height: clamp(25rem, 64svh, 38rem); } .network-camera-tools .btn { width: var(--control-h-m, 40px); height: var(--control-h-m, 40px); } .network-toolbar .btn, .network-legend .btn { font-size: var(--fs-xs, 13px); } }
/* Cartographic colors describe geography; controls continue to use Horizon. */
.network-svg { --map-land: #f4f1e9; --map-water: #b4dcec; --map-shore: #86b9c9; --map-contour: #a7b695; --map-elevation-0: #e7eddc; --map-elevation-1: #d8e4c9; --map-elevation-2: #c8dabc; --map-elevation-3: #bacfab; --road-casing: #c7c4ba; --road-surface: #fffefa; }
:root[data-theme="dark"] .network-svg { --map-land: #303735; --map-water: #193e51; --map-shore: #3c6b7b; --map-contour: #607266; --map-elevation-0: #35473b; --map-elevation-1: #3b5141; --map-elevation-2: #445b47; --map-elevation-3: #4c644e; --road-casing: #202724; --road-surface: #8b9690; }
:root[data-theme="hc-light"] .network-svg { --map-land: #fff; --map-water: #a9d9f0; --map-shore: #154a64; --map-contour: #344934; --road-casing: #000; --road-surface: #fff; }
:root[data-theme="hc-dark"] .network-svg { --map-land: #101810; --map-water: #07344c; --map-shore: #86d9ff; --map-contour: #b0c8a0; --road-casing: #fff; --road-surface: #101810; }
.network-viewport[data-show-terrain="false"] [data-terrain] { display: none; }
.network-viewport[data-mode="map"] { background: var(--surface); }
.network-road-casing { stroke-width: calc(var(--road-width, .8px) + .8px); }
.network-route-chips, .network-stop-strip { display: flex; gap: var(--space-2, 8px); overflow-x: auto; overscroll-behavior-inline: contain; padding-block: var(--space-2, 8px); min-width: 0; max-width: 100%; }
.network-route-chips .btn, .network-stop-strip .btn { flex: none; white-space: nowrap; }
.network-route-swatch { display: inline-block; width: var(--space-2-5, 10px); height: var(--space-2-5, 10px); border-radius: 50%; margin-inline-end: var(--space-2, 8px); border: 1px solid currentColor; }
.network-stop-strip { flex-basis: 100%; }
.network-coverage { margin-block: var(--space-3, 12px); font-size: var(--fs-xs, 13px); }
.network-coverage summary { width: fit-content; color: var(--muted-foreground, #52525b); cursor: pointer; }
.network-coverage p { margin-block: var(--space-2, 8px); font-size: var(--fs-xs, 13px); }
.network-info { border: 0; border-bottom: 1px solid var(--border); padding-inline: 0; }
.network-toolbar { margin-block-start: 0; }
.network-legend:has(.network-journey:only-child) { margin-block-start: 0; }

.network-svg [data-route], .network-svg [data-route-shape], .network-svg [data-route-hit] { cursor: pointer; }

/* Transit is the foreground; dense city geometry stays behind it. */
.network-viewport[data-show-transit="true"] [data-buildings] { opacity: .08; filter: none !important; }
.network-viewport[data-show-transit="true"] [data-infrastructure] { opacity: .3; }
.network-svg [data-station][data-relevant="false"] { opacity: .18; }
.network-viewport:not([data-motion="idle"]) [data-station-label] { visibility: hidden; }
.network-svg [data-station-label] { pointer-events: none; }