/* 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 {
  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. */
/* Bredden foelger kortet og ikke et fast tal: paa et kort der fylder en tredjedel af skaermen
   bliver en 215px-tegning et piktogram midt i et hul. Loftet er der kun saa den ikke braender
   igennem paa en meget bred skaerm. */
#view-build .sv-scene svg {
  width:100%; max-width:320px; height:auto; max-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 holder de tre titler paa samme hoejde: scenen ovenover er den der
   giver plads efter, saa en beskrivelse der fylder én linje mindre loefter hele kortets tekst. */
#view-build .sv-tekst {
  font-size:13px; line-height:1.55; color:var(--muted); text-wrap:balance;
  min-height:calc(2 * 1.55em);
}

/* 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; }
}

/* ── 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 { 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; }
}