/* =====================================================================
   sb2.3 - Ligevægtsberegninger
   Stilark. Grundlaget er sb2.1 (sc1.4). Nyt nederst: fane 1 med
   beholderen, skyderen og skemaet, og regnestykket paa tavlen paa fane 2
   og 3 (felterne fra sb9.3, skemaet, CAS og loesningerne). Der er ingen
   statuslinje nederst i scenen: tekstboksen er bygget ind i
   arbejdsomraadet (se TEKSTBOKSEN).
   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;
    --groen:       #3fae72;
    --groen-mork:  #2b7d51;
    --roed:        #e05446;
    --gul:         #f2c53d;
    --lilla:       #9b6bd6;

    --op:          #8ff0b4;   /* produkterne og taelleren */
    --ned:         #9fd3f7;   /* reaktanterne og naevneren */

    --radius:      10px;
    --radius-lil:  6px;
    --skygge:      0 4px 14px rgba(0, 0, 0, 0.35);
    --panel-bredde: 430px;
}

* { 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); }
.ikonknap.tekstknap { width: auto; padding: 0 10px; font-family: inherit; font-size: 0.82rem; font-weight: 600; }
.quizknap.loest { border-color: #5fcf92; color: #b8f0cf; }

/* ---------------------------------------------------------------------
   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; }

/* Scenen: vaeggen fra sc1.4 tegnet med CSS og tavlen ovenpaa. Skriften
   paa tavlen foelger scenens stoerrelse. */
.scene {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    container-type: size;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 64px),
        linear-gradient(#262833, #1d1f27);
}

.arbejde {
    --fs: clamp(20px, min(3.7cqw, 5.4cqh), 46px);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.2cqh, 22px);
    padding: clamp(10px, 2cqh, 22px) clamp(12px, 3cqw, 34px);
}

/* ---------------------------------------------------------------------
   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.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); }

.note-tekst { margin: 0 0 4px; font-size: 0.92rem; line-height: 1.5; color: #c8ced6; }

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

@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.sejr { border-left-color: var(--groen); animation: glimt 0.9s ease-out 2; }

/* Forklaringen i kortet, naar opgaven er loest */
.forklaring {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--groen);
    border-radius: 0 var(--radius-lil) var(--radius-lil) 0;
    background-color: rgba(63, 174, 114, 0.08);
}

.fk-broek { margin-bottom: 8px; font-size: 1.15rem; font-weight: 700; color: #d6ffe8; }
.forklaring p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #dde3ea; }

/* En broek med taeller over naevner, i panelet og i teorien */
.vbroek {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    text-align: center;
    line-height: 1.2;
    margin: 0 2px;
}

.vbroek > span { padding: 0 4px; white-space: nowrap; }
.vbroek > span:first-child { border-bottom: 2px solid currentColor; }

/* ---------------------------------------------------------------------
   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.blaa { background-color: var(--blaa-mork); border-color: var(--blaa); }
.knap.blaa:hover:not(:disabled) { background-color: var(--blaa); }

/* 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 og quizzen
   --------------------------------------------------------------------- */
.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: 640px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    padding: 22px 24px;
}

.overlay-boks h2 { margin: 0 0 12px 0; font-size: 1.15rem; color: var(--blaa); }
.overlay-boks p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.55; color: #dde3ea; }
.overlay-boks p.genveje { font-size: 0.85rem; color: var(--tekst-svag); margin-top: 12px; }

.overlay-boks h3.teori-hoved {
    margin: 16px 0 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gul);
}

.teori-trin { margin: 0 0 12px; padding-left: 22px; }
.teori-trin li { margin: 0 0 5px; font-size: 0.95rem; line-height: 1.5; color: #dde3ea; }
.teori-trin li::marker { color: var(--gul); font-weight: 700; }

.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: 1.05rem;
    font-weight: 600;
    color: var(--tekst);
}

.eksempel-hoved {
    display: block;
    margin-bottom: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--lilla);
}

kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid #5e5e70;
    border-bottom-width: 2px;
    border-radius: 4px;
    background-color: var(--panel-2);
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--tekst);
}

/* ---------------------------------------------------------------------
   RUNDVISNINGEN (samme som i sc1.4)
   --------------------------------------------------------------------- */
.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; }

/* ---------------------------------------------------------------------
   TEKSTBOKSEN: naeste skridt, fejl, hint og ros, og den ene gule knap.
   Den er bygget ind i arbejdsomraadet (brugeren 9. oktober 2026: ingen
   tekstlinje med hint nederst i scenen): paa fane 1 i kassen over
   beholderen sammen med maalet, paa fane 2 og 3 oeverst i den del af
   tavlen, eleven er ved. Pladsen til to linjer er sat af, saa intet
   flytter sig, naar en fejl eller et hint kommer.
   --------------------------------------------------------------------- */
