/* Layout tokens every stylesheet can use (#72, "Layout rules"): breakpoints, the text scale,
   safe areas and touch sizes. Loaded before app.css and shell.css. README "Layout tokens".

   BREAKPOINTS. CSS variables cannot go inside @media, so copy these queries as they are.
   js/layout.ts also writes the current one on the page root as data-bp="xs|s-land|m|l|tv"
   (use :root[data-bp='xs'] … when a rule must also follow TV mode, which no query can see).

     xs      @media (max-width: 599.98px) and (orientation: portrait)
     s-land  @media (max-height: 499.98px) and (orientation: landscape)
     m       @media (max-width: 1199.98px), (max-height: 799.98px)      (what xs / s-land leave)
     l       @media (min-width: 1200px) and (min-height: 800px)
     tv      @media (min-width: 1800px)   or   :root.tv   (TV mode: the setting, or a gamepad
                                                          was the last input and no mouse hovers)
     touch   @media (pointer: coarse) and (hover: none)   (also :root[data-touch])

   Order when several match: tv, then xs, then s-land, then l, else m.

   ROOM AT THIS TEXT SIZE. Breakpoints do not see the text-size setting, so js/layout.ts also
   writes data-fit on the page root: the width in lines of text (root ems), so text up to 200 %
   reflows instead of scrolling sideways. Use it for menu layout:
     :root[data-fit='narrow']   under 36 ems wide: one column, labels above their buttons
     :root[data-fit='medium']   36–50 ems: one column for two-column grids
     :root[data-fit='wide']     50 ems and more
   And size grid tracks with min(100%, …): repeat(auto-fill, minmax(min(100%, 13em), 1fr)).

   TEXT. The page's font size is var(--fs-base) × the text-size setting (--scale, 90–200 %).
     --fs-base   the breakpoint's base size (tv 28 px at 1080p, l 20, m 18, xs and s-land 17)
     --fs-min    the breakpoint's smallest label (tv 24, l 16, m 15, xs 14)
     --fs-small  --fs-min × the text-size setting: the floor for every small label. Write
                 font-size: max(var(--fs-small), 0.8em), never a bare 0.75em of a small base.
     --fs-hint   button hints (the smallest label size: 24 px on a TV at 100 %)
   TV text follows the screen height (2.593vh is 28 px at 1080p, 56 px on a 4K TV at 100 %
   zoom) so a 720p TV in TV mode shows the same layout, never below 18 px.

   SAFE AREAS. Keep HUD boxes and buttons inside these (env(safe-area-inset-*) on phones with a
   notch, rounded corners or a home bar; 5 % of the screen on a TV, against overscan).
     --safe-top, --safe-right, --safe-bottom, --safe-left

   TOUCH. --touch-min (56 px buttons), --touch-gap (12 px between them). */

:root {
  --scale: 1;

  /* l: from 1200 wide and 800 tall */
  --fs-base: 20px;
  --fs-min: 16px;

  --env-top: env(safe-area-inset-top, 0px);
  --env-right: env(safe-area-inset-right, 0px);
  --env-bottom: env(safe-area-inset-bottom, 0px);
  --env-left: env(safe-area-inset-left, 0px);
  --safe-top: var(--env-top);
  --safe-right: var(--env-right);
  --safe-bottom: var(--env-bottom);
  --safe-left: var(--env-left);

  --touch-min: 56px;
  --touch-gap: 12px;
}

/* m: 600–1200 wide, or 500–800 tall */
@media (max-width: 1199.98px), (max-height: 799.98px) {
  :root {
    --fs-base: 18px;
    --fs-min: 15px;
  }
}

/* xs (a phone held upright) and s-land (a phone on its side) */
@media (max-width: 599.98px) and (orientation: portrait),
  (max-height: 499.98px) and (orientation: landscape) {
  :root {
    --fs-base: 17px;
    --fs-min: 14px;
  }
}

/* tv: from 1800 wide, or TV mode */
@media (min-width: 1800px) {
  :root {
    --fs-base: clamp(18px, 2.593vh, 200px);
    --fs-min: calc(var(--fs-base) * 24 / 28);
    --safe-top: max(var(--env-top), 5vh);
    --safe-right: max(var(--env-right), 5vw);
    --safe-bottom: max(var(--env-bottom), 5vh);
    --safe-left: max(var(--env-left), 5vw);
  }
}

:root.tv {
  --fs-base: clamp(18px, 2.593vh, 200px);
  --fs-min: calc(var(--fs-base) * 24 / 28);
  --safe-top: max(var(--env-top), 5vh);
  --safe-right: max(var(--env-right), 5vw);
  --safe-bottom: max(var(--env-bottom), 5vh);
  --safe-left: max(var(--env-left), 5vw);
}

:root {
  --fs-small: calc(var(--fs-min) * var(--scale));
  --fs-hint: var(--fs-small);
}