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

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

  /* The page's own rhythm, and every page in the product has this one.

     <main> is the stack. It used to be a stack containing a stack: the layout
     set stack--loose on <main>, and then all but one view opened with a
     `<div class="stack stack--loose">` of its own, so the page's gap was 48px
     everywhere except the task lists — which had no wrapper and took <main>'s
     own 32px. Inbox and Today therefore sat a gap tighter under their headings
     than Notifications, Members, Workspace and Your profile did, which is the
     "tiny deviation between the views" you can see if you flip between them
     and cannot name.

     One stack, one gap, stated here. 32px, because the first two things on
     every page are a heading and the thing it introduces, and those are one
     thing. Where a page has real sections after that — Workspace has three,
     Members has two — the sections group in a nested stack--loose and get the
     larger gap between them, which is what that modifier is for. */
  .main { gap: var(--space-4); }

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