.rsm-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-sizing: border-box;
}

.rsm-header h2 {
    margin: 0 0 8px;
}

.rsm-header p {
    margin: 0 0 16px;
    color: #52514e;
}

/* --- tabs (USA / Canada / Mexico) --- */
.rsm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
    border-bottom: 1px solid #e5e7eb;
}
.rsm-tab {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    font-size: 0.95em;
    color: #52514e;
    padding: 10px 4px 12px;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}
.rsm-tab + .rsm-tab {
    margin-left: 8px;
}
.rsm-tab:hover {
    color: #174828;
}
.rsm-tab:focus-visible {
    outline: 2px solid #174828;
    outline-offset: 2px;
}
.rsm-tab.is-active {
    color: #174828;
    border-bottom-color: #174828;
}

.rsm-country-panel[hidden] {
    display: none;
}

.rsm-map-shell {
    width: 100%;
    overflow-x: auto;
}

.era-usa-map,
.era-country-map {
    display: block;
    width: 100%;
    height: auto;
    min-width: 640px;
}

/* --- state fills: sequential green ramp by member count --- */
.era-state {
    fill: #e4e8e5;           /* no members on file */
    stroke: #ffffff;
    stroke-width: 1.25;
    cursor: pointer;
    transition: fill 120ms ease, stroke 120ms ease;
}
.era-state[tabindex] {
    outline: none;
}
.era-state[tabindex]:focus-visible {
    outline: 2px solid #174828;
    outline-offset: 2px;
}
.era-state.era-density-1 { fill: #a8dab5; }
.era-state.era-density-2 { fill: #5cae72; }
.era-state.era-density-3 { fill: #2f8a4c; }
.era-state.era-density-4 { fill: #1a5c31; }

.era-state:hover {
    stroke: #174828;
    stroke-width: 2;
    filter: brightness(1.08);
}

.era-state.is-selected {
    stroke: #c9962f;
    stroke-width: 3;
    filter: none;
}

/* tiny NE / Mid-Atlantic states: shape stays visible but the callout below
   is the primary click target, so keep hover feedback but no separate focus ring */
.era-state.era-state-tiny {
    stroke-width: 1;
}

/* --- callouts for the small northeastern states --- */
.era-callout {
    cursor: pointer;
    outline: none;
}
.era-callout-line {
    stroke: #9aa79f;
    stroke-width: 1;
    fill: none;
}
.era-callout-dot {
    fill: #7c8a80;
    stroke: #ffffff;
    stroke-width: 1;
    transition: fill 120ms ease;
}
.era-callout.era-has-density-1 .era-callout-dot { fill: #a8dab5; }
.era-callout.era-has-density-2 .era-callout-dot { fill: #5cae72; }
.era-callout.era-has-density-3 .era-callout-dot { fill: #2f8a4c; }
.era-callout.era-has-density-4 .era-callout-dot { fill: #1a5c31; }

.era-callout-pill {
    fill: #f7f8f7;
    stroke: #d6dbd7;
    stroke-width: 1;
    transition: fill 120ms ease, stroke 120ms ease;
}
.era-callout-text {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12px;
    fill: #24312a;
    pointer-events: none;
}
.era-callout:hover .era-callout-pill {
    fill: #eaf3ec;
    stroke: #174828;
}
.era-callout:focus-visible .era-callout-pill {
    fill: #eaf3ec;
    stroke: #174828;
    stroke-width: 2;
}
.era-callout.is-selected .era-callout-pill {
    stroke: #c9962f;
    stroke-width: 2;
    fill: #fbf1dc;
}
.era-callout.is-selected .era-callout-text {
    font-weight: 700;
}
.era-callout.is-selected .era-callout-dot {
    stroke: #c9962f;
    stroke-width: 2;
}

/* --- legend --- */
.rsm-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 14px 0 4px;
    font-size: 0.85em;
    color: #52514e;
}
.rsm-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rsm-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid rgba(11, 11, 11, 0.1);
}

/* --- status + results, matching the Find a Rebuilder card look --- */
.rsm-status {
    min-height: 24px;
    margin: 16px 0 12px;
    font-weight: 600;
    color: #24312a;
}
.rsm-results {
    display: grid;
    gap: 14px;
}
.rsm-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    background: #f8fafc;
}
.rsm-card h3 {
    margin: 0 0 8px;
}
.rsm-meta {
    margin: 4px 0;
    word-break: break-word;
}

/* --- members with no resolvable address/state --- */
.rsm-no-location {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}
.rsm-no-location h3 {
    margin: 0 0 4px;
    color: #24312a;
}
.rsm-no-location > p {
    margin: 0 0 16px;
    color: #52514e;
    font-size: 0.9em;
}

@media (max-width: 640px) {
    .rsm-wrap {
        padding: 16px;
    }
}