/* ═══════════════════════════════════════════════════════════════════════════
   STEGDEMON — steg 2 (offerten) och steg 3 (leveransen) i "Så här fungerar det"

   INGET VÄRDE HÄR ÄR PÅHITTAT. Varje färg, storlek, radie och avstånd är
   hämtat ur något som redan står i repot, och varje sådant lån är noterat i
   sin regel med källan. Facit är formulärdemot i steg 1 (.formdemo/.fdm-* i
   index.html): de tre demona sitter i samma medieyta och ska vara omöjliga
   att tidsbestämma mot varandra.

   TRE LÅNEKÄLLOR, I DEN HÄR ORDNINGEN:
     1. Sajtens tokens (:root i index.html)      färg, linje, yta
     2. .formdemo/.fdm-* (index.html)            kortet, typskalan, radierna
     3. .sk-* (css/systemskarm.css)              radgeometrin i steg 3

   VARFÖR INTE .sk RAKT AV I STEG 3. Radkomponenterna där är byggda i em mot
   .sk:s egen containerbas och målar med --sk-*, som bara finns deklarerade på
   .sk självt. Lyfts en .sk-rad ut ur sin container tappar den både skalan och
   färgerna. Geometrin är därför kopierad hit och målad med sajtens tokens;
   varje sådan översättning står utskriven i regeln.

   KONTRAST. All text här ligger på #fff och klarar 4,5:1. Den gröna
   #62d39a som formulärdemot använder till text (.fdm-bekr b) ger 1,86:1 och
   är därför INTE ärvd hit — steg 3 använder #15803d (5,02:1), som redan
   finns i repot som --sk-gron. Se listan i slutet av filen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Det gemensamma kortet ─────────────────────────────────────────────────
   Samma yta som .formdemo (index.html): #fff, 1px var(--line), radie 12px,
   padding 1rem 1.1rem, skuggan 0 14px 40px -18px rgba(42,85,200,.28).
   .fscen ger redan insetet på 10px, alltså samma marginal som .formdemo har
   via margin:10px. Kortet fyller scenen och behöver ingen egen marginal. */
.stegkort {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;                                    /* .formdemo */
  border: 1px solid var(--line);                       /* .formdemo */
  border-radius: 12px;                                 /* .formdemo */
  padding: 1rem 1.1rem;                                /* .formdemo */
  box-shadow: 0 14px 40px -18px rgba(42, 85, 200, .28);/* .formdemo */
  text-align: left;
  overflow: hidden;
}
/* .fscen centrerar sitt innehåll för de gamla 1440x900-ytorna. Korten är
   absolut placerade och bryr sig inte, men flexen sätter annars en
   min-height på scenen som stör mätningen på mobil. */
.fscen--kort { display: block; }

/* Etikettraden: .fd-top/.fd-t i index.html, oförändrad. */
.sd-top { display: flex; align-items: center; gap: .35rem; margin-bottom: .8rem; }
.sd-t {
  font-family: 'JetBrains Mono', monospace;            /* .fd-top .fd-t */
  font-size: .56rem;                                   /* .fd-top .fd-t */
  letter-spacing: .2em;                                /* .fd-top .fd-t */
  color: var(--faint);                                 /* .fd-top .fd-t, 5,52:1 */
}

/* Reveal-grundformen. Samma greppning som .fdm-bekr i formulärdemot:
   opacity + translateY(8px), --d-base/--ease-solutra ur css/motion.css.
   Bara opacity och transform, alltså inget som tvingar omlayout. */
.sd-in {
  opacity: 0;
  transform: translateY(8px);                          /* .fdm-bekr */
  transition: opacity var(--d-base) var(--ease-solutra),
              transform var(--d-base) var(--ease-solutra);
}
.sd-in.syns { opacity: 1; transform: none; }

/* ══ STEG 2 — OFFERTEN ═════════════════════════════════════════════════════
   Fynden från mötet landar ett i taget, summeras, och blir en plan. Ordningen
   ÄR argumentet: offerten är kundens egna siffror, inte en prislista. */

/* Mottagaren. Storlekarna är .fdm-tack b/small, som har samma roll i
   formulärdemots bokningsvy: ett namn med en underrad. */
.od-mott { margin-bottom: .6rem; }
.od-mott b {
  display: block;
  font-size: .8rem;                                    /* .fdm-tack b */
  color: var(--text);                                  /* .fdm-tack b, 15,9:1 */
  line-height: 1.3;                                    /* .fdm-tack b */
}
.od-mott small {
  display: block;
  font-size: .64rem;                                   /* .fdm-tack small */
  color: var(--muted);                                 /* .fdm-tack small, 8,49:1 */
}

