/* Interaktiva figurer ([[figur:id]], includes/figurer.php + js/figurer/). Laddas bara på sidor med figur, hålls utanför neurobics.css
   (gzip-budgeten). Färger bara via tokens → ljust/mörkt följer temat. Mobil först: SVG:erna skalar med viewBox (fast proportion, ingen CLS). */
.nbfig{margin:32px 0;padding:16px 0 0;border-top:2px solid var(--ink);font-family:var(--font-sans);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--ink-2);scroll-margin-top:80px}
.nbfig-titel{font:600 var(--fs-base)/1.35 var(--font-sans);color:var(--ink);margin:0 0 12px}
.nbfig-ankare{color:inherit;text-decoration:none}
.nbfig-ankare:hover{text-decoration:underline}
.nbfig-yta{max-width:620px;margin:0 auto;touch-action:pan-y}
.nbfig-svg{display:block;width:100%;height:auto;overflow:visible}
[data-nbfig="normalfordelning"] .nbfig-yta{cursor:ew-resize}
[data-nbfig="glomskekurva"] .nbfig-yta:not(.nbfig-yta-b),[data-nbfig="betingning"] .nbfig-yta{cursor:pointer}

/* Reglage och knappar: platsen reserveras redan i serverns HTML, de syns när JS har tagit över (ingen layoutförskjutning) */
.nbfig-styr{max-width:620px;margin:12px auto 0;visibility:hidden}
.nbfig-redo .nbfig-styr{visibility:visible}
.nbfig-etikett{display:block;font-weight:600;color:var(--ink);margin-bottom:4px}
.nbfig-reglagerad{display:flex;align-items:center;gap:10px}
.nbfig-reglage{flex:1;width:100%;min-height:44px;accent-color:var(--accent);margin:0}
.nbfig-knapp{min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--ink-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font:600 16px/1 var(--font-sans);cursor:pointer}
.nbfig-knapp:hover{background:var(--surface-2)}
.nbfig-knapp:disabled{opacity:.45;cursor:default}
.nbfig-knapp:focus-visible,.nbfig-reglage:focus-visible,.nbfig summary:focus-visible,.nbfig-vaxel input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.nbfig-knapprad{display:flex;flex-wrap:wrap;gap:8px}
.nbfig-vaxel{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600;color:var(--ink)}
.nbfig-vaxel input{width:20px;height:20px;accent-color:var(--accent);margin:0}
.nbfig-utlas{max-width:620px;margin:10px auto 0;padding:10px 12px;background:var(--bg-alt);border-radius:var(--r-2);color:var(--ink);min-height:4.6em}
.nbfig-utlas b{font-weight:600}

