/* Work-instruction layout for the how-to guides: a
wrapper turns its top-level ordered list into numbered step cards in the Legend Brands palette. This file reaches the PDFs too — mkdocs-with-pdf carries the rendered page (with the extra_css links) into the PDF HTML, so weasyprint applies these rules in print as well. Keep every rule here print-safe; print-ONLY rules belong in docs/pdf/styles.scss (the plugin's custom_template_path hook). The underlying construct still stays a plain markdown ordered list that renders numbered without CSS — do not replace it with a construct that depends on this CSS to be readable. */ .lb-steps > ol { list-style: none; margin-left: 0 !important; counter-reset: lb-step; } .lb-steps > ol > li { counter-increment: lb-step; position: relative; margin: 0 0 0.9rem 0 !important; padding: 0.75rem 0.9rem 0.75rem 2.9rem; border: 0.05rem solid rgba(11, 11, 11, 0.15); border-left: 0.2rem solid var(--lb-yellow); border-radius: 0.2rem; background-color: var(--md-default-bg-color); } .lb-steps > ol > li::before { content: counter(lb-step); position: absolute; left: 0.75rem; top: 0.85rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: var(--lb-black); color: var(--lb-yellow); font-weight: 700; font-size: 0.8rem; line-height: 1.5rem; text-align: center; } /* Sub-lists inside a step keep normal bullets. */ .lb-steps > ol > li ul { list-style: disc; } /* Screenshots inside steps and figures: framed, phone-sized. */ .lb-steps img, .lb-shot img { border: 0.05rem solid rgba(11, 11, 11, 0.2); border-radius: 0.3rem; margin-top: 0.5rem; } /* Decision graphics: keep inline SVGs responsive. */ .lb-flow svg { max-width: 100%; height: auto; } /* Captioned screenshots. */ .lb-shot { margin: 0.8rem 0; } .lb-shot figcaption { font-size: 0.68rem; color: rgba(11, 11, 11, 0.62); font-style: italic; margin-top: 0.3rem; max-width: 30rem; }