@layer components {
  .page {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
  }

  .shell > .page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; gap: var(--space-3); }

  .narrow { display: grid; gap: var(--space-3); width: 100%; max-width: 480px; margin-inline: auto; }

  @media (width >= 1024px) {
    .shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
    .shell > .page { width: 100%; padding: var(--space-2) var(--space-8) var(--space-8); }
  }
}