/* Schreibtischtest (src/Schreibtischtest.php, assets/js/schreibtischtest.js).
 *
 * Steht nur in der Quizkarte, und die ist immer dunkel - die Farben haengen
 * deshalb nicht an data-bs-theme, sondern stehen fest.
 *
 * Die Aufgabe hat zwei Haelften: links der Code, rechts das Raster. Ab 900 px
 * nebeneinander, darunter untereinander, damit auf dem Handy nichts quer
 * laeuft. Fuenf Durchlaeufe mal drei Spalten sind fuenfzehn Felder; sie
 * bleiben schmal, sonst passt die Tabelle auf keinem Telefon.
 */
[data-schreibtischtest] {
    --st-rand: var(--rand, rgba(255, 255, 255, .2));
    --st-marke: #ffb86b;
}

.st-kasten { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-bottom: .75rem; }
/* minmax(0, 1fr) statt des Vorgabewerts auto: Eine Rasterspalte waechst sonst
   mit ihrem Inhalt, und die Tabelle schiebt den ganzen Abschnitt ueber den
   Rand der Quizkarte. Am Handy gemessen - dort war die dritte Spalte
   abgeschnitten und der Leittext lief mit hinaus. Dasselbe gilt fuer die
   Kaesten selbst: Ohne min-width: 0 ignoriert ein Rasterkind die Spalte. */
.st-schritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-content: start; }
.st-code, .st-arbeit, .st-schritte > * { min-width: 0; }
@media (min-width: 900px) {
    /* Breit genug fuer eine eingerueckte Zuweisung in voller Laenge: Rollen
       muessen soll man im Code nur, wenn die Aufgabe wirklich lange Zeilen
       hat, nicht schon bei der ueblichen. */
    .st-kasten { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; }
    /* Der Code steht neben allen Abschnitten und bleibt beim Blaettern
       sichtbar: Er ist die Grundlage jeder einzelnen Antwort. Die Abschnitte
       stehen darum in einer eigenen Spalte - sonst fuellt der zweite die
       Luecke, die der Code unter sich laesst. */
    .st-code { position: sticky; top: .5rem; }
}

.st-code, .st-arbeit {
    padding: .7rem .75rem;
    border: 1px solid var(--st-rand);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}
.st-arbeit { background: #0f1420; }

/* Der Code: Zeilennummern aus der Liste, Einrueckung aus dem Quelltext.
   white-space: pre ist hier kein Schoenheitsmittel - ohne es verschwinden
   die fuehrenden Leerzeichen, und mit ihnen die Schachtelung. */
/* Eine lange Zeile bricht um, statt seitlich zu rollen. Die Sorge war, dass
   umgebrochener Code wie zwei Anweisungen aussieht - die Aufgabe fragt ja
   nach Zeilennummern. Die Nummer steht aber nur einmal, am Anfang der
   Zeile, und die Fortsetzung ruecken wir ein. Das ist eindeutig genug und
   allemal besser, als am Handy nach der halben Anweisung zu suchen. */
.st-code { overflow-x: auto; }
.st-zeilen { margin: 0; padding-left: 2.2rem; font-size: .9rem; }
.st-zeilen li { padding: .05rem 0; }
.st-zeilen li::marker { color: rgba(255, 255, 255, .45); font-size: .8rem; }
.st-zeilen code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }

.st-testdaten { margin: .8rem 0 0; font-size: .88rem; }
.st-testdaten-titel { display: block; color: rgba(255, 255, 255, .7); margin-bottom: .25rem; }
.st-wert {
    display: inline-block;
    margin: 0 .3rem .3rem 0;
    padding: .1rem .5rem;
    border: 1px solid var(--st-rand);
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.st-titel { margin: 0 0 .3rem; font-size: 1.05rem; }
.st-leit { margin: 0 0 .6rem; font-size: .9rem; color: rgba(255, 255, 255, .8); }

.st-tabelle-huelle { margin-bottom: .7rem; max-width: 100%; }
/* Die Spaltenkoepfe sind Variablennamen aus der Kursdatei - "anzahlPositiv"
   hat keine Trennstelle und erzwang mit nowrap die ganze Tabellenbreite.
   Am Handy war dadurch die dritte Spalte abgeschnitten. Lieber ein
   zweizeiliger Kopf als eine Tabelle, in der man seitwaerts rollen muss,
   waehrend man links Werte eintraegt. */
.st-tabelle { margin: 0; font-size: .9rem; }
.st-tabelle th { hyphens: auto; overflow-wrap: anywhere; }
.st-tabelle td { padding: .2rem .25rem; }
/* Die erste Spalte traegt kein Variablenname, sondern das Wort "Durchlauf".
   Es darf nicht buchstabenweise umbrechen - ohne diese Ausnahme stand dort
   am Handy eine Spalte aus einzelnen Buchstaben. */
.st-durchlauf, .st-tabelle thead th:first-child {
    width: 1%;
    text-align: center;
    overflow-wrap: normal;
    white-space: nowrap;
}
.st-zelle { min-width: 4.5rem; max-width: 7rem; text-align: center; font-variant-numeric: tabular-nums; }
/* Das Auswahlfeld traegt "wahr" oder "falsch" neben seinem Pfeil. Zu schmal
   gesetzt, schiebt sich der Pfeil ueber das Wort - am Handy gemessen. */
select.st-zelle { min-width: 5rem; }

.st-paar { display: grid; gap: .6rem; margin-bottom: .7rem; }
.st-feldzeile { display: grid; gap: .25rem; font-size: .9rem; }
.st-feldzeile input { max-width: 8rem; }

/* Die Zeilenwahl sind Schaltflaechen mit der Zeilennummer als Namen, keine
   Klicks ins Bild - die Tastaturbedienung folgt damit aus der Bauweise. */
.st-zeilenwahl { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.st-nr {
    min-width: 2.4rem;
    padding: .25rem .5rem;
    border: 1px solid var(--st-rand);
    border-radius: 6px;
    background: rgba(255, 255, 255, .06);
    color: inherit;
    font-variant-numeric: tabular-nums;
}
.st-nr:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.st-nr[aria-pressed="true"] {
    border-color: var(--st-marke);
    background: rgba(255, 184, 107, .18);
    color: var(--st-marke);
    font-weight: 600;
}

.st-rumpf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .8rem;
    padding: .5rem .6rem;
    border: 1px solid var(--st-rand);
    border-radius: 6px;
    background: rgba(255, 255, 255, .04);
}
.st-rumpf code { white-space: pre; font-size: .9rem; }
.st-luecke { max-width: 11rem; border-color: var(--st-marke); }

/* Ein abgeschlossener Abschnitt bleibt lesbar und tritt zurueck: Die
   Wertetabelle ist die Grundlage der naechsten Antwort und darf nicht
   verschwinden, nur weil sie abgegeben ist. */
.st-fertig { opacity: .75; }
.st-fertig .st-titel::after {
    content: "✓";
    margin-left: .4rem;
    color: #7ddf9a;
}

.st-hinweis { margin: 0 0 .7rem; min-height: 1.2rem; font-size: .9rem; color: var(--st-marke); }
.st-weiter { margin-top: .2rem; }

@media (max-width: 575px) {
    .st-tabelle { font-size: .82rem; }
    .st-tabelle td { padding: .15rem .15rem; }
    /* Die Zahlenfelder tragen ein bis zwei Zeichen und duerfen schmal sein.
       Was sie hergeben, braucht die Bedingungsspalte fuer ihr Wort samt Pfeil. */
    input.st-zelle { min-width: 2.4rem; max-width: 3.6rem; font-size: .82rem; padding: .2rem .2rem; }
    select.st-zelle {
        min-width: 4.4rem;
        font-size: .82rem;
        padding: .2rem 1.1rem .2rem .25rem;
        background-position: right .2rem center;
    }
    .st-zeilen, .st-zeilen code { font-size: .82rem; }
    .st-feldzeile input { max-width: 6rem; }
    /* Schmaler, damit "WENN zahl [__] 0 DANN" in einer Zeile bleibt: Die
       Reparatur ist eine Codezeile, und drei Zeilen daraus zu machen nimmt
       ihr den Zusammenhang. */
    .st-luecke { max-width: 6rem; }
    .st-rumpf { padding: .4rem .45rem; gap: .25rem; }
}

/* --- Rueckmeldung nach der Abgabe --------------------------------------- */

.st-richtig { border-color: rgba(125, 223, 154, .55); }
.st-falsch { border-color: rgba(255, 138, 138, .55); }
.st-punkte {
    float: right;
    font-size: .82rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .75);
}

.st-zelle-richtig { border-color: #7ddf9a; }
.st-zelle-falsch { border-color: #ff8a8a; }

/* Ein uebernommener Folgefehler ist keine zweite falsche Antwort, sondern
   dieselbe - er wird deshalb anders gezeichnet als ein eigener Fehler. */
.st-zelle-folge { border-style: dashed; border-color: rgba(255, 255, 255, .45); }

/* Die erste Abweichung ist die Stelle, an der es abbog. Was danach kommt,
   ist oft nur ihre Folge - deshalb traegt sie allein den vollen Rahmen. */
.st-zelle-erste { outline: 2px solid #ff8a8a; outline-offset: 1px; }

.st-loesung {
    margin: .6rem 0 0;
    padding: .45rem .6rem;
    border-left: 3px solid #7ddf9a;
    background: rgba(125, 223, 154, .1);
    border-radius: 0 6px 6px 0;
    font-size: .9rem;
}