/* ============================================================
   People's Clinic - onboarding-prototype
   Page-scoped styles. ÉN fil, ÉN kaskade, ingen dubletter.
   ------------------------------------------------------------
   design-system.css roeres ALDRIG. Alt herunder er scopet til
   .ob-flow (eller til prototypens egne demo-paneler) og bygger
   paa design-systemets tokens.

   RYTME - tre afstande i formularen, intet andet:
     --ob-blok   24px  mellem blokke
     --ob-inde   12px  inde i en blok
     --ob-naer    4px  label/hjaelpetekst til felt

   TEKST - fire niveauer, intet andet:
     --ob-vaerdi 16px  navy-900        det brugeren har skrevet
     --ob-label  14px  navy-400        hvad feltet hedder
     --ob-fin    13px  periwinkle-700  finetryk, hjaelp, samtykke
     --ob-anm    12px  periwinkle-700  vores egne anmaerkninger

   Filen er ordnet efter komponent. Hver komponent staar ÉT sted.
   ============================================================ */


/* ============================================================
   1. RYTME, SKALA OG LOKALE VAERDIER
   ============================================================ */

.ob-flow,
.ob-panel,
.ob-data {
  /* Tre afstande */
  --ob-blok: var(--space-6);
  --ob-inde: var(--space-3);
  --ob-naer: var(--space-1);

  /* Fire tekstniveauer */
  --ob-vaerdi: var(--text-lg);
  --ob-label: var(--text-base);
  --ob-fin: var(--text-sm);
  --ob-anm: var(--text-xs);

  /* Kolonnebredde. 520px er design-systemets egen .form-card max-width.
     Der findes ikke et bredde-token - vaerdien er hentet derfra, saa
     kort og skaermhoved deler praecis samme kolonne. */
  --ob-kolonne: 520px;

  /* Stregbredde paa felter og rammer. 1.5px er design-systemets egen
     vaerdi paa .form-card__field input. Der findes ikke et token. */
  --ob-streg: 1.5px;

  /* Afkrydsningsfelt. 18px er design-systemets egen vaerdi paa
     .form-card__radio input. Der findes ikke et token. */
  --ob-boks: 18px;

  /* Fokusring. Der findes ikke et outline-token; design-systemets
     --shadow-focus-ring er 12% alpha og forsvinder paa moerke flader. */
  --ob-fokus: 2px;

  /* Haarstreg til skillelinjer. Der findes ikke et token for 1px. */
  --ob-haar: 1px;

  /* Demo-chrome ligger uden for produktfladen og bruger en bredere
     bane end kolonnen. 960px findes ikke som token. */
  --ob-bane: 960px;
}


/* ============================================================
   2. GRUNDFLADE
   ============================================================ */

