@layer components {
  .shell {
    max-width: var(--column);
    margin-inline: auto;
    /* Bottom padding clears the view button, which floats over the page. */
    padding: var(--space-6) max(var(--gutter), var(--safe-right))
             var(--space-12) max(var(--gutter), var(--safe-left));
  }

  @media (max-width: 60rem) {
    .shell {
      padding: var(--space-4) max(var(--gutter), var(--safe-right))
               var(--space-12) max(var(--gutter), var(--safe-left));
    }
  }

  .page {
    max-width: var(--column);
    margin-inline: auto;
    padding: var(--space-6) max(var(--gutter), var(--safe-right))
             var(--space-12) max(var(--gutter), var(--safe-left));
  }

  /* Sits inside .page rather than replacing it, so it needs its own centring —
     without this every signed-out screen hangs off the left of a 64rem column. */
  .page--narrow {
    max-width: 30rem;
    margin-inline: auto;
    padding-top: var(--space-10);
  }

  .stack        { display: flex; flex-direction: column; gap: var(--space-3); }
  .stack--tight { gap: var(--space); }
  .stack--loose { gap: var(--space-6); }

  .row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .row--between { justify-content: space-between; }
  .row--tight { gap: var(--space); }

  .muted { color: var(--ink-muted); }
  .faint { color: var(--ink-faint); font-size: var(--text-sm); }
}