/* V2.2.1: proportional navigation and a shared, minimum-bounded safe area. */
.altitude-hud { min-width: 72px; pointer-events: auto; transition: height 320ms cubic-bezier(.22,1,.36,1), color 260ms var(--ease), opacity 260ms var(--ease); }
.altitude-hud::before { content: ""; position: absolute; inset: -12px 0 -12px auto; width: var(--hud-nav-width); z-index: 6; }
.altitude-hud.is-nav-mode { --v21-h: min(72vh, 620px, calc(100vh - 224px)); --v21-w: var(--hud-nav-width); height: var(--v21-h); }
.altitude-hud.is-nav-mode .altitude-frame, .altitude-hud.is-nav-mode .altitude-scale-viewport, .altitude-hud.is-nav-mode .altitude-readout--live { opacity: 0; pointer-events: none; transition: opacity 130ms ease; }
.altitude-hud.is-nav-restoring .altitude-frame, .altitude-hud.is-nav-restoring .altitude-scale-viewport, .altitude-hud.is-nav-restoring .altitude-readout--live { opacity: 0; pointer-events: none; }
.altitude-nav-layer { --v22-focus-left: calc(var(--v21-w) * .12); --v21-track-x: 1; --v21-right-gap: 24px; --v21-tick-width: .0834; position: absolute; top: 0; right: 0; width: var(--v21-w); min-width: 0; height: 100%; z-index: 7; opacity: 0; pointer-events: none; transition: opacity 160ms ease 120ms; }
.altitude-hud.is-nav-mode .altitude-nav-layer { opacity: 1; pointer-events: auto; }
.altitude-hud.is-nav-closing .altitude-nav-layer, .altitude-hud.is-nav-closing .altitude-nav-v21-drag { opacity: 0; pointer-events: none; transition-delay: 0ms; }
.altitude-nav-v21-track { position: absolute; top: 0; right: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.9) 50%, transparent); }
.altitude-nav-v21-row { --row-left: var(--v22-focus-left); --row-width: calc(var(--v21-w) - var(--row-left) - var(--v21-right-gap) - 16px); position: absolute; left: 0; width: var(--v21-w); min-width: 0; height: calc(var(--v21-h) * .0820); padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.6); cursor: pointer; font-family: inherit; text-align: left; transform: translateY(calc(var(--v21-h) * -.0410)); }
.altitude-nav-v21-row__upper, .altitude-nav-v21-row__lower { position: absolute; left: var(--row-left); width: var(--row-width); display: flex; align-items: flex-start; justify-content: flex-start; }
.altitude-nav-v21-row__upper { top: 0; height: calc(var(--v21-h) * .0410); transform: translateX(16px); transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.altitude-nav-v21-row__lower { top: calc(var(--v21-h) * .0410); height: calc(var(--v21-h) * .0410); transform: translateX(16px); transition: transform 220ms cubic-bezier(.22,1,.36,1); }
.altitude-nav-v21-row__title { align-self: flex-end; margin-bottom: 8px; font-size: 10px; font-weight: var(--font-medium); letter-spacing: .03em; line-height: 1.2; white-space: nowrap; transition: font-size 180ms ease; }.altitude-nav-v21-row__alt { margin-top: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-variant-numeric: tabular-nums; opacity: .6; white-space: nowrap; }
.altitude-nav-v21-row__rule { position: absolute; left: calc(var(--row-left) + 16px); right: var(--v21-right-gap); top: calc(var(--v21-h) * .0410); height: 1px; background: currentColor; opacity: .6; transition: left 220ms cubic-bezier(.22,1,.36,1), opacity 180ms ease; }
.altitude-nav-v21-row.is-active, .altitude-nav-v21-row:hover { color: var(--white); }.altitude-nav-v21-row.is-active .altitude-nav-v21-row__upper, .altitude-nav-v21-row.is-active .altitude-nav-v21-row__lower, .altitude-nav-v21-row:hover .altitude-nav-v21-row__upper, .altitude-nav-v21-row:hover .altitude-nav-v21-row__lower { transform: translateX(0); }.altitude-nav-v21-row.is-active .altitude-nav-v21-row__title, .altitude-nav-v21-row:hover .altitude-nav-v21-row__title { font-size: 13px; }.altitude-nav-v21-row.is-active .altitude-nav-v21-row__rule, .altitude-nav-v21-row:hover .altitude-nav-v21-row__rule { left: var(--row-left); opacity: 1; }
.altitude-nav-v21-minor { position: absolute; right: var(--v21-right-gap); width: calc(var(--v21-w) * var(--v21-tick-width)); height: 2px; background: rgba(255,255,255,.1); transform: translateY(-50%); }
.altitude-nav-v21-drag { position: absolute; left: 0; right: 0; top: var(--altitude-v21-drag-y, 50%); z-index: 20; display: flex; align-items: center; min-width: 0; height: 20px; padding: 0; border: 0; background: transparent; color: #ff4d4f; cursor: grab; opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity 140ms ease; }.altitude-hud.is-nav-mode .altitude-nav-v21-drag { opacity: 1; pointer-events: auto; }.altitude-nav-v21-drag.is-dragging { cursor: grabbing; }
.altitude-hud.is-nav-dragging { transition: none; }
.altitude-nav-v21-drag__icon { position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin-right: calc(var(--v22-focus-left) - 16px); }.altitude-nav-v21-drag__icon::before, .altitude-nav-v21-drag__icon::after, .altitude-nav-v21-drag__icon span { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }.altitude-nav-v21-drag__icon::before { top: 1px; }.altitude-nav-v21-drag__icon span { top: 7px; }.altitude-nav-v21-drag__icon::after { bottom: 1px; }
.altitude-nav-v21-drag__line { height: 2px; flex: 1; background: currentColor; }
body.is-on-light .altitude-nav-v21-row { color: rgba(var(--rgb-black-2),.6); } body.is-on-light .altitude-nav-v21-row.is-active, body.is-on-light .altitude-nav-v21-row:hover { color: var(--black-2); }
@media (max-width: 1024px) { .altitude-nav-layer, .altitude-nav-v21-drag { display: none; } }
@media (prefers-reduced-motion: reduce) { .altitude-hud, .altitude-hud * { transition: none !important; } }