body.ob-body {
  background: var(--color-lavender-50);
  color: var(--color-navy-900);
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.ob-flow {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Fed tekst er 500 overalt. <strong> arver ellers browserens 700. */
.ob-flow strong,
.ob-flow b { font-weight: 500; }

/* Designsystemets check-list laeses som indhold - vaerdiniveau */
.ob-flow .check-list li { font-size: var(--ob-vaerdi); }

/* Én synlig fokusring paa alt interaktivt - knapper, links, felter,
   afkrydsningsfelter, radioknapper, faneblade. */
.ob-flow :focus-visible,
.ob-panel :focus-visible,
.ob-data :focus-visible {
  outline: var(--ob-fokus) solid var(--color-periwinkle-900);
  outline-offset: var(--space-1);
}


/* ============================================================
   3. DEMO-CHROME - fremdrift
   Den soerte topbjaelke er fjernet - vaerktoejerne bor nu i demo-panelet
   (tastaturgenvej D), saa siden ikke aabner med demo-udseende foerst.
   ============================================================ */

.ob-top {
  background: var(--color-white);
  border-bottom: var(--ob-haar) solid var(--color-lavender-300);
  padding: var(--space-4) var(--space-6);
}
.ob-top__inner {
  max-width: var(--ob-bane);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.ob-brand {
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-navy-900);
  letter-spacing: var(--track-tight);
}
.ob-partner {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--ob-fin);
  color: var(--color-navy-400);
}
.ob-partner strong {
  font-weight: 500;
  color: var(--color-navy-900);
}

.ob-progress { padding: var(--space-6) var(--space-6) 0; }
.ob-progress__inner {
  max-width: var(--ob-kolonne);
  margin-inline: auto;
}
.ob-progress__track {
  height: var(--space-1);
  background: var(--color-lavender-300);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.ob-progress__fill {
  height: 100%;
  background-image: var(--grad-btn-primary);
  border-radius: var(--radius-pill);
  transition: width var(--dur-slower) var(--ease-out);
}
.ob-progress__status {
  margin: var(--ob-inde) 0 0;
  font-size: var(--ob-anm);
  color: var(--color-periwinkle-700);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
}


/* ============================================================
   4. SKAERMSKAL - kolonnen alt flugter i
   ------------------------------------------------------------
   Rytmen i skallen bruger de samme tre afstande som kortet.
   Titel og lead er ÉN blok (--ob-inde). Alt andet er blokke
   (--ob-blok). Ingen komponent saetter egne margener ind i skallen.
   ============================================================ */

.ob-main {
  flex: 1;
  padding: var(--ob-blok) var(--space-6) var(--space-20);
}

.ob-shell {
  max-width: var(--ob-kolonne);
  margin-inline: auto;
}
.ob-shell > * { margin: 0; }
.ob-shell > * + * { margin-top: var(--ob-blok); }
.ob-shell > h1 + .ob-shell__lead { margin-top: var(--ob-inde); }

.ob-shell h1 {
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  font-weight: 500;
  letter-spacing: var(--track-tight);
  color: var(--color-navy-900);
}
.ob-shell__lead {
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}


/* ============================================================
   5. KORTET
   ------------------------------------------------------------
   Kortets gap ER blokafstanden. Ingen komponent i kortet maa
   saette egen margin-top/bottom - saa ville rytmen skride.
   ============================================================ */

.ob-flow .form-card {
  max-width: var(--ob-kolonne);
  margin-inline: auto;
  padding: var(--space-8);
  /* Grundafstanden er FELT TIL FELT. Blokke loefter selv op til --ob-blok. */
  gap: var(--ob-inde);
}
.ob-flow .form-card > * { margin-block: 0; }

/* RYTMEREGEL - gaelder alle trin, ingen undtagelser:
     to felter i traek        --ob-inde   12px  (kortets gap)
     felt op mod en blok      --ob-blok   24px
     to blokke i traek        --ob-blok   24px
   En "blok" er alt der samler flere ting: feltgrupper, oversigter,
   afkrydsningsgrupper, aftaletekster og bunden. */
.ob-flow .form-card > .ob-fieldset,
.ob-flow .form-card > .ob-pladsblok,
.ob-flow .form-card > .ob-summary,
.ob-flow .form-card > .ob-tilvalg,
.ob-flow .form-card > .ob-proeve,
.ob-flow .form-card > .ob-details,
.ob-flow .form-card > .ob-agreement,
.ob-flow .form-card > .ob-info,
.ob-flow .form-card > .ob-partnerkode,
.ob-flow .form-card > .ob-bund,
.ob-flow .form-card > .ob-note {
  margin-top: calc(var(--ob-blok) - var(--ob-inde));
}
/* En blok som foerste element skal ikke loeftes. */
.ob-flow .form-card > *:first-child { margin-top: 0; }
/* Et felt lige efter en blok skal have blokafstand. */
.ob-flow .form-card > .ob-fieldset + .ob-field,
.ob-flow .form-card > .ob-pladsblok + .ob-field,
.ob-flow .form-card > .ob-summary + .ob-field,
.ob-flow .form-card > .ob-tilvalg + .ob-field {
  margin-top: calc(var(--ob-blok) - var(--ob-inde));
}

/* Todelt raekke - to felter i samme blok */
.ob-flow .form-card__row {
  gap: var(--ob-inde);
  align-items: start;
}

/* Blok med flere felter der hoerer sammen */
.ob-blok {
  display: flex;
  flex-direction: column;
  gap: var(--ob-inde);
}

/* Fieldset uden browser-krom */
.ob-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ob-inde);
}
.ob-legend {
  display: block;
  padding: 0;
  margin: 0;
  font-size: var(--ob-label);
  font-weight: 400;
  color: var(--color-navy-400);
  line-height: var(--lh-snug);
}
/* Label staar taettere paa sit felt end blokke staar paa hinanden */
.ob-legend + * { margin-top: calc(var(--ob-naer) - var(--ob-inde)); }

