@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 */
  .page {
    inline-size: 100%;
    min-inline-size: 0;
  }

  /* Page content — middle column in the 3-column page grid */
  .page-content {
    min-inline-size: 0;
  }

  /* Page actions — flanking the content area on desktop, hidden on mobile
  /* (mobile uses the footer bar slots instead)
  /* ------------------------------------------------------------------------ */

  .page-actions {
    display: none;
  }

  @media (min-width: 640px) {
    .page {
      display: grid;
      grid-template-columns: 1fr min(100%, 35rem) 1fr;
    }

    .page-content {
      grid-column: 2;
    }

    .page-content .container {
      padding-inline: 0;
    }

    .page-actions {
      display: flex;
      align-items: center;
      align-self: start;
      gap: 0.5ch;
      padding-block-start: var(--block-space);
      padding-inline: var(--inline-space);
      position: sticky;
      inset-block-start: 0;
      z-index: 1;
    }

    .page-actions .btn {
      box-shadow: var(--shadow);
    }

    .page-actions .popup .btn {
      box-shadow: none;
    }

    .page-actions--start {
      grid-column: 1;
      justify-self: end;
    }

    .page-actions--end {
      grid-column: 3;
      justify-self: start;
    }

    .page-actions:empty {
      padding: 0;
    }

    body.page--wide .page {
      grid-template-columns: 1fr;
    }

    body.page--wide .page-actions {
      display: none;
    }

    body.page--wide .page-content {
      grid-column: 1;
    }

    body.page--no-back .page-actions--start {
      display: none;
    }
  }

  /* Centered content container */
  .container {
    margin-inline: auto;
    max-inline-size: var(--container-width, 40rem);
    padding-inline: var(--main-padding);
  }

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

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

  /* 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);
  }

  /* 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; }

  @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;
    }
  }
}