/* Local extension: the shared set has no currency-prefixed price field synced
   to a native range, no proportional fee-ladder rows (status bars carry
   status icons and percent values, not dollar fees), and the card has no
   internal flow. Shared components supply every appearance value; local
   rules cover arrangement, the prefix adornment, block-owned range progress,
   ladder bar geometry, the low-commission row role, the hero figure and the
   live-update highlight. Every selector is rooted at the block class.
   Source for the range background: components.css .clvr-slider__input. */

/* The shared card has no internal flow; stack its sections on a shared gap.
   The card is the query context so the block reflows to its embedded width. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__card {
    container-type: inline-size;
    display: grid;
    gap: var(--clvr-space-6);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__intro {
    display: grid;
    gap: var(--clvr-space-2);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__intro p,
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__hero,
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__subnote,
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__takeaway,
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__methodology p {
    margin: 0;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__intro-text {
    color: var(--clvr-color-text-secondary);
}

/* Currency adornment inside the shared control; the input only widens its
   start inset to clear the "$". */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__prefix {
    position: absolute;
    inset-inline-start: var(--clvr-space-3);
    color: var(--clvr-color-text-muted);
    pointer-events: none;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__price-input {
    padding-inline-start: var(--clvr-space-6);
    font-variant-numeric: tabular-nums;
}

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

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

/* Native range using the shared slider appearance with block-owned progress. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__range {
    background-image: linear-gradient(
        90deg,
        var(--clvr-color-primary) var(--commission-rate-ladder-v2-block-progress, 0%),
        var(--clvr-color-surface-muted) var(--commission-rate-ladder-v2-block-progress, 0%)
    );
}

/* Hero: the quoted fee (shared metric value) with its caption after it, in
   DOM and visual order so it reads as one sentence. Boxed like the takeaway. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__hero {
    display: grid;
    gap: var(--clvr-space-1);
    padding: var(--clvr-space-4);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-surface-muted);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__hero-number {
    margin-top: 0;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__hero-caption {
    color: var(--clvr-color-text-secondary);
}

/* Ladder rows: one divided list inside the card. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__ladder {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row {
    display: grid;
    gap: var(--clvr-space-2);
    margin: 0;
    padding: var(--clvr-space-4) 0;
    border-top: 1px solid var(--clvr-color-border-subtle);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row:first-child {
    padding-top: 0;
    border-top: 0;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row:last-child {
    padding-bottom: 0;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--clvr-space-1) var(--clvr-space-4);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-name {
    min-width: 0;
    color: var(--clvr-color-text);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-label {
    font-weight: var(--clvr-font-heading-weight);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__nowrap {
    white-space: nowrap;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__dot {
    margin-inline: var(--clvr-space-2);
    color: var(--clvr-color-text-muted);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-rate {
    color: var(--clvr-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-amount {
    color: var(--clvr-color-text);
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
    font-variant-numeric: tabular-nums;
}

/* Fee bars: data-driven widths (inline %) on a shared muted track. Quoted and
   average bars stay neutral; the low-commission row uses primary and its
   amount is paired with the row label, so color is never the only cue. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__bar-track {
    display: block;
    height: var(--clvr-space-2);
    overflow: hidden;
    border-radius: var(--clvr-radius-pill);
    background: var(--clvr-color-surface-muted);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--clvr-color-text-muted);
    transition: width var(--clvr-duration-normal) ease;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__bar--low {
    background: var(--clvr-color-primary);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-amount--low {
    color: var(--clvr-color-primary);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__subnote {
    color: var(--clvr-color-text-secondary);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__takeaway {
    padding: var(--clvr-space-4);
    border-radius: var(--clvr-radius-md);
    background: var(--clvr-color-surface-muted);
    color: var(--clvr-color-text);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__takeaway-figure {
    color: var(--clvr-color-success-text);
    font-weight: var(--clvr-font-heading-weight);
}

/* CTA and the quieter reset action share one row when there is room. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--clvr-space-3) var(--clvr-space-6);
}

/* Reset is a low-emphasis text action so it never competes with the CTA. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__reset {
    padding: var(--clvr-space-1) 0;
    border: 0;
    background: none;
    color: var(--clvr-color-link);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__reset:hover {
    color: var(--clvr-color-link-hover);
}

.commission-rate-ladder-v2-block .commission-rate-ladder-v2__reset:focus-visible {
    outline: 2px solid var(--clvr-color-primary);
    outline-offset: 2px;
    border-radius: var(--clvr-radius-sm);
}

/* Live-update highlight: visible for ~1.2s (JS removes the class; JS skips
   it under reduced motion). An outline tints around the figure without
   shifting layout. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__hero-number,
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-amount--low {
    justify-self: start;
    align-self: flex-start;
    border-radius: var(--clvr-radius-sm);
    transition: background-color var(--clvr-duration-normal) ease, outline-color var(--clvr-duration-normal) ease;
}

.commission-rate-ladder-v2-block .is-updated {
    background-color: var(--clvr-color-label-positive-bg);
    outline: var(--clvr-space-1) solid var(--clvr-color-label-positive-bg);
    transition: none;
}

/* Host-theme conflict: LWC's content link colour reaches the methodology
   links at low contrast with no underline. */
.commission-rate-ladder-v2-block .commission-rate-ladder-v2__methodology a {
    color: var(--clvr-color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .commission-rate-ladder-v2-block .commission-rate-ladder-v2__bar,
    .commission-rate-ladder-v2-block .commission-rate-ladder-v2__hero-number,
    .commission-rate-ladder-v2-block .commission-rate-ladder-v2__row-amount--low {
        transition: none;
    }
}