/* ============================================================
   Mindup — Reusable design-system patterns
   Page headers, metric cards, CTA banners, avatars, bars.
   Token-driven (--mu-*). No Vuetify selectors here — those
   belong in mindup-vuetify.css.
   ============================================================ */

/* ---------------------------------------------------------
   Page header — eyebrow + display title + optional subtitle.
   --------------------------------------------------------- */
.mu-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--mu-s-1);
    margin: var(--mu-s-2) 0 var(--mu-s-5);
}

.mu-page-header__title {
    font-family: var(--mu-font-display);
    font-size: var(--mu-fs-h2);
    font-weight: 800;
    letter-spacing: var(--mu-ls-display);
    line-height: var(--mu-lh-tight);
    color: var(--mu-ink);
    margin: 0;
}

.mu-page-header__subtitle {
    font-size: var(--mu-fs-body-sm);
    line-height: var(--mu-lh-normal);
    color: var(--mu-ink-60);
    margin: var(--mu-s-1) 0 0;
}

/* ---------------------------------------------------------
   Metric (KPI) cards — big 800 numeral + micro label.
   --------------------------------------------------------- */
.mu-metric-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--mu-s-4);
    margin-bottom: var(--mu-s-5);
}

.mu-metric-card {
    display: flex;
    flex-direction: column;
    gap: var(--mu-s-2);
    padding: 20px 22px;
    background: var(--mu-paper);
    border-radius: var(--mu-r-lg);
    box-shadow: var(--mu-sh-1);
}

.mu-metric-card__label {
    font-size: var(--mu-fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--mu-ls-eyebrow);
    color: var(--mu-ink-60);
    line-height: 1.2;
}

.mu-metric-card__num {
    font-family: var(--mu-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: var(--mu-ls-display);
    line-height: 1;
    color: var(--mu-ink);
    font-variant-numeric: tabular-nums;
}

.mu-metric-card__unit {
    font-size: var(--mu-fs-body);
    font-weight: 500;
    color: var(--mu-ink-40);
    margin-left: 2px;
}

.mu-metric-card--success .mu-metric-card__num {
    color: var(--mu-success);
}

.mu-metric-card--danger .mu-metric-card__num {
    color: var(--mu-danger);
}

/* ---------------------------------------------------------
   Calm CTA banner — purple gradient, white copy, pill action.
   --------------------------------------------------------- */
.mu-cta-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mu-s-5);
    padding: var(--mu-s-6) var(--mu-s-6);
    margin-top: var(--mu-s-5);
    border-radius: var(--mu-r-xl);
    background: var(--mu-purple);
    color: #ffffff;
    overflow: hidden;
    box-shadow: var(--mu-sh-3);
}

.mu-cta-banner::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 50%;
    height: 180%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.14) 0%, transparent 70%);
    pointer-events: none;
}

.mu-cta-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--mu-s-2);
    min-width: 0;
}

.mu-cta-banner__title {
    font-family: var(--mu-font-display);
    font-size: var(--mu-fs-h3);
    font-weight: 800;
    letter-spacing: var(--mu-ls-heading);
    line-height: var(--mu-lh-snug);
    margin: 0;
}

.mu-cta-banner__body {
    font-size: var(--mu-fs-body-sm);
    line-height: var(--mu-lh-normal);
    color: rgba(255, 255, 255, 0.85);
    max-width: 48rem;
    margin: 0;
}

.mu-cta-banner__actions {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.mu-cta-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mu-s-2);
    padding: 12px 22px;
    border-radius: var(--mu-r-pill);
    background: #ffffff;
    color: var(--mu-purple-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--mu-dur-1) var(--mu-ease-smooth),
                box-shadow var(--mu-dur-2) var(--mu-ease-smooth);
}

.mu-cta-banner__btn:hover {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18);
}

.mu-cta-banner__btn:active {
    transform: translateY(1px);
}

.mu-cta-banner__glyph {
    position: absolute;
    right: var(--mu-s-6);
    bottom: -12px;
    opacity: 0.18;
    pointer-events: none;
}

@media (max-width: 600px) {
    .mu-cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------
   Initials avatar — lilac circle, purple-ink initials.
   --------------------------------------------------------- */
.mu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mu-lilac);
    color: var(--mu-purple-ink);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    user-select: none;
}

