/* ============================================
   Clever Rate Map — Clever Real Estate (LWC) full reskin
   --------------------------------------------
   Authority: navy --clvr-blue (#202E5B) — heading, tooltip surface, region labels.
   Accent / CTA: --clvr-orange (design-system token name; resolves to the brand
   blue #3878FF in the LWC theme) — state hover/focus, links.
   Headings: Rubik (--clvr-font-heading). Body: Inter (--clvr-font).
   Container queries gate layout off the block's own width, not the viewport,
   so the map reads correctly inside the article column at any screen size.
   ============================================ */

.crm-block {
    font-family: var(--clvr-font, "Inter", arial, sans-serif);
    color: var(--clvr-text, #22293b);
    max-width: var(--clvr-content-width, 810px);
    margin: var(--clvr-sp-8, 32px) auto;
    padding: 0 var(--clvr-sp-4, 16px);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    container-type: inline-size;

    /* Single source of truth for the 5-step choropleth scale — consumed by the
       map fills, the DC dot, and the legend so the two can never diverge. Hex
       defaults keep pre-color-mix browsers working; the @supports block below
       upgrades them to accent-tinted color-mix() where it's available. */
    --crm-bucket-1: #e8eeff;
    --crm-bucket-2: #cfdcff;
    --crm-bucket-3: #afc4ff;
    --crm-bucket-4: #8caeff;
    --crm-bucket-5: #6890ff;
}

@supports (color: color-mix(in srgb, red, white)) {
    .crm-block {
        --crm-bucket-1: color-mix(in srgb, var(--clvr-orange, #3878FF) 12%, #ffffff);
        --crm-bucket-2: color-mix(in srgb, var(--clvr-orange, #3878FF) 26%, #ffffff);
        --crm-bucket-3: color-mix(in srgb, var(--clvr-orange, #3878FF) 42%, #ffffff);
        --crm-bucket-4: color-mix(in srgb, var(--clvr-orange, #3878FF) 60%, #ffffff);
        --crm-bucket-5: color-mix(in srgb, var(--clvr-orange, #3878FF) 80%, #ffffff);
    }
}

.crm-block *,
.crm-block *::before,
.crm-block *::after {
    box-sizing: border-box;
}

/* ---------- Header ---------- */
.crm-header {
    margin-bottom: var(--clvr-sp-6, 24px);
}

.crm-heading {
    font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
    font-size: 28px;
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #202E5B);
    margin: 0 0 var(--clvr-sp-3, 12px) 0;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.crm-intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--clvr-text-secondary, #4b698b);
    margin: 0;
    max-width: 680px;
}

.crm-intro a {
    color: var(--clvr-orange, #3878FF);
    text-decoration: none;
    border-bottom: 1px solid rgba(56, 120, 255, 0.3);
    transition: color var(--clvr-transition, 200ms ease),
                border-bottom-color var(--clvr-transition, 200ms ease);
}

.crm-intro a:hover,
.crm-intro a:focus-visible {
    color: var(--clvr-orange-dark, #2F65D6);
    border-bottom-color: var(--clvr-orange-dark, #2F65D6);
}

/* ---------- Map card ---------- */
.crm-map {
    position: relative;
    margin-bottom: var(--clvr-sp-4, 16px);
    padding: var(--clvr-sp-6, 24px);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    background: var(--clvr-bg, #ffffff);
    background:
        radial-gradient(
            ellipse at 50% 0%,
            color-mix(in srgb, var(--clvr-orange, #3878FF) 5%, var(--clvr-bg, #ffffff)) 0%,
            var(--clvr-bg, #ffffff) 65%
        );
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12,20,42,0.08), 0 4px 12px rgba(12,20,42,0.06));
    overflow: hidden;
}

.crm-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
}

/* Default state fill — fallback for any state missing commission data.
   Bucket rules below override this for states that have a rate. color-mix
   keeps the tint tied to the accent token, so swapping themes restyles the
   whole map. */
.crm-svg .state path,
.crm-svg path.al, .crm-svg path.ak, .crm-svg path.az, .crm-svg path.ar,
.crm-svg path.ca, .crm-svg path.co, .crm-svg path.ct, .crm-svg path.de,
.crm-svg path.dc, .crm-svg path.fl, .crm-svg path.ga, .crm-svg path.hi,
.crm-svg path.id, .crm-svg path.il, .crm-svg path.in, .crm-svg path.ia,
.crm-svg path.ks, .crm-svg path.ky, .crm-svg path.la, .crm-svg path.me,
.crm-svg path.md, .crm-svg path.ma, .crm-svg path.mi, .crm-svg path.mn,
.crm-svg path.ms, .crm-svg path.mo, .crm-svg path.mt, .crm-svg path.ne,
.crm-svg path.nv, .crm-svg path.nh, .crm-svg path.nj, .crm-svg path.nm,
.crm-svg path.ny, .crm-svg path.nc, .crm-svg path.nd, .crm-svg path.oh,
.crm-svg path.ok, .crm-svg path.or, .crm-svg path.pa, .crm-svg path.ri,
.crm-svg path.sc, .crm-svg path.sd, .crm-svg path.tn, .crm-svg path.tx,
.crm-svg path.ut, .crm-svg path.vt, .crm-svg path.va, .crm-svg path.wa,
.crm-svg path.wv, .crm-svg path.wi, .crm-svg path.wy {
    fill: #e3edff;
    fill: color-mix(in srgb, var(--clvr-orange, #3878FF) 10%, #ffffff);
    cursor: pointer;
    transition: fill var(--clvr-transition, 200ms ease),
                filter var(--clvr-transition, 200ms ease),
                stroke-width var(--clvr-transition, 200ms ease);
}

/* Choropleth: 5-step sequential scale tinted off --clvr-orange. Listed AFTER
   the default rule so they win on cascade; fills reference the --crm-bucket-*
   tokens defined on .crm-block so the map and legend share one scale. */
.crm-svg a.crm-state-link[data-bucket="1"] path { fill: var(--crm-bucket-1); }
.crm-svg a.crm-state-link[data-bucket="2"] path { fill: var(--crm-bucket-2); }
.crm-svg a.crm-state-link[data-bucket="3"] path { fill: var(--crm-bucket-3); }
.crm-svg a.crm-state-link[data-bucket="4"] path { fill: var(--crm-bucket-4); }
.crm-svg a.crm-state-link[data-bucket="5"] path { fill: var(--crm-bucket-5); }

/* State borders — slightly heavier so darker buckets stay legible against
   neighbors. */
.crm-svg .borders {
    stroke: var(--clvr-bg, #ffffff);
    stroke-width: 1.6;
    fill: none;
}

.crm-svg .separator1 {
    stroke: var(--clvr-border, #bfcbde);
    stroke-width: 1.5;
    fill: none;
}

/* DC indicator circle — intentionally decorative, NOT data-driven: it is
   pinned to the mid-scale bucket-3 tone so the dot reads as part of the
   choropleth surface rather than chrome. It does not track DC's own data
   bucket, so it may not match the fill of the DC path beneath it. */
.crm-svg .dccircle {
    fill: var(--crm-bucket-3);
}

/* Hover + focus — brightness + drop-shadow + navy outline lifts the
   hovered state above any bucket color it might be sitting on. */
.crm-state-link:hover path,
.crm-state-link:focus-visible path {
    filter: brightness(1.08)
            drop-shadow(0 1px 2px rgba(32, 46, 91, 0.30))
            drop-shadow(0 4px 8px rgba(32, 46, 91, 0.18));
    stroke: var(--clvr-blue, #202E5B);
    stroke-width: 1.8;
}

.crm-state-link:focus {
    outline: none;
}

.crm-state-link:focus-visible path {
    stroke: var(--clvr-orange-dark, #2F65D6);
    stroke-width: 2.2;
}

@media (prefers-reduced-motion: reduce) {
    .crm-svg .state path,
    .crm-svg path.al, .crm-svg path.ak, .crm-svg path.az, .crm-svg path.ar,
    .crm-svg path.ca, .crm-svg path.co, .crm-svg path.ct, .crm-svg path.de,
    .crm-svg path.dc, .crm-svg path.fl, .crm-svg path.ga, .crm-svg path.hi,
    .crm-svg path.id, .crm-svg path.il, .crm-svg path.in, .crm-svg path.ia,
    .crm-svg path.ks, .crm-svg path.ky, .crm-svg path.la, .crm-svg path.me,
    .crm-svg path.md, .crm-svg path.ma, .crm-svg path.mi, .crm-svg path.mn,
    .crm-svg path.ms, .crm-svg path.mo, .crm-svg path.mt, .crm-svg path.ne,
    .crm-svg path.nv, .crm-svg path.nh, .crm-svg path.nj, .crm-svg path.nm,
    .crm-svg path.ny, .crm-svg path.nc, .crm-svg path.nd, .crm-svg path.oh,
    .crm-svg path.ok, .crm-svg path.or, .crm-svg path.pa, .crm-svg path.ri,
    .crm-svg path.sc, .crm-svg path.sd, .crm-svg path.tn, .crm-svg path.tx,
    .crm-svg path.ut, .crm-svg path.vt, .crm-svg path.va, .crm-svg path.wa,
    .crm-svg path.wv, .crm-svg path.wi, .crm-svg path.wy {
        transition: none;
    }
}

/* ---------- Hover tooltip ---------- */
.crm-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    background: var(--clvr-blue, #202E5B);
    color: var(--clvr-text-inverse, #ffffff);
    padding: var(--clvr-sp-3, 12px) var(--clvr-sp-4, 16px);
    border-radius: var(--clvr-radius, 8px);
    font-family: var(--clvr-font, "Inter", arial, sans-serif);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: var(--clvr-shadow-lg, 0 4px 8px rgba(12,20,42,0.08), 0 12px 32px rgba(12,20,42,0.10));
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px);
    transition: opacity 120ms ease,
                transform 120ms ease,
                visibility 0s linear 120ms;
    z-index: 50;
    min-width: 180px;
    max-width: 240px;
}

.crm-tooltip.crm-tooltip--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.crm-tt-name {
    font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
    font-size: 15px;
    font-weight: var(--clvr-weight-semibold, 600);
    line-height: 1.2;
    margin-bottom: var(--clvr-sp-1, 4px);
}

.crm-tt-rate {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.crm-tt-rate-label {
    color: rgba(255, 255, 255, 0.7);
}

.crm-tt-rate strong {
    color: var(--clvr-text-inverse, #ffffff);
    font-weight: var(--clvr-weight-bold, 700);
    font-size: 16px;
    font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
    margin-left: 2px;
}

.crm-tt-rate--missing {
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
}

.crm-tt-cta {
    margin-top: var(--clvr-sp-2, 8px);
    padding-top: var(--clvr-sp-2, 8px);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.02em;
}

/* Hide custom tooltip on touch devices — hover doesn't make sense, tap navigates. */
@media (hover: none) {
    .crm-tooltip {
        display: none !important;
    }
}

/* ---------- Choropleth legend ---------- */
.crm-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--clvr-sp-3, 12px);
    margin: 0 0 var(--clvr-sp-6, 24px);
    padding: var(--clvr-sp-3, 12px) var(--clvr-sp-4, 16px);
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    background: var(--clvr-bg, #ffffff);
    font-size: 13px;
    line-height: 1.4;
    color: var(--clvr-text-secondary, #4b698b);
}

.crm-legend__label {
    font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
    font-weight: var(--clvr-weight-semibold, 600);
    color: var(--clvr-blue, #202E5B);
    letter-spacing: 0.01em;
}

.crm-legend__min,
.crm-legend__max {
    font-variant-numeric: tabular-nums;
    color: var(--clvr-text-secondary, #4b698b);
    font-weight: var(--clvr-weight-semibold, 600);
}

.crm-legend__bar {
    display: inline-flex;
    flex: 1 1 160px;
    min-width: 120px;
    height: 12px;
    border-radius: var(--clvr-radius-pill, 9999px);
    overflow: hidden;
    border: 1px solid var(--clvr-border-light, #e2e8f0);
}

.crm-legend__step {
    flex: 1 1 0;
}

.crm-legend__step[data-bucket="1"] { background: var(--crm-bucket-1); }
.crm-legend__step[data-bucket="2"] { background: var(--crm-bucket-2); }
.crm-legend__step[data-bucket="3"] { background: var(--crm-bucket-3); }
.crm-legend__step[data-bucket="4"] { background: var(--crm-bucket-4); }
.crm-legend__step[data-bucket="5"] { background: var(--crm-bucket-5); }

/* ---------- Region table (SEO link list) ---------- */
.crm-list-wrap {
    overflow-x: auto;
    border: 1px solid var(--clvr-border-light, #e2e8f0);
    border-radius: var(--clvr-radius, 8px);
    background: var(--clvr-bg, #ffffff);
    box-shadow: var(--clvr-shadow, 0 1px 3px rgba(12,20,42,0.08), 0 4px 12px rgba(12,20,42,0.06));
}

.crm-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.crm-list thead {
    background: var(--clvr-bg-tint, #F0F5FA);
}

.crm-list th,
.crm-list td {
    padding: var(--clvr-sp-3, 12px) var(--clvr-sp-4, 16px);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--clvr-border-light, #e2e8f0);
    line-height: 1.6;
}

.crm-list thead th {
    font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
    font-weight: var(--clvr-weight-bold, 700);
    color: var(--clvr-blue, #202E5B);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-top: var(--clvr-sp-4, 16px);
    padding-bottom: var(--clvr-sp-4, 16px);
    border-bottom: 1px solid var(--clvr-border-light, #e2e8f0);
}

.crm-list tbody tr:last-child th,
.crm-list tbody tr:last-child td {
    border-bottom: none;
}

.crm-list__region {
    width: 132px;
    font-family: var(--clvr-font-heading, "Rubik", "Inter", sans-serif);
    font-weight: var(--clvr-weight-semibold, 600);
    color: var(--clvr-blue, #202E5B);
    background: var(--clvr-bg-tint, #F0F5FA);
    font-size: 14px;
}

.crm-list__states {
    color: var(--clvr-text, #22293b);
}

.crm-list__states a {
    color: var(--clvr-orange, #3878FF);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    transition: color var(--clvr-transition, 200ms ease),
                border-bottom-color var(--clvr-transition, 200ms ease);
}

.crm-list__states a:hover,
.crm-list__states a:focus-visible {
    color: var(--clvr-orange-dark, #2F65D6);
    border-bottom-color: var(--clvr-orange-dark, #2F65D6);
    outline: none;
}

.crm-list__sep {
    color: var(--clvr-text-light, #bfcbde);
    margin: 0 var(--clvr-sp-1, 4px);
}

/* ---------- Container-query responsive (gates off block width, not viewport) ---------- */
@container (max-width: 640px) {
    .crm-map {
        padding: var(--clvr-sp-4, 16px);
    }
    .crm-heading {
        font-size: 24px;
    }
}

@container (max-width: 480px) {
    .crm-block {
        padding: 0 var(--clvr-sp-3, 12px);
    }
    .crm-heading {
        font-size: 22px;
    }
    .crm-intro {
        font-size: 15px;
    }
    .crm-map {
        padding: var(--clvr-sp-3, 12px);
    }
    .crm-list th,
    .crm-list td {
        padding: var(--clvr-sp-3, 12px);
        font-size: 14px;
    }
    .crm-list__region {
        width: 100px;
        font-size: 13px;
    }
    .crm-list thead th {
        font-size: 11px;
    }
}

/* Viewport fallback for browsers without container-query support, matching the
   pattern used by the other LWC reskins (e.g. commission-takeaways-6pct). */
@supports not (container-type: inline-size) {
    @media (max-width: 640px) {
        .crm-map {
            padding: var(--clvr-sp-4, 16px);
        }
        .crm-heading {
            font-size: 24px;
        }
    }
    @media (max-width: 480px) {
        .crm-block {
            padding: 0 var(--clvr-sp-3, 12px);
        }
        .crm-heading {
            font-size: 22px;
        }
        .crm-intro {
            font-size: 15px;
        }
        .crm-map {
            padding: var(--clvr-sp-3, 12px);
        }
        .crm-list th,
        .crm-list td {
            padding: var(--clvr-sp-3, 12px);
            font-size: 14px;
        }
        .crm-list__region {
            width: 100px;
            font-size: 13px;
        }
        .crm-list thead th {
            font-size: 11px;
        }
    }
}