/* ══════════════════════════════════════════════════════════════
   utilities.css  —  NMMI · ai
   @layer utilities  |  Single-purpose atomic overrides.
   Wins over components and everything below.
   No @layer nesting — these are intentional last-resort overrides.
══════════════════════════════════════════════════════════════ */
@layer utilities {

  /* Visibility */
  .hidden          { display: none !important; }
  .invisible       { visibility: hidden !important; }
  .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;
  }

  /* Display */
  .d-flex   { display: flex !important; }
  .d-grid   { display: grid !important; }
  .d-block  { display: block !important; }
  .d-inline { display: inline !important; }

  /* Flex helpers */
  .flex-col   { flex-direction: column !important; }
  .flex-wrap  { flex-wrap: wrap !important; }
  .items-center { align-items: center !important; }
  .justify-between { justify-content: space-between !important; }
  .gap-sm { gap: var(--space-sm) !important; }
  .gap-md { gap: var(--space-md) !important; }

  /* Text alignment */
  .text-center { text-align: center !important; }
  .text-right  { text-align: right  !important; }
  .text-left   { text-align: left   !important; }

  /* Cursor */
  .cursor-pointer   { cursor: pointer   !important; }
  .cursor-default   { cursor: default   !important; }
  .cursor-not-allowed { cursor: not-allowed !important; }

  /* Truncation */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* No interaction */
  .pointer-events-none { pointer-events: none !important; }
  .user-select-none    { user-select: none    !important; }

  /* ── Surface level helpers (.s1–.s5) ──────────────────────── */
  /* Maps to the five background semantic tokens in tokens.css   */
  .s1 { background: var(--bg-body)      !important; }
  .s2 { background: var(--bg-surface)   !important; }
  .s3 { background: var(--bg-surface-2) !important; }
  .s4 { background: var(--bg-panel)     !important; }
  .s5 { background: var(--bg-input)     !important; }

  /* ── Shadow helpers ────────────────────────────────────────── */
  .sm  { box-shadow: var(--shadow-sm) !important; }
  .md  { box-shadow: var(--shadow-md) !important; }

  /* ── Border helper ─────────────────────────────────────────── */
  .brd { border: var(--hairline) solid var(--border) !important; }

  /* ── Type scale utilities ───────────────────────────────────── */
  /* Fluid sizes sourced from --t-* tokens in tokens.css          */
  .t-hero { font-size: var(--t-hero) !important; }
  .t-xl   { font-size: var(--t-xl)   !important; }
  .t-lg   { font-size: var(--t-lg)   !important; }
  .t-base { font-size: var(--t-base) !important; }
  .t-sm   { font-size: var(--t-sm)   !important; }
  .t-xs   { font-size: var(--t-xs)   !important; }

  /* ── Decorative ─────────────────────────────────────────────── */
  /* .gold-bar — thin theme-coloured top border accent on a block  */
  .gold-bar {
    border-top: 2px solid var(--gold) !important;
  }
  /* .word — prevents word-break mid-token (medical terminology)   */
  .word {
    word-break: keep-all  !important;
    overflow-wrap: normal !important;
  }

}