/* Resource pages (guides, methods, benchmarks, datasets): the facts under the lead, the numbered steps and the download line.
   Loaded only on /resources/{slug}/; tokens.css and site.css come first. */

.resource__head { margin-bottom: var(--s-6); }
.resource__facts { margin-top: var(--s-4); }
.resource__section + .resource__section { margin-top: var(--s-7); }
.resource__section h2 { margin-bottom: var(--s-3); }
.resource__text { max-width: var(--w-prose); color: var(--c-fg-2); }
.resource__text + .resource__text { margin-top: var(--s-3); }

/* Lists carry the section's items; the steps are numbered by their own counter so the number sits with the title. */
.resource__items { margin: var(--s-3) 0 0; padding: 0; list-style: none; max-width: var(--w-prose); }
.resource__items > li + li { margin-top: var(--s-4); }
.resource__items > li > p { color: var(--c-fg-2); }
.resource__items > li > h3 { font-size: var(--t-md); line-height: var(--lh-md); }
.resource__items > li > h3 + p { margin-top: var(--s-1); }
.resource__items:not(.resource__items--steps) > li { position: relative; padding-left: var(--s-5); }
.resource__items:not(.resource__items--steps) > li::before { content: "•"; position: absolute; left: 0; color: var(--c-muted); }
.resource__items--steps { counter-reset: step; }
.resource__items--steps > li { counter-increment: step; }
/* The list already numbers the steps for assistive technology, so the visible number has empty alt text. */
.resource__items--steps > li > h3::before { content: counter(step) ". " / ""; color: var(--c-fg-2); }
.resource__items--steps > li > p.meta { margin-top: var(--s-2); }

.resource__section .cmpview__scroll { margin-top: var(--s-3); }
.resource__section caption { padding: var(--s-3) var(--s-4); text-align: left; color: var(--c-fg-2); font-size: var(--t-sm); line-height: var(--lh-sm); }
.resource__hash { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }