/* Local extension: this calculator needs four categorical range rows and a
   two-column figure waterfall that the shared patterns do not cover. Shared
   components supply every appearance value below; only arrangement, the
   block-owned range progress, and the sign roles are local.
   Source for the range background: src/styles/components.css .clvr-slider__input;
   Firefox track/progress stay native. */

/* The shared card has no internal flow; stack its fields on a shared gap.
   The container is the query context for the field-head arrangement below,
   so the block reflows to its own embedded width rather than the viewport. */
.cash-offer-calculator-block .cash-offer-calculator__inputs {
    container-type: inline-size;
    display: grid;
    gap: var(--clvr-space-6);
    align-content: start;
}

/* The label line and the current value share one row; the value trails. */
.cash-offer-calculator-block .cash-offer-calculator__field-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--clvr-space-2);
}

/* The tooltip belongs to the label text, so it rides in the same inline flow
   and follows the last word when the label wraps. Shared styling is untouched;
   only the label's outer display changes, which the component does not set. */
.cash-offer-calculator-block .cash-offer-calculator__label-line {
    display: block;
    min-width: 0;
}

.cash-offer-calculator-block .cash-offer-calculator__label-line .clvr-field__label {
    display: inline;
}

/* Placement only; the shared label keeps its own type, radius and colors. */
.cash-offer-calculator-block .cash-offer-calculator__field-head .clvr-label {
    justify-self: end;
}

/* The field icon leads the label text. The shared .clvr-icon already sizes to
   1em and aligns to the text baseline, so only the accent color and the gap
   before the label are local. Primary-tinted decorative icons follow the
   precedent set by .clvr-path__icon. */
.cash-offer-calculator-block .cash-offer-calculator__icon {
    margin-inline-end: var(--clvr-space-2);
    color: var(--clvr-color-primary);
}

/* Narrow embeds: give the label line the full width and drop the value below. */
@container (max-width: 30rem) {
    .cash-offer-calculator-block .cash-offer-calculator__field-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .cash-offer-calculator-block .cash-offer-calculator__field-head .clvr-label {
        justify-self: end;
    }
}

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

/* A track and its two extremes are one unit. They need a tighter gap than the
   field's own grid provides: at the field gap the extremes sat equidistant
   between their own track and the next field's heading, so they read as
   belonging to the wrong control. This matches v1's 4px offset. */
.cash-offer-calculator-block .cash-offer-calculator__track {
    display: grid;
    gap: var(--clvr-space-1);
}

/* The two range extremes sit under the track at its ends. Type and color come
   from the shared .clvr-field__description on the element itself, which is the
   field-level help role these extremes actually play. Layout only here. */
.cash-offer-calculator-block .cash-offer-calculator__ends {
    display: flex;
    justify-content: space-between;
    gap: var(--clvr-space-3);
}

/* Breakdown waterfall: label left, figure right, subtotal rows emphasised. */
.cash-offer-calculator-block .cash-offer-calculator__breakdown {
    display: grid;
    gap: var(--clvr-space-3);
    margin: 0;
}

.cash-offer-calculator-block .cash-offer-calculator__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--clvr-space-4);
    align-items: baseline;
    padding-bottom: var(--clvr-space-3);
    border-bottom: 1px solid var(--clvr-color-border-subtle);
}

.cash-offer-calculator-block .cash-offer-calculator__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Rows inherit the scope's body typography; only role color, numeric alignment
   and wrapping are local. Subtotal emphasis comes from <strong> in the markup
   rather than a local weight. */
.cash-offer-calculator-block .cash-offer-calculator__breakdown dt {
    min-width: 0;
    color: var(--clvr-color-text-muted);
}

.cash-offer-calculator-block .cash-offer-calculator__breakdown dd {
    margin: 0;
    color: var(--clvr-color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cash-offer-calculator-block .cash-offer-calculator__row--total dt {
    color: var(--clvr-color-text);
}

/* Sign roles reuse the shared net/cost data foregrounds; the rendered value
   always carries its own +/- and figure, so color is never the only cue.
   The `dd` qualifier is required to outrank the row rules above, which carry an
   element selector; without it a signed value keeps the default foreground. */
.cash-offer-calculator-block .cash-offer-calculator__breakdown dd.cash-offer-calculator__value--positive {
    color: var(--clvr-color-data-net-text);
}

.cash-offer-calculator-block .cash-offer-calculator__breakdown dd.cash-offer-calculator__value--negative {
    color: var(--clvr-color-data-fees-text);
}