/* =====================================================================
   sc8.1 - Spændingsrækken
   Stilark. Samme udtryk som de andre superanimationer (grundlaget er sc7.4's).
   BEMAERK: decimaltal skrives med PUNKTUM i CSS (0.25rem) - aldrig med
   dansk komma. Dansk komma bruges kun i tekst, som brugeren laeser.
   ===================================================================== */

:root {
    --bund:        #1b1b21;
    --scene-bund:  #14141a;
    --panel:       #2b2b36;
    --panel-2:     #333340;
    --panel-3:     #3d3d4b;
    --linje:       #464655;
    --tekst:       #f2f3f5;
    --tekst-svag:  #a9b0ba;
    --tekst-mat:   #7e8590;

    --blaa:        #3d9ee0;
    --blaa-mork:   #2a76ac;
    --orange:      #e6892a;
    --groen:       #3fae72;
    --groen-mork:  #2b7d51;
    --roed:        #e05446;
    --roed-mork:   #a33529;
    --gul:         #f2c53d;
    --lilla:       #9b6bd6;

    --plus-lys:    #f7a79d;
    --minus-lys:   #97cff5;

    --radius:      10px;
    --radius-lil:  6px;
    --skygge:      0 4px 14px rgba(0, 0, 0, 0.35);
    --panel-bredde: 430px;
    --panel-bredde-3: 580px;      /* fane 3: plads til reaktionsskemaet paa én linje */
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bund);
    color: var(--tekst);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   TOPLINJE
   --------------------------------------------------------------------- */
.top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background-color: #15151b;
    border-bottom: 1px solid #33333f;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    z-index: 20;
    flex-shrink: 0;
}

/* I en samling i fuld skaerm staar knappen, der gendanner panelet, i hjoernet */
.samling-fuld .top { padding-left: 56px; }

.top h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.top h1 .ikon { font-size: 1.1rem; margin-right: 3px; color: var(--gul); }

