/* ==========================================================================
   FORCE PR — 07 UTILITIES
   Last layer, so these win over components without !important.

   Kept intentionally small. This is an escape hatch, not a utility
   framework — if a utility combination starts repeating across patterns,
   that is the signal to promote it to a component in 05.
   ========================================================================== */

@layer force.utilities {

  /* ======================================================================
     ACCESSIBILITY
     ====================================================================== */

  .force-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Same, but becomes visible on keyboard focus. */
  .force-sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .force-no-pointer { pointer-events: none; }


  /* ======================================================================
     COLOUR
     ====================================================================== */

  .force-text-default  { color: var(--force-text); }
  .force-text-muted    { color: var(--force-text-muted); }
  .force-text-subtle   { color: var(--force-text-subtle); }
  .force-text-accent   { color: var(--force-accent); }
  .force-text-accent-2 { color: var(--force-accent-secondary); }

  .force-bg-default    { background-color: var(--force-bg); }
  .force-bg-sunken     { background-color: var(--force-bg-sunken); }
  .force-bg-elevated   { background-color: var(--force-bg-elevated); }
  .force-bg-surface    { background-color: var(--force-surface); }


  /* ======================================================================
     GLOW — explicit, so every use is greppable against the budget
     ====================================================================== */

  .force-glow          { box-shadow: var(--force-glow-accent); }
  .force-glow-soft     { box-shadow: var(--force-glow-accent-soft); }
  .force-glow-mint     { box-shadow: var(--force-glow-accent-2); }
  .force-glow-edge     { box-shadow: var(--force-glow-edge); }

  /* Text glow. Display and h1/h2 only — never body copy, never a paragraph. */
  .force-glow-text     { text-shadow: var(--force-glow-accent); }
  .force-glow-text-mint{ text-shadow: var(--force-glow-accent-2); }

  .force-glow-none     { box-shadow: none; text-shadow: none; }


  /* ======================================================================
     BORDERS
     ====================================================================== */

  .force-border-subtle { border: var(--force-border-subtle); }
  .force-border        { border: var(--force-border); }
  .force-border-strong { border: var(--force-border-strong); }
  .force-border-accent { border: var(--force-border-accent); }
  .force-border-none   { border: 0; }

  .force-border-top    { border-block-start: var(--force-border); }
  .force-border-bottom { border-block-end: var(--force-border); }


  /* ======================================================================
     RADIUS
     ====================================================================== */

  .force-radius-none { border-radius: var(--force-radius-none); }
  .force-radius-xs   { border-radius: var(--force-radius-xs); }
  .force-radius-sm   { border-radius: var(--force-radius-sm); }
  .force-radius-md   { border-radius: var(--force-radius-md); }
  .force-radius-pill { border-radius: var(--force-radius-pill); }


  /* ======================================================================
     TEXT
     ====================================================================== */

  .force-uppercase   { text-transform: uppercase; letter-spacing: var(--force-tracking-nav); }
  .force-normal-case { text-transform: none; letter-spacing: var(--force-tracking-none); }
  .force-balance     { text-wrap: balance; }
  .force-pretty      { text-wrap: pretty; }
  .force-nowrap      { white-space: nowrap; }

  .force-text-start  { text-align: start; }
  .force-text-center { text-align: center; }
  .force-text-end    { text-align: end; }

  /* Centring text implies centring its measure, or it looks broken. */
  .force-text-center > p,
  .force-text-center .force-lead { margin-inline: auto; }


  /* ======================================================================
     MEASURE
     ====================================================================== */

  .force-measure         { max-inline-size: var(--force-measure-body); }
  .force-measure-lead    { max-inline-size: var(--force-measure-lead); }
  .force-measure-display { max-inline-size: var(--force-measure-display); }
  .force-measure-none    { max-inline-size: none; }


  /* ======================================================================
     SPACING — the only numeric utilities, and only on the block axis.
     Inline spacing belongs to the layout layer.
     ====================================================================== */

  .force-mbs-0  { margin-block-start: 0; }
  .force-mbs-4  { margin-block-start: var(--force-space-4); }
  .force-mbs-6  { margin-block-start: var(--force-space-6); }
  .force-mbs-8  { margin-block-start: var(--force-space-8); }
  .force-mbs-9  { margin-block-start: var(--force-space-9); }

  .force-mbe-0  { margin-block-end: 0; }
  .force-mbe-4  { margin-block-end: var(--force-space-4); }
  .force-mbe-6  { margin-block-end: var(--force-space-6); }
  .force-mbe-8  { margin-block-end: var(--force-space-8); }
  .force-mbe-9  { margin-block-end: var(--force-space-9); }


  /* ======================================================================
     DISPLAY
     ====================================================================== */

  .force-hidden       { display: none; }
  .force-block        { display: block; }
  .force-inline-block { display: inline-block; }
  .force-flex         { display: flex; }
  .force-grid-display { display: grid; }

  .force-relative { position: relative; }
  .force-clip     { overflow: clip; }
  .force-fill     { inline-size: 100%; }
}