/* ══════════════════════════════════════════════════════════════
   PATTERN — How-to list

   Static numbered step list for explanatory "how it works" sections.
   NOT a stepper – the items are not interactive, just an ordered
   visual walk-through. For interactive multi-step workflows use
   patterns/workshop-flow.css instead.

   Markup:
     <ol class="howto-list">
       <li class="howto-step">
         <span class="howto-step__number">1</span>
         <div>
           <h3>Skapa cykel</h3>
           <p>Beskriv vad ni vill uppnå...</p>
         </div>
       </li>
     </ol>

   Base: strategios.css
   Used by: 30-30 (landing-page how-it-works section)
   Candidates: any app with /om or /metod content pages
   ══════════════════════════════════════════════════════════════ */

.howto-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    list-style: none;
    padding: 0;
}

.howto-step {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
}

.howto-step__number {
    font-size: 1.25rem;
    font-weight: 600;
    min-width: 2rem;
    text-align: center;
    color: var(--muted);
}