/* Flammepunkt Snittet – landingssiden /vaerktoejer/ (2.0.0-dev8): værktøjsregistret, minidemoerne af arbejdsgangen (udkast 10)
   og Cert-illustrationen. Hentes kun på /vaerktoejer/ (functions.php) og efter style.css, som har indstillingerne (--fp-…).
   Forløbet står i fp-vaerktoejer.js. Sidens markup er slutbilledet: uden script og ved "reducer bevægelse" står det stille. */

/* to spalter: tekst | figur. Stablet på telefon og tablet. */
.wp-block-columns.fp-vt-to{display:grid;gap:28px;align-items:start}
.fp-vt-to h2[id]{scroll-margin-top:3.5rem}
.fp-vt-to .fp-eyebrow+h2{margin-block-start:.5rem}
.fp-vt-to .wp-block-list{padding-left:1.25rem}
.fp-vt-to .wp-block-list li+li{margin-top:.35rem}
:is(.fp-vtdemo,.fp-certvis){margin:0}
:is(.fp-vtdemo,.fp-certvis) figcaption{color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.5}

/* ---------- værktøjsregistret: rækker som i en tegningsliste. Hele rækken er trykflade. ---------- */
h2.fp-reg__titel{margin:0 0 10px;font:400 .75rem/1.5 var(--fp-skrift-mono);letter-spacing:0;color:var(--fp-tekst-svag)}
.fp-reg{container:fp-reg/inline-size;margin:0;padding:0;list-style:none;border-top:1px solid var(--fp-tekst)}
.fp-reg li{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:6px 12px;min-height:64px;margin-inline:-12px;padding:14px 12px;border-radius:var(--fp-r-raekke)}
.fp-reg li::before{content:"";position:absolute;inset:auto 12px 0;height:1px;background:var(--fp-streg)}
.fp-reg li:hover{background:rgb(230 234 238 / .07)}
.fp-reg .fp-num{padding-top:.4em}
.fp-reg a{display:inline-block;min-width:44px;margin-block:-11px;padding-block:11px;font-weight:600;font-size:1.125rem;line-height:1.3;text-decoration:none}
.fp-reg a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.fp-reg li:hover a{text-decoration:underline}
.fp-reg a:focus-visible{outline:0}
.fp-reg li:has(a:focus-visible){outline:2px solid var(--fp-tekst);outline-offset:2px}
.fp-reg p{margin:2px 0 0;color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.5}
/* status: fyldt = kan prøves her, tom = kræver log-ind, stiplet = kommer. Teksten siger det samme. */
.fp-reg__status{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:8px;font:400 .75rem/1.5 var(--fp-skrift-mono)}
.fp-reg__status::before{content:"";flex:none;box-sizing:border-box;width:10px;height:10px;border:1px solid}
.fp-reg__status--her::before{border-color:var(--fp-gloed);background:var(--fp-gloed)}
.fp-reg__status--snart{color:var(--fp-tekst-svag)}
.fp-reg__status--snart::before{border-style:dashed}
@container fp-reg (min-width:540px){
.fp-reg li{grid-template-columns:2rem minmax(0,1fr) auto}
.fp-reg__status{grid-area:1/3;align-self:start;padding-top:.3em}
}

