/* SKAB-FORSIDEN — trin 0 i Create, hvor kunden vælger vej.
 *
 * HVORFOR DEN BLEV BYGGET OM: de tre valg laa som `.b-optcard` — den samme lille flise som
 * billedtilstanden paa trin 2 — oppe i venstre hjoerne. De fyldte cirka en fjerdedel af
 * skaermen, og resten stod tom. Det er den FOERSTE flade i Create og det eneste valg paa den;
 * den skal baere siden i stedet for at ligge i hjoernet af den. Maalt 5. august 2026.
 *
 * Formen er laant fra Perplexitys download-kort (21st.dev "download-options-section"): tre lige
 * store kasser, en scene der svaever, og en knap i bunden. Selve komponenten kunne ikke bruges —
 * den er React + Tailwind og henter sine baggrunde fra freepik og imagekit — saa "gradient-
 * billedet" er en CSS-vask, og scenerne er inline-SVG tegnet i husets streg. Intet eksternt.
 *
 * TRE TING DER IKKE ER PYNT:
 *
 * 1. KORTET ER EN <button>, ikke en <div onclick>. Den gamle flise kunne kun rammes med musen:
 *    ingen tab-stop, intet fokus, ingen Enter. Det er tre valg og der er ingen anden vej frem
 *    i Create.
 * 2. INTET KORT ER MARKERET PAA FORHAAND. Den gamle flade tegnede produkt-kortet groent, fordi
 *    `BLD.flowMode` STARTER paa 'product'. Det var ikke et valg kunden havde truffet — kortet
 *    saa valgt ud paa en skaerm hvis eneste formaal er at faa ham til at vaelge.
 * 3. KNAPPEN I BUNDEN SIGER HVAD DER SKER, ikke "vaelg". "Vælg produkter" / "Skriv emnet" er
 *    navnet paa det trin man lander paa, saa kortet lover det samme som det leverer.
 *
 * Filen er scopet til `#view-build` hele vejen. Klassepraefikset er `sv-` (Skab-Vaelger) og ikke
 * `b-`, saa den her flade kan bygges om uden at trin 1-4 flytter sig.
 */

/* Toppen ("Create" + underrubrikken) er FOLDET VAEK paa denne ene flade, ikke bare foldet ind.
   Forsiden har sin egen overskrift, og "Create / Fire trin fra frø til færdigt opslag" oven over
   "Hvad skal du lave? / Vælg vejen" er fire linjer indledning foer det foerste valg. Menuen til
   venstre siger i forvejen at man staar i Create. Klassen saettes af bldRenderStepper(). */
#view-build.forside .b-top { display:none; }

/* Fladen fylder trinnets krop og centrerer sig lodret. Paa en hoej skaerm bliver kortene ikke
   uendeligt hoeje (se max-height paa gitteret) — de bliver staaende midt i billedet.
   Trinnets krop gøres til en flex-soejle her og ikke `min-height:100%` paa fladen: kroppen faar
   sin hoejde af flexboxen ovenover, og en procent-hoejde mod den kolapser til auto i det
   oejeblik hoejden ikke er definit. Saa ville centreringen bare holde op med at virke. */
#view-build #b_step0 .b-step-body { display:flex; flex-direction:column; }
#view-build .sv-flade {
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(8px,2vh,22px) 0 6px;
}

#view-build .sv-hoved { flex:none; text-align:center; margin:0 0 clamp(18px,3.2vh,34px); }
#view-build .sv-h1 {
  font-family:'Poppins',sans-serif; font-size:clamp(25px,2.7vw,33px); font-weight:600;
  color:var(--ink); margin:0; letter-spacing:-.012em; line-height:1.15;
}
#view-build .sv-sub {
  margin:9px auto 0; max-width:50ch; font-size:14px; line-height:1.55; color:var(--muted);
}

/* max-height er ikke en tilfaeldig graense: uden den bliver kortene 900px hoeje paa en stor
   skaerm, og saa er scenen alene om at fylde hullet. min-height holder dem store nok paa en
   lav skaerm til at teksten staar under scenen og ikke ved siden af den. */
/* auto-fit og ikke repeat(3): der er FIRE flows nu (photoshoot kom til), og et fast tretal lod
   det fjerde kort falde alene ned paa sin egen raekke i en tredjedels bredde. */
#view-build .sv-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;
  width:100%; max-width:1280px; margin:0 auto;
  flex:1 1 auto; min-height:clamp(330px,50vh,480px); max-height:560px;
}

#view-build .sv-kort {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:24px 22px 20px; border:1px solid var(--line); border-radius: var(--r-kort); background:#fff;
  overflow:hidden; cursor:pointer; text-align:center; font:inherit; color:var(--ink);
  box-shadow:0 1px 2px rgba(16,21,17,.04);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .2s;
}

