* { margin: 0; box-sizing: border-box; }
html, body { height: 100%; background: #04070d; color: #bfe9ff;
  font: 12px/1.45 ui-monospace, "SFMono-Regular", Menlo, monospace; overflow: hidden; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.holo-panel { position: fixed; background: rgba(8, 18, 28, 0.66);
  border: 1px solid rgba(64, 190, 220, 0.35); border-radius: 6px;
  box-shadow: 0 0 18px rgba(40, 160, 200, 0.15) inset; backdrop-filter: blur(2px); }
#hud { top: 14px; right: 14px; width: 270px; padding: 10px 12px; }
#legend { top: 14px; left: 14px; width: 210px; padding: 10px 12px; }
#panel { left: 14px; bottom: 14px; right: 14px; padding: 8px 12px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#readout { top: 48px; left: 50%; transform: translateX(-50%); width: 280px; padding: 10px 12px; }
#hud, #legend, #panel { } /* base; .holo-panel added in JS */
#panel button, #panel input, #panel select { font: inherit; color: #bfe9ff;
  background: #0c1a26; border: 1px solid #2c5566; border-radius: 5px; padding: 4px 8px; }
.tag-spec { color: #ffcf6b; border: 1px solid #6b551d; border-radius: 4px; padding: 0 4px; font-size: 10px; }
h4 { font-size: 11px; letter-spacing: 0.12em; color: #6fd6ff; margin-bottom: 6px; text-transform: uppercase; }
.nav-link { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  color: #6fd6ff; text-decoration: none; font-size: 12px; letter-spacing: 0.08em;
  background: rgba(8,18,28,.66); border: 1px solid rgba(64,190,220,.35);
  border-radius: 6px; padding: 5px 12px; z-index: 10; }
.nav-link:hover { color: #bfe9ff; }
#clocks { position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  width: 360px; padding: 8px 12px; text-align: center; }
#clocks .big { font-size: 18px; color: #bfe9ff; }
.nav-bar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 94vw; z-index: 10; }
.nav-bar .nav-link { position: static; transform: none; top: auto; left: auto; white-space: nowrap; }
.nav-link.active { color: #bfe9ff; border-color: rgba(73,214,255,.8); background: rgba(20,54,72,.72); cursor: default; }
#plotpanel { position: fixed; right: 14px; bottom: 84px; padding: 6px; }
#plot { display: block; }
.metric-ok { color: #7affc0; }
.metric-warn { color: #ffcf6b; }
.verdict-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: bold; letter-spacing: .08em; margin: 2px 0; }
.verdict-valid { background: rgba(40,120,70,.5); color: #7affc0; border: 1px solid #7affc0; }
.verdict-spec { background: rgba(120,90,20,.5); color: #ffcf6b; border: 1px solid #ffcf6b; }
.verdict-reject { background: rgba(120,40,40,.5); color: #ff8a8a; border: 1px solid #ff8a8a; }
.cond-ok { color: #7affc0; }
.cond-bad { color: #ff8a8a; }

/* ---------------------------------------------------------------------------
 * Phones and small tablets.
 *
 * The desktop layout is a fixed collage: a 270px HUD pinned top-right, a 210px
 * legend top-left, a full-width control bar along the bottom, a 280px readout
 * and a 360px clock strip both centred at the top — over a body that declares
 * `overflow: hidden`. On a 390px viewport every one of those overlaps at least
 * one other, and nothing can be scrolled out of the way. All nine labs were
 * unusable on a phone, not merely cramped.
 *
 * WHY THE CANVAS IS LEFT ALONE. Every lab sizes its renderer with
 * `setSize(innerWidth, innerHeight, false)` — the `false` means three.js sets
 * the drawing BUFFER and leaves display size to CSS. Give #scene a shorter box
 * here and the buffer keeps the full-viewport aspect while the element does
 * not, so the scene renders vertically squashed rather than cropped. Fixing
 * that properly means sizing from the canvas's own client rect in six separate
 * main files — Phase 7 work, when these labs become TypeScript.
 *
 * So the scene stays exactly as it is: a fixed, correctly-proportioned
 * backdrop. The panels stop being a collage and become one column that scrolls
 * OVER it, which is also what the holographic register already implies. Body
 * padding leaves the top third of the scene visible before the first panel.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html, body { height: auto; overflow: visible; }

  body {
    /* Nav bar height, then a window onto the live scene. svh (not vh) so the
       mobile URL bar collapsing does not shift the layout under a thumb. */
    padding-top: calc(46px + 34vh);
    padding-top: calc(46px + 34svh);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Nine lab links wrapped into three rows and covered the HUD. One row that
     scrolls sideways instead — the same affordance the control dock will use. */
  .nav-bar {
    top: 0; left: 0; right: 0;
    transform: none;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(4, 7, 13, 0.88);
    border-bottom: 1px solid rgba(64, 190, 220, 0.25);
  }
  .nav-bar .nav-link { flex: 0 0 auto; padding: 8px 12px; }

  /* Out of the collage and into the flow. The explicit inset resets matter:
     these rules only win because `position: static` makes top/left/right/bottom
     inert, and leaving the widths would keep 270px boxes on a 390px screen. */
  #hud, #legend, #panel, #readout, #clocks, #plotpanel {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin: 10px;
    padding: 10px 12px;
  }

  /* Controls are the reason a lab is playable at all, so they lead. */
  #panel { order: -1; display: flex; flex-wrap: wrap; gap: 10px; }
  #panel button, #panel select, #panel input {
    /* 44px is the minimum touch target; the desktop rule leaves them ~26px. */
    min-height: 44px;
    padding: 8px 12px;
  }
  #panel input[type='range'] {
    /* A 300px track squeezed beside three buttons cannot be aimed. Full width,
       and tall enough that the thumb is not competing with the page scroll. */
    flex: 1 1 100%;
    min-width: 0;
    height: 44px;
    padding: 0;
  }
  #panel label { flex: 1 1 100%; }

  #plot { width: 100%; height: auto; }

  /* The readout and clock strips are the two widest fixed boxes; centring them
     at 50% with a translate put half of each off-screen. */
  #clocks { text-align: left; }
  #clocks .big { font-size: 22px; }
}