/* The public pages draw BIGGER on big windows (owner, 2026-10-19: on a 27-inch
   screen at 100% the homepage and the Spotlight Index looked "shrunk").

   Every public page was built and checked on a laptop window of about
   1,500 x 640, and none of them grew past it: the server-drawn pages stop at
   1,440px wide, the homepage at 1,700px, and every text size is fixed. So a
   1,910 x 910 window showed the laptop page with empty space round it. Here
   the whole page is drawn larger instead, the same way the board draws at 90%
   on a laptop (index.css, lib/appZoom.ts), so a big window shows the laptop
   page, only bigger.

   The size is the smaller of window width / 1,500 and window height / 720, in
   steps of 0.05, up to 2.5 (a 4K screen at 100%; it stopped at 1.6 for its
   first day, which left a 4K page with wide empty sides). 720, not the laptop's 640, because the pages
   tighten themselves under 720 tall (their own max-height rules, which see the
   REAL window): with 720 here, any window that is drawn larger still has at
   least 1,500 x 720 of room in the page's own pixels, so every page rule reads
   the same in both. Under 1,575 x 756 nothing changes at all.

   On <html class="site-zoom">: the server-drawn pages write the class in
   their HTML (lib/publicPage.ts); the app's public pages add it while they are
   on screen (useSiteZoom in lib/appZoom.ts). The board never has it.

   What follows from drawing with CSS zoom (lib/appZoom.ts says more):
   - vh and vw are the REAL window, and the zoom then scales them too, so
     100vh would draw 25% taller than the window. Page styles divide them by
     --pz, set here with the zoom: calc(100vh / var(--pz, 1)).
   - Measurements (getBoundingClientRect, clientX, innerWidth, the window's
     scroll) are on-screen pixels; a style written from one divides by the zoom.

   site-zoom.test.ts (api-server) checks every step against the rule above.
   Keep the steps in order: the last one that matches wins. */

/* The frame every public page sits in (owner, 2026-10-19: "no unneeded
   indent on right and left"). The pages had stopped at 1,440px (the server-
   drawn ones) or 88% of the window (the homepage), so a wide window, and the
   homepage at any size, kept wide empty strips down both sides. Now each page
   runs to the same side margin, about 3% of the window (16 to 48px of the
   page's own pixels), and only stops growing at 2,000px, which takes a window
   about three times as wide as it is tall. A page's header, body and footer
   all use these two, so the edges line up as you move between pages. The
   reading pages (Terms, Privacy) keep their narrow column on purpose. */
html.site-zoom {
  --site-gutter: clamp(16px, calc(3vw / var(--pz, 1)), 48px);
  --site-frame: 2000px;
}

@media screen and (min-width: 1575px) and (min-height: 756px) { html.site-zoom { zoom: 1.05; --pz: 1.05; } }
@media screen and (min-width: 1650px) and (min-height: 792px) { html.site-zoom { zoom: 1.1; --pz: 1.1; } }
@media screen and (min-width: 1725px) and (min-height: 828px) { html.site-zoom { zoom: 1.15; --pz: 1.15; } }
@media screen and (min-width: 1800px) and (min-height: 864px) { html.site-zoom { zoom: 1.2; --pz: 1.2; } }
@media screen and (min-width: 1875px) and (min-height: 900px) { html.site-zoom { zoom: 1.25; --pz: 1.25; } }
@media screen and (min-width: 1950px) and (min-height: 936px) { html.site-zoom { zoom: 1.3; --pz: 1.3; } }
@media screen and (min-width: 2025px) and (min-height: 972px) { html.site-zoom { zoom: 1.35; --pz: 1.35; } }
@media screen and (min-width: 2100px) and (min-height: 1008px) { html.site-zoom { zoom: 1.4; --pz: 1.4; } }
@media screen and (min-width: 2175px) and (min-height: 1044px) { html.site-zoom { zoom: 1.45; --pz: 1.45; } }
@media screen and (min-width: 2250px) and (min-height: 1080px) { html.site-zoom { zoom: 1.5; --pz: 1.5; } }
@media screen and (min-width: 2325px) and (min-height: 1116px) { html.site-zoom { zoom: 1.55; --pz: 1.55; } }
@media screen and (min-width: 2400px) and (min-height: 1152px) { html.site-zoom { zoom: 1.6; --pz: 1.6; } }
@media screen and (min-width: 2475px) and (min-height: 1188px) { html.site-zoom { zoom: 1.65; --pz: 1.65; } }
@media screen and (min-width: 2550px) and (min-height: 1224px) { html.site-zoom { zoom: 1.7; --pz: 1.7; } }
@media screen and (min-width: 2625px) and (min-height: 1260px) { html.site-zoom { zoom: 1.75; --pz: 1.75; } }
@media screen and (min-width: 2700px) and (min-height: 1296px) { html.site-zoom { zoom: 1.8; --pz: 1.8; } }
@media screen and (min-width: 2775px) and (min-height: 1332px) { html.site-zoom { zoom: 1.85; --pz: 1.85; } }
@media screen and (min-width: 2850px) and (min-height: 1368px) { html.site-zoom { zoom: 1.9; --pz: 1.9; } }
@media screen and (min-width: 2925px) and (min-height: 1404px) { html.site-zoom { zoom: 1.95; --pz: 1.95; } }
@media screen and (min-width: 3000px) and (min-height: 1440px) { html.site-zoom { zoom: 2; --pz: 2; } }
@media screen and (min-width: 3075px) and (min-height: 1476px) { html.site-zoom { zoom: 2.05; --pz: 2.05; } }
@media screen and (min-width: 3150px) and (min-height: 1512px) { html.site-zoom { zoom: 2.1; --pz: 2.1; } }
@media screen and (min-width: 3225px) and (min-height: 1548px) { html.site-zoom { zoom: 2.15; --pz: 2.15; } }
@media screen and (min-width: 3300px) and (min-height: 1584px) { html.site-zoom { zoom: 2.2; --pz: 2.2; } }
@media screen and (min-width: 3375px) and (min-height: 1620px) { html.site-zoom { zoom: 2.25; --pz: 2.25; } }
@media screen and (min-width: 3450px) and (min-height: 1656px) { html.site-zoom { zoom: 2.3; --pz: 2.3; } }
@media screen and (min-width: 3525px) and (min-height: 1692px) { html.site-zoom { zoom: 2.35; --pz: 2.35; } }
@media screen and (min-width: 3600px) and (min-height: 1728px) { html.site-zoom { zoom: 2.4; --pz: 2.4; } }
@media screen and (min-width: 3675px) and (min-height: 1764px) { html.site-zoom { zoom: 2.45; --pz: 2.45; } }
@media screen and (min-width: 3750px) and (min-height: 1800px) { html.site-zoom { zoom: 2.5; --pz: 2.5; } }

/* Radix places a pop-up with a translate measured in on-screen pixels, which
   the zoom would then scale, landing it off its anchor. The wrapper undoes the
   zoom so the translate lands where it was measured; its content takes the
   zoom back so it matches the page (the board's 90% does the same, index.css). */
html.site-zoom [data-radix-popper-content-wrapper] { zoom: calc(1 / var(--pz, 1)); }
html.site-zoom [data-radix-popper-content-wrapper] > * { zoom: var(--pz, 1); }