/* VASKEN. Perplexity-kortet lagde et gradient-BILLEDE bag indholdet; her er det to farvestop
   i en radial. ::before frem for background paa kortet selv, saa den kan skaleres for sig ved
   hover uden at traekke teksten med. */
#view-build .sv-kort::before {
  content:''; position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background:radial-gradient(118% 88% at 50% 0%, var(--sv-t1) 0%, var(--sv-t2) 44%, #fff 76%);
  opacity:.72; transition:opacity .32s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
#view-build .sv-kort > * { position:relative; z-index:1; }

/* Hvert flow har sin egen tone. Forskellen er lille med vilje — den skal kunne SKELNES naar de
   staar ved siden af hinanden, ikke laeses som tre forskellige produkter.
   TONERNE ER BRANDETS TREKLANG (pink/cyan/gul fra tokens.css), fortyndet — de groenne var en
   rest fra det gamle system. Og tonen FOELGER MED IND: samme farve ligger som vask bag flowets
   egne skaerme (b-wrap-vasken, hi_flade, ps_flade), saa klikket ind ikke lander i et andet
   produkt. Skifter du en tone her, saa skift vasken med. */
#view-build .sv-kort[data-f="product"]    { --sv-t1:#FBDFEC; --sv-t2:#FDF2F7; }
#view-build .sv-kort[data-f="topic"]      { --sv-t1:#D8F3FA; --sv-t2:#EFFAFD; }
#view-build .sv-kort[data-f="tekst"]      { --sv-t1:#E6E1FA; --sv-t2:#F4F2FD; }
#view-build .sv-kort[data-f="photoshoot"] { --sv-t1:#FAEFCB; --sv-t2:#FDF9EA; }
/* ads MANGLEDE sin tone (fundet 31. august 2026): ::before-gradienten stod med en udefineret
   variabel og tegnede ingenting. Tonen er vaskens egen pink (ads.css, rgba(255,77,141)) —
   fortyndet som de andre, og en anelse dybere end product saa de to kan skelnes. */
#view-build .sv-kort[data-f="ads"]        { --sv-t1:#FBD7E7; --sv-t2:#FDEFF6; }
#view-build .sv-kort[data-f="plan"]       { --sv-t1:#EAECE9; --sv-t2:#F6F7F6; }

#view-build .sv-kort:not(.snart):hover {
  transform:translateY(-5px); border-color:rgba(255,77,141,.38);
  box-shadow:0 30px 56px -28px rgba(10,38,22,.42), 0 4px 12px -8px rgba(10,38,22,.16);
}
#view-build .sv-kort:not(.snart):hover::before { opacity:1; transform:scale(1.07); }
#view-build .sv-kort:focus-visible { outline:2px solid var(--maerke); outline-offset:3px; }

/* ── Scenen ─────────────────────────────────────────────────────────────────────────────── */

/* To lag bevaegelse, ikke ét: HELE scenen svaever (svSvaev her), og enkelte dele INDE i tegningen
   svaever i deres eget tempo (.flyd/.flyd2 nedenfor). Det er forskellen der giver dybde — koerer
   alt i takt, ligner det ét billede der vipper. */
#view-build .sv-scene {
  position:relative; flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:center;
  animation:svSvaev 5.6s ease-in-out infinite;
}
#view-build .sv-kort:nth-child(2) .sv-scene { animation-delay:-1.9s; }
#view-build .sv-kort:nth-child(3) .sv-scene { animation-delay:-3.5s; }
@keyframes svSvaev { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* Skaleringen ved hover ligger paa <svg>, ikke paa .sv-scene: en animation og en transition paa
   det SAMME transform kan ikke deles, og animationen vinder. */
/* SVG'EN SKAL FITTE SIN KASSE, og det er dens eget viewBox der skal goere det — ikke CSS'ens
   boksmodel (rettet 21. september 2026). Foer stod der `width:100%` + `height:auto` +
   `max-height:100%`: bredden gav hoejden, og loftet blev ikke haandhaevet, saa paa et kort der
   er lavere end tegningen er hoej, tegnede svg'en sig NED over titlen. Stregtegningen laa bag
   teksten, og det lignede en fejl frem for et kort. Det sker praecis naar kortene staar paa TO
   raekker (syv flows goer det), for saa er hver celle det halve.
   `height:100%` alene var ikke nok: i en flex-boks uden definit hoejde falder procenten tilbage
   til auto, og saa var vi tilbage ved bredden. `position:absolute; inset:0` giver derimod
   ALTID en definit kasse, og viewBox'ens default `preserveAspectRatio: meet` skalerer
   tegningen ned i den uden at strække den. Den er saa stor kassen tillader, og aldrig stoerre.
   `overflow:visible` bliver: `.flyd`/`.flyd2` svaever et par pixel uden for viewBox'en, og det
   er meningen. */
#view-build .sv-scene svg {
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
#view-build .sv-kort:not(.snart):hover .sv-scene svg { transform:scale(1.05); }

/* Stregen i tegningerne saettes HER og ikke som attributter paa hvert element: scenerne bor i
   B_FLOW_META i dashboard.html, og de skal ikke baere husets farver rundt i en streng. */
#view-build .sv-scene .k  { fill:#fff; stroke:rgba(15,21,17,.14); }   /* kasse */
#view-build .sv-scene .fk { fill:#FDEEF4; stroke:rgba(255,77,141,.42); } /* felt-kasse */
#view-build .sv-scene .f  { fill:#F7E9F0; stroke:none; }              /* felt */
#view-build .sv-scene .s  { fill:#E9E7E1; stroke:none; }              /* skelet-linje */
#view-build .sv-scene .l  { stroke:rgba(15,21,17,.14); fill:none; }   /* løs streg */
#view-build .sv-scene .g  { stroke:#FF4D8D; fill:none; }
#view-build .sv-scene .gf { fill:#FF4D8D; stroke:none; }

#view-build .sv-scene .flyd  { animation:svFlyd  3.7s ease-in-out infinite; }
#view-build .sv-scene .flyd2 { animation:svFlyd2 4.6s ease-in-out infinite; }
@keyframes svFlyd  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes svFlyd2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}  }

/* ── Tekst og knap ──────────────────────────────────────────────────────────────────────── */

#view-build .sv-tx { flex:none; display:flex; flex-direction:column; gap:7px; align-items:center; }
#view-build .sv-titel {
  font-family:'Poppins',sans-serif; font-size:19.5px; font-weight:600; color:var(--ink); line-height:1.2;
}
/* Ingen max-width: kortet er selv maalet. En snaevrere spalte end kortet braekker teksten til
   tre linjer med ét ord paa den sidste. text-wrap:balance jaevner de linjer der bliver.
   min-height paa to linjer bor paa den INDRE <span> og ikke paa .sv-tekst: den ydre er blevet
   det gitter der folder teksten ud (se hover-blokken nedenfor), og en min-height dér ville
   holde raekken aaben og goere hele foldningen virkningsloes. Paa de flader hvor teksten altid
   staar — touch og under 1000px — goer den stadig sit gamle arbejde og holder titlerne paa
   samme hoejde. */
#view-build .sv-tekst {
  display:grid; font-size:13px; line-height:1.55; color:var(--muted); text-wrap:balance;
}
#view-build .sv-tekst > span { min-height:calc(2 * 1.55em); }

/* BESKRIVELSEN VISES FOERST VED HOVER (21. september 2026, bestilt af Jonas). I ro staar der kun
   titlen: seks kort med tre linjer broedtekst hver goer forsiden til en vaeg af tekst, og
   teksten laa oven i den tegning der skal baere kortet. Forklaringen er der stadig — den kommer
   naar musen spoerger efter den.
   Kun bag `hover:hover` OG over 1000px: paa en touch-skaerm findes hover ikke, og under 1000px
   ligger kortet ned som en raekke med scenen til venstre — dér ville en skjult beskrivelse bare
   efterlade et hul ved siden af titlen. Begge steder staar teksten som foer.
   `grid-template-rows:0fr -> 1fr` frem for height/max-height: den animerer til indholdets EGEN
   hoejde uden et gaettet pixeltal, og den indre <span> skal baere `overflow:hidden`, ellers
   flyder teksten ud af den kollapsede raekke. Kortets samlede hoejde staar stille — gitterets
   raekke maaler dem, og scenen ovenover giver plads efter. */
@media (hover:hover) and (pointer:fine) and (min-width:1001px) {
  #view-build .sv-tekst {
    grid-template-rows:0fr; opacity:0;
    transition:grid-template-rows .26s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
  }
  #view-build .sv-tekst > span { overflow:hidden; min-height:0; }
  #view-build .sv-kort:hover .sv-tekst,
  #view-build .sv-kort:focus-visible .sv-tekst { grid-template-rows:1fr; opacity:1; }
}

/* En <span>, ikke en <button>: hele kortet ER knappen, og en knap i en knap er ugyldig markup.
   Den er der for at sige hvor klikket foerer hen — ikke for at vaere det eneste klikbare. */
