/* ===========================================================================
 * age-gate.css — the age gate's VISIBILITY layer, and nothing else.
 *
 * ⚠️ SOURCE FILE, HAND-AUTHORED. scripts/build-site.mjs copies this byte-for-byte to
 *    public/site/age-gate.css and links it from every emitted page. D-13-03: NEVER
 *    hand-edit the copy under public/site/ — the transform rebuilds that tree from
 *    scratch on every run and silently reverts it. Every change goes here.
 *
 * ⚠️ THIS FILE MUST NEVER GROW A COLOUR, TYPE OR SPACING RULE.
 *    13-UI-SPEC § "Phase Nature" closes the list of what this artifact may contain:
 *    "visibility toggling + viewport-unit correction ONLY. No new colors, no new type,
 *    no new spacing." Everything the gate LOOKS like — the blurred backdrop, the white
 *    dialog, the button styling, the loader — already ships verbatim in
 *    wp-content/plugins/age-gate/dist/main.css plus the two inline
 *    <style id="age-gate-*-inline-css"> blocks, all of which D-13-05 keeps untouched.
 *    SITE-01 requires this phase to MATCH the live site, not improve it, so an added
 *    declaration here is a redesign and a redesign fails SITE-01.
 *
 * D-13-08 — NO FLASH. The gate is VISIBLE BY DEFAULT: the transform emits the
 * restriction classes statically and the plugin's own main.css paints the overlay on
 * the first frame, so an unverified visitor never glimpses page content. The inverse
 * (a verified visitor glimpsing the GATE) is prevented by the synchronous script
 * injected as the first child of <head>, ahead of every stylesheet including this one:
 * it adds `ag-verified` to <html> before any of this is applied, so the rules below
 * resolve on the very first paint rather than after a repaint.
 *
 * D-13-09 — ONE SHARED FILE. Every static page links this same URL, and Phase 16
 * reuses it unchanged on the React /shop route. It is never inlined per page.
 *
 * Scope note (CLAUDE.md): the age gate is a RECORDKEEPING artifact. Nothing in this
 * file, or anywhere in this phase, provides age verification or protection of any
 * kind — the cookie it keys off is one the visitor can write themselves, exactly as
 * the WordPress plugin's was.
 * =========================================================================== */

/* THE VERIFIED PATH. `ag-verified` is added by the synchronous <head> script when the
 * `age_gate` cookie reads exactly `21`. !important is carried over from the recovered
 * mechanism (13-RESEARCH § Pattern 3) so the verified path wins outright over whatever
 * the plugin's --ag-form-display custom property happens to resolve to. */
html.ag-verified .age-gate__wrapper { display: none !important; }
html.ag-verified .age-gate__loader { display: none !important; }

/* SCROLL RESTORATION FOR A VERIFIED VISITOR — and the reason the transform can emit the
 * restriction classes statically at all.
 *
 * The plugin hangs its scroll lock off three classes: `age-gate__restricted` and
 * `age-gate__restricted--js` on <html>, `age-restriction` on <body>. The live site adds
 * them from JavaScript, which is precisely what makes it flash; emitting them in the
 * markup is what removes the flash. But the <head> script runs BEFORE <body> has been
 * parsed, so it cannot reach into <body> to take a class off it. These rules are the
 * substitute: one class on <html> switches the whole lock back off, atomically, before
 * the first paint. (The Yes handler in age-gate.js also removes the classes outright,
 * for the visitor who answers during this page view.) */
html.ag-verified.age-gate__restricted,
html.ag-verified.age-gate__restricted--js,
html.ag-verified body.age-restriction { height: auto !important; overflow: auto !important; }

/* VIEWPORT-UNIT CORRECTION — the one thing that genuinely broke when SITE-02 dropped
 * the plugin's dist/all.js.
 *
 * main.css sizes the overlay, both backdrops and the loader `calc(100vh - var(
 * --ag-vh-offset, 0px))`, and the dialog `calc(94vh - var(--ag-vh-offset, 0px))`. The
 * ONLY thing all.js did was compute that offset. Without it the offset falls back to
 * 0px, and on iOS Safari (and Android Chrome) 100vh is the LARGE viewport — it includes
 * the retractable URL bar and toolbar. THE EXACT FAILURE MODE: the overlay is taller
 * than the visible area, so the flex-centred dialog is centred against that taller box
 * and sits low on screen, with its bottom edge — the No/Yes buttons — hidden underneath
 * the browser chrome. The visitor sees a gate they cannot answer.
 *
 * 100dvh is the modern equivalent of what all.js measured: the DYNAMIC viewport, which
 * tracks the chrome. No !important: this is the last stylesheet in <head>, so at equal
 * specificity it already wins over main.css.
 *
 * 🧪 BACKSTOP, NOT VERIFIED. Nothing in this repo can render a page — the real
 * confirmation is plan 13-05's blocking human-verify on the staging URL, MOBILE SAFARI
 * INCLUDED. If it misbehaves there, the documented fallback (13-UI-SPEC § UI
 * Considerations) is to port all.js's ~10 lines of vh-offset logic into age-gate.js. */
@supports (height: 100dvh) {
  .age-gate__wrapper,
  .age-gate__background,
  .age-gate__background-color { height: 100dvh; }
  .age-gate { max-height: 94dvh; }
}
