/*
  ============================================================
  shared/edges.css — seamless edges on every device
  © 2026 Alondra Delgado. All rights reserved. Part of MVP Algebra 1.

  THE BUG THIS FIXES. Several pages set the page gradient on `html, body`
  together:

      html, body { background: radial-gradient(ellipse at top, ...); }

  That paints the gradient TWICE, once in the html box and once in the body
  box, and those boxes are different heights. The two copies meet in a visible
  horizontal seam -- the band across the top of the iPhone sign-in screen.

  It gets worse on a themed page. theme_engine.css restyles `body.theme-galaxy`
  with the nebula gradient, but the inline rule above still holds `html`, so
  html keeps the OLD default gradient and shows through wherever the body box
  ends. That is the dark strip behind the toolbar on the iPad drill screen.

  THE RULE, and it is worth keeping: only ONE element paints the gradient, and
  html carries a FLAT COLOUR ONLY. A flat colour cannot disagree with itself at
  a different box size, so there is nothing left to seam.

  html's colour is set per theme by setTheme() in theme_engine.js, along with
  the <meta name="theme-color"> that tints the browser chrome. Both matter:
  sakura (#fff5f7) and court (#f5e6c8) are LIGHT themes, so a hardcoded dark
  theme-color puts a black bar above a pale pink page.

  Load this AFTER theme_engine.css and after the page's own <style>.
  ============================================================
*/

/* Flat, never a gradient. The !important is load-bearing: it overrides the
   `html, body { background: ...gradient }` rules still inline in the older
   pages, which are otherwise more specific than anything this file can say. */
html {
  /* An entrance animation that scales an element up -- the MVP wordmark comes
     in at 2.4x -- makes it wider than the phone for a few hundred milliseconds,
     and the page can be dragged sideways during load. Measured at 227px of
     horizontal overflow for the first 600ms on a 393px screen.

     `clip` rather than `hidden`: hidden would turn html into a scroll
     container, which silently breaks position:sticky anywhere on the page.
     clip just clips. */
  overflow-x: clip;

  background-image: none !important;
  background-color: var(--bg-1, #050818);
  /* Stops the rubber-band overscroll on iOS from flashing white past the end
     of the page. */
  overscroll-behavior-y: none;
}

body {
  /* 100vh on iOS measures the viewport with the toolbar COLLAPSED, so a
     100vh page is always taller than what you can see and leaves a strip at
     the bottom. svh measures the small (toolbar-visible) viewport, which is
     the one that is always correct. */
  min-height: 100svh;
  /* The gradient is anchored to the viewport rather than the content box, so
     it never tiles, never scrolls out, and never meets another copy of
     itself. */
  background-attachment: fixed;
}

/* Older iOS and anything without svh support. 100vh is wrong by a toolbar's
   height but it is better than nothing, and this branch is never taken on a
   browser that understands svh. */
@supports not (height: 100svh) {
  body { min-height: 100vh; }
}

/* With viewport-fit=cover the page paints under the notch and the home
   indicator, which is what makes the edge seamless -- but content then has to
   be pushed clear of them by hand. Anything fixed to an edge wants this. */
.safe-top    { padding-top:    env(safe-area-inset-top, 0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-x      { padding-left:   env(safe-area-inset-left, 0px);
               padding-right:  env(safe-area-inset-right, 0px); }