/* Barselsberegneren (/barselsberegner/). Bygger på designsystemet (ds.css) og tokens fra style.css. Præfiks bs-. */
.krummer{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:.9rem; color:var(--ink-3); margin:0 0 14px}
.krummer a{color:var(--ink-2); display:inline-flex; align-items:center; min-height:44px}
.krummer [aria-current]{color:var(--ink-3); font-weight:700}
.bs h2{font-size:clamp(1.5rem,3.4vw,2rem); margin-top:1.6em}
.bs h2:first-child{margin-top:0}
.bs p, .bs li{max-width:76ch}
.bs-hub .lede{max-width:760px}
.bs-hub .updated{margin:6px 0 18px}
.bs-hub{padding-bottom:28px}

/* Kort svar og de fire tal */
.bs-kortsvar{max-width:820px; margin:0 0 18px; background:var(--accent-soft)}
.bs-kortsvar p{margin:0}
.bs-kortsvar .ds-etiket{margin-bottom:6px; color:#8A3A1E}
.bs-hero{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px}
.bs-tal{display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px 14px 16px; background:var(--bund)}
.bs-tal .ds-ikon{--ic:var(--farve-ink); --tint:var(--surface)}
.bs-tal .ds-tal{color:var(--farve-ink)}
.bs-tal span{font-size:.92rem; line-height:1.3; font-weight:600; color:var(--ink-2)}

/* Formularen */
.bs-nojs{background:var(--warn-soft); color:var(--warn-ink); border-radius:12px; padding:10px 14px; font-weight:700}
.bs-form{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:clamp(16px,3vw,26px)}
.bs-f{border:0; margin:0; padding:0; min-width:0}
.bs-f legend{font-family:var(--font-head); font-weight:700; font-size:1.1rem; padding:0; margin-bottom:8px}
.bs-f .ds-note{margin:8px 0 0}
.bs-valg{display:flex; flex-wrap:wrap; gap:8px}
.bs-valg label{position:relative; display:flex; align-items:center; min-height:48px; padding:6px 16px; border:2px solid var(--line-2); border-radius:24px; background:var(--surface-2); font-weight:700; cursor:pointer}
.bs-valg input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.bs-valg label:has(input:checked){border-color:var(--ink); background:var(--accent-soft)}
.bs-valg label:has(input:focus-visible){outline:3px solid var(--accent-ink); outline-offset:2px}
.bs-felt{display:flex; flex-direction:column; gap:4px; font-weight:700; font-size:.95rem}
.bs-felt input, .bs-felt select{min-height:48px; width:100%; border-radius:12px; border:2px solid var(--line-2); padding:0 12px; font:inherit; font-size:16px; background:#fff; color:var(--ink)}
.bs-felt input:focus-visible, .bs-felt select:focus-visible{outline:3px solid var(--accent-ink); outline-offset:2px}
.bs-fejl{margin:0; background:var(--warn-soft); color:var(--warn-ink); border-radius:12px; padding:10px 14px; font-weight:700}
.bs-bund{display:flex; flex-direction:column; align-items:stretch; gap:12px}
.bs-laas{align-self:flex-start; height:auto; padding:6px 14px 6px 8px; text-align:left; line-height:1.3; cursor:default}
.bs-bund .ds-knap{width:100%}
@media(min-width:760px){
  .bs-form{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); align-items:start}
  .bs-form .bs-fejl, .bs-form .bs-bund{grid-column:1 / -1}
  .bs-bund{flex-direction:row; align-items:center; flex-wrap:wrap}
  .bs-bund .ds-knap{width:auto}
  .bs-f-fam{grid-row:1 / span 2; grid-column:2}
}

/* Svaret: eksempel først, derefter jeres egen tidslinje. Højden skifter kun efter et tryk. */
.bs-svar{margin-top:18px; padding:clamp(16px,3vw,28px); border-radius:var(--ds-r-xl)}
.bs-hoved .ds-titel{margin:2px 0 4px}
.bs-hoved .ds-note{margin:0 0 14px}
.bs-nogle{list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:8px}
.bs-n{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:var(--ds-r-m); background:var(--surface-2); font-weight:600; line-height:1.35; --tint:var(--accent-soft)}
.bs-n .ds-ikon{margin-top:1px}
.bs-n span{min-width:0; overflow-wrap:break-word}

/* Banen: ét spor pr. forælder. Fuldt udfyldt = fast placering, skravering = inden for fristen */
.bs-bane{margin:0 0 20px; padding:0}
.bs-lanes{position:relative; display:flex; flex-direction:column; gap:12px}
.bs-linje{position:absolute; top:0; bottom:0; width:0; border-left:2px dashed var(--line-2); z-index:0; pointer-events:none}
.bs-lane{position:relative; z-index:1; display:flex; flex-direction:column; gap:5px}
.bs-lane-n{display:flex; align-items:center; gap:6px; margin:0; font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--farve-ink)}
.bs-lane-n .ds-ikon{--ic:var(--farve-ink); --tint:var(--bund)}
.bs-rk{position:relative; height:30px; border-radius:8px; background:var(--surface-2)}
.bs-seg{position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; border-radius:6px; font-size:12px; font-weight:800; line-height:1}
.bs-seg.fast{background:var(--farve-ink); color:#fff; box-shadow:0 0 0 1.5px var(--surface-2)}
.bs-seg.vindue{background:repeating-linear-gradient(135deg,var(--bund) 0 6px,var(--tint) 6px 12px); color:var(--farve-ink); box-shadow:inset 0 0 0 2px var(--farve)}
.bs-akse{position:relative; height:26px; margin-top:6px; font-size:12px; font-weight:800; color:var(--ink-3)}
.bs-akse span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
.bs-akse span.sl{transform:translateX(-100%)}
.bs-forklar{list-style:none; display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 0; padding:0; font-size:.85rem; color:var(--ink-3)}
.bs-forklar li{display:flex; align-items:center; gap:6px}
.bs-demo{display:inline-block; width:24px; height:14px; border-radius:5px; flex:none}
.bs-demo.fast{background:var(--ink-2)}
.bs-demo.vindue{background:repeating-linear-gradient(135deg,var(--surface) 0 4px,var(--line-2) 4px 8px); box-shadow:inset 0 0 0 2px var(--ink-3)}

/* Tabellerne */
.bs-person{margin:0 0 20px}
.bs-person-h{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 8px; font-family:var(--font-head); font-size:1.25rem; line-height:1.15; color:var(--farve-ink)}
.bs-person-h .ds-ikon{--ic:var(--farve-ink); --tint:var(--bund)}
.bs-person-h small{font:600 .88rem/1.3 var(--font-body); color:var(--ink-3)}
.bs-tabel, .bs-ref{width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--ds-r-m); overflow:hidden}
.bs-tabel th, .bs-tabel td, .bs-ref th, .bs-ref td{padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.bs-tabel thead th, .bs-ref thead th{font-size:.82rem; color:var(--ink-3); background:var(--surface-2); text-transform:uppercase; letter-spacing:.04em}
.bs-tabel tbody th, .bs-ref tbody th{font-weight:400}
.bs-c-navn b{display:block; font-family:var(--font-head); font-size:1.02rem}
.bs-c-navn small{display:block; margin-top:2px; font-size:.86rem; line-height:1.35; color:var(--ink-3)}
.bs-c-uger{white-space:nowrap}
.bs-c-uger b{font-family:var(--font-head); font-size:1.3rem}
@media(min-width:760px){
  .bs-tabel{table-layout:fixed}
  .bs-tabel th:nth-child(1){width:35%} .bs-tabel th:nth-child(2){width:11%} .bs-tabel th:nth-child(3){width:21%} .bs-tabel th:nth-child(4){width:17%} .bs-tabel th:nth-child(5){width:16%}
}
.bs-tabel .ds-chip{white-space:normal; height:auto; min-height:36px; padding-block:4px; line-height:1.2}
.bs-ref caption{caption-side:bottom; text-align:left; padding:8px 4px 0; font-size:.85rem; color:var(--ink-3)}
.bs-hscroll{margin:14px 0 6px}
.bs-noter{margin:6px 0 0; padding-left:1.1em}
.bs-noter li{margin:0 0 6px}
.bs-noter a{overflow-wrap:anywhere}

/* Telefon: rækkerne bliver til kompakte kort (rollerne bevarer tabelsemantikken; kolonnenavnene står som mærkater) */
@media(max-width:759px){
  .bs-tabel thead, .bs-ref thead{display:none}
  .bs-tabel, .bs-tabel tbody, .bs-ref, .bs-ref tbody, .bs-ref tr, .bs-ref th, .bs-ref td, .bs-ref caption{display:block}
  .bs-tabel, .bs-ref{background:none; border-radius:0}
  .bs-tabel tr{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:2px 12px; margin:0 0 10px; padding:10px 14px; border-radius:var(--ds-r-m); background:var(--surface-2)}
  .bs-tabel th, .bs-tabel td{display:block; border:0; padding:0}
  .bs-tabel th{grid-column:1 / -1; padding-bottom:4px}
  .bs-tabel td:nth-child(4), .bs-tabel td:nth-child(5){grid-column:1 / -1}
  .bs-tabel td:nth-child(2)::before{display:inline; margin-right:6px}
  .bs-tabel td[data-l]::before, .bs-ref td[data-l]::before{content:attr(data-l); display:block; font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
  .bs-tabel td:nth-child(4)::before, .bs-tabel td:nth-child(5)::before{display:inline; margin-right:8px}
  .bs-ref tr{margin:0 0 10px; padding:6px 0; border-radius:var(--ds-r-m); background:var(--surface)}
  .bs-ref th, .bs-ref td{border:0; padding:4px 14px}
  .bs-ref tbody th{font-family:var(--font-head); font-weight:700; font-size:1.05rem; padding-top:8px}
  .bs-c-uger b{font-size:1.15rem}
}
@media(min-width:520px) and (max-width:759px){.bs-nogle{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Hvor meget har jeg tilbage */
.bs-tilbage{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; padding:clamp(16px,3vw,24px); margin:14px 0 4px}
.bs-tb-svar{display:flex; flex-direction:column; gap:2px; padding:14px 16px; border-radius:var(--ds-r-m); background:var(--klar-soft); color:var(--klar-ink)}
.bs-tb-svar .ds-etiket{color:var(--klar-ink)}
.bs-tb-svar .ds-tal{color:var(--ink)}
.bs-tb-svar .ds-note{color:var(--klar-ink)}
@media(min-width:760px){
  .bs-tilbage{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bs-tilbage .bs-felt:first-child{grid-column:1 / -1}
  .bs-tb-svar{grid-column:1 / -1}
}
.bs .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin:18px 0}
.bs .cta-row .ds-knap{white-space:normal; text-align:center; line-height:1.2; padding-block:8px}
.bs .kilder li{margin-bottom:6px; overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.bs *{scroll-behavior:auto!important; transition:none!important}}

.bs-liste{margin:0 0 1em; padding-left:1.2em}
.bs-liste li{margin:0 0 8px}