/* T-PIE · the CSS half of §09's APPEARANCE controls (see theme.js).
 *
 * theme.js writes the tokens; this file holds the two things a token cannot express: the
 * UI-scale zoom, and the viewport-height correction that keeps the fixed shells exactly one
 * screen tall while zoomed.
 *
 * Load LAST on every page — the shell rules below deliberately restate each page's own
 * `#app…` selector, so they must come after the stylesheet that owns it.
 */

:root {
  --ui-zoom: 1;
  --ui-font: "Segoe UI", "Noto Sans Thai", system-ui, sans-serif;
}

/* The whole UI scales the way browser zoom does it: type, panels, maps and charts together.
   Nothing in this app sizes from rem (every panel is tuned in px), so scaling the root is the
   only honest way to make "ขนาดตัวอักษร" mean something everywhere instead of in a handful of
   places that happen to inherit the body size. */
html { zoom: var(--ui-zoom); }

/* Viewport units are measured against the real viewport and do NOT shrink under zoom, so a
   `height: 100dvh` shell becomes 100dvh × zoom of laid-out space and the document starts to
   scroll. Divide it back out for every element that is meant to be exactly one screen: the
   five page shells, and the slide-in drawers. */
#app,
#app.st-app,
#app.ia-app,
#app.rp-app,
#app.pii-app { height: calc(100dvh / var(--ui-zoom)); }

.why-drawer,
.st-drawer,
.ia-drawer,
.rp-drawer { height: calc(100dvh / var(--ui-zoom)); }

/* High contrast is more than brighter text: at this density the panel edges are what separate
   one number from the next, so they come up with it. */
:root[data-ui-contrast="high"] {
  --border: #33445c;
  --border-2: #45597a;
}
:root[data-ui-contrast="high"] .sub-th,
:root[data-ui-contrast="high"] .st-card-sub { color: var(--muted); }

/* Two strips are laid out to fit their panel exactly at 100%, and stop fitting once the UI is
   scaled up: the 7-day forecast cards and the TIME ANIMATION ladder. Both scroll instead of
   clipping — a seventh day or a lead hour the operator cannot see is worse than a scrollbar.
   At 100% the content still fits, so nothing appears. */
.forecast7 { min-width: 0; overflow-x: auto; }
.time-steps { overflow-x: auto; }
.forecast7::-webkit-scrollbar, .time-steps::-webkit-scrollbar { height: 4px; }
.forecast7::-webkit-scrollbar-thumb,
.time-steps::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }