/*
 * Persona-Umschalter mit gleitendem Indikator.
 *
 * Gemeinsam.
 * Die Zahl im Namen ist die Ladereihenfolge — bei CSS zählt sie.
 */

/*
 * Die Karte um Beschriftung und Umschalter (Tabs.html).
 *
 * Nur mit einer Beschriftung: ohne sie ist der Umschalter selbst die Karte, wie
 * bisher, und die Hülle darum tut nichts. Deshalb `:has()` und keine
 * Modifier-Klasse — was die Karte ausmacht, ist genau, dass eine Zeile darüber
 * steht, und das sieht der Selektor unmittelbar.
 *
 * Der Sandton wandert dabei nach außen: innen wird der Umschalter durchsichtig
 * (unten), sonst lägen zwei Sandflächen ineinander und die Kante der inneren
 * zeichnete sich ab.
 *
 * 5px, dieselben, die der Umschalter schon immer trägt — hier standen zuerst
 * 16px, und die machten aus der Karte eine Fläche mit Rand statt einer, die
 * eng um Zeile und Reiter sitzt. Die Zeile rückt ihre 6px selbst ein (unten),
 * damit sie über dem Wort des ersten Reiters steht und nicht davor.
 */
.spo-personas-card:has(> .spo-personas-label) {
    padding: 5px;
    border-radius: 8px;
    background: var(--spo-sand-strong);
}

/*
 * Innen trägt der Umschalter keinen eigenen Grund mehr — aber seine 5px behält
 * er: aus ihnen rechnet der gleitende Indikator seine Lage (top/bottom/left: 5,
 * Breite minus 10). Ein `padding: 0` hier verschöbe ihn um genau diesen Betrag.
 */
.spo-personas-card:has(> .spo-personas-label) > .spo-personas {
    background: transparent;
}

/* Persona-Umschalter mit gleitendem Indikator */
.spo-personas-label {
    /*
     * Kein Abstand nach oben mehr: hier standen 20px, als die Zeile über der
     * Karte schweben sollte. Sie steht jetzt darin, und den Abstand zur Kante
     * gibt der Innenabstand der Karte.
     */
    margin: 0;
    /*
     * Waagerecht die 6px, mit denen der Reiter darunter sein Wort einrückt: die
     * Karte gibt allen ihren 5px, und ohne diese 6 stünde die Zeile um genau
     * die Breite eines Reiter-Innenabstands links vom ersten Wort. Senkrecht
     * nichts — den Abstand zur Kante gibt die Karte, den zu den Reitern deren
     * eigener.
     */
    padding: 0 6px;
    font-size: calc(11px - var(--spo-text-shrink));
    font-weight: 700;
    letter-spacing: .15em;
    /*
     * Kein `text-transform`: die Großbuchstaben des Designs gehören der
     * Aufschrift. Wer die Zeile in Versalien will, tippt sie so — und wer eine
     * gemischte will, bekommt sie und nicht das Geschrei des Stylesheets.
     */
    color: var(--spo-blue-dark);
}

.spo-personas {
    position: relative;
    display: flex;
    padding: 5px;
    border-radius: 8px;
    background: var(--spo-sand-strong);
}

/*
 * Zwischen Zeile und Reitern steht nichts mehr.
 *
 * Hier waren 9px, und daneben 20px über der Zeile: das Paar aus der Zeit, als
 * die Beschriftung über der Karte schwebte wie die Überschrift einer Reihe
 * (.spo-columns-title in 20-columns.css). In der Karte ist beides zu viel — die
 * Reiter tragen ihren eigenen Innenabstand, und der ist der Abstand.
 *
 * Die Regel stand jahrelang da und wartete auf ein Markup, das nie kam; sie ist
 * mit der Karte einen Tag lang wirksam gewesen und dann weggefallen.
 */

