/* Flammepunkt Snittet – tegnedemoen (2.0.0-dev9): viser, hvordan man tegner i et værktøj – tegning ind, målestok, markeringer,
   resultat. Hentes kun på /vaerktoejer/atex/ og /vaerktoejer/solceller/ (functions.php) og efter style.css, som har indstillingerne (--fp-…).
   Forløbet står i fp-tegnedemo.js: dele med data-trin får klassen fp-vent, til deres trin er nået, og fp-nu, mens det spiller.
   Sidens markup er slutbilledet: uden script og ved "reducer bevægelse" står det stille. Alt, der vises, er opdigtet. */

.fp-tegn{container:fp-tegn/inline-size;margin-block:1.5rem;border:1px solid var(--fp-streg);background:var(--fp-flade)}
.fp-tegn__krop{display:grid;gap:16px;padding:16px}
/* trinene: redskaberne i den rækkefølge, man bruger dem */
.fp-tegn__trin{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.25rem,1fr));gap:8px 12px;margin:0;padding:0 0 14px;list-style:none;border-bottom:1px solid var(--fp-streg)}
.fp-tegn__trin li{display:flex;align-items:center;gap:8px;min-width:0;font-size:.875rem;line-height:1.25}
.fp-tegn__trin span{flex:none;display:grid;place-items:center;width:1.75rem;height:1.5rem;border:1px solid var(--fp-tekst-svag);font:400 .6875rem/1 var(--fp-skrift-mono)}
.fp-tegn__trin b{min-width:0;overflow-wrap:anywhere}
.fp-tegn__trin li.fp-vent{color:var(--fp-tekst-svag)}
.fp-tegn__trin li.fp-nu span{border-color:var(--fp-gloed);background:var(--fp-gloed);color:var(--fp-paa-gloed)}
/* tegnefladen: selve tegningen er altid skarp */
.fp-tegn__flade{min-width:0}
.fp-tegn svg{display:block;width:100%;max-width:600px;height:auto;margin-inline:auto;overflow:visible;fill:none;stroke:var(--fp-tekst);stroke-width:1.25;stroke-linejoin:round}
.fp-tegn svg .fin{stroke:var(--fp-tekst-svag);stroke-width:.75}
.fp-tegn svg text{fill:var(--fp-tekst);stroke:none;font:400 9px/1 var(--fp-skrift-mono);text-anchor:middle}
.fp-tegn .fp-tegn__streg{stroke-dasharray:1;stroke-dashoffset:0}
.fp-tegn__pkt circle,.fp-tegn__maal circle{fill:var(--fp-flade)}
.fp-tegn__maal circle,.fp-tegn :is(.fp-tegn__omraade,.fp-tegn__zone,.fp-tegn__paneler){stroke:var(--fp-gloed)}
.fp-tegn__zone circle{fill:var(--fp-gloed);fill-opacity:.2}
.fp-tegn__zone circle+circle{fill-opacity:.45}
.fp-tegn__kilde circle{fill:var(--fp-tekst);stroke:var(--fp-flade)}
.fp-tegn svg .fp-tegn__kilde text{fill:var(--fp-flade);font-size:9px}
.fp-tegn__paneler rect{fill:var(--fp-gloed);fill-opacity:.45;stroke-width:.75}
.fp-tegn__omrids>path{stroke-width:1.75}
.fp-tegn__aabning{fill:var(--fp-flade)}
/* resultatet under tegningen */
.fp-tegn__res{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--fp-tekst);font:400 .75rem/1.5 var(--fp-skrift-mono)}
.fp-tegn__res span{display:inline-flex;align-items:center;gap:8px}
.fp-tegn__res i{flex:none;box-sizing:border-box;width:12px;height:12px;border:1px solid var(--fp-gloed);background:rgb(185 58 14 / .55)}
.fp-tegn__res span+span i{background:rgb(185 58 14 / .2)}
.fp-tegn__res em{padding:2px 8px;border:1px dashed;border-radius:var(--fp-r-maerkat);font-style:normal;font-size:.6875rem}
.fp-tegn__fod{display:flex;justify-content:flex-end;padding:0 16px 12px}
.fp-tegn__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-tegn__fod button:hover{background:rgb(230 234 238 / .07)}
.fp-tegn figcaption{padding:10px 16px 12px;border-top:1px solid var(--fp-streg);color:var(--fp-tekst-svag);font-size:.9375rem;line-height:1.5}
/* dele, hvis trin ikke er nået endnu: væk med det samme (ingen overgang tilbage) */
.fp-tegn :is(svg,.fp-tegn__flade)>.fp-vent{opacity:0}
.fp-tegn .fp-vent .fp-tegn__streg{stroke-dashoffset:1}
.fp-tegn .fp-vent .fp-tegn__pkt circle{opacity:0}
@container fp-tegn (min-width:620px){
.fp-tegn__krop{grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:24px;padding:20px}
.fp-tegn__trin{grid-template-columns:1fr;align-content:start;gap:12px;padding:0 20px 0 0;border-bottom:0;border-right:1px solid var(--fp-streg)}
.fp-tegn svg{stroke-width:.9}
.fp-tegn__omrids>path{stroke-width:1.3}
.fp-tegn svg text{font-size:6.5px}
.fp-tegn svg .fp-tegn__kilde text{font-size:8px}
}

/* ---------- bevægelse: to greb (+ pegning på knappen). style.css slår alt fra ved "reducer bevægelse", og scriptet spiller da ikke. ---------- */
@media (prefers-reduced-motion:no-preference){
/* 1 · delen kommer til syne, når dens trin er nået – punkterne ét ad gangen, i takt med stregen */
.fp-tegn :is(svg,.fp-tegn__flade)>:not(.fp-vent){transition:opacity .35s var(--fp-ud)}
.fp-tegn :not(.fp-vent)>.fp-tegn__pkt circle{transition:opacity .15s linear calc(var(--n,0) * 1.1s)}
/* 2 · stregen tegner sig */
.fp-tegn :not(.fp-vent)>.fp-tegn__streg{transition:stroke-dashoffset 1.1s linear}
/* pegning på figurens knap */
.fp-tegn__fod button{transition:background-color .2s var(--fp-ud)}
}