/* ============================================================================
   Joy Group — viewport-derived tokens, the PORTAL's copy.

   The website's version of this file also carries its gutters, its section
   bands, its kicker size and a rule for its .shell and #site-header — none of
   which exist here, and all of which were carried unused until they were taken
   out on 2026-09-20. What is left is what the portal reads: the safe-area
   insets every page measures its bars against, the text-size pin, and the
   phone spacing scale behind --space-*. Do not restate these tokens in
   portal.css or admin.css, and never pin one of them to a flat px value inside
   a phone block: a flat value does not merely override the scale, it switches
   the scale OFF for that token.
   ============================================================================ */

/* ---- Safe-area insets -----------------------------------------------------
   Indirected through custom properties for two reasons: env() cannot be used
   inside a var() fallback chain, and naming them makes the intent legible at
   the call site (`calc(16px + var(--sa-b))` reads as "clear the home
   indicator"). They resolve to 0 on every device without insets and on every
   desktop browser, so the same expression is safe everywhere and needs no
   @supports guard. They only become non-zero once the page opts in with
   viewport-fit=cover in its viewport meta.
   -------------------------------------------------------------------------- */
:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

/* iOS inflates body copy when the phone is rotated unless this is pinned. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ---- The phone scale ------------------------------------------------------
   Everything below 768px used to be ONE breakpoint step and then flat: a
   375x667 SE paid exactly the same 64px section bands as a 430x932 Pro Max,
   so the small phone carried the big phone's whitespace on 265px less screen
   and needed ~40% more scrolling for the same content. Type was the only
   thing that scaled, which is backwards — whitespace should yield first.

   These clamps make the phone range fluid the way 769px-and-up already is.
   The ratio is 1.000 at 430x932 — the iPhone design benchmark, reproduced to
   the pixel — and falls with the screen: 0.970 at 412x932 and 0.968 at 412x915
   (the Android benchmark), 0.930 at 393x873, 0.927 at 393x852, 0.921 at
   390x844, 0.870 at 375x667, 0.841 at 360x640. The floor is 0.840, which is
   exactly where a 360x640 Android lands — it was 0.870 when this was solved
   against iPhones alone, and that floor was clamping the smallest Android
   into an SE's spacing despite being narrower AND shorter than one. Nothing
   at 375 or above moves; only screens smaller than an SE gain the extra
   compression they were being denied.

   Two axes, because vertical space is what actually runs out on a phone, but
   weighted 70/30 toward width: vw is exactly the layout width, while vh on
   iOS derives from the URL-bar-hidden viewport, so the steadier axis leads.
   vh and not dvh deliberately — dvh would re-run this scale every time Safari
   collapses its URL bar, reflowing the whole page mid-scroll.

   Coefficients are solved from those two anchor points; they are not tuned by
   eye, so moving an anchor means re-solving, not nudging.

   !important because this sheet is loaded before the page's own, and the design
   system's flat values would otherwise win at equal specificity. The scale is
   the website's, kept to the decimal so a phone spaces the portal exactly as it
   spaces joygroup.al.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --space-2: clamp(13.44px, calc(2.647vw + 0.2355vh + 2.422px), 16px) !important;
    --space-3: clamp(20.16px, calc(3.971vw + 0.3532vh + 3.633px), 24px) !important;
    --space-4: clamp(26.88px, calc(5.295vw + 0.4709vh + 4.844px), 32px) !important;
    --space-5: clamp(33.6px, calc(6.618vw + 0.5887vh + 6.055px), 40px) !important;
    --space-6: clamp(40.32px, calc(7.942vw + 0.7064vh + 7.266px), 48px) !important;
    --space-8: clamp(53.76px, calc(10.59vw + 0.9419vh + 9.689px), 64px) !important;
    --space-10: clamp(20.16px, calc(3.971vw + 0.3532vh + 3.633px), 24px) !important;
    --space-12: clamp(33.6px, calc(6.618vw + 0.5887vh + 6.055px), 40px) !important;
    --space-16: clamp(40.32px, calc(7.942vw + 0.7064vh + 7.266px), 48px) !important;
    --space-20: clamp(134.4px, calc(26.47vw + 2.355vh + 24.22px), 160px) !important;
  }
}