/* ============================================================================
   lab-typescale.css — shared "bigger text on a big screen" scale for ALL Labs
   (Levels/Math7/Labs/*.html, Levels/Math8/Labs/*.html)

   Students on Chromebooks found the lab text small, so every lab's text steps
   up 20% once the viewport is Chromebook-class or larger.

   WHY `zoom` INSTEAD OF PER-RULE font-size OVERRIDES:
   the 12 labs declare font-size in 87 different selector groups, and the same
   selector often carries a DIFFERENT size from lab to lab (`#types button` is
   12 / 13 / 13.5 / 14 / 15px depending on the lab). Enumerating overrides here
   would (a) silently miss any per-lab class and (b) flatten those distinct
   sizes to one value, so it would not be a true 20% scale. `zoom` on the two
   text containers scales EVERY size proportionally, in every lab, with nothing
   to keep in sync — including labs added later.

   The canvas diagram labels are drawn with ctx.font in JS, which CSS cannot
   reach, so `--lab-canvas-fs` publishes the same factor for
   /scripts/lab-typescale.js to read. Keep the breakpoint defined ONLY here.
   ========================================================================== */

:root{ --lab-canvas-fs: 1; }          /* phones/tablets: no scaling */

/* ---------------------------------------------------------------------------
   EQUATION SIZE CAP (all viewport widths — this is not about the scale above)

   The labs set their KaTeX rows as large as 28px (31px in one lab) against
   13–14px body text — nearly double — so long relations wrapped onto a second
   line: "∠ABD + ∠DBC = 90°" needed 420px in a 373px slot and broke across
   three lines. These caps land the maths at ~1.4x body text, which reads as
   the emphasis it should be while staying on one line.

   Specificity note: each lab defines these in its own inline <style>, which
   comes AFTER this file. `aside …` / `#tripleModal …` outrank a bare class or
   id, so these win on specificity — no !important needed, and a lab can still
   override deliberately with a more specific rule.
   --------------------------------------------------------------------------- */
aside .eqbig{ font-size: 19px; }        /* the main equation rows, every lab */
aside .eqline{ font-size: 17px; }       /* statistics lab */
aside #ratioBig{ font-size: 26px; }     /* volume lab's 1 : 2 : 3 headline (was up to 44px) */
#tripleModal #tripleEq{ font-size: 20px; }   /* triangle-construction modal */

/* 1200px catches Chromebooks (1366x768 is the common panel) and every larger
   desktop, while staying clear of tablet landscape (1024) and below. */
@media (min-width: 1200px){
  :root{ --lab-canvas-fs: 1.2; }
  aside{ zoom: 1.2; }                 /* the whole readout panel: text + controls */

  /* Controls that float ON the diagram live inside #view, not <aside>, so the rule
     above misses them. These are scaled by font-size rather than zoom: each one is
     centred with `left:50%; transform:translateX(-50%)` or positioned in px by JS,
     and zoom would disturb that geometry while font-size cannot. Every value below
     is exactly 1.2x the base size. A lab that lacks one of these ids is unaffected. */
  #view .hud{ font-size: 13.2px; }                                  /* 11 — hint line, all labs */
  #view #types button{ font-size: 15.6px; }                         /* 13 — systems: solution-count tiles */
  #view #types button small{ font-size: 12px; }                     /* 10 */
  #view #tools .pillBtn,
  #view #tools .menu button{ font-size: 15.6px; }                   /* 13 — transformations: toolbar pills */
  #view #addPill .pv{ font-size: 15px; }                            /* 12.5 — statistics: confirm pill */
  #view #addPill button{ font-size: 14.4px; }                       /* 12 */
}