/* 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 are the instrument's drawn lettering (images); the multipliers are live readouts, so they are in the
   readable display face (owner order, 25 Oct 2026), at the size where x10,000 keeps the footprint the pixel face had in
   the housing (.6 em a character, 12cqw against VT323's 16cqw at .4 em). */
.q-altitude__bands{position:absolute;inset:0;list-style:none;margin:0;padding:0;font:600 12cqw/1 var(--t-font-display,"QUIT Display",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}
/* A painted word taller than its capitals (altitude.js WORD_ART) is sized by its capitals, its extra standing above. */
.q-altitude__word[data-fit]{top:calc(6% - 32% * var(--word-lift));height:calc(32% * var(--word-scale))!important}
.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}
/* On a phone (the owner, 31 Oct 2026, 18:29: "where are the proper labels for the different levels of the scale this
   looks really shitty on mobile"): the desktop's instrument at a phone's size, in its glass housing, every named floor's
   painted word beside its rung with its multiplier under it, the current floor lit and Gary on his rung. The ruler and
   Gary keep to the left edge, so the words have the instrument's width (a phone gives it about a fifth of the
   desktop's): a word is 38% of its row (10 px at 390, 8.4 at 320), its multiplier under it in the readable display face
   (19cqw, 10.3 px at 390), a named row clear of the next. This replaces LIVEWATCH's chips (16 and 22 Oct), which named
   only the floors near Gary, by their numbers alone. */
[data-device="phone"] .q-altitude__rail,[data-device="phone"] .q-altitude__lit{left:1%;width:11%}
[data-device="phone"] .q-altitude__tick{left:2%;width:9%}
[data-device="phone"] .q-altitude__bands{font-size:19cqw}
[data-device="phone"] .q-altitude__bands>li{left:15%;right:0}
[data-device="phone"] .q-altitude__word{top:0;height:38%!important}
[data-device="phone"] .q-altitude__word[data-fit]{top:calc(-38% * var(--word-lift));height:calc(38% * var(--word-scale))!important}
[data-device="phone"] .q-altitude__multiple{top:42%;min-width:calc(var(--chip,0em) + .2em)}
[data-device="phone"] .q-altitude__lamp{left:-17%!important;width:13%!important}
[data-device="phone"] .q-altitude__gary{left:-3%!important;width:17%!important}