/* Overskrift over en liste (trin 0 og slutskaerm) */
.ob-group {
  font-size: var(--ob-label);
  font-weight: 400;
  color: var(--color-navy-400);
  line-height: var(--lh-snug);
}


/* ============================================================
   6. FELTER
   ------------------------------------------------------------
   Ét objekt pr. felt. Labelen ligger i placeholderen og er
   bevaret for skaermlaesere via aria-label i app.js.
   ============================================================ */

.ob-field {
  display: flex;
  flex-direction: column;
  gap: var(--ob-naer);
  min-width: 0;
}

/* .ob-f er kun en gennemsigtig baerer - selve boksen er inputtet */
.ob-flow .form-card .form-card__field.ob-f {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  gap: 0;
}

.ob-flow .form-card .form-card__field.ob-f input[type="text"],
.ob-flow .form-card .form-card__field.ob-f input[type="email"],
.ob-flow .form-card .form-card__field.ob-f input[type="tel"],
.ob-flow .form-card .form-card__field.ob-f select,
.ob-flow .form-card .form-card__field.ob-f textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--ob-vaerdi);
  line-height: var(--lh-snug);
  color: var(--color-navy-900);
  background: var(--color-lavender-50);
  border: var(--ob-streg) solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  /* 12/16 + 16px tekst = 46px hoejt felt. Over 44px touch-maal, og
     vaerditeksten holdes paa 16px: under 16px zoomer iOS Safari ind
     naar feltet faar fokus. */
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast),
              background var(--dur-fast),
              box-shadow var(--dur-fast);
}
.ob-flow .form-card .form-card__field.ob-f input:hover,
.ob-flow .form-card .form-card__field.ob-f select:hover,
.ob-flow .form-card .form-card__field.ob-f textarea:hover {
  border-color: var(--color-periwinkle-500);
}
.ob-flow .form-card .form-card__field.ob-f input:focus,
.ob-flow .form-card .form-card__field.ob-f select:focus,
.ob-flow .form-card .form-card__field.ob-f textarea:focus {
  background: var(--color-white);
  border-color: var(--color-periwinkle-900);
}

/* Placeholder er en label, ikke en vaerdi - derfor nedtonet */
.ob-flow .form-card .form-card__field.ob-f input::placeholder,
.ob-flow .form-card .form-card__field.ob-f textarea::placeholder {
  color: var(--color-periwinkle-700);
  opacity: 1;
}
.ob-flow .form-card .form-card__field.ob-f select.is-tom {
  color: var(--color-periwinkle-700);
}

/* Dropdown - chevron inde i feltet */
.ob-flow .form-card .form-card__field.ob-f--select {
  position: relative;
}
.ob-flow .form-card .form-card__field.ob-f--select select {
  appearance: none;
  background-image: none;
  cursor: pointer;
  padding-right: var(--space-12);
}
.ob-flow .form-card .form-card__field.ob-f--select::after {
  content: '';
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-3);
  height: var(--space-3);
  background: var(--color-navy-400);
  clip-path: polygon(50% 78%, 4% 22%, 16% 12%, 50% 56%, 84% 12%, 96% 22%);
  pointer-events: none;
}

/* Hjaelpetekst under feltet - flugter med feltets venstrekant */
.ob-f__hint {
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-periwinkle-700);
}

/* Fejltilstand */
.ob-field.is-error .ob-f input,
.ob-field.is-error .ob-f select,
.ob-field.is-error .ob-f textarea {
  border-color: var(--color-danger);
}
.ob-field.is-error .ob-f__hint { color: var(--color-danger); }


/* ============================================================
   7. VALG - radioknap/afkrydsning som kort
   ============================================================ */

.ob-choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ob-choices--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.ob-choice {
  display: grid;
  grid-template-columns: var(--ob-boks) 1fr;
  align-items: start;
  gap: var(--ob-inde);
  padding: var(--space-4);
  border: var(--ob-streg) solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.ob-choice:hover { border-color: var(--color-periwinkle-500); }
.ob-choice:has(input:checked) {
  border-color: var(--color-periwinkle-900);
  background: var(--color-lavender-50);
}
.ob-choice input {
  width: var(--ob-boks);
  height: var(--ob-boks);
  margin: 0;
  accent-color: var(--color-periwinkle-900);
  cursor: pointer;
  /* Optisk centrering paa titellinjen: halvdelen af forskellen
     mellem linjehoejden og boksen. */
  margin-block-start: calc((var(--ob-label) * var(--lh-snug) - var(--ob-boks)) / 2);
}
.ob-choice__body { min-width: 0; }
.ob-choice__title {
  display: block;
  font-size: var(--ob-label);
  line-height: var(--lh-snug);
  color: var(--color-navy-900);
  font-weight: 400;
}
.ob-choice:has(input:checked) .ob-choice__title { font-weight: 500; }
.ob-choice__hint {
  display: block;
  margin-top: var(--ob-naer);
  font-size: var(--ob-fin);
  line-height: var(--lh-snug);
  color: var(--color-periwinkle-700);
}
/* Uden hjaelpetekst er valget én linje - saa centreres hele raekken */
.ob-choice:not(:has(.ob-choice__hint)) { align-items: center; }
.ob-choice:not(:has(.ob-choice__hint)) input { margin-block-start: 0; }


/* ============================================================
   8. SAMTYKKE
   ------------------------------------------------------------
   Boksen sidder optisk paa FOERSTE tekstlinje, ogsaa naar
   teksten ombryder. Klikfladen er stoerre end boksen, men den
   ekstra hoejde traekkes ud af flowet igen, saa blokafstanden
   forbliver praecis --ob-blok.
   ============================================================ */

.ob-consent {
  display: grid;
  grid-template-columns: var(--ob-boks) 1fr;
  align-items: start;
  gap: var(--ob-inde);
  cursor: pointer;
  padding-block: var(--space-2);
  margin-block: calc(var(--space-2) * -1);
}
.ob-consent input {
  width: var(--ob-boks);
  height: var(--ob-boks);
  margin: 0;
  accent-color: var(--color-periwinkle-900);
  cursor: pointer;
  /* Optisk centrering paa foerste tekstlinje. */
  margin-block-start: calc((var(--ob-fin) * var(--lh-prose) - var(--ob-boks)) / 2);
}
.ob-consent__text {
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}
.ob-consent.is-error .ob-consent__text { color: var(--color-danger); }

/* --tight er den nedtonede variant - samme geometri, roligere farve */
.ob-consent--tight .ob-consent__text { color: var(--color-periwinkle-700); }


/* ============================================================
   9. ANTAL PLADSER - ét samlet felt
   ============================================================ */

.ob-stepper {
  display: grid;
  grid-template-columns: var(--space-14) 1fr var(--space-14);
  align-items: stretch;
  background: var(--color-lavender-50);
  border: var(--ob-streg) solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--dur-fast);
}
/* Fokusringen tegnes paa hele feltet, ikke paa de enkelte dele */
.ob-stepper:focus-within {
  border-color: var(--color-periwinkle-900);
  outline: var(--ob-fokus) solid var(--color-periwinkle-900);
  outline-offset: var(--space-1);
}
.ob-stepper :focus-visible { outline: none; }
.ob-stepper button {
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-navy-400);
  font-family: inherit;
  /* + og - er glyffer, ikke tekst. Derfor uden for de fire tekstniveauer. */
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ob-stepper button:hover:not(:disabled) {
  background: var(--color-lavender-300);
  color: var(--color-navy-900);
}
.ob-stepper button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ob-stepper input {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: 0;
  border-radius: 0;
  border-inline: var(--ob-streg) solid var(--color-lavender-700);
  padding: var(--space-3) var(--space-2);
  font-family: inherit;
  font-size: var(--ob-vaerdi);
  font-weight: 500;
  text-align: center;
  color: var(--color-navy-900);
}
.ob-stepper input:focus {
  outline: none;
  background: var(--color-white);
}


/* ============================================================
   10. INVITATIONER
   ============================================================ */

.ob-invites {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ob-invite {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ob-invite .ob-field { flex: 1; }
.ob-invite__fjern {
  flex: 0 0 auto;
  width: var(--space-10);
  height: var(--space-10);
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-navy-400);
  font-family: inherit;
  font-size: var(--ob-vaerdi);
  line-height: 1;
  border-radius: var(--radius-pill);
}
.ob-invite__fjern:hover {
  background: var(--color-lavender-100);
  color: var(--color-navy-900);
}

.ob-tilfoej {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ob-fin);
  color: var(--color-periwinkle-900);
  /* Klikfladen vokser uden at flytte rytmen */
  padding-block: var(--space-3);
  margin-block: calc(var(--space-3) * -1);
}
.ob-tilfoej::before {
  content: '+';
  font-size: var(--ob-vaerdi);
  line-height: 1;
}
.ob-tilfoej:hover { text-decoration: underline; }


/* ============================================================
   11. BEKRAEFTEDE OG LAASTE OPLYSNINGER
   ============================================================ */

.ob-locked {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ob-inde);
  background: var(--color-lavender-50);
  border: var(--ob-streg) solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.ob-locked__label {
  font-size: var(--ob-fin);
  color: var(--color-navy-400);
}
.ob-locked__value {
  font-size: var(--ob-vaerdi);
  font-weight: 500;
  color: var(--color-navy-900);
}
.ob-locked__link {
  margin-left: auto;
  font-family: inherit;
  font-size: var(--ob-fin);
  color: var(--color-periwinkle-900);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.ob-confirmed {
  display: flex;
  align-items: flex-start;
  gap: var(--ob-inde);
  background: var(--color-white);
  border: var(--ob-streg) solid var(--color-periwinkle-500);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.ob-confirmed__mark {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-periwinkle-900);
}
.ob-confirmed__mark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-white);
  clip-path: polygon(20% 52%, 32% 40%, 42% 50%, 68% 24%, 80% 36%, 42% 74%);
}
.ob-confirmed__body {
  flex: 1;
  min-width: 0;
}
.ob-confirmed__navn {
  display: block;
  font-size: var(--ob-vaerdi);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--color-navy-900);
}
.ob-confirmed__linje {
  display: block;
  margin-top: var(--ob-naer);
  font-size: var(--ob-fin);
  line-height: var(--lh-snug);
  color: var(--color-navy-400);
}
.ob-confirmed__ret {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ob-fin);
  color: var(--color-periwinkle-900);
  text-decoration: underline;
}


/* ============================================================
   12. ORDREOVERSIGT, AFTALE, OPLYSNING
   ============================================================ */

.ob-summary {
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}
.ob-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  font-size: var(--ob-fin);
  color: var(--color-navy-400);
}
.ob-summary__row span:last-child {
  color: var(--color-navy-900);
  text-align: right;
}
.ob-summary__row--total {
  border-top: var(--ob-haar) solid var(--color-lavender-700);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  font-size: var(--ob-vaerdi);
}
.ob-summary__row--total span,
.ob-summary__row--total span:last-child {
  color: var(--color-navy-900);
  font-weight: 500;
}
.ob-summary__note {
  margin: var(--ob-inde) 0 0;
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}

.ob-agreement {
  border: var(--ob-streg) solid var(--color-lavender-700);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  max-height: var(--space-30);
  overflow-y: auto;
  padding: var(--space-4);
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}
.ob-agreement h4 {
  font-size: var(--ob-label);
  font-weight: 500;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-2);
}
.ob-agreement p { margin: 0 0 var(--ob-inde); }
.ob-agreement p:last-child { margin-bottom: 0; }

.ob-info {
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}
.ob-info strong {
  color: var(--color-navy-900);
  font-weight: 500;
}
.ob-info a { color: var(--color-periwinkle-900); }

/* Proevelinjen - flowets vigtigste tryghedsbesked */
.ob-proeve {
  text-align: center;
  background: var(--color-lavender-50);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}
.ob-proeve strong {
  display: block;
  font-size: var(--ob-label);
  font-weight: 500;
  color: var(--color-navy-900);
}

/* Rolig linje - forklaring uden flade bagved */
.ob-linje {
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}
.ob-linje--rolig { color: var(--color-periwinkle-700); }


/* ============================================================
   13. ANMAERKNING - prototypens eget lag, ikke produktets
   ============================================================ */

.ob-note {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-left: var(--ob-inde);
  border-left: var(--ob-fokus) solid var(--color-periwinkle-500);
  font-size: var(--ob-anm);
  line-height: var(--lh-prose);
  color: var(--color-periwinkle-700);
}
.ob-note::before {
  content: 'OBS';
  flex: 0 0 auto;
  font-weight: 500;
  letter-spacing: var(--track-widest);
  color: var(--color-periwinkle-900);
}
body.ob-hide-notes .ob-note { display: none; }


