/* Explain: Base styles for layout elements and helper classes. */
.dashboard-bars span {
    display: block;
    height: 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 18%, transparent);
}

.dashboard-bars span:nth-child(2) {
    width: 76%;
}

.dashboard-bars span:nth-child(3) {
    width: 58%;
}

.dashboard-bars span:nth-child(4) {
    width: 86%;
}

@media (max-width: 640px) {
    .hero-heading {
        text-wrap: balance;
    }
}

.news-notification-badge {
    display: none;
    position: absolute;
    right: -0.375rem;
    top: -0.375rem;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.news-notification-badge.is-on {
    display: flex !important;
}