/* WooLogger · Badge Display (frontend)
   Inline marks shown next to a user's display name. All sizing is driven by
   the --wl-mark-size custom property on the wrapper, so the PHP never
   injects width/height onto the SVGs. */

.wl-display-name {
    --wl-mark-size: 14px;
    --wl-mark-gap: 4px;
    display: inline-flex;
    align-items: center;
    gap: var(--wl-mark-gap);
    min-width: 0;
    max-width: 100%;
    vertical-align: middle;
}
.wl-display-name--sm { --wl-mark-size: 14px; }
.wl-display-name--md { --wl-mark-size: 18px; --wl-mark-gap: 5px; }
.wl-display-name--lg { --wl-mark-size: 22px; --wl-mark-gap: 6px; }

.wl-display-name__text {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wl-display-name__marks {
    display: inline-flex;
    align-items: center;
    gap: var(--wl-mark-gap);
    flex: 0 0 auto;
}

/* --- Mark atom ---------------------------------------------------------- */
.wl-user-mark {
    --wl-mark-color: var(--c-accent, #6366f1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wl-mark-size);
    height: var(--wl-mark-size);
    color: var(--wl-mark-color);
    line-height: 1;
    flex: 0 0 auto;
}
.wl-user-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Verification tick --------------------------------------------------- */
.wl-user-mark--verify.is-verified   { color: var(--c-verified, #1d9bf0); }
.wl-user-mark--verify.is-unverified { color: var(--c-text-faint, #9ca3af); opacity: .55; }

/* Non-verification badges get a subtle premium motion */
@keyframes wlBadgeFloat {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 transparent); }
    50% { transform: translateY(-1px) scale(1.06); filter: drop-shadow(0 1px 4px color-mix(in srgb, currentColor 32%, transparent)); }
}
.wl-user-mark--badge svg {
    transform-origin: 50% 50%;
    animation: wlBadgeFloat 2.8s ease-in-out infinite;
}
.wl-display-name__marks .wl-user-mark--badge:nth-child(3n) svg { animation-delay: .25s; }
.wl-display-name__marks .wl-user-mark--badge:nth-child(3n + 1) svg { animation-delay: .5s; }
.wl-display-name__marks .wl-user-mark--badge:nth-child(3n + 2) svg { animation-delay: .75s; }

/* "+N more" overflow counter ------------------------------------------ */
.wl-user-mark--more {
    min-width: var(--wl-mark-size);
    width: auto;
    padding: 0 4px;
    font: 700 calc(var(--wl-mark-size) * 0.62) / 1 var(--font-sans, inherit);
    color: var(--c-text-muted, #6b7280);
    background: var(--c-surface-alt, #f3f4f6);
    border: 1px solid var(--c-border, #e5e7eb);
    border-radius: 999px;
    letter-spacing: -0.02em;
}