/* Step-by-step journeys: the /commons/step-by-step pages (build/pages/stepbystep.py). The "Part of" banner on member
   pages is a line of the hero breadcrumbs (build/journeys.py) and uses org.css only. Uses the site tokens from org.css. */

/* Overview pages: a numbered process list */
.sbs-steps{list-style:none;margin:0 0 2.4rem;padding:0;max-width:52rem}
.sbs-step{position:relative;padding:0 0 1.8rem 3.4rem;scroll-margin-top:5rem}
.sbs-step::before{content:"";position:absolute;left:1.05rem;top:2.4rem;bottom:.2rem;width:2px;background:var(--line-2)}
.sbs-step:last-child::before{display:none}
.sbs-title{margin:0 0 .4rem;font-size:var(--fs-h3);line-height:1.2;overflow-wrap:anywhere}
.sbs-num{position:absolute;left:0;top:0;width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--sun-ink);display:grid;place-items:center;font-family:var(--f-mono);font-size:1rem;font-weight:600;color:var(--text);background:var(--paper)}
.sbs-head{display:block}
.sbs-title a{color:var(--text);text-decoration-color:var(--sun);text-underline-offset:.18em}
.sbs-kind{display:block;margin-bottom:.15rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400}
.sbs-sum{margin:0;color:var(--body);max-width:62ch}
.sbs-more{margin-top:.7rem}
.sbs-more-h{margin:0 0 .3rem;font-size:.85rem;font-weight:600;color:var(--muted)}
.sbs-pages{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1rem}
.sbs-pages a{display:inline-block;padding:.3rem 0;color:var(--text);text-decoration-color:var(--sun);text-underline-offset:.2em;overflow-wrap:anywhere}
.sbs-note{max-width:62ch;margin:0 0 2rem;padding:.9rem 1.1rem;border-left:3px solid var(--sun);background:var(--paper-2)}
.sbs-note p{margin:0}
.sbs-others h2{margin:0 0 .5rem}
.sbs-others ul{margin:0;padding-left:1.2rem}
.sbs-others li{padding:.2rem 0}
.sbs-others a{color:var(--text);text-decoration-color:var(--sun);text-underline-offset:.2em}
.sbs-cards{list-style:none;margin:0 0 2.4rem;padding:0;display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.sbs-card{padding:1.3rem;border:1px solid var(--line);border-radius:18px;background:var(--paper);min-width:0}
.sbs-card-title{margin:0 0 .5rem}
.sbs-card-title a{color:var(--text);text-decoration-color:var(--sun);text-underline-offset:.18em}
.sbs-card-for{margin:0 0 .6rem;color:var(--body)}
.sbs-card-n{margin:0 0 .4rem;font-size:.75rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.sbs-card-steps{margin:0;padding-left:1.3rem;color:var(--body);font-size:.92rem}
.sbs-card-steps li{padding:.1rem 0}
@media (max-width:480px){.sbs-step{padding-left:2.9rem}.sbs-num{width:2rem;height:2rem;font-size:.9rem}.sbs-step::before{left:.95rem;top:2.2rem}.sbs-card{padding:1rem}}
@media print{.sbs-others,.sbs-note{display:none}.sbs-step{break-inside:avoid}.sbs-num{border-color:#000}}