.tekstboks {
    --tb-fs: 1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: calc(var(--tb-fs) * 2.9 + 14px);
    padding: 7px 8px 7px 12px;
    border-left: 5px solid #66727d;
    border-radius: 9px;
    background-color: rgba(0, 0, 0, 0.3);
    font-size: var(--tb-fs);
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.st-tekst {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.45;
    color: #dfe5ec;
}

.st-tekst:empty::before { content: "\00a0"; }
.st-tekst sub { font-size: 0.7em; }

/* Maerket forrest i linjen: Hint 2 af 3, Ikke endnu, Rigtigt */
.b-maerke {
    display: inline-block;
    margin-right: 7px;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 0.82em;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #dfe4ea;
    vertical-align: 1px;
}

.b-maerke.stor { font-size: 0.95em; padding: 3px 12px; }

.tekstboks.skidt { border-left-color: var(--roed); background-color: rgba(224, 84, 70, 0.17); }
.tekstboks.skidt .st-tekst { color: #ffc4bc; }
.tekstboks.skidt .b-maerke { background-color: rgba(224, 84, 70, 0.35); color: #ffe1dd; }

.tekstboks.god { border-left-color: var(--groen); background-color: rgba(63, 174, 114, 0.17); }
.tekstboks.god .st-tekst { color: #c6f4d9; }
.tekstboks.god .b-maerke { background-color: rgba(63, 174, 114, 0.4); color: #e2fff0; }

.tekstboks.hint,
.tekstboks.gul { border-left-color: var(--gul); background-color: rgba(242, 197, 61, 0.13); }
.tekstboks.hint .st-tekst,
.tekstboks.gul .st-tekst { color: #f9eabb; }
.tekstboks.hint .b-maerke,
.tekstboks.gul .b-maerke { background-color: rgba(242, 197, 61, 0.3); color: #fff2cc; }

.tekstboks.peger { border-left-color: var(--blaa); }

@keyframes st-ryst {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

.tekstboks.ryster { animation: st-ryst 0.4s ease-in-out 1; }

/* Hjaelpeknappen: stor nok til at oejet finder den af sig selv, og lige
   bred med alle sine tekster, saa teksten ved siden af ikke ombrydes paa
   ny, hver gang knappen skifter */
.tekstboks .knap {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 12.6em;
    padding: 0.62em 0.9em;
    font-size: 0.95em;
    font-weight: 700;
    white-space: nowrap;
}

/* Giv et hint er fyldt gul, Vis svaret kun et omrids (README, Kemichael) */
.knap.hjaelp {
    border: 2px solid #c79a12;
    background-color: #ffdf6b;
    color: #33290a;
}

.knap.hjaelp:hover:not(:disabled) { background-color: #ffd23e; border-color: #a67f08; }

.knap.hjaelp.svar {
    border-color: rgba(242, 197, 61, 0.7);
    background-color: rgba(242, 197, 61, 0.12);
    color: #f7e4ab;
}

.knap.hjaelp.svar:hover:not(:disabled) { background-color: rgba(242, 197, 61, 0.24); border-color: var(--gul); color: #fff6d8; }

/* Efter et forkert svar peger knappen stille paa sig selv */
@keyframes knap-peg {
    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0); }
    50% { box-shadow: 0 0 0 6px rgba(242, 197, 61, 0.32); }
}

.knap.hjaelp.peg { animation: knap-peg 1.9s ease-in-out infinite; }

.knap.videre {
    background-color: var(--groen-mork);
    border-color: #5fcf92;
    color: #ffffff;
}

.knap.videre:hover:not(:disabled) { background-color: var(--groen); }

.forfraknap {
    flex: 0 0 auto;
    background-color: rgba(20, 20, 28, 0.85);
    color: var(--tekst-svag);
    border: 1px solid #4a4a58;
    border-radius: 999px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.forfraknap:hover { color: var(--tekst); border-color: #6e6e80; background-color: var(--panel-3); }

/* ---------------------------------------------------------------------
   LISTEN med opgaverne i panelet (som sc1.4)
   --------------------------------------------------------------------- */
.opg-liste { display: flex; flex-direction: column; gap: 10px; }

.opg-hoved {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--tekst-mat);
}

.opg-tal { letter-spacing: 0.02em; text-transform: none; }

.opg-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.opg-chip {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 2.2em;
    background-color: var(--panel-2);
    color: var(--tekst);
    border: 1px solid #4a4a58;
    border-radius: var(--radius-lil);
    padding: 5px 9px;
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.opg-chip:hover { background-color: var(--panel-3); border-color: #5e5e70; }
.opg-chip.paabegyndt { border-color: rgba(242, 197, 61, 0.7); }
.opg-chip.loest { background-color: rgba(63, 174, 114, 0.2); border-color: rgba(63, 174, 114, 0.75); }
.opg-chip.valgt { border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.2); }
.opg-chip.loest.valgt { background-color: rgba(63, 174, 114, 0.2); border-color: var(--blaa); }
.oc-m { font-style: normal; font-size: 0.78rem; color: #7ee0a8; }
.oc-m:empty { display: none; }
.opg-chip.stjerne .oc-m { color: var(--gul); }

/* ---------------------------------------------------------------------
   OPGAVELINJEN over tavlen (med Forfra ved siden af) og TAVLEN (farverne
   fra sc1.4)
   --------------------------------------------------------------------- */
.linje-rad {
    width: min(100%, 1000px);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.linje-rad .opgavelinje { flex: 1; min-width: 0; width: auto; }
.linje-rad .forfraknap { margin-top: 2px; }

.opgavelinje {
    width: min(100%, 1000px);
    margin: 0;
    padding-left: 12px;
    border-left: 4px solid var(--gul);
    font-size: max(16px, calc(var(--fs) * 0.62));
    font-weight: 600;
    line-height: 1.35;
    color: #e9eef4;
}

.tavle {
    position: relative;
    width: min(100%, 1000px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--fs) * 0.45);
    padding: calc(var(--fs) * 1.15 + 6px) 22px calc(var(--fs) * 0.6);
    background: linear-gradient(135deg, #22302b, #1b2622);
    border: 10px solid #6d4c2f;
    border-radius: 8px;
    box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.45);
    color: #e9eee9;
    transition: box-shadow 0.3s ease;
}

.tavle.faerdig { box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(63, 174, 114, 0.75); }
.tavle.vist { box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(242, 197, 61, 0.65); }
.tavle.ryst { animation: ryst 0.35s ease 1; }

.tv-navn {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: max(13px, calc(var(--fs) * 0.48));
    font-weight: 700;
    color: #9fb1a9;
}

@keyframes stempel-ind {
    0% { transform: scale(0.4) rotate(-6deg); opacity: 0; }
    60% { transform: scale(1.1) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.tv-stempel {
    position: absolute;
    top: 8px;
    right: 14px;
    padding: 4px 14px;
    border: 2.5px solid #5fcf92;
    border-radius: 9px;
    background-color: rgba(20, 44, 32, 0.95);
    color: #8ff0b4;
    font-size: max(14px, calc(var(--fs) * 0.5));
    font-weight: 800;
    letter-spacing: 0.04em;
    animation: stempel-ind 0.45s ease-out 1;
}

.tv-stempel.gul { border-color: var(--gul); background-color: rgba(48, 40, 18, 0.95); color: #f5dd8a; }

/* ----- Skemaet paa tavlen ------------------------------------------------ */
.skema {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 calc(var(--fs) * 0.16);
    font-size: var(--fs);
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.2;
}

.sk-plus { color: #cfd9d4; font-weight: 600; margin: 0 0.08em; }

.art {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    padding: 0.04em 0.14em;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #e9eee9;
    font: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.2s ease, opacity 0.2s ease;
}

.art:hover { background-color: rgba(255, 255, 255, 0.08); }
.art .koef { margin-right: 0.04em; }
.art .ti { margin-left: 0.04em; font-size: 0.58em; font-weight: 600; color: #a9bdb4; }

/* Det stof, hintet handler om */
.art.lys { background-color: rgba(242, 197, 61, 0.22); box-shadow: 0 0 0 2px var(--gul); }

/* Efter loesningen: produkterne op, reaktanterne ned, resten streget ud */
.art.op .fo { color: var(--op); }
.art.ned .fo { color: var(--ned); }
.art.op .koef, .art.ned .koef { color: var(--gul); }
.art.ude { opacity: 0.55; }
.art.ude::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    height: 3px;
    border-radius: 2px;
    background-color: rgba(240, 145, 138, 0.95);
    transform: rotate(-7deg);
}

/* Ligevaegtspilen: to halve pile, der loeber hver sin vej i paaskeaegget */
.ligepil {
    display: inline-flex;
    align-items: center;
    width: 1.5em;
    height: 1em;
    margin: 0 0.25em;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #e9eee9;
    font: inherit;
    cursor: pointer;
}

.ligepil:hover { background-color: rgba(255, 255, 255, 0.06); }
.ligepil svg { width: 100%; height: 100%; overflow: visible; }
.ligepil path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@keyframes halv-op { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes halv-ned { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }

.ligepil.koerer { color: var(--gul); }
.ligepil.koerer .halv-op { animation: halv-op 0.7s ease-in-out 5; }
.ligepil.koerer .halv-ned { animation: halv-ned 0.7s ease-in-out 5; }

/* ----- Broeken paa fane 1 --------------------------------------------------- */
.broekrad {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--fs) * 0.45);
    width: 100%;
}

.k-tegn {
    flex: 0 0 auto;
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: calc(var(--fs) * 1.1);
    white-space: nowrap;
}

.k-tegn sub { font-size: 0.55em; }

.broekstreg {
    height: 4px;
    margin: calc(var(--fs) * 0.22) 0;
    border-radius: 2px;
    background-color: #e9eee9;
}

.tjekknap {
    flex: 0 0 auto;
    padding: 0.55em 1em;
    border: 1px solid #5fcf92;
    border-radius: var(--radius);
    background-color: var(--groen-mork);
    color: #ffffff;
    font-family: inherit;
    font-size: max(15px, calc(var(--fs) * 0.55));
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    transition: background-color 0.15s ease;
}

.tjekknap:hover { background-color: var(--groen); }
.tjekknap:active { transform: scale(0.97); }

/* Er naevneren tom i en loest opgave, staar der 1 */
.auto-en { font-size: calc(var(--fs) * 0.8); font-weight: 700; color: var(--ned); }


/* ----- Brikkerne: klik for at skrive ------------------------------------------ */
.brik {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0.55em;
    border: 2px solid;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.brik:hover { transform: translateY(-2px); }
.brik.indsaetbrik { min-width: 2.2em; background-color: #22323d; border-color: #3f6f88; color: #e8f4fb; font-size: max(16px, calc(var(--fs) * 0.62)); }
.brik.indsaetbrik:hover { border-color: var(--blaa); }
.brik.indsaetbrik.lys { border-color: var(--gul); background-color: rgba(242, 197, 61, 0.2); }

/* ---------------------------------------------------------------------
   LISTEN: opgaverne staar med navn, én pr. linje
   --------------------------------------------------------------------- */
.opg-chips { flex-direction: column; flex-wrap: nowrap; gap: 4px; }

.opg-chip {
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 5px 9px;
    font-size: 0.92rem;
    text-align: left;
}

.oc-f {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
}

.oc-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opg-chip .oc-m { margin-left: auto; }

.spm { margin: 8px 0 0; font-size: 0.92rem; line-height: 1.5; color: #e6e9ee; }
.spm b { color: var(--gul); }
.rx-navn { color: var(--tekst-svag); }
.note-lille { font-size: 0.85rem !important; color: var(--tekst-svag) !important; }

/* ---------------------------------------------------------------------
   FANE 1: BEHOLDEREN
   --------------------------------------------------------------------- */
/* Er skaermen for lav til det hele, kan der rulles, saa intet bliver
   skaaret af */
.bh-arbejde {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px 8px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4d4d5c transparent;
}

.bh-arbejde .opgavelinje { width: 100%; font-size: max(16px, min(2.2cqw, 3cqh)); }

/* Maalet og tekstboksen samlet over beholderen */
.opgavekasse {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #3c3f4d;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.22);
}

.laerred-ramme {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
}

.laerred-ramme canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.bh-skyder {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    border: 1px solid #3c3f4d;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.22);
}

.bh-xlab { display: flex; flex-direction: column; min-width: 15em; font-size: 0.98rem; color: #e9eef4; }
.bh-xlab b { font-size: 1.15rem; color: #9fd3f7; font-variant-numeric: tabular-nums; }
.bh-xdef { font-size: 0.86rem; color: var(--tekst-svag); }

.bh-skyder input[type="range"] { flex: 1; min-width: 0; height: 30px; accent-color: #9fd3f7; cursor: pointer; }

.bh-under { display: flex; gap: 12px; align-items: stretch; }

.bh-skema {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: safe center;
    align-items: center;
    gap: 6px 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: linear-gradient(135deg, #22302b, #1b2622);
    border: 6px solid #6d4c2f;
    color: #e9eee9;
    overflow-x: auto;
}

.bh-skema .tjekknap { font-size: 0.95rem; padding: 0.45em 0.9em; }

.ice { border-collapse: collapse; font-weight: 600; font-variant-numeric: tabular-nums; }
.ice th, .ice td { padding: 3px 9px; border-bottom: 1px solid rgba(233, 238, 233, 0.16); text-align: center; white-space: nowrap; }
.ice tr:last-child th, .ice tr:last-child td { border-bottom: none; }
.ice th { font-weight: 700; color: #e9eee9; }
.ice th.ice-r { text-align: left; color: #b5c6be; font-weight: 700; }
.ice th.ice-hj { font-size: 0.78em; font-weight: 600; color: #8fa39a; text-align: left; }
.ice td.ice-ok { color: #8ff0b4; }
.ice td.ice-tjek { border-bottom: none; padding-left: 4px; }
.ice th.lys, .ice td.lys { background-color: rgba(242, 197, 61, 0.16); box-shadow: inset 0 0 0 2px rgba(242, 197, 61, 0.7); }

.bh-ice { font-size: 0.98rem; }
.bh-celle { display: inline-flex; align-items: center; gap: 4px; }

/* Er skemaet for bredt til sin plads (fire stoffer, eller en bredere
   skrift end Segoe UI), staar tallet under udtrykket: tilpasSkema i
   js/sim_beholder.js saetter klassen */
.bh-skema.stak .bh-celle { flex-direction: column; gap: 0; line-height: 1.15; }
.bh-skema.stak .bh-celle .bh-lig { display: none; }
.bh-skema.stak .bh-celle .bh-u { font-size: 0.86em; color: #b5c6be; }
.bh-ice .ice-in { width: 4.8em; }
.bh-ice th, .bh-ice td { padding: 3px 7px; }
.bh-u { color: #dfe8e3; }
.bh-lig { color: #8fa39a; }
.bh-tal { color: #9fd3f7; }
.bh-tal.nul { color: #f0918a; }

.ice-stof {
    padding: 1px 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ice-stof:hover { border-color: rgba(242, 197, 61, 0.6); background-color: rgba(242, 197, 61, 0.1); }
.ice-stof.lys { border-color: var(--gul); background-color: rgba(242, 197, 61, 0.2); }

.ice-in {
    width: 7.2em;
    padding: 2px 5px;
    border: 2px dashed rgba(233, 238, 233, 0.5);
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 700;
    text-align: center;
}

.ice-in::placeholder { color: rgba(233, 238, 233, 0.38); font-weight: 600; }
.ice-in:focus { outline: none; border-style: solid; border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.14); }
.ice-in.fejl { border-color: var(--roed); background-color: rgba(224, 84, 70, 0.16); animation: ryst 0.35s ease 1; }

.bh-y {
    flex: 0 0 auto;
    width: clamp(240px, 32%, 380px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid #3c3f4d;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.22);
    font-size: 0.98rem;
}

.y-linje { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-weight: 600; }
.y-linje b { color: #9fd3f7; font-variant-numeric: tabular-nums; }
.y-k { display: flex; align-items: center; gap: 8px; color: #f7e4ab; font-weight: 600; }

.y-sml {
    padding: 1px 9px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #dfe4ea;
    font-size: 0.88rem;
    font-weight: 800;
}

.y-sml.lige { background-color: rgba(63, 174, 114, 0.35); color: #d6ffe8; }

.y-ligning { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; padding-top: 4px; border-top: 1px solid #3c3f4d; font-weight: 600; }
.y-etiket { width: 100%; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-mat); }

.bh-roedder { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-roedder:empty { display: none; }

/* ---------------------------------------------------------------------
   FANE 2 OG 3: tavlen med opgavens dele (felterne er fra sb9.3)
   --------------------------------------------------------------------- */
#ux-arbejde, #mx-arbejde {
    --fs: clamp(16px, min(2.9cqw, 4.3cqh), 34px);
    justify-content: flex-start;
    font-size: var(--fs);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4d4d5c transparent;
}

#ux-arbejde .tavle, #mx-arbejde .tavle { flex: 0 0 auto; gap: calc(var(--fs) * 0.32); padding-top: calc(var(--fs) * 1.05 + 6px); }

.tv-hoved { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.tv-hoved .skema { font-size: max(17px, calc(var(--fs) * 0.9)); }
.tv-hoved .art { cursor: pointer; }
.tv-hoved .ligepil { cursor: default; }

.ot-raekke {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    max-width: 100%;
    font-size: max(14px, calc(var(--fs) * 0.6));
    font-weight: 600;
    color: #dfe8e3;
}

/* Tallene kommer foerst, naar ligevaegtsloven er skrevet rigtigt
   (brugeren 9. oktober 2026). Pladsen er sat af, saa intet flytter sig. */
.ot-raekke.skjult { visibility: hidden; }

@keyframes ot-ny {
    0% { box-shadow: 0 0 0 0 rgba(242, 197, 61, 0.9); background-color: rgba(242, 197, 61, 0.5); }
    100% { box-shadow: 0 0 0 9px rgba(242, 197, 61, 0); }
}

.ot-raekke.ny .ot-tal { animation: ot-ny 0.8s ease-out 2; }

.ot-etiket {
    font-size: max(12.5px, calc(var(--fs) * 0.36));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa39a;
}

.ot-tal {
    padding: 0.1em 0.5em;
    border: 1px solid rgba(242, 197, 61, 0.45);
    border-radius: 7px;
    background-color: rgba(58, 50, 32, 0.6);
    color: #fff2cc;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.ot-tal:hover { border-color: var(--gul); background-color: rgba(242, 197, 61, 0.2); }
.ot-tal.lys { border-color: var(--gul); box-shadow: 0 0 0 2px var(--gul); }
.ot-tal sub { font-size: 0.7em; }

/* Delene oeverst: hvor langt eleven er */
.delbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: max(12.5px, calc(var(--fs) * 0.42));
}

.db-trin { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: rgba(233, 238, 233, 0.45); }

.db-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 0.85em;
}

.db-trin.nu { color: var(--gul); }
.db-trin.ok { color: #8ff0b4; }
.db-trin.ok .db-nr { border-color: var(--groen-mork); background-color: var(--groen-mork); color: #ffffff; }
.db-pil { color: rgba(233, 238, 233, 0.3); }

.regn-dele { width: 100%; display: flex; flex-direction: column; gap: calc(var(--fs) * 0.22); }

.rb { padding: calc(var(--fs) * 0.14) calc(var(--fs) * 0.4); border-radius: 10px; }
.rb.aktiv { background-color: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 2px rgba(242, 197, 61, 0.35); padding-top: calc(var(--fs) * 0.3); padding-bottom: calc(var(--fs) * 0.3); }

/* Tekstboksen staar oeverst i den del, eleven er ved, og alene i en
   boks nederst, naar opgaven er loest */
#ux-tavle .tekstboks, #mx-tavle .tekstboks { --tb-fs: max(16px, calc(var(--fs) * 0.56)); }
.rb.aktiv > .tekstboks { margin-bottom: calc(var(--fs) * 0.3); }
.rb.slut { padding-left: 0; padding-right: 0; }
.rb.slut > .tekstboks { min-height: 0; }

/* Beregninger paa hver sin linje med lighedstegnene under hinanden:
   venstresiden, =, udtrykket og = resultatet i hver sin kolonne */
.regn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--fs) * 0.14); }
.regn.midt { align-items: center; }

.regn-etiket {
    font-size: max(12.5px, calc(var(--fs) * 0.36));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fa39a;
}

.regn-gitter {
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: start;
    align-items: center;
    gap: calc(var(--fs) * 0.16) 0.4em;
    font-size: max(15px, calc(var(--fs) * 0.62));
    font-weight: 600;
    line-height: 1.3;
    color: #dfe8e3;
}

.regn.midt .regn-gitter { font-size: max(16px, calc(var(--fs) * 0.68)); font-weight: 700; color: #e9eee9; }
.rg-v { justify-self: end; white-space: nowrap; padding: 0 3px; border-radius: 6px; }
.rg-v.lys { box-shadow: 0 0 0 2px var(--gul); }
.rg-m, .rg-r { justify-self: start; display: inline-flex; align-items: center; gap: 0.35em; white-space: nowrap; }
.regn-gitter sub { font-size: 0.7em; }
.regn .kontrol { font-size: max(15px, calc(var(--fs) * 0.57)); font-weight: 600; line-height: 1.35; }

.rb-linje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15em 0.3em;
    font-size: max(15px, calc(var(--fs) * 0.62));
    font-weight: 600;
    line-height: 1.35;
    color: #dfe8e3;
}

.rb-linje .rl { flex: 0 1 auto; min-width: 0; }
.rb-linje b { color: #8ff0b4; }
.rb-linje sub { font-size: 0.7em; }
.rs-maerke { font-size: 0.8em; color: #8ff0b4; }
.rs-maerke.svar { color: var(--gul); }
.kontrol { color: #b5c6be; font-size: 0.92em; }

.rs-rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35em 0.45em; font-size: calc(var(--fs) * 0.9); font-weight: 700; }
.rs-lig, .rs-v { white-space: nowrap; }
.rs-vist { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.85em; white-space: nowrap; }

.bf-broek { display: inline-flex; flex-direction: column; align-items: stretch; }
.bf-top { display: flex; align-items: center; justify-content: center; gap: 0.2em; padding: 2px 4px; }
.bf-streg { height: 3px; margin: 3px 0; border-radius: 2px; background-color: #e9eee9; }
.bf-gange { padding: 0 0.05em; }
.bf-faktor { display: inline-flex; align-items: center; }
.bf-par { font-weight: 400; font-size: 1.15em; }
.bf-eks { align-self: flex-start; font-size: 0.6em; margin-left: 1px; color: var(--gul); }

.bf-in, .rs-in {
    padding: 0.08em 0.3em;
    border: 2px dashed rgba(233, 238, 233, 0.5);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
}

.bf-in.lov { width: 13em; font-size: 0.8em; padding: 0.18em 0.4em; }
.bf-in.udtr { width: 7.5em; font-size: 0.72em; padding: 0.2em 0.3em; }
.bf-in.tal { width: 5.6em; font-size: 0.72em; padding: 0.2em 0.3em; }
.rs-in { width: 7em; font-size: 0.8em; padding: 0.15em 0.3em; }
.rs-in.formel { width: 6em; }
.bf-in::placeholder, .rs-in::placeholder { color: rgba(233, 238, 233, 0.4); font-weight: 600; }
.bf-in:focus, .rs-in:focus { outline: none; border-style: solid; border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.14); }
.bf-in.fejl, .rs-in.fejl, .rs-sel.fejl { border-color: var(--roed); background-color: rgba(224, 84, 70, 0.16); animation: ryst 0.35s ease 1; }
.rs-enhed { font-size: 0.8em; color: #cfd9d4; white-space: nowrap; }

.rs-sel {
    padding: 0.12em 0.3em;
    border: 2px dashed rgba(233, 238, 233, 0.5);
    border-radius: 8px;
    background-color: #24302b;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
}

.rs-sel:focus { outline: none; border-style: solid; border-color: var(--blaa); }
.rs-sel option { background-color: #24302b; }

#ux-tavle .tjekknap, #mx-tavle .tjekknap { font-size: max(15px, calc(var(--fs) * 0.55)); padding: 0.3em 0.9em; }

.k-tegn sub { font-size: 0.55em; }

/* Klik for at skrive (ligevaegtsloven) */
.indsaet-raekke { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin-top: calc(var(--fs) * 0.3); }
.ir-etiket { font-size: max(12.5px, calc(var(--fs) * 0.36)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8fa39a; }
.indsaet-raekke .brik { font-size: max(15px, calc(var(--fs) * 0.56)); padding: 0.18em 0.5em; }
.indsaet-raekke .brik.eks { font-size: max(19px, calc(var(--fs) * 0.8)); padding-top: 0.05em; padding-bottom: 0.05em; }

/* Saetningen, der definerer x */
.defx {
    display: block;
    font-size: max(16px, calc(var(--fs) * 0.7));
    font-weight: 600;
    line-height: 1.9;
    text-align: center;
    color: #e9eee9;
}

.defx .rs-sel { margin: 0 2px; }
.defx .tjekknap { margin-left: 10px; vertical-align: middle; }
.defx b { font-family: "Times New Roman", Times, serif; font-style: italic; font-size: 1.15em; }

/* Skemaet paa tavlen */
.ice-ramme { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; }
.rb-skema .ice { font-size: max(15px, calc(var(--fs) * 0.68)); }
.rb-skema .ice-in { width: 6.6em; }
.ice-maerke { align-self: flex-start; }

.ice-celle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 1px 8px;
    border: 2px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.ice-celle.klik { border: 1px dashed rgba(159, 211, 247, 0.6); }
.ice-celle.klik:hover { border-style: solid; border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.14); }
.ice-celle .ic-ind { font-size: 0.82em; color: #cfd9d4; }
.ice-celle.pos .ic-tegn { color: #8ff0b4; }
.ice-celle.neg { border-color: rgba(224, 84, 70, 0.75); background-color: rgba(224, 84, 70, 0.16); }
.ice-celle.neg .ic-tegn { color: #ffb3aa; }
.ice-celle.vaelg:hover { border-color: var(--gul); }
.ice-celle.lys { box-shadow: 0 0 0 2px var(--gul); }

/* CAS-vinduet: hvidt papir som i et CAS-program */
.cas {
    width: min(100%, 44em);
    margin: 0 auto;
    border: 1px solid #c9c6ba;
    border-radius: 9px;
    background-color: #fbfbf8;
    color: #1d1d1f;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    font-size: max(14px, calc(var(--fs) * 0.62));
}

.cas-hoved {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 10px;
    background-color: #e7e5dc;
    border-bottom: 1px solid #c9c6ba;
    font-size: max(12.5px, 0.62em);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #4a4840;
}

.cas-note { font-weight: 600; letter-spacing: 0; color: #6c695e; }
.cas-rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; }
.cas-ind { font-family: "Cambria Math", Cambria, "Times New Roman", serif; font-size: 1.3em; color: #c00018; }
.cas-ind .vbroek > span:first-child { border-bottom-color: #c00018; }

.cas-knap {
    padding: 0.4em 0.9em;
    border: 1px solid #2a76ac;
    border-radius: 8px;
    background-color: #2a76ac;
    color: #ffffff;
    font-family: inherit;
    font-size: max(14px, 0.95em);
    font-weight: 700;
    cursor: pointer;
}

.cas-knap:hover:not(:disabled) { background-color: var(--blaa); }
.cas-knap:disabled { background-color: #e7e5dc; border-color: #c9c6ba; color: #1f3fd1; cursor: default; font-family: "Cambria Math", Cambria, serif; }

.cas-mini { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2em 0.5em; padding: 0.1em 0.5em; border-radius: 7px; background-color: #fbfbf8; color: #1d1d1f; }
.cas-mini-ind { font-family: "Cambria Math", Cambria, serif; color: #c00018; }
.cas-mini-ind .vbroek > span:first-child { border-bottom-color: #c00018; }
.cas-pil { font-size: 0.75em; font-weight: 800; color: #6c695e; }
.cas-mini-ud { font-family: "Cambria Math", Cambria, serif; color: #1f3fd1; font-weight: 700; }

/* Loesningerne: proev, brug eller forkast */
.valg { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--fs) * 0.3); }

.lsn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 0.25em 0.5em;
    border: 2px solid #4a5a52;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.18);
    font-size: max(15px, calc(var(--fs) * 0.62));
}

.lsn.proevet { border-color: var(--blaa); }
.lsn.brug { border-color: #5fcf92; background-color: rgba(63, 174, 114, 0.14); }
.lsn.forkast { border-color: var(--roed); background-color: rgba(224, 84, 70, 0.12); }

.lsn-x {
    padding: 0.15em 0.6em;
    border: 1px solid rgba(159, 211, 247, 0.6);
    border-radius: 8px;
    background-color: rgba(61, 158, 224, 0.12);
    color: #e8f4fb;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.lsn-x:hover { border-color: var(--blaa); background-color: rgba(61, 158, 224, 0.25); }
span.lsn-x { cursor: default; }
.lsn-dom { font-size: 0.85em; font-weight: 600; color: #b5c6be; }
.lsn-dom.ok { color: #8ff0b4; }
.lsn-dom.nej { color: #ffb3aa; }
.lsn-dom.vent { color: #f7e4ab; }

.lsn-knap {
    padding: 0.15em 0.7em;
    border: 1px solid;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
}

.lsn-knap.ja { border-color: #5fcf92; background-color: var(--groen-mork); color: #ffffff; }
.lsn-knap.nej { border-color: #e07a6f; background-color: #7a2a22; color: #ffffff; }
.lsn-knap:hover { filter: brightness(1.15); }

.bh-rod { font-size: 0.95rem; }
.bh-rod.forkast { border-color: var(--roed); background-color: rgba(224, 84, 70, 0.22); text-decoration: line-through; }
.bh-rod.brug { border-color: #5fcf92; background-color: rgba(63, 174, 114, 0.2); }

/* Koncentrationerne */
.konc { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: calc(var(--fs) * 0.3) calc(var(--fs) * 0.6); }
.konc-x { width: 100%; text-align: center; font-size: calc(var(--fs) * 0.66); font-weight: 700; color: #9fd3f7; }
.konc-lab { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; padding: 0 3px; border-radius: 6px; }
.konc-lab.lys { box-shadow: 0 0 0 2px var(--gul); }
.konc .tjekknap { font-size: max(15px, calc(var(--fs) * 0.55)); }

/* Besvarelsen i panelet */
.fk-hoved {
    display: block;
    margin: 4px 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8fd6ad;
}

.forklaring p.fk-linje { margin: 0 0 7px; font-size: 0.9rem; line-height: 1.6; }
.fk-linje b { color: #b8f0cf; }
.fk-linje .cas-mini { font-size: 0.92em; }
.fk-skema { margin: 2px 0 8px; overflow-x: auto; }
.fk-blok { margin: 0 0 7px; overflow-x: auto; }
.fk-blok .regn { gap: 3px; }
.fk-blok .regn-etiket { font-size: 0.72rem; }
.fk-blok .regn-gitter { gap: 4px 0.35em; font-size: 0.9rem; font-weight: 400; color: #dde3ea; }
.fk-blok .kontrol { font-size: 0.86rem; font-weight: 400; }
.fk-blok .rs-maerke { display: none; }
.fk-skema .ice { font-size: 0.82rem; color: #dde3ea; }
.fk-skema .ice th, .fk-skema .ice td { padding: 2px 6px; }
.fk-skema .ice th { color: #dde3ea; }
canvas.kurve { display: block; width: 100%; height: 170px; }

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

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

@media (max-width: 1100px) {
    .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; }
    .tekstboks { gap: 10px; }
    .tekstboks .knap { min-width: 11.6em; padding-left: 0.6em; padding-right: 0.6em; }
}

@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: 78vh; 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; }
}

/* Fane 1 i en lav scene: mindre luft om kassen og tekstboksen, og
   beholderen maa blive lavere, naar CAS' loesninger fylder forneden */
@container (max-height: 700px) {
    .laerred-ramme { min-height: 140px; }
    .bh-arbejde { gap: 6px; padding: 8px 12px 6px; }
    .opgavekasse { gap: 4px; padding: 6px 8px; }
    .bh-arbejde .tekstboks { padding-top: 5px; padding-bottom: 5px; }
}

/* Fane 1 i en smal scene: tallet staar under udtrykket i skemaet */
@container (max-width: 820px) {
    .bh-celle { flex-direction: column; gap: 0; line-height: 1.15; }
    .bh-celle .bh-lig { display: none; }
    .bh-celle .bh-u { font-size: 0.86em; color: #b5c6be; }
    .bh-ice { font-size: 0.92rem; }
    .bh-ice .ice-in { width: 4.4em; }
    .bh-y { width: 200px; font-size: 0.9rem; padding: 6px 9px; }
    .bh-xlab { min-width: 12em; }
}