.faneknapper {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.faneknapper::-webkit-scrollbar { display: none; }

.faneknap {
    background-color: var(--panel-2);
    color: var(--tekst-svag);
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: var(--radius-lil);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.faneknap .nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: var(--panel-3);
    color: var(--tekst-svag);
    font-size: 0.7rem;
    flex-shrink: 0;
}

.faneknap:hover { background-color: var(--panel-3); color: var(--tekst); }
.faneknap.aktiv { background-color: var(--blaa); color: #ffffff; }
.faneknap.aktiv .nr { background-color: rgba(255, 255, 255, 0.25); color: #ffffff; }

.ikonknap {
    background: transparent;
    border: 1px solid #4a4a58;
    color: var(--tekst-svag);
    border-radius: 4px;
    width: 30px;
    height: 28px;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
}

.ikonknap:hover { background-color: var(--panel-3); color: var(--tekst); }

/* ---------------------------------------------------------------------
   HOVEDLAYOUT
   --------------------------------------------------------------------- */
main { flex: 1; position: relative; min-height: 0; }

.fane {
    position: absolute;
    inset: 0;
    display: none;
    grid-template-columns: minmax(0, 1fr) var(--panel-bredde);
}

.fane.aktiv { display: grid; }

.scene {
    position: relative;
    min-width: 0;
    min-height: 0;
    background-color: var(--scene-bund);
    overflow: hidden;
}

.scene > canvas { display: block; width: 100%; height: 100%; }
.scene.medtekst { padding-bottom: 50px; }

.scene-mrk {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 50px;
    display: block;
    padding: 15px 20px 10px;
    background: linear-gradient(to top, rgba(8, 8, 13, 0.97) 60%, rgba(8, 8, 13, 0.6));
    font-size: 0.9rem;
    line-height: 1.45;
    color: #dde3ea;
    text-align: center;
    pointer-events: none;
    z-index: 4;
}

.scene-mrk b { color: #ffffff; }

/* Usynlige felter oven paa laerredet, som rundvisningen peger paa */
.anker { position: absolute; pointer-events: none; }

/* Kemichaels taleboble under praesentationen. Den ligger oven paa
   scenen, saa intet i tegningen kan daekke den, og knappen Naeste staar
   i selve boblen: han gaar foerst videre, naar eleven trykker.
   js/praesentation.js saetter left og top hvert billede og vaelger den
   plads ved hans hoved, der ikke daekker det, han peger paa. */
.intro-boble {
    position: absolute;
    left: 90px;
    top: 120px;
    z-index: 31;
    width: clamp(256px, 36%, 330px);
    max-width: calc(100% - 16px);
    background-color: #fffdf6;
    color: #1f2328;
    border: 2px solid #2a2f36;
    border-radius: 12px;
    padding: 10px 14px 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.intro-tekst {
    margin: 0 0 9px;
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.32;
}

.intro-linje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    white-space: nowrap;
}

.intro-naeste {
    background-color: var(--blaa-mork);
    color: #ffffff;
    border: 2px solid var(--gul);
    border-radius: 999px;
    padding: 7px 16px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    animation: bank 1.7s ease-out infinite;
}

.intro-naeste span { color: var(--gul); margin-left: 3px; }
.intro-naeste:hover { background-color: var(--blaa); }

.intro-tal {
    font-size: 0.86rem;
    font-weight: 700;
    color: #5b6470;
    font-variant-numeric: tabular-nums;
}

.intro-spring {
    margin-left: auto;
    background-color: transparent;
    color: #4a525d;
    border: 1px solid #b9b5a6;
    border-radius: 999px;
    padding: 5px 9px;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.intro-spring:hover { background-color: #ece8d9; color: #1f2328; }

/* Halen: et lille kvadrat paa hoejkant i boblens kant. Nedad, naar
   boblen staar over hans hoved, og mod venstre, naar den staar ved
   siden af (klassen .ved-siden). --hale er afstanden langs kanten. */
.intro-hale {
    position: absolute;
    left: calc(var(--hale, 60px) - 9px);
    bottom: -10px;
    width: 16px;
    height: 16px;
    background-color: #fffdf6;
    border-right: 2px solid #2a2f36;
    border-bottom: 2px solid #2a2f36;
    transform: rotate(45deg);
}

.intro-boble.ved-siden .intro-hale {
    left: -10px;
    bottom: auto;
    top: calc(var(--hale, 40px) - 9px);
    border-right: none;
    border-bottom: 2px solid #2a2f36;
    border-left: 2px solid #2a2f36;
}

/* Et klik paa Kemichael under praesentationen: Naeste blinker og viser vejen */
@keyframes puf {
    0%   { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0.9); transform: scale(1); }
    40%  { transform: scale(1.1); }
    100% { box-shadow: 0 0 0 18px rgba(242, 197, 61, 0); transform: scale(1); }
}

.intro-naeste.puf { animation: puf 0.7s ease-out 2; }

/* Den gule ramme om det, Kemichael peger paa (NK.Fremhaev i
   js/praesentation.js). Den blinker, ligger oven paa siden og fanger
   ingen klik. */
.fremhaev-ramme {
    position: fixed;
    z-index: 30;
    pointer-events: none;
    border: 3px solid var(--gul);
    border-radius: 12px;
    background-color: rgba(242, 197, 61, 0.1);
    animation: fremhaev 0.9s ease-in-out infinite;
}

@keyframes fremhaev {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(242, 197, 61, 0.6); }
    50%      { opacity: 0.3; box-shadow: 0 0 0 9px rgba(242, 197, 61, 0); }
}

/* Ja og nej paa fane 3 blinker, naar eleven klikker paa glasset foer svaret */
@keyframes peg {
    0%   { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(242, 197, 61, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
}

.felt.peg { border-color: var(--gul); animation: peg 1.2s ease-out infinite; }

/* ---------------------------------------------------------------------
   HOEJRE SPALTE
   --------------------------------------------------------------------- */
.panel {
    background-color: var(--panel);
    border-left: 1px solid #1f1f27;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: #4d4d5c var(--panel);
}

.panel::-webkit-scrollbar { width: 9px; }
.panel::-webkit-scrollbar-track { background: var(--panel); }
.panel::-webkit-scrollbar-thumb { background: #4d4d5c; border-radius: 5px; }

.kort {
    background-color: rgba(0, 0, 0, 0.22);
    border: 1px solid #3a3a47;
    border-radius: var(--radius);
    padding: 11px;
}

.kort > h2 {
    margin: 0 0 8px 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gul);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.kort.maaling { border-left: 3px solid var(--groen); }
.kort.opgavekort { border-left: 3px solid var(--lilla); }

.kort > h2 .taeller {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--tekst-mat);
    white-space: nowrap;
}

.kort > h2 .taeller b { color: var(--tekst); }

.hyldeprik {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 0;
}

.note { margin: 8px 0 0 0; font-size: 0.8rem; line-height: 1.45; color: var(--tekst-svag); }
.note:empty { display: none; }

.besked { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #c8ced6; }
.besked:empty { display: none; }
.besked.god   { color: #7ee0a8; }
.besked.skidt { color: #f0918a; }
.besked.gul   { color: #f0d77a; }
.besked b { color: inherit; }

/* ----- Talraekker ---------------------------------------------------- */
.talraekke {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.045);
    border-radius: var(--radius-lil);
    padding: 6px 10px;
    font-size: 0.86rem;
    color: #c8ced6;
}

.talraekke + .talraekke { margin-top: 5px; }

.talraekke .tal {
    font-weight: 700;
    color: var(--tekst);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tal.gul  { color: var(--gul); }
.tal.roed { color: var(--plus-lys); letter-spacing: 0.08em; }

.storttal {
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gul);
    font-variant-numeric: tabular-nums;
    margin: 0 0 8px;
}

/* ---------------------------------------------------------------------
   OPGAVEKORTET: raekker med felter
   --------------------------------------------------------------------- */
.opgave-prompt {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 2px 0 4px;
    word-break: break-word;
}

.opgave-spm { margin: 0 0 4px; font-size: 0.86rem; line-height: 1.45; color: var(--tekst-svag); }

.raekker { display: flex; flex-direction: column; gap: 9px; margin: 8px 0 10px; }

.raekke-hoved {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.raekke-etiket {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tekst-mat);
}

.raekke-del { font-size: 0.95rem; font-weight: 600; color: var(--tekst); }

.raekke.slut { padding-top: 8px; border-top: 1px dashed #464655; }

.felter { display: flex; gap: 6px; }

.felt {
    flex: 1;
    display: flex;
    align-items: stretch;
    min-width: 0;
    min-height: 40px;
    background-color: #1a1a22;
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    overflow: hidden;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.felt input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: var(--tekst);
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 600;
    padding: 8px 10px;
    outline: none;
}

.felt input::placeholder { color: #6a707b; font-weight: 400; }

.felt-ok {
    background-color: var(--blaa-mork);
    color: #ffffff;
    border: none;
    padding: 0 12px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.felt-ok:hover:not(:disabled) { background-color: var(--blaa); }

.felt.aktiv { border-color: var(--blaa); }
.felt.aktiv:focus-within { border-color: var(--gul); box-shadow: 0 0 0 1px var(--gul); }
.felt.laast { opacity: 0.4; }
.felt.laast .felt-ok { background-color: var(--panel-3); cursor: default; }

.felt.ok { border-color: rgba(63, 174, 114, 0.6); background-color: rgba(63, 174, 114, 0.13); }
.felt.svar { border-color: rgba(242, 197, 61, 0.55); background-color: rgba(242, 197, 61, 0.1); }

.felt-svar {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 1.02rem;
    font-weight: 600;
    color: #b8f0cf;
    overflow-wrap: anywhere;
    align-self: center;
}

.felt.svar .felt-svar { color: #f5dd8a; }
.felt-maerke { padding: 0 10px; align-self: center; font-weight: 700; color: #7ee0a8; }
.felt.svar .felt-maerke { color: var(--gul); }

@keyframes ryst {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.felt.ryst { animation: ryst 0.35s ease 1; border-color: var(--roed); }

@keyframes glimt {
    0%   { box-shadow: 0 0 0 0 rgba(63, 174, 114, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(63, 174, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 174, 114, 0); }
}

.opgavekort .besked { margin-top: 2px; }
.opgavekort.sejr { border-left-color: var(--groen); animation: glimt 0.9s ease-out 2; }

/* ----- Hylderne i panelet --------------------------------------------- */
.hyldeliste { display: flex; flex-direction: column; gap: 5px; }

.hyldelinje {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.045);
    border: 1px solid transparent;
    border-radius: var(--radius-lil);
    padding: 7px 10px;
    font-family: inherit;
    color: var(--tekst);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hyldelinje:hover { background-color: var(--panel-3); border-color: #5e5e70; }
.hl-farve { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.hl-navn { flex: 1; font-size: 0.88rem; font-weight: 600; }
.hl-navn em { display: block; font-style: normal; font-weight: 400; font-size: 0.76rem; color: var(--tekst-mat); }
.hl-tal { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-stjerner { min-width: 34px; text-align: right; font-size: 0.82rem; font-weight: 700; color: var(--gul); }

/* ---------------------------------------------------------------------
   KNAPPER
   --------------------------------------------------------------------- */
.knapper { display: flex; flex-direction: column; gap: 7px; }

.knap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 8px 11px;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.knap:hover:not(:disabled) { background-color: var(--panel-3); border-color: #5e5e70; }
.knap:active:not(:disabled) { transform: scale(0.985); }
.knap:disabled { opacity: 0.4; cursor: not-allowed; }

.knap .tegn { font-size: 1rem; flex-shrink: 0; }
.knap.stor { padding: 11px 13px; font-size: 0.92rem; width: 100%; }

.knap.blaa { background-color: var(--blaa-mork); border-color: var(--blaa); }
.knap.blaa:hover:not(:disabled) { background-color: var(--blaa); }

.knap.nulstil {
    background-color: transparent;
    border-color: #5b3b39;
    color: #e08b81;
    margin-top: 10px;
    width: 100%;
}

.knap.nulstil:hover:not(:disabled) { background-color: rgba(224, 84, 70, 0.16); border-color: var(--roed); }

.knaprad { display: flex; gap: 6px; margin-top: 9px; }
.knaprad.taet { margin-top: 0; }
.knaprad .knap { flex: 1; justify-content: center; padding: 8px 6px; }

/* Den knap, der er det naturlige naeste skridt, banker stille. */
@keyframes bank {
    0%   { box-shadow: 0 0 0 0 rgba(61, 158, 224, 0.6); }
    70%  { box-shadow: 0 0 0 11px rgba(61, 158, 224, 0); }
    100% { box-shadow: 0 0 0 0 rgba(61, 158, 224, 0); }
}

.knap.banker { animation: bank 1.7s ease-out infinite; }


/* ---------------------------------------------------------------------
   OVERLAYS: teorien
   --------------------------------------------------------------------- */
.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(8, 8, 12, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}

.overlay.vis { display: flex; }

.overlay-boks {
    background-color: var(--panel);
    border: 1px solid var(--linje);
    border-radius: 14px;
    box-shadow: var(--skygge);
    max-width: 620px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 22px 24px;
}

.overlay-boks.bred { max-width: 900px; }
.overlay-boks.smal { max-width: 420px; }

.overlay-boks h2 { margin: 0 0 12px 0; font-size: 1.15rem; color: var(--blaa); }

/* ---------------------------------------------------------------------
   RUNDVISNINGEN (samme som i sc1.1)
   --------------------------------------------------------------------- */
.rundvisning { position: fixed; inset: 0; z-index: 200; }
.rundvisning[hidden] { display: none; }

.rundvisning-baggrund {
    position: fixed;
    inset: 0;
    background: transparent;
    cursor: pointer;
}

.rundvisning-spot {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(8, 8, 13, 0.74);
    outline: 2px solid var(--gul);
    outline-offset: 3px;
    pointer-events: none;
    transition: top 0.22s ease, left 0.22s ease, width 0.22s ease, height 0.22s ease;
}

.rundvisning-boks {
    position: fixed;
    width: 300px;
    max-width: calc(100vw - 28px);
    background-color: var(--panel);
    border: 1px solid var(--linje);
    border-radius: var(--radius);
    box-shadow: var(--skygge);
    padding: 14px 16px;
    transition: top 0.22s ease, left 0.22s ease;
}

.rundvisning-hoved {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.rundvisning-tal {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--tekst-mat);
}

.rundvisning-luk {
    background: transparent;
    border: none;
    color: var(--tekst-svag);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}

.rundvisning-luk:hover { color: var(--tekst); }

.rundvisning-boks h3 { margin: 0 0 6px 0; font-size: 1rem; color: var(--gul); }
.rundvisning-boks p { margin: 0; font-size: 0.87rem; line-height: 1.5; color: #c8ced6; }

.rundvisning-knapper {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

.rundvisning-knapper .knap { flex: 1; justify-content: center; }

/* ---------------------------------------------------------------------
   TILGAENGELIGHED OG SMALLE SKAERME
   --------------------------------------------------------------------- */
button:focus-visible,
select:focus-visible {
    outline: 2px solid var(--gul);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    :root { --panel-bredde: 370px; --panel-bredde-3: 500px; }
}

@media (max-width: 1100px) {
    :root { --panel-bredde-3: 440px; }
    .top { gap: 10px; padding: 8px 12px; }
    .faneknap { padding: 7px 10px; font-size: 0.82rem; gap: 6px; }
    .faneknap .nr { width: 17px; height: 17px; font-size: 0.65rem; }
}

@media (max-width: 860px) {
    body { overflow: auto; }
    .top { flex-wrap: wrap; gap: 10px; }
    .faneknapper { order: 3; width: 100%; flex: none; }
    main { overflow: visible; }
    .fane { position: static; grid-template-columns: minmax(0, 1fr); }
    .fane.aktiv { display: grid; }
    .scene { height: 66vh; min-height: 520px; }
    .panel { border-left: none; border-top: 1px solid #1f1f27; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------
   FAELLES MED SC4.2 OG SC4.4: maalet, beregningerne og felterne
   --------------------------------------------------------------------- */

.ikonknap.tekstknap { width: auto; padding: 0 10px; font-family: inherit; font-size: 0.82rem; font-weight: 600; }

/* Maalet paa fane 1 */
.maal-tekst {
    margin: 2px 0 6px;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Beregningerne under "Paa vaegten": navnet over, beregningen under */
.regn {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: rgba(255, 255, 255, 0.045);
    border-radius: var(--radius-lil);
    padding: 6px 10px;
    margin-bottom: 5px;
}

.regn-navn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tekst-mat);
}

.regn-linje {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--tekst);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* Raekkerne paa fane 3: "m =" foran og enheden bagefter */
.felt-pre {
    align-self: center;
    padding: 0 2px 0 10px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gul);
    white-space: nowrap;
}

.felt-efter {
    align-self: center;
    padding: 0 8px 0 2px;
    font-size: 0.86rem;
    color: var(--tekst-mat);
    white-space: nowrap;
}

.felt input { min-width: 60px; }
.felt-svar { font-size: 0.95rem; }
.felt-svar b { color: #ffffff; }
.felt.svar .felt-svar b { color: #fff3c4; }

/* Teorien */
.overlay-boks p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.55; color: #dde3ea; }

.eksempel {
    margin: 4px 0 12px;
    padding: 10px 14px;
    border-left: 4px solid var(--lilla);
    border-radius: 0 var(--radius-lil) var(--radius-lil) 0;
    background-color: rgba(255, 255, 255, 0.05);
    font-size: 1rem;
    font-weight: 600;
    color: var(--tekst);
}

.eksempel-hoved {
    display: block;
    margin-bottom: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lilla);
}


/* Tilbuddet om Kemichaels praesentation: midt foroven i scenen, samme
   sted som knappen, der springer den over (js/praesentation.js) */
.tilbud {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(20, 20, 28, 0.94);
    border: 1px solid #4a4a58;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.tilbud button {
    font-family: inherit;
    font-weight: 700;
    border-radius: 999px;
    cursor: pointer;
    padding: 9px 18px;
    font-size: 0.98rem;
}

.tilbud-start {
    background-color: var(--blaa-mork);
    border: 2px solid var(--gul);
    color: #ffffff;
    animation: bank 1.7s ease-out infinite;
}

.tilbud-start span { color: var(--gul); margin-left: 4px; }
.tilbud-start:hover { background-color: var(--blaa); }

.tilbud-nej {
    background-color: transparent;
    border: 1px solid #5e5e70;
    color: var(--tekst-svag);
}

.tilbud-nej:hover { background-color: var(--panel-3); color: var(--tekst); }



/* ---------------------------------------------------------------------
   SC8.1: valgknapperne, skemaet, skemalinjen med felter, stofferne at
   vaelge imellem og listen over svarene
   --------------------------------------------------------------------- */

/* Valgknapperne (som sc7.4); lodret til lange svar */
.opgave-felt { margin: 6px 0 8px; }
.opgave-felt:empty { display: none; }

.vaelgerrad { display: flex; flex-wrap: wrap; gap: 6px; }
.vaelgerrad.lodret { flex-direction: column; }

.vaelger {
    flex: 1 1 auto;
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.vaelgerrad.lodret .vaelger { white-space: normal; text-align: left; font-weight: 600; }

.vaelger:hover:not(:disabled) { background-color: var(--panel-3); }
.vaelger:disabled { cursor: default; }
.vaelger.valgt   { background-color: var(--blaa-mork); border-color: var(--blaa); color: #ffffff; }
.vaelger.rigtig  { background-color: rgba(63, 174, 114, 0.25); border-color: var(--groen); color: #b8f0cf; }
.vaelger.forkert { background-color: rgba(224, 84, 70, 0.2); border-color: var(--roed); color: #f7b9b2; }

#fu-valg.peg .vaelger:not(:disabled) { border-color: var(--gul); animation: peg 1.2s ease-out infinite; }

.opgave-spm:empty { display: none; }
.opgavekort .opgave-spm { font-size: 0.92rem; color: #dde3ea; font-weight: 600; margin: 2px 0 6px; }

/* Skemaet med forsoegene */
.skema { overflow-x: auto; }

.skematabel {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    font-variant-numeric: tabular-nums;
}

.skematabel th {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tekst-svag);
    padding: 3px 2px;
    text-align: center;
    white-space: nowrap;
}

.skematabel tbody th { text-align: left; color: var(--tekst); font-size: 0.86rem; padding-left: 4px; }
.skematabel th.hjoerne { font-size: 0.7rem; font-weight: 600; color: var(--tekst-mat); text-align: left; letter-spacing: 0.04em; }

.skematabel .prik {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: 0;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.skematabel td {
    text-align: center;
    height: 28px;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--tekst-mat);
    transition: background-color 0.25s ease;
}

.skematabel td.ja     { background-color: rgba(63, 174, 114, 0.26); color: #b8f0cf; }
.skematabel td.nej    { background-color: rgba(255, 255, 255, 0.08); color: #c8ced6; }
.skematabel td.samme  { background-color: rgba(0, 0, 0, 0.35); color: #5e6370; }
.skematabel td.aktiv  { outline: 2px solid var(--gul); outline-offset: -2px; }
.skematabel .ialt     { color: var(--gul); background: none; }

/* Fane 3 har et bredere panel, saa reaktionsskemaet med de fire felter
   kan staa paa én linje med luft omkring (brugerens oenske 3. okt. 2026).
   Under 861 px staar panelet under scenen som paa de andre faner. */
@media (min-width: 861px) {
    #fane-forudsig { grid-template-columns: minmax(0, 1fr) var(--panel-bredde-3); }
}

/* Skemalinjen paa fane 3: reaktanterne, pilen og produkterne. Skriften
   foelger panelets bredde (cqw), og felter og mellemrum er maalt i em,
   saa hele skemaet staar paa én linje, ogsaa i det smallere panel. */
.skemafelt { container-type: inline-size; }
.skemafelt:empty { display: none; }

.skemalinje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45em 0.5em;
    margin: 10px 0 8px;
    padding: 16px 12px;
    border-radius: var(--radius-lil);
    background-color: rgba(255, 255, 255, 0.045);
    border: 1px solid #3a3a47;
    font-size: 1.05rem;
    font-size: clamp(0.82rem, 3.2cqw, 1.18rem);
    font-weight: 600;
}

.skemalinje.faerdig { border-color: rgba(63, 174, 114, 0.6); background-color: rgba(63, 174, 114, 0.12); color: #b8f0cf; }
.skemalinje.ryst { animation: ryst 0.35s ease 1; border-color: var(--roed); }

.skemalinje .led { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.skemalinje .tegn { color: var(--gul); font-weight: 700; }
.skemalinje .koef { color: #ffffff; }

.skemalinje .tomplads {
    display: inline-block;
    min-width: 3.4em;
    padding: 1px 8px;
    border: 1px dashed #6a707b;
    border-radius: 5px;
    text-align: center;
    color: var(--tekst-mat);
}

.koeffelt {
    width: 2.2em;
    background-color: #1a1a22;
    border: 1px solid #4a4a58;
    border-radius: 5px;
    color: var(--tekst);
    font-family: inherit;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    padding: 0.3em 0.1em;
    outline: none;
}

.koeffelt:focus { border-color: var(--gul); box-shadow: 0 0 0 1px var(--gul); }

/* Tjek staar paa sin egen linje under skemaet */
.skematjek { display: flex; justify-content: flex-end; margin: 0 0 8px; }

.felt-ok.lille {
    border-radius: 5px;
    padding: 8px 22px;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Stofferne, man kan vaelge imellem */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.chips:empty { display: none; }

.chip {
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #5a5e70;
    border-radius: 999px;
    padding: 6px 13px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
}

.chip:hover:not(:disabled) { background-color: var(--panel-3); border-color: var(--gul); }
.chip:disabled { cursor: default; }
.chip.brugt   { opacity: 0.35; }
.chip.forkert { background-color: rgba(224, 84, 70, 0.2); border-color: var(--roed); color: #f7b9b2; }

/* Svarene paa fane 3 */
.logliste { display: flex; flex-direction: column; gap: 4px; }

.logrk {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 18px;
    align-items: baseline;
    gap: 8px;
    padding: 5px 10px;
    border-radius: var(--radius-lil);
    background-color: rgba(255, 255, 255, 0.045);
    font-size: 0.86rem;
    color: #c8ced6;
}

.logpar { font-weight: 700; color: var(--tekst); white-space: nowrap; }
.logtekst { overflow-wrap: anywhere; }
.logmrk { font-weight: 700; text-align: right; }
.logmrk.ja  { color: #7ee0a8; }
.logmrk.nej { color: #f0918a; }

.eksempel-note { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 400; color: var(--tekst-svag); }