@layer blocks {
  /* Hang a section menu in the sheet margin, left of the rule, the same
     slot landing notes use. Type matches the settings redesign: a
     handwritten label, then 14px items on the 30px pitch.

     On the task sheet the nav lives inside .search so the sticky compose
     bar is the containing block: same headroom, same stick. */
  .margin-nav {
    position: absolute;
    inset-inline-start: calc(-1 * (var(--notebook-margin) + var(--notebook-gutter)));
    inline-size: calc(var(--notebook-margin) - var(--space-xs));
    text-align: end;
    font-size: 0.875rem; /* mockup 14px */
    line-height: 2.14; /* 14px × 2.14 ≈ --grid-cell */
    --flow-space: 0.875rem;
  }

  .margin-nav h4,
  .settings-index h1 {
    font-family: var(--font-hand);
    font-size: 1.1875rem; /* mockup 19px */
    font-weight: var(--weight-semi);
    line-height: var(--leading-tight);
    color: var(--color-decorative);
    rotate: -2deg;
  }

  .margin-nav .nav-link {
    font-size: inherit;
    letter-spacing: inherit;
  }

  /* Sit with the placeholder: bar pad plus 0.8rem so Listen shares a
     row with the compose text. */
  .search > .margin-nav {
    inset-block-start: calc(var(--space-2xs) + 0.8rem);
  }

  /* Current item: ink (from .nav-link), semibold, and a short red tick
     against the rule. */
  .margin-nav .nav-link[data-state="current"],
  .margin-nav .nav-link[aria-current] {
    font-weight: var(--weight-semi);
    gap: 0.4375rem; /* mockup 7px */
  }

  .margin-nav .nav-link[data-state="current"]::after,
  .margin-nav .nav-link[aria-current]::after {
    content: "";
    flex: none;
    inline-size: 0.875rem; /* mockup 14px */
    block-size: var(--border-width);
    background: var(--color-accent);
  }

  section[data-variant="settings"] > nav + * {
    --flow-space: 0;
  }

  /* Same collapse as .margin-note: when the sheet narrows, the menu drops
     above the page instead of hanging beside it. */
  @container (width < 52rem) {
    .margin-nav {
      position: static;
      inline-size: auto;
      text-align: start;
    }

    section[data-variant="settings"] > nav + * {
      --flow-space: var(--space-s);
    }
  }
}