/*
 * Die Profilvorschau (profilkarte.js, Partial profilkarte, 23.10.2026).
 *
 * Weiss, ein feiner Rand mit einem Hauch Violett, ein leiser Schatten,
 * ruhige Radien, dunkle Schrift. Violett ist nur der Akzent: der
 * Folgen-Knopf und der Verweis aufs Profil. Nur vorhandene Farbvariablen
 * (--white, --dark, --base, --base-dark), keine neue Schrift, keine
 * Symbolschrift, kein Bild.
 *
 * Logische Eigenschaften (inline/block, start/end), damit eine Seite von
 * rechts nach links ohne eigene Regeln stimmt. Jede Flaeche zum Anklicken
 * in der Karte ist mindestens 44 px hoch.
 */

.aw-pk {
    position: fixed;
    z-index: 1090;
    inline-size: min(320px, calc(100vw - 16px));
    box-sizing: border-box;
    padding: 16px;
    color: hsl(var(--dark));
    background-color: hsl(var(--white));
    border: 1px solid hsl(var(--base) / 0.2);
    border-radius: 14px;
    box-shadow: 0 12px 32px hsl(var(--dark) / 0.14), 0 2px 6px hsl(var(--dark) / 0.08);
    font-size: 14px;
    line-height: 1.4;
    text-align: start;
}

.aw-pk[hidden] {
    display: none !important;
}

/* Die unsichtbare Bruecke ueber den Abstand zum Namen - so hoch wie der
   Abstand, auf der Seite des Namens (profilkarte.js setzt beides). */
.aw-pk::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: var(--aw-pk-bruecke, 8px);
}

.aw-pk[data-seite="unten"]::before {
    inset-block-end: 100%;
}

.aw-pk[data-seite="oben"]::before {
    inset-block-start: 100%;
}

/* ------------------------------------------------ Das Blatt fuer den Finger
 *
 * Dieselbe Karte, am unteren Rand: ueber der Mobilnavigation und der Safe
 * Area. Dieselben Ebenen wie der Filter der Walls - ueber der Cookie-Karte.
 * Nichts sperrt die Seite; offen ist es, solange der Grund da ist.
 */
.aw-pk-grund {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background-color: hsl(var(--dark) / 0.35);
}

.aw-pk-grund[hidden] {
    display: none;
}

