@layer components {
  .account-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    padding-block-end: 3rem;

    @media (width >= 768px) {
      align-items: start;
      grid-template-columns: 210px 1fr;
    }
  }

  /* On a phone the panel has no room beside the page: the settings start
     from the list of their pages (`settings-menu.css`) and each page links
     back to it over its title. */
  .account-nav {
    display: none;

    @media (width >= 768px) {
      align-self: start;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      inset-block-start: calc(var(--nav-height) + 1.5rem);
      position: sticky;
    }
  }

  /* The personal and the company items are sections of their own, with a
     dashed line between them. */
  .account-nav__section {
    display: flex;
    flex-direction: inherit;
    gap: inherit;
  }

  .account-nav__section + .account-nav__section {
    border-block-start: 1.5px dashed var(--color-border-strong);
    margin-block-start: 0.5rem;
    padding-block-start: 0.5rem;
  }

  .account-nav__item {
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-ink-secondary);
    cursor: pointer;
    display: flex;
    font-size: 0.9375rem;
    font-weight: 500;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    text-align: start;
    /* The items are links between settings pages, not tab switches. */
    text-decoration: none;
    white-space: nowrap;
  }

  .account-nav__item:hover {
    background: oklch(from var(--color-brand) l c h / 6%);
    color: var(--color-brand);
  }

  .account-nav__item.is-active {
    background: var(--color-brand-tint);
    color: var(--color-brand);
  }

  .account-nav__logout {
    align-items: center;
    color: var(--color-negative);
    display: flex;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 0.625rem;
    margin-block-start: 1.5rem;
    padding: 0.625rem 0.875rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .account-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    min-inline-size: 0;
  }

  .account-card {
    @media (width >= 768px) {
      padding: 1.75rem 2rem;
    }
  }

  .account-card__title {
    color: var(--color-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  /* The subtitle carries the space under the title in its `margin-bottom`.
     When a card has no subtitle (Members, Plan), the content would sit right
     on the title — then the title has to carry it itself. */
  .account-card__title:not(:has(+ .account-card__subtitle)) {
    margin-block-end: 1.25rem;
  }

  .account-card__subtitle {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0.25rem 0 1.5rem;
  }

  .account-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 1.5rem;
  }

  .account-profile {
    align-items: center;
    background: var(--color-surface-tint);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-end: 1.5rem;
    padding: 1rem 1.25rem;
  }

  .account-profile__btn {
    inline-size: 100%;

    @media (width >= 768px) {
      inline-size: auto;
    }
  }

  .account-avatar {
    align-items: center;
    background: var(--color-brand-fill);
    block-size: 56px;
    border-radius: 50%;
    color: var(--color-ink-inverted);
    display: flex;
    flex-shrink: 0;
    font-size: 1.125rem;
    font-weight: 700;
    inline-size: 56px;
    justify-content: center;

    &.account-avatar--photo {
      background: none;
      object-fit: cover;
    }
  }

  #account_profile_header {
    display: contents;
  }

  .account-profile__meta {
    flex: 1;
    min-inline-size: 0;
  }

  .account-profile__name {
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
  }

  /* An address has no place to break that reads well, and the reset breaks
     words anywhere: it stays on one line, cut short where it runs out of
     room, and its `title` holds it whole. */
  .account-profile__email {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin: 0.125rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;

    @media (width >= 768px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .account-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-inline-size: 0;
  }

  .account-label {
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .account-danger {
    align-items: center;
    background: var(--color-negative-tint);
    border-radius: var(--radius-lg);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-block-start: 1.5rem;
    padding: 1.125rem 1.25rem;
  }

  /* The XML archive is offered beside the deletion, not as part of it: the
     surface, not the warning. */
  .account-danger--archive {
    background: var(--color-surface-tint);

    .account-danger__desc {
      color: var(--color-ink-secondary);
    }
  }

  .account-danger__title {
    color: var(--color-negative-strong);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0;
  }

  .account-danger__desc {
    color: var(--color-negative-strong);
    font-size: 0.8125rem;
    margin: 0.125rem 0 0;
  }

  .account-field__error {
    color: var(--color-negative);
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0.25rem 0 0;
  }

  .account-field__error:empty {
    display: none;
  }

  .account-field__hint {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    margin: 0.375rem 0 0;
  }

  .account-name {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .account-name__primary {
    color: inherit;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-name__other {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-content--narrow {
    margin-inline: auto;
    max-inline-size: 40rem;
    padding-block-end: 3rem;
  }

  .account-grid--single {
    grid-template-columns: 1fr;
  }
}