/* Stegviseren (ux-flyt A1), i variant A (mockups/a-skjema.html og a-live.html): stegene er små
   app-blomster bundet sammen med bølgestreken. Verdier fra felles/tokens.css.
   PC (fra 860 px): merke og navn. Mobil: små merker og én linje under. Navnene leses alltid av skjermlesere. */
.visuelt-skjult {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.stegviser { margin: var(--rom-4) 0 var(--rom-2); }
.stegviser-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-start;
}
.stegviser-steg {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--rom-2);
}
/* Bølgestreken mellom merkene. */
.stegviser-steg:not(:last-child)::after {
  content: ""; position: absolute; left: 1.625rem; right: 0.125rem; top: 0.5625rem; height: 0.5rem;
  background: url("../felles/bolge.89224db872a8.svg") center / 100% 100% no-repeat; opacity: 0.55;
}
.stegviser-merke {
  flex: none; display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; border-radius: 6px;
  box-shadow: inset 0 0 0 var(--strek) var(--farge-linje-sterk);
  font-family: var(--skrift-mono); font-size: 0.625rem; font-weight: 600; line-height: 1;
  color: var(--farge-tekst-dempet);
}
.stegviser-ferdig .stegviser-merke { background: var(--farge-marine); box-shadow: none; color: var(--farge-krem); }
.stegviser-gjeldende .stegviser-merke { background: var(--farge-honerod); box-shadow: none; color: var(--farge-krem); transform: rotate(-6deg); }
.stegviser-feil .stegviser-merke { background: var(--status-rod-ikon); box-shadow: none; color: var(--farge-krem); transform: none; }
/* Mobil: navnene bare for skjermlesere, linjen under for øyet. */
.stegviser-navn {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stegviser-linje {
  margin: var(--rom-3) 0 0;
  font-family: var(--skrift-mono); font-size: var(--skrift-str-mini); letter-spacing: 0.03em; color: var(--farge-tekst);
}

@media (min-width: 53.75rem) {
  .stegviser-steg:not(:last-child)::after { left: 2.375rem; right: 0.5rem; top: 0.875rem; }
  .stegviser-merke {
    width: 1.875rem; height: 1.875rem; border-radius: 9px;
    box-shadow: inset 0 0 0 2px var(--farge-marine);
    font-size: var(--skrift-str-mini); color: var(--farge-tekst);
  }
  .stegviser-senere .stegviser-merke { box-shadow: inset 0 0 0 var(--strek) var(--farge-linje-sterk); color: var(--farge-tekst-dempet); }
  .stegviser-navn {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
    font-size: var(--skrift-str-liten); font-weight: 700; color: var(--farge-tekst); line-height: 1.3;
  }
  .stegviser-senere .stegviser-navn { font-weight: 600; color: var(--farge-tekst-dempet); }
  .stegviser-linje { display: none; }
}

/* «Dette skjer etterpå» før sjekken er startet (ux-flyt A1). */
.etterpaa h2 { font-size: var(--skrift-str-h3); margin: 0 0 var(--rom-2); }
.etterpaa ol { margin: 0; padding-left: 1.25rem; }
.etterpaa li + li { margin-top: var(--rom-1); }

/* Kvitteringen (ux-flyt A4): nummer i mono og hønerødt. */
.kvittering-steg { list-style: none; counter-reset: kvittering; margin: var(--rom-4) 0; padding: 0; }
.kvittering-steg li {
  counter-increment: kvittering; display: flex; gap: var(--rom-3); align-items: baseline;
  padding: 0.6875rem 0; border-top: 1px dashed var(--farge-linje-sterk);
  font-weight: 700; color: var(--farge-tekst);
}
.kvittering-steg li:last-child { border-bottom: 1px dashed var(--farge-linje-sterk); }
.kvittering-steg li::before {
  content: counter(kvittering); flex: none; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 7px; background: var(--farge-marine); color: var(--farge-krem);
  font-family: var(--skrift-mono); font-size: 0.75rem; font-weight: 600;
}