/* ============================================================
   RailLayout – Kopfzeile oben, schmale Leiste (Rail) links, Inhalt rechts; schmal mit der Leiste als Schublade.

   CSS-Variablen:
     --oo-rl-header-height     Höhe der Kopfzeile, Standard 3rem
     --oo-rl-rail-width        Breite der Leiste, Standard 3rem (Parameter RailWidth)
     --oo-rl-backdrop          Farbe des Schleiers hinter der geöffneten Schublade, Standard rgb(0 0 0 / 0.2)
   Für den Inhalt, gesetzt am Inhaltsbereich:
     --oo-rl-header-offset     Höhe der oben klebenden Kopfzeile, wenn die Seite scrollt, sonst 0
     --oo-rl-content-height    sichtbare Höhe des Inhalts (für height/min-height einer Seite, die den Bildschirm füllt)
   ============================================================ */

/* Es scrollt nur der Inhalt, nie die Seite (außer am Handy, siehe unten). */
html:has(.oo-rl) body {
    overflow: hidden;
}

/* Kopfzeile und Bereich darunter untereinander. Container-Abfrage statt Media-Abfrage: Entscheidend ist die Breite des
   Layouts, nicht die des Fensters. Die Variablen stehen hier, damit RailWidth (style am Element) sie überschreibt. */
.oo-rl {
    --oo-rl-header-height: 3rem;
    --oo-rl-rail-width: 3rem;
    --oo-rl-backdrop: rgb(0 0 0 / 0.2);
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: var(--oo-color-surface);
    color: var(--oo-color-text);
    container-type: inline-size;
}

.oo-rl__header {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    box-sizing: border-box;
    height: var(--oo-rl-header-height);
    background: var(--oo-color-background);
    border-bottom: var(--oo-border-width) solid var(--oo-color-border);
}

.oo-rl__bar {
    box-sizing: border-box;
    height: 100%;
    padding: 0 var(--oo-space-3);
}

.oo-rl__start {
    min-width: 0;
}

.oo-rl__brand {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.oo-rl__actions {
    flex-shrink: 0;
}

/* Zwei Klassen, damit die Regel die Anzeige des Buttons sicher überschreibt. */
.oo-rl .oo-rl__menu-button {
    display: none;
}

/* Leiste und Inhalt nebeneinander; der Inhalt nimmt, was die Leiste übrig lässt. min-height 0, sonst scrollt er nicht. */
.oo-rl__body {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-height: 0;
}

/* Keine Scrollbalken und kein Abschneiden: Flyouts klappen nach rechts über den Inhalt auf. z-index über dem Inhalt,
   der mit isolation eine eigene Ebene bildet. */
.oo-rl__rail {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--oo-rl-rail-width);
    overflow: visible;
    background: var(--oo-color-background);
    border-right: var(--oo-border-width) solid var(--oo-color-border);
}

/* Der Menüknopf setzt den Fokus auf die Leiste selbst (tabindex -1); sie ist ein Bereich, kein Bedienelement. */
.oo-rl__rail:focus {
    outline: none;
}

.oo-rl__backdrop {
    display: none;
}

.oo-rl__main {
    --oo-rl-header-offset: 0px;
    --oo-rl-content-height: 100%;
    flex: 1 1 0;
    min-width: 0;
    overflow: auto;
    isolation: isolate;
}

/* Schmal: Die Leiste liegt links außerhalb und schiebt sich geöffnet über den Inhalt. visibility, damit Tab die
   eingeklappten Einträge überspringt; beim Einblenden sofort sichtbar, sonst ginge der Fokus des Menüknopfs ins Leere.
   Kindkombinatoren am offenen Zustand: Ein verschachteltes RailLayout öffnet sich nicht mit dem äußeren.
   Dieselben Regeln stehen unten noch einmal für das Handy. */
@container (max-width: 48rem) {
    .oo-rl .oo-rl__menu-button {
        display: inline-flex;
    }

    .oo-rl__rail {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform var(--oo-transition), visibility var(--oo-transition);
    }

    .oo-rl--open > .oo-rl__body > .oo-rl__rail {
        visibility: visible;
        transform: none;
        box-shadow: var(--oo-shadow-lg);
        transition: transform var(--oo-transition);
    }

    .oo-rl--open > .oo-rl__body > .oo-rl__backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--oo-rl-backdrop);
    }
}

/* Handy: Die Seite scrollt, nicht der Inhaltsbereich. Nur so klappt der Browser die Adressleiste ein, aktualisiert beim
   Herunterziehen und hält das fokussierte Eingabefeld über der Tastatur. Abfrage nach Fenster und Eingabeart statt
   Container-Abfrage: Ein schmales Panel neben einer Anwendung scrollt weiter in seinem Bereich. Auch im Querformat bis
   60rem Breite. Die Leiste ist hier immer eingeklappt und liegt fest unter der klebenden Kopfzeile.
   Die Seiten mit diesem Layout sollten im viewport-Meta interactive-widget=resizes-content setzen. */
@media (pointer: coarse) and ((max-width: 48rem) or ((max-height: 30rem) and (max-width: 60rem))) {
    html:has(.oo-rl) body {
        overflow: visible;
        background: var(--oo-color-surface);
    }

    .oo-rl {
        height: auto;
        min-height: 100dvh;
    }

    .oo-rl__header {
        position: sticky;
        top: 0;
    }

    .oo-rl__main {
        --oo-rl-header-offset: var(--oo-rl-header-height);
        --oo-rl-content-height: calc(100dvh - var(--oo-rl-header-height));
        overflow: visible;
    }

    .oo-rl .oo-rl__menu-button {
        display: inline-flex;
    }

    .oo-rl__rail {
        position: fixed;
        top: var(--oo-rl-header-height);
        bottom: 0;
        left: 0;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform var(--oo-transition), visibility var(--oo-transition);
    }

    .oo-rl--open > .oo-rl__body > .oo-rl__rail {
        visibility: visible;
        transform: none;
        box-shadow: var(--oo-shadow-lg);
        transition: transform var(--oo-transition);
    }

    .oo-rl--open > .oo-rl__body > .oo-rl__backdrop {
        display: block;
        position: fixed;
        inset: var(--oo-rl-header-height) 0 0 0;
        z-index: 1;
        background: var(--oo-rl-backdrop);
    }
}

/* Am Ende, damit es die Übergänge beider Blöcke oben überschreibt. */
@media (prefers-reduced-motion: reduce) {
    .oo-rl__rail,
    .oo-rl--open > .oo-rl__body > .oo-rl__rail {
        transition: none;
    }
}