/* Fyndraderna. Ytan och ramen är .fdm-in:s (fältet i formulärdemot), radien
   8px likaså. Höjden får komma ur innehållet i stället för .fdm-in:s fasta
   30px: raderna ska tåla en längre översättning utan att texten klipps.
   De tar dessutom överskottshöjden och centrerar sig i den. Kortet är lika
   högt som stegspalten bredvid (align-items:stretch på .fungerar), alltså
   ~120 px högre än innehållet på skrivbordet. Utan det här hamnade hela
   slacken i ETT hål mellan summan och planen. */
.od-fynd { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; gap: .35rem; }
.od-rad {
  display: flex;
  align-items: center;
  gap: .5rem;                                          /* .fdm-tid-gap, .sk-rad */
  padding: .36rem .55rem;                              /* .fdm-tid .36rem, .fdm-in .55rem */
  background: rgba(42, 85, 200, .04);                  /* .fdm-in */
  border: 1px solid var(--line);                       /* .fdm-in */
  border-radius: 8px;                                  /* .fdm-in */
}
.od-rad-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .68rem;                                   /* .fdm-in */
  color: var(--text);                                  /* .fdm-in, 15,9:1 */
  overflow-wrap: anywhere;                             /* .sk-rad-t b */
}
.od-rad-h {
  flex: 0 0 auto;
  font-family: 'JetBrains Mono', monospace;            /* .fdm-tid */
  font-size: .64rem;                                   /* .fdm-tid */
  color: var(--muted);                                 /* 8,49:1 */
}

/* Summan. Den enda ytan i kortet som får accentfärg, precis som .fdm-tid.vald
   är det enda färgfyllda i formulärdemot. */
.od-sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .42rem;                                   /* .sk-kap-r gap .42em */
  margin-top: .55rem;                                  /* .fdm/.fdm-rad gap */
  padding-top: .55rem;
  border-top: 1px solid rgba(42, 85, 200, .08);        /* .fdm-bekr */
}
.od-sum-e {
  flex: 1 1 100%;
  font-size: .6rem;                                    /* .fdm-falt label */
  font-weight: 600;                                    /* .fdm-falt label */
  color: var(--muted);                                 /* .fdm-falt label, 8,49:1 */
  margin-bottom: .1rem;
}
/* Talet. .sk-k b är 1,68em mot .sk:s bas på ~11 px i glaset, alltså ~18,5 px.
   1,15rem = 18,4 px är samma optiska storlek uttryckt i sajtens rotenhet. */
.od-sum-v {
  font-family: 'Montserrat', system-ui, sans-serif;    /* .sk-k b, sajtens display */
  font-size: 1.15rem;
  font-weight: 700;                                    /* .sk-k b */
  letter-spacing: -.02em;                              /* .sk-k b */
  color: var(--g2);                                    /* :root, 6,50:1 */
  font-variant-numeric: tabular-nums;                  /* talet räknas upp */
}
.od-sum-en { font-size: .68rem; font-weight: 600; color: var(--text); }
.od-sum-f {
  flex: 1 1 100%;
  font-size: .62rem;                                   /* .fdm-bekr small */
  color: var(--muted);                                 /* 8,49:1 */
}

/* Uppföljningsplanen. Etiketten är .fdm-dagr (veckodagsraden i bokningsvyn);
   stegen är .fdm-tid:s chipsyta med radie 7px. */
.od-plan { padding-top: .6rem; }                       /* .fdm-bekr padding-top */
.od-plan-e {
  font-family: 'JetBrains Mono', monospace;            /* .fdm-dagr */
  font-size: .56rem;                                   /* .fdm-dagr */
  letter-spacing: .16em;                               /* .fdm-dagr */
  text-transform: uppercase;                           /* .fdm-dagr */
  color: var(--faint);                                 /* .fdm-dagr, 5,52:1 */
  margin-bottom: .4rem;                                /* .fdm-dagr */
}
.od-steg-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.od-steg {
  display: flex;
  align-items: center;
  gap: .28rem;                                         /* .fdm-falt label */
  padding: .28rem .4rem;                               /* .fdm-falt label, .fdm-dagr */
  font-size: .62rem;                                   /* .fdm-bekr small */
  color: var(--text);                                  /* 15,9:1 */
  background: rgba(42, 85, 200, .03);                  /* .fdm-tid */
  border: 1px solid var(--line);                       /* .fdm-tid */
  border-radius: 7px;                                  /* .fdm-tid */
}
.od-steg i {
  flex: 0 0 auto;
  /* .42em mot punktens egen textstorlek, alltså exakt .sk-aktiv i:s mått
     uttryckt så att det följer med om texten ändras. */
  width: .42em; height: .42em;                         /* .sk-aktiv i */
  border-radius: 50%;                                  /* .sk-aktiv i */
  background: var(--g2);                               /* :root */
}
.od-fot {
  margin-top: .5rem;
  font-size: .62rem;                                   /* .fdm-bekr small */
  color: var(--muted);                                 /* 8,49:1 */
}

