/*
 * Community Trust - Halo, Zeichen, Knopf und die beiden eigenen Seiten.
 *
 * Das einzige oeffentliche Vertrauenszeichen seit 5.10.44: mehrlagige
 * Punktbahnen um das Profilbild, von aussen nach innen Cyan, Blau, tiefes
 * Aeonwall-Violett, und zwei ineinandergreifende Ringe am unteren Rand.
 *
 * DIE FARBEN stehen nur hier in den Tokens. Violett kommt aus dem
 * Markenfarbsystem (--base-h/s/l aus css/color.php), Cyan und Blau sind neu.
 * Der Halo traegt keine Bedeutung allein: die tragen das Zeichen, seine Form
 * und sein zugaenglicher Name.
 *
 * DER HALO sind keine Dutzende Elemente, sondern ein ::before mit einem
 * Verlauf, den eine SVG-Maske zu Punkten macht. Der Ring ist in der Maske eine
 * Vektorform und bleibt in jeder Groesse und bei jedem Zoom scharf. Die Punkte
 * entstehen aus pathLength und einem Strich, der fast nichts lang ist, mit
 * runden Enden; der halbe Versatz legt die mittlere Bahn auf Luecke.
 *
 * Kein geschlossener Kreis ums Bild, und zwischen Bild und erster Bahn bleibt
 * ein schmaler Abstand. Keine Animation, nirgends. Das Profilbild selbst bleibt
 * unberuehrt: der Halo liegt auf dem Wrapper, ohne Filter und ohne Ueberlagerung.
 */
:root {
    --aw-trust-cyan: #16bfe8;
    --aw-trust-blue: #2a6df4;
    --aw-trust-violet: hsl(var(--base-h, 250) calc(var(--base-s, 60%) + 10%) calc(var(--base-l, 45%) - 4%));
    --aw-trust-surface: #fff;
    --aw-trust-contrast: #fff;

    --aw-trust-bahnen-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='100' cy='100' r='84.5' stroke-width='2.8' pathLength='66' stroke-dasharray='.01 .99'/%3E%3Ccircle cx='100' cy='100' r='91' stroke-width='3.2' pathLength='66' stroke-dasharray='.01 .99' stroke-dashoffset='0.5'/%3E%3Ccircle cx='100' cy='100' r='97.5' stroke-width='2.6' pathLength='66' stroke-dasharray='.01 .99'/%3E%3C/svg%3E");
    --aw-trust-bahnen-md: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='100' cy='100' r='85' stroke-width='4.4' pathLength='40' stroke-dasharray='.01 .99'/%3E%3Ccircle cx='100' cy='100' r='95' stroke-width='4' pathLength='40' stroke-dasharray='.01 .99' stroke-dashoffset='0.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- Der Wrapper */

.aw-trust-avatar {
    position: relative;
    flex: none;
}

/* :where, damit jede Klasse einer Seite gewinnt. */
:where(span.aw-trust-avatar) {
    display: inline-block;
    vertical-align: middle;
}

/* -------------------------------------------------------------- Der Halo */

.aw-trust-ring::before {
    content: "";
    position: absolute;
    inset: var(--aw-trust-auslage);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--aw-trust-violet) 85%, var(--aw-trust-blue) 91%, var(--aw-trust-cyan) 98%);
    -webkit-mask: var(--aw-trust-bahnen) center / 100% 100% no-repeat;
    mask: var(--aw-trust-bahnen) center / 100% 100% no-repeat;
    pointer-events: none;
}

.aw-trust-ring--lg {
    --aw-trust-auslage: -15%;
    --aw-trust-bahnen: var(--aw-trust-bahnen-lg);
}

.aw-trust-ring--md {
    --aw-trust-auslage: -20%;
    --aw-trust-bahnen: var(--aw-trust-bahnen-md);
}

/* Im Fluss neben einem Namen braucht der Halo seinen Platz. */
.aw-trust-ring--md:not(.contributor__trust) {
    margin-inline: 8px 10px;
}

