/**
 * Status pills and avatars
 *
 * A pill is a tint plus a word. Colour never carries the meaning on its own:
 * green means done, gold means in progress, red means someone needs to act,
 * and each pill says which in text. The "done" pill also carries a check.
 *
 * The saturated fills the previous build used — white on #22c55e was 2.3:1,
 * white on #E6482E was 3.9:1 — are replaced by a tinted face with the text in
 * the darker member of the same family.
 */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 24px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: rgba(26, 77, 77, 0.10);
    color: var(--text-on-light);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

/* ============================================
   STATES

   Both the redesign's names and the Bootstrap-era names the views already
   carry resolve to the same three pills.
   ============================================ */

.badge-success,
.badge-done,
.badge-email-sent,
.badge-wish-added,
.badge-active,
.badge.bg-success,
.badge.text-bg-success {
    background: var(--color-success-tint);
    color: var(--color-success);
}

.badge-warning,
.badge-in-progress,
.badge-draft,
.badge-wish-pending,
.badge.bg-warning,
.badge.text-bg-warning {
    background: var(--color-warning-tint);
    color: var(--color-gold-ink);
}

.badge-danger,
.badge-error,
.badge-needs-you,
.badge-email-not-sent,
.badge.bg-danger,
.badge.text-bg-danger {
    background: var(--color-danger-tint);
    color: var(--color-danger);
}

.badge-info,
.badge-primary,
.badge-secondary,
.badge-neutral,
.badge-inactive,
.badge-light,
.badge-dark,
.badge.bg-info,
.badge.bg-primary,
.badge.bg-secondary {
    background: var(--color-info-tint);
    color: var(--color-info);
}

/* Bootstrap's .text-dark on a pill is a no-op here: the pill already picks a
   text colour that clears AA on its own tint. */
.badge.text-dark,
.badge.text-white {
    color: inherit;
}

/* ============================================
   PILLS ON THE TEAL GROUND

   A tint over teal is still teal. Where a pill sits straight on the page, it
   takes a cream face so the same text colours keep their ratios.
   ============================================ */

.on-dark .badge,
.badge-on-dark {
    background: rgba(247, 243, 232, 0.92);
}

/* ============================================
   SIZES AND SHAPES
   ============================================ */

.badge-xs { height: 20px; padding: 2px 8px; font-size: 0.6875rem; }
.badge-sm { height: 22px; padding: 3px 9px; }
.badge-md { height: 24px; }
.badge-lg { height: 28px; padding: 6px 12px; font-size: var(--font-size-sm); }

.badge-square { border-radius: var(--radius-sm); }
.badge-pill { border-radius: var(--radius-full); }

.badge-circle,
.badge-icon-only {
    width: 24px;
    padding: 0;
    justify-content: center;
}

.badge-outline {
    background: transparent;
    border-color: currentcolor;
}

.badge-outline-success { background: transparent; border-color: var(--color-success); color: var(--color-success); }
.badge-outline-warning { background: transparent; border-color: var(--color-gold-ink); color: var(--color-gold-ink); }
.badge-outline-error,
.badge-outline-danger { background: transparent; border-color: var(--color-danger); color: var(--color-danger); }
.badge-outline-info,
.badge-outline-primary,
.badge-outline-secondary { background: transparent; border-color: var(--color-info); color: var(--color-info); }

.badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.badge-icon,
.badge-with-icon svg,
.badge svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* A dot is an ornament beside the word, never the whole message. */
.badge-with-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentcolor;
}

.badge-removable {
    padding-right: 6px;
}

.badge-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: rgba(13, 59, 46, 0.14);
    color: inherit;
    cursor: pointer;
}

.badge-positioned {
    position: absolute;
    top: -6px;
    right: -6px;
}

/* The pulsing dot was ambience on a 2s loop. It stays only where something is
   genuinely live, and stops for readers who asked for less motion. */
.badge-dot-pulse::before {
    animation: badge-pulse 1800ms var(--easing) infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .badge-dot-pulse::before { animation: none; }
}

/* ============================================
   AVATARS

   Initials on a face from a fixed four-colour set, picked by a stable hash of
   the participant id, so a person keeps the same colour on every screen.
   ============================================ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-teal-dark);
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-size: 0.78125rem;   /* 12.5px */
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
}

.avatar-xs { width: 30px; height: 30px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 34px; height: 34px; font-size: 0.8125rem; }
.avatar-lg { width: 38px; height: 38px; font-size: 0.875rem; }

.avatar-tone-0 { background: var(--avatar-tone-0); color: var(--text-on-dark); }
.avatar-tone-1 { background: var(--avatar-tone-1); color: var(--text-on-dark); }
.avatar-tone-2 { background: var(--avatar-tone-2); color: var(--text-on-dark); }
.avatar-tone-3 { background: var(--avatar-tone-3); color: var(--color-on-gold); }

/* A stack reads as one group: overlapped, each ringed in the card's own face
   so the edges stay legible. */
.avatar-stack {
    display: inline-flex;
    align-items: center;
}

/*
 * The overlap has to clear the initials, not just the circle.
 *
 * A 30px face with a 2px ring leaves 26px of room for two bold uppercase
 * letters that measure 18-20px, so there are only ~3px of margin either side —
 * and the stack overlapped by 10px. Measured on the dashboard: the next avatar
 * covered 4-5px of its neighbour's text, which sliced the second letter off
 * every monogram but the last. "Anna Bauer / Camille Beaumont / Ines
 * Fernandez" read as "AE CE IF" on every event card, at every width, and looked
 * like a rendering fault rather than a group.
 *
 * A slightly larger face buys margin, and a 6px overlap now stops 1px short of
 * the widest measured monogram while still reading as a stack rather than a
 * row. Both numbers are load-bearing: raising the overlap or shrinking the
 * face puts the letters back under the neighbour.
 */
.avatar-stack .avatar + .avatar {
    margin-left: -6px;
}

.avatar-stack .avatar {
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border: 2px solid var(--card-face-mid);
}

.avatar-stack-count {
    margin-left: var(--space-3);
    color: var(--text-on-light-muted);
    font-size: var(--font-size-sm);
}

.avatar-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.avatar-row-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.avatar-row-name {
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avatar-row-email {
    color: var(--text-on-light-muted);
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}