/*
 * Schnellwahl-Leiste der Rubriken Stories/Autoren — beide Render-Orte (WS-311, WS-323,
 * WS-341).
 *
 * Dasselbe .rubricStrip-Markup (partials/rubricStrip.phtml) wird zweimal gerendert:
 * mobil als scrollbare Leiste im roten Kopf-Balken (layouts/_header.phtml), auf Desktop
 * als Leiste über dem Feed in .rubricStripPills (stories/index.phtml, author/index.phtml).
 * rubricStrip.js treibt beide Instanzen; site.css blendet jede .rubricStrip per Default
 * aus, die Blöcke unten schalten genau eine davon sichtbar — nie beide zugleich.
 *
 * WS-341 gibt beiden Ansichten dasselbe Pillen-Design, weshalb die zuvor in
 * responsive.css gepflegte Mobile-Variante hierher gezogen ist: alles Geometrische steht
 * breakpoint-neutral genau einmal, die beiden Zweige tragen nur noch Farben, Verläufe,
 * Schriftgröße, Padding und den Sichtbarkeits-Schalter (§8.1, §8.82).
 *
 * display bleibt bewusst in den Zweigen: breakpoint-neutral gesetzt würde es auf
 * .rubricStrip den Default-Hide aus site.css aushebeln und die Kopf-Leiste auch auf
 * Desktop zeigen. Mit ihm bleiben dort die [hidden]-Regeln der Chevrons, die sonst
 * ihren UA-Default verlören.
 *
 * Diese Datei muss von jedem Render-Ort geladen werden; die Leiste erscheint nur, wo
 * der Helper RubricStripItems nicht null liefert (stories/index, author/index).
 */

/* Der Scroller kapselt die Leiste und verankert die absolut positionierten
   Chevron-Buttons (rubricStrip.js erzeugt Scroller und Buttons erst per JS). */
