@layer components {
  .settings { display: grid; gap: var(--space-3); }

  .settings__tree {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) calc(-1 * var(--space-4)) 0;
    padding: 0 var(--space-4) var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;

    & .card { display: contents; }
    & .card:not(:has([aria-current="page"])), & .card__title, & .menu-row > .icon { display: none; }

    & .settings__back, & .menu-row {
      display: inline-flex;
      flex: none;
      align-items: center;
      gap: 2px;
      width: auto;
      min-height: 36px;
      padding: 0 var(--space-3);
      border: 0;
      border-radius: var(--radius-chip);
      background: var(--surface-sunken);
      color: var(--ink-muted);
      font-size: var(--text-sm);
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
    }

    & .settings__back { padding-left: var(--space-2); }
    & .menu-row[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
  }

  @media (width >= 1024px) {
    .settings { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: var(--space-8); }

    .settings__tree {
      position: sticky;
      top: var(--space-6);
      display: grid;
      gap: 2px;
      margin: var(--space-6) 0 0;
      padding: 0;
      overflow: visible;

      & .settings__back { display: none; }
      & .card, & .card:not(:has([aria-current="page"])) {
        display: grid;
        gap: 2px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
      }

      & .card + .card { margin-top: var(--space-3); }
      & .card__title {
        display: block;
        padding: var(--space-1) var(--space-3);
        color: var(--ink-muted);
        font-size: var(--text-xs);
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      & .menu-row {
        display: flex;
        min-height: 36px;
        border-radius: var(--radius-control);
        background: none;

        &:hover { background: var(--surface-sunken); color: var(--ink); }
        &[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
      }
    }
  }
}