` wrapping its own link and a toggle. Do NOT add `label.md-nav__title` here — that element is Material's drawer header and lives inside the nested `

`, never as a child of the `

`, so the rule would match nothing and read as though it did. */ .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { display: flex; align-items: center; gap: 0.4rem; font-family: var(--family-ui); font-size: var(--size-micro); font-weight: var(--weight-semibold); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--fg-muted); } .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--band); } /* Stock keeps a sticky "laterite" header at the top of the desktop sidebar. It is the drawer's title doing double duty, and with the lockup sitting two centimetres above it the product name now appears twice in one glance. Hidden at the desktop breakpoint ONLY — on mobile this element is the drawer header and carries the close affordance. */ @media screen and (min-width: 76.25em) { .md-nav--primary > .md-nav__title { display: none; } } .md-nav__link { color: var(--fg-soft); } .md-nav__link:hover, .md-nav__link:focus { color: var(--accent); } /* The active item: quiet accent fill, a 3px inset rule in ITS SECTION'S band, maroon 600 text. `--band` is inherited from the section

above. */ .md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active:hover { background: var(--accent-quiet); box-shadow: inset 3px 0 0 var(--band); color: var(--accent); font-weight: var(--weight-semibold); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; padding-left: 0.5rem; } /* …but ONCE per row. On a section that has its own index page, Material puts the link and the collapse toggle side by side inside `.md-nav__container` and marks BOTH active, so the rule above paints the row and then paints the little chevron beside it again — two fills and two band rules where the design has one. The toggle is an affordance, not the current page; it keeps the active text colour and gives up the highlight. */ .md-nav__container > label.md-nav__link--active { background: none; box-shadow: none; padding-left: 0; } /* ── 8c. The table-of-contents rail ── * * The hairline dose of the apex's borehole rail: a 6px four-band strip down the * TOC's left edge, veiled below the reading position, with a steel probe at it. * NO depth readout and no numbers — this is an echo of the instrument, not a * second instrument. Positions come from javascripts/rail.js. * * The veil is `--canvas` at 82%, so it dims the strip toward the page rather * than greying it — the layers "uncover" as you descend, which is the whole * metaphor. */ .md-sidebar--secondary .md-nav--secondary { position: relative; padding-left: 0.7rem; } .md-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 3px; overflow: hidden; background: linear-gradient( to bottom, var(--laterite-300) 0 25%, var(--laterite-400) 25% 50%, var(--laterite-500) 50% 75%, var(--laterite-700) 75% 100% ); } .md-rail__veil { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--canvas) 82%, transparent); } .md-rail__probe { position: absolute; left: -3px; width: 12px; height: 2px; background: var(--steel-700); } [data-md-color-scheme="slate"] .md-rail__probe { background: var(--steel-300); } /* The rail exists to run down the table of contents' edge, so it appears and disappears exactly with it — and 60em is MATERIAL'S number, not one of ours: it is where `.md-sidebar--secondary:not([hidden])` becomes `display: block`. Copying the wrong breakpoint here is a silent, specific bug: the earlier 76.1875em was the layout breakpoint, and between the two the reader got a table of contents with no strip beside it, on every window from 960 to 1219px. Nothing fails when these drift apart, so on a Material bump this is the value to re-check. (It needs no reduced-motion arm: rail.js SETS the position rather than transitioning to it, so the strip never animates in the first place.) */ @media screen and (max-width: 59.9375em) { .md-rail { display: none; } }