/* ============================================================
   Onboarding - facelift til designsystem v3 (2026-10-16)

   Kilde: People's Clinic Website/_cvi-2026/designsystem-v3 (artifact
   BL1wGGdAwMBG6zya55iaTs) - samme tokens som appen (Navy-redesign).
   Loades SIDST, saa den lægger sig oven på prototype.css og
   komponenter.css uden at de skal skrives om.

   v3-regler: lys grå bund med hvide kort som i appen, Instrument Sans,
   overskrifter vægt 500, knapper vægt 600 med stort begyndelsesbogstav
   (ingen versaler), formularkant 3:1 (#868ea3), mono kun til trin-numre.
   ============================================================ */

:root {
  --v3-bg: #f4f5f8;
  --v3-surface: #ffffff;
  --v3-surface-2: #f6f7fa;
  --v3-line: #e4e7ee;
  --v3-line-2: #eef0f4;
  --v3-input-line: #d6dae3;
  --v3-control-line: #868ea3;
  --v3-idle: #c9cfdc;
  --v3-ink: #14182b;
  --v3-soft: #4a5165;
  --v3-muted: #5a6275;
  --v3-primary: #1e2f51;
  --v3-primary-ink: #ffffff;
  --v3-accent: #5669a4;
  --v3-accent-soft: #edf0f7;
  --v3-ok: #1e6b45;
  --v3-ok-bg: #e7f3ec;
  --v3-bad: #8f2219;
  --v3-bad-bg: #fbecea;
  --v3-shadow: 0 1px 2px rgba(20, 24, 43, 0.04), 0 8px 24px rgba(30, 47, 81, 0.05);
  --v3-focus: 0 0 0 3px rgba(86, 105, 164, 0.18);
  --v3-r-card: 16px;
  --v3-r-box: 12px;
  --v3-r-field: 10px;
  --v3-r-pill: 999px;
  --v3-control: 44px;
  --v3-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v3-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --v3-dur: 160ms;
}

/* ---------- Flade og typografi ---------- */
body.ob-body {
  background: var(--v3-bg);
  color: var(--v3-ink);
  font-family: var(--v3-font);
  -webkit-font-smoothing: antialiased;
}
body.ob-body button, body.ob-body input, body.ob-body select { font-family: var(--v3-font); }

body.ob-body .ob-shell > h1,
body.ob-body .ob-shell h1 {
  color: var(--v3-ink);
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
body.ob-body .ob-shell > p,
body.ob-body .ob-shell__lead { color: var(--v3-muted); font-size: 16px; }

/* Trin-nummeret er det eneste i mono (v3) */
body.ob-body .ob-shell > .ob-trin {
  font-family: var(--v3-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--v3-accent);
}

/* ---------- Kortet ---------- */
body.ob-body .form-card {
  background: var(--v3-surface);
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-card);
  box-shadow: var(--v3-shadow);
}

