/* components.css — utbytbara komponent-stilar, styrs av HUD:en via html[data-steg]/[data-kort].
   Default = inget attribut (nuvarande stil). Varje variant är en ren omstyling. */

/* ── Tjänster-steg (.svc-steps / .step / .step-n) ── */
/* ifyllda: fyllda teal-noder */
html[data-steg="ifyllda"] .step-n { background: var(--teal); color: #04110f; border-color: var(--teal); box-shadow: 0 0 18px rgba(79,227,212,.45); }
html[data-steg="ifyllda"] .step-n::after { border-color: rgba(4,17,15,.4); }

/* numrerad: stora ghost-nummer, ingen box, ingen linje */
html[data-steg="numrerad"] .svc-steps .line { display: none; }
html[data-steg="numrerad"] .step-n { border: 0; background: none; box-shadow: none; width: auto; height: auto; place-items: start; font-size: 2.6rem; color: rgba(79,227,212,.9); margin-bottom: .4rem; }
html[data-steg="numrerad"] .step-n::after { display: none; }

/* ram: varje steg som ett bordat kort */
html[data-steg="ram"] .svc-steps .line { display: none; }
html[data-steg="ram"] .step { border: 1px solid rgba(79,227,212,.24); border-radius: 12px; padding: 1.1rem 1rem; background: rgba(8,20,24,.45); }
html[data-steg="ram"] .step-n { width: 40px; height: 40px; font-size: .78rem; box-shadow: 0 0 0 5px rgba(8,20,24,.45); }
html[data-steg="ram"] .step-n::after { display: none; }

/* minimal: nummer + tunt streck under */
html[data-steg="minimal"] .svc-steps .line { display: none; }
html[data-steg="minimal"] .step-n { border: 0; border-bottom: 2px solid var(--teal); border-radius: 0; background: none; box-shadow: none; width: auto; height: auto; place-items: start; font-size: 1.1rem; color: var(--teal); padding: 0 0 .3rem; margin-bottom: .6rem; }
html[data-steg="minimal"] .step-n::after { display: none; }

/* ── Kort (.card) ── */
html[data-kort="glas"] .card { background: rgba(8,20,24,.32); backdrop-filter: blur(11px); border-color: rgba(79,227,212,.22); }
html[data-kort="ram"] .card { background: transparent; border: 1.5px solid var(--teal); }
html[data-kort="lyft"] .card { transition: transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .3s; }
html[data-kort="lyft"] .card:hover { transform: translateY(-8px); box-shadow: 0 26px 54px rgba(0,0,0,.45); }
html[data-kort="gradient"] .card { background: linear-gradient(160deg, rgba(12,34,36,.7), rgba(8,20,24,.28)); border-color: rgba(79,227,212,.28); }

/* ── Hero (.phero) ── */
html[data-hero="gradient"] .phero::before { background: radial-gradient(ellipse 90% 90% at 30% 20%, rgba(42,143,134,.35), transparent 60%), #050a0c; }
html[data-hero="mork"] .phero::after { background: linear-gradient(180deg, rgba(5,10,12,.8), rgba(5,10,12,.55) 40%, rgba(5,10,12,.96)); }