/*
 * Was das Menü bedienbar macht, wenn nicht mit der Maus gesehen wird.
 *
 * Gemeinsam: Editor und Frontend zeichnen dieselben Partials, also gelten die
 * Regeln in beiden. Die Zahl im Namen ist die Ladereihenfolge — sie steht am
 * Ende, weil hier etwas gegen die Design-Regeln davor gesetzt wird: der
 * Fokus-Ring gehört über die Farbe, auf der er liegt.
 */

/*
 * Nur für die Ansage da.
 *
 * Nicht `display: none` und nicht `visibility: hidden` — beides nähme den Text
 * auch der Vorlesestimme, und genau für sie steht er da. Das Feld von 1px mit
 * abgeschnittenem Inhalt ist der Weg, der übrig bleibt.
 *
 * `white-space: nowrap`, weil ein umbrochener Text in 1px Breite bei manchen
 * Vorlesern zu einem Buchstaben je Zeile wird.
 */
.spo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * Element-Flächen sind im Frontend das, was sie im Bild sind: Knöpfe und
 * Links. Das ist die halbe Barrierefreiheit, und sie kostet kein ARIA — ein
 * <button> bringt Fokus, Tastatur, Rolle und Zustand von sich aus mit, ein
 * <div> mit `role="button"` müsste sich das alles einzeln anschreiben und die
 * Leertaste selbst nachbauen.
 *
 * Der Browser gibt einem <button> dafür seine eigene Erscheinung mit: Rahmen,
 * grauen Grund, Systemschrift, Mittelsatz. Das wird hier zurückgenommen.
 *
 * `:where()` ist der Kern der Regel: es setzt die Spezifität auf null, sodass
 * hier nur ankommt, was die Design-Regeln davor *nicht* gesagt haben. Ohne das
 * überschriebe dieser Block den Rahmen der Meldung, den Verlauf der Kachel und
 * die Schriftgröße jedes Buttons — genau die Werte, die aus dem Entwurf
 * stammen.
 */
button:where(.spo-tile, .spo-button, .spo-box, .spo-notice, .spo-link),
a:where(.spo-tile, .spo-button, .spo-box, .spo-notice, .spo-link) {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
}

/*
 * Der Fokus-Ring.
 *
 * Zwei Farben, weil das Menü zwei Untergründe hat: helles Sand und dunkles
 * Blau. Ein einfarbiger Ring verschwände auf einem von beiden — der weiße
 * Kern hebt sich vom Blau ab, der dunkle Saum vom Sand.
 *
 * `:focus-visible` und nicht `:focus`: ein Klick auf einen Reiter soll keinen
 * Ring hinterlassen, ein Sprung mit der Tabulatortaste schon. Das ist die
 * Unterscheidung, die der Browser besser trifft als wir.
 *
 * Als Nachfahren-Regel und nicht als Liste von Klassen: was hier neu dazukommt,
 * ist damit von vornherein zu sehen. Das ist die Sorte Zusage, die eine Liste
 * nicht halten kann.
 *
 * Und deshalb steht hier auch keine Lage: eine Regel, die jedem fokussierten
 * Element `position: relative` gäbe, risse den Regler des Sand-Glases aus
 * seiner Ecke, sobald er den Fokus bekommt.
 */
.spo-menu :focus-visible,
.spo-stage :focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--spo-blue-dark);
}

/*
 * Zeilen, die bis an den Rand ihrer Karte reichen, bekommen den Ring nach
 * innen: die Karte schneidet ab, was über sie hinaussteht (`overflow: hidden`
 * hält ihre Ecken rund), und ein Ring außen wäre links und rechts weg.
 */
.spo-menu .spo-accordion-head:focus-visible,
.spo-menu .spo-accordion-label:focus-visible,
.spo-menu .spo-accordion-toggle:focus-visible,
.spo-menu a.spo-link:focus-visible,
.spo-menu button.spo-link:focus-visible,
.spo-stage .spo-accordion-head:focus-visible,
.spo-stage .spo-accordion-label:focus-visible,
.spo-stage .spo-accordion-toggle:focus-visible,
.spo-stage a.spo-link:focus-visible,
.spo-stage button.spo-link:focus-visible {
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px var(--spo-blue-dark);
}

/*
 * Die Ebene selbst und die Fläche eines Reiters sind Flächen und keine Knöpfe:
 * dorthin springt der Fokus (menuOverlay.focusPanel) oder er kommt beim
 * Durchlaufen dort an, weil beide gerollt werden können. Der Ring darf hier
 * leiser sein — er umschließt eine große Fläche, und ein weißer Balken um das
 * halbe Bild wäre kein Hinweis mehr, sondern ein Rahmen.
 */
.spo-menu .spo-sheet-inner:focus-visible,
.spo-menu .spo-tab-panel:focus-visible,
.spo-stage .spo-sheet-inner:focus-visible,
.spo-stage .spo-tab-panel:focus-visible {
    outline: 2px dashed var(--spo-blue-dark);
    outline-offset: 4px;
    box-shadow: none;
}

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, meint das ernst:
 * das Auffahren der Ebenen, das gleitende Band unter den Reitern, der
 * pulsierende Punkt.
 *
 * Nicht `animation: none` — die Animationen setzt Alpine als Inline-Stil, und
 * eine Ebene, deren Auffahren wegfällt, stünde je nach Keyframe auf der
 * Anfangsstellung fest (spoUp beginnt außerhalb des Bildes). Eine Dauer von
 * fast Null lässt sie in ihrer Endstellung ankommen, nur eben sofort.
 *
 * Die Pseudo-Elemente ausdrücklich: `*` erfasst sie nicht, und der pulsierende
 * Punkt der Live-Anzeige ist eines.
 */
@media (prefers-reduced-motion: reduce) {
    .spo-menu,
    .spo-menu *,
    .spo-menu *::before,
    .spo-menu *::after,
    .spo-stage,
    .spo-stage *,
    .spo-stage *::before,
    .spo-stage *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}