/*
 * Die T-Konto-Werkstatt: T-Konto in der Mitte, Kontenplan rechts.
 *
 * Gehört zu js/tkonto-werkstatt.js und wird von zwei Seiten benutzt: der
 * eingebetteten Übung auf der Wissensseite und dem Drill. Beide sehen
 * verschieden aus, obwohl sie dieselbe Werkstatt zeigen — alles Farbige hängt
 * an Variablen, die die Seite setzt:
 *
 *   --tkw-akzent      die Signalfarbe des Bereichs (Wissensseite Terra, Drill Blau)
 *   --tkw-akzent-hell derselbe Ton als Schleier, etwa für die Ablagefläche
 *   --tkw-tinte       Schrift und die kräftigen Linien des T-Kontos
 *   --tkw-text-mid    Fliesstext
 *   --tkw-text-leise  Beiwerk
 *   --tkw-linie       feine Trennlinien
 *   --tkw-karte       heller Untergrund von Kästen
 *   --tkw-papier      Untergrund des Kontenplans
 *
 * Ohne gesetzte Variablen greifen die Rückfallwerte, und die Werkstatt sieht
 * aus wie auf der Wissensseite.
 *
 * KLASSENFARBEN class-0 bis class-9 setzt die einbindende Seite ebenfalls; die
 * Töne stammen vom Kontenplan (siehe dort).
 *
 * KLASSENNAMEN mit dem Präfix tkw- und ohne die Wortbestandteile card, hero,
 * kicker, label, row, panel, section, list, chip, btn, stat oder cta: styles.css
 * und exercise-hb-shell.css fangen solche Namen mit über 300
 * Substring-Selektoren ungefragt ein.
 */
/* ------------------------------------------------------ Klassenfarben

   Dieselben Töne wie auf der Kontenplan-Seite. Sie stehen dort in
   css/kontenplan-hb.css auf body.knowledge-hb-body. Hierher kopiert, weil die
   Werkstatt auf zwei verschiedenen Seitenfamilien läuft: Die Wissensseite
   trägt jenen Body, der Drill nicht. Ohne die Kopie hätte der Drill einen
   Kontenplan, in dem alle zehn Klassen gleich aussehen — und die Farbe ist
   dort keine Zierde, sondern die Information, zu welcher Klasse ein Konto
   gehört.

   Beim Herausziehen der Werkstatt aus der Wissensseite war genau das passiert:
   Die Palette blieb zurück, weil sie ausserhalb der verschobenen Blöcke stand.

   Damit die Kopie nicht auseinanderläuft, vergleicht
   .agents/skills/learnapp-frontend/scripts/check-ust-uebung.js beide Listen.

   GESCOPT auf .tkw-flaeche: class-0 bis class-9 sind sehr allgemeine Namen und
   kommen auf anderen Seiten in anderer Bedeutung vor. */

.tkw-flaeche {
    --kp-0: #e6e0d2; --kp-1: #deeaf4; --kp-2: #eaf4e8; --kp-3: #eae3d0; --kp-4: #e8def1;
    --kp-5: #e6e0d2; --kp-6: #eaf5ee; --kp-7: #f0d9d5; --kp-8: #e6e0d2; --kp-9: #e6ddef;
    --kp-0-strong: #564d43; --kp-1-strong: #185fa5; --kp-2-strong: #2f7650;
    --kp-3-strong: #a85f20; --kp-4-strong: #775097; --kp-5-strong: #4a453b;
    --kp-6-strong: #376f66; --kp-7-strong: #a43f34; --kp-8-strong: #564d43;
    --kp-9-strong: #67458c;
}

.tkw-flaeche .class-0 { --ton: var(--kp-0); --kante: var(--kp-0-strong); }
.tkw-flaeche .class-1 { --ton: var(--kp-1); --kante: var(--kp-1-strong); }
.tkw-flaeche .class-2 { --ton: var(--kp-2); --kante: var(--kp-2-strong); }
.tkw-flaeche .class-3 { --ton: var(--kp-3); --kante: var(--kp-3-strong); }
.tkw-flaeche .class-4 { --ton: var(--kp-4); --kante: var(--kp-4-strong); }
.tkw-flaeche .class-5 { --ton: var(--kp-5); --kante: var(--kp-5-strong); }
.tkw-flaeche .class-6 { --ton: var(--kp-6); --kante: var(--kp-6-strong); }
.tkw-flaeche .class-7 { --ton: var(--kp-7); --kante: var(--kp-7-strong); }
.tkw-flaeche .class-8 { --ton: var(--kp-8); --kante: var(--kp-8-strong); }
.tkw-flaeche .class-9 { --ton: var(--kp-9); --kante: var(--kp-9-strong); }


