/* lab.css — the page shell every lab shares: the stage, the canvas, the masthead and the readout. Pairs with
 * panel.css, which owns the panel; together they are the whole page frame, so a lab's own <style> holds only what
 * is true of that lab.
 *
 * The stage is the panel's flex SIBLING, which is the load-bearing line here: the panel takes its width out of the
 * flow, so the stage is exactly the free area and the canvas can fill it. A viewport-spanning canvas with the
 * panel painted over it would render about a fifth of its fragments only to cover them.
 */

*, *::before, *::after { box-sizing: border-box }

/* dvh, NOT %. A percentage height resolves against the initial containing block, which on a phone is the viewport
   WITH the URL bar showing -- so the canvas stays sized for a bar that may not be there and gives back a strip of
   screen for nothing. The % line stays underneath as the fallback for anything that does not know dvh. */
html, body { margin: 0; padding: 0; height: 100%; height: 100dvh }

body {
  background: #000;
  color: #cfd3d8;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  display: flex;
}

/* min-width:0 because a flex item's default min-width is auto, which refuses to shrink below its content and
   would let a wide canvas push the panel off the screen instead of the canvas getting narrower. */
#stage { flex: 1; position: relative; overflow: hidden; min-width: 0; background: #000 }

#stage > canvas { display: block; width: 100%; height: 100% }

/* THE NAME OF THE INSTRUMENT WHERE YOU LOOK FIRST, the numbers where you do not. Both are pointer-events:none so
   neither can eat a drag meant for the picture underneath. */
#mast { position: absolute; top: 20px; left: 26px; pointer-events: none; line-height: 1.25 }
#mast .t { font-family: Archivo, sans-serif; font-weight: 900; font-size: 20px; letter-spacing: .05em; color: #fff }
#mast .s { font-size: 11px; letter-spacing: .1em; color: var(--panel-accent, #ffb454); opacity: .85; margin-top: 2px }

#hud {
  position: absolute; bottom: 14px; left: 26px; pointer-events: none;
  font-size: 10px; letter-spacing: .1em; line-height: 1.7; color: rgba(255, 255, 255, .34);
}
#hud b { color: var(--panel-accent, #ffb454); font-weight: 400 }
#hud .dim { opacity: .45 }
#glstate { color: #ff8a3c }

/* THE READOUT MOVES OUT OF THE CORNER ON A PHONE, where the panel toggle lives and where a thumb rests. Narrow
   OR short, matching panel.css -- a handset on its side is 852x393 and passes any width test. */
@media (max-width: 820px), (max-height: 500px) {
  #mast { top: calc(12px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)) }
  #mast .t { font-size: 15px }
  #hud { bottom: calc(10px + env(safe-area-inset-bottom)); left: calc(14px + env(safe-area-inset-left)); font-size: 9px }
}