/*
 * utilities.css · the ONLY file allowed to use !important (lint rule `important`).        (docs/09-VISUAL-SPEC.md §2)
 * Kept tiny on purpose: visibility helpers and the reduced-motion kill switch (which must beat component animations).
 */
@layer utilities {
  [hidden] { display: none !important; }
  .pg-vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
  .pg-invisible { visibility: hidden !important; }
  /* html.pg-preload: set in the markup, removed after the first painted frame, so nothing transitions on load */
  .pg-preload *, .pg-preload *::before, .pg-preload *::after { transition: none !important; animation-duration: 1ms !important; }
}
@layer utilities {
  @media (max-width: 767.98px) { .pg-hide-sm { display: none !important; } }
  @media (min-width: 768px) { .pg-only-sm { display: none !important; } }
  @media (max-width: 1023.98px) { .pg-hide-md { display: none !important; } }
  /* Reduced motion: NO transitions (not 1ms: a 1ms `transition-duration` with the default `transition-property: all`
     makes every style change transition, so anything read synchronously sees the OLD value; found in round 1), animations
     run once in 1ms, no infinite animation (caret, pulse, spinner become static). Visual state
     only; NEVER a layout rule in here (the WA round-1 B1 defect). */
  @media (prefers-reduced-motion: reduce) {
    /* the WHOLE page, site chrome, modal and Keeper included (layered !important beats their unlayered rules) */
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  }
}