@layer components {
  /* Account page -- a single column of sections, like the projects list */
  .account {
    margin-inline: auto;
    max-inline-size: 48rem;
    padding: var(--block-space) var(--inline-space);
  }

  /* Heading with the desktop controls beside it, like .projects-header */
  .account-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  .account__section {
    border-block-start: var(--border);
    margin-block-start: var(--block-space);
    padding-block-start: var(--block-space);
  }

  .account-header > h1 {
    font-family: var(--font-prose);
    font-size: var(--text-large);
    font-weight: 500;
    line-height: 1.3;
  }

  /* Section headings are the app's labels: small sans in muted ink. */
  .account__section h2 {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-block-end: calc(var(--block-space) * 0.35);
  }

  .account__section .txt-bold {
    font-variant-numeric: tabular-nums;
  }

  .account__section > p + .btn {
    margin-block-start: var(--block-space);
  }

  /* The fixed mobile tab bar is out of flow; keep the last section clear of it. */
  @media (max-width: 799px) {
    .account:has(+ .tab-bar) {
      padding-block-end: calc(var(--tab-bar-height) + var(--safe-inset-bottom) + var(--block-space));
    }
  }
}