.rubricStripScroller {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

/* Die Leiste scrollt horizontal (Touch nativ, Maus per Drag aus rubricStrip.js) und
   schneidet den letzten Eintrag mit symmetrischem Rand ab (WS-311 Pkt. 10). */
.rubricStrip {
    flex: 1 1 auto;
    min-width: 0;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
    /* Drag-Scroll (rubricStrip.js): Textmarkierung beim Ziehen unterbinden. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.rubricStrip::-webkit-scrollbar {
    display: none;
}

/* Gemeinsame Pillen-Geometrie: Form des e-Reader-„Posten"-Buttons
   (.ereader__commentSubmit — 8px/16px padding, 18px radius). Der aktive Eintrag ist
   seit WS-341 nicht mehr unterstrichen, sondern hebt sich über einen deutlich helleren
   Grund ab.
   Das Basisgewicht steht hier explizit, weil site.css a { font-weight: 600 } setzt —
   ohne diese Zeile trüge die Leiste dessen halbfette Schrift (WS-428). Der aktive
   Eintrag behält einen Gewichtssprung, da er sein einziger nicht-farblicher Hinweis
   ist (WCAG 1.4.1); 600 ist die feinste Stufe, die auch bei nur zwei verfügbaren
   Schnitten noch als Sprung ankommt. */
.rubricStrip__link {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 18px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
}

.rubricStrip__link--active {
    font-weight: 600;
}

/* WS-323: der zunächst ausgeblendete Custom-Eintrag „Individuelle Filtereinstellungen"
   (nur Stories) darf nie sichtbar werden — die Leiste ist display: flex, daher das
   hidden-Attribut hier explizit auf display: none festhalten. */
.rubricStrip__link[hidden] {
    display: none;
}

/* Chevron-Buttons für reine Maus-Desktops: rubricStrip.js erzeugt beide (nicht das
   Markup) und blendet sie über [hidden] aus, sobald die Leiste nicht überläuft bzw. ein
   Rand erreicht ist. */
.rubricStripChevron {
    position: absolute;
    top: 0;
    bottom: 0;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    align-items: center;
    z-index: 2;
}

.rubricStripChevron--prev {
    left: 0;
    justify-content: flex-start;
}

.rubricStripChevron--next {
    right: 0;
    justify-content: flex-end;
}

/* --- Desktop: Leiste über dem Feed, auf der weißen Spalte (WS-323 Pkt. 3) --- */

/* Sie ist das erste Kind der mittleren Spalte vor #contentFeed und fließt im
   Spaltentext, scrollt also mit dem Feed weg (nicht fixed/sticky). */
.rubricStripPills {
    display: block;
    margin: 0 0 16px;
}

.rubricStripPills .rubricStrip {
    display: flex;
    padding: 4px 2px;
}

/* Gelb-Familie des Kachel-Kopfs der Sidebars im Retro-Theme, graue Formular-Button-Fläche
   im Normal-Theme (--ws-theme-pill-surface/-text) — nicht die halbtransparente Deckschicht
   der mobilen Leiste (rubricStrip__link, unten). Die Kante (--ws-theme-pill-edge) trägt im
   Normal-Theme die Außenlinie der Kacheln; im Retro-Theme bleibt sie transparent, dort
   trägt weiterhin der Luminanz-Abstand zur aktiven, bereits weißen Pille den Zustand. */
.rubricStripPills .rubricStrip__link {
    background: var(--ws-theme-pill-surface);
    color: var(--ws-theme-pill-text);
    box-shadow: inset 0 0 0 1px var(--ws-theme-pill-edge);
    font-size: 10.5pt;
    line-height: 1.2;
    transition: filter 0.12s ease;
}

.rubricStripPills .rubricStrip__link:hover,
.rubricStripPills .rubricStrip__link:focus-visible {
    color: var(--ws-theme-pill-text);
    filter: brightness(0.94);
}

/* Gegenstück zur --active:hover-Regel im Mobile-Zweig: brightness() wirkt auf das
   gerenderte Element, dunkelt also auch die aktive Fläche ab und drückt ihren Abstand
   zur inaktiven Pille von 1,40:1 auf ~1,23:1 — auf Touch-Geräten ab 1024px dauerhaft,
   weil :hover dort nach dem Tippen am frisch gewählten Eintrag haften bleibt. Seit
   WS-432 zöge es zusätzlich die Kachel-Kante der Pille mit ins Dunkle. */
.rubricStripPills .rubricStrip__link--active:hover,
.rubricStripPills .rubricStrip__link--active:focus-visible {
    filter: none;
}

/* Die aktive Pille steht auf Weiß, ihre Kante bleibt ein inset-Schatten und
   kein border, weil eine border 2px Breite und Höhe addieren und die Pille gegen ihre
   Nachbarn verschieben würde. Im Normal-Theme ist die inaktive Pillenfläche selbst
   nahe Weiß (--ws-theme-pill-surface) und trägt den Zustandssprung deshalb nicht mehr
   allein über die Fläche — --ws-theme-pill-active-edge steht dort deshalb kräftiger
   (--ws-color-border-strong) als die Kante der übrigen Kacheln. Im Retro-Theme bleibt
   die bisherige Kachel-Außenlinie #cbcbcd, dort trägt weiterhin die Fläche den Sprung.
   Den nicht-farblichen Hinweis tragen wie bisher font-weight und aria-current="true". */
.rubricStripPills .rubricStrip__link--active {
    background: var(--ws-theme-pill-active-surface);
    color: var(--ws-theme-pill-active-text);
    box-shadow: inset 0 0 0 1px var(--ws-theme-pill-active-edge);
}

/* Der Pfeil bleibt in jedem Theme #333: Auf dem dunkelsten Verlaufswert (Nachtsicht,
   #808080) hält er noch 3,2:1 — als aria-hidden-Icon in einem beschrifteten Button gilt
   dafür die 3:1-Schwelle für Nicht-Text. Der Verlauf selbst trägt seit dem Fade-Token
   keinen literalen Weiß-Wert mehr, sondern je Theme dessen Hellwert; der Endstopp ist
   transparent statt eines Weiß-mit-Alpha-Werts, damit er in keinem Theme gegen Weiß
   ausläuft. */
.rubricStripPills .rubricStripChevron {
    display: inline-flex;
    width: 36px;
    color: #333;
}

.rubricStripPills .rubricStripChevron[hidden] {
    display: none;
}

.rubricStripPills .rubricStripChevron--prev {
    padding-left: 4px;
    background: linear-gradient(to right, var(--ws-theme-strip-fade) 55%, transparent);
}

.rubricStripPills .rubricStripChevron--next {
    padding-right: 4px;
    background: linear-gradient(to left, var(--ws-theme-strip-fade) 55%, transparent);
}

/* --- Mobil: Leiste im roten Kopf-Balken (WS-311 Pkt. 10) --- */

@media (max-width: 1023px) {
    /* Die Pillen-Leiste ist eine Desktop-Zutat; unter 1024px übernimmt die Leiste im
       roten Balken, damit nie beide zugleich sichtbar sind. */
    .rubricStripPills {
        display: none;
    }

    /* WS-341: vertikales Eigen-Padding 8px -> 4px, weil die Pillen ihre Höhe nun selbst
       mitbringen — die rote Steuerzeile wächst dadurch nur um ca. 8px (#header ist mobil
       height: auto). Das horizontale 16px bleibt: es erzeugt den symmetrischen Rand und
       den Anschnitt der Leiste. */
    .rubricStrip {
        display: flex;
        padding: 4px 16px;
    }

    /* Aufgehellt wird über eine weiße Deckschicht statt über einen eigenen Rot-Ton:
       dasselbe Muster wie .ereader__tool/.ereader__tool--vote auf dem roten Balken
       (WS-321). Der Grundton bleibt so automatisch das Seiten-Rot des Balkens, ohne
       ein neues Farb-Token. Das frühere opacity: 0.85 der inaktiven Links entfällt —
       opacity hätte die neue Pillen-Fläche mitgedimmt; die Zurücknahme leistet jetzt
       die schwächere Deckschicht (0.16 gegen die deckend weiße Aktiv-Fläche, ~8,2:1
       Luminanz-Abstand).
       Für weiße Schrift ist bei ca. 0.375 Deckkraft Schluss — darüber fällt sie unter
       die 4,5:1 des AA-Kontrasts. Der Deckel bindet diese Regel und die Hover-Schicht;
       der aktive Eintrag steht seit WS-432 nicht mehr auf einer Deckschicht (siehe
       unten). */
    .rubricStrip__link {
        background: rgba(255, 255, 255, 0.16);
        color: #ffffff;
        font-size: 15px;
        line-height: 1.4;
        transition: background 0.12s ease, color 0.12s ease;
    }

    /* Ohne diese Überschreibung erbt der Link beim Hovern die globale Regel
       a:hover { color: #7c0201 } — exakt der Weinrot-Ton des Leisten-Hintergrunds,
       wodurch er auf gleichfarbigem Grund verschwindet. */
    .rubricStrip__link:hover,
    .rubricStrip__link:focus-visible {
        background: rgba(255, 255, 255, 0.24);
        color: #ffffff;
    }

    /* Der aktive Eintrag verlässt die Deckschicht-Reihe und steht auf einer
       eigenen, themeabhängigen Fläche statt der halbtransparenten Deckschicht der
       übrigen Einträge. Der Deckel oben gilt weiter für die inaktive und die
       Hover-Schicht, nicht mehr hier: mit voller Deckung entfällt das Band zwischen
       0.375 und 0.43, in dem keine Textfarbe AA hält. Eine Kante bekommt die Pille
       bewusst nicht — Normal und Retro tragen den Zustand über deckendes Weiß gegen
       den Balken (11,3:1), Nachtsicht über den Kopfgrund gegen das umgebende
       Balken-Grau (--ws-theme-pill-mobile-active-surface/-text). */
    .rubricStrip__link--active {
        background: var(--ws-theme-pill-mobile-active-surface);
        color: var(--ws-theme-pill-mobile-active-text);
    }

    /* Der aktive Eintrag behält Fläche und Schriftfarbe unter Hover und Fokus: die
       Hover-Regel ist spezifischer als die Aktiv-Regel und nähme ihn sonst auf 0.24
       mit weißer Schrift zurück — auf Touch-Geräten dauerhaft, weil :hover dort nach
       dem Tippen am Element haften bleibt, also genau am frisch gewählten Eintrag. */
    .rubricStrip__link--active:hover,
    .rubricStrip__link--active:focus-visible {
        background: var(--ws-theme-pill-mobile-active-surface);
        color: var(--ws-theme-pill-mobile-active-text);
    }

    /* Weiß auf Weinrot, mit schmalem Verlauf, damit die Buttons nicht auf den
       darunterliegenden Text stoßen (Kommentar 21.07.). */
    .rubricStripChevron {
        display: inline-flex;
        width: 40px;
        color: #ffffff;
    }

    .rubricStripChevron[hidden] {
        display: none;
    }

    .rubricStripChevron--prev {
        padding-left: 6px;
        background: linear-gradient(to right, #7c0201 55%, rgba(124, 2, 1, 0));
    }

    .rubricStripChevron--next {
        padding-right: 6px;
        background: linear-gradient(to left, #7c0201 55%, rgba(124, 2, 1, 0));
    }
}