/* ---------- Felter og dropdowns ---------- */
body.ob-body .ob-flow .form-card .form-card__field.ob-f {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
body.ob-body .ob-flow .form-card .form-card__field.ob-f input,
body.ob-body .ob-flow .form-card .ob-vaelg__knap {
  height: var(--v3-control);
  padding: 0 14px;
  border: 1px solid var(--v3-control-line);
  border-radius: var(--v3-r-field);
  background: var(--v3-surface);
  color: var(--v3-ink);
  font-size: 15px;
  box-shadow: none;
  transition: border-color var(--v3-dur) ease, box-shadow var(--v3-dur) ease;
}
body.ob-body .ob-flow .form-card .form-card__field.ob-f input::placeholder { color: var(--v3-muted); opacity: 1; }
body.ob-body .ob-flow .form-card .ob-vaelg__knap.is-tom { color: var(--v3-muted); }
body.ob-body .ob-flow .form-card .form-card__field.ob-f input:hover,
body.ob-body .ob-flow .form-card .ob-vaelg__knap:hover { border-color: var(--v3-accent); }
body.ob-body .ob-flow .form-card .form-card__field.ob-f input:focus,
body.ob-body .ob-flow .form-card .ob-vaelg__knap:focus-visible,
body.ob-body .ob-flow .form-card .ob-vaelg__knap[aria-expanded="true"] {
  outline: 2px solid transparent;
  border-color: var(--v3-accent);
  box-shadow: var(--v3-focus);
}
body.ob-body .ob-vaelg__liste {
  border: 1px solid var(--v3-line);
  border-radius: var(--v3-r-box);
  box-shadow: 0 1px 2px rgba(20, 24, 43, 0.05), 0 24px 56px -20px rgba(30, 47, 81, 0.22);
}
body.ob-body .ob-vaelg__punkt { color: var(--v3-soft); border-radius: 8px; }
body.ob-body .ob-vaelg__punkt.is-valgt,
body.ob-body .ob-vaelg__punkt:hover,
body.ob-body .ob-vaelg__punkt:focus { background: var(--v3-accent-soft); color: var(--v3-ink); }
body.ob-body .ob-f__hint { color: var(--v3-muted); font-size: 13px; }

/* ---------- Knapper: vægt 600, stort begyndelsesbogstav, flad navy ---------- */
body.ob-body .btn {
  height: var(--v3-control);
  border-radius: var(--v3-r-pill);
  font-family: var(--v3-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
body.ob-body .btn--primary {
  background: var(--v3-primary);
  border: 1px solid var(--v3-primary);
  color: var(--v3-primary-ink);
}
body.ob-body .btn--primary:hover { background: var(--v3-primary); filter: brightness(1.15); }
body.ob-body .btn--primary:focus-visible { outline: 2px solid var(--v3-accent); outline-offset: 2px; }
body.ob-body .btn--primary:disabled { filter: none; opacity: 0.6; }
body.ob-body .ob-back {
  font-family: var(--v3-font);
  font-size: 14px;
  color: var(--v3-muted);
  text-transform: none;
  letter-spacing: 0;
}
body.ob-body .ob-back:hover { color: var(--v3-ink); }

/* ---------- Pakkekort ---------- */
body.ob-body .ob-pakke {
  border: 1px solid var(--v3-input-line);
  border-radius: var(--v3-r-card);
  background: var(--v3-surface);
}
body.ob-body .ob-pakke:hover { border-color: var(--v3-accent); }
body.ob-body .ob-pakke.is-valgt {
  border-color: var(--v3-primary);
  box-shadow: inset 0 0 0 1px var(--v3-primary);
  background: var(--v3-surface);
}
body.ob-body .ob-pakke:has(input:focus-visible) { box-shadow: inset 0 0 0 1px var(--v3-primary), var(--v3-focus); }
body.ob-body .ob-pakke__navn { color: var(--v3-ink); font-weight: 500; }
body.ob-body .ob-pakke__pris { color: var(--v3-ink); font-size: 28px; font-weight: 500; letter-spacing: -0.01em; }
body.ob-body .ob-pakke__enhed, body.ob-body .ob-pakke__hint { color: var(--v3-muted); }
body.ob-body .ob-pakke__anbefalet {
  background: var(--v3-accent-soft);
  color: var(--v3-primary);
  border: 1px solid var(--v3-surface);
  font-weight: 500;
}

/* ---------- Interval som v3-segment ---------- */
body.ob-body .ob-segment {
  justify-self: start;
  display: inline-grid;
  gap: 4px;
  padding: 4px;
  background: var(--v3-surface-2);
  border: 1px solid var(--v3-line-2);
  border-radius: var(--v3-r-pill);
}
body.ob-body .ob-segment__valg { height: 34px; padding: 0 16px; font-size: 14px; font-weight: 500; color: var(--v3-muted); }
body.ob-body .ob-segment__valg.is-valgt {
  background: var(--v3-surface);
  color: var(--v3-ink);
  box-shadow: 0 1px 2px rgba(20, 24, 43, 0.08), 0 4px 12px rgba(30, 47, 81, 0.08);
}
body.ob-body .ob-spar {
  background: var(--v3-ok-bg);
  color: var(--v3-ok);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Antal pladser ---------- */
body.ob-body .ob-legend { color: var(--v3-ink); font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; }
body.ob-body .ob-stepper {
  border: 1px solid var(--v3-control-line);
  border-radius: var(--v3-r-pill);
  background: var(--v3-surface);
}
body.ob-body .ob-stepper button { color: var(--v3-ink); }
body.ob-body .ob-stepper button:disabled { color: var(--v3-idle); }

/* ---------- Opsummering ---------- */
body.ob-body .ob-summary {
  background: var(--v3-surface-2);
  border: 1px solid var(--v3-line-2);
  border-radius: var(--v3-r-box);
}
body.ob-body .ob-summary__row { color: var(--v3-soft); }
body.ob-body .ob-summary__row--total > span:last-child { color: var(--v3-ok); font-weight: 500; }
body.ob-body .ob-summary__note { color: var(--v3-muted); }

/* ---------- Afkrydsning ---------- */
body.ob-body .ob-tilvalg {
  background: var(--v3-surface-2);
  border: 1px solid var(--v3-line-2);
  border-radius: var(--v3-r-box);
}
body.ob-body .ob-consent__text { color: var(--v3-soft); }
body.ob-body .ob-consent input[type="checkbox"] { accent-color: var(--v3-primary); }
body.ob-body .ob-link { color: var(--v3-accent); }

/* ---------- Fejl ---------- */
body.ob-body .ob-errorsummary {
  background: var(--v3-bad-bg);
  border: 1px solid color-mix(in srgb, var(--v3-bad) 25%, transparent);
  border-radius: var(--v3-r-box);
  color: var(--v3-bad);
}
body.ob-body .ob-errorsummary h2 { color: var(--v3-bad); font-weight: 500; }
body.ob-body .form-card__msg--error { color: var(--v3-bad); }

/* ---------- Hjælpestribe og logo på lys bund ---------- */
body.ob-body .ob-hjaelp,
body.ob-body .ob-hjaelp p,
body.ob-body .ob-hjaelp__tekst { color: var(--v3-muted); }
body.ob-body .ob-hjaelp__tekst strong { color: var(--v3-ink); font-weight: 500; }
body.ob-body .ob-hjaelp__folk img,
body.ob-body .ob-hjaelp__folk span { border-color: var(--v3-bg); }

/* ---------- Afslutning ---------- */
body.ob-body .ob-videre__mark,
body.ob-body .ob-videre__trin li.is-faerdig .ob-videre__nr { background: var(--v3-primary); border-color: var(--v3-primary); }
body.ob-body .ob-videre__nr { border-color: var(--v3-idle); color: var(--v3-muted); font-family: var(--v3-mono); }
body.ob-body .ob-videre__trin li { color: var(--v3-muted); }
body.ob-body .ob-videre__trin li.is-faerdig { color: var(--v3-ink); }
body.ob-body .ob-videre__demo { color: var(--v3-muted); }

/* ============================================================
   Visuelt løft (2026-10-16, runde 2)
   Logo øverst, fremdriftsbjælke som v3-booking, synlige feltlabels
   som v3 .field, roligere pakkekort uden "Anbefalet".
   ============================================================ */

/* ---------- Topbjælke med logo ---------- */
body.ob-body .ob-top { background: none; border: 0; padding: 20px 24px; }
body.ob-body .ob-top__inner { max-width: 1120px; }
body.ob-body .ob-top__logo { display: inline-flex; }
body.ob-body .ob-top__logo img { height: 34px; width: auto; display: block; }
body.ob-body .ob-main { padding-top: 24px; padding-bottom: 72px; }

/* ---------- Fremdrift: "Trin n af 4" + fire segmenter ---------- */
body.ob-body .ob-shell > .ob-trin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--v3-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v3-muted);
}
body.ob-body .ob-trin__bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: min(45%, 180px);
}
body.ob-body .ob-trin__bar i { height: 4px; border-radius: 2px; background: var(--v3-line); transition: background-color 240ms ease; }
body.ob-body .ob-trin__bar i.on { background: var(--v3-primary); }
body.ob-body .ob-shell > .ob-trin + h1 { margin-top: 20px; }

/* ---------- Kortet: mere luft ---------- */
body.ob-body .ob-flow .form-card { padding: 32px; gap: 18px; }
@media (max-width: 560px) {
  body.ob-body .ob-flow .form-card { padding: 22px 18px; }
  body.ob-body .ob-top { padding: 16px; }
  body.ob-body .ob-top__logo img { height: 30px; }
}

/* ---------- Synlige feltlabels (v3 .field) ---------- */
body.ob-body .ob-field { display: grid; gap: 6px; align-content: start; }
body.ob-body .ob-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--v3-ink);
  line-height: 1.3;
}
body.ob-body .ob-vaelg__hoved { display: none; }

