/* ══ AOG-CALM-V1 (2026-09-25) — THE STILLNESS RULES, ON EVERY PAGE ═════════════
   Jimmy: "Make sure ALL PAGES have the NEURODIVERGENT principles applied to all,
   PAST PRESENT AND FUTURE." These began as AOG-DD-STILL-V1 on Daily Drafts
   ("the screen zooms in or out … makes me sick") and AOG-MUSIC-STILL-V1 on the
   music benches. They now load on every page (aog-grace.js injects this file;
   index.html links it), and tools/check-calm.js fails any page that breaks them.

   1. STILL SIDEWAYS — the page never pans or bounces left and right.
   2. NO ZOOM ON TAP — every field is at least 16px, the size under which iOS
      zooms the whole page when a box is tapped.
   3. NO MOTION ON TOUCH — on phones and tablets nothing animates, fades or
      smooth-scrolls; with "reduce motion" set, the same on any device.
      Durations go to a hair above zero rather than none, so code that waits
      for an animation or transition to end still hears it end.
   4. NO RUBBER-BANDING — scroll chaining and overscroll bounce are off.
   5. A FOCUS YOU CAN SEE — every focused control carries a clear gold ring.
   Nothing here hides content, changes a colour or moves a layout. ═══════════ */
html { overflow-x: clip; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; overscroll-behavior: none; }
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
select, textarea { font-size: max(16px, 1em) !important; }
/* 6. NOTHING WIDER THAN THE SCREEN (2026-09-26) — a drawing, picture or video
   never pushes its box past the edge; it shrinks to fit (the turntables did). */
canvas, img, video, svg:not([width]) { max-width: 100%; }

@media (hover: none) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

:focus-visible { outline: 3px solid #F2C964; outline-offset: 2px; }
/* selected text stays readable: a soft gold wash, the words keep their colour */
::selection { background: rgba(242,201,100,.42); color: inherit; }

/* ══ AOG-GROUND-V1 (2026-09-25) — ONE BACKGROUND FOR EVERY PAGE ══════════════
   Jimmy: "Every background should have the same settings." Light: warm limestone
   with soft pools of coloured light, as if sun came through stained glass. Dark:
   the same pools, faint, over the site's navy. Fixed, so it never moves. */
@media screen {
  html[data-theme="light"] body { background:
    radial-gradient(38% 30% at 12% 18%, rgba(47,99,184,.10), transparent 70%),
    radial-gradient(34% 28% at 88% 22%, rgba(184,69,122,.09), transparent 70%),
    radial-gradient(40% 32% at 80% 78%, rgba(46,139,87,.09), transparent 70%),
    radial-gradient(36% 30% at 18% 82%, rgba(184,122,18,.10), transparent 70%),
    linear-gradient(180deg, #FBF7EE, #F3ECDD) !important; background-attachment: fixed !important; }
  html[data-theme="dark"] body { background:
    radial-gradient(38% 30% at 12% 18%, rgba(47,99,184,.12), transparent 70%),
    radial-gradient(34% 28% at 88% 22%, rgba(184,69,122,.08), transparent 70%),
    radial-gradient(40% 32% at 80% 78%, rgba(46,139,87,.08), transparent 70%),
    radial-gradient(36% 30% at 18% 82%, rgba(184,122,18,.09), transparent 70%),
    linear-gradient(180deg, #0B2036, #081828) !important; background-attachment: fixed !important; }
  html[data-theme] .screen, html[data-theme] main, html[data-theme] .wrap, html[data-theme] .stage { background-color: transparent !important; }
}