/* The flight's instruments and the names on the section. Created 2026-11-10 (PT) · Updated 2026-11-11 · Version 2.
   One geometry, taken from the mark: a solid panel with its top-right and bottom-left corners cut on the diagonal
   (the same cut as the page's cards: 14px, 10px on a phone), a thin bracket in the two corners that are kept.
   No glass, no blur, no shadow. Gold marks only what is live. Nothing smaller than 13px. */
:root { --t-hud: 13px; --hud-line: rgba(227, 232, 238, .38); --hud-panel: var(--panel, #0b111b); --cut: 14px; --cut-s: 8px; }

.hud { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--arrive); font-size: var(--t-hud); line-height: 1.25; color: var(--ink); z-index: 2; }
.hud.on { opacity: 1; }

/* the frame's corners */
.hud-corner { position: absolute; width: 18px; height: 18px; border: 0 solid var(--hud-line); }
.hud-corner.tl { top: var(--m); left: var(--m); border-top-width: 1px; border-left-width: 1px; }
.hud-corner.tr { top: var(--m); right: var(--m); border-top-width: 1px; border-right-width: 1px; }
.hud-corner.bl { bottom: var(--m); left: var(--m); border-bottom-width: 1px; border-left-width: 1px; }
.hud-corner.br { bottom: var(--m); right: var(--m); border-bottom-width: 1px; border-right-width: 1px; }

/* the instrument panel: cut corners, brackets in the kept ones */
.hud-map, .hud-rail { background: var(--hud-panel); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.hud-map::before, .hud-rail::before, .hud-map::after, .hud-rail::after { content: ''; position: absolute; width: 12px; height: 12px; border: 0 solid var(--hud-line); pointer-events: none; }
.hud-map::before, .hud-rail::before { top: 5px; left: 5px; border-top-width: 1px; border-left-width: 1px; }
.hud-map::after, .hud-rail::after { bottom: 5px; right: 5px; border-bottom-width: 1px; border-right-width: 1px; }

/* the section map: the mark in outline, the floor in use filled, the camera on it */
.hud-map { position: absolute; top: calc(var(--m) + 20px); right: calc(var(--m) + 20px); width: 208px; padding: 18px 18px 14px; }
.hud-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.hud-map polygon { fill: none; stroke: var(--ridge); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill .5s, stroke .5s; }
.hud-map polygon.on { fill: var(--accent); stroke: var(--accent); }
.hud-shaft { stroke: var(--ridge); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .5s; }
.hud-shaft.on { stroke: var(--accent); stroke-width: 3; }
.hud-cam { fill: var(--nose); stroke: var(--hud-panel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hud-look { fill: none; stroke: var(--nose); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hud-depth { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin-top: 14px; color: var(--muted); }
.hud-depth b { position: relative; height: 1px; background: var(--hud-line); }
.hud-depth b i { position: absolute; top: -4px; width: 2px; height: 9px; margin-left: -1px; background: var(--nose); }

/* the stops: a ladder of ticks, the live rung in gold */
.hud-rail { position: absolute; right: calc(var(--m) + 20px); top: 50%; transform: translateY(-20%); display: grid; gap: 0; justify-items: end; padding: 16px 18px 14px 22px; }
.hud-rail button { all: unset; pointer-events: auto; cursor: pointer; display: grid; grid-template-columns: auto 22px; gap: 10px; align-items: center; min-height: 28px; color: var(--muted); transition: color .3s; }
.hud-rail button i { height: 1px; background: currentColor; justify-self: end; width: 8px; transition: width .4s var(--arrive), background-color .3s; }
.hud-rail button:hover { color: var(--ink); }
.hud-rail button:focus-visible { outline: 1px solid var(--nose); outline-offset: 2px; }
.hud-rail button.on { color: var(--accent); }
.hud-rail button.on i { width: 22px; height: 2px; }

/* how the room joins the base: three or four plates on one line */
.hud-chain { position: absolute; right: calc(var(--m) + 20px); bottom: calc(var(--m) + 20px); display: flex; align-items: center; max-width: 56vw; }
.hud-chain[hidden] { display: none; }
.hud-chain span { padding: 9px 16px 9px 14px; background: var(--hud-panel); white-space: nowrap; opacity: 0; clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s))); }
.hud-chain i { position: relative; width: 30px; height: 1px; background: var(--hud-line); transform-origin: left; transform: scaleX(0); }
.hud-chain i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg); }
.hud-chain.run span { animation: hud-in .5s var(--arrive) forwards; animation-delay: calc(var(--k) * .22s + .2s); }
.hud-chain.run i { animation: hud-draw .4s var(--arrive) forwards; animation-delay: calc(var(--k) * .22s + .05s); }

/* a name pinned to a thing in the room: a plate with the same cut, a leader to the thing */
.hud-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hud-lines polyline { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; transition: opacity .35s; }
.hud-lines circle { fill: var(--hud-panel); stroke: var(--nose); stroke-width: 1; opacity: 0; transition: opacity .35s; }
.hud-lines .on { opacity: .9; }
.hud-tag, .tap-tag { position: absolute; left: 0; top: 0; padding: 6px 14px 6px 12px; background: var(--hud-panel); white-space: nowrap; opacity: 0; transition: opacity .35s; will-change: transform;
  clip-path: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s))); }
.hud-tag.on, .tap-tag.on { opacity: 1; }

@keyframes hud-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hud-draw { to { transform: scaleX(1); } }

@media (max-width: 760px) {
  :root { --cut: 10px; --cut-s: 6px; }
  .hud-corner { display: none; }
  .hud-map { top: 64px; right: var(--m); width: 124px; padding: 12px 12px 10px; }
  .hud-map::before, .hud-map::after, .hud-rail::before, .hud-rail::after { width: 8px; height: 8px; top: 4px; left: 4px; } .hud-map::after, .hud-rail::after { top: auto; left: auto; bottom: 4px; right: 4px; }
  .hud-depth span { display: none; } .hud-depth { grid-template-columns: 1fr; margin-top: 8px; }
  .hud-rail { top: 64px; left: var(--m); right: auto; transform: none; justify-items: start; padding: 8px 16px 8px 12px; }
  .hud-rail button { grid-template-columns: 22px auto; min-height: 28px; }
  .hud-rail button i { order: -1; justify-self: start; }
  .hud-rail button:not(.on) { display: none; }
  .hud-chain { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-chain.run span, .hud-chain.run i { animation-duration: .01s; animation-delay: 0s; }
}

/* the caption sits on a soft shade so it reads over lit rooms */
.pin-text { position: relative; z-index: 3; }
.pin-text::before { content: ''; position: absolute; inset: -40px -80px -40px -40px; background: radial-gradient(ellipse at 30% 55%, rgba(7, 10, 16, .78), rgba(7, 10, 16, 0) 70%); z-index: -1; pointer-events: none; }

/* nothing in a pinned scene may widen the page */
.pinned { overflow-x: clip; }

/* names on the section through the ground: the same plate, a dot on the thing */
.tap-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--arrive); font-size: var(--t-hud); line-height: 1.2; color: var(--ink); z-index: 2; }
.tap-labels.on { opacity: 1; }
.tap-tag.plain { background: none; clip-path: none; color: var(--nose); padding: 0; }
.tap-dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; background: var(--nose); opacity: 0; transition: opacity .35s; will-change: transform; }
.tap-dot.on { opacity: 1; }