/* ── Rainfall Probability Badges ────────────────────────────────────────── */
.rn-badge {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: default;
    transition: filter 0.15s ease;
}

.rn-badge:hover {
    filter: brightness(1.15);
}

/* < 0.1 mm — Dry */
.rn-none {
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    /* Slate 400 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 0.1–0.5 mm — Drizzle */
.rn-drizzle {
    background: rgba(239, 243, 255, 0.15);
    color: #eff3ff;
    /* Ice Blue */
    border: 1px solid rgba(239, 243, 255, 0.4);
}

/* 0.6–1.5 mm — Light */
.rn-light {
    background: rgba(189, 215, 238, 0.25);
    color: #bdd7ee;
    /* Light Blue */
    border: 1px solid rgba(189, 215, 238, 0.5);
}

/* 1.6–4.0 mm — Moderate */
.rn-moderate {
    background: rgba(107, 174, 214, 0.35);
    color: #6baed6;
    /* Sky/Teal Blue */
    border: 1px solid rgba(107, 174, 214, 0.6);
}

/* 4.1–8.0 mm — Heavy */
.rn-heavy {
    background: rgba(49, 130, 189, 0.4);
    color: #3182bd;
    /* Medium Blue */
    border: 1px solid rgba(49, 130, 189, 0.7);
    box-shadow: 0 0 8px rgba(49, 130, 189, 0.4);
}

/* > 8.0 mm — Torrential */
.rn-torrential {
    background: rgba(8, 81, 156, 0.5);
    color: #60a5fa;
    /* Vibrant Blue for readable text on dark background */
    border: 1px solid rgba(8, 81, 156, 0.9);
    box-shadow: 0 0 12px rgba(8, 81, 156, 0.6);
    font-weight: 600;
    /* Subtle text emphasis for extreme alerts */
}