/* Dudes Lab v0.9 phone fit, v2: uniform scale.

   The design is a fixed 440x977 artboard. v1 stretched it (width:100%,
   height:100dvh), which re-wrapped text at 412px, compressed the flex column
   at real phone heights, clipped the exercise card's lower controls and
   history chart, and forced per-element compaction hacks that broke the
   stepper layout. v2 keeps the artboard at exactly 440x977, so every surface
   renders pixel-for-pixel as the reference screenshots, and scales the whole
   thing uniformly to fit the viewport.

   The factor lives in --dds-zoom on <html>, set by nav.js as
   min(innerWidth/440, innerHeight/977, 1) and updated on resize. It cannot be
   computed in pure CSS: `zoom` needs a <number> and calc() cannot divide a
   length by a length in stable Chrome. The <html> node survives the dc
   runtime's document rebuild, so the variable is always present. */

@media (max-width: 439.98px) {
  [data-screen-label][style^="width: 440px"] {
    zoom: var(--dds-zoom, 0.9);
  }
}

/* ---------- large text size: fit the artboard to one viewport ----------

   In the default `large` setting the artboard is scaled to the viewport WIDTH,
   so on a 412x812 phone a 977px design stands about 103px taller than the
   screen. The first attempt let the PAGE scroll and pinned the bottom nav to
   the viewport. That kept navigation reachable but it broke the screen's own
   contract: `Skip set` and the workout timer, the primary actions on the active
   set screen, sat under the pinned nav until the user scrolled. Measured, they
   were reported on every one of the nine exercise views.

   The design is a fixed-height app screen: a flex column with pinned chrome top
   and bottom and a scrolling middle (`flex: 1; min-height: 0; overflow-y: auto`).
   So the correct move is to give the column exactly one viewport of artboard
   units and let its own interior scroller absorb the difference, which is what
   it was built to do. `100dvh` divided by the zoom factor is the viewport
   expressed in artboard pixels; calc CAN divide a length by a unitless number,
   which is why this works where `zoom: min(calc(100vw/440), ...)` does not.

   This is NOT the stretch that was thrown out in v1. Width is untouched, the
   scale is still uniform, no text re-wraps, and no element is compressed: only
   the outer column's height changes, and the overflow goes to the scroller.

   Measured across nine routes at 412x812: artboard exactly 812, page scroll 0,
   and zero elements cut off or pushed outside the viewport. */

@media (max-width: 439.98px) {
  html[data-dds-fit="fill"] [data-screen-label][style^="width: 440px"] {
    height: calc(100dvh / var(--dds-zoom, 1)) !important;
  }
}