/* ═══════════════════════════════════════════════════════════════════════════
   Utilities — the small helpers, last layer so they win inside the theme.
   Still layered, so the admin's unlayered Custom CSS beats them.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer utilities {
  /* ── JS presence gates ───────────────────────────────────────────────────
     Must live in the LAST layer. Component rules (.tr-icon-btn, .tr-burger…)
     set their own display in the earlier `chrome`/`components` layers, and
     layer order beats specificity — so gating from an earlier layer would
     silently fail and leave JS-only controls on screen without JS.

     These rules only ever HIDE. They never set a display value, so when the
     gate does not apply the element keeps whatever display its own component
     rule gave it (.tr-burger is none at desktop and inline-flex at ≤991px —
     a `display: revert` here would clobber both with the UA default).
     ────────────────────────────────────────────────────────────────────── */
  html:not(.tr-js) .tr-js-only { display: none !important; }
  html.tr-js .tr-no-js-only { display: none !important; }

  .tr-stack   { display: grid; gap: var(--space-4); }
  .tr-row     { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .tr-grow    { flex: 1; min-width: 0; }
  .tr-center  { text-align: center; }
  .tr-muted   { color: var(--text-muted); }
  .tr-nowrap  { white-space: nowrap; }

  .tr-mt-0 { margin-block-start: 0; }
  .tr-mb-0 { margin-block-end: 0; }
  .tr-mt-6 { margin-block-start: var(--space-6); }
  .tr-mb-6 { margin-block-end: var(--space-6); }
  .tr-mt-9 { margin-block-start: var(--space-9); }

  /* Wide content never scrolls the page body sideways. */
  .tr-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }

  /* htmx swap-state hooks. htmx adds .htmx-request to the indicator target
     for the life of the request; .htmx-added lands on freshly swapped nodes. */
  .htmx-indicator { opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard); }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator { opacity: 1; }

  /* Newly appended cards should not flash — they simply appear, in keeping
     with the system's "nothing reveals on scroll" rule. */
  .htmx-added { opacity: 1; }

  [hidden] { display: none !important; }
}