/* =====================================================================================================================
   Talp's fit layer (2026-11-02, Zelda: "they should fit better on the screen ... for all screens and sizes ... as well as extra
   big screens like monitors"). Injected after mobile.css in every page by _build.py; measured with build/_fit-measure.py
   (sprint/reviews/fit-audit-2026-11-02.md). Phones and tablets have their frame in mobile.css; this file holds two things:

   1. the reading measure, at every width: running text 60 to 72 characters a line.
   2. past 1920 px wide (laptops and desktops up to 1920, the approved composition, are untouched by this part):
     the frame    one centred frame for every page: 1824 px (the 1920 window's own frame) up to 2560, then growing with the
                  type to 2016 px; the side edge (--pad, --edge, --sh-pad: the nav, the titles, the lists, the footer) is
                  whatever is left, halved. 2560: 368 px each side; 3440: 714; 3840: 912. Measured before: the Lab, the legal
                  pages, Use Cases' head and About's scene stayed on 48 px lines at the screen's edges, so at 3440 the words
                  hugged the left of the screen (or its two far edges) beside 2,000 px of black under a 3,344 px wide nav.
     the type     the site's scale steps up gently with the width, from itself at 1920 to 1.2 times at 3456 and no further
                  (body 16 to 19 px, the page title 43 to 52), so a 27 or 34 inch monitor at 100 percent reads as a laptop
                  does; each size is its 1920 size times k = .75 + .0001302 x width, held between 1 and 1.2.
     scenes       About's wall scene is drawn for 1440x834 and scaled whole: past 1920 its edge lines are where the scaled
                  drawing puts them, so the windows keep their places in the drawing instead of drifting to the far edges.
   ===================================================================================================================== */

/* ---------- the reading measure, at every width ----------
   Running text keeps to 60 to 72 characters a line. Measured before (characters in the longest line): the legal pages 76 to 87
   at every size from a tablet up (62ch of light Helvetica is about 82 characters), a publication's rows 95 to 105, a case's notes
   and next steps 95 to 118, Home's case record 86 to 88 (a tablet). 28em is about 68 characters of these faces at their sizes. */
.lg-full, .lg-say{ max-width:28em; }
.lg-brief li{ max-width:calc(var(--lg-ind) + 27em); }
html body .pb-row dd p, html body .pb-note{ max-width:28em; }
html body .cv-note, html body .cv-next p, html body .cv-qtext, html body .cv-q, html body .sheet.cv .pg > p{ max-width:28em; }
.lg-addr{ max-width:28em; }
/* Home's case record only where the page scrolls freely (its phone and tablet layout): on a laptop the record is one composed
   screen and a narrower measure made it run further below the screen (left for Zelda) */
@media (max-width:860px){ html body .cr-v p{ max-width:28em; } }

@media (min-width:1921px){
  :root{
    --fit-frame:clamp(1824px, calc(1260px + 21.875vw), 2016px);
    --pad:max(48px, calc((100vw - var(--fit-frame)) / 2));
    --edge:var(--pad);
    --sh-pad:var(--pad);
    /* the type scale, each token its 1920 size b times k: b * .75 + b * .01302vw, between b and 1.2 b */
    --t-display:clamp(76px, calc(57px + .9896vw), 91.2px);
    --t-statement:clamp(34px, calc(25.5px + .4427vw), 40.8px);
    --t-h1:clamp(43px, calc(32.25px + .5599vw), 51.6px);
    --t-h2:clamp(31px, calc(23.25px + .4036vw), 37.2px);
    --t-h3:clamp(19px, calc(14.25px + .2474vw), 22.8px);
    --t-lede:clamp(17px, calc(12.75px + .2214vw), 20.4px);
    --t-body:clamp(16px, calc(12px + .2083vw), 19.2px);
    --t-small:clamp(13px, calc(9.75px + .1693vw), 15.6px);
    --t-ui:clamp(13.5px, calc(10.125px + .1758vw), 16.2px);
    --t-label:clamp(11px, calc(8.25px + .1432vw), 13.2px);
    --t-micro:clamp(10.5px, calc(7.875px + .1367vw), 12.6px);
    --t-num:clamp(64px, calc(48px + .8333vw), 76.8px);
    /* the Lab's own two sizes */
    --lx-title:clamp(21.5px, calc(16.125px + .2799vw), 25.8px);
    --lx-abs:clamp(14.5px, calc(10.875px + .1888vw), 17.4px);
    --lx-meta:clamp(12px, calc(9px + .1563vw), 14.4px);
  }
  /* the shell's own copies of the scale (shell.css reads them at the root, before this file) */
  :root{ --sh-t-ui:var(--t-ui); --sh-t-small:var(--t-small); --sh-t-label:var(--t-label); --sh-t-body:var(--t-body); }

  /* the paper sheets (a case, a publication): the sheet and its type grow together, so it reads as the same page, larger */
  html body.case-page{ --s-h1:clamp(34px, calc(25.5px + .4427vw), 40.8px); --s-stmt:clamp(23px, calc(17.25px + .2995vw), 27.6px);
    --s-h2:clamp(17px, calc(12.75px + .2214vw), 20.4px); --s-h3:clamp(15px, calc(11.25px + .1953vw), 18px);
    --s-body:clamp(14.5px, calc(10.875px + .1888vw), 17.4px); --s-small:clamp(12.5px, calc(9.375px + .1628vw), 15px);
    --s-label:clamp(10.5px, calc(7.875px + .1367vw), 12.6px); }
  html body .sheet.cv{ width:min(clamp(880px, calc(660px + 11.458vw), 1056px), 100%);
    --c-h1:clamp(37px, calc(27.75px + .4818vw), 44.4px); --c-st:clamp(25px, calc(18.75px + .3255vw), 30px);
    --c-body:clamp(16px, calc(12px + .2083vw), 19.2px); --c-small:clamp(14px, calc(10.5px + .1823vw), 16.8px); --c-tiny:clamp(12.5px, calc(9.375px + .1628vw), 15px);
    --c-big:clamp(78px, calc(58.5px + 1.0156vw), 93.6px); --c-fig:clamp(34px, calc(25.5px + .4427vw), 40.8px); }

  /* About's wall scene, scaled whole: its edge lines sit 48 scene px inside the scaled 1440 drawing, centred in the screen
     (u, the scene's unit, as about.html computes it) */
  html:has(#board){
    --pad:max(48px, calc(50vw - 672 * min(calc((100vh - 66px) / 834), calc(100vw / 1440))));
  }
}
