/* CLIXHOUSE design system — universal utilities
   ─────────────────────────────────────────────────────────────────
   Escape hatches that every site needs. Kept deliberately small —
   utilities are not the styling strategy; components are. Use these
   for accessibility primitives, container patterns, and the rare
   case where a one-off utility is genuinely the right tool.

   Imported via: @import url("/static/design/utilities.css") layer(utilities);
*/

@layer utilities {
  /* Visually-hidden — content for screen readers only.
     Standard pattern; never use display: none (which hides from AT).
     `clip` is deprecated but still honored; pair with `clip-path:
     inset(50%)` for forward-compat. Per Scott O'Hara
     (scottohara.me/blog/2017/04/14/inclusively-hidden.html) and the
     a11y-project recipe.

     Distinction from .skip-link below (per Léonie Watson,
     tink.uk/the-difference-between-keyboard-and-screen-reader-navigation):
     screen-reader users reach .visually-hidden content via element-
     type navigation (headings, lists, landmarks) — NOT via Tab. So
     .visually-hidden is right for SR-only announcement (extra label
     text, off-screen status messages). Anything that must be
     keyboard-reachable (a skip-to-main link) uses the positioned
     .skip-link pattern instead — never collapse the two. */
  .visually-hidden,
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Skip link — appears on keyboard focus, hidden otherwise.
     Place inside <body> as the first focusable element. */
  .skip-link {
    position: absolute;
    inset-block-start: -100vh;
    inset-inline-start: 0;
    padding: var(--space-s, 0.75rem) var(--space-m, 1rem);
    background: var(--accent, black);
    color: var(--text-on-accent, white);
    z-index: 999;
  }
  .skip-link:focus-visible {
    inset-block-start: 0;
  }

  /* Container — PAGE-SHELL width cap with logical gutters.
     DIVISION OF LABOR vs .center (layouts.css): .container is the wide
     page wrapper (~72rem) for section scaffolding; .center is the narrow
     reading measure (~65ch) for prose. Page wrapper → .container; article
     text → .center. Not interchangeable. */
  .container {
    inline-size: 100%;
    max-inline-size: var(--container-max, 72rem);
    margin-inline: auto;
    padding-inline: var(--space-m, 1rem);
  }

  /* .stack and .cluster live in layouts.css @layer layout. Defining
     them here too would shadow the layout-layer versions with
     different defaults (utilities is loaded after layout in the
     cascade), so the duplicates have been removed. Use the layout
     primitives. */

  /* Flow root — contains margin collapse, makes a block a clean
     formatting context. */
  .flow-root {
    display: flow-root;
  }
}