/* ============================================================================
   VIEWPORT.CSS · the visual-viewport contract's CSS half (exp-26).

   viewport.js publishes the LIVE numbers (--vvh, --vvw, --vv-top, --vv-gap-b)
   as inline custom properties on <html>; this file carries the parts CSS can
   own by itself:

   · the safe-area insets, mirrored once as --safe-* so rules can compose them
     inside calc()/max() without repeating the env() fallback dance;
   · the resting fallbacks for the live properties, so a page that loads the
     CSS before the JS has painted (or a page where JS failed entirely) resolves
     every var() to exactly the old layout-viewport behaviour, never to nothing.

   THE RULES OF USE (the band contract, PLAN.md "the systematic solution"):
   · nothing a child must see or touch is sized or anchored with 100vh/100dvh —
     heights come from var(--vvh, 100vh), bottom anchors climb var(--vv-gap-b);
   · top-band chrome (home chip · step chip · title · prompt) lays out IN FLOW
     inside one container against --safe-t;
   · bottom-band chrome (dock, forward chip, trays) anchors to the visual
     bottom: calc(var(--vv-gap-b, 0px) + <offset> + var(--safe-b));
   · the subject between the bands is inviolable — bands compress their own
     spacing under height pressure (clamp() on paddings/gaps), they never
     overlap each other or the subject.
   ========================================================================== */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* resting values — overridden live by viewport.js inline on <html> */
  --vvh: 100vh;
  --vvw: 100vw;
  --vv-top: 0px;
  --vv-gap-b: 0px;
}