/* ============================================================
   14. BUNDEN AF KORTET
   ------------------------------------------------------------
   Én tydelig vej frem, én stille vej tilbage. Ens paa ALLE trin:
   .ob-bund og .ob-actions (uden --inline) er samme komponent.
   ============================================================ */

.ob-bund,
.ob-actions:not(.ob-actions--inline) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ob-inde);
}
.ob-bund > .btn,
.ob-actions:not(.ob-actions--inline) > .btn {
  width: 100%;
  flex: none;
}
.ob-bund > .ob-underbutton,
.ob-actions:not(.ob-actions--inline) > .ob-underbutton {
  text-align: center;
}
.ob-bund > .ob-back,
.ob-actions:not(.ob-actions--inline) > .ob-back {
  align-self: center;
}

/* Inline-raekke - sekundaere knapper midt i et kort */
.ob-actions--inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ob-inde);
}
.ob-actions--inline > .btn { flex: 0 0 auto; }

/* Undertekst under knappen */
.ob-underbutton {
  margin: 0;
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
}

/* Tilbagelink og andre stille tekstknapper.
   Klikfladen er 44px+, men den ekstra hoejde traekkes ud af
   flowet igen, saa rytmen ikke skrider. */
.ob-back {
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
  text-decoration: underline;
  padding-block: var(--space-4);
  margin-block: calc(var(--space-4) * -1);
}
.ob-back:hover { color: var(--color-navy-900); }
.ob-back--venstre {
  align-self: flex-start;
  text-align: left;
}


/* ============================================================
   15. SAMMENFOLDET OPLYSNINGSPLIGT
   ============================================================ */

.ob-details {
  border-top: var(--ob-haar) solid var(--color-lavender-300);
  padding-top: var(--ob-inde);
}
.ob-details > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-periwinkle-700);
}
.ob-details > summary::-webkit-details-marker { display: none; }
.ob-details > summary::after {
  content: '';
  width: var(--space-3);
  height: var(--space-3);
  background: var(--color-navy-400);
  clip-path: polygon(50% 78%, 4% 22%, 16% 12%, 50% 56%, 84% 12%, 96% 22%);
  transition: transform var(--dur-fast);
}
.ob-details[open] > summary::after { transform: rotate(180deg); }
.ob-details p {
  margin: var(--ob-inde) 0 0;
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-periwinkle-700);
}

/* Under kortet - samme kolonne, centreret udloeser */
.ob-details--under {
  border: 0;
  padding: 0;
  max-width: var(--ob-kolonne);
  margin-inline: auto;
}
.ob-details--under > summary { justify-content: center; }


/* ============================================================
   16. SAERSKAERME
   ============================================================ */

/* Overlevering */
.ob-handoff {
  text-align: center;
  padding: var(--space-12) 0;
}
.ob-handoff__list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  text-align: left;
  display: inline-block;
}
.ob-handoff__list li {
  display: flex;
  align-items: center;
  gap: var(--ob-inde);
  padding: var(--ob-inde) 0;
  font-size: var(--ob-vaerdi);
  color: var(--color-periwinkle-700);
}
.ob-handoff__list li.is-done { color: var(--color-navy-900); }
.ob-handoff__dot {
  flex: 0 0 auto;
  width: var(--space-5);
  height: var(--space-5);
  border-radius: var(--radius-pill);
  border: var(--ob-streg) solid var(--color-lavender-700);
}
.ob-handoff__list li.is-done .ob-handoff__dot {
  background: var(--color-navy-900);
  border-color: var(--color-navy-900);
}

/* MitID-attrap */
.ob-mitid {
  background: var(--color-white);
  border: var(--ob-streg) solid var(--color-lavender-700);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--ob-blok);
}
.ob-mitid__frame {
  border: var(--ob-streg) dashed var(--color-periwinkle-500);
  border-radius: var(--radius-sm);
  padding: var(--space-8) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ob-inde);
}
.ob-mitid__frame > * { margin: 0; }
.ob-mitid__label {
  font-size: var(--ob-anm);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-900);
}
.ob-mitid > .btn { width: 100%; }