/* Glömskekurvan: modellen i egen streckad ram, aldrig ihop med mätdata */
.nbfig-modell{max-width:620px;margin:20px auto 0;padding:12px;border:1.5px dashed var(--line-strong);border-radius:var(--r-3)}
.nbfig-modellrubrik{font:500 var(--fs-xs)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.nbfig-modell .nbfig-utlas{min-height:3.2em}

/* Betingning: steglistan under bilden */
.nbfig-steglista{max-width:620px;margin:12px auto 0;padding-left:1.4em}
.nbfig-steglista li{margin:0 0 6px;padding:4px 6px;border-radius:var(--r-2);cursor:pointer}
.nbfig-steglista li.aktiv{background:var(--accent-soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}

/* Matrisexemplen (samma ritkod som IQ-testet, currentColor) */
.nbfig-mx{max-width:620px;margin:0 auto 24px;color:var(--ink)}
.nbfig-mx-rubrik{font-weight:600;margin-bottom:8px}
.nbfig-mx-matris{max-width:320px;margin:0 auto}
.nbfig-mx-matris svg{display:block;width:100%;height:auto}
.nbfig-mx-alt{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 0;padding:0}
@media (min-width:560px){.nbfig-mx-alt{grid-template-columns:repeat(8,1fr)}}
.nbfig-mx-alt li{border:1px solid var(--line);border-radius:var(--r-2);padding:4px;text-align:center;margin:0}
.nbfig-mx-alt svg{display:block;width:100%;height:auto;aspect-ratio:1}
.nbfig-mx-bokstav{font:600 13px/1.4 var(--font-sans);color:var(--ink-2)}
.nbfig-mx:has(.nbfig-losning[open]) .ratt{border:2px solid var(--success);background:var(--accent-soft)}
.nbfig-mx:has(.nbfig-losning[open]) .ratt .nbfig-mx-bokstav::after{content:" ✓ rätt";color:var(--success)}
.nbfig-losning{margin-top:8px}
.nbfig-losningstext{padding:8px 14px 12px;color:var(--ink-2)}

/* Länknot under figuren (t.ex. till riktiga normeringstabeller) */
.nbfig-lanknot{max-width:620px;margin:10px auto 0;color:var(--ink-2)}

/* Figurtext, källa, tabell, citera */
.nbfig figcaption{margin-top:14px;display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}
.nbfig figcaption>span{display:block}
.nbfig-notrad{color:var(--ink-3)}
.nbfig-kalla{display:inline}
.nbfig-kalla+.nbfig-kalla::before{content:" · "}
.nbfig a{display:inline;min-height:0;border:0;color:var(--link);text-decoration:underline;word-break:break-word}
.nbfig details{border-top:1px solid var(--line);border-bottom:0}
.nbfig details:last-of-type{border-bottom:1px solid var(--line)}
.nbfig summary{min-height:44px;padding:0 2px;font-size:var(--fs-sm);color:var(--ink)}
.nbfig-tabellram{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.nbfig table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
.nbfig th,.nbfig td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.nbfig thead th{color:var(--ink);font-weight:600;white-space:normal;vertical-align:bottom}
.nbfig th:first-child,.nbfig td:first-child{text-align:left}
.nbfig-not{color:var(--ink-3);font-size:13px;padding-bottom:10px}
.nbfig-ref{font:13px/1.5 var(--font-mono);background:var(--bg-alt);padding:10px 12px;border-radius:var(--r-2);color:var(--ink);word-break:break-word;user-select:all}
.nbfig-kopiera{margin:8px 0 12px;min-height:40px;padding:0 14px;border:1px solid var(--ink-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font:600 14px var(--font-sans);cursor:pointer}

/* SVG-klasser (samma namn som den fristående SVG:ns inbakade stil i _verktyg/bygg_figurer.mjs) */
.nbfig .t-axel,.nbfig .t-liten,.nbfig .t-ikon,.nbfig .t-not,.nbfig .t-kol{font:12px var(--font-sans);fill:var(--ink-3)}
.nbfig .t-axel{font-size:13px}
.nbfig .t-liten{fill:var(--ink-2)}
.nbfig .t-not{font-size:11px;font-style:italic}
.nbfig .t-kol{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:11px}
.nbfig .t-val,.nbfig .t-varde,.nbfig .t-steg,.nbfig .t-stegnamn{font:600 13px var(--font-sans);fill:var(--ink)}
.nbfig .t-modell{font:500 11px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--ink-3)}
.nbfig .t-varde{paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.nbfig .f-etikettram{fill:var(--surface-2);stroke:var(--warning);stroke-width:1.2}
.nbfig .t-etikett{font:600 13px var(--font-sans);fill:var(--ink)}
.nbfig .f-stapel{fill:var(--chart-norm)}
.nbfig .f-stapel-val{fill:var(--accent-soft)}
.nbfig .s-stapelrand{stroke:var(--chart-you);stroke-width:2.4}
.nbfig .f-traff{fill:transparent;cursor:pointer}
.nbfig .t-plus{font:600 18px var(--font-sans);fill:var(--ink-2)}
.nbfig .s-axel{stroke:var(--line-strong);stroke-width:1}
.nbfig .s-nat{stroke:var(--line);stroke-width:1}
.nbfig .s-mark{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 3}
.nbfig .s-kurva,.nbfig .s-val{stroke:var(--ink);stroke-width:2}
.nbfig .f-under{fill:var(--chart-norm)}
.nbfig .f-over{fill:var(--accent-soft)}
.nbfig .s-rand{stroke:var(--chart-you);stroke-width:2.2}
.nbfig .s-ruta{stroke:var(--line-strong);stroke-width:1}
.nbfig .s-serie{stroke-width:2;fill:none}
.nbfig .s-serie1{stroke:var(--navy)}
.nbfig .s-serie2{stroke:var(--chart-you)}
.nbfig .s-streckad{stroke-dasharray:6 4}
.nbfig .f-serie1{fill:var(--navy)}
.nbfig .f-serie2{fill:var(--chart-you)}
.nbfig .m-val{stroke:var(--bg);stroke-width:2}
.nbfig .f-val{fill:var(--chart-ci)}
.nbfig .s-modell-utan{stroke:var(--chart-beat);stroke-width:2;stroke-dasharray:5 4;fill:none}
.nbfig .s-modell-med{stroke:var(--chart-you);stroke-width:2.4;fill:none}
.nbfig .f-rep{fill:var(--chart-you)}
.nbfig .f-ikon{fill:var(--ink-2)}
.nbfig .s-ikon{stroke:var(--ink-2);stroke-width:1.6;fill:none}
.nbfig .f-droppe{fill:var(--chart-you)}
.nbfig .s-droppe{fill:none;stroke:var(--ink-2);stroke-width:1.6}
.nbfig .s-pil{stroke:var(--ink-2);stroke-width:1.8;fill:none}
.nbfig .f-stegbg{fill:var(--bg-alt)}
.nbfig .aktiv .f-stegbg{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.nbfig .dimmad{opacity:.35}
.nbfig-steg{transition:opacity .2s}
@media (prefers-reduced-motion:reduce){.nbfig-steg{transition:none}}
:root[data-theme="dark"] .nbfig .s-serie1{stroke:var(--on-navy-2)}
:root[data-theme="dark"] .nbfig .f-serie1{fill:var(--on-navy-2)}