@layer layout {
  main {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    max-inline-size: 60rem;
    margin-inline: auto;
    padding: var(--block-space-double) var(--inline-space-double);
  }

  /* Sign-in, sign-up, password and invitation pages: one centred card. */
  .auth {
    inline-size: 100%;
    max-inline-size: 26rem;
    margin-inline: auto;
    margin-block: var(--block-space-double);
    padding: var(--block-space-double) calc(var(--inline-space) * 3);
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);

    & form { display: flex; flex-direction: column; gap: var(--block-space); }
  }

  /* Legal documents, after curated.design/legal/terms: the title and an index on the left, kept in
     view while the text scrolls on the right at a readable measure. One column on a phone. */
  main:has(.legal) { max-inline-size: 72rem; }

  .legal {
    display: grid;
    gap: var(--block-space-double) calc(var(--inline-space) * 8);
    padding-block: var(--block-space-double);

    @media (min-width: 56rem) {
      grid-template-columns: minmax(14rem, 1fr) minmax(0, 44rem);
      align-items: start;
    }

    & h1 {
      font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
      font-weight: 400;
      line-height: 1.05;
      letter-spacing: -0.02em;
    }
  }

  .legal__header {
    @media (min-width: 56rem) {
      position: sticky;
      inset-block-start: var(--block-space-double);
      max-block-size: calc(100dvh - var(--block-space-double) * 2);
      overflow-y: auto;
    }
  }

  /* The isotype, top left: the way back for someone who arrived from a consent link. */
  .legal__home {
    display: inline-block;
    margin-block-end: var(--block-space-double);

    & img { block-size: 2.5rem; inline-size: auto; }
  }

  .legal__meta { margin-block-start: var(--block-space); color: var(--color-subtle); }

  .legal__index {
    margin-block-start: var(--block-space-double);
    font-size: var(--text-small);

    & ol {
      display: grid;
      gap: var(--block-space-half);
      padding: 0;
      list-style: none;
    }

    & a { color: var(--color-subtle); }
    & a:hover { color: var(--color-text); }
  }

  .legal__body {
    & section { scroll-margin-block-start: var(--block-space-double); }
    & h2 { margin-block: calc(var(--block-space) * 3) var(--block-space-double); font-size: var(--text-large); }
    & section p { margin-block-end: 1.25rem; line-height: 1.75; color: var(--color-subtle); }
    & .links { margin-block-start: calc(var(--block-space) * 3); }
  }

  @media (prefers-reduced-motion: no-preference) {
    html:has(.legal) { scroll-behavior: smooth; }
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  /* The business panel: navigation beside the page from 64rem, above it below. */
  .app {
    display: grid;
    grid-template-columns: minmax(0, 1fr); /* 1fr alone grows to its widest child, a table included */
    min-block-size: 100dvh;

    @media (min-width: 64rem) {
      grid-template-columns: 16rem minmax(0, 1fr);
    }

    & main { inline-size: 100%; }

    /* Every panel page titles itself in the home's editorial voice, a size below its greeting
       (headline.css, a later layer, keeps the greeting bigger). */
    & main h1 {
      font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
      line-height: 1;
      letter-spacing: -0.035em;
    }

    /* A list page's title with its main action beside it, below it on a phone. */
    & .page-header {
      display: flex;
      flex-wrap: wrap;
      align-items: end;
      justify-content: space-between;
      gap: var(--block-space) var(--inline-space-double);
    }

    /* A form reads down one comfortable column, not across the page. */
    & form.stack, & .flash:has(+ form.stack) { max-inline-size: 36rem; } /* a notice over a form keeps its width */
  }
}