/* ONBOARDINGEN — de skaerme der ligger mellem betalingen og det foerste opslag.
 *
 * Egen fil, ikke flere linjer i dashboard.html. Reglen staar i public/CLAUDE.md: nye, stoerre
 * UI-flader bor i deres egen fil, som brandinterview.js allerede goer.
 *
 * ── HVORFOR DEN ER LYS OG NEUTRAL, OG IKKE MOERK ─────────────────────────────────────────────
 *
 * Foerste udgave (18. august 2026) var moerk: `--maerke-ink` som bund, cremefarvet tekst, pink
 * accenter. Den matchede login-siden — og var forkert af to grunde, som begge staar skrevet i
 * `docs/holo-analyse/interface-loeft-spec.md`:
 *
 * 1. **§1.1, som specen selv kalder "den vigtigste indsigt i hele dokumentet":** HOLO har INGEN
 *    brandfarve i sit token-saet. Baggrund, kanter og tekst er fuldstaendig neutrale, og ALT
 *    farve kommer fra ét sted — gradienten. Det er dét der laeser som professionelt. En maettet
 *    baggrund goer det modsatte: den bruger opmaerksomheden foer indholdet faar den.
 *
 * 2. **Den flyttede "to brands"-problemet i stedet for at loese det.** Hele F6 handler om at
 *    kunden ikke skal skifte univers undervejs. En moerk onboarding der afleverer ind i en lys
 *    app er praecis det samme spring, bare et andet sted paa vejen.
 *
 * Onboardingen er en del af APPEN, ikke af salgssiden — den ender med at raekke kunden ind i
 * den. Derfor ser den ud som appen: neutral bund, naesten-sort tekst, og gradienten som det
 * ENESTE der baerer farve.
 *
 * ── RYTMEN ER HOLO'S, INDHOLDET ER VORES ────────────────────────────────────────────────────
 *
 * Ét valg pr. skaerm, meget luft, fremskridt i toppen, ventetiden brugt til noget, aerlig besked
 * naar det traekker ud. Den rytme er bare god. Det vi IKKE kopierer er hvad der staar i midten:
 * vores signatur er KVITTERINGEN — kunden kan se hvad deres ord blev til, og hvilken kilde det
 * fik. Se docs/plans/onboarding/01-produkt.md.
 *
 * ── FORMEN ER PORT 1'S, MAALT OG IKKE SKOENNET ──────────────────────────────────────────────
 *
 * Foerste udgave var venstrestillet med firkantede felter. Referencen — Port 1's mockup af de
 * seks skaerme — er noget andet, og forskellen er ikke smag:
 *
 *   CENTRERET. Hver skaerm har ÉT valg, og et centreret valg har ingen konkurrence. Venstrestillet
 *   laeser som en formular man skal igennem; centreret laeser som ét spoergsmaal ad gangen.
 *
 *   PILLER. Knap, felt, chip og tjekliste-raekke er 999px. Det er tilladt: `radius.css` siger
 *   selv at FORMER staar udenfor skalaen, og Port 1 gentager det — *"piller og ringe er former,
 *   ikke hjoerner"*. Kort og paneler bruger stadig --r-kort/--r-knap/--r-lille.
 *
 * ── TRE TING DER ER NEMME AT BRYDE ──────────────────────────────────────────────────────────
 *
 * 1. INGEN TAL I EN BORDER-RADIUS. Tre tokens: --r-kort, --r-knap, --r-lille (radius.css).
 *    Piller, ringe og spinnere er FORMER og staar udenfor skalaen — de maa gerne vaere 999px.
 * 2. PINK ER FYLD, ALDRIG TEKST. --maerke paa hvid er 3,1:1. Skal der staa pink tekst, er det
 *    --maerke-tekst. Tekst OVEN PAA pink er --maerke-ink, ikke hvid.
 * 3. GRADIENTEN BOR TO STEDER: den primaere knap og fremskridtsbjaelken. Ikke paa ringe, kort
 *    eller overskrifter — saa bliver den en regnbue. Det er ogsaa HOLO's disciplin: én
 *    definition, fem brugssteder.
 */

/* Selve laget. Samme slot som bootBesked's #bootovl, og med samme z-index: onboardingen ER
   en overtagelse af hele skaermen, ikke en modal over appen. Appen bag den er ikke brugbar
   endnu — der er ikke noget brand. */
.ob2 {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center;
  background: var(--papir);
  color: var(--ink);
  font: 400 16.5px/1.62 'Nunito Sans', system-ui, sans-serif;
  overflow-y: auto;
}
.ob2[hidden] { display: none; }