/* ══ STEG 3 — LEVERANSEN ═══════════════════════════════════════════════════
   Fyra veckor fyller en mätare, och systemets delar går från "byggs" till
   "i drift" i takt med den. Timelinen och föremålet är samma animation. */

/* Mätaren är .fsteg-mät ur index.html, samma som ligger under stegknapparna:
   3 px hög, rgba(42,85,200,.06) i botten, var(--grad) i fyllningen. Den fylls
   med scaleX från vänster, alltså exakt samma grepp som originalet. */
.ld-matare {
  position: relative;
  height: 3px;                                         /* .fsteg-mät */
  background: rgba(42, 85, 200, .06);                  /* .fsteg-mät */
  overflow: hidden;
  margin-bottom: .28rem;                               /* .fdm-falt label */
}
.ld-matare i {
  display: block;
  height: 100%;
  background: var(--grad);                             /* .fsteg-mät i */
  transform: scaleX(0);
  transform-origin: left center;                       /* .fsteg-mät i */
  transition: transform var(--d-slow) var(--ease-solutra);
}
.ld-veckor {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;                                          /* .fdm-kal */
  margin-bottom: .75rem;                               /* .fdm-bokning gap */
}
.ld-v {
  font-family: 'JetBrains Mono', monospace;            /* .fdm-dagr */
  font-size: .56rem;                                   /* .fdm-dagr */
  letter-spacing: .16em;                               /* .fdm-dagr */
  text-transform: uppercase;                           /* .fdm-dagr */
  color: var(--faint);                                 /* .fdm-dagr, 5,52:1 */
  transition: color var(--d-quick) var(--ease-solutra);
}
/* Aktiv vecka: samma skifte som .fdm-in.fokus gör, alltså mörkare text i
   stället för en ny färg. --text är redan filens mörkaste ton. */
.ld-v.pa { color: var(--text); }                       /* 15,9:1 */

/* Modulraderna. Geometrin är .sk-rad + .sk-ik + .sk-rad-t ur systemskarm.css,
   översatt från .sk:s em-skala till samma px/rem som formulärdemot använder:
     .sk-ik   1,85em mot ~11 px bas = ~20 px   →  22px, samma ordning som
                                                  .fdm-tack-ic:s 26px-bricka
     .sk-ik   radie .5em (~5,5 px)             →  7px, .fdm-tid:s radie
   Färgerna är .sk-ik:s egna, som redan är byggda av sajtens accent. */
/* Samma sak som .od-fynd: listan äter överskottshöjden i stället för att
   lämna ett hål ovanför slutraden. gap är golvet, space-evenly fördelar
   resten, och på en trång mobil faller den tillbaka på just gapet. */
.ld-lista { display: flex; flex-direction: column; justify-content: space-evenly;
  flex: 1 1 auto; gap: .28rem; }
.ld-rad {
  display: flex;
  align-items: center;
  gap: .5rem;                                          /* .sk-rad */
  padding: .28rem 0;                                   /* .fdm-falt label */
}
.ld-ik {
  flex: 0 0 auto;
  width: 26px; height: 26px;                           /* .fdm-tack-ic */
  display: grid;
  place-items: center;                                 /* .sk-ik */
  border-radius: 7px;                                  /* .fdm-tid */
  border: 1px solid rgba(47, 109, 240, .28);           /* .sk-ik */
  background: rgba(47, 109, 240, .12);                 /* .sk-ik */
  color: #2f5fd0;                                      /* .sk-ik (ikon, ej text) */
  opacity: .45;
  transition: opacity var(--d-base) var(--ease-solutra);
}
.ld-ik svg { width: 13px; height: 13px; }              /* .fdm-bock 13px */
.ld-rad.klar .ld-ik { opacity: 1; }
.ld-rad-t { flex: 1 1 auto; min-width: 0; }
.ld-rad-t b {
  display: block;
  font-size: .68rem;                                   /* .fdm-in */
  font-weight: 600;                                    /* .sk-rad-t b */
  color: var(--text);                                  /* 15,9:1 */
  overflow-wrap: anywhere;                             /* .sk-rad-t b */
}
.ld-rad-t small {
  display: block;
  font-size: .62rem;                                   /* .fdm-bekr small */
  color: var(--muted);                                 /* 8,49:1 */
}
/* Statusbrickan är .sk-aktiv: punkt + text i --sk-gron. Färgen är hämtad
   därifrån och inte från --motion-gron (#62d39a), som ger 1,86:1 som text. */
