@layer blocks {
  /* A section menu: handwritten label, then small 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: var(--text-sm);
    line-height: var(--grid-cell);
    --flow-space: var(--space-xs);
  }

  .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: var(--space-xs);
    block-size: var(--stroke-m);
    background: var(--color-accent);
  }

  /* Narrow task sheet: the list switcher is a row of links. The label is
     still read out but not shown, and the current marker sits under the link. */
  @container notebook (width < 56rem) {
    .search > .margin-nav h4 {
      border: 0;
      clip: rect(0 0 0 0);
      height: 0;
      margin: 0;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      white-space: nowrap;
    }

    .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 notebook (width >= 56rem) {
    .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;
    }

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

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

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