/*
 * Das Hauptmenü aus dem Seitenbaum — nur das, was zum Accordion aus
 * 63-accordion.css dazukommt.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 *
 * Absichtlich wenig: das Aussehen der Zeilen ist das des Accordions, und es
 * steht dort. Hier liegen die Liste als Liste und der Fall, den das Design
 * nicht kennt — ein Seitenbaum ohne Seiten.
 */

/*
 * Die Zeile einer obersten Seite: links die Seite, rechts der Aufklapper.
 *
 * Zwei Bedienelemente, also trägt der Rahmen keinen Innenabstand mehr — er
 * wandert in die beiden darin. Sonst wäre die anklickbare Fläche des Links
 * genau so breit wie das Wort, und die 16px daneben gehörten niemandem.
 */
.spo-accordion-head--split {
    --spo-row-padding: 0;
}

/*
 * Der Link nimmt den Rest der Zeile. `color: inherit`, weil die Farbe an der
 * Zeile steht und in der hervorgehobenen eine andere ist.
 */
/*
 * Innenabstand und Rahmen als Custom Property, wie bei der Zeile selbst
 * (63-accordion.css): der Link liegt *in* einer Zeile und erbt deren Werte
 * sonst — die Zeile trägt 0, seit sie geteilt ist, und der Rahmen gehört ihr.
 */
.spo-accordion-label {
    flex: 1;
    min-width: 0;
    --spo-row-padding: 16px;
    --spo-row-border-top: 0;
    --spo-row-border-bottom: 0;
    padding: var(--spo-row-padding);
    color: inherit;
    text-decoration: none;
}

/*
 * Der Aufklapper ist nur der Winkel. Sein Innenabstand ist links kleiner: die
 * 8px sind der Abstand zur Beschriftung, die 16px rechts die Kante der Karte —
 * zusammen bleibt die Zeile so hoch wie die ohne Aufklapper.
 */
.spo-accordion-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 0;
    --spo-row-padding: 16px 16px 16px 8px;
    --spo-row-border-top: 0;
    --spo-row-border-bottom: 0;
    padding: var(--spo-row-padding);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/*
 * Eine Seite ohne Unterseiten: dieselbe Zeile, nur ohne Winkel und ohne
 * Aufklapper. Der Zeigefinger steht trotzdem, es ist ein Link.
 */
.spo-accordion-head--plain {
    text-decoration: none;
}

/*
 * Die Unterseiten stehen in einer Liste; sichtbar soll das nicht sein. Der
 * Innenabstand der Zeilen kommt von .spo-link.
 */
.spo-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Ab der zweiten Unterebene weiter eingerückt und eine Spur leiser. Das Design
 * hat diese Ebene nicht — es zeigt eine Unterebene. Wer im Element eine größere
 * Tiefe einstellt, soll aber nicht auf einer Bündigkeit sitzen, in der die
 * Verschachtelung verschwindet.
 */
/*
 * Die Einrückung steht als ganzer Innenabstand da und nicht als `padding-left`:
 * die Sperre in 63-accordion.css setzt den Abstand als Kurzschreibweise, und ein
 * einzelner Wert daneben fiele im Zeiger- oder Fokus-Zustand weg.
 */
.spo-nav-list .spo-nav-list .spo-link {
    --spo-row-padding: 12px 16px 12px 44px;
    font-size: calc(13.5px - var(--spo-text-shrink));
    font-weight: 400;
}

.spo-nav-list .spo-nav-list .spo-nav-list .spo-link {
    --spo-row-padding: 12px 16px 12px 58px;
}

/*
 * Kein Eintrag da. Gestrichelt, weil es dieselbe Aussage ist wie bei einer
 * leeren Fläche im Editor: hier fehlt etwas — und zwar nicht hier, sondern im
 * Seitenbaum.
 */
.spo-nav-empty {
    margin: 12px 0 0;
    padding: 14px 16px;
    border: 1px dashed rgba(0, 60, 110, .3);
    border-radius: 8px;
    color: var(--spo-blue-dark);
    font-size: calc(13px - var(--spo-text-shrink));
    line-height: 1.35;
}

.spo-nav-empty-hint {
    display: block;
    margin-top: 4px;
    font-size: calc(11px - var(--spo-text-shrink));
    opacity: .75;
}