/*
 * Home Sale Capital Gains Calculator (Update): block-local layout only.
 * Shared components (card, fields, select, switch, chips, metric, callout,
 * buttons) own every visual value; no token is declared and no font is loaded.
 */

/* Layout follows the block's own width (container queries). */
.lwc-capital-gains-calculator-update-block {
    container-type: inline-size;
    container-name: lwc-capital-gains-calculator-update-block-root;
    display: grid;
    gap: var(--clvr-space-4);
}

/* One card: inputs, then results; side by side once the card is wide. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--clvr-space-8);
}

@container lwc-capital-gains-calculator-update-block-root (min-width: 52rem) {
    .lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__card {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: start;
    }
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__inputs,
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__results {
    display: grid;
    gap: var(--clvr-space-6);
    min-width: 0;
}

/* Field grids: one column on phones, two from 34rem. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--clvr-space-4);
}

@container lwc-capital-gains-calculator-update-block-root (min-width: 34rem) {
    .lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__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-capital-gains-calculator-update-block .clvr-field__label {
    margin: 0;
}

/* The switch sits level with the select's control row. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__switch {
    align-self: end;
}

/* Clear button inside the money field (shared clvr-control--with-action reserves the room). */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__money {
    position: relative;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__clear {
    position: absolute;
    top: 50%;
    right: var(--clvr-space-2);
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--clvr-radius-sm);
    background: none;
    color: var(--clvr-color-text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__clear[hidden] {
    display: none;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__clear:hover {
    color: var(--clvr-color-text);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__clear:focus-visible {
    outline: 2px solid var(--clvr-color-primary);
    outline-offset: 2px;
}

/* Cost chips under a money field: lead line (with the source tooltip), then chips. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__chips {
    display: grid;
    gap: var(--clvr-space-2);
    margin-top: var(--clvr-space-1);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__chips-lead {
    margin: 0;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__chip {
    gap: var(--clvr-space-1);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__chip-amount {
    color: var(--clvr-color-text-muted);
    font-variant-numeric: tabular-nums;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__chip:disabled {
    color: var(--clvr-color-disabled-text);
    cursor: not-allowed;
}

/* Optional tax estimate: a text toggle (the library has no quiet text button); its panel is a quiet card. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advanced {
    display: grid;
    justify-items: start;
    gap: var(--clvr-space-3);
}

/* Toggle left, reset right; they wrap onto two lines if the row gets tight. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    justify-self: stretch;
    gap: var(--clvr-space-3);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advpanel {
    box-sizing: border-box;
    width: 100%;
    background: var(--clvr-color-surface-muted);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advlink {
    display: inline-flex;
    min-height: var(--clvr-field-height);
    align-items: center;
    gap: var(--clvr-space-1);
    margin-inline-start: calc(-1 * var(--clvr-space-2));
    padding: 0 var(--clvr-space-2);
    border: 0;
    border-radius: var(--clvr-radius-md);
    background: none;
    color: var(--clvr-color-link);
    cursor: pointer;
    font: inherit;
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advlink:hover > span {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advlink:focus-visible {
    outline: 2px solid var(--clvr-color-primary);
    outline-offset: 2px;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advlink-icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    transition: transform var(--clvr-duration-fast) ease;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advlink[aria-expanded="true"] .lwc-capital-gains-calculator-update__advlink-icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__advlink-icon {
        transition: none;
    }
}

/*
 * Results: a tinted panel so the answer reads as the card's second half. Only
 * from 34rem: on phones its padding left the breakdown rows too narrow.
 */
@container lwc-capital-gains-calculator-update-block-root (min-width: 34rem) {
    .lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__results {
        box-sizing: border-box;
        padding: var(--clvr-space-6);
        border-radius: var(--clvr-radius-lg);
        background: var(--clvr-color-surface-muted);
    }
}

/*
 * Headline result: the shared money-flow figure, centred and highlighted as the
 * key answer with the brand tint and primary border/figure (as the FSBO
 * calculator's highlighted card). Steve, 2026-10-06.
 */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__headline {
    border-color: var(--clvr-color-primary);
    background: var(--clvr-color-secondary);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__headline figcaption {
    justify-items: center;
    text-align: center;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__headline figcaption strong {
    color: var(--clvr-color-primary);
}

/* Breakdown: label left, amount right, total rows ruled. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__breakdown {
    display: grid;
    margin: 0;
}

/* Two columns so the amount stays right of its label even if the label wraps. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--clvr-space-3);
    padding: var(--clvr-space-2) 0;
    border-bottom: 1px solid var(--clvr-color-border-subtle);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row[hidden] {
    display: none;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row dt,
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row dd {
    margin: 0;
}

/* Rate beside the tax label. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row [data-cgu-out="rateLabel"] {
    color: var(--clvr-color-text-muted);
}

/* Formula under a label (shared muted description text). */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row dt .clvr-field__description {
    display: block;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row dd {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row--total {
    border-bottom: 0;
    font-family: var(--clvr-font-heading);
    font-weight: var(--clvr-font-heading-weight);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__row--total + .lwc-capital-gains-calculator-update__row--total {
    border-top: 1px solid var(--clvr-color-border-subtle);
}

/* Disclaimer under the card: small print via the shared muted description class. */
.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__disclaimer {
    display: grid;
    gap: var(--clvr-space-2);
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__disclaimer p {
    margin: 0;
}

.lwc-capital-gains-calculator-update-block .lwc-capital-gains-calculator-update__disclaimer a {
    color: var(--clvr-color-link);
}