@layer layout {
  /* Authenticated shell: fixed-width dark sidebar plus scrolling content. */
  .app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
  }
  .app-main { min-width: 0; }

  @media (max-width: 48rem) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
  }

  /* One content page. */
  .page {
    width: min(100% - 2 * var(--space-4), var(--content-width));
    margin-inline: auto;
    padding-block: var(--space-8) var(--space-12);
  }
  .page--narrow { --content-width: 44rem; }
  .page__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
  .page__title { margin: 0; }
  .page__lead { margin-top: var(--space-2); color: var(--color-text-muted); }

  /* Spacing primitives. */
  .stack > * + * { margin-top: var(--space-4); }
  .stack--lg > * + * { margin-top: var(--space-6); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .cluster--between { justify-content: space-between; }
  .cluster--end { justify-content: flex-end; }

  /* Centred shell for sign-in and similar pages. */
  .auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--space-4);
  }
}