.spo-personas-indicator {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / var(--count, 4));
    border-radius: 8px;
    /*
     * Der eigene Verlauf des Bandes (--spo-indicator-gradient, tokens.css) und
     * nicht der der Kacheln: im Design sind die beiden verschieden, nachgemessen
     * am Bild. Bis dahin stand hier ein Token für beide, und weil das Band
     * stimmte, waren es die Kacheln, die falsch standen.
     *
     * Vorher stand hier die Akzentfarbe des Reiters, die Alpine als Inline-Style
     * setzte — eine Farbe je Tab. Sie ist keine Entscheidung des Redakteurs mehr,
     * und der Umschalter ist eine Fläche und nicht vier.
     */
    background: var(--spo-indicator-gradient);
    box-shadow: 0 6px 15px rgba(10, 55, 75, .35);
    transform: translateX(calc(var(--i, 0) * 100%));
    transition: transform .44s cubic-bezier(.34, 1.45, .5, 1);
}

.spo-persona {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    --spo-persona-padding: 9px 2px 8px;
    --spo-persona-fg: var(--spo-blue-dark);
    padding: var(--spo-persona-padding);
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--spo-persona-fg);
    cursor: pointer;
    transition: color .38s ease;
}

/*
 * Der aktive Reiter ist weiß — als Property, weil die Sperre unten die Farbe
 * zurückholt und den Zustand dabei nicht verlieren darf.
 */
.spo-persona.is-active {
    --spo-persona-fg: #fff;
}

.spo-persona-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
}

/*
 * 26px aus dem Design. Anders als Kachel und Button bringt der Reiter keine
 * Icongröße als Option mit — in einer Leiste stehen alle Reiter gleich hoch.
 *
 * Die Maske selbst (Wiederholung, Lage, Größe) steht in 66-icon.css und gilt für
 * jedes Icon; hier kommt nur das Maß dazu. Die Farbe holt sich das Icon über
 * currentColor aus dem Reiter.
 */
.spo-persona-glyph {
    /*
     * Als Custom Property und nicht als `width`: die Maske in 66-icon.css liest
     * sie und lädt später als diese Datei. Ein `width` hier wäre von ihr
     * überschrieben worden — und weil die Property dann nirgends stünde, hätte
     * das Icon keine Größe mehr gehabt.
     */
    --spo-icon-size: 26px;
}

.spo-persona-label {
    /* 14px auf dem Schreibtisch, 11.5px auf dem Telefon (tokens.css) */
    font-size: var(--spo-text-persona);
    font-weight: 500;
    /*
     * Versalien, und hier ausdrücklich als Regel.
     *
     * Zwei Zeilen weiter oben in dieser Datei steht der gegenteilige Grundsatz
     * — die Großbuchstaben gehören der Aufschrift, wer sie will, tippt sie.
     * Für die Beschriftung der Karte gilt er weiter. Für die Reiter nicht: sie
     * sind vier feste Rollen, ihre Wörter stehen im Baum und werden dort auch
     * vorgelesen, und in Versalien getippt hieße, sie überall so zu lesen — im
     * Baum, in der Auswahl, im Screenreader. Die Versalien sind hier eine Sache
     * der Fläche, nicht der Aufschrift.
     */
   /* text-transform: uppercase; */
}

/*
 * Zeiger und Fokus ändern den Reiter nicht — dieselbe Sperre wie bei Kachel,
 * Fläche und Meldung. Der Reiter liegt über dem gleitenden Band
 * (.spo-personas-indicator); bekäme er im Fokus einen Rahmen und keinen
 * Innenabstand, sprängen Band und Beschriftung auseinander.
 */
.spo-persona:hover:not(:focus-visible),
.spo-persona:focus:not(:focus-visible) {
    background: transparent !important;
    color: var(--spo-persona-fg) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
}

.spo-persona:hover,
.spo-persona:focus {
    padding: var(--spo-persona-padding) !important;
    border: 0 !important;
    white-space: normal !important;
}