/* ---------- minidemoen: værktøjets trin som etager i et snit; resultatet står i bunden ---------- */
.fp-vtdemo{container:fp-vtdemo/inline-size;border:1px solid var(--fp-streg);background:var(--fp-flade)}
.fp-vtdemo__krop{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px;padding:16px 16px 0}
.fp-vtdemo__snit svg{display:block;width:100%;height:14px;overflow:visible;fill:none;stroke:var(--fp-tekst);stroke-width:2}
.fp-vtdemo ol{margin:0;padding:0;list-style:none;border-inline:2px solid var(--fp-tekst)}
.fp-vtdemo li{display:flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:4px;border-top:2px solid var(--fp-tekst);color:var(--fp-tekst-svag);font:400 .75rem/1.25 var(--fp-skrift-mono)}
.fp-vtdemo li b{display:none;flex:1;font:400 .875rem/1.25 var(--fp-skrift)}
.fp-vtdemo li[data-s="done"]{color:var(--fp-tekst)}
.fp-vtdemo li[data-s="done"]::after{content:"";flex:none;width:.6em;height:.3em;margin-top:-.25em;border-left:2px solid;border-bottom:2px solid;transform:rotate(-45deg)}
.fp-vtdemo li[data-s="nu"]{background:var(--fp-gloed);color:var(--fp-paa-gloed)}
.fp-vtdemo__snit i{display:block;height:10px;margin-inline:-8px;border-top:2px solid var(--fp-tekst);background:repeating-linear-gradient(-55deg,transparent 0 9px,var(--fp-tekst) 9px 10.5px)}
.fp-vtdemo__panel{display:grid;grid-template-rows:auto 1fr auto auto;gap:12px;min-width:0;padding-bottom:16px}
.fp-vtdemo__panel p{margin:0}
.fp-vtdemo__trin{min-height:2.6em;padding-bottom:8px;border-bottom:1px solid var(--fp-streg);font-weight:600;line-height:1.3}
.fp-vtdemo__felt{display:grid;gap:6px;align-content:start;font-size:.9375rem;font-weight:600}
.fp-vtdemo__felt b{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--fp-tekst-svag);border-radius:var(--fp-r-betjening);font:400 1rem/1 var(--fp-skrift-mono)}
.fp-vtdemo__felt b::after{content:"";width:1px;height:1.2em;margin-left:2px;background:var(--fp-gloed)}
.fp-vtdemo__felt:has([data-fp-felt]:empty){visibility:hidden}
.fp-har .fp-vtdemo__felt{display:none}
.fp-vtdemo:not(.fp-har) :is(.fp-source,.fp-vtdemo__res em){visibility:hidden}
.fp-vtdemo .fp-source{grid-row:4}
.fp-vtdemo__res{grid-row:3;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-top:12px;border-top:1px solid var(--fp-tekst);font:400 .75rem/1.5 var(--fp-skrift-mono)}
.fp-vtdemo__res b{position:relative;font:400 1.75rem/1 var(--fp-skrift-mono)}
.fp-vtdemo__res b::after{content:"";position:absolute;inset:auto 0 -5px;height:2px;background:var(--fp-gloed);transform:scaleX(0);transform-origin:left}
.fp-har .fp-vtdemo__res b::after{transform:scaleX(1)}
.fp-har .fp-vtdemo__res b span:first-child,.fp-vtdemo:not(.fp-har) .fp-vtdemo__res b span+span{display:none}
.fp-vtdemo__res em{padding:2px 8px;border:1px dashed;border-radius:var(--fp-r-maerkat);font-style:normal;font-size:.6875rem}
.fp-vtdemo__fod{display:flex;justify-content:flex-end;padding:0 16px 12px}
.fp-vtdemo__fod button{min-height:44px;padding:0 16px;border:1px solid var(--fp-tekst-svag);border-radius:var(--fp-r-betjening);background:none;color:inherit;font:400 .875rem/1 var(--fp-skrift-mono);cursor:pointer}
.fp-vtdemo__fod button:hover{background:rgb(230 234 238 / .07)}
.fp-vtdemo figcaption{padding:10px 16px 12px;border-top:1px solid var(--fp-streg)}
@container fp-vtdemo (min-width:460px){
.fp-vtdemo__krop{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:0 24px}
.fp-vtdemo li{justify-content:flex-start;padding:4px 10px}
.fp-vtdemo li b{display:block}
}

/* ---------- Cert: et opslag som rækker med hårstreger. Ingen ramme, ingen felter. ---------- */
.fp-certvis dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(9.5rem,40%),1fr));margin:0;border-top:1px solid var(--fp-tekst)}
.fp-certvis dl>div{padding:12px 12px 12px 0;border-bottom:1px solid var(--fp-streg)}
.fp-certvis dl>div:last-child{grid-column:1/-1}
.fp-certvis dt{font:400 .75rem/1.5 var(--fp-skrift-mono);color:var(--fp-tekst-svag)}
.fp-certvis dd{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-weight:600}
.fp-certvis svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--fp-tekst);stroke-width:1.5}
.fp-certvis svg path{stroke:var(--fp-gloed);stroke-width:2.5}
.fp-certvis figcaption{padding-top:10px}

@media (min-width:1000px){
.wp-block-columns.fp-vt-to{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
}

/* ---------- bevægelse: tre greb. style.css slår alt fra ved "reducer bevægelse", og scriptet spiller da ikke. ---------- */
@media (prefers-reduced-motion:no-preference){
/* 1 · demoen: værdien skrives ind (scriptet), og en streg tegnes under resultatet */
.fp-vtdemo__res b::after{transition:transform .6s var(--fp-ud)}
/* 2 · etagen lyser op, når man når den */
.fp-vtdemo li{transition:background-color .35s var(--fp-ud),color .35s var(--fp-ud)}
/* 3 · pegning: en svag bund på rækken i registret og på figurens knap */
.fp-reg li,.fp-vtdemo__fod button{transition:background-color .2s var(--fp-ud)}
}