/* Trend header and controls responsive layout */
.trend-header { gap: .5rem; }

.trend-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

/* On small screens: title on top, controls wrap nicely in two columns */
@media (max-width: 576px) {
    .trend-controls { width: 100%; }
    .trend-controls select {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0;
    }
}

/* Very narrow devices: stack controls one per row */
@media (max-width: 360px) {
    .trend-controls select { flex: 1 1 100%; }
}

/* Optional: chart container sizing (keeps chart responsive) */
.trend-chart-wrap { position: relative; width: 100%; height: 260px; }
@media (max-width: 576px) { .trend-chart-wrap { height: 200px; } }
#trendChart { display: block; max-width: 100%; }

.result-year-badge {
    font-size: .95rem;
    font-weight: 600;
    padding: .45rem .75rem;
    letter-spacing: .5px;
    border: 1px solid #ffc107;
    box-shadow: 0 0 0 2px rgba(255,193,7,.15);
}

@media (max-width:575.98px) {
    .result-year-badge {
        font-size: .85rem;
        padding: .35rem .6rem;
    }
}