#view-build .sv-cta {
  flex:none; margin-top:2px; min-height:38px; display:inline-flex; align-items:center; gap:7px;
  padding:0 18px; border-radius: var(--r-knap); background:var(--felt); color:var(--ink);
  font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  transition:background .22s ease, color .22s ease, box-shadow .22s ease;
}
#view-build .sv-cta svg { width:15px; height:15px; transition:transform .26s cubic-bezier(.2,.7,.3,1); }
#view-build .sv-kort:hover .sv-cta, #view-build .sv-kort:focus-visible .sv-cta {
  background:var(--skov-900); color:#fff; box-shadow:0 10px 22px -12px rgba(6,14,9,.6);
}
#view-build .sv-kort:hover .sv-cta svg { transform:translateX(3px); }

/* KOMMER SNART. Kortet staar der fordi det viser hvor Create er paa vej hen, men det er en
   <button disabled>: den kan hverken klikkes eller tabbes til. En flise der tager et tab-stop
   og saa ikke goer noget er vaerre end ingen flise. */
#view-build .sv-kort.snart { cursor:default; }
#view-build .sv-kort.snart .sv-scene, #view-build .sv-kort.snart .sv-tx { opacity:.55; }
#view-build .sv-kort.snart .sv-scene { animation:none; }
/* min-height deles med .sv-cta, saa bundraekken staar paa linje paa tvaers af de tre kort.
   Uden den sidder "kommer snart" et par pixel hoejere end de to knapper ved siden af. */
#view-build .sv-snart {
  flex:none; margin-top:2px; min-height:38px; display:inline-flex; align-items:center;
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); background:var(--felt); border-radius: var(--r-lille); padding:0 16px;
}

/* ── Ankomst ────────────────────────────────────────────────────────────────────────────── */

/* backwards og ikke forwards: efter animationen skal kortet tilbage paa sin egen transform, saa
   hover-loeftet ovenfor stadig virker. Den koerer igen naar bldRenderFlows() tegner forfra —
   altsaa ved hver frisk runde, ikke kun ved sideindlaesning. */
#view-build .sv-kort { animation:svRejs .52s cubic-bezier(.2,.7,.3,1) backwards; }
#view-build .sv-kort:nth-child(2) { animation-delay:.07s; }
#view-build .sv-kort:nth-child(3) { animation-delay:.14s; }
@keyframes svRejs { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
  #view-build .sv-kort, #view-build .sv-scene,
  #view-build .sv-scene .flyd, #view-build .sv-scene .flyd2 { animation:none; }
  #view-build .sv-kort:not(.snart):hover { transform:none; }
  /* Beskrivelsen SKIFTER stadig ved hover — den skal bare ikke glide. En bruger der har bedt om
     mindre bevaegelse, skal have teksten med det samme og ikke en foldning at se paa. */
  #view-build .sv-tekst { transition:none; }
}

/* ── Smalle skaerme ─────────────────────────────────────────────────────────────────────── */

/* Under 1000px staar tre kolonner ikke laengere som tre kort men som tre spalter. Saa laegger
   kortene sig ned i stedet: scenen til venstre, tekst og knap i en spalte til hoejre.
   `flex:none` + `align-content:start` paa gitteret er ikke pynt — uden dem straekker de tre
   raekker sig ud i den hoejde fladen har, og et kort paa 300px med tre linjer tekst i venstre
   side er ikke et kort, det er et hul. Hoejden skal komme fra indholdet her. */
@media (max-width:1000px) {
  #view-build .sv-flade { justify-content:flex-start; }
  #view-build .sv-grid {
    grid-template-columns:1fr; gap:14px; max-width:660px;
    flex:0 0 auto; min-height:0; max-height:none; align-content:start;
  }
  /* Grid frem for flex-raekke: knappen skal UNDER teksten og ikke ude til hoejre for den —
     ellers deler scenen, teksten og knappen kortets bredde i tre, og teksten faar ~190px. */
  #view-build .sv-kort {
    display:grid; grid-template-columns:104px minmax(0,1fr);
    grid-template-areas:"scene tx" "scene cta";
    align-items:center; justify-items:start; text-align:left; gap:9px 20px; padding:20px 22px;
  }
  #view-build .sv-scene { grid-area:scene; }
  #view-build .sv-scene svg { position:static; height:auto; width:100%; max-width:104px; }
  #view-build .sv-tx { grid-area:tx; align-items:flex-start; }
  #view-build .sv-tekst { text-wrap:pretty; }
  #view-build .sv-cta, #view-build .sv-snart { grid-area:cta; margin-top:0; }
}
@media (max-width:600px) {
  #view-build .sv-kort { grid-template-columns:76px minmax(0,1fr); gap:9px 16px; padding:18px; }
  #view-build .sv-scene svg { max-width:76px; }
}