/*
 * The AEONWALL verification badge.
 *
 * One rule set for the component in resources/views/components/verified-badge.
 * Nothing else in the interface draws a verification mark any more: the old
 * four-span icomoon construction is gone from every view, and the glyphs it
 * used were invisible anyway - main.css set display:none on all three of them.
 *
 * The blue is #0866FF, which is not a new decision: it is the colour the
 * theme's own verify glyph was defined with (main.css, rgb(8, 102, 255)). It
 * carries about 4.9:1 against white and stays legible on the dark chat and
 * admin surfaces, and the mark is a filled disc with a white ring and
 * silhouette on top, so it reads on either ground without relying on the hue.
 */
:root {
    --aw-verified-blue: #0866ff;

    /*
     * Drei Stufen, und nur diese drei.
     *
     * Die Masse stehen in em, nicht in px: das Zeichen waechst mit der
     * Schrift, neben der es steht, und ein Name in einer Kachel traegt
     * deshalb von selbst ein kleineres Abzeichen als eine Ueberschrift im
     * Profilkopf. Gleich gross ueberall waere falsch - in der Kachel
     * erschlaegt es den Namen, im Profilkopf verschwindet es daneben.
     *
     * Was die Stufen unterscheiden, ist das Verhaeltnis zur Schrift, also
     * wie viel Gewicht das Zeichen an dieser Stelle bekommen soll:
     *
     *   compact  dichte Flaechen - Bildkacheln, Kommentare, Chat. Das
     *            Zeichen bestaetigt, es fuehrt nicht.
     *   medium   Listen und Karten von Mitgliedern. Der Normalfall.
     *   large    Wall und Profilkopf. Hier ist der Name die Aussage, und
     *            das Zeichen gehoert sichtbar dazu.
     *
     * Einzelwerte je Ansicht gibt es nicht. Wer eine vierte Groesse
     * braucht, braucht in Wahrheit eine vierte Stufe - und die gehoert
     * hierher, nicht in eine Blade-Datei.
     */
    --aw-verified-compact: .9em;
    --aw-verified-medium: 1.05em;
    --aw-verified-large: 1.25em;
}

.aw-verified {
    --aw-verified-size: var(--aw-verified-medium);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--aw-verified-size);
    height: var(--aw-verified-size);
    /* Verified accounts sit next to a name; unverified ones render nothing at
       all, so there is no placeholder and no stray gap to compensate for.

       margin-inline-start, nicht margin-left: im Arabischen steht der Name
       rechts und das Zeichen links davon, und der Abstand muss mitwandern.
       Er ist ebenfalls in em, wandert also mit der Stufe. */
    margin-inline-start: .28em;
    vertical-align: -.14em;
    color: var(--aw-verified-blue);
    flex: 0 0 auto;
    line-height: 1;
}

/*
 * Die Altregeln des abgeloesten Zeichens abschalten.
 *
 * Das Theme formt in main.css bis heute die Huelle des alten
 * Icomoon-Aufbaus. Vier Regeln sind uebrig, und weil die neue Komponente
 * ebenfalls ein span in genau diesen Containern ist, greifen sie weiter:
 *
 *   .contributor__name__verify span          16px, vertical-align: text-top
 *   .contributor__name__verify__user span    17px, margin-left: -0.5px
 *   .contributor__name__det__verify span     30px
 *   .five-cols .contributor__name__…__user span   16px, margin-left: -9.5px
 *
 * Die feste Schriftgroesse ist die schlimmste davon: die Stufen sind in em
 * angelegt und messen dann an ihr statt am Namen. In der Mitgliederliste kam
 * so ein Zeichen von 17,8px neben 15px Schrift heraus - 1,19 statt der
 * vorgesehenen 1,05 -, und im Profilkopf 37,5px neben 36px, also 1,04 statt
 * 1,25. Der negative Aussenabstand zieht das Zeichen an den Namen; in
 * `.five-cols` sind es -9,5px, dort ueberlappt es ihn.
 *
 * Gemessen an der gerenderten Seite, nicht vermutet. Korrigiert wird hier und
 * nicht in main.css: die Datei gehoert dem Template und kommt bei jeder
 * Aktualisierung neu - dieselbe Begruendung wie bei focus-visible.css.
 *
 * Die physischen Kanten werden zuerst genullt und die logische danach
 * gesetzt; in der Reihenfolge gewinnt sie in beiden Schreibrichtungen.
 */
.contributor__name__verify .aw-verified,
.contributor__name__verify__user .aw-verified,
.contributor__name__det__verify .aw-verified,
.five-cols .contributor__name__verify .aw-verified,
.five-cols .contributor__name__verify__user .aw-verified {
    font-size: inherit;
    line-height: 1;
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: .28em;
    vertical-align: -.14em;
}

.aw-verified--compact {
    --aw-verified-size: var(--aw-verified-compact);
}

.aw-verified--medium {
    --aw-verified-size: var(--aw-verified-medium);
}

.aw-verified--large {
    --aw-verified-size: var(--aw-verified-large);
}

/*
 * Die Farbe steht auf der Zeichnung selbst, nicht nur auf der Huelle.
 *
 * Das Abzeichen ist ein span, und Themes faerben gern alle spans in einem
 * Container ein: auf der Detailseite gilt
 * .awu-det .we-comet .coment-head span { color: var(--d-ink-2) } und schlaegt
 * mit drei Klassen jede Ein-Klassen-Regel der Huelle. Das Ergebnis waere ein
 * graues Verifizierungszeichen in Kommentaren und ein blaues daneben auf der
 * Wall. Diese Klasse traegt niemand sonst, also gewinnt sie ohne !important.
 */
.aw-verified__mark {
    color: var(--aw-verified-blue);
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* The accessible name. Read out, never drawn. */
.aw-verified__label {
    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;
}