/* ---------- Pakkekort ---------- */
body.ob-body .ob-pakker { gap: 12px; }
body.ob-body .ob-pakke {
  gap: 6px;
  padding: 18px 16px 16px;
  border-radius: var(--v3-r-box);
  transition: border-color var(--v3-dur) ease, background-color var(--v3-dur) ease, box-shadow var(--v3-dur) ease;
}
/* Valgt-markør: tom ring, fyldt navy med prik når kortet er valgt */
body.ob-body .ob-pakke::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--v3-idle);
  background: var(--v3-surface);
  transition: border-color var(--v3-dur) ease, box-shadow var(--v3-dur) ease;
}
body.ob-body .ob-pakke.is-valgt::after {
  border-color: var(--v3-primary);
  box-shadow: inset 0 0 0 4px var(--v3-surface), inset 0 0 0 9px var(--v3-primary);
}
body.ob-body .ob-pakke.is-valgt { background: var(--v3-accent-soft); }
body.ob-body .ob-pakke__navn { font-size: 14px; padding-right: 26px; }
body.ob-body .ob-pakke__pris {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 4px;
  margin-top: 6px;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
body.ob-body .ob-pakke__kr { font-size: 15px; font-weight: 500; letter-spacing: 0; }
body.ob-body .ob-pakke__enhed { flex-basis: 100%; margin-top: 6px; font-size: 12.5px; }
body.ob-body .ob-pakke__hint { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--v3-soft); }
@media (max-width: 600px) {
  body.ob-body .ob-pakker { gap: 8px; }
  body.ob-body .ob-pakke { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 44px 14px 16px; }
  body.ob-body .ob-pakke::after { top: 50%; transform: translateY(-50%); }
  body.ob-body .ob-pakke__navn { grid-column: 1; padding-right: 0; white-space: nowrap; }
  body.ob-body .ob-pakke__hint { grid-column: 1; padding-top: 0; margin-top: 0; white-space: nowrap; }
  body.ob-body .ob-pakke__pris { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 24px; justify-content: flex-end; text-align: right; }
  body.ob-body .ob-pakke__enhed { margin-top: 4px; font-size: 11.5px; white-space: nowrap; }
}

/* ---------- Opsummering: total øverst uden streg og tom luft ---------- */
body.ob-body .ob-summary { padding: 18px 20px; }
body.ob-body .ob-summary__row--total { border-top: 0; margin-top: 0; padding-top: 0; }
body.ob-body .ob-summary__row--naeste { border-top: 1px solid var(--v3-line); margin-top: 10px; padding-top: 12px; }
body.ob-body .ob-summary__row > span:last-child { white-space: nowrap; }