/* hl.css — position map, verticals, launch, climb. Themed by --t-* vars from the page. */
.locator { height: 460px; }
.locator [data-hl="locator"] { position: absolute; inset: 0; background: #050608; }
.locator .leaflet-control-attribution { background: rgba(5,6,8,.7); color: #8f887b; font: 9px/1.4 var(--t-mono); }
.locator .leaflet-control-attribution a { color: #b3ac9e; }
.locator .leaflet-control-zoom a { background: rgba(5,6,8,.85); color: #ece8de; border-color: rgba(236,232,222,.2); border-radius: 0 !important; }
[data-hl="hud"] { position: absolute; left: 12px; top: 38px; padding: 6px 8px; background: rgba(5,6,8,.72); z-index: 600; font: 500 10.5px/1.55 var(--t-mono); letter-spacing: .12em; color: #ece8de; text-shadow: 0 1px 6px #000; pointer-events: none; }
[data-hl="hud"] b { color: var(--t-sig); font-weight: 600; }
.hl-x { position: relative; }
.hl-x i, .hl-x b { position: absolute; left: 50%; top: 50%; background: var(--t-sig); }
.hl-x i { width: 44px; height: 1px; transform: translate(-50%, -50%); }
.hl-x b { width: 1px; height: 44px; transform: translate(-50%, -50%); }
.hl-x::before { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; border: 1.5px solid var(--t-sig); border-radius: 50%; transform: translate(-50%, -50%); animation: hlping 2.4s ease-out infinite; }
.hl-x span { position: absolute; left: 30px; top: -2px; white-space: nowrap; font: 600 10px/1 var(--t-mono); letter-spacing: .16em; color: #fff; text-shadow: 0 1px 4px #000; }
@keyframes hlping { 0% { width: 10px; height: 10px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hl-x::before { animation: none; } }
.hl-t i { position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.hl-t span { position: absolute; left: 12px; top: -1px; white-space: nowrap; font: 500 9.5px/1 var(--t-mono); color: #fff; text-shadow: 0 1px 4px #000; letter-spacing: .06em; }
[data-hl="readout"] { margin: 0; }
[data-hl="readout"] > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--t-hair); }
[data-hl="readout"] > div:first-child { border-top: 1px solid var(--t-hair); }
[data-hl="readout"] dt { font: 500 10.5px/1.6 var(--t-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--t-dim); }
[data-hl="readout"] dd { margin: 0; font: 400 14px/1.5 var(--t-mono); color: var(--t-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hl-note { margin-top: 12px; font-size: 14px; color: var(--t-muted); }
.hl-wait { font: 500 12px/1.6 var(--t-mono); letter-spacing: .1em; color: var(--t-dim); padding: 24px 0; }
.hl-bars { display: flex; align-items: flex-end; gap: 6px; height: 280px; padding-top: 8px; border-bottom: 1px solid var(--t-hair2); }
.hl-bars.sm { height: 220px; }
.hl-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; }
.hl-bar i { display: block; background: var(--t-ink); transition: height .9s cubic-bezier(.2,.8,.2,1); }
.hl-bar:first-child i { background: var(--t-sig); }
.hl-bar b { font: 500 11px/1 var(--t-mono); color: var(--t-ink); text-align: center; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.hl-bar span, .hl-bar em { position: absolute; top: 100%; left: 0; right: 0; font: 9.5px/1.3 var(--t-mono); color: var(--t-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.hl-bar span { margin-top: 6px; color: var(--t-ink); } .hl-bar em { margin-top: 20px; }
.hl-cap { margin-top: 46px; font: 500 10.5px/1.6 var(--t-mono); letter-spacing: .12em; color: var(--t-dim); }
.hl-launch { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 18px; align-items: start; }
.hl-veh { width: 80px; height: 260px; }
.hl-veh path { fill: var(--t-ink); }
.hl-veh line { stroke: var(--t-dim); stroke-width: 1; }
.hl-veh text { fill: var(--t-muted); font: 500 9px var(--t-mono); letter-spacing: .1em; text-anchor: middle; }
.hl-k { font: 500 10.5px/1.4 var(--t-mono); letter-spacing: .2em; color: var(--t-dim); }
.hl-cd { font: 500 clamp(30px, 9vw, 52px)/1.05 var(--t-mono); letter-spacing: -.02em; color: var(--t-ink); margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.hl-name { font-size: 15px; color: var(--t-muted); }
.hl-dl { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.hl-dl > div { padding: 9px 0; border-bottom: 1px solid var(--t-hair); }
.hl-dl dt { font: 500 10px/1.4 var(--t-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--t-dim); }
.hl-dl dd { margin: 3px 0 0; font: 500 16px/1.3 var(--t-mono); color: var(--t-ink); font-variant-numeric: tabular-nums; }
.hl-pad { margin-top: 10px; font: 12px/1.5 var(--t-mono); color: var(--t-dim); }
@media (min-width: 900px) { .locator { height: 600px; } .hl-bars { height: 340px; } }
.hl-dl.one > div { padding: 7px 0; }

.hl-ct{width:100%;border-collapse:collapse;font:12px/1.3 var(--t-mono);font-variant-numeric:tabular-nums}
.hl-ct th{text-align:left;font:500 9.5px/1.3 var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t-dim);padding:0 8px 6px 0;border-bottom:1px solid var(--t-hair)}
.hl-ct td{padding:5px 8px 5px 0;border-bottom:1px solid var(--t-hair);color:var(--t-ink);white-space:nowrap}
.hl-ct td:nth-child(n+3):not(.b),.hl-ct th:nth-child(n+3):not(.b){text-align:right}
.hl-ct .b{width:28%}.hl-ct .b i{display:block;height:4px;background:#e0283f;opacity:.8}
.hl-sl{display:flex;align-items:center;gap:12px;margin-top:10px}
.hl-sl .hl-spark{flex:1;height:26px;border:0;background:none}
.hl-sl span{font:500 10px/1.3 var(--t-mono);letter-spacing:.1em;color:var(--t-muted);white-space:nowrap}
@media(max-width:420px){.hl-ct .b{display:none}}