@layer blocks {
  /* Directory of settings sections. Lives in the writing column; the hanging
     .margin-nav is the same list for the wide sheet. */
  .settings-index {
    --flow-space: 0.875rem;
  }

  .settings-index-link {
    --color-link: var(--color-text);
    --link-decoration: none;
    padding-block: var(--space-xs);
  }

  .settings-index-link svg {
    color: var(--color-text-muted);
  }

  .settings-index li + li {
    border-block-start: 1px solid var(--color-border);
  }

  /* Detail pages: hang the nav on a wide sheet; on a narrow one, hide it
     and show the back row instead. */
  .settings-back {
    display: none;
    font-size: inherit;
  }

  .settings-back + * {
    --flow-space: 0;
  }

  /* Wide chrome opens Profil; the directory is the narrow entry. The
     query hits .site-nav's container, same 52rem as the sheet collapse. */
  .site-nav [data-variant="narrow"] {
    display: none;
  }

  @container (width < 52rem) {
    section[data-variant="settings"] > .margin-nav {
      display: none;
    }

    .settings-back {
      display: flex;
    }

    .settings-back + * {
      --flow-space: var(--space-2xs);
    }

    .site-nav [data-variant="wide"] {
      display: none;
    }

    .site-nav [data-variant="narrow"] {
      display: inline-flex;
    }
  }
}