/* ==========================================================================
   Info-Score Badge System — CordiAlban + Pace Design System
   Grades A through E + N (Non evaluable)
   ========================================================================== */

/* --- Design tokens (fallbacks for standalone use) --- */
:root {
    --info-score-a: #2D8B46;
    --info-score-b: #6BAD4B;
    --info-score-c: #D4A017;
    --info-score-d: #D4652A;
    --info-score-e: #C42B2B;
    --info-score-n: #6B6459;
}

/* ==========================================================================
   1. Badge — base + size variants
   ========================================================================== */

.badge,
.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
    text-decoration: none;
    letter-spacing: -0.5px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Small — 36x36 */
.badge-sm,
.score-badge-sm {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    border-radius: 8px;
}

/* Large — 72x72 */
.badge-lg,
.score-badge-large {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    border-radius: 16px;
}

/* ==========================================================================
   2. Badge color modifiers (.badge-a ... .badge-n)
   ========================================================================== */

.badge-a { background: var(--info-score-a); }
.badge-b { background: var(--info-score-b); color: #1a1a1a; }
.badge-c { background: var(--info-score-c); color: #1a1a1a; }
.badge-d { background: var(--info-score-d); }
.badge-e { background: var(--info-score-e); }
.badge-n {
    background: rgba(107, 100, 89, 0.3);
    color: var(--color-text-dim, #6B6459);
    font-size: 1.25rem;
    font-style: italic;
}

.badge-sm.badge-n { font-size: 0.85rem; }
.badge-lg.badge-n { font-size: 1.6rem; }

/* ==========================================================================
   3. Backward-compatible grade classes on .score-badge
   Legacy: <span class="score-badge grade-a">A</span>
   ========================================================================== */

.grade-a {
    background: var(--grade-a, var(--info-score-a));
    box-shadow: 0 2px 10px var(--grade-a-bg, rgba(45, 139, 70, 0.13));
}

.grade-b {
    background: var(--grade-b, var(--info-score-b));
    color: #1a1a1a;
    box-shadow: 0 2px 10px var(--grade-b-bg, rgba(107, 173, 75, 0.13));
}

.grade-c {
    background: var(--grade-c, var(--info-score-c));
    color: #1a1a1a;
    box-shadow: 0 2px 10px var(--grade-c-bg, rgba(212, 160, 23, 0.13));
}

.grade-d {
    background: var(--grade-d, var(--info-score-d));
    box-shadow: 0 2px 10px var(--grade-d-bg, rgba(212, 101, 42, 0.13));
}

.grade-e {
    background: var(--grade-e, var(--info-score-e));
    box-shadow: 0 2px 10px var(--grade-e-bg, rgba(196, 43, 43, 0.13));
}

.grade-n {
    background: rgba(107, 100, 89, 0.3);
    color: var(--color-text-dim, #6B6459);
    font-size: 1rem;
    font-style: italic;
}

.grade-pending {
    background: rgba(61, 122, 79, 0.12);
    color: var(--color-text-dim, #6B6459);
}

/* ==========================================================================
   4. Inline text color classes
   ========================================================================== */

.grade-text-a, .grade-a-text { color: var(--info-score-a); }
.grade-text-b, .grade-b-text { color: var(--info-score-b); }
.grade-text-c, .grade-c-text { color: var(--info-score-c); }
.grade-text-d, .grade-d-text { color: var(--info-score-d); }
.grade-text-e, .grade-e-text { color: var(--info-score-e); }
.grade-text-n, .grade-n-text { color: var(--info-score-n); }

/* ==========================================================================
   5. Background classes (.grade-bg-a ... .grade-bg-n)
   ========================================================================== */

.grade-bg-a { background: var(--info-score-a); }
.grade-bg-b { background: var(--info-score-b); }
.grade-bg-c { background: var(--info-score-c); }
.grade-bg-d { background: var(--info-score-d); }
.grade-bg-e { background: var(--info-score-e); }
.grade-bg-n { background: var(--info-score-n); }

/* ==========================================================================
   6. Distribution bar fills
   ========================================================================== */

.grade-dist-fill-a { background: var(--info-score-a); }
.grade-dist-fill-b { background: var(--info-score-b); }
.grade-dist-fill-c { background: var(--info-score-c); }
.grade-dist-fill-d { background: var(--info-score-d); }
.grade-dist-fill-e { background: var(--info-score-e); }
.grade-dist-fill-n { background: var(--info-score-n); }