/* Auflage auf einem Bild, das selbst absolut sitzt (Mitgliederkarten). */
.contributor__head > .contributor__trust {
    position: absolute;
    left: 50%;
    bottom: -30px;
    width: 60px;
    height: 60px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Der breite weisse Rand der Karte wuerde zwischen Bild und Halo zum Ring. */
.contributor__head:has(> .contributor__trust) > .contributor__img {
    outline-width: 2px;
}

/* Das Theme gibt .comet-avatar eine Breite in Prozent und erlaubt nur dem
   Bild direkt darin, sie zu ueberragen. */
.comet-avatar:has(> .aw-trust-avatar) {
    width: auto;
}

.comet-avatar > .aw-trust-avatar {
    display: block;
    width: max-content;
    max-width: none;
}

.comet-avatar > .aw-trust-avatar > img {
    max-width: none;
}

/* Die Werkseite zieht sonst selbst einen feinen Kreis ums Bild. */
.aw-trust-ring > .awu-det__avatar {
    box-shadow: none;
}

/* ------------------------------------------------------------ Das Zeichen */

.aw-trust-mark {
    position: absolute;
    /*
     * Unten LINKS, und zwar physisch. Am eigenen Profil sitzt unten rechts
     * der Knopf fuer ein neues Profilbild - und der ist in main.css
     * ebenfalls physisch mit right gesetzt. Ein logisches inset-inline-start
     * landete im Arabischen genau darauf.
     */
    left: 4%;
    bottom: 4%;
    display: inline-flex;
    max-width: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aw-trust-violet), var(--aw-trust-blue));
    box-shadow: 0 0 0 2px var(--aw-trust-surface);
    color: var(--aw-trust-contrast);
    line-height: 1;
    z-index: 2;
}

.aw-trust-mark--lg {
    width: 34px;
    height: 34px;
}

.aw-trust-mark--md {
    width: 22px;
    height: 22px;
    left: -2%;
    bottom: -2%;
}

.aw-trust-mark--sm {
    width: 17px;
    height: 17px;
    left: -3px;
    bottom: -3px;
    box-shadow: 0 0 0 1.5px var(--aw-trust-surface);
}

/* Neben einem Namen, wo es kein Bild gibt oder das Bild nicht uns gehoert. */
.aw-trust-mark--inline {
    position: static;
    width: 16px;
    height: 16px;
    margin-inline-start: .3em;
    vertical-align: -.2em;
    box-shadow: none;
}

.aw-trust-mark__icon {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

/* Das Signal in Worten, unter dem Namen. */
.aw-trust-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aw-trust-violet);
}

.user-profile__info .aw-trust-text {
    margin-block: 4px 2px;
    text-align: center;
}

.aw-pk__name:has(> .aw-trust-text) {
    flex-wrap: wrap;
}

.aw-pk__name > .aw-trust-text {
    flex-basis: 100%;
}

/* Der zugaengliche Name - vorgelesen, nie gezeichnet. */
.aw-trust-mark__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;
}

/*
 * Hoher Kontrast: Verlaeufe verschwinden dort. Der Halo wird zu Punkten in der
 * Systemfarbe, und das Zeichen behaelt seine Form und seinen Namen.
 */
@media (forced-colors: active) {
    .aw-trust-ring::before {
        forced-color-adjust: none;
        background: Highlight;
    }

    .aw-trust-mark {
        forced-color-adjust: none;
        background: Canvas;
        box-shadow: 0 0 0 1px CanvasText;
        color: CanvasText;
    }
}

/* ------------------------------------------------- Der Knopf am Profil */

/*
 * Ein Verweis, kein <a><button>. Die Nachbarn in dieser Reihe verschachteln
 * einen Knopf in einen Verweis - zwei Tabulatorhalte fuer eine Handlung,
 * und ungueltiges HTML. Hier steht einer.
 */
.user-profile__info .aw-trust-cta {
    display: inline-block;
    margin-left: 5px;
    padding: 9px 26px;
    border: 1px solid #c9d4d0;
    border-radius: 15px;
    background: #fff;
    color: #131318;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    min-height: 44px;
}

.user-profile__info .aw-trust-cta:hover {
    border-color: var(--aw-trust-violet);
    color: var(--aw-trust-violet);
}

