/* Subnetz berechnen (src/Subnetz.php, assets/js/subnetz.js).
 *
 * Steht nur in der Quizkarte, und die ist immer dunkel - die Farben hängen
 * deshalb nicht an data-bs-theme, sondern stehen fest.
 *
 * Zwei Spalten: links die Angabe und der Rechenweg, rechts die Felder. Auf
 * dem Handy stapelt sich beides, und zwar mit dem Rechenweg zuerst - wer
 * rechnet, liest erst den Schritt und füllt dann das Feld.
 */
[data-subnetz] {
    --sn-rand: var(--rand, rgba(255, 255, 255, .2));
    --sn-marke: #ffb86b;
    --sn-gut: #7ddf9a;
    --sn-falsch: #ff8a8a;
}

.sn-kasten {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: .9rem;
}

@media (min-width: 768px) {
    .sn-kasten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Angabe ------------------------------------------------------------- */

/* Die Angabe ist der eine Wert, auf den sich alles bezieht. Sie steht groß
   und in einer Schrift mit gleichen Ziffernbreiten da: Wer .77 und .177
   verwechselt, rechnet das ganze Netz falsch. */
.sn-angabe {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .7rem .9rem;
    border: 2px solid var(--sn-marke);
    border-radius: .5rem;
    text-align: center;
    margin-bottom: .8rem;
}

.sn-hinweis {
    font-size: .9rem;
    opacity: .85;
    margin-bottom: .8rem;
}

/* --- Rechenweg ---------------------------------------------------------- */

.sn-schema {
    padding-left: 1.2rem;
    margin: 0 0 .8rem;
    font-size: .9rem;
}

.sn-schema li { margin-bottom: .25rem; }

.sn-schema-schalter {
    margin-bottom: .8rem;
    border: 1px solid var(--sn-rand);
    background: transparent;
    color: inherit;
    border-radius: .4rem;
    padding: .35rem .7rem;
    font-size: .9rem;
}

/* --- Zahlenstrahl ------------------------------------------------------- */

/* Die Netzgrenzen des betroffenen Oktetts, sobald die Blockgröße eingetragen
   ist. Er zeigt nur, was aus der eigenen Eingabe folgt; eine falsche
   Blockgröße ergibt falsche Grenzen, und genau daran fällt der Fehler auf. */
.sn-strahl {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    padding: .5rem .6rem;
    border-top: 2px solid var(--sn-rand);
    font-family: var(--bs-font-monospace, monospace);
    font-size: .85rem;
}

.sn-marke {
    padding: .15rem .45rem;
    border-radius: .3rem;
    border: 1px solid var(--sn-rand);
}

.sn-marke-hier {
    border-color: var(--sn-marke);
    color: var(--sn-marke);
    font-weight: 700;
}

/* --- Eingabefelder ------------------------------------------------------ */

.sn-zeile { margin-bottom: .7rem; }

.sn-titel {
    display: block;
    font-size: .85rem;
    margin-bottom: .2rem;
    opacity: .9;
}

/* Vier Oktettfelder mit Punkt dazwischen - das Layout des Prüfungsbogens.
   Die Felder sind so breit, dass drei Ziffern hineinpassen, und nicht
   breiter: Ein Feld, in das vier Ziffern passen, lädt dazu ein. */
.sn-adresse {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.sn-oktett {
    width: 3.6rem;
    text-align: center;
    font-family: var(--bs-font-monospace, monospace);
}

.sn-punkt {
    font-weight: 700;
    opacity: .7;
}

.sn-zahl {
    max-width: 10rem;
    font-family: var(--bs-font-monospace, monospace);
}

.sn-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.sn-wahl-knopf {
    border: 1px solid var(--sn-rand);
    color: inherit;
    background: transparent;
}

.sn-wahl-knopf[aria-pressed="true"] {
    border-color: var(--sn-marke);
    color: var(--sn-marke);
    font-weight: 600;
}

/* --- Rückmeldung -------------------------------------------------------- */

/* Nach der Abgabe: je Abschnitt ein Rahmen, je Feld ein Zeichen. Die Farbe
   ist nie der einzige Träger - daneben steht der Sollwert und, wo es etwas
   zu sagen gibt, der Satz zum Rechenschritt. */
.sn-richtig .sn-titel { color: var(--sn-gut); }
.sn-falsch .sn-titel { color: var(--sn-falsch); }

.sn-soll {
    display: block;
    font-size: .85rem;
    margin-top: .2rem;
    font-family: var(--bs-font-monospace, monospace);
    color: var(--sn-marke);
}

.sn-satz {
    font-size: .9rem;
    margin: .5rem 0 0;
    padding-left: .6rem;
    border-left: 3px solid var(--sn-marke);
}

.sn-punkte {
    font-size: .8rem;
    opacity: .8;
    margin-left: .4rem;
}