/* side-procedure.css — procedurebiblioteket (prototype 2026-09-29).
   Bygger oven på side-design.css. Siderne genereres af _byg/generate-procedurer.js. */

:root {
  --f-ink: #0d2038;
  --f-hud: #f3c6a5;
  --f-negl: #fbe3d6;
  --f-acc: #12c4a8;
  --f-handske: #8ec5ff;
  --f-vand: #5cc8f5;
  --f-nej: #e5484d;
  --f-ja: #16a34a;
  --f-toej: #5b8cff;
  --f-bukser: #334a6b;
  --f-moebel: #c9d5e5;
  --f-bg-a: color-mix(in srgb, var(--problem-color, #12c4a8) 10%, #fff);
  --f-bg-b: #ffffff;
}

/* ── Illustrationer ── */
.fig { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 16px; }
.fig * { stroke-linecap: round; stroke-linejoin: round; }
.f-bg { fill: var(--f-bg-a); }
.f-hud, .f-handske, .f-toej, .f-bukser, .f-sko, .f-haar, .f-haar2, .f-metal, .f-flaske, .f-tube, .f-papir, .f-aeske, .f-apparat, .f-manchet-bt, .f-kop, .f-spand, .f-spand-laag, .f-tablet, .f-moebel, .f-mad, .f-filter, .f-lak, .f-etiket, .f-guld, .f-rem, .f-urskive, .f-negl { stroke: var(--f-ink); stroke-width: 2.4; }
.f-hud { fill: var(--f-hud); }
.f-negl { fill: var(--f-negl); stroke-width: 1.6; }
.f-handske { fill: var(--f-handske); }
.f-vrang { fill: #b9dcff; }
.f-manchet { fill: #6fb3fa; }
.f-udenstreg { stroke: none !important; }
.f-fold { fill: none; stroke: color-mix(in srgb, var(--f-ink) 45%, transparent); stroke-width: 1.8; }
.f-guld { fill: #f5c542; stroke-width: 1.6; }
.f-rem { fill: #334a6b; }
.f-urskive { fill: #fff; stroke-width: 2; }
.f-toej { fill: var(--f-toej); }
.f-bukser { fill: var(--f-bukser); }
.f-sko { fill: #1e2f47; }
.f-haar { fill: #6b4a33; }
.f-haar2 { fill: #d9a441; }
.f-moebel { fill: var(--f-moebel); stroke-width: 1.8; }
.f-metal { fill: #dfe7f1; }
.f-flaske { fill: #e8fbf7; }
.f-etiket { fill: var(--f-acc); stroke-width: 1.6; }
.f-pumpe { fill: none; stroke: var(--f-ink); stroke-width: 5; }
.f-gel { fill: #b8f3e7; stroke: var(--f-ink); stroke-width: 1.8; }
.f-vand { fill: var(--f-vand); stroke: var(--f-ink); stroke-width: 1.6; }
.f-straale { fill: none; stroke: var(--f-vand); stroke-width: 6; opacity: .9; }
.f-skum { fill: #fff; stroke: color-mix(in srgb, var(--f-vand) 70%, var(--f-ink)); stroke-width: 1.8; }
.f-tube { fill: #fff6ea; }
.f-creme { fill: none; stroke: #fff; stroke-width: 7; filter: drop-shadow(0 0 1px var(--f-ink)); }
.f-papir { fill: #fff; }
.f-papirstreg { fill: none; stroke: #d4dde9; stroke-width: 2; }
.f-aeske { fill: #2e6fd8; }
.f-aeske-hul { fill: #0f2c57; }
.f-snavs { fill: #a0703f; opacity: .85; }
.f-rift { fill: none; stroke: var(--f-nej); stroke-width: 3; }
.f-lup { fill: none; stroke: var(--f-ink); stroke-width: 2.4; }
.f-spand { fill: #9fb2c9; }
.f-spand-laag { fill: #7d93ad; }
.f-lak { fill: #e8487a; }
.f-kop { fill: #fff; }
.f-hank { fill: none; stroke: var(--f-ink); stroke-width: 2.4; }
.f-damp { fill: none; stroke: #9fb2c9; stroke-width: 2.4; }
.f-filter { fill: #e8a15a; }
.f-mad { fill: #f2b35e; }
.f-apparat { fill: #1b3557; }
.f-skaerm { fill: #7be4ee; }
.f-skaerm-lys { fill: #eafffb; stroke: var(--f-ink); stroke-width: 1.6; }
.f-manchet-bt { fill: #3b4f6c; }
.f-velcro { fill: #52698a; stroke: none; }
.f-slange { fill: none; stroke: #3b4f6c; stroke-width: 4; }
.f-hjerte { fill: var(--f-nej); stroke: #fff; stroke-width: 2; }
.f-niveau { fill: none; stroke: var(--f-nej); stroke-width: 2.4; stroke-dasharray: 7 6; }
.f-maal { fill: none; stroke: var(--f-ink); stroke-width: 2; }
.f-maalebaand { fill: none; stroke: #f5c542; stroke-width: 6; }
.f-tablet { fill: #1b3557; }
.f-linje { fill: #d4dde9; }
.f-linje-m { fill: #9fb2c9; }
.f-vaerdi { fill: color-mix(in srgb, var(--f-acc) 22%, #fff); stroke: var(--f-acc); stroke-width: 1.8; }
.f-streg-hvid { stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.f-svimmel { fill: none; stroke: #7c3aed; stroke-width: 2.2; }
.f-pil { fill: none; stroke: var(--f-acc); stroke-width: 4; }
.f-pil-fin { fill: none; stroke: var(--f-acc); stroke-width: 3; stroke-dasharray: 5 5; }
.f-nej circle, .f-nej path { fill: none; stroke: var(--f-nej); stroke-width: 5; }
.f-nej-fyld circle { fill: var(--f-nej); stroke: #fff; stroke-width: 3; }
.f-nej-fyld path { stroke: #fff; stroke-width: 3.5; }
.f-ja circle { fill: var(--f-ja); stroke: #fff; stroke-width: 3; }
.f-ja path { fill: none; stroke: #fff; stroke-width: 3.5; }
.f-zone circle { fill: var(--f-acc); stroke: #fff; stroke-width: 2.5; }
.f-txt { font: 800 15px/1 Inter, -apple-system, "Segoe UI", sans-serif; fill: var(--f-ink); }
.f-txt-s { font-size: 12.5px; }
.f-zone-tal, .f-txt-hvid { fill: #fff; }
.f-txt-mono { font: 800 16px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; fill: var(--f-ink); }
.f-skilt rect { fill: #fff; stroke: color-mix(in srgb, var(--f-ink) 25%, transparent); stroke-width: 1.5; }
.f-ur-skive { fill: #fff; stroke: var(--f-ink); stroke-width: 2.4; }
.f-ur-del { fill: color-mix(in srgb, var(--f-acc) 55%, #fff); }
.f-ur-midt { fill: #fff; }
.f-ur-tal { font: 900 14px/1 Inter, -apple-system, sans-serif; fill: var(--f-ink); }
.f-ur-enh { font: 800 7.5px/1 Inter, -apple-system, sans-serif; fill: var(--f-ink); }
.f-boble rect, .f-boble path { fill: #fff; stroke: var(--f-ink); stroke-width: 2; }
.f-boble2 rect, .f-boble2 path { fill: color-mix(in srgb, var(--f-acc) 25%, #fff); }

/* Runde 2: temperatur, puls/respiration, urinprøve, mundpleje */
.f-termo, .f-porcelaen, .f-glas, .f-laag, .f-klud, .f-koeleskab, .f-tupfer, .f-haandklaede, .f-laebe, .f-mundhule, .f-tand, .f-tunge, .f-boerste, .f-protese, .f-nyrebakke, .f-spatel, .f-mellemrum, .f-pomade { stroke: var(--f-ink); stroke-width: 2.2; }
.f-termo { fill: #f4f7fb; }
.f-sne path { fill: none; stroke: #2e8ce0; stroke-width: 3; }
.f-niveau-bla { stroke: #7c3aed; }
.f-puls { fill: none; stroke: var(--f-nej); stroke-width: 4; }
.f-fold-hvid { stroke: rgba(255, 255, 255, .6); }
.f-lydboelge { fill: none; stroke: var(--f-acc); stroke-width: 3.5; }
.f-lvl-0 rect { fill: #d9f7e8; stroke: #16a34a; stroke-width: 2; }
.f-lvl-1 rect { fill: #fff3c4; stroke: #d6a100; stroke-width: 2; }
.f-lvl-2 rect { fill: #ffe0c2; stroke: #ea7a14; stroke-width: 2; }
.f-lvl-3 rect { fill: #e5484d; stroke: #b42318; stroke-width: 2; }
.f-porcelaen { fill: #fff; }
.f-skaal-inde { fill: #cfe8f7; stroke: var(--f-ink); stroke-width: 1.6; }
.f-glas { fill: rgba(255, 255, 255, .85); }
.f-urin { fill: #f6d55c; stroke: none; opacity: .9; }
.f-laag { fill: #e5484d; }
.f-felt rect { fill: #fff; stroke: #c9d5e5; stroke-width: 2; }
.f-felt-akt rect { fill: color-mix(in srgb, var(--f-acc) 18%, #fff); stroke: var(--f-acc); stroke-width: 3; }
.f-klud { fill: #bfe3ff; }
.f-koeleskab { fill: #eef3f9; }
.f-tupfer { fill: #fff; stroke-width: 1.8; }
.f-haandklaede { fill: #9be7d8; }
.f-laebe { fill: #e8837f; }
.f-mundhule { fill: #7a2530; }
.f-tand { fill: #fff; stroke-width: 1.8; }
.f-tunge { fill: #f19aa0; stroke-width: 1.8; }
.f-lys { fill: #fff6b3; opacity: .8; stroke: none; }
.f-spatel { fill: #f1dcb8; }
.f-boerste { fill: var(--f-acc); }
.f-boerstehaar { fill: none; stroke: #fff; stroke-width: 4; filter: drop-shadow(0 0 1px var(--f-ink)); }
.f-pasta { fill: none; stroke: #fff; stroke-width: 8; filter: drop-shadow(0 0 1px var(--f-ink)); }
.f-tandkoed-streg { fill: none; stroke: #e8837f; stroke-width: 10; }
.f-mellemrum { fill: #7cb6ff; }
.f-protese { fill: #f19aa0; }
.f-nyrebakke { fill: #dfe7f1; }
.f-pomade { fill: #e8837f; }

/* Runde 3: medicin, tryksår, dysfagi, blodsukker */
.f-toej-m { fill: rgba(255, 255, 255, .35); stroke: none; }
.f-madras, .f-pude, .f-glide, .f-aeske-med, .f-felt-pille, .f-etiket-hvid, .f-pille, .f-pille2, .f-roer, .f-stop, .f-trykpunkt, .f-celle, .f-fortykket, .f-mos, .f-strimmel, .f-laag-graa, .f-kalender, .f-stikpunkt, .f-kanyleboks, .f-kanyleboks-laag { stroke: var(--f-ink); stroke-width: 2; }
.f-madras { fill: #dbe7f5; }
.f-pude { fill: #fff3c4; }
.f-glide { fill: #9be7d8; stroke-dasharray: 6 4; }
.f-celle { fill: #bcd3ee; stroke-width: 1.6; }
.f-trykpunkt { fill: rgba(229, 72, 77, .75); stroke: #fff; stroke-width: 2.5; }
.f-aeske-med { fill: #eef3f9; }
.f-felt-pille { fill: #fff; stroke-width: 1.4; }
.f-felt-her { fill: color-mix(in srgb, var(--f-acc) 30%, #fff); stroke: var(--f-acc); stroke-width: 2.4; }
.f-etiket-hvid { fill: #fff; stroke-width: 1.4; }
.f-pille { fill: #f5c542; }
.f-pille2 { fill: #e8837f; }
.f-roer { fill: var(--f-acc); stroke-width: 1.6; }
.f-stop { fill: var(--f-nej); stroke: #fff; stroke-width: 4; }
.f-txt-stor { font-size: 26px; font-weight: 900; }
.f-flueben { fill: none; stroke: var(--f-ja); stroke-width: 3.5; }
.f-fortykket { fill: #f2b35e; stroke: none; opacity: .9; }
.f-mos { fill: #f6d55c; stroke-width: 1.6; }
.f-lyd-advar { stroke: var(--f-nej); }
.f-skjult { display: none; }
.f-strimmel { fill: #fff; stroke-width: 1.6; }
.f-laag-graa { fill: #9fb2c9; }
.f-kalender { fill: var(--f-nej); }
.f-stikpunkt { fill: #c81e1e; stroke: #fff; stroke-width: 2.5; }
.f-blod { fill: #c81e1e; stroke: var(--f-ink); stroke-width: 1.6; }
.f-kanyleboks { fill: #f5c542; }
.f-kanyleboks-laag { fill: #e5484d; }
/* Runde 4 (30.9.2026): stiksfelter, sejl, strømpe og iris */
.f-felt-a, .f-felt-b, .f-felt-c, .f-felt-d, .f-sejl, .f-stroempe, .f-iris { stroke: var(--f-ink); stroke-width: 1.6; }
.f-felt-a { fill: #f6d55c; }
.f-felt-b { fill: #b28bdc; }
.f-felt-c { fill: #7be4ee; }
.f-felt-d { fill: #e8837f; }
.f-sejl { fill: #9be7d8; stroke-width: 2; }
.f-stroempe { fill: #c9b6a2; stroke-width: 2.2; }
.f-iris { fill: #4f8fd6; }
.pr-grad-staerk { background: #16a34a; color: #fff; }
.pr-grad-svag { background: #f5c542; color: #3b2f00; }
.pr-grad-gp { background: #9fb2c9; color: #0d2038; }

/* ── Mærker ── */
.pr-proto { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; background: #fff3c4; color: #7a5a00; border: 1px solid #f0d27a; }
.pr-hero-maerker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pr-hero-maerker .hero-tag, .pr-hero-maerker .sd-kicker { margin: 0; }

/* ── Hero på procedureside ── */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.pr-hero > * { max-width: none; }
.pr-hero-fig { border-radius: 22px; padding: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); }
.pr-hero-fig .fig { border-radius: 16px; }
.pr-3d-bar { margin: 8px 4px 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.pr-3d-knap[aria-pressed="true"] { background: #fff; color: #0d2038; }
.pr-3d-hint { font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .85); }
.pr-hero .hero-actions { margin-top: 4px; }
.pr-status { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: .82rem; color: #d6e6f7; }
.pr-status b { color: #b8fff2; }
.pr-status-prik { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .22); }

/* ── Før du starter ── */
.pr-foer { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pr-boks { border: 1px solid var(--sd-line); border-radius: 16px; padding: 16px 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--problem-color) 6%, #fff), #fff); }
.pr-boks-bred { grid-column: 1 / -1; }
.pr-boks h3 { font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--problem-color) 75%, #000); margin-bottom: 8px; }
.pr-boks p { font-size: .95rem; line-height: 1.6; color: #2a3a52; }
.pr-punkter { list-style: none; display: grid; gap: 8px; }
.pr-punkter li { position: relative; padding-left: 22px; font-size: .95rem; line-height: 1.55; color: #2a3a52; }
.pr-punkter li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; border-radius: 3px; background: var(--problem-color); transform: rotate(45deg); }
.pr-punkter-obs li::before { border-radius: 50%; transform: none; background: #f0b34a; }
.pr-advarsel { display: flex; gap: 14px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: #fff6e6; border: 1px solid #f3cf8b; }
.pr-advarsel > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #f0a92e; color: #fff; font-weight: 900; }
.pr-advarsel p { color: #5e4712; font-size: .93rem; line-height: 1.55; margin-bottom: 6px; }

/* ── Kildechip ── */
.pr-kilde { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 4px 3px 10px; border-radius: 999px; text-decoration: none; font-size: .72rem; font-weight: 750; color: var(--sd-soft); background: #f1f5fb; border: 1px solid var(--sd-line); }
.pr-kilde::before { content: "📑"; font-size: .8rem; }
.pr-kilde:not(:has(b)) { padding-right: 10px; }
.pr-kilde:hover { color: var(--sd-ink); border-color: #b8c8dd; }
.pr-grad { padding: 2px 8px; border-radius: 999px; font-size: .66rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.pr-grad-skal { background: #0e9d87; color: #fff; }
.pr-grad-boer { background: #e7eefa; color: #1f3864; }

/* ── Trin ── */
.pr-trin-header { flex-wrap: wrap; }
.pr-trin-vaerktoej { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-fremskridt { font-size: .8rem; font-weight: 750; color: var(--sd-soft); }
.pr-fremskridt b { color: var(--sd-ink); }
.pr-lille-knap { min-height: 36px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--sd-line); background: #fff; color: var(--sd-ink); font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer; }
.pr-lille-knap:hover { border-color: var(--problem-color); }
.pr-lille-knap--acc { background: linear-gradient(135deg, var(--sd-teal), #5fe1cf); color: #06202a; border-color: transparent; }
.pr-fremskridt-bar { height: 6px; border-radius: 99px; background: #eaf0f7; overflow: hidden; margin: -4px 0 18px; }
.pr-fremskridt-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sd-teal), #7be4ee); transition: width .35s var(--sd-ease); }

.pr-gruppe + .pr-gruppe { margin-top: 22px; }
.pr-gruppe-titel { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--sd-soft); margin: 0 0 10px; }
.pr-gruppe-titel span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--sd-navy); color: #fff; font-size: .72rem; letter-spacing: 0; }
.pr-gruppe-titel::after { content: ""; flex: 1; height: 1px; background: var(--sd-line); }
.pr-trin-liste { list-style: none; display: grid; gap: 12px; }
.pr-trin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); gap: 18px; align-items: center; padding: 14px; border-radius: 18px; border: 1px solid var(--sd-line); background: #fff; scroll-margin-top: 90px; transition: border-color .2s, background .2s, box-shadow .2s; }
.pr-trin:hover { box-shadow: 0 18px 30px -26px rgba(13, 32, 56, .8); }
.pr-trin.er-udfoert { background: linear-gradient(90deg, color-mix(in srgb, var(--sd-teal) 8%, #fff), #fff 70%); border-color: color-mix(in srgb, var(--sd-teal) 45%, #fff); }
.pr-trin-tekst { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pr-trin-top { display: flex; gap: 12px; align-items: flex-start; }
.pr-afkryds { position: relative; flex: none; cursor: pointer; }
.pr-afkryds input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pr-nr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-weight: 900; font-size: .95rem; color: var(--sd-ink); background: color-mix(in srgb, var(--problem-color) 12%, #fff); border: 2px solid color-mix(in srgb, var(--problem-color) 35%, #fff); transition: background .2s, color .2s, transform .2s var(--sd-ease); }
.pr-afkryds input:checked + .pr-nr { background: var(--sd-teal); border-color: var(--sd-teal); color: transparent; transform: scale(1.04); }
.pr-afkryds input:checked + .pr-nr::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #06202a; font-size: 1.1rem; }
.pr-afkryds input:focus-visible + .pr-nr { outline: 3px solid rgba(18, 196, 168, .55); outline-offset: 2px; }
.pr-handling { font-size: 1.04rem; font-weight: 700; line-height: 1.5; color: var(--sd-ink); padding-top: 6px; }
.pr-tjek { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-left: 50px; }
.pr-tjek li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; font-size: .8rem; font-weight: 750; background: color-mix(in srgb, var(--sd-teal) 10%, #fff); border: 1px solid color-mix(in srgb, var(--sd-teal) 30%, #fff); color: var(--sd-ink); }
.pr-tjek li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sd-teal); color: #fff; font-size: .68rem; font-weight: 900; }
.pr-tabel { margin-left: 50px; border-collapse: collapse; font-size: .86rem; max-width: 320px; }
.pr-tabel th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sd-soft); padding: 4px 12px 4px 0; }
.pr-tabel td { padding: 6px 12px 6px 0; border-top: 1px solid var(--sd-line); font-weight: 650; }
.pr-hvorfor { margin-left: 50px; border-radius: 12px; background: #f6f9fd; border: 1px solid var(--sd-line); }
.pr-hvorfor summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; font-size: .82rem; font-weight: 850; color: color-mix(in srgb, var(--problem-color) 70%, #0d2038); }
.pr-hvorfor summary::-webkit-details-marker { display: none; }
.pr-hvorfor summary::before { content: "?"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--problem-color) 16%, #fff); font-size: .72rem; }
.pr-hvorfor[open] summary::before { content: "–"; }
.pr-hvorfor p { padding: 0 14px 12px; font-size: .92rem; line-height: 1.6; color: #2a3a52; }
.pr-trin-fod { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: 50px; }
.pr-trin-link { font-size: .82rem; font-weight: 850; color: var(--sd-teal-d); text-decoration: none; }
.pr-trin-link:hover { text-decoration: underline; }
.pr-fig { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--sd-line); }

/* Timer */
.pr-timer { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--sd-teal); background: #fff; color: var(--sd-ink); font: inherit; font-size: .78rem; font-weight: 850; cursor: pointer; font-variant-numeric: tabular-nums; }
.pr-timer:hover { background: color-mix(in srgb, var(--sd-teal) 10%, #fff); }
.pr-timer.koerer { background: var(--sd-teal); color: #06202a; }
.pr-timer.faerdig { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ── Fakta ── */
.pr-fakta { display: flex; align-items: center; gap: 20px; padding: 22px 26px; margin-bottom: 18px; border-radius: 22px; color: #fff;
  background: radial-gradient(400px 200px at 100% 0, rgba(18, 196, 168, .45), transparent 60%), linear-gradient(140deg, var(--sd-navy), #1b3f73); box-shadow: var(--sd-shadow); }
.pr-fakta-tal { flex: none; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: -.03em; color: #7be4ee; }
.pr-fakta p { color: #dbe8f6; line-height: 1.55; margin-bottom: 8px; }
.pr-fakta .pr-kilde { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); color: #cfe3f5; }

/* ── Typiske fejl ── */
.pr-fejl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pr-fejl { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 16px; border: 1px solid #f5d0d0; background: linear-gradient(180deg, #fff5f5, #fff); }
.pr-fejl h3 { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; font-weight: 850; color: #7f1d1d; line-height: 1.35; }
.pr-fejl h3::before { content: "✕"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #e5484d; color: #fff; font-size: .7rem; margin-top: 1px; }
.pr-fejl p { font-size: .88rem; line-height: 1.55; color: #3b4b63; flex: 1; }
.pr-fejl .pr-kilde { align-self: flex-start; }

/* ── Kilder ── */
.pr-status-kort { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, #34d399 10%, #fff); border: 1px solid color-mix(in srgb, #34d399 40%, #fff); margin-bottom: 14px; }
.pr-status-kort .pr-status-prik { margin-top: 6px; }
.pr-status-kort p { font-size: .9rem; color: #2a3a52; line-height: 1.55; margin-top: 2px; }
.pr-kildeliste { list-style: none; display: grid; gap: 8px; counter-reset: k; }
.pr-kildeliste li { counter-increment: k; display: grid; gap: 4px; padding: 12px 14px 12px 46px; position: relative; border-radius: 14px; border: 1px solid var(--sd-line); background: #fbfcff; }
.pr-kildeliste li::before { content: counter(k); position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--sd-navy); color: #fff; font-size: .75rem; font-weight: 900; }
.pr-kildeliste a { color: #1d4ed8; font-weight: 700; font-size: .92rem; line-height: 1.45; }
.pr-kilde-type { font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--sd-soft); }
.pr-note { margin-top: 14px; font-size: .85rem; color: var(--sd-soft); line-height: 1.55; }

/* ── Trin for trin (fokus) ── */
body.pr-fokus-aaben { overflow: hidden; }
.pr-fokus { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; background: var(--sd-bg); }
.pr-fokus[hidden] { display: none; }
.pr-fokus-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(14px, 4vw, 30px); background: var(--sd-navy); color: #fff; }
.pr-fokus-titel { display: block; font-weight: 900; letter-spacing: -.01em; }
.pr-fokus-gruppe { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7be4ee; }
.pr-fokus-luk { width: 44px; height: 44px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.1rem; cursor: pointer; }
.pr-fokus-prikker { display: flex; gap: 5px; padding: 10px clamp(14px, 4vw, 30px); background: var(--sd-navy); }
.pr-fokus-prikker span { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .2); transition: background .25s; }
.pr-fokus-prikker span.er-set { background: #7be4ee; }
.pr-fokus-prikker span.er-her { background: #fff; }
.pr-fokus-krop { flex: 1; overflow: auto; padding: clamp(16px, 3vw, 30px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 36px); align-items: center; max-width: 1100px; width: 100%; margin: 0 auto; }
.pr-fokus-krop .pr-fig { box-shadow: 0 20px 40px -30px rgba(13, 32, 56, .8), inset 0 0 0 1px var(--sd-line); }
.pr-fokus-krop .pr-handling { font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.4; font-weight: 800; padding: 0; }
.pr-fokus-krop .pr-tjek, .pr-fokus-krop .pr-hvorfor, .pr-fokus-krop .pr-trin-fod, .pr-fokus-krop .pr-tabel { margin-left: 0; }
.pr-fokus-krop .pr-trin-tekst { gap: 14px; }
.pr-fokus-krop .pr-afkryds { display: none; }
.pr-fokus-nr { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--problem-color); color: #fff; font-weight: 900; font-size: 1.1rem; }
.pr-fokus-bund { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px clamp(14px, 4vw, 30px) calc(12px + env(safe-area-inset-bottom)); background: var(--sd-card); border-top: 1px solid var(--sd-line); }
.pr-fokus-knap { min-height: 52px; min-width: 120px; padding: 10px 18px; border-radius: 14px; border: 1px solid var(--sd-line); background: #fff; color: var(--sd-ink); font: inherit; font-weight: 850; font-size: .95rem; cursor: pointer; }
.pr-fokus-knap:disabled { opacity: .4; cursor: default; }
.pr-fokus-knap--frem { background: linear-gradient(135deg, var(--sd-teal), #5fe1cf); border-color: transparent; color: #06202a; }
.pr-fokus-tal { font-weight: 850; color: var(--sd-soft); font-variant-numeric: tabular-nums; }
.pr-fokus-slut { grid-column: 1 / -1; text-align: center; display: grid; gap: 14px; justify-items: center; }
.pr-fokus-slut b { font-size: 1.5rem; }
.pr-fokus-slut .ikon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sd-teal); color: #06202a; font-size: 2rem; font-weight: 900; }

/* ── Oversigt ── */
.pr-oversigt { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 44px) 50px; }
.pr-principper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.pr-principper > div { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; padding: 16px 18px; border-radius: 18px; background: var(--sd-card); border: 1px solid var(--sd-line); box-shadow: var(--sd-shadow); }
.pr-principper span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font-size: 1.25rem; background: color-mix(in srgb, var(--sd-teal) 14%, #fff); }
.pr-principper b { font-size: .95rem; color: var(--sd-ink); }
.pr-principper p { font-size: .84rem; line-height: 1.5; color: var(--sd-soft); margin-top: 2px; }
.pr-filter { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; position: sticky; top: 62px; z-index: 50; background: linear-gradient(var(--sd-bg) 80%, transparent); }
.pr-filter::-webkit-scrollbar { display: none; }
.pr-filter-knap { flex: none; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--sd-line); background: var(--sd-card); color: var(--sd-ink); font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; scroll-margin-top: 90px; transition: border-color .2s, background .2s, transform .2s var(--sd-ease); }
.pr-filter-knap:hover { transform: translateY(-1px); border-color: var(--chip-farve, var(--sd-teal)); }
.pr-filter-knap.er-valgt { background: var(--sd-navy); border-color: var(--sd-navy); color: #fff; }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 8px; }
.pr-kort { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--sd-ink); background: var(--sd-card); border: 1px solid var(--sd-line); box-shadow: var(--sd-shadow); transition: transform .25s var(--sd-ease), box-shadow .25s, border-color .25s; --problem-color: var(--kort-farve); }
.pr-kort:hover { transform: translateY(-4px); border-color: var(--kort-farve); box-shadow: 0 26px 40px -26px rgba(13, 32, 56, .75); }
.pr-kort[hidden] { display: none; }
.pr-kort-fig { border-bottom: 1px solid var(--sd-line); }
.pr-kort-fig .f-bg { rx: 0; }
.pr-kort-tekst { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.pr-kort-kat { font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--kort-farve) 80%, #000); }
.pr-kort strong { font-size: 1.15rem; letter-spacing: -.02em; }
.pr-kort-sub { font-size: .86rem; line-height: 1.5; color: var(--sd-soft); }
.pr-kort-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.pr-kort-meta span { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #f1f5fb; color: var(--sd-soft); }
.pr-kort-meta .pr-kort-ok { background: color-mix(in srgb, #34d399 16%, #fff); color: #0f6b4b; }
.pr-kommer { margin-top: 34px; padding: clamp(20px, 3vw, 28px); border-radius: 22px; background: var(--sd-card); border: 1px dashed #c3d2e6; }
.pr-kommer h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.pr-kommer > p { font-size: .9rem; color: var(--sd-soft); margin: 4px 0 16px; max-width: 640px; }
.pr-kommer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.pr-kommer-gruppe[hidden], .pr-kommer li[hidden] { display: none; }
.pr-kommer h3 { font-size: .82rem; font-weight: 850; color: var(--sd-ink); margin-bottom: 6px; }
.pr-kommer ul { list-style: none; display: grid; gap: 4px; }
.pr-kommer li { font-size: .86rem; color: var(--sd-soft); padding-left: 16px; position: relative; }
.pr-kommer li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #9fb2c9; }

/* ── Mobil ── */
@media (max-width: 900px) {
  .pr-hero { grid-template-columns: 1fr; }
  .pr-hero-fig { max-width: 440px; }
  .pr-principper { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .pr-trin { grid-template-columns: 1fr; padding: 12px; }
  .pr-trin .pr-fig { order: -1; }
  .pr-foer { grid-template-columns: 1fr; }
  .pr-tjek, .pr-hvorfor, .pr-trin-fod, .pr-tabel { margin-left: 0; }
  .pr-trin-vaerktoej { margin-left: 0; width: 100%; }
  .pr-fokus-krop { grid-template-columns: 1fr; align-content: start; }
  .pr-fokus-knap { min-width: 0; flex: 1; }
  .pr-fokus-tal { flex: none; }
  .pr-fakta { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ── Mørk tilstand ── */
@media (prefers-color-scheme: dark) {
  :root { --f-bg-a: color-mix(in srgb, var(--problem-color, #12c4a8) 16%, #e9f0f8); }
  .pr-boks { background: linear-gradient(180deg, #17305a, #12233b); }
  .pr-boks p, .pr-punkter li, .pr-hvorfor p, .pr-fejl p, .pr-status-kort p { color: #cfdcec; }
  .pr-boks h3 { color: color-mix(in srgb, var(--problem-color) 45%, #fff); }
  .pr-trin, .pr-lille-knap, .pr-timer, .pr-fokus-knap:not(.pr-fokus-knap--frem) { background: #12233b; color: var(--sd-ink); }
  .pr-trin.er-udfoert { background: linear-gradient(90deg, #0f3d3a, #12233b 70%); }
  .pr-nr { background: #17305a; color: #e8f0fa; }
  .pr-hvorfor { background: #14294a; }
  .pr-hvorfor summary { color: #7be4ee; }
  .pr-kilde { background: #14294a; color: #9db2cc; }
  .pr-grad-boer { background: #223a5a; color: #cfdcec; }
  .pr-tjek li { background: #0f3d3a; border-color: #1d5c56; color: #e8f0fa; }
  .pr-fremskridt-bar { background: #1b3252; }
  .pr-advarsel { background: #3a2f16; border-color: #6b5320; }
  .pr-advarsel p { color: #f1d9a6; }
  .pr-fejl { background: linear-gradient(180deg, #3a1a22, #12233b); border-color: #5a2630; }
  .pr-fejl h3 { color: #fecaca; }
  .pr-status-kort { background: #0f3d2e; border-color: #1f6b4f; }
  .pr-kildeliste li { background: #14294a; }
  .pr-kildeliste a { color: #8cc8ff; }
  .pr-kort-meta span { background: #1b3252; }
  .pr-kort-meta .pr-kort-ok { background: #0f3d2e; color: #86efac; }
  .pr-kort-kat { color: color-mix(in srgb, var(--kort-farve) 45%, #fff); }
  .pr-kommer { border-color: #2a4468; }
  .pr-principper span { background: #0f3d3a; }
  .pr-proto { background: #3a2f16; color: #f5d98a; border-color: #6b5320; }
  .pr-filter-knap.er-valgt { background: var(--sd-teal); border-color: var(--sd-teal); color: #06202a; }
  .pr-gruppe-titel span { background: #2a4468; }
}

@media print {
  .pr-fokus, .pr-trin-vaerktoej, .pr-fremskridt-bar, .pr-timer, .pr-hero-fig, .pr-proto, #videre { display: none !important; }
  .pr-trin { break-inside: avoid; grid-template-columns: 1fr 180px; border-color: #ccc; }
  .pr-hvorfor > p { display: block !important; }
  .pr-hvorfor summary { padding-left: 0; }
  .pr-kilde { border: 0; background: none; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-fremskridt-bar span { transition: none; }
}