/* Map, profile strip, timeline and tour card. --z is the current zoom factor set by map.js. */
.mapbox { position: relative; background: var(--sea); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
#map { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 778; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; --z: 1; }
#map.panning { cursor: grabbing; }
.mapbox.measuring #map { cursor: crosshair; }
.toolbar { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.toolbar button { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--rule); border-radius: 3px; padding: 4px 9px; font-size: 12px; cursor: pointer; min-width: 30px; }
.toolbar button:hover { border-color: var(--muted); }
.toolbar button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.maphint { position: absolute; right: 8px; bottom: 6px; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 3px 7px; border-radius: 3px; pointer-events: none; }
.maphint .h-measure { display: none; }
.mapbox.measuring .h-measure { display: inline; } .mapbox.measuring .h-units { display: none; }
body[data-mode="activity"] .h-units { display: none; }
@media (max-width: 600px) { .maphint { display: none; } }

/* Basemap */
.grat { stroke: var(--grat); stroke-width: .6; vector-effect: non-scaling-stroke; }
.land { fill: var(--land); stroke: var(--coast); stroke-width: .7; vector-effect: non-scaling-stroke; }
.t-grat { font: calc(9.5px / var(--z)) var(--mono); fill: var(--faint); }
.t-sea { font: italic calc(13px / var(--z)) var(--body); fill: var(--faint); letter-spacing: .08em; }
.t-place { font: calc(10.5px / var(--z)) var(--body); fill: var(--muted); }
.place-dot { fill: var(--muted); }
.t-big { font: 700 calc(15px / var(--z)) var(--display); letter-spacing: .3em; fill: var(--muted); }
.t-base { font: calc(10px / var(--z)) var(--mono); fill: var(--ally); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }
.base { fill: var(--ally); }
.guam-arrow { stroke: var(--ally); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Geography */
.zone { fill: none; stroke: var(--zone); vector-effect: non-scaling-stroke; }
.zone-12 { stroke-width: 1.2; fill: var(--zone); fill-opacity: .08; }
.zone-24 { stroke-width: 1; stroke-dasharray: 3 3; }
.adiz { fill: var(--ccg); fill-opacity: var(--adiz-heat, 0); stroke: var(--geo); stroke-width: 1.3; stroke-dasharray: 8 4; vector-effect: non-scaling-stroke; transition: fill-opacity .3s; }
.median { stroke: var(--geo); stroke-width: 1.4; stroke-dasharray: 2 4; fill: none; vector-effect: non-scaling-stroke; }
.fic { stroke: var(--fic); stroke-width: 2; stroke-dasharray: 10 5; fill: none; opacity: .8; vector-effect: non-scaling-stroke; }
.t-geo { font: calc(10.5px / var(--z)) var(--mono); fill: var(--geo); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }
.t-fic { fill: var(--fic); } .t-zone { fill: var(--zone); }

/* Rings */
.ring-path { stroke-width: 1.6; fill-opacity: var(--ring-fill); vector-effect: non-scaling-stroke; transition: opacity .2s; }
.ring-path.sensor { stroke-width: 1.3; stroke-dasharray: 6 4; fill-opacity: .02; }
.ring-path.big { fill-opacity: .015; }
.ring-path.huge { fill-opacity: 0; }
.ring.countered { opacity: .22; }
.t-ring { font: 500 calc(10.5px / var(--z)) var(--mono); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; stroke-linejoin: round; }
.launch { fill: var(--ink); opacity: .7; }

/* Units, routes, lines */
.route { fill: none; stroke-width: 1.8; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .85; vector-effect: non-scaling-stroke; }
.route.blue { stroke: var(--blue); } .route.red { stroke: var(--red); }
.fire-line { stroke-width: 1.4; stroke-dasharray: 1 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.unit { cursor: grab; outline: none; }
.unit .hit { fill: transparent; }
.unit .sym { stroke: var(--panel); stroke-width: 1.5; }
.unit-blue .sym { fill: var(--blue); } .unit-red .sym { fill: var(--red); }
.unit .sym-in { fill: var(--panel); }
.unit:focus-visible .sym { stroke: var(--accent); stroke-width: 3; }
.t-unit { font: 500 10.5px var(--mono); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }
.unit-blue .t-unit { fill: var(--blue); } .unit-red .t-unit { fill: var(--red); }
.pulse { fill: none; stroke: var(--bad); stroke-width: 2; opacity: 0; }
.unit[data-state="hot"] .pulse { animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { from { r: 12; opacity: .9; } to { r: 32; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .unit[data-state="hot"] .pulse { animation: none; opacity: .8; r: 17; } }

/* Measure */
.measure-line { stroke: var(--accent); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.measure-pt { fill: var(--accent); }
.t-measure { font: 600 calc(12px / var(--z)) var(--mono); fill: var(--accent); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }

/* Activity overlay */
.ccg-bubble { fill: var(--ccg); fill-opacity: .28; stroke: var(--ccg); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.t-ccg-n { font: 700 calc(11px / var(--z)) var(--mono); fill: var(--ink); }
.t-ccg { font: calc(10.5px / var(--z)) var(--mono); fill: var(--ccg); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }
.transit-line { stroke: var(--blue); stroke-width: 2.2; fill: none; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.t-transit { font: 600 calc(11px / var(--z)) var(--mono); fill: var(--blue); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; }

/* Route profile */
.pf-label { font: 11px var(--body); fill: var(--muted); }
.pf-label.strong { font-weight: 600; fill: var(--ink); }
.pf-track { fill: var(--chip); }
.pf-on { opacity: .75; } .pf-on.strong { opacity: 1; }
.pf-axis { font: 10px var(--mono); fill: var(--faint); }
.pf-cursor line { stroke: var(--ink); stroke-width: 2; }
.pf-cursor circle { fill: var(--ink); }

/* Timeline */
.tl-grid { stroke: var(--rule); stroke-width: 1; }
.tl-year { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.tl-axis { font: 10.5px var(--mono); fill: var(--muted); }
.tl-window { fill: var(--accent); fill-opacity: .12; stroke: var(--accent); stroke-width: 1; }
.tl-bars { stroke: var(--brand-ink); stroke-width: .8; opacity: .8; }
.tl-jcrp { fill: var(--accent); }
.tl-ccg { fill: var(--ccg); opacity: .8; }
.tl-transit { fill: var(--blue); opacity: .85; }
.tl-hover { stroke: var(--ink); stroke-width: 1; opacity: .6; pointer-events: none; }

/* Tour */
.tour { position: absolute; left: 12px; bottom: 12px; width: min(380px, calc(100% - 24px)); background: var(--panel); border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 4px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 6px; }
.tour[hidden] { display: none; }
.tour-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tour .x { background: none; border: 0; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
.tour h3 { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.15; }
.tour p { margin: 0; font-size: 13px; }
.tour-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@media (max-width: 600px) { .tour { position: static; width: auto; margin: 8px; box-shadow: none; } }