/* ── HALFTONE-RASTER. Brandets egen maade at lave en TONE paa. ───────────────────────────────
   Kopieret fra hjemmesidens <Halftone> (platform/hjemmeside/components/brand.tsx), som igen er
   brandbogens §7.2: toner laves med PRIKKER som i en zine, ikke med opacity eller stoej.
   Én farve ad gangen, 8-14 px, og en maske der fader den ud saa den ikke ligger som et taeppe.

   HVORFOR DEN ER HER: uden den laante onboardingen HOLO's neutrale kort-look, mens vores eget
   sprog stod paa hjemmesiden lige ved siden af — altsaa praecis den "to brands"-fejl F6 findes
   for at lukke, bare flyttet fra groen/pink til app/hjemmeside.

   HVORFOR DEN ER SVAGERE END PAA SIDEN (.07 mod .28): onboardingen er en ARBEJDSFLADE, ikke en
   forside. Rasteret skal kunne anes som en tekstur, ikke ses som et moenster — man skal kunne
   laese en tjekliste ovenpaa den i to minutter uden at blive traet. */
.ob2::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--maerke) 2px, transparent 2.2px);
  background-size: 15px 15px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  opacity: .07;
}
.ob2 > * { position: relative; z-index: 1; }

.ob2-top {
  width: 100%; max-width: 680px; padding: 26px 24px 0;
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.ob2-top img { width: 26px; height: 26px; }
.ob2-top b { font: 600 17px/1 'Poppins', system-ui, sans-serif; }
.ob2-trin { margin-left: auto; font-size: 12.5px; color: var(--muted); }

.ob2-midt {
  flex: 1 1 auto; width: 100%; max-width: 680px;
  padding: 34px 24px 60px;
  display: flex; flex-direction: column; justify-content: center;
}
#ob2-ind { display: flex; flex-direction: column; }
/* CENTRERET. Ét valg pr. skaerm, og et centreret valg har ingen konkurrence paa fladen. */
.ob2-skaerm { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ob2-skaerm[hidden] { display: none; }

/* ── Fremskridtsbjaelken. Den ENESTE traad der binder kaeden sammen ─────────────────────────
   Den staar paa hver skaerm, ogsaa paa kvitteringen foer login. Uden den er de seks skaerme
   seks steder man er havnet; med den er de ét forloeb man er undervejs i.

   EN PILLE INDE PAA SKAERMEN, ikke en stribe i kanten. En 3px stribe helt oppe i toppen laeser
   som en indlaesningsindikator — noget browseren goer. En pille med luft omkring laeser som
   fremdrift i et forloeb, altsaa som noget KUNDEN er i gang med. */
.ob2-bar {
  width: 100%; max-width: 620px; height: 5px; border-radius: 999px;
  background: var(--felt-dyb); overflow: hidden; margin: 0 auto 40px;
}
/* GUL -> PINK -> DYB PINK. Det gule er halvdelen af hvorfor bjaelken laeser som VORES og ikke
   som en vilkaarlig pink streg. Der staar ingen tekst paa den, saa den maa gerne vaere lys i
   venstre ende — se noten om de to gradienter i tokens.css. */
.ob2-bar > i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--maerke-grad-fremdrift);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* FORSKUDT SKYGGE. Dybde er en forskudt KOPI, ikke en blur — brandbogens §7.3, og det samme
   greb som hjemmesidens <Forskudt>. Forholdet er monogrammets throwie-skygge: ~5 % af hoejden,
   ned-hoejre.

   KUN PAA OVERSKRIFTER. Brandbogen forbyder det udtrykkeligt paa UI-tekst og knapper, hvor det
   goer teksten svaerere at laese — og en onboarding er fuld af begge dele. */
.ob2 h1 {
  font: 600 clamp(23px, 3vw, 31px)/1.16 'Poppins', system-ui, sans-serif;
  letter-spacing: -.018em;
  margin: 0 0 10px;
  text-shadow: .045em .045em 0 var(--maerke-3);
}
.ob2-sub { margin: 0 0 26px; color: var(--ink-2); font-size: 16px; max-width: 46ch; }
/* Underteksten skifter naar en fase traekker ud. Overgangen skal SES, ellers ligner det at
   teksten altid har staaet der — og saa er aerligheden gratis. */
.ob2-sub.langsom { color: var(--status-obs); }

/* ── Felt. En PILLE, sunket. ─────────────────────────────────────────────────────────────── */
.ob2-felt {
  width: 100%; max-width: 480px; padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--sunk);
  color: var(--ink); font: 400 15.5px/1.4 'Nunito Sans', system-ui, sans-serif;
  text-align: center;
}
.ob2-felt::placeholder { color: var(--muted); }
.ob2-felt:focus {
  outline: none;
  border-color: var(--maerke-tekst); background: var(--cream);
  /* Gloeden om feltet. Den siger at appen lytter, og den laeser levende paa en maade en
     bar kant ikke goer. Opaciteten er lav — se tokens.css. */
  box-shadow: var(--gloed-maerke);
}

