@layer blocks {
  /* A section menu: handwritten label, then items on the dot pitch.
     Narrow sheet: a horizontal strip in flow; the label is still read out but
     not shown (.visually-hidden), and the current marker sits under the link. Wide sheet: hangs
     in the margin, left of the rule, the same slot margin 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: 0;
    --reel-padding: 0;
    --reel-thumb: var(--color-border); /* a red thumb would read as a second current marker */
  }

  /* A cell tall from the line height and at least a cell wide, so every
     item is its own tap target; the strip's scroll box can't clip it. */
  .margin-nav .nav-link {
    font-size: inherit;
    min-inline-size: var(--size-target);
    justify-content: center;
  }

  .margin-nav .nav-link[aria-current] {
    font-weight: var(--weight-semi);
  }

  .margin-nav .nav-link[aria-current]::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: var(--space-quarter);
    block-size: var(--stroke-m);
    background: var(--color-accent);
  }

  @container notebook (width > 55rem) {
    .margin-nav {
      position: absolute;
      inset-inline-start: var(--notebook-slot-offset);
      inline-size: var(--notebook-slot-size);
      text-align: end;
      --flow-space: var(--space-quarter);
    }

    /* Undoes .visually-hidden; blocks come after utilities. */
    .margin-nav h4 {
      clip: auto;
      height: auto;
      overflow: visible;
      position: static;
      width: auto;
      white-space: normal;
    }

    .margin-nav .nav-link {
      justify-content: flex-end;
    }

    /* The marker follows the link, a dash before the rule. */
    .margin-nav .nav-link[aria-current]::after {
      position: static;
      translate: none;
    }

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

    .search > .margin-nav {
      inset-block-start: var(--space-quarter);
    }

    .margin-nav ul {
      flex-direction: column;
      align-items: flex-end;
      overflow: visible;
      --reel-space: 0;
    }
  }
}