@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: a readable measure, nothing else (legal_pages/show). */
  .legal {
    max-inline-size: 42rem;
    margin-inline: auto;
  }

  /* Signed-out home (panel/home): the logo, centred on white. */
  body:has(.home) { background: #fff; }
  .home {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--block-space-double);
    min-block-size: calc(100dvh - var(--block-space-double) * 2);

    & img { inline-size: min(20rem, 70vw); block-size: auto; }
  }

  .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%; }
  }
}