/* Kvitteringen under feltet. Den er hele grunden til at /api/tjek-side findes: kunden faar at
   vide om vi kan naa siden FOER de venter to minutter paa at finde ud af at de tastede forkert. */
.ob2-kvit {
  margin: 12px 0 0; font-size: 13.5px; min-height: 20px; font-weight: 600;
  display: flex; gap: 7px; align-items: center; justify-content: center;
  max-width: 480px;
}
.ob2-kvit.ok { color: var(--status-ok-dyb); }
.ob2-kvit.fejl { color: var(--status-fejl); }
.ob2-kvit.vent { color: var(--muted); font-weight: 400; }
/* Vaertsskiftet er ikke en fejl og ikke en succes — det er en OPLYSNING kunden skal naa at sige
   fra over for. Den gule --maerke-2 er for lys paa lys bund til tekst; --status-obs findes
   netop af den grund. */
.ob2-kvit.obs { color: var(--status-obs); }

/* ── Knapper. PILLER. ────────────────────────────────────────────────────────────────────── */
.ob2-knapper { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.ob2-knap {
  font: 600 14.5px/1 'Poppins', system-ui, sans-serif;
  border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: filter .15s, box-shadow .15s;
}
/* PRIMAER: gradienten pink -> dyb pink, INK-tekst, og den INDVENDIGE hvide gloed der goer
   knappen "glasset" (interface-loeft-spec §1.3, maalt i HOLO's app).

   TEKSTEN ER INK, IKKE HVID — og det er MAALT paa den faerdige knap 19. august 2026, ikke
   regnet paa tokens. Her stod foer en kommentar der paastod at hvid holdt, fordi "gradienten er
   moerkest netop hvor teksten staar". Begge led var forkerte:

     · Gradienten er 96deg, saa den er LYSEST i venstre ende — praecis hvor teksten begynder.
     · `--maerke-glas` lyser hele fladen op indefra, saa selv det moerkeste punkt bliver lysere
       end tokenvaerdien antyder.

   Maalt paa den rigtige knap (14,5 px/600, saa kravet er 4,5:1):

       punkt                    farve             hvid    ink
       tekstens venstre kant    rgb(250,73,137)   3,29    5,71
       midten                   rgb(231,52,120)   4,07    4,62
       hoejre kant              rgb(218,72,129)   4,02    4,68

   Hvid naar altsaa ALDRIG 4,5 — heller ikke i det moerkeste punkt. Ink holder hele vejen.
   Det er ogsaa husets regel i forvejen: pink er FYLD, og tekst oven paa pink er ink.
   Aendrer du gradienten, saa maal igen paa den faerdige knap — tokenvaerdierne alene loeser den. */
.ob2-knap.primaer {
  background: var(--maerke-grad); color: var(--maerke-ink);
  box-shadow: var(--maerke-glas);
}
.ob2-knap.primaer:hover:not(:disabled) { filter: brightness(1.04); box-shadow: var(--maerke-glas), var(--gloed-maerke); }

/* DEAKTIVERET er en TILSTAND, ikke en nedtoning. `opacity:.4` paa en pink gradient med lys tekst
   gav ~1,5:1 — den primaere handling saa ODELAGT ud, og fordi den sekundaere knap ved siden af
   stod paa fuld styrke (7,6:1), laeste skaermen som om det forkerte valg var det primaere.
   Nu er den en flad, rolig flise med tekst der stadig kan laeses (4,6:1): "ikke endnu", ikke "i stykker". */
.ob2-knap.primaer:disabled {
  background: var(--felt-dyb); color: var(--muted);
  box-shadow: none; cursor: not-allowed; filter: none;
}
.ob2-knap.sekundaer { background: var(--felt-dyb); color: var(--ink-2); }
.ob2-knap.sekundaer:hover { color: var(--ink); }

/* VEJEN UD. Tegnes KUN naar der er en app at vende tilbage til — altsaa konto nr. 2 og opefter;
   se `harAppBagved()` i onboard.js. En ny kunde uden brands har intet dashboard bagved, og et
   "Cancel" ville foere til en tom app: vaerre end ingen udvej.

   BEVIDST EN DISKRET TEKSTLINJE og ikke en tredje knap. Skaermen har allerede et primaert og et
   sekundaert valg, og en lige saa tung "Cancel" ville laese som det tredje rigtige svar frem for
   som fortrydelsen den er. Escape gooer det samme — den klikker paa netop den her knap. */
.ob2-fortryd {
  margin-top: 18px; background: none; border: 0; padding: 6px 10px; cursor: pointer;
  font: 600 13.5px/1 'Nunito Sans', system-ui, sans-serif;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.ob2-fortryd:hover { color: var(--ink-2); }

/* ── Tjeklisten paa /onboard/analyserer. Raekker som PILLER. ─────────────────────────────────
   FAERDIG er groen — status, ikke brand. Det er den ene ting paa hele skaermen der siger
   "det lykkedes", og den skal ikke se ud som alt det andet. */
.ob2-liste {
  list-style: none; margin: 0; padding: 0;
  width: 100%; max-width: 430px;
  display: flex; flex-direction: column; gap: 8px;
}
.ob2-linje {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px; border-radius: 999px;
  background: var(--sunk); text-align: left; font-size: 15px; color: var(--ink-2);
  transition: color .3s, background .3s;
}
.ob2-linje .ob2-ic { width: 16px; flex: 0 0 16px; text-align: center; font-size: 12px; }
.ob2-linje.venter { color: var(--muted); }
.ob2-linje.igang { border: 1px solid var(--line-2); background: var(--cream); color: var(--ink); }
.ob2-linje.igang .ob2-ic::before {
  content: ''; display: block; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--maerke); border-right-color: transparent;
  animation: ob2snur .8s linear infinite;
}
@keyframes ob2snur { to { transform: rotate(360deg); } }
.ob2-linje.faerdig { background: var(--status-ok-svag); color: var(--status-ok-dyb); font-weight: 600; }
/* SPRUNGET er ikke det samme som faerdig, og det skal kunne ses. Kortet og uddybningen er
   begge valgfri — de koster bredden og nuancen, ikke identiteten — men at vise dem som
   afkrydsede ville vaere en loegn om hvad vi ved om kunden. */
.ob2-linje.sprunget { background: var(--status-obs-svag); color: var(--status-obs); }
.ob2-note { font-size: 12px; margin-left: auto; opacity: .8; }

/* ── Den gatede aktiveringsliste paa /onboard/faerdig. ÉT kort, ikke fem. ───────────────────
   Fem loese kort laeser som fem valg. Ét kort med fem raekker laeser som ÉN liste med ét naeste
   skridt — hvilket er praecis hvad den er. */
.ob2-akt {
  list-style: none; margin: 0; padding: 8px;
  width: 100%; max-width: 430px; text-align: left;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: var(--r-kort); box-shadow: var(--gloed-1);
}
.ob2-akt li {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; border-radius: var(--r-knap); font-size: 14.5px;
}
.ob2-akt .ob2-ic { width: 18px; flex: 0 0 18px; text-align: center; }
/* GENNEMSTREGET. Et flueben siger "det gik godt"; en overstregning siger "det er overstaaet" —
   og det er dét de to foerste raekker ER. De skal ikke konkurrere med det naeste skridt. */
.ob2-akt li.gjort { color: var(--muted); text-decoration: line-through; }
.ob2-akt li.gjort .ob2-ic { color: var(--status-ok); text-decoration: none; }
.ob2-akt li.aktiv { border: 1.5px solid var(--maerke-tekst); font-weight: 700; }
.ob2-akt li.aktiv .ob2-ic { color: var(--maerke-tekst); }
/* HAENGELAASENE ER AEGTE. Man kan ikke forbinde en kanal foer der er noget at udgive. Derfor
   kan listen blive liggende paa forsiden bagefter uden at vaere pynt. */
.ob2-akt li.laast { color: var(--muted); }
.ob2-akt .ob2-hvorfor { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Designnoten under en skaerm — den bruges af fejl-tilstanden til at sige hvad man goer. */
.ob2-notekort {
  margin-top: 18px; padding: 15px 18px; max-width: 520px;
  background: var(--felt-dyb); border-radius: var(--r-knap);
  font-size: 14.5px; color: var(--ink-2); text-align: left;
}
.ob2-notekort b { color: var(--ink); font-weight: 700; }

/* Figurernes egne regler bor i figurer.css — de bruges ogsaa uden for onboardingen
   (den tomme liste i biblioteket). Placeringen i DENNE flade staar herunder. */
.ob2-skaerm .fig { margin: 0 0 20px; }

@media (max-width: 620px) {
  .ob2-midt { justify-content: flex-start; padding-top: 24px; }
}

/* Laasen arver linjens farve (se laasIkon() i onboard.js). Den skal staa paa TEKSTENS
   grundlinje, ikke midt i raekkens hoejde — ellers "svaever" den over ordet ved siden af. */
.ob2-laas { vertical-align: -1px; opacity: .75; }
.ob2-akt li.laast .ob2-ic { color: var(--muted); }