@layer blocks {
  /* A section menu: handwritten label, then 14px items on the 30px pitch.
     Narrow sheet is in flow. Wide sheet hangs in the margin, left of the
     rule, the same slot landing notes use. On the task sheet the nav lives
     inside .search so the sticky compose bar is the containing block. */
  .margin-nav {
    font-size: 0.875rem;
    line-height: 2.14;
    --flow-space: 0.875rem;
  }

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

  .margin-nav .nav-link[data-state="current"],
  .margin-nav .nav-link[aria-current] {
    font-weight: var(--weight-semi);
  }

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

  .search > .margin-nav .nav-link[data-state="current"]::after,
  .search > .margin-nav .nav-link[aria-current]::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
  }

  @container (width >= 52rem) {
    .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;
    }

    section > .margin-nav + * {
      margin-block-start: 0;
    }

    .search > .margin-nav {
      inset-block-start: calc(var(--space-2xs) + 0.8rem);
    }

    .search > .margin-nav h4 {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      padding: 0;
      position: static;
      width: auto;
      white-space: normal;
    }

    .search > .margin-nav ul {
      flex-direction: column;
      flex-wrap: nowrap;
      --cluster-align: flex-end;
      --cluster-space: 0;
    }

    .search > .margin-nav .nav-link[data-state="current"]::after,
    .search > .margin-nav .nav-link[aria-current]::after {
      position: static;
      translate: none;
    }
  }
}