/* ==========================================================================
   Onboarding v3 — "Lad os sætte det op sammen" (ob3-live, produktionsudgave)
   Genbruger demo-ob3'ens kort-stil med tavlens design-tokens (--kort, --dyb,
   --accent osv. fra tavlen.css). Tilføjet: allerede-forbundet-tilstand,
   samtykkebokse (samme ord og stil som appens egne samtykkefelter) og
   søgechips til skolesøgningen.
   ========================================================================== */
#ob3{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;
  justify-content:center;font-family:inherit}
@media(min-width:760px){#ob3{align-items:center}}
#ob3 .ob3-slør{position:absolute;inset:0;background:rgba(15,42,46,.44);
  backdrop-filter:blur(3px);animation:ob3Slør .4s ease}
@keyframes ob3Slør{from{opacity:0}}
#ob3 .ob3-kort{position:relative;width:min(560px,100%);max-height:92vh;
  overflow-y:auto;background:var(--kort,#FFFFFF);border-radius:26px 26px 0 0;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(10,30,34,.35);
  animation:ob3Op .55s cubic-bezier(.34,1.56,.64,1)}
@media(min-width:760px){#ob3 .ob3-kort{border-radius:26px}}
@keyframes ob3Op{from{opacity:0;transform:translateY(46px) scale(.98)}}
@media (prefers-reduced-motion:reduce){
  #ob3 .ob3-kort,#ob3 .ob3-slør{animation:none}}

/* top: fremskridt + afslut */
.ob3-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ob3-fremskridt{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.ob3-rail{flex:1;height:5px;border-radius:99px;background:var(--linje,#E2EAEA);
  overflow:hidden}
.ob3-rail i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--accent,#17767E),var(--dyb,#16565C));
  transition:width .6s cubic-bezier(.25,.46,.45,.94)}
.ob3-trin-tekst{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:10.5px;color:var(--svag,#6E8487);white-space:nowrap}
.ob3-luk{border:0;background:none;color:var(--svag);font-size:12px;
  padding:8px;border-radius:10px;cursor:pointer}
.ob3-luk:hover{background:var(--linje-let,#EEF3F3)}

/* velkomst */
.ob3-velkomst{text-align:center;padding:18px 6px 6px}
.ob3-ikon{width:58px;height:58px;margin:0 auto 14px;border-radius:18px;
  background:linear-gradient(135deg,var(--dyb,#16565C),var(--accent,#17767E));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(22,86,92,.5)}
.ob3-ikon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ob3 h2{font-size:23px;letter-spacing:-.01em;margin-bottom:8px}
.ob3 .ob3-led{color:var(--daemp,#52686B);font-size:14.5px;line-height:1.55;
  max-width:44ch;margin:0 auto}
.ob3 .ob3-tryg{margin:14px auto 0;display:flex;gap:8px;justify-content:center;
  align-items:center;font-size:11.5px;color:var(--svag)}
.ob3 .ob3-tryg svg{width:13px;height:13px;stroke:var(--advarsel-staerk,#B4690E);
  fill:none;stroke-width:2}

/* kildelisten */
.ob3-kilder{display:grid;gap:10px;margin-top:16px}
.ob3-kilde{display:flex;gap:13px;align-items:center;text-align:left;width:100%;
  background:var(--kort,#fff);border:2px solid var(--linje,#E2EAEA);
  border-radius:18px;padding:13px 14px;cursor:pointer;
  transition:border-color .25s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.ob3-kilde:hover{transform:translateY(-1px)}
.ob3-kilde.valgt{border-color:var(--dyb,#16565C)}
.ob3-kilde .ob3-k-ikon{width:42px;height:42px;flex:none;border-radius:13px;
  background:var(--linje-let,#EEF3F3);display:flex;align-items:center;
  justify-content:center}
.ob3-kilde.valgt .ob3-k-ikon{background:rgba(22,86,92,.09)}
.ob3-kilde .ob3-k-ikon svg{width:22px;height:22px;stroke:var(--dyb,#16565C);
  fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ob3-kilde .ob3-k-navn{font-weight:650;font-size:15px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.ob3-kilde .ob3-k-giver{font-size:12.5px;color:var(--daemp);margin-top:2px;
  line-height:1.45}
.ob3-kilde .ob3-k-maerke{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:#8a6a24;background:rgba(202,161,74,.13);border:1px solid rgba(202,161,74,.35);
  border-radius:999px;padding:2px 8px}
.ob3-kilde .ob3-k-maerke.grøn{color:#3c5f43;background:rgba(94,130,99,.11);
  border-color:rgba(94,130,99,.35)}
.ob3-flueboks{margin-left:auto;flex:none;width:25px;height:25px;border-radius:9px;
  border:2px solid var(--linje,#E2EAEA);background:#fff;display:flex;
  align-items:center;justify-content:center;
  transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.ob3-kilde.valgt .ob3-flueboks{background:var(--dyb,#16565C);
  border-color:var(--dyb,#16565C)}
.ob3-flueboks svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;
  stroke-dashoffset:20;transition:stroke-dashoffset .35s .05s}
.ob3-kilde.valgt .ob3-flueboks svg{stroke-dashoffset:0}

/* allerede forbundet: rolig, låst, tydelig */
.ob3-kilde.ob3-forbundet{cursor:default;background:var(--linje-let,#EEF3F3);
  border-color:var(--linje,#E2EAEA);transform:none}
.ob3-kilde.ob3-forbundet .ob3-k-ikon{background:rgba(23,118,126,.1)}
.ob3-kilde.ob3-forbundet .ob3-k-ikon svg{stroke:var(--accent,#17767E)}
.ob3-kilde.ob3-forbundet .ob3-k-maerke.laast{color:#3c5f43;
  background:rgba(94,130,99,.13);border-color:rgba(94,130,99,.4)}
.ob3-kilde.ob3-forbundet .ob3-flueboks{background:var(--accent,#17767E);
  border-color:var(--accent,#17767E)}
.ob3-kilde.ob3-forbundet .ob3-flueboks svg{stroke-dashoffset:0}

/* guide-trin */
.ob3-trin{display:none}
.ob3-trin.aktiv{display:block;animation:ob3Trin .45s cubic-bezier(.25,.46,.45,.94)}
@keyframes ob3Trin{from{opacity:0;transform:translateX(18px)}}
.ob3-trin h3{font-size:19px;margin:10px 0 4px;letter-spacing:-.01em}
.ob3-trin .ob3-for-hvad{font-size:13px;color:var(--svag);margin-bottom:12px}
.ob3-brug-liste{list-style:none;margin:8px 0 4px;display:grid;
  gap:9px}
.ob3-brug-liste li{display:flex;gap:11px;align-items:flex-start;
  background:var(--kort,#fff);border:1px solid var(--linje,#E2EAEA);
  border-radius:14px;padding:11px 13px;font-size:14px;line-height:1.5}
.ob3-brug-liste li .ob3-tal{width:23px;height:23px;flex:none;border-radius:50%;
  background:var(--dyb,#16565C);color:#fff;font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.ob3-hvorfor{margin-top:12px;font-size:12.5px;color:var(--daemp);line-height:1.55;
  background:rgba(202,161,74,.1);border:1px solid rgba(202,161,74,.3);
  border-radius:12px;padding:10px 12px}
.ob3-hvorfor b{color:var(--blaek,#172A2D)}
.ob3-fejl-boks{margin-top:12px;font-size:13px;color:#7A2418;line-height:1.55;
  background:#FCE9E6;border:1.5px solid rgba(226,96,79,.45);border-radius:12px;
  padding:10px 12px}

/* samtykke — samme opbygning og stil som appens egne samtykkefelter
   (tavlen.css .samtykke-felt), scoped til ob3 */
.ob3-samtykke{margin:14px 0 4px;padding:12px 13px;
  border:1.5px solid var(--linje,#E2EAEA);border-radius:12px;
  background:rgba(0,0,0,.02)}
.ob3-samtykke label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ob3-samtykke input[type="checkbox"]{margin-top:3px;width:18px;height:18px;flex:none;
  accent-color:var(--dyb,#16565C)}
.ob3-samtykke b{font-size:13.5px;color:var(--blaek,#172A2D)}
.ob3-samtykke .ob3-samtykke-tekst{display:block;margin-top:5px;font-size:12.5px;
  opacity:.72;line-height:1.5;color:var(--blaek,#172A2D)}

/* formular */
.ob3-felt{margin-top:12px}
.ob3-felt label{display:block;font-size:12.5px;font-weight:650;margin-bottom:5px}
.ob3-felt input,.ob3-felt textarea{width:100%;font-size:16px;padding:13px 14px;
  border-radius:13px;border:2px solid var(--linje,#E2EAEA);
  background:var(--kort,#fff);color:var(--blaek,#172A2D);font-family:inherit}
.ob3-felt textarea{min-height:84px;resize:vertical;font-size:14px;line-height:1.5}
.ob3-felt input:focus,.ob3-felt textarea:focus{outline:0;
  border-color:var(--accent,#17767E)}
.ob3-felt .ob3-hjælp{font-size:11.5px;color:var(--svag);margin-top:4px}
.ob3-sikker{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:11.5px;
  color:var(--svag)}
.ob3-sikker svg{width:14px;height:14px;stroke:var(--advarsel-staerk,#B4690E);
  fill:none;stroke-width:2;flex:none}
.ob3-advarsel{margin-top:12px;border-radius:12px;padding:10px 12px;font-size:12.5px;
  line-height:1.5;color:#7a4a12;background:rgba(226,150,60,.12);
  border:1px solid rgba(226,150,60,.4)}

/* søgechips (skolesøgning) */
.ob3-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ob3-chips .ob3-chip{border:1.5px solid var(--linje,#E2EAEA);border-radius:999px;
  background:var(--kort,#fff);padding:8px 13px;font-size:13px;cursor:pointer;
  color:var(--blaek,#172A2D)}
.ob3-chips .ob3-chip.valgt{background:var(--dyb,#16565C);border-color:var(--dyb,#16565C);
  color:#fff}
.ob3-chips .ob3-chip:disabled{opacity:.6;cursor:default}

/* prøver / succes */
.ob3-proever{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 8px}
.ob3-spinner{width:44px;height:44px;border-radius:50%;border:4px solid var(--linje);
  border-top-color:var(--dyb,#16565C);animation:ob3Spin .9s linear infinite}
@keyframes ob3Spin{to{transform:rotate(360deg)}}
.ob3-proever .ob3-proeve-tekst{margin-top:14px;font-size:14px;color:var(--daemp)}
.ob3-check{width:64px;height:64px}
.ob3-check circle{fill:none;stroke:var(--accent,#17767E);stroke-width:2.4;
  stroke-dasharray:180;stroke-dashoffset:180;
  animation:ob3Tegn .7s cubic-bezier(.25,.46,.45,.94) forwards}
.ob3-check path{fill:none;stroke:var(--accent,#17767E);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;
  stroke-dashoffset:40;
  animation:ob3Tegn .45s .5s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes ob3Tegn{to{stroke-dashoffset:0}}
.ob3-fundet{margin:10px auto 0;display:grid;gap:8px;max-width:340px;text-align:left}
.ob3-fundet .ob3-barn{display:flex;align-items:center;gap:10px;
  background:var(--kort,#fff);border:1px solid var(--linje);border-radius:13px;
  padding:10px 12px;font-size:14px;color:var(--blaek,#172A2D)}

/* knapper */
.ob3-knapper{display:flex;gap:10px;margin-top:20px;align-items:center}
.ob3-knap{border:0;border-radius:14px;padding:14px 20px;font-size:15px;
  font-weight:650;cursor:pointer;font-family:inherit;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.ob3-knap:active{transform:scale(.97)}
.ob3-knap.hoved{flex:1;background:var(--dyb,#16565C);color:#fff;
  box-shadow:0 8px 20px -8px rgba(22,86,92,.55)}
.ob3-knap.hoved:disabled{opacity:.45;cursor:default;box-shadow:none}
.ob3-knap.ghost{background:none;color:var(--svag);font-weight:500;font-size:13px;
  padding:12px 10px}
.ob3-knap.ghost:hover{color:var(--daemp)}

/* afslutning */
.ob3-opsummering{display:grid;gap:9px;margin-top:14px}
.ob3-sum{display:flex;gap:11px;align-items:center;background:var(--kort,#fff);
  border:1px solid var(--linje);border-radius:14px;padding:11px 13px;font-size:14px}
.ob3-sum .ob3-ok{width:26px;height:26px;flex:none;border-radius:50%;
  background:rgba(23,118,126,.12);display:flex;align-items:center;justify-content:center}
.ob3-sum .ob3-ok svg{width:13px;height:13px;stroke:var(--accent);stroke-width:3;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.ob3-sum .ob3-sum-giver{margin-left:auto;font-size:11.5px;color:var(--svag);
  text-align:right}
.ob3-invite{margin-top:14px;background:linear-gradient(135deg,rgba(22,86,92,.06),
  rgba(202,161,74,.08));border:1px solid var(--linje);border-radius:16px;
  padding:14px;text-align:center}
.ob3-invite .ob3-kode{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:21px;letter-spacing:3px;font-weight:700;color:var(--dyb);
  margin:8px 0 4px}
.ob3-invite p{font-size:12.5px;color:var(--daemp);line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .ob3-spinner{animation-duration:1.8s}
}