.navigation-intro{position:absolute;bottom:35px;left:12px;z-index:900;max-width:min(380px,calc(100% - 24px));background:#102638;color:#fff;border:1px solid #637d91;border-radius:8px;padding:8px 12px;font:12px/1.5 system-ui}.navigation-intro summary{cursor:pointer}.navigation-intro p{margin:8px 0}
.navigation-station,.navigation-image{box-sizing:border-box;padding:0;border:1px solid #476179;background:#081521;color:#e5eff7;border-radius:12px;width:min(1450px,96vw);height:94vh;height:94dvh;max-width:none;max-height:none;overflow:hidden}
.navigation-station[open],.navigation-image[open]{display:flex;flex-direction:column}.navigation-station::backdrop,.navigation-image::backdrop{background:#020912c9}
.navigation-bar{display:flex;align-items:center;gap:16px;padding:10px 14px;background:#102638;flex:none;border-bottom:1px solid #476179;font:14px system-ui}.navigation-bar button{min-height:44px;padding:8px 12px;color:white;background:#204e79;border:1px solid #728ba0;border-radius:7px;cursor:pointer}.navigation-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navigation-frame{flex:1;min-height:0}.navigation-frame iframe{width:100%;height:100%;border:0;display:block}.navigation-image img{min-height:0;flex:1;width:100%;object-fit:contain}.navigation-image p{flex:none;margin:8px 16px;font:13px system-ui;max-height:15vh;overflow:auto}
@media(max-width:760px){.navigation-station,.navigation-image{width:100%;height:100%;height:100dvh;margin:0;border:0;border-radius:0}.navigation-bar{padding:6px 10px;gap:8px;font-size:12px}.navigation-bar button{font-size:12px;flex-shrink:0}.navigation-intro{bottom:30px;font-size:11px}}

/* Station visibility is available directly on the map. */
.map-buttons{flex-wrap:wrap;max-width:calc(100% - 24px)}
.map-buttons .stations-toggle{display:flex;align-items:center;gap:8px;box-sizing:border-box;min-height:46px;padding:10px 14px;margin:0;border:1px solid #ffffff60;border-radius:12px;background:#102638;color:#fff;font:700 14px system-ui;box-shadow:0 3px 14px #07153633;cursor:pointer}
.map-buttons .stations-toggle input{appearance:auto;flex:none;width:19px;height:19px;margin:0;accent-color:#48c8df;cursor:pointer}
.map-buttons .stations-toggle:has(input:checked){background:#15566c;border-color:#66dbed}
.map-buttons .stations-toggle:focus-within{outline:3px solid #66dbed;outline-offset:3px}
@media(max-width:760px){.map-buttons{gap:6px}.map-buttons .stations-toggle{font-size:13px;padding:10px 12px}}
/* Separate the two map actions without blocking map interaction between them. */
.map-buttons{left:12px;right:12px;bottom:28px;max-width:none;justify-content:space-between;align-items:center;flex-wrap:nowrap;pointer-events:none}
.map-buttons>*{pointer-events:auto}

.camera-history-controls{flex:none;display:flex;gap:8px;align-items:center;justify-content:center;padding:8px 12px;background:#102638;color:#e5eff7;font:13px system-ui;flex-wrap:wrap}.camera-history-controls[hidden]{display:none}.camera-history-controls button{min-height:44px;min-width:44px;border:1px solid #728ba0;border-radius:8px;background:#204e79;color:white;padding:8px 12px}.camera-history-controls button:disabled{opacity:.4}.navigation-image img{touch-action:pan-y pinch-zoom}.camera-history-controls [data-time]{text-align:center;font-variant-numeric:tabular-nums}
