). CSS counter
self-nesting means an ancestor reset + an h2 reset of the same counter makes
the steps (which are *following siblings* of the h2, not its children)
resolve against the article's single continuous counter — so numbering runs
straight through H2s instead of restarting. An unset counter auto-starts at 0,
so steps before the first H2 still number correctly without the parent reset. */
.md-typeset h2 { counter-reset: step-counter; }
.md-typeset .admonition.step,
.md-typeset details.step { counter-increment: step-counter; }
/* STATIC steps (`!!! step`) render the title as ,
which has no theme ::after, so the counter goes straight there. */
.md-typeset .step > .admonition-title:not(:has(> .meta))::after {
content: " " counter(step-counter);
}
/* COLLAPSIBLE steps (`??? step` / `???+ step`) render the title as ,
whose two pseudo-elements are both owned by the theme: ::before = the type
icon (left), ::after = the fold/unfold chevron (right, rotates on open). The
number needs a slot and there are only two, so one of the icons has to give.
We keep the type ICON native: it stays a masked ::before driven by
var(--md-admonition-icon--step) (via the shared step rules above), so
changing `step = "lucide/…"` in zensical.toml updates collapsible steps too,
and it recolours per scheme for free. In exchange:
• the number takes over ::after as plain inline text after the "Step"
label, so we strip the chevron's mask / absolute positioning / rotation;
• the chevron is redrawn as a background-image in the right gutter, with
colour (= step title colour) and glyph (right = closed, down = open)
baked per scheme/state. It toggles on open but no longer animates.
If you restyle the chevron or the step title colour, update the four baked
SVGs below. Scoped to :not(:has(> .meta)) so subtitled steps (static-only
today) are untouched. */
.md-typeset details.step > summary:not(:has(> .meta)) {
background-repeat: no-repeat;
background-position: right center;
background-size: 1rem 1rem;
}
.md-typeset details.step > summary:not(:has(> .meta))::after {
content: " " counter(step-counter);
-webkit-mask-image: none;
mask-image: none;
background-color: transparent;
position: static;
width: auto;
height: auto;
transform: none; /* cancel the theme's open-state rotate(90deg) on this text */
}
/* Chevron (baked): light/dark = step title colour; right = closed, down = open. */
[data-md-color-scheme="default"] .md-typeset details.step > summary:not(:has(> .meta)) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230369a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
[data-md-color-scheme="default"] .md-typeset details.step[open] > summary:not(:has(> .meta)) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230369a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-md-color-scheme="slate"] .md-typeset details.step > summary:not(:has(> .meta)) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23bae6fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
[data-md-color-scheme="slate"] .md-typeset details.step[open] > summary:not(:has(> .meta)) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23bae6fd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Step subtitle — same convention as the System Updates page: the subtitle
lives inside the title/summary as a `.meta`, so it stays visible when a
step is collapsed (`??? step`). Because the title slot is otherwise used
to auto-generate "Step N", a subtitled step writes only the meta and we
regenerate the "Step N" label here, stacked above it:
!!! step "optional"
The label can only be generated at the end of the title (::after), so we
flex-column and use `order` to lift it above the meta. The icon is
absolutely positioned, so the column only stacks the text. */
.md-typeset .step > .admonition-title:has(> .meta),
.md-typeset .step > summary:has(> .meta) {
display: flex;
flex-direction: column;
}
.md-typeset .step > .admonition-title:has(> .meta)::after {
content: "Step " counter(step-counter);
order: 1;
}
/* Lift the generated "Step N" label above the meta subtitle; the faded/sized
styling is shared with all admonitions (see "Admonition meta subtitle"). */
.md-typeset .step > .admonition-title > .meta,
.md-typeset .step > summary > .meta {
order: 2;
}