/*
 * Rates by Market — local gaps only:
 * 1. Header row: the shared table uppercases tiny headers; the LWC style guide
 *    wants sentence-case headers, so this block's headers use body type.
 * 2. Tooltip icons use the tooltip README's approved smaller 14px glyph.
 * 3. State finder sits inline with its label, as in the LWC state-table example.
 * 4. Equal-width columns (Katy, 2026-10-06), so the value column does not
 *    drift right of center.
 * 5. Cash Back toggletip: the shared tooltip takes plain text only, and these
 *    notes need a link, so a local disclosure reuses the tooltip's classes.
 */
.rates-by-market-block .rates-by-market-block__table {
    display: grid;
    gap: var(--clvr-space-3);
}

.rates-by-market-block.clvr-scope .clvr-table {
    min-width: 0;
    table-layout: fixed;
}

.rates-by-market-block.clvr-scope .clvr-table th {
    color: var(--clvr-color-text);
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.rates-by-market-block .clvr-tooltip__trigger .clvr-icon {
    margin-inline: calc(-0.5 * var(--clvr-space-1));
    padding: calc(1.25 * var(--clvr-space-1));
}

.rates-by-market-block .rates-by-market-block__finder .clvr-field {
    /* width-exception: Katy asked 2026-10-02 that the state finder not span the table, matching her example's 18rem select. */
    grid-template-columns: auto minmax(0, 18rem);
    justify-content: start;
    align-items: center;
    gap: var(--clvr-space-3);
}

/* Popovers open upward. A scrolling wrap clips them, worst when the finder
   leaves one row, so the table fits narrow screens (as .clvr-chart-data
   tables do) and the wrap never needs to scroll. */
.rates-by-market-block.clvr-scope .clvr-table-wrap {
    overflow: visible;
}

.rates-by-market-block .clvr-table thead th:first-child {
    border-top-left-radius: var(--clvr-radius-md);
}

.rates-by-market-block .clvr-table thead th:last-child {
    border-top-right-radius: var(--clvr-radius-md);
}

/* Last-column popovers align to the icon's right edge so they stay on screen. */
.rates-by-market-block.clvr-scope td:last-child .clvr-tooltip__content {
    right: 0;
    left: auto;
    transform: translate(0, var(--clvr-space-1));
}

.rates-by-market-block.clvr-scope td:last-child .clvr-tooltip__content::after {
    right: var(--clvr-space-1);
    left: auto;
    transform: translate(0, -50%) rotate(45deg);
}

.rates-by-market-block.clvr-scope td:last-child clvr-tooltip[data-open="true"] .clvr-tooltip__content,
.rates-by-market-block.clvr-scope td:last-child .rates-by-market-block__tip[data-open="true"] .clvr-tooltip__content {
    transform: translate(0, 0);
}

.rates-by-market-block .rates-by-market-block__tip {
    position: relative;
    display: inline-block;
}

.rates-by-market-block .rates-by-market-block__tip[data-open="true"] .clvr-tooltip__content {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;
}

.rates-by-market-block .rates-by-market-block__tip .clvr-tooltip__content a {
    color: var(--clvr-color-surface);
    text-decoration: underline;
}