/* ---------------------------------------------------------------------------
   Klientflowets fælles dele: trin-bjælke + flow-topbar.

   Onboardingen er ÉN rejse: opret konto → hent dine tal → beregn → dit
   overblik. Hver side i rejsen (login.html, velkommen.html, connect-v2.html,
   beregnv2.html, kunde.html) viser den SAMME bjælke fra flow.js, så kunden
   altid kan se hvor de er, hvad der er klaret, og hvad der mangler.

   Filen forudsætter tokens fra pensia-tokens.css (rollenavne --maerke /
   --handling / --fremhaev med aliaser til de gamle navne). Den bruger kun
   variabler der findes i BEGGE navnesæt, så den kan lægges oven på både
   pensia-design.css-sider og sider med egne inline-tokens.
   --------------------------------------------------------------------------- */

.flow-rail {
  background: var(--hvid, #fff);
  border: 1px solid var(--linje, #e4e9ec);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 38, 34, .05), 0 12px 32px -12px rgba(28, 38, 34, .12);
  padding: 16px 18px;
  margin: 0 auto;
}
.flow-rail-liste {
  display: flex;
  align-items: flex-start;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow-trin {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  text-align: center;
  min-width: 0;
}
/* Forbindelseslinjen tegnes bagud fra hvert trin, så den aldrig stikker ud
   til siderne af bjælken. */
.flow-trin::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--linje, #e4e9ec);
  z-index: 0;
}
.flow-trin:first-child::before { display: none; }
.flow-trin .flow-num {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--linje, #e4e9ec);
  background: var(--hvid, #fff);
  color: var(--dim, #5b6b76);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 .9rem var(--sans, inherit);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.flow-trin .flow-lbl {
  font: 600 .82rem var(--sans, inherit);
  color: var(--dim, #5b6b76);
  line-height: 1.25;
}
.flow-trin .flow-nu {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--guld, #0b7f83);
}

/* Klaret trin: udfyldt cirkel med flueben. */
.flow-trin.faerdig::before,
.flow-trin.aktiv::before { background: var(--groen, #003755); }
.flow-trin.faerdig .flow-num {
  border-color: var(--groen, #003755);
  background: var(--groen, #003755);
  color: var(--hvid, #fff);
}
.flow-trin.faerdig .flow-lbl { color: var(--blaek, #0c2230); }

/* Nuværende trin: udfyldt og med ring, så det er det tydeligste punkt. */
.flow-trin.aktiv .flow-num {
  border-color: var(--guld, #0b7f83);
  background: var(--guld, #0b7f83);
  color: var(--hvid, #fff);
  box-shadow: 0 0 0 4px var(--guld-lys, #e4f3f4);
}
.flow-trin.aktiv .flow-lbl { color: var(--blaek, #0c2230); font-weight: 700; }

/* Næste trin, når man står på et mellemvalg (fx /velkommen). */
.flow-trin.naeste .flow-num { border-color: var(--guld, #0b7f83); color: var(--guld, #0b7f83); }
.flow-trin.naeste .flow-lbl { color: var(--blaek, #0c2230); }

/* Sprunget over: kunden valgte at indtaste selv, så trinnet er ikke fejlet,
   det er bare ikke brugt. Stiplet ring og dæmpet tekst siger netop det. */
.flow-trin.sprunget .flow-num { border-style: dashed; }
.flow-trin.sprunget .flow-lbl { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Trin man ikke kan hoppe til endnu, må ikke se klikbart ud. */
.flow-trin a, .flow-trin span.flow-link { text-decoration: none; color: inherit; }
.flow-trin a:hover .flow-lbl { color: var(--groen, #003755); text-decoration: underline; }
/* Klarede trin i en sides egne trin (beregneren) er knapper, saa man kan hoppe
   tilbage og rette. De skal se ud som resten, ikke som en knap. */
.flow-trin button.flow-top { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: inherit; }
.flow-trin button.flow-top:hover .flow-lbl { color: var(--groen, #003755); text-decoration: underline; }
.flow-trin .flow-top { display: flex; flex-direction: column; align-items: center; gap: 7px; }

/* Under bjælken: hvad sker der lige nu, i én linje. */
.flow-hint {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linje, #e4e9ec);
  font-size: .86rem;
  color: var(--dim, #5b6b76);
  text-align: center;
}
.flow-hint b { color: var(--blaek, #0c2230); font-weight: 600; }

/* --- Kompakt udgave (beregneren og det færdige overblik) ---------------------
   Én linje plus en segmenteret mini-bjælke. Bruges hvor siden selv har en
   trin-visning indeni, så to stepper-rækker ikke konkurrerer. */
.flow-kompakt {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--hvid, #fff);
  border: 1px solid var(--linje, #e4e9ec);
  border-radius: 12px;
  padding: 12px 16px;
}
.flow-k-tekst { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; min-width: 0; }
.flow-k-tekst b { font: 700 .82rem var(--sans, inherit); color: var(--blaek, #0c2230); white-space: nowrap; }
.flow-k-tekst span { font-size: .84rem; color: var(--dim, #5b6b76); }
.flow-segmenter { display: flex; gap: 5px; margin-left: auto; flex: 0 0 auto; }
.flow-segmenter .flow-seg {
  display: block;
  width: 30px;
  height: 5px;
  border-radius: 99px;
  background: var(--papir-2, #eef2f4);
}
.flow-segmenter .flow-seg.faerdig { background: var(--groen, #003755); }
.flow-segmenter .flow-seg.aktiv { background: var(--guld, #0b7f83); }
.flow-segmenter .flow-seg.sprunget { background: repeating-linear-gradient(90deg, var(--linje, #e4e9ec) 0 4px, transparent 4px 7px); }
/* Klarede segmenter i en sides EGNE dele kan klikkes. Knappen er usynlig og
   giver kun et stoerre klikmaal omkring den tynde streg. */
.flow-segmenter .flow-seg-knap {
  background: none; border: 0; cursor: pointer; display: block;
  padding: 14px 3px; margin: -14px -3px;
}
.flow-segmenter .flow-seg-knap:hover .flow-seg { background: var(--guld, #0b7f83); }
/* En sides egne dele staar UNDER rejsens bjælke og skal vaere tydeligt mindre. */
.flow-egen { padding: 9px 14px; border-radius: 10px; }
.flow-egen .flow-k-tekst b { font-size: .78rem; }
.flow-egen .flow-k-tekst span { font-size: .8rem; }
.flow-egen .flow-segmenter .flow-seg { width: 26px; height: 4px; }

/* ---------------------------------------------------------------------------
   KONTO-IKONET, "monogram-seglet".

   Ikonet sidder i topbaren paa alle fire sider i rejsen (/velkommen, /forbind,
   /beregn, /min-pension) og skal se ens ud hele vejen. Det stod foer som en
   standard person-figur fra en ikonpakke, kopieret ind i hver side. Nu er det
   klientens egne initialer i Fraunces paa mærkefarven, med ordmærkets punktum
   som satellit i kanten, saa ikonet er en forlaengelse af logoet.

   Reglerne staar KUN her. Skal ikonet aendres, aendres det her, ikke i de fire
   sider. Initialerne saettes af PensiaFlow.saetKonto(navn) i flow.js; kender vi
   ikke navnet endnu, bliver .bv-figur staaende som fald tilbage.
   --------------------------------------------------------------------------- */
.bv-avatar {
  position: relative;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 0; padding: 0;
  border-radius: 50%;
  background: var(--groen, #003755);
  color: var(--hvid, #fff);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px -3px rgba(0, 55, 85, .55);
  transition: background .17s, box-shadow .17s;
}
/* Hover aendrer kun farve og skygge, aldrig stoerrelse, saa topbaren ikke rykker. */
.bv-avatar:hover { background: var(--groen-dyb, #002b43); box-shadow: 0 6px 16px -6px rgba(0, 55, 85, .75); }
.bv-avatar:focus-visible { outline: 2px solid var(--guld, #0b7f83); outline-offset: 3px; }
.bv-avatar .bv-ini {
  font-family: var(--display, 'Fraunces', Georgia, 'Times New Roman', serif);
  font-weight: 600; font-size: 15px; line-height: 1; letter-spacing: .015em;
}
/* Ordmærkets punktum, gentaget som satellit. Ringen er sidens egen lyse flade,
   saa prikken laegger sig oven paa cirklen i stedet for at flyde sammen. */
.bv-avatar .bv-punktum {
  position: absolute; right: -1px; bottom: -1px;
  width: 10.5px; height: 10.5px; border-radius: 50%;
  background: var(--guld, #0b7f83);
  box-shadow: 0 0 0 2.5px var(--hvid, #fff);
}
/* Fald tilbage indtil navnet er hentet (og for konti helt uden navn). */
.bv-avatar .bv-figur { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  .bv-avatar { transition: none; }
}

@media (max-width: 620px) {
  /* 44 px er den mindste anbefalede beroeringsflade paa en telefon. */
  .bv-avatar { width: 44px; height: 44px; }
  .bv-avatar .bv-ini { font-size: 16.5px; }
  .bv-avatar .bv-punktum { width: 11.5px; height: 11.5px; }
  .bv-avatar .bv-figur { width: 22px; height: 22px; }
  .flow-kompakt { gap: 10px; padding: 11px 13px; }
  .flow-segmenter { margin-left: 0; }
  .flow-segmenter .flow-seg { width: 26px; }
  .flow-rail { padding: 14px 12px; border-radius: 12px; }
  .flow-trin .flow-lbl { font-size: .68rem; }
  .flow-trin .flow-num { width: 27px; height: 27px; font-size: .8rem; }
  .flow-trin::before { top: 13px; }
  .flow-trin .flow-nu { font-size: .6rem; letter-spacing: .06em; }
  .flow-hint { font-size: .8rem; text-align: left; }
}

/* ============================================================
   PERLEKÆDEN
   Valgt af Bilal 7/8-2026 blandt 10 bud paa trin-bjaelken.
   Forlaeg: redesign/flow-status-bud.html, bud 1.

   Erstatter BAADE det hvide kort paa ca. 185 px og den separate
   "Del 1 af 4"-stribe. Fra 225 px til ca. 48.

   Blokken ligger SIDST i arket og overskriver de tidligere regler,
   saa den gaelder ALLE steder flow.js tegner: /login, /velkommen,
   /forbind, /beregn (baade rejsen og beregnerens egne afsnit) og
   /min-pension. Aendrer du den, aendrer du hele rejsen.
   ============================================================ */

/* ---------- Fuld udgave: rejsen ---------- */
.flow-rail {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: none; border: 0; box-shadow: none; padding: 0; margin: 14px 0 0;
}
.flow-rail-liste {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap; list-style: none;
  margin: 0; padding: 5px 6px; counter-reset: none;
  background: var(--flade-kort, #fff);
  border: 1px solid var(--kant, #e2e9ee);
  border-radius: 99px;
}
/* Den oprindelige bjaelke satte .flow-trin i KOLONNE med flex:1 1 0, saa
   etiketten stod under tallet og alle trin var lige brede. Perlekaeden er
   en raekke, saa begge dele skal nulstilles her. */
.flow-trin {
  display: flex; align-items: center; margin: 0; padding: 0;
  flex-direction: row; flex: 0 0 auto; text-align: left; gap: 0;
}
.flow-trin::before, .flow-trin::after { content: none; }
.flow-trin .flow-lbl { font: inherit; color: inherit; line-height: 1.2; }
/* Forbindelsesstregen mellem perlerne */
.flow-trin + .flow-trin { position: relative; padding-left: 14px; }
.flow-trin + .flow-trin::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 14px; height: 1.5px; background: var(--kant, #e2e9ee);
}
.flow-trin.faerdig + .flow-trin::before,
.flow-trin.faerdig + .flow-trin.faerdig::before { background: var(--handling, #0b7f83); }
/* .flow-rail-liste foran: sidernes egne inline-style-blokke ligger EFTER
   flow.css og satte .flow-top i kolonne. To klasser slaar én. */
.flow-rail-liste .flow-top {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 99px; text-decoration: none; white-space: nowrap;
  font: 600 .87rem var(--sans, 'Hanken Grotesk', sans-serif);
  color: var(--tekst-dim, #5b6b76);
  transition-property: background-color, color; transition-duration: .16s;
}
.flow-rail-liste a.flow-top:hover { background: var(--flade-nedton, #eef2f4); color: var(--tekst, #0c2230); }
.flow-rail-liste .flow-trin.faerdig .flow-top { color: var(--handling-tekst, #0a6e72); }
.flow-rail-liste .flow-trin.aktiv .flow-top { background: var(--maerke, #003755); color: #fff; }
.flow-trin.sprunget .flow-top { opacity: .55; }
.flow-rail-liste .flow-num {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--flade-nedton, #eef2f4); color: var(--tekst-dim, #5b6b76);
  font-family: var(--tal-font, 'Inter', sans-serif); font-size: .62rem; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums; line-height: 1;
}
.flow-rail-liste .flow-trin.faerdig .flow-num { background: var(--handling, #0b7f83); color: #fff; border: 0; box-shadow: none; }
.flow-rail-liste .flow-trin.aktiv .flow-num { background: #fff; color: var(--maerke, #003755); border: 0; box-shadow: none; }
.flow-rail-liste .flow-num svg { width: 11px; height: 11px; }
/* "Du er her" er overfloedig: den fyldte perle siger det samme */
.flow-nu { display: none; }
/* Hintet staar til hoejre paa samme linje i stedet for paa sin egen */
.flow-hint {
  margin: 0 0 0 auto; padding: 0; border: 0; text-align: right;
  font-size: .8rem; color: var(--tekst-dim, #5b6b76); flex: 1 1 220px; min-width: 0;
}
.flow-hint b { font-weight: 600; color: var(--tekst, #0c2230); }

/* ---------- Kompakt udgave: en sides EGNE afsnit ---------- */
.flow-kompakt {
  display: flex; align-items: center; gap: 12px; margin: 10px 0 0;
  background: var(--flade-kort, #fff);
  border: 1px solid var(--kant, #e2e9ee);
  border-radius: 99px; padding: 6px 6px 6px 15px; box-shadow: none;
}
.flow-k-tekst { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.flow-k-tekst b { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.flow-k-tekst span {
  font-size: .8rem; color: var(--tekst-dim, #5b6b76);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flow-segmenter { display: flex; gap: 3px; margin-left: auto; padding-right: 9px; }
.flow-seg { width: 30px; height: 4px; border-radius: 99px; background: var(--kant, #e2e9ee); }
.flow-seg.faerdig { background: var(--handling, #0b7f83); }
.flow-seg.aktiv { background: var(--maerke, #003755); }
.flow-seg.sprunget { background: var(--fremhaev, #b08d4a); opacity: .5; }

@media (max-width: 720px) {
  /* Paa smalle skaerme faar kaeden lov at bryde, og hintet gaar under */
  .flow-rail-liste { border-radius: 16px; }
  .flow-hint { flex-basis: 100%; text-align: left; margin-left: 0; }
  .flow-k-tekst span { display: none; }
}

.flow-rail-liste .flow-num { border: 0; box-shadow: none; }

/* Etiketten har sin egen farveregel med samme specificitet som pillens,
   saa den aktive perle fik moerk tekst paa petrol (kontrast 1,9:1).
   Etiketten skal arve pillens farve. Maalt 7/8-2026. */
.flow-rail-liste .flow-trin .flow-lbl { color: inherit; font-weight: inherit; }
.flow-rail-liste .flow-trin.aktiv .flow-lbl { color: #fff; }
.flow-rail-liste .flow-trin.faerdig .flow-lbl { color: var(--handling-tekst, #0a6e72); }
.flow-rail-liste .flow-trin a:hover .flow-lbl,
.flow-rail-liste .flow-trin button.flow-top:hover .flow-lbl { text-decoration: none; color: inherit; }

/* ---------- Perlekaeden INDE i topbaren ----------
   Bjaelken flyttes af flow.js ind i .topbar-inner, saa rejsen er en del
   af app-hovedet i stedet for en stribe under det. Se flytTilTopbar().
   Hintet ryger ud: der er ikke plads, og det staar allerede i sidens
   egen overskrift. */
.flow-i-topbar { margin: 0 auto; flex: 0 1 auto; min-width: 0; }
.flow-i-topbar .flow-rail-liste { padding: 4px 5px; }
.flow-i-topbar .flow-top { padding: 6px 13px; font-size: .84rem; }
.flow-i-topbar .flow-num { width: 17px; height: 17px; font-size: .58rem; }
.flow-i-topbar .flow-trin + .flow-trin { padding-left: 11px; }
.flow-i-topbar .flow-trin + .flow-trin::before { width: 11px; }
.flow-i-topbar .flow-hint { display: none; }
@media (max-width: 1100px) {
  /* Under 1100 px er der ikke plads til fire navne ved siden af logoet.
     Saa staar kun det aktive trin, og resten er perler uden tekst. */
  .flow-i-topbar .flow-trin:not(.aktiv) .flow-lbl { display: none; }
  .flow-i-topbar .flow-top { padding: 6px 9px; }
}
@media (max-width: 700px) { .flow-i-topbar { display: none; } }