/* Local extension: layout only. Chart.js (shared clever-design-system-charts
   handle) draws each density curve, its band, gridlines, baseline and axis on a
   canvas. This file owns the row stack, the fixed plot heights (the last row adds
   room for the shared axis labels), the legend swatch, and caption/source
   spacing. Card surface and all typography come from the shared bundle; this
   file sets no type sizes or weights. Every selector stays inside
   .ibuyer-markup-distribution-block. */

.ibuyer-markup-distribution-block {
    container-type: inline-size;
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution {
    display: grid;
    gap: var(--clvr-space-6);
    min-width: 0;
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__figure {
    display: grid;
    gap: var(--clvr-space-4);
    margin: 0;
    min-width: 0;
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__legend {
    display: flex;
    align-items: center;
    gap: var(--clvr-space-2);
    margin: 0;
    color: var(--clvr-color-text-muted);
    font-family: var(--clvr-font-body);
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__swatch {
    width: 1rem;
    height: 0.75rem;
    flex: none;
    border-radius: var(--clvr-radius-sm);
    background: color-mix(in srgb, var(--clvr-color-chart-series-1) 30%, transparent);
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__row {
    display: grid;
    gap: var(--clvr-space-1);
    min-width: 0;
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--clvr-space-1) var(--clvr-space-3);
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__company {
    margin: 0;
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__count {
    margin-left: var(--clvr-space-1);
    color: var(--clvr-color-text-muted);
    font-family: var(--clvr-font-body);
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__summary {
    color: var(--clvr-color-text-secondary);
    font-family: var(--clvr-font-body);
    font-variant-numeric: tabular-nums;
}

/* Fixed plot height: the curve is read by its shape, so the row must not
   shrink with its content. The last row also holds the axis labels (1.75rem,
   matched in script-view.js) so every plot area stays the same height. */
.ibuyer-markup-distribution-block .ibuyer-markup-distribution__plot {
    position: relative;
    height: 6.75rem;
    min-width: 0;
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__plot.has-axis {
    height: calc(6.75rem + 1.75rem);
}

.ibuyer-markup-distribution-block .ibuyer-markup-distribution__caption {
    margin: 0;
    color: var(--clvr-color-text-secondary);
    font-family: var(--clvr-font-body);
    text-align: center;
}

/* Host themes style bare paragraphs; keep the small print on the brand body face. */
.ibuyer-markup-distribution-block .ibuyer-markup-distribution__source {
    margin: 0;
    color: var(--clvr-color-text-muted);
    font-family: var(--clvr-font-body);
    line-height: 1.5;
    text-align: center;
}

@container (max-width: 30rem) {
    .ibuyer-markup-distribution-block .ibuyer-markup-distribution__plot {
        height: 5.5rem;
    }

    .ibuyer-markup-distribution-block .ibuyer-markup-distribution__plot.has-axis {
        height: calc(5.5rem + 1.75rem);
    }
}