/* ── EntryLane layout tokens ─────────────────────────────────────────────
   The single source of truth for layout-scale decisions, loaded FIRST on
   every page (link it before the page's other stylesheets). DESIGN.md
   ("Layout System") documents usage; the audit that motivated this lives
   in .impeccable/critique history.

   BREAKPOINTS — CSS custom properties cannot drive @media, so the blessed
   set is a convention, not a token. Use ONLY these four values:
       480px   phone
       640px   large phone / small tablet
       760px   tablet / the fold for nav + multi-column collapses
       960px   small desktop / console squeeze
   Desktop-first (max-width) is the house direction. Do not introduce new
   widths; if a component seems to need one, it needs a different layout. */

/* Visually hidden, still announced — for structural headings/labels on pages
   whose visual design doesn't show them. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  /* ── Spacing scale ── 4/8-grid, numeric names = px value. The legacy
     --space-* aliases in kinetic.css map onto this scale. Fine-tuning
     below 4px (1-2px optical nudges) stays literal. */
  --sp-4:  0.25rem;
  --sp-8:  0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;
  --sp-64: 4rem;
  --sp-80: 5rem;

  /* ── Container roles ── every page shell picks ONE. Assignments live in
     DESIGN.md; don't invent per-page widths. */
  --shell-flow:    560px;   /* single-task participant flows (survey, votes) */
  --shell-content: 760px;   /* reading/content pages (account, guides, legal) */
  --shell-wide:    880px;   /* wide content (flyer, hero inners, 404) */
  --shell-console: 1240px;  /* operator consoles (admin, platform-admin) */

  /* ── Z-index ladder ── semantic tiers, shared by every surface.
     Housekeeping values (0-2) inside local stacking contexts stay literal.
     Stacked overlays on one page step by +10 from --z-overlay. */
  --z-nav:     100;  /* sticky navs, top bars */
  --z-float:   150;  /* dragged cards, skip links — above content + nav */
  --z-overlay: 200;  /* modals, sheets, backdrops (stack: 200/210/220…) */
  --z-menu:    300;  /* dropdowns, autocompletes, popovers — above modals */
  --z-toast:   400;  /* toasts and transient confirmations — above all UI */
}