/* Testsidorna i mallar/test-motor2.php (etapp 6–7). Bygger på designsystemets .stage/.answers/.report; laddas bara där. Delade CSS:en rörs inte. */
.t2-stage .t2-scen{min-height:clamp(180px,34vh,300px);padding:12px 0 4px}
.t2-klocka{font-variant-numeric:tabular-nums;font-weight:600}
.t2-klocka.lite-tid{color:#E3B93B}
.t2-scen .stim{height:clamp(160px,30vh,260px)}
.t2-knapprad{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.t2-stage .btn-ghost,.t2-stage .mx-knapp{color:var(--stage-ink);background:none;border:1px solid var(--stage-line);border-radius:var(--r-2);min-height:44px;padding:0 14px;cursor:pointer;font:500 15px var(--font-sans)}
.t2-stage .btn-ghost:disabled,.t2-stage .mx-knapp:disabled{opacity:.4;cursor:default}
.t2-stage .input{background:var(--stage-2);color:var(--stage-ink);border-color:var(--stage-line)}
.t2-fb{font:500 18px var(--font-sans);text-align:center;margin:8px 0}

/* Matristestet */
.mx-uppgift{display:grid;gap:16px;align-items:start}
@media (min-width:760px){.mx-uppgift{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.mx-fraga{color:var(--stage-ink)}
.mx-matris{width:100%;max-width:380px;height:auto;display:block;margin:0 auto}
.mx-ledtext{margin:0 0 8px;color:var(--stage-ink-2);font-size:15px}
.answers.mx-alts{grid-template-columns:repeat(4,1fr);gap:8px}   /* 6 och 8 alternativ får samma radhöjd → ingen höjdändring mellan nivåerna */
.answers.mx-alts button{min-height:0;aspect-ratio:1/1;padding:18px 6px 6px;color:var(--stage-ink)}
.answers.mx-alts button svg{width:100%;height:100%;max-width:96px}
.answers.mx-alts button kbd{font-size:13px;font-weight:600;color:var(--stage-ink)}
.answers.mx-alts button[aria-pressed="true"]{border:3px solid var(--brand-cyan);background:#1F3A4A}
.answers.mx-alts button[aria-pressed="true"] .mx-ikon{display:block;background:var(--brand-cyan);color:#04202A}
.answers.mx-alts button[aria-pressed="true"] .mx-ikon::before{content:"✓"}
.answers.mx-alts button .mx-ikon{display:none;position:absolute;top:4px;right:6px;width:20px;height:20px;border-radius:10px;font:700 13px/20px var(--font-sans);text-align:center}
/* Rätt/fel i träningen: ram + ikon i hörnet (absolut placerad – knappen ändrar aldrig höjd) */
.answers.mx-alts button.ratt{border:3px solid #4CAF50}
.answers.mx-alts button.ratt .mx-ikon{display:block;background:#4CAF50;color:#06210A}
.answers.mx-alts button.ratt .mx-ikon::before{content:"✓"}
.answers.mx-alts button.fel{border:3px dashed #E85A5A}
.answers.mx-alts button.fel .mx-ikon{display:block;background:#E85A5A;color:#2A0606}
.answers.mx-alts button.fel .mx-ikon::before{content:"✗"}
.answers.mx-alts button[aria-disabled="true"]{cursor:default}
/* Fast höjd i testytan: återkopplingen har en reserverad yta på desktop (scroll vid lång text) och visas i en modal under 700 px */
.mx-fb{margin-top:12px;font-size:15px;color:var(--stage-ink);height:170px;overflow:auto}
.mx-fb p{margin:0 0 8px}
.mx-fb-rubrik{font-weight:600;font-size:17px}
@media (max-width:700px){.mx-fb{display:none}}
.mx-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,10,18,.72)}
.mx-modal[hidden]{display:none!important}
.mx-modal-ruta{width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:var(--r-3);padding:22px 20px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.mx-modal-ruta h2{margin:0 0 10px;font-size:22px}
.mx-modal-ruta p{margin:0 0 14px}
html.mx-modal-oppen{overflow:hidden}
.t2-stage [hidden]{display:none!important}
.mx-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;flex-wrap:wrap}
.mx-punkter{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.mx-punkter button{min-width:32px;height:32px;border-radius:16px;border:1px solid var(--stage-line);background:none;color:var(--stage-ink-2);font:500 13px var(--font-mono);cursor:pointer;padding:0}
.mx-punkter button.besvarad{background:var(--stage-2);color:var(--stage-ink);border-color:#5A7591;text-decoration:underline}
.mx-punkter button.aktiv{outline:2px solid var(--brand-cyan);outline-offset:1px;color:var(--stage-ink)}
.mx-lamna{display:flex;justify-content:flex-end;margin-top:10px}
@media (max-width:520px){.mx-nav .mx-punkter{order:3;width:100%}}

/* Facit på resultatsidan (ljus bakgrund: figurerna ritas med currentColor) */
.t2-facit{margin:28px 0}
.mx-facit-rad{border:1px solid var(--line);border-radius:var(--r-2);margin:0 0 8px;background:var(--surface)}
.mx-facit-rad summary{cursor:pointer;padding:10px 12px;min-height:44px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mx-status{font:600 12px var(--font-mono);text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:10px;border:1px solid var(--line-strong)}
.mx-facit-rad.ratt .mx-status::before{content:"✓ "}
.mx-facit-rad.fel .mx-status::before{content:"✗ "}
.mx-facit-rad.hoppad .mx-status::before{content:"– "}
.mx-facit-kropp{display:grid;gap:16px;padding:0 12px 12px;color:var(--ink)}
@media (min-width:640px){.mx-facit-kropp{grid-template-columns:240px 1fr}}
.mx-facit-kropp .mx-matris{max-width:240px;margin:0}
.mx-facit-alt{display:flex;align-items:center;gap:10px}
.mx-facit-alt svg{width:64px;height:64px;flex:none;border:1px solid var(--line);border-radius:6px}

/* Etapp 6: ordminne, sifferminne, CRT, talföljder, memory, läshastighet */
.t2-ord{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;align-content:center;padding:0 8px;font:700 clamp(22px,5vw,32px)/1.2 var(--font-sans);letter-spacing:.04em}
.t2-valda{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0 14px}
.t2-valda span{min-width:64px;min-height:36px;padding:6px 10px;border:1px dashed var(--stage-line);border-radius:var(--r-2);color:var(--stage-ink-2);font:500 15px var(--font-sans);text-align:center}
.t2-valda span.fylld{border-style:solid;color:var(--stage-ink);background:var(--stage-2)}
.answers.t2-brickor{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.answers.t2-brickor{grid-template-columns:repeat(4,1fr)}}
.answers.t2-brickor button{min-height:52px;font:500 17px var(--font-sans)}
.answers button:disabled{opacity:.35;cursor:default}
.t2-fbord{text-align:center;padding:0 8px}
.t2-fbord .ok{text-decoration:underline}
.t2-fbord .nej{opacity:.85}
.t2-inrad{display:flex;gap:8px;align-items:center;max-width:460px;margin:0 auto}
.t2-inrad .input{flex:1;min-width:0;font:500 24px var(--font-mono);letter-spacing:.1em}
.t2-enhet{color:var(--stage-ink-2);font-size:15px}
.t2-fraga{max-width:620px;margin:0 auto;padding:16px 8px;font-size:17px;line-height:1.55;color:var(--stage-ink)}
.t2-fraga p{margin:0 0 10px}
.t2-foljd{font:600 clamp(24px,6vw,40px)/1 var(--font-mono);gap:4px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.t2-lucka{display:inline-block;min-width:1.6em;padding:2px 8px;border:2px dashed currentColor;border-radius:8px;text-align:center}
.t2-sep{opacity:.5;margin-right:6px}
.t2-bradet{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:0 auto}
.t2-kort{aspect-ratio:1/1;border-radius:var(--r-2);border:1px solid var(--stage-line);background:var(--stage-2);color:var(--stage-ink);cursor:pointer;padding:18%;display:grid;place-items:center}
.t2-kort svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.t2-kort.upp{background:#1F3A4A;border-color:var(--brand-cyan)}
.t2-kort.hittad{background:var(--stage);border-style:dashed;opacity:.75;cursor:default}
.t2-kort:focus-visible{outline:3px solid var(--brand-cyan);outline-offset:2px}
.t2-text{max-width:640px;margin:0 auto;padding:8px;font:400 19px/1.7 var(--font-serif,var(--font-sans));color:var(--stage-ink)}
.t2-text:focus{outline:none}
.answers.t2-lista-svar{grid-template-columns:1fr;gap:8px;max-width:620px;margin:0 auto}
.answers.t2-lista-svar button{flex-direction:row;justify-content:flex-start;min-height:56px;padding:10px 16px 10px 40px;font:500 16px var(--font-sans);text-align:left}
.answers.t2-lista-svar button kbd{top:50%;left:14px;transform:translateY(-50%)}
.t2-lista{padding-left:1.2em}
.t2-lista li{margin:0 0 10px}

/* CRT, talföljder, läshastighet (svar rättas på servern): fast höjd, återkopplingen i en reserverad yta (desktop) eller modal (under 700 px) */
.t2-quiz{min-height:430px;display:flex;flex-direction:column;justify-content:flex-start;gap:12px}
.t2-quiz .t2-fraga{min-height:120px}
.t2-fbyta{height:150px;overflow:auto;font-size:15px;color:var(--stage-ink);max-width:620px;width:100%;margin:0 auto}
.t2-fbyta p{margin:0 0 8px}
@media (max-width:700px){.t2-fbyta{display:none}.t2-quiz{min-height:360px}}
.t2-quiz .answers button .mx-ikon{display:none;position:absolute;top:4px;right:6px;width:20px;height:20px;border-radius:10px;font:700 13px/20px var(--font-sans);text-align:center}
.t2-quiz .answers button[aria-pressed="true"]{border:3px solid var(--brand-cyan);background:#1F3A4A}
.t2-quiz .answers button.ratt{border:3px solid #4CAF50}
.t2-quiz .answers button.ratt .mx-ikon{display:block;background:#4CAF50;color:#06210A}
.t2-quiz .answers button.ratt .mx-ikon::before{content:"✓"}
.t2-quiz .answers button.fel{border:3px dashed #E85A5A}
.t2-quiz .answers button.fel .mx-ikon{display:block;background:#E85A5A;color:#2A0606}
.t2-quiz .answers button.fel .mx-ikon::before{content:"✗"}
.t2-quiz .answers button[aria-disabled="true"]{cursor:default}