@layer blocks {
  /* A section menu: handwritten label, then items on the dot pitch, hung in
     the margin slot (.notebook-slot). Narrow sheet: a horizontal strip in
     flow; the label is still read out but not shown, and the current dash
     sits under the link. Wide sheet: a column left of the rule, the label
     shown, the dash before the rule. On the task sheet the nav lives inside
     .search so the sticky compose bar is the containing block. */
  .margin-nav {
    line-height: var(--grid-cell);
    --reel-padding: 0;
    --reel-thumb: var(--color-border); /* a red thumb would read as a second current dash */
  }

  .margin-nav ul {
    --flow-space: 0;
  }

  /* 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 {
    min-inline-size: var(--size-target);
    justify-content: center;
  }

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

  @container notebook (width > 55rem) {
    /* The dash follows the link, before the rule. */
    .margin-nav {
      --current-mark-position: static;
      --current-mark-translate: none;
    }

    /* Undoes the h4's [ visually-hidden ]: shown in the margin. */
    .margin-nav h4 {
      position: static;
      clip-path: none;
    }

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

    /* In the compose bar there is no flow gap to stay level with. */
    .search > .margin-nav {
      inset-block-start: var(--space-quarter);
      --flow-space: 0;
    }

    /* The strip stands as a column, right-aligned by the slot. */
    .margin-nav ul {
      --flow-space: var(--space-quarter);
      --reel-direction: column;
      --reel-overflow: visible;
      --reel-space: 0;
    }
  }
}