/*
 * Meldung: die sandfarbene Zeile der Live-Ebene.
 *
 * Teil des Design-Stylesheets. Die Reihenfolge der Dateien steht in
 * MenuStylesheets — Kaskade heißt, dass sie zählt.
 *
 * Jede Angabe hier steht so im Design-Export (die Zeilen aus `liveItems`).
 * Zwei Dinge des Exports fehlen bewusst:
 *
 *   - `gap: 8px` zwischen den Zeilen. Dort ist die Liste ein Flex-Stapel; im
 *     Menü liegt jede Meldung in ihrer eigenen Spalte, und den Abstand setzt
 *     die Reihe (ColumnsGap).
 *   - `cursor: pointer` steht hier, aber die Farbe des Punktes nicht: die
 *     kommt aus NoticeDot als Klasse, weil sie einen Zustand bedeutet.
 */
.spo-notice {
    display: flex;
    align-items: center;
    /*
     * Abstand und Innenabstand laufen mit der Fensterbreite: 13px und 14px 16px
     * auf dem Schreibtisch, 10px und 12px 14px auf dem Telefon und darunter
     * (tokens.css). Der Innenabstand bleibt eine Custom Property, weil die
     * Sperre am Ende dieser Datei ihn im Zeiger- und Fokus-Zustand von dort
     * zurückholt.
     */
    gap: var(--spo-notice-gap);
    /* Export: #E0DAC9 – der kräftige Sandton, den tokens.css schon führt */
    --spo-notice-bg: var(--spo-sand-strong);
    --spo-notice-border: 1px solid rgba(120, 98, 55, .16);
    --spo-notice-padding: var(--spo-notice-pad-block) var(--spo-notice-pad-inline);
    background: var(--spo-notice-bg);
    border: var(--spo-notice-border);
    border-radius: 8px;
    padding: var(--spo-notice-padding);
    opacity: var(--spo-notice-opacity, 1);
    cursor: pointer;
    /*
     * Im Export trägt jede der beiden Zeilen `color: #003C6E` einzeln. Hier
     * steht die Farbe einmal an der Fläche: die Zeilen erben sie, und das Icon
     * braucht sie ohnehin an dieser Stelle — es ist eine Maske und färbt sich
     * über currentColor.
     */
    color: var(--spo-blue-dark);
    /*
     * Nicht aus dem Export, sondern aus unserem Markup: mit Ziel wird die Zeile
     * zum <a>, und ein <a> bringt Unterstreichung und Browser-Blau mit.
     * Dieselben zwei Zeilen stehen bei .spo-button (65-button.css) und aus
     * demselben Grund.
     */
    text-decoration: none;
    font-family: inherit;
}

/*
 * Die Fläche des Icons: im Export 42px im Quadrat und mittig gefüllt, damit
 * die Titel mehrerer Meldungen untereinander auf einer Linie stehen. Sie
 * schrumpft nicht mit (flex-shrink: 0) und ist der Bezugsrahmen des Punktes.
 *
 * Ihre Kantenlänge läuft mit der Fensterbreite (42px bis 34px, tokens.css): sie
 * ist das Maß der Zeilenhöhe, und die soll auf schmalen Geräten kleiner werden.
 * `flex-shrink: 0` bleibt — sie gibt nicht dem Text nach, sondern der Breite des
 * Fensters.
 */
.spo-notice-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--spo-notice-icon-size);
    height: var(--spo-notice-icon-size);
    flex-shrink: 0;
}

/*
 * Volle Deckkraft: die .95 aus 50-grid.css sind die der Kachel-Icons, dieses
 * hier steht im Export ungedämpft. Die Kantenlänge (24px im Design, mittig in
 * der 42px-Fläche) ist der Rückfall der Maske in 66-icon.css.
 */
.spo-notice-icon .spo-tile-icon {
    opacity: 1;
}

/*
 * Der Punkt an der oberen rechten Ecke des Icons. Der 2px-Ring ist im Export
 * der Sandton der Fläche dahinter (#ece0c6) und nicht der der Zeile — dadurch
 * sitzt der Punkt sichtbar über der Kante und nicht auf ihr.
 */
.spo-notice-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #ece0c6;
}

/* Die drei Zustände aus dem Export: laufende Meldung, in Ordnung, Hinweis */
.spo-notice-dot--alert {
    background: #e0762a;
}

.spo-notice-dot--ok {
    background: #3a9d5d;
}

.spo-notice-dot--info {
    background: #0a6aa8;
}

/*
 * Der Text nimmt den Rest der Breite. `min-width: 0` ist die Erlaubnis zu
 * schrumpfen: ohne sie wäre ein langer Titel die Mindestbreite des Flex-Kindes
 * und schöbe die Zeile über ihre Spalte hinaus.
 */
.spo-notice-text {
    flex: 1;
    min-width: 0;
}

.spo-notice-title {
    display: block;
    /* 15px auf dem Schreibtisch, 13px auf dem Telefon (tokens.css) */
    font-size: var(--spo-text-notice-title);
    font-weight: 700;
    letter-spacing: -.01em;
}

/*
 * Design: 12,5px, Gewicht 500, 1px Abstand nach oben und volle Deckkraft —
 * nicht die gedämpfte Nebenzeile der Buttons (60-element.css). Diese Zeile
 * trägt die Auskunft ("1 aktuelle Meldung") und ist damit der Grund, warum die
 * Meldung überhaupt dasteht.
 */
.spo-notice-note {
    display: block;
    margin-top: 1px;
    /* 12.5px auf dem Schreibtisch, 11.5px auf dem Telefon (tokens.css) */
    font-size: var(--spo-text-notice-note);
    font-weight: 500;
}

/* Wie bei Kachel und Button: im Editor sichtbar ausgeschaltet */
.spo-notice--hidden {
    outline: 1px dashed rgba(0, 60, 110, .5);
    --spo-notice-opacity: .4;
}

/*
 * Zeiger und Fokus ändern die Meldung nicht — dieselbe Sperre wie bei Kachel und
 * Fläche. Hier zählt der Rahmen besonders: die Meldung hat einen eigenen, und
 * das `border: 2px solid #003C6E` der Zielumgebung machte im Fokus einen
 * zweiten daraus, in einer Farbe, die das Design für Meldungen nicht kennt.
 */
.spo-notice:hover:not(:focus-visible),
.spo-notice:focus:not(:focus-visible) {
    background: var(--spo-notice-bg) !important;
    color: var(--spo-blue-dark) !important;
    opacity: var(--spo-notice-opacity, 1) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
}

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