/*
 * LWC Commission Rate Calculator (V2): block-local layout only. The shared
 * set has no price field synced to a native range, no $/% field pair and no
 * internal card flow, so this file arranges shared components (card, fields,
 * metric, table, buttons) and owns the range's progress fill. No token is
 * declared and no font is loaded. Every selector is rooted at the block class.
 */

/* Layout follows the block's own width (container queries). */
.lwc-commission-rate-calculator-v2-block {
    container-type: inline-size;
    container-name: lwc-commission-rate-calculator-v2-block-root;
}

/* One card, two sections; parent gaps carry the rhythm. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__card {
    display: grid;
    gap: var(--clvr-space-8);
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__section {
    display: grid;
    gap: var(--clvr-space-4);
    min-width: 0;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--clvr-space-3);
}

/* Heading with its calculator icon, as the other v2 calculators. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__heading {
    display: flex;
    align-items: center;
    gap: var(--clvr-space-3);
    margin: 0;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__head-icon {
    flex: none;
    color: var(--clvr-color-primary);
}

/* Fields: one column on phones; price beside state, then the two rates, from 34rem. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--clvr-space-4);
}

@container lwc-commission-rate-calculator-v2-block-root (min-width: 34rem) {
    .lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* Host theme: Bricks sets label { margin-bottom: 5px }; clvr-field__label sets no margin. */
.lwc-commission-rate-calculator-v2-block .clvr-field__label {
    margin: 0;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__scope {
    margin: 0;
}

/* A track and its two ends are one unit, so they sit tighter than the field gap. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__track {
    display: grid;
    gap: var(--clvr-space-1);
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__ends {
    display: flex;
    justify-content: space-between;
}

/* Native range on the shared slider appearance (components.css
   .clvr-slider__input: border-coloured 0.375rem track) with block-owned
   progress, since the shared fill variable is library-private. Firefox
   draws its own track and progress. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__range {
    width: 100%;
    background: linear-gradient(
        90deg,
        var(--clvr-color-primary) var(--lwc-commission-rate-calculator-v2-block-progress, 0%),
        var(--clvr-color-border) var(--lwc-commission-rate-calculator-v2-block-progress, 0%)
    ) center / 100% 0.375rem no-repeat;
}

/* Commission field: $ and % side by side, wrapping at large text sizes (WCAG 1.4.4/1.4.10). */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__ratebox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clvr-space-2);
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__ratebox > .clvr-control {
    flex: 1 1 7rem;
    min-width: 0;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__ratepct {
    display: flex;
    flex: 0 1 8rem;
    min-width: 0;
    align-items: center;
    gap: var(--clvr-space-2);
}

/* clvr-tooltip doesn't set these, so an uppercase metric label would leak in. */
.lwc-commission-rate-calculator-v2-block .clvr-tooltip__content {
    text-transform: none;
    letter-spacing: normal;
}

/* Totals: stacked on phones, side by side from 34rem. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__totals {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--clvr-space-4);
}

@container lwc-commission-rate-calculator-v2-block-root (min-width: 34rem) {
    .lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__totals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Name, amount, then the "% of price" line; the card padding and this gap are the only spacing. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__total {
    display: grid;
    align-content: start;
    gap: var(--clvr-space-2);
    margin: 0;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__total > * {
    margin: 0;
}

/* The Clever card carries the recommendation: brand tint plus the selected border. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__total--clever {
    background: var(--clvr-color-secondary);
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__amount {
    color: var(--clvr-color-primary);
}

/* Breakdown frame: .clvr-table-wrap's border and radius without its
   overflow, which would clip tooltips. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__breakdown {
    box-sizing: border-box;
    width: 100%;
    padding: var(--clvr-space-2);
    border: 1px solid var(--clvr-color-border-subtle);
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-surface);
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__table {
    width: 100%;
    min-width: 0;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__caption {
    padding: var(--clvr-space-2) var(--clvr-space-3);
    caption-side: top;
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    text-align: start;
}

/* Header: plain captions over the columns; only the Clever column is tinted. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__table thead th:not(.lwc-commission-rate-calculator-v2__clever) {
    background: transparent;
}

/* Column headings may wrap on narrow cards (clvr-table__number is nowrap). */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__table thead th.clvr-table__number {
    white-space: normal;
    vertical-align: bottom;
}

/* Row headers are line items, not column captions: no uppercase caption look. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__table th[scope="row"] {
    background: transparent;
    color: var(--clvr-color-text);
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__table td.lwc-commission-rate-calculator-v2__clever {
    background: var(--clvr-color-secondary);
}

/* Total row: a tinted closing row in the heading weight. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__table tr.lwc-commission-rate-calculator-v2__row--total > * {
    border-bottom: 0;
    background: var(--clvr-color-surface-panel);
    color: var(--clvr-color-text);
    font-weight: var(--clvr-font-heading-weight);
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__table tr.lwc-commission-rate-calculator-v2__row--total > td.lwc-commission-rate-calculator-v2__clever {
    background: var(--clvr-color-secondary);
    color: var(--clvr-color-primary);
}

/* Conversion band: savings claim beside the CTA on wide cards, stacked on narrow ones. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__outcome {
    display: grid;
    gap: var(--clvr-space-4);
    align-items: center;
    padding: var(--clvr-space-4);
    border-radius: var(--clvr-radius-lg);
    background: var(--clvr-color-secondary);
}

@container lwc-commission-rate-calculator-v2-block-root (min-width: 44rem) {
    .lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__outcome {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__claim {
    display: grid;
    gap: var(--clvr-space-1);
}

/* The savings figure borrows the money-flow headline type; inside the tinted
   band it drops that component's card frame. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__savings {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Host theme: Bricks gives figcaption a 0.9em block margin. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__savings figcaption {
    margin: 0;
    justify-items: start;
    text-align: start;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__savings figcaption strong {
    color: var(--clvr-color-primary);
}

/* [hidden] must win over the grid display above. */
.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__savings[hidden] {
    display: none;
}

.lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__sentence {
    margin: 0;
    color: var(--clvr-color-text);
    text-wrap: pretty;
}

/* Phones: a tighter band and a full-width CTA. */
@container lwc-commission-rate-calculator-v2-block-root (max-width: 37.999rem) {
    .lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__outcome {
        padding: var(--clvr-space-4);
    }

    .lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__outcome .clvr-button {
        box-sizing: border-box;
        width: 100%;
        justify-content: center;
    }

    /* No frame inside the card on phones; the table takes the card's width. */
    .lwc-commission-rate-calculator-v2-block .lwc-commission-rate-calculator-v2__breakdown {
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .lwc-commission-rate-calculator-v2-block .clvr-table.lwc-commission-rate-calculator-v2__table th,
    .lwc-commission-rate-calculator-v2-block .clvr-table.lwc-commission-rate-calculator-v2__table td {
        padding-inline: var(--clvr-space-2);
    }
}