/* Kvittering */
.ob-receipt {
  background: var(--color-navy-900);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  color: var(--color-lavender-900);
}
.ob-receipt h2 {
  color: var(--color-white);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: var(--lh-heading);
  margin: 0 0 var(--ob-blok);
}
.ob-receipt dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ob-inde) var(--space-5);
  font-size: var(--ob-fin);
}
.ob-receipt dt { color: var(--color-periwinkle-500); }
.ob-receipt dd {
  margin: 0;
  color: var(--color-white);
  text-align: right;
}

/* Fejlopsummering */
.ob-errorsummary {
  border: var(--ob-streg) solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  padding: var(--space-4);
}
.ob-errorsummary h2 {
  font-size: var(--ob-label);
  font-weight: 500;
  color: var(--color-danger);
  margin: 0 0 var(--space-2);
}
.ob-errorsummary ul {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
}
.ob-errorsummary a { color: var(--color-danger); }


/* ============================================================
   17. DEMOPANELER - ligger uden for produktfladen
   ============================================================ */

.ob-panel {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: min(var(--space-30) * 3, 92vw);
  max-height: 100vh;
  overflow: auto;
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  transform: translateX(-101%);
  transition: transform var(--dur-slower) var(--ease-out);
  z-index: 60;
  padding: var(--space-5);
}
.ob-panel.is-open { transform: none; }
.ob-panel h2 {
  font-size: var(--ob-fin);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-navy-900);
  margin: 0 0 var(--space-4);
}
.ob-panel h3 {
  font-size: var(--ob-anm);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-periwinkle-900);
  margin: var(--space-5) 0 var(--space-2);
}
.ob-panel button.ob-state {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: var(--ob-fin);
  background: var(--color-lavender-50);
  border: var(--ob-haar) solid var(--color-lavender-300);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
  color: var(--color-navy-700);
}
.ob-panel button.ob-state:hover { border-color: var(--color-periwinkle-500); }
.ob-panel button.ob-state.is-active {
  background: var(--color-navy-900);
  color: var(--color-white);
  border-color: var(--color-navy-900);
}

.ob-questions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ob-questions li {
  font-size: var(--ob-fin);
  line-height: var(--lh-prose);
  color: var(--color-navy-400);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: var(--ob-fokus) solid var(--color-periwinkle-500);
  margin-bottom: var(--space-2);
}

.ob-data {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(var(--space-30) * 4, 92vw);
  background: var(--color-navy-900);
  color: var(--color-lavender-900);
  transform: translateX(101%);
  transition: transform var(--dur-slower) var(--ease-out);
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.ob-data.is-open { transform: none; }
.ob-data__head {
  display: flex;
  align-items: center;
  gap: var(--ob-inde);
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--ob-haar) solid var(--color-navy-700);
}
.ob-data__head h2 {
  margin: 0;
  font-size: var(--ob-fin);
  font-weight: 500;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-white);
}
.ob-data__close {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ob-vaerdi);
  line-height: 1;
  color: var(--color-periwinkle-500);
}
.ob-data__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--ob-inde) var(--space-5) 0;
}
.ob-data__tabs button {
  font: inherit;
  font-size: var(--ob-anm);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: var(--ob-fokus) solid transparent;
  color: var(--color-periwinkle-700);
  padding: var(--space-2);
  cursor: pointer;
}
.ob-data__tabs button[aria-selected="true"] {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}
.ob-data__body {
  flex: 1;
  overflow: auto;
  padding: var(--space-4) var(--space-5) var(--space-10);
}
.ob-data__body pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ob-anm);
  line-height: var(--lh-prose);
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-lavender-900);
}
.ob-data__body .k { color: var(--color-periwinkle-500); }
.ob-data__body .miss { color: var(--color-danger); }


/* ============================================================
   18. RESPONSIVT
   ------------------------------------------------------------
   Kolonnen beholder sin rytme. Kun kortets vandrette luft og
   de todelte raekker aendrer sig.
   ============================================================ */

@media (max-width: 640px) {
  .ob-top { padding: var(--ob-inde) var(--space-4); }
  .ob-progress { padding: var(--space-5) var(--space-4) 0; }
  .ob-main { padding: var(--ob-blok) var(--space-4) var(--space-16); }
  .ob-flow .form-card { padding: var(--ob-blok); }
  .ob-mitid { padding: var(--ob-blok); }
  .ob-receipt { padding: var(--space-5); }
  .ob-summary { padding: var(--space-4); }
}

@media (max-width: 520px) {
  .ob-choices--split { grid-template-columns: 1fr; }
}

