/* Stable live-status slots: changing simulation text must not move the controls or page. */
.lab-aside .lab-state, aside #state {
  box-sizing:border-box;
  block-size:3.75em !important;
  min-block-size:3.75em !important;
  max-block-size:3.75em !important;
  overflow:auto;
  scrollbar-gutter:stable;
  overflow-wrap:anywhere;
}
.lab-aside .lab-state-text, aside #stateText,
.gear-controls .gear-feedback, #altFeedback {
  box-sizing:border-box;
  line-height:1.55;
  block-size:10.85em !important;
  min-block-size:10.85em !important;
  max-block-size:10.85em !important;
  overflow:auto;
  scrollbar-gutter:stable;
  overflow-wrap:anywhere;
}
/* One column (<= 980 px: the lab panel sits right under the scene; not the compact widget, it keeps the fixed reserve). A fixed 3 + 7 line reserve left an empty ~150 px gap
   under the scene on a phone. Here the reserve is the tallest title / text this model has shown at this width: lab/kit.js
   keeps it in --lab-reserve on each element and only ever raises it (keepReserve), so after a text has been shown once a
   text change never moves the controls below; a new, longer text pushes them down once, never back up. */
@media (max-width:980px) {
  .lab:not(.lab-compact) .lab-aside .lab-state, .lab:not(.lab-compact) .lab-aside .lab-state-text {
    block-size:auto !important;
    min-block-size:var(--lab-reserve, 0px) !important;
    max-block-size:none !important;
    overflow:visible;
  }
}
/* Text readouts (stroke, selected gear) can wrap too; reserve two lines. */
.lab-readouts .lab-ro b {
  line-height:1.2;
  block-size:2.4em;
  min-block-size:2.4em;
  overflow:auto;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}
/* Legacy status strips below a viewer. */
#refStatus, #systemStatus, #altPath, #gearState, #clutchState {
  box-sizing:border-box;
  min-block-size:4.65em;
  block-size:4.65em;
  max-block-size:4.65em;
  line-height:1.55;
  overflow:auto;
  scrollbar-gutter:stable;
}
/* Touch screens: one finger scrolls the page over a 3D viewer, two fingers rotate (camera-tools.js touchOrbit).
   !important also overrides the inline touch-action:none that OrbitControls sets on viewers without touchOrbit. */
.lab-stage canvas, .stage canvas, .system-stage canvas, .viewport canvas {
  touch-action:pan-y !important;
}
