/* ───────────────────────────────────────────────────────────────────────
   14-uiscale-text.css — gentle (half-rate) text scaling under UI zoom.

   The UI-scale slider applies `body { zoom: z }`, which scales EVERYTHING —
   including prominent prose/titles — by z. When the operator shrinks the UI to
   fit more on screen, those large texts can get smaller than we'd like.

   These blocks instead scale at HALF the rate: their net size = (1 + z) / 2
   (so z = 80% → 90%, z = 50% → 75%, z = 100% → 100% = no change). Since the
   body zoom already multiplies them by z, applying an element-level
   `zoom: (1 + z) / (2z)` composes to the target (1 + z) / 2. `--ui-zoom` is set
   from applyUiZoom()/resetUiZoom() in app.js; the fallback keeps this inert if
   it's ever missing.

   Using `zoom` (not font-size) keeps this base-agnostic — many of these texts
   inherit their size rather than declaring one — and nothing else sets `zoom`
   on them, so there are no cascade surprises. Loaded last. */
:root {
    --text-rescale: calc((1 + var(--ui-zoom, 1)) / (2 * var(--ui-zoom, 1)));
}

/* Hints have no base size of their own — they inherit the panel's, which is
   too large for secondary help text (e.g. the "How TPPA works…" blurb). Give
   them a smaller default. Context-specific `.x .hint` rules (higher
   specificity) still win where they tune it. */
.hint { font-size: 12px; line-height: 1.4; }

/* Help/idle blurbs + empty-state lines (e.g. "How TPPA works…",
   "No saved sets yet."), plan title, and the advanced-sequencer properties
   placeholder. */
.hint,
.plan-name,
.advseq-props .muted {
    zoom: var(--text-rescale, 1);
}

/* Phones and small tablets: no rescale. There the zoom comes from
   _defaultUiZoom() reacting to the viewport, not from an operator asking
   for a denser UI, so there is nothing to compensate for. Scaling these
   blocks up anyway made them the largest text on the screen: in the iPhone
   app the "How TPPA works" blurb dwarfed the controls it was explaining. */
@media (max-width: 960px) {
    :root {
        --text-rescale: 1;
    }
}