/* static/css/base.css
   The shell, and the ways it is laid out (ruling R26). Type never drops
   below its clamp() floor, so a fitted composition is only used while the
   design pixel is large enough that the floors barely bite (--u >= 0.8333,
   where the 13.2px body copy sits exactly on its 11px floor). Everything
   else flows.

   STAGE  1600x900 and larger. The 1920x1080 artboard, aspect-fit: --u is the
          smaller of 100vw/1920 and 100vh/1080 (tokens.css) and the stage is
          centred in the viewport; the black ground absorbs the letterbox.
   WIDE   1600px and wider, but shorter than 900px. The composition fits the
          width (--u >= 0.8333 again) and the document scrolls.
   FLOW   narrower than 1600px: designed, flowing layouts with normal
          document scroll (responsive.css; breakpoints 1600/1200/900/600).

   Keep these conditions in step with responsive.css. */
*, *::before, *::after { box-sizing: border-box; }
:root { --layout: stage; }   /* read by the layout check (tests/test_layout.py) */
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;   /* fractional advances: widths match the artboard */
}
.shell {
  position: absolute;
  inset: 0;
  width: calc(1920 * var(--u));
  height: calc(1080 * var(--u));
  margin: auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-inline: var(--margin-x);
}
.shell__main { min-height: 0; }   /* lets inner panes scroll, not the page */

/* ---- WIDE ----------------------------------------------------------------
   One design pixel is 1/1920 of the width. 100vw counts a classic vertical
   scrollbar, so the unit is taken from the shell's content box instead: the
   shell is an inline-size container, and 1808.6 is 1920 less its two 55.7
   margins. Container units are resolved where a token is used, so every
   element inside the shell gets the exact unit; the shell's own margins and
   height, which cannot see themselves, use the viewport width. */
@media (min-width: 1600px) and (max-height: 899.98px) {
  :root { --u: calc(100cqw / 1808.6); --layout: wide; }
  html, body { height: auto; }
  body { overflow: visible; }
  .shell {
    position: relative;
    width: auto;
    height: calc(1080 * 100vw / 1920);
    padding-inline: calc(55.7 * 100vw / 1920);
    container-type: inline-size;
  }
}

/* ---- FLOW ---------------------------------------------------------------- */
@media (max-width: 1599.98px) {
  :root { --u: calc(100vw / 1600); --layout: flow; }
  html, body { height: auto; }
  body { overflow: auto; }
  .shell {
    position: static;
    width: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
  }
}
@media (max-width: 1200px) {
  :root { --u: calc(100vw / 1440); }
}
@media (max-width: 900px) {
  :root { --u: calc(100vw / 760); }    /* a larger design pixel keeps type legible */
}
@media (max-width: 600px) {
  :root { --u: calc(100vw / 430); }
}