/*
 * utilities.css
 *
 * A small, curated set of layout, spacing, typography, and state utilities.
 * Only primitives that earn their keep. BEM components own everything else.
 *
 * Wrapped in `@layer utilities` so unlayered BEM rules override these on
 * collisions. Layer order is declared in base.css.
 *
 * Tokens (--block-space, --gap-*, --text-*, --color-*) are defined in
 * base.css. See docs/guides/style-guide.md for the full architecture.
 */

@layer utilities {
  /* --------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------ */

  .hidden {
    display: none;
  }

  .invisible {
    visibility: hidden;
  }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .flex-inline {
    display: inline-flex;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-1 {
    flex: 1;
  }

  /*
   * Stack — vertical flow with consistent rhythm. Children inherit gap
   * via the --gap custom property (defaults to var(--gap-md)).
   * Override per-instance with `style="--gap: var(--gap-sm)"`.
   */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--gap-md));
  }

  /*
   * Cluster — horizontal flow that wraps. Common for action rows, tag
   * lists, button groups.
   */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap, var(--gap-sm));
  }

  /*
   * Auto grid — responsive equal columns, min child width via --min.
   */
  .grid-auto {
    display: grid;
    gap: var(--gap, var(--gap-md));
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 16rem), 1fr));
  }

  /* --------------------------------------------------------------------
   * Alignment (composes with .flex / .flex-column / .grid-auto)
   * ------------------------------------------------------------------ */

  .align-start {
    align-items: flex-start;
  }

  .align-center {
    align-items: center;
  }

  .align-end {
    align-items: flex-end;
  }

  .align-stretch {
    align-items: stretch;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-between {
    justify-content: space-between;
  }

  /* --------------------------------------------------------------------
   * Spacing — gap (use with flex/grid containers)
   * ------------------------------------------------------------------ */

  .gap-xs { gap: var(--gap-xs); }
  .gap-sm { gap: var(--gap-sm); }
  .gap-md { gap: var(--gap-md); }
  .gap-lg { gap: var(--gap-lg); }
  .gap-xl { gap: var(--gap-xl); }
  .gap-none { gap: 0; }

  /* --------------------------------------------------------------------
   * Spacing — padding (logical properties for RTL)
   * ------------------------------------------------------------------ */

  .pad {
    padding-block: var(--block-space);
    padding-inline: var(--inline-space-double);
  }

  .pad-block {
    padding-block: var(--block-space);
  }

  .pad-block-half {
    padding-block: var(--block-space-half);
  }

  .pad-block-double {
    padding-block: var(--block-space-double);
  }

  .pad-block-start {
    padding-block-start: var(--block-space);
  }

  .pad-block-end {
    padding-block-end: var(--block-space);
  }

  .pad-inline {
    padding-inline: var(--inline-space-double);
  }

  .pad-inline-half {
    padding-inline: var(--inline-space);
  }

  .pad-inline-start {
    padding-inline-start: var(--inline-space-double);
  }

  .pad-inline-end {
    padding-inline-end: var(--inline-space-double);
  }

  .unpad {
    padding: 0;
  }

  .unpad-block-end {
    padding-block-end: 0;
  }

  .unpad-inline {
    padding-inline: 0;
  }

  /* --------------------------------------------------------------------
   * Spacing — margin (logical properties for RTL)
   * ------------------------------------------------------------------ */

  .margin {
    margin-block: var(--block-space);
    margin-inline: var(--inline-space-double);
  }

  .margin-block {
    margin-block: var(--block-space);
  }

  .margin-block-start {
    margin-block-start: var(--block-space);
  }

  .margin-block-end {
    margin-block-end: var(--block-space);
  }

  .margin-block-half {
    margin-block: var(--block-space-half);
  }

  .margin-block-double {
    margin-block: var(--block-space-double);
  }

  .margin-inline {
    margin-inline: var(--inline-space-double);
  }

  .margin-inline-start {
    margin-inline-start: var(--inline-space-double);
  }

  .margin-inline-end {
    margin-inline-end: var(--inline-space-double);
  }

  .center {
    margin-inline: auto;
  }

  .margin-none {
    margin: 0;
  }

  .margin-block-none {
    margin-block: 0;
  }

  .margin-inline-none {
    margin-inline: 0;
  }

  /* --------------------------------------------------------------------
   * Sizing
   * ------------------------------------------------------------------ */

  .full-width {
    inline-size: 100%;
  }

  .full-height {
    block-size: 100%;
  }

  .stretch {
    inline-size: 100%;
    block-size: 100%;
  }

  .max-width {
    max-inline-size: var(--main-width);
    margin-inline: auto;
  }

  /* --------------------------------------------------------------------
   * Typography — sizes
   * ------------------------------------------------------------------ */

  .txt-xx-small { font-size: var(--text-xx-small); }
  .txt-x-small  { font-size: var(--text-x-small); }
  .txt-small    { font-size: var(--text-small); }
  .txt-normal   { font-size: var(--text-normal); }
  .txt-medium   { font-size: var(--text-medium); }
  .txt-large    { font-size: var(--text-large); }
  .txt-x-large  { font-size: var(--text-x-large); }
  .txt-xx-large { font-size: var(--text-xx-large); }

  /* --------------------------------------------------------------------
   * Typography — semantic colors
   * ------------------------------------------------------------------ */

  .txt-ink      { color: var(--color-ink); }
  .txt-subtle   { color: var(--color-subtle); }
  .txt-link     { color: var(--color-link); }
  .txt-positive { color: var(--color-positive); }
  .txt-negative { color: var(--color-negative); }

  /* --------------------------------------------------------------------
   * Typography — weight & flow
   * ------------------------------------------------------------------ */

  .font-weight-normal { font-weight: 400; }
  .font-weight-bold   { font-weight: 700; }
  .font-weight-black  { font-weight: 900; }

  .txt-tight-lines { line-height: 1.2; }
  .txt-center      { text-align: center; }
  .txt-start       { text-align: start; }
  .txt-end         { text-align: end; }

  /* --------------------------------------------------------------------
   * Visibility & state
   * ------------------------------------------------------------------ */

  /*
   * Visually hidden but still announced by screen readers.
   * Mirrors the .for-screen-reader pattern used elsewhere.
   */
  .visually-hidden,
  .for-screen-reader {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .sortable-ghost {
    opacity: 0.5;
  }
}