/* Average Commission Trends — block-local CSS.
   Gap: layout only. Chart.js (shared clever-design-system-charts handle) draws
   the chart on a canvas inside the shared clvr-chart-card__plot; this file sets
   the card spacing, tab typography, the plot height at each width, legend
   swatches and picker spacing. Tabs, card, legend, picker and data table come
   from shared classes.
   Series colors: primary = chart series 1; comparison = secondary text. */

.clever-avg-commission-trends-block {
    container-type: inline-size;
    width: 100%;
}

.clever-avg-commission-trends-block .cact-card {
    position: relative;
    padding: var(--clvr-space-6);
    border-radius: var(--clvr-radius-lg);
    box-shadow: var(--clvr-shadow-sm);
}

/* Tabs: shared clvr-tab at the block's base text size (as on the average
   commission page), grey until selected. Short labels replace long ones on
   narrow cards. */
.clever-avg-commission-trends-block .cact-tabs {
    margin-bottom: var(--clvr-space-6);
}

.clever-avg-commission-trends-block .cact-tab {
    color: var(--clvr-color-text-secondary);
    font-size: inherit;
    font-weight: var(--clvr-font-heading-weight);
}

.clever-avg-commission-trends-block .cact-tab[aria-selected="true"] {
    color: var(--clvr-color-text);
}

.clever-avg-commission-trends-block .cact-tab__short {
    display: none;
}

/* Plot height for the canvas; Chart.js fills the box responsively. */
.clever-avg-commission-trends-block .cact-plot {
    height: 20rem;
}

@container (max-width: 560px) {
    .clever-avg-commission-trends-block .cact-tab__long {
        display: none;
    }

    .clever-avg-commission-trends-block .cact-tab__short {
        display: inline;
    }

    .clever-avg-commission-trends-block .cact-plot {
        height: 17rem;
    }
}

/* Legend: shared clvr-trend-legend at base text size, centered under the chart. */
.clever-avg-commission-trends-block .cact-legend {
    justify-content: center;
    gap: var(--clvr-space-6);
    margin-top: var(--clvr-space-4);
    color: var(--clvr-color-text-secondary);
    font-size: inherit;
}

.clever-avg-commission-trends-block .cact-swatch {
    display: inline-block;
    width: 18px;
    height: 0.22rem;
    border-radius: var(--clvr-radius-sm);
}

.clever-avg-commission-trends-block .cact-swatch--primary {
    background: var(--clvr-color-chart-series-1);
}

.clever-avg-commission-trends-block .cact-swatch--compare {
    background: var(--clvr-color-text-secondary);
}

/* State picker: the shared clvr-combobox supplies the field, label, list and
   focus styling; only its spacing below the legend is local. */
.clever-avg-commission-trends-block .cact-pick {
    margin-top: var(--clvr-space-6);
}

.clever-avg-commission-trends-block .cact-data {
    margin-top: var(--clvr-space-6);
}

.clever-avg-commission-trends-block .cact-cap {
    text-align: left;
}