.user-profile__info .aw-trust-cta--done {
    border-color: var(--aw-trust-violet);
    color: var(--aw-trust-violet);
}

/* ------------------------------------------- Die beiden eigenen Seiten */

.awu-trust {
    max-width: 760px;
}

.awu-trust__stand {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 22px;
    padding: 20px 24px;
    border: 1px solid #e6e2f1;
    border-radius: 16px;
    background: var(--aw-trust-surface);
}

.awu-trust__stand-titel {
    margin: 0 0 2px;
    font-weight: 600;
    color: #131318;
}

.awu-trust__stand-text {
    margin: 0;
    font-size: 14px;
    color: #4a4560;
}

.awu-trust__card {
    padding: 24px;
    border: 1px solid #e6e2f1;
    border-radius: 16px;
    background: #fff;
}

.awu-trust__who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.awu-trust__avatar {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
}

.awu-trust__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.awu-trust__avatar--sm {
    width: 40px;
    height: 40px;
}

.awu-trust__name {
    margin: 0;
    font-weight: 600;
    color: #131318;
    overflow-wrap: anywhere;
}

.awu-trust__handle {
    margin: 0;
    font-size: 13px;
    color: #6b6580;
    overflow-wrap: anywhere;
}

.awu-trust__title {
    margin: 0 0 10px;
    font-size: 1.25rem;
}

.awu-trust__sense {
    margin: 0 0 14px;
    color: #131318;
    line-height: 1.6;
}

.awu-trust__facts {
    margin: 0 0 18px;
    padding-left: 1.2em;
    color: #4a4560;
    line-height: 1.6;
}

/* Das Theme nimmt jedem li den Punkt - hier sind es drei getrennte
   Tatsachen, und ohne Punkt liefen sie zu einem Absatz zusammen. */
.awu-trust__facts li {
    list-style: disc;
}

.awu-trust__state {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f7f5ff;
    color: var(--aw-trust-violet);
}

.awu-trust__state--wait {
    background: #f7f5ff;
    color: #3d3566;
}

.awu-trust__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.awu-trust__primary,
.awu-trust__secondary,
.awu-trust__quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.awu-trust__primary {
    border: 0;
    background: var(--aw-trust-violet);
    color: var(--aw-trust-contrast);
}

.awu-trust__secondary {
    border: 1px solid #ddd6f2;
    background: #f7f5ff;
    color: #2f207e;
}

.awu-trust__quiet {
    border: 0;
    background: none;
    color: #6b6580;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.awu-trust__lede {
    margin: 0 0 6px;
    color: #131318;
    line-height: 1.6;
}

.awu-trust__note {
    margin: 0 0 18px;
    color: #6b6580;
    line-height: 1.6;
}

.awu-trust__tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

.awu-trust__tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #e6e2f1;
    border-radius: 999px;
    color: #4a4560;
    text-decoration: none;
    font-weight: 600;
}

.awu-trust__tab[aria-current="page"] {
    border-color: var(--aw-trust-violet);
    background: #f7f5ff;
    color: var(--aw-trust-violet);
}

.awu-trust__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.awu-trust__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0edf7;
}

.awu-trust__row-body {
    flex: 1 1 180px;
    min-width: 0;
}

.awu-trust__row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.awu-trust__row-actions form {
    margin: 0;
}

/* "Mutual" - als Wort, nicht nur als Farbe. */
.awu-trust__tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid var(--aw-trust-violet);
    border-radius: 999px;
    font-size: 12px;
    color: var(--aw-trust-violet);
}

.awu-trust__when {
    margin: 2px 0 0;
    font-size: 13px;
    color: #6b6580;
}

.awu-trust__empty {
    padding: 18px 0;
    color: #6b6580;
}

.awu-trust__removed {
    margin-top: 18px;
}

.awu-trust__removed summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #4a4560;
}

@media (max-width: 575px) {
    .awu-trust__card {
        padding: 18px 16px;
    }

    .awu-trust__actions > *,
    .awu-trust__primary,
    .awu-trust__secondary {
        width: 100%;
    }
}