/* ============================================================================
   @fgl/vituno base layout & utilities (Story 1.2.1).
   Census-shipped base primitives: container, skip-link, sr-only, prose —
   plus the two site-wide guarantees every component relies on: the shared
   focus ring and the global reduced-motion kill-switch.

   TOKENS ONLY: every color/size/space value consumes tokens.css custom
   properties. Raw literals are permitted only with an inline
   `structural:` marker (enforced by test/components.test.mjs).
   Breakpoint literals in @media conditions are the framework constants
   (md 48rem / lg 68rem / xl 90rem — docs/census.md), exempt by design.
   ============================================================================ */

/* Page container — the width-constrainer the vendored chrome sits in.
   Donor: expeal layout.css .container; equivalents: kitchenbridget's page
   shell, lawcuments' measure-capped section shells. */
.container { width: 100%; max-width: var(--content-full); margin-inline: auto; padding-inline: var(--space-4); }

/* Skip link — offscreen until keyboard focus lands on it. */
.skip-link { position: absolute; left: -9999px; /* structural: offscreen-until-focus pattern */ top: 0; z-index: 30; padding: var(--space-2) var(--space-3); background: var(--brand-primary); color: var(--surface-elevated); text-decoration: none; font-weight: var(--fw-semibold); }
.skip-link:focus { left: 0; }

/* Screen-reader-only utility — the standard clip pattern. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* structural: sr-only clip pattern */ overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Long-form prose column. */
.prose { max-width: var(--measure); }

/* Icon treatment: the vendored Lucide SVGs stay pristine (width/height 24,
   stroke-width 2 as presentation attributes); wrapping an inlined icon in
   .fgl-icon lets these token rules win — presentation attributes sit at
   the bottom of the cascade. */
.fgl-icon { display: inline-flex; }
.fgl-icon svg { width: var(--icon-size); height: var(--icon-size); stroke-width: var(--icon-stroke); }

/* Shared focus ring (WCAG 2.4.11): the token ring is the visible indicator;
   the transparent outline is what survives forced-colors mode, where
   box-shadow is not rendered but a transparent outline is substituted with
   a system color — never remove outlines. :where() keeps specificity at
   zero so a component can extend, never fight, this rule. */
:where(a, button, [role="button"], summary, input, select, textarea):focus-visible { outline: 2px solid transparent; /* structural: forced-colors survival */ outline-offset: 2px; /* structural: ring offset */ box-shadow: var(--focus-ring); }

/* Global reduced-motion kill-switch (WCAG 2.3.3): every animation and
   transition collapses to near-instant — a site-wide guarantee that catches
   all current and future motion, which is exactly why every permitted
   transition must be built from the --dur-* tokens this rule overrides.
   Near-zero (not 0) so animationend/transitionend events still fire for JS
   that waits on them; scroll-behavior forced to auto so anchor jumps don't
   smooth-scroll. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}