@layer components {
  :where(#global-container) {
    display: contents;
  }

  @media (min-width: 640px) {
    body:not(.public) :where(#global-container) {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-block-size: 0;
    }
  }

  /* Page container — full width on mobile, constrained + left-aligned on desktop */
  .page {
    inline-size: 100%;
    margin-inline: 0 auto;
    min-inline-size: 0;
  }

  @media (min-width: 640px) {
    .page {
      max-inline-size: var(--page-content-width, 35rem);
    }

    body.page--wide .page {
      max-inline-size: var(--main-width);
    }

    body.page--full .page {
      max-inline-size: none;
    }
  }

  @media (min-width: 1024px) {
    .page {
      --page-content-width: 50rem;
    }
  }

  @media (min-width: 1400px) {
    .page {
      --page-content-width: 60rem;
    }
  }

  /* Left-aligned max-width content container */
  .container {
    margin-inline: 0 auto;
    max-inline-size: var(--container-width, 40rem);
  }

  .container--narrow {
    --container-width: 30rem;
  }

  .container--wide {
    --container-width: 60rem;
  }

  .container--centered {
    margin-inline: auto;
  }

  /* Stack layout (vertical spacing) */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--block-space));
  }

  .stack--lg {
    --stack-gap: var(--block-space-double);
  }

  .stack--sm {
    --stack-gap: var(--block-space-half);
  }

  /* Horizontal axis: lay items out in a row instead of a column */
  .stack--horizontal {
    align-items: center;
    flex-direction: row;
    gap: var(--stack-gap, var(--inline-space));
  }

  /* Legacy aliases */
  .stack--large { --stack-gap: var(--block-space-double); }
  .stack--small { --stack-gap: var(--block-space-half); }

  /* Row layout (horizontal spacing) */
  .row {
    align-items: center;
    display: flex;
    gap: var(--row-gap, var(--inline-space));
  }

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

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

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

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

  /* Gap variations for rows */
  .gap-sm { gap: var(--inline-space-half); }
  .gap-lg { gap: var(--inline-space-double); }

  /* Grid layout */
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--block-space));
    grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
  }

  .grid--2 { --grid-cols: 2; }
  .grid--3 { --grid-cols: 3; }
  .grid--4 { --grid-cols: 4; }

  /* Auto-fill grid — fills available width with as many columns as fit at the
     --grid-min minimum. min(...) keeps it from overflowing narrow viewports. */
  .grid--auto {
    --grid-min: 20rem;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min), 100%), 1fr));
  }

  @media (max-width: 639px) {
    .grid--2,
    .grid--3,
    .grid--4 {
      --grid-cols: 1;
    }
  }

  /* Section with padding */
  .section {
    padding-block: var(--block-space-double);
  }

  /* Spacer (block or inline) */
  .spacer {
    display: block;
    block-size: var(--block-space);
  }

  .spacer--large {
    block-size: var(--block-space-double);
  }

  .spacer--small {
    block-size: var(--block-space-half);
  }

  /* Search field with an action button beside it */
  .search-with-action {
    display: flex;
    align-items: start;
    gap: var(--inline-space-half);

    & > form {
      flex: 1;
    }
  }

  /* Bulk action bar — shows defaults + action buttons */
  .bulk-bar {
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.5em;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--block-space-half) var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);
  }

  .bulk-bar__defaults {
    flex: 1;
    min-inline-size: 10rem;
  }

  .bulk-bar__actions {
    display: flex;
    gap: var(--inline-space-half);
  }

  /* Contained scrolling — bind the mobile layout chain so the flex column
  /* is height-constrained, matching desktop behavior.
  /* On mobile, #global-container is normally `display: contents` which makes
  /* .app-layout land in the body's `auto` grid row (unbounded). Switching to
  /* a real grid gives it a definite height via the 1fr row.
  /* Used by weaning-list and slaughter-list pages.
  /* ------------------------------------------------------------------------ */

  @media (max-width: 639px) {
    body.contained-scrolling {
      block-size: 100dvh;
      grid-template-rows: 1fr calc(var(--footer-height) + env(safe-area-inset-bottom));
    }

    body.contained-scrolling #global-container {
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
    }
  }
}