/* ============================================================
   MØRK SKAL (2026-09-01)
   Samme navy-flade som /clinic-3-0. Kortene forbliver hvide og
   svaever ovenpaa, saa selve formularen beholder fuld laesbarhed
   og kontrast. Kun det der ligger DIREKTE paa baggrunden vendes.
   ============================================================ */
body.ob-body {
  background:
    radial-gradient(70% 55% at 72% 20%, color-mix(in srgb, var(--color-periwinkle-900) 30%, transparent) 0%, transparent 66%),
    linear-gradient(152deg, var(--color-navy-900) 0%, var(--color-navy-700) 54%, var(--color-navy-900) 100%);
  background-attachment: fixed;
}

/* Header og bundlogo ligger paa den moerke flade */
.ob-top { background: none; border-bottom: 0; }
.ob-brand { color: var(--color-white); }
.ob-partner { color: var(--color-lavender-100); }

/* Kun det der ligger DIREKTE paa den moerke flade vendes til lys tekst.
   Tidligere gjorde vi hele skallen lys og moerknede kortene igen - men
   hver ny lys flade vi glemte (fx fejlboksen) blev dermed ulaeselig.
   Direkte-boern-reglen kan ikke laekke ind i et kort. */
.ob-shell > h1, .ob-shell > h2, .ob-shell > p,
.ob-main > h1, .ob-main > h2, .ob-main > p { color: var(--color-white); }
.ob-shell > p, .ob-main > p { color: var(--color-lavender-100); }

/* Hjaelpelinjen ligger ogsaa direkte paa den moerke flade. */
.ob-hjaelp, .ob-hjaelp__tekst { color: var(--color-lavender-100); }
.ob-hjaelp__tekst strong { color: var(--color-white); }

/* Logoet er flyttet til bunden. Toppen staar tom, saa foerste indtryk
   er selve spoergsmaalet. */
.ob-top { min-height: 0; padding-block: var(--space-3); }

/* "I dag 0 kr." er flowets vigtigste tal - groen og stoerre. */
.ob-summary__row--total { align-items: baseline; }
.ob-summary__row--total > span:last-child {
  color: var(--color-success);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Fremdrift */
.ob-progress__track { background: var(--alpha-white-15); }
.ob-progress__status { color: var(--color-lavender-100); }

/* Kortet loeftes fra baggrunden */
.form-card {
  box-shadow:
    0 44px 96px -32px color-mix(in srgb, var(--color-navy-900) 78%, transparent),
    0 12px 30px -14px color-mix(in srgb, var(--color-navy-900) 46%, transparent);
}

/* Bundlogo + hjaelpelinje */
.ob-bundlogo { opacity: 1; padding-block: var(--space-12) var(--space-10); }
.ob-bundlogo__logo { filter: none; opacity: 1; }
@media (max-width: 560px) { .ob-bundlogo__logo { height: 42px !important; } }

/* Hjaelpelinjen ligger paa den moerke flade - hele linjen skal vaere lys. */
.ob-hjaelp,
.ob-hjaelp p,
.ob-hjaelp__tekst,
.ob-support { color: var(--color-white); }
.ob-hjaelp__tekst strong { color: var(--color-white); }
.ob-hjaelp a, .ob-support a { color: var(--color-white); }

/* ============================================================
   TRIN-OVERGANG (2026-09-01)
   tegn() bygger .ob-main op paa ny ved hvert trin, saa en ren
   CSS-animation paa boernene giver et blodt skift uden JS.
   Overskrift og kort kommer forskudt, saa bevaegelsen laeses som ét
   forloeb frem for to ting der hopper samtidig.
   ============================================================ */
@keyframes ob-trin-ind {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
/* 'forwards' frem for 'both': elementet starter synligt og animerer ind.
   Med 'both' stod indholdet paa opacity 0 foer animationen gik i gang,
   og et gen-render kunne efterlade en skaerm usynlig. */
.ob-main > * {
  animation: ob-trin-ind 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.ob-main > *:nth-child(2) { animation-delay: 70ms; }
.ob-main > *:nth-child(3) { animation-delay: 120ms; }

/* Fremdriftslinjen glider med i stedet for at springe. */
.ob-progress__fill { transition: width 460ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .ob-main > * { animation: none; }
  .ob-progress__fill { transition: none; }
}