/*
 * The account section (accounts/_section; owner, 2026-10-04): the
 * navigation column on the left — the reader's address over a ruled list of
 * the section's pages, the current one in ink with an ink bar beside it —
 * and the page on the right. Below 768px the two stack and the list becomes
 * a row that scrolls sideways, like a tab bar.
 *
 * The section's form pages keep their .form-card, set against the column's
 * left edge rather than centred in it. /account itself is the
 * .account-overview: what is signed in and on what plan, as a ruled list.
 */
@layer pages {
  .account-section {
    display: grid;
    gap: var(--space-lg);

    @media (width >= 768px) {
      grid-template-columns: 13rem minmax(0, 1fr);
      gap: var(--space-3xl);
      align-items: start;
    }
  }

  .account-section__main {
    min-inline-size: 0;

    & .form-card {
      margin-inline: 0;
    }
  }

  .account-nav {
    display: grid;
    gap: var(--space-xs);
    padding-block-start: var(--space-sm);
    border-block-start: var(--rule-heavy);
  }

  .account-nav__email {
    margin: 0;
    overflow: hidden;
    color: var(--color-ink-muted);
    font-size: var(--text-meta);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-nav__links {
    display: flex;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-block-end: var(--rule-hairline);
    list-style: none;

    @media (width >= 768px) {
      flex-direction: column;
      gap: 0;
      overflow-x: visible;
      border-block-end: 0;
    }
  }

  .account-nav__link {
    display: flex;
    align-items: center;
    min-block-size: var(--target-min);
    margin-block-end: -1px;
    border-block-end: 2px solid transparent;
    font-size: var(--text-ui);
    white-space: nowrap;

    &[aria-current="page"] {
      border-block-end-color: var(--color-ink);
      font-weight: var(--weight-semibold);
      text-decoration-line: none;
    }

    @media (width >= 768px) {
      min-block-size: 2.5rem;
      margin-block-end: 0;
      padding-inline-start: var(--space-sm);
      border-block-end: var(--rule-hairline);
      border-inline-start: 2px solid transparent;
      white-space: normal;

      &[aria-current="page"] {
        border-block-end: var(--rule-hairline);
        border-inline-start-color: var(--color-ink);
      }
    }
  }

  .account-overview {
    display: grid;
    gap: var(--space-lg);
    max-inline-size: 36rem;
  }

  .account-overview__facts {
    display: grid;
    margin: 0;
    border-block-start: var(--rule-heavy);
  }

  .account-overview__fact {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hairline);
    font-size: var(--text-ui);

    & dt {
      color: var(--color-ink-muted);
      font-size: var(--text-caps);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-caps);
      line-height: var(--leading-ui);
      text-transform: uppercase;
    }

    & dd {
      margin: 0;
      overflow-wrap: anywhere;
    }
  }

  .account-overview__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
}