.aw-pk--blatt {
    z-index: 1000001;
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    inline-size: 100%;
    max-inline-size: 520px;
    max-block-size: calc(100vh - 24px);
    max-block-size: calc(100dvh - 24px);
    margin-inline: auto;
    padding-block-end: calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

.aw-pk--blatt::before {
    content: none;
}

@media (max-width: 991.98px) {
    body.has-awnav .aw-pk--blatt {
        inset-block-end: calc(var(--awnav-h) + var(--awnav-safe));
        max-block-size: calc(100vh - var(--awnav-h) - var(--awnav-safe) - 24px);
        max-block-size: calc(100dvh - var(--awnav-h) - var(--awnav-safe) - 24px);
        padding-block-end: 16px;
    }

    html.awnav-keyboard body.has-awnav .aw-pk--blatt {
        inset-block-end: 0;
    }
}

.aw-pk--blatt .aw-pk__kopf {
    padding-inline-end: 44px;
}

.aw-pk__zu {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    color: hsl(var(--dark));
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.aw-pk__zu:hover {
    color: hsl(var(--base));
}

/* ------------------------------------------------ Kopf: Bild und Name */

.aw-pk__kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    min-inline-size: 0;
    color: inherit;
    text-decoration: none;
}

.aw-pk__kopf:hover,
.aw-pk__kopf:focus {
    color: inherit;
}

.aw-pk__bild {
    position: relative;
    flex: 0 0 56px;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
}

.aw-pk__avatar {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    object-fit: cover;
    background-color: hsl(var(--base) / 0.08);
}

.aw-pk__name {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 4px;
    min-inline-size: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: hsl(var(--dark));
}

/* Ein langer Benutzername bleibt eine Zeile und gibt mit Auslassungspunkten
   nach; das Abzeichen dahinter behaelt seine Groesse. */
.aw-pk__handle {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aw-pk__name .aw-verified {
    flex-shrink: 0;
}

.aw-pk__kopf:hover .aw-pk__handle {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------ Zahlen */

.aw-pk__zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: hsl(var(--dark) / 0.75);
}

.aw-pk__zahl {
    font-weight: 700;
    color: hsl(var(--dark));
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ Aktionen */

.aw-pk__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-start: 14px;
}

.aw-pk__aktionen > * {
    flex: 1 1 auto;
}

.aw-folgen--karte,
.aw-folgen-status,
.aw-pk__profil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 44px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}

/* Follow: die eine violette Flaeche der Karte. */
.aw-folgen--karte {
    color: hsl(var(--white));
    background-color: hsl(var(--base));
    border: 1px solid hsl(var(--base));
}

.aw-folgen--karte:hover,
.aw-folgen--karte:focus-visible,
.aw-folgen--karte:active {
    color: hsl(var(--white));
    background-color: hsl(var(--base-dark));
    border-color: hsl(var(--base-dark));
}

.aw-folgen--karte[aria-busy="true"] {
    padding-inline: 12px 28px;
}

/* Following: ein Zustand, kein Knopf - neutral, ohne Hover, ohne Zeiger. */
.aw-folgen-status {
    color: hsl(var(--dark) / 0.8);
    background-color: hsl(var(--dark) / 0.04);
    border: 1px solid hsl(var(--dark) / 0.18);
    cursor: default;
}

.aw-folgen-status:focus {
    outline: none;
}

.aw-folgen-status:focus-visible {
    outline: 3px solid hsl(var(--base)) !important;
    outline-offset: 2px !important;
}

/* View profile: violett umrandet, ohne Flaeche. */
.aw-pk__profil {
    color: hsl(var(--base));
    background-color: transparent;
    border: 1px solid hsl(var(--base) / 0.4);
}

.aw-pk__profil:hover,
.aw-pk__profil:focus-visible {
    color: hsl(var(--base-dark));
    background-color: hsl(var(--base) / 0.08);
    border-color: hsl(var(--base));
}

.aw-pk__profil:focus-visible {
    outline: 3px solid hsl(var(--dark)) !important;
    outline-offset: 2px !important;
}

/* ------------------------------------------------ Laden, nicht verfuegbar, Fehler */

.aw-pk--hinweis .aw-pk__name {
    margin: 0;
}

.aw-pk__satz {
    margin: 6px 0 0;
    color: hsl(var(--dark) / 0.7);
}

.aw-pk--hinweis .aw-pk__profil {
    margin-block-start: 12px;
}

/* ------------------------------------------------ Der Name auf der Werkkarte
 *
 * Die Autorenzeile laesst Klicks zum Werk durch (pointer-events, im Raster);
 * der Name ist jetzt ein eigener Verweis aufs Profil und nimmt sie an.
 * Gleiche Schrift, gleiche Farbe, gleiche Groesse wie vorher.
 */
.gallery__user-link {
    display: inline-flex;
    align-items: center;
    min-inline-size: 0;
    max-inline-size: 100%;
    color: inherit;
    text-decoration: none;
    pointer-events: auto !important;
}

.gallery__user-link:hover,
.gallery__user-link:focus {
    color: inherit;
}

.gallery__user-link:hover .gallery__user-handle {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gallery__user-link > .gallery__user-handle {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery__user-link > .aw-verified {
    flex-shrink: 0;
}

.gallery__user-link:focus-visible {
    outline: 3px solid hsl(var(--white)) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

@media (forced-colors: active) {
    .aw-pk {
        border-color: CanvasText;
    }
}