/* The approved MARS instrument: cut housing, phosphor lettering, lamps and Gary.
   The surrounding frame already owns the screen. This component adds no panel. */
.q-altitude{position:relative;width:100%;height:100%;container-type:size;isolation:isolate;transition:opacity .25s ease-in}
/* a film's picture under the instrument (altitude.js underFilm): it hides at once and comes back over .25 s */
.q-altitude.q-altitude--film{opacity:0;transition:none}
@media(prefers-reduced-motion:reduce){.q-altitude{transition:none}}
:root[data-reduced-motion="true"] .q-altitude{transition:none}
.q-altitude img{position:absolute;display:block;max-width:none;image-rendering:pixelated;pointer-events:none;user-select:none}
.q-altitude__housing{inset:0;width:100%;height:100%;object-fit:contain;z-index:-1}
.q-altitude__rail{position:absolute;left:7%;top:5%;bottom:5%;width:13%;background:url(/runtime/quit/altitude-art/rail.png) center/100% auto repeat-y}
/* The band names and multipliers are the instrument's phosphor lettering, so they stay in the pixel face VT323 (display.css)
   now that the body face is IBM Plex Mono; x10,000 fits the housing only at VT323's .4 em advance. */
.q-altitude__bands{position:absolute;inset:0;list-style:none;margin:0;padding:0;font:400 16cqw/1 VT323,monospace}
.q-altitude__bands>li{position:absolute;left:25%;right:3%;top:var(--band-y);height:10%;padding:0;margin:0;transform:translateY(-50%);color:#09c84a}
.q-altitude__word{left:0;top:6%;width:auto!important;height:32%!important;max-width:100%!important;object-fit:contain;object-position:left}
.q-altitude__multiple{position:absolute;top:44%;left:0;line-height:1;white-space:nowrap}
.q-altitude__lamp{width:21%!important;height:auto!important;left:-26%;top:17%;opacity:0}
.q-altitude__bands>li[aria-current="step"]{color:#ff7612}
/* the log scale (the owner, 20:05): a floor row crowded by its neighbours keeps its tick and screen-reader name only */
.q-altitude__bands>li[data-compact="true"] .q-altitude__word,.q-altitude__bands>li[data-compact="true"] .q-altitude__multiple,.q-altitude__bands>li[data-compact="true"] .q-altitude__lamp{visibility:hidden}
.q-altitude__bands>li[aria-current="step"] .q-altitude__word{filter:hue-rotate(-105deg) saturate(1.8) brightness(1.2)}
.q-altitude__bands>li[aria-current="step"] .q-altitude__lamp{opacity:1}
.q-altitude__gary{left:0;top:0;width:23%!important;height:auto!important;transform:translateY(-50%);transition:transform .55s ease-in-out;filter:drop-shadow(1px 1px 0 #020805)}
.q-altitude__gary[hidden]{display:none}
.q-altitude__tick{position:absolute;left:9%;width:9%;height:0;top:var(--tick-y);border-top:max(1px,.6cqw) solid #09c84a;opacity:.7;transform:translateY(-50%);pointer-events:none}
.q-altitude__lit{position:absolute;left:7%;width:13%;top:var(--lit-top);height:var(--lit-height);background:#ff7612;opacity:.35;mix-blend-mode:screen;pointer-events:none;transition:top .55s ease-in-out,height .55s ease-in-out}
.q-altitude__lit[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.q-altitude__lit{transition:none}}
.q-altitude__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.q-altitude__gary{transition:none}}
:root[data-reduced-motion="true"] .q-altitude__gary{transition:none}
/* On phones the instrument sits in a floor frame, whose pictures fade in with opacity only (loading.css). The marker
   keeps its glide there, and still drops it under reduced motion. */
[data-quit-frame-host] .frame-surface .q-altitude img.q-altitude__gary{transition:transform .55s ease-in-out,opacity .18s ease-out}
@media(prefers-reduced-motion:reduce){[data-quit-frame-host] .frame-surface .q-altitude img.q-altitude__gary{transition:none}}
:root[data-reduced-motion="true"] [data-quit-frame-host] .frame-surface .q-altitude img.q-altitude__gary{transition:none}
/* LIVEWATCH (16 Oct, the show live at 390): on a phone the instrument lies over the stage's art without its housing (the
   floor frame's pictures give way to the live show, frames.css), and its floor numbers were 9 px type on the orange sky,
   the current one orange on orange. There it names only the floors altitude.js nearLabels picks (data-near), each
   centred on its tick in the instrument's lettering on a chip of its dark glass, at a quarter of the instrument's width
   (13.5 px at 390, 12.4 at 360, 11 at 320, the size at which x10,000 still fits it there; 7 to 8.6 px before), a row
   running to its right edge. The desktop instrument is unchanged. */
[data-device="phone"] .q-altitude__bands{font-size:25cqw}
[data-device="phone"] .q-altitude__bands>li{right:0}
[data-device="phone"] .q-altitude__multiple{top:50%;transform:translateY(-50%);padding:.1em .08em 0;background:#050b08;box-shadow:0 0 0 1px #12502d}
[data-device="phone"] .q-altitude__bands>li:not([data-near="true"]) .q-altitude__multiple{visibility:hidden}
/* Design pass, 22 Oct 2026: a named floor's chip sits over its own word on a phone (MARS, PENTHOUSE, ROOF and CUBICLE
   collided at 393 and 360), so on the rows that show a chip the chip alone names the floor. */
[data-device="phone"] .q-altitude__bands>li[data-near="true"] .q-altitude__word{visibility:hidden}