/**
 * Per-state lease pricing pages.
 *
 * Almost everything these pages need already exists in theme.css --
 * .estimate, .data-table, .section-eyebrow, .panel, .chip. This file holds
 * only what is genuinely new: the confidence meter, and the few layout
 * adjustments the estimate block needs when it sits beside a panel rather
 * than alone at the top of a results page.
 */

/* Confidence meter
 *
 * How much of a state's rate came from that state's own listings. Drawn in a
 * single ink on purpose: theme.css reserves blaze for actions and the
 * calculator's own history is a warning about ranking things with semantic
 * colours (six form cards headed primary/success/warning/info). The segments
 * carry the gradation, the label carries the meaning, and neither needs a
 * colour ramp to be read. */
.confidence-meter {
    display: flex;
    gap: 3px;
    margin-bottom: var(--spacing-3);
}

.confidence-segment {
    width: 34px;
    height: 6px;
    border: 1px solid var(--color-contour);
    border-radius: var(--radius-full);
}

.confidence-segment--on {
    background-color: var(--color-contour);
}

.confidence-label {
    font-family: var(--font-family-display);
    font-stretch: var(--font-stretch-display);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: var(--color-gray-900);
    margin: 0;
}

.confidence-sample {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-contour);
    margin: var(--spacing-1) 0 var(--spacing-3);
}

/* The estimate block is written for a results page where it stands alone under
 * the header. Here it shares a row with the confidence panel, so it needs to
 * fill the column height and lose the bottom margin the grid gap replaces. */
.state-estimate {
    height: 100%;
    margin-bottom: 0;
}

/* Comparison line under the headline figure. Sits inside .estimate, so it has
 * to hold its own against a 5rem number without competing with it. */
.state-comparison {
    margin: var(--spacing-5) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-gray-700);
}

.state-comparison strong {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-gray-900);
}

/* Rate riding along inside a state chip on the hub grid. Mono so the column of
 * prices stays scannable as a column even though the chips are ragged. */
.chip-rate {
    font-family: var(--font-family-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-xs);
    color: var(--color-contour);
}

/* Table caption. Bootstrap sends captions to the bottom and greys them out;
 * these explain what the table assumes and are worth reading first. */
.data-table-note {
    caption-side: top;
    padding: 0 0 var(--spacing-3);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    color: var(--color-gray-600);
    text-align: left;
}

/* Multi-column variant of .data-table
 *
 * .data-table sets th[scope="row"] to 38%, which is right for the label/value
 * shape it was written for -- two columns, where the label deserves a third of
 * the width. These pages use the other shape: four columns where the row
 * header is just the first of them. At 38% the acreage column ran wider than
 * the three price columns combined.
 *
 * The frost row-header treatment is kept. It anchors the left edge of a long
 * numeric table, which is the job it was doing on the two-column form too. */
.data-table--columns th[scope="row"] {
    width: auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* Four numeric columns cannot fit a phone. The wrapper scrolls, so give the
     * table a floor wide enough that the columns stay aligned instead of
     * wrapping each price onto two lines. */
    .data-table--columns {
        min-width: 32rem;
    }
}