/* Bias Bar Styles */
.bias-container {
    margin: 15px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bias-label-top {
    font-size: 0.85rem;
    color: #b0b0b0;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.bias-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ff4d4d 0%, #4dff4d 50%, #4d4dff 100%);
    position: relative;
    width: 100%;
}

.bias-indicator {
    position: absolute;
    top: -4px;
    width: 4px;
    /* Thin line */
    height: 16px;
    background-color: #ffffff;
    border: 1px solid #000;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.bias-labels-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #888;
}

/* Trending Score Styles */
.trending-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    width: 100%;
    overflow: hidden;
}

.trending-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.trending-hot .trending-fill {
    background: linear-gradient(90deg, #ff9966, #ff5e62);
    box-shadow: 0 0 8px rgba(255, 94, 98, 0.5);
}

.trending-warm .trending-fill {
    background: linear-gradient(90deg, #f2c94c, #f2994a);
}

.trending-cool .trending-fill {
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
}

span.trending-hot {
    color: #ff5e62;
    font-weight: 700;
}

span.trending-warm {
    color: #f2994a;
    font-weight: 600;
}

span.trending-cool {
    color: #bdc3c7;
}

/* 3-column grid for visuals if all present */
@media (min-width: 600px) {
    .card-visuals:has(.trending-container) {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Specific adjustments for cards */
.article-card .bias-container {
    margin: 10px 0;
}

/* Sentiment Bar Styles */
.sentiment-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ea4335 0%, #fbbc04 50%, #34a853 100%);
    position: relative;
    width: 100%;
}

.sentiment-indicator {
    position: absolute;
    top: -4px;
    width: 4px;
    height: 16px;
    background-color: #ffffff;
    border: 1px solid #000;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.sentiment-labels-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.75rem;
    color: #888;
}