/*
 * Tab-Leiste.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 */

/*
 * Die Leiste stapelt Umschalter und Inhalt untereinander. Bis sie im Editor
 * anlegbar wurde, stand hier nur ein Außenabstand: gerendert wurde sie nie,
 * und was nicht zu sehen ist, fällt auch nicht auf.
 */
.spo-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*
     * Bezugsgröße für die Reiterzeile: das "+" verliert seine Beschriftung,
     * wenn die Leiste schmal wird – nicht, wenn das Fenster schmal wird. Eine
     * Leiste kann in einer engen Spalte stehen und das Fenster breit sein.
     */
    container-type: inline-size;
}

/*
 * Wie beim Accordion: die 10px trennen die Leiste von dem, was über ihr steht.
 * Steht nichts darüber, trennen sie nichts — an jeder Leiste schob die erste
 * ihren ganzen Inhalt nach unten weg.
 */
.spo-tabs:not(:first-child) {
    margin-top: 10px;
}

/*
 * Reiterzeile: der Umschalter nimmt den Platz, den er braucht, ein "+" im
 * Editor stellt sich daneben.
 */
.spo-tabs-bar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
}

/*
 * Der Abstand nach oben gehört der Leiste als Ganzes; der Umschalter darin
 * setzt keinen eigenen (siehe 40-personas.css).
 */
.spo-tabs > .spo-personas,
.spo-tabs-bar > .spo-personas {
    flex: 1;
    min-width: 0;
}

/*
 * Die Fläche eines Tabs. Nur die des aktiven ist sichtbar — x-show blendet die
 * übrigen aus.
 *
 * `min-width: 0` ist nicht kosmetisch: die Fläche steht in einer Rasterzelle,
 * und ohne die Angabe bestimmt der breiteste Inhalt die Spaltenbreite, statt
 * sich ihr zu fügen.
 */
.spo-tab-panel {
    min-width: 0;
}

/*
 * Der Stapel eines Tabs beginnt direkt unter dem Umschalter. Seine erste Reihe
 * bringt über .spo-columns:first-child keinen Abstand mit, das .spo-grid darin
 * aber schon — hier wird er einmal gesetzt statt zweimal.
 */
.spo-tab-panel > .spo-group > .spo-columns:first-child > .spo-grid {
    margin-top: 10px;
}