/*
 * Utilities.
 *
 * Deliberately small. The mockups lean on inline `style="margin-top:22px"` all
 * over; rather than port that, spacing between siblings is expressed once with
 * .flow, and one-off gaps set --flow-space on the element that needs it.
 *
 * This layer is last, so a utility beats a component without !important.
 */

@layer utilities {
  /* The owl: space between children, never before the first or after the last.
     Any child can override its own leading gap with --flow-space. */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-6));
  }

  .flow--tight {
    --flow-space: var(--space-4);
  }

  .flow--loose {
    --flow-space: var(--space-7);
  }

  /* Leading gap, for the handful of places where a block needs to sit further
     from what precedes it than its own margin gives. Deliberately a short
     scale — reach for .flow before adding more of these. */
  .u-mt-3 {
    margin-block-start: var(--space-3);
  }

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

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

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

  .u-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--space-4));
  }

  .u-row {
    display: flex;
    align-items: center;
    gap: var(--gap, var(--space-3));
  }

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

  .u-push-end {
    margin-inline-start: auto;
  }

  .u-muted {
    color: var(--mut);
  }

  .u-accent {
    color: var(--score-fg);
  }

  .u-fail {
    color: var(--fail);
  }

  .u-hidden {
    display: none !important;
  }

  /* Show only on one side of the shell breakpoint. Used sparingly — most
     responsive behaviour belongs in the component, not in a utility. */
  @media (min-width: 56rem) {
    .u-phone-only {
      display: none !important;
    }
  }

  @media (max-width: 55.99rem) {
    .u-laptop-only {
      display: none !important;
    }
  }
}