.tkw-flaeche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: 18px;
    align-items: start;
}

.tkw-notiz {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--tkw-linie, #dad3c2);
    background: var(--tkw-karte, #fcfaf4);
    color: var(--tkw-text-mid, #6e6757);
}

.tkw-fuss:empty { display: none; }
.tkw-fuss { margin-top: 14px; }

.tkw-gewaehlt:empty { display: none; }

.tkw-gewaehlt {
    margin: 10px 0 0;
    padding: 8px 11px;
    border-left: 3px solid var(--tkw-akzent, #b0492c);
    background: var(--tkw-karte, #fcfaf4);
    font-size: 0.84rem;
    color: var(--tkw-text-mid, #6e6757);
}
/* ---------------------------------------------------------- Das T-Konto */

.tkw-tkonto {
    margin-top: 14px;
    border: 1px solid var(--tkw-tinte, #23201b);
    background: var(--tkw-tafel, #ffffff);
}

.tkw-tkopf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid var(--tkw-tinte, #23201b);
    /* Kräftiges Band statt heller Zeile: Das T-Konto ist die Arbeitsfläche und
       soll als solche ins Auge fallen. Vorher war alles annähernd weiss auf
       Creme, und die Fläche verschwand im Papier. */
    background: var(--tkw-tinte, #23201b);
}

.tkw-tkopf span {
    padding: 9px 12px;
    color: var(--tkw-tafel, #ffffff);
    font-family: var(--tkw-mono, ui-monospace, monospace);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

/* Der senkrechte Strich des T: Er trennt Soll von Haben über die ganze Höhe. */
.tkw-tkopf span:first-child {
    border-right: 2px solid var(--tkw-tafel, #ffffff);
}

.tkw-zeile > *:nth-child(2) {
    border-right: 2px solid var(--tkw-tinte, #23201b);
}

.tkw-tinhalt { display: grid; }

.tkw-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr) 112px;
    align-items: stretch;
    border-bottom: 1px solid var(--tkw-linie, #dad3c2);
}

.tkw-zeile:last-child { border-bottom: 0; }

/* Die Hälfte, auf der diese Zeile nichts zu suchen hat, bekommt einen ruhigen
   Grund. Vorher war sie leer und las sich wie eine fehlende Eingabe statt wie
   „hier gehört nichts hin". */
.tkw-zeile > div:empty {
    background: repeating-linear-gradient(
        135deg,
        transparent 0 6px,
        rgba(35, 32, 27, 0.045) 6px 7px);
}

.tkw-platz {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 7px 9px;
    cursor: pointer;
}

.tkw-platz.is-drueber { background: var(--tkw-akzent-hell, rgba(176, 73, 44, 0.10)); }

.tkw-leer {
    color: var(--tkw-text-leise, #8a8273);
    font-size: 0.84rem;
    font-style: italic;
}

.tkw-marke {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border-left: 5px solid var(--kante, #564d43);
    background: color-mix(in srgb, var(--kante, #564d43) 32%, #ffffff);
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--tkw-tinte, #23201b);
}

.tkw-weg {
    flex: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--tkw-linie, #dad3c2);
    background: var(--tkw-tafel, #ffffff);
    color: var(--tkw-text-mid, #6e6757);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.tkw-weg:hover { border-color: var(--tkw-akzent, #b0492c); color: var(--tkw-akzent, #b0492c); }

.tkw-betrag {
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 0;
    border-left: 1px solid var(--tkw-linie, #dad3c2);
    background: transparent;
    font: inherit;
    font-family: var(--tkw-mono, ui-monospace, monospace);
    font-size: 0.88rem;
    text-align: right;
}

.tkw-betrag:focus-visible {
    outline: 2px solid var(--tkw-akzent, #b0492c);
    outline-offset: -2px;
}

.tkw-tsumme {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-top: 2px solid var(--tkw-tinte, #23201b);
    background: var(--tkw-papier, #fbf8ef);
    font-size: 0.82rem;
    color: var(--tkw-text-mid, #6e6757);
}

.tkw-tsumme span:last-child { text-align: right; }
.tkw-tsumme span:nth-child(2) { font-size: 0.76rem; }
.tkw-tsumme strong { font-family: var(--tkw-mono, ui-monospace, monospace); }
.tkw-tsumme.is-gleich { color: var(--tkw-richtig, #4F6842); }

/* --------------------------------------------------------- Kontenplan */

.tkw-plan {
    position: sticky;
    top: 12px;
    border-top: 3px solid var(--tkw-akzent, #b0492c);
    max-height: min(78vh, 760px);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tkw-linie, #dad3c2);
    background: var(--tkw-karte, #fcfaf4);
}

.tkw-plan-kopf { padding: 11px 13px 0; }

.tkw-plan-hinweis {
    margin: 0;
    padding: 0 13px 11px;
    border-bottom: 1px solid var(--tkw-linie, #dad3c2);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--tkw-text-mid, #6e6757);
}

.tkw-plan-baum {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tkw-klasse-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px 9px 14px;
    border-top: 1px solid var(--tkw-linie, #dad3c2);
    border-left: 4px solid var(--kante, #564d43);
    /* Der Klassenkopf behält den blassen Grundton. Er ist die Beschriftung,
       die Konten darunter sind das Bedienbare — die kräftigste Farbe gehört
       dorthin, wo geklickt wird. */
    background: var(--ton, #e6e0d2);
    color: var(--tkw-tinte, #23201b);
    font-size: 0.82rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

/* Das Dreieck des details-Elements ersetzen wir durch ein eigenes Zeichen,
   damit es in allen Browsern gleich aussitzt. */
.tkw-klasse-kopf::-webkit-details-marker { display: none; }

.tkw-klasse-kopf::after {
    content: "▾";
    flex: none;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.tkw-klasse[open] > .tkw-klasse-kopf::after { transform: rotate(180deg); }

.tkw-klasse-kopf small {
    flex: none;
    padding: 2px 7px;
    background: var(--tkw-tafel, #ffffff);
    font-family: var(--tkw-mono, ui-monospace, monospace);
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--kante, #564d43);
}

.tkw-klasse.is-ohne > .tkw-klasse-kopf small {
    padding: 0;
    background: none;
    color: var(--tkw-text-leise, #8a8273);
}

/* Eine Klasse ohne nutzbares Konto in diesem Fall: gleiche Farbe, nur matt. */
/* Klassen ohne nutzbares Konto nehmen sich zurück: entsättigt, kleiner, ohne
   farbige Kante. Sieben von zehn Klassen sind in einem Fall nicht gefragt —
   stünden sie gleich laut da, erschlügen sie die drei, um die es geht. */
.tkw-klasse.is-ohne > .tkw-klasse-kopf {
    padding-top: 6px;
    padding-bottom: 6px;
    border-left-color: var(--tkw-linie, #dad3c2);
    background: transparent;
    color: var(--tkw-text-leise, #8a8273);
    font-size: 0.76rem;
    font-weight: 400;
}

.tkw-klasse-kopf small { color: var(--kante, #564d43); }
.tkw-klasse.is-ohne > .tkw-klasse-kopf small { color: inherit; }

/* DIE WÄHLBAREN KONTEN TRAGEN DIE KRÄFTIGE FASSUNG. Zuerst standen sie auf
   45 % eines ohnehin blassen Pastelltons — rechnerisch etwa 7 % Farbe, und die
   zehn Klassen waren kaum auseinanderzuhalten. Der Ton kommt jetzt aus der
   gesättigten Klassenfarbe (--kante) statt aus dem hellen Grundton: dieselbe
   Farbe, nur satter, und kein elfter Wert, der gepflegt werden müsste.

   32 % ist gemessen und nicht geschätzt: Die Tinte darauf kommt in der
   schlechtesten Klasse noch auf 9,2:1, beim Zeigen auf 6,9:1 — weit über den
   nötigen 4,5. */
.tkw-konto {
    padding: 7px 12px 7px 16px;
    border-top: 1px solid rgba(218, 211, 194, 0.55);
    border-left: 5px solid var(--kante, #564d43);
    background: color-mix(in srgb, var(--kante, #564d43) 32%, #ffffff);
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--tkw-tinte, #23201b);
    cursor: grab;
}

.tkw-konto strong {
    font-family: var(--tkw-mono, ui-monospace, monospace);
    font-size: 0.78rem;
}

.tkw-konto:hover:not(.is-gesperrt) { background: color-mix(in srgb, var(--kante, #564d43) 46%, #ffffff); }

.tkw-konto.is-gewaehlt {
    background: var(--kante, #564d43);
    border-left-color: var(--tkw-tinte, #23201b);
    color: var(--tkw-karte, #fcfaf4);
}

/* Ausgegraut heißt hier wörtlich: dieselbe Farbe wie ein nutzbares Konto,
   nur die Sättigung heraus. So bleibt die Kontenklasse ablesbar — die Farbe
   ist ja eine Information und nicht Schmuck — und trotzdem sieht man auf einen
   Blick, was zu diesem Fall gehört. */
.tkw-konto.is-gesperrt {
    filter: grayscale(1);
    color: #A9A294;
    cursor: not-allowed;
    -webkit-user-select: none;
    user-select: none;
}