.ld-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .35rem;                                         /* .sk-aktiv */
  font-size: .62rem;                                   /* .fdm-bekr small */
  color: #15803d;                                      /* --sk-gron, 5,02:1 */
  /* Brickan ligger på plats hela tiden och bara tonar fram: bytte den text
     eller bredd hade de fyra raderna hoppat i sidled när modulen blev klar. */
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-solutra);
}
.ld-status i {
  width: .42em; height: .42em;                         /* .sk-aktiv i */
  border-radius: 50%;                                  /* .sk-aktiv i */
  background: currentColor;                            /* .sk-aktiv i */
}
.ld-rad.klar .ld-status { opacity: 1; }

/* Slutraden: samma avslutsyta som .fdm-bekr i formulärdemot. */
.ld-fot {
  margin-top: auto;
  padding-top: .6rem;                                  /* .fdm-bekr */
  border-top: 1px solid rgba(42, 85, 200, .08);        /* .fdm-bekr */
}
.ld-fot b {
  display: block;
  font-size: .72rem;                                   /* .fdm-bekr b */
  color: #15803d;                                      /* --sk-gron, 5,02:1 */
}
.ld-fot small {
  display: block;
  font-size: .62rem;                                   /* .fdm-bekr small */
  color: var(--muted);                                 /* 8,49:1 */
  margin-top: .15rem;                                  /* .fdm-bekr small */
}

/* ── Mobil ────────────────────────────────────────────────────────────────
   Samma brytpunkt som stegsektionen (960 px), inte .sk:s 760. Medieytan blir
   full spaltbredd och höjden sätts av formulärdemot i steg 1, så korten här
   får inte bli högre än det. Åtgärden är färre rader, inte mindre text:
   .fdm-* håller sin storlek på mobil och det ska de här också. */
@media (max-width: 960px) {
  /* MEDIEYTAN RESERVERAR PLATS FÖR SIN HÖGSTA SCEN, INTE FÖR SIN FÖRSTA.
     Under 960 px går .fvideo > div ur sitt absoluta läge, och då är det
     formulärdemot i steg 1 — den enda scenen som ligger i flödet — som
     bestämmer ytans höjd. Scenerna 2 och 3 är absoluta och kan inte trycka
     tillbaka. Uppmätt vid 360, 390, 480, 700 och 959 px ger formuläret
     konstant 329 px medan offertkortet behöver 407 med sina fyra fyndrader
     och leveranskortet 339, och .fscen klipper mellanskillnaden.
     Reservationen sitter på WRAPPERN (.fvideo > div), inte på .fvideo:
     scenerna är absoluta och mäter mot närmaste positionerade förfader, och
     det är wrappern med position:relative. En min-height på .fvideo växer
     bara ytterlådan medan wrappern står kvar på sitt innehåll, alltså exakt
     lika klippta scener som förut. Uppmätt igen efter den missen.
     429 px = det högsta kortets 407 + scenens inset 2x10 + ramen 2x1.
     Formulärdemot är flex:1 och sträcker sig utan att något flyttar.
     Ändras innehållet i något kort ska siffran mätas om.
     .fungerar-prefixet är specificiteten, inte en avgränsning: sidans
     inbäddade <style> står EFTER den här filen, så en ensam .fvideo (0-1-0)
     förlorar källordningen mot reglerna där. 0-2-0 vinner alltid. */
  .fungerar .fvideo > div { min-height: 429px; }

  /* Ingen egen mobiltypografi och inga egna mobilmellanrum: .fdm-* håller
     sina mått på alla bredder och det gör korten här också. Höjden som
     behövs tas ur reservationen ovan i stället för ur luften mellan
     raderna, så ett utklippt kort ser likadant ut oavsett skärm. */
}

/* Riktigt smala telefoner. Under 360 px bryter modulrubrikerna i steg 3 en
   rad extra var, och 429 px räcker då inte: uppmätt vid 320 px behöver
   offertkortet 455 px. Egen brytpunkt i stället för att lägga på 48 px
   överallt, som hade gett en halvtom yta på varje telefon som faktiskt
   säljs i dag. */
@media (max-width: 359px) {
  .fungerar .fvideo > div { min-height: 477px; }
}

/* ── Reducerad rörelse ────────────────────────────────────────────────────
   Slutbilden direkt. JS sätter samma klasser utan tidsaxel; här stängs bara
   övergångarna av så ingenting glider på plats. */
@media (prefers-reduced-motion: reduce) {
  .sd-in, .ld-matare i, .ld-ik, .ld-status, .ld-v { transition: none; }
}