.mu-avatar--lg {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
}

.mu-avatar--sm {
    width: 20px;
    height: 20px;
    font-size: 0.5rem;
}

/* Per-person soft tints (stable hash of the name picks one) */
.mu-avatar--tint-0 {
    background: var(--mu-lilac-soft);
    color: var(--mu-purple-ink);
}

.mu-avatar--tint-1 {
    background: var(--mu-success-soft);
    color: var(--mu-success);
}

.mu-avatar--tint-2 {
    background: var(--mu-info-soft);
    color: var(--mu-info);
}

.mu-avatar--tint-3 {
    background: var(--mu-warning-soft);
    color: var(--mu-ink-80);
}

.mu-avatar--tint-4 {
    background: var(--mu-danger-soft);
    color: var(--mu-danger);
}

/* ---------------------------------------------------------
   Participation bar — ink-10 track, purple fill.
   --------------------------------------------------------- */
.mu-bar {
    height: 6px;
    background: var(--mu-ink-10);
    border-radius: var(--mu-r-pill);
    overflow: hidden;
}

.mu-bar__fill {
    height: 100%;
    border-radius: var(--mu-r-pill);
    background: var(--mu-purple);
    transition: width var(--mu-dur-4) var(--mu-ease-out);
}

/* ---------------------------------------------------------
   Distribution overview — generic summary strip + category
   cards (big total, share/rate meta, stacked bar, dot legend).
   Segment colors are passed inline as var(--mu-<color>).
   --------------------------------------------------------- */
.dist-overview__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--mu-r-pill);
}

.dist-overview__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mu-s-3);
}

.dist-overview__card {
    display: flex;
    flex-direction: column;
    gap: var(--mu-s-2);
    height: 100%;
    padding: var(--mu-s-3) var(--mu-s-4);
    background: var(--mu-paper);
    border: 1px solid var(--mu-ink-10);
    border-radius: var(--mu-r-md);
    box-shadow: var(--mu-sh-1);
}

.dist-overview__card-footer {
    margin-top: auto;
    padding-top: var(--mu-s-1);
}

.dist-overview__card-head {
    display: flex;
    align-items: center;
    gap: var(--mu-s-2);
}

.dist-overview__card-icon.v-icon {
    color: var(--mu-ink-40);
}

.dist-overview__card-name {
    font-size: var(--mu-fs-body-sm);
    font-weight: 600;
    color: var(--mu-ink);
}

.dist-overview__card-figure {
    display: flex;
    align-items: baseline;
    gap: var(--mu-s-2);
}

.dist-overview__card-total {
    font-family: var(--mu-font-display);
    font-size: var(--mu-fs-h2);
    font-weight: 800;
    line-height: 1;
    color: var(--mu-ink);
    font-variant-numeric: tabular-nums;
}

.dist-overview__card-unit {
    font-size: var(--mu-fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mu-ls-eyebrow);
    color: var(--mu-ink-40);
}

.dist-overview__card-meta {
    font-size: var(--mu-fs-caption);
    color: var(--mu-ink-40);
}

.dist-overview__bar {
    display: flex;
    height: 6px;
    border-radius: var(--mu-r-pill);
    overflow: hidden;
    background: var(--mu-ink-05);
}

.dist-overview__bar-fill {
    height: 100%;
    transition: width var(--mu-dur-3) var(--mu-ease-smooth);
}

.dist-overview__breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mu-s-3);
}

.dist-overview__breakdown-item {
    display: inline-flex;
    align-items: center;
    gap: var(--mu-s-1);
    font-size: var(--mu-fs-caption);
    color: var(--mu-ink-40);
    font-variant-numeric: tabular-nums;
}

.dist-overview__breakdown-count {
    font-weight: 700;
    color: var(--mu-ink-60);
}

.dist-overview__breakdown-item--clickable {
    cursor: pointer;
}

/* Reusable count badge (pill) */
.mu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 7px;
    border-radius: var(--mu-r-pill);
    background: var(--mu-ink-05);
    color: var(--mu-ink-60);
    font-size: var(--mu-fs-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
}