/*
 * demographics-bg.css — Block Groups tool styles.
 *
 * Self-contained .bg-* classes on the REAL geoweave-tokens.css schema
 * (--color-*), following the BV precedent — NOT the stale --gw-* names
 * SC/HF reference (see followups: "SC/HF tool CSS references a token
 * schema that does not exist"). Shared surfaces (.gw-demo-*,
 * .gw-modal-btn, .gw-ic radio groups) come from geoweave-shell.css and
 * are not restyled here.
 *
 * Verified token names (read from geoweave-shell.css usage 2026-08-13):
 * --color-bg-muted, --color-text-tertiary, --color-text-primary,
 * --color-border-strong. Each use carries a literal fallback so a
 * token rename degrades gracefully rather than to transparent.
 *
 * The .gw-tool-* shared-scaffolding extraction (third-consumer trigger
 * now met) is deliberately deferred — owner call, entangled with the
 * SC/HF token-drift cleanup. See Commit 3 followups amendment.
 *
 * Demographics-BG slice Commit 2.
 */

/* ---- Sections ---- */

.bg-section {
    margin-bottom: 16px;
}

.bg-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-tertiary, #6b7280);
    margin-bottom: 8px;
}

/* ---- Step 1: center info + pick-on-map ---- */

.bg-center-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--color-bg-muted, #f3f4f6);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text-primary, #111827);
}

.bg-center-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-center-reset {
    flex: none;
    border: 1px solid var(--color-border-strong, #d1d5db);
    background: #ffffff;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 8px;
    cursor: pointer;
    color: var(--color-text-tertiary, #6b7280);
}

.bg-center-reset:hover {
    color: var(--color-text-primary, #111827);
}

.bg-center-mode {
    margin-bottom: 8px;
}

.bg-map-click-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border-strong, #d1d5db);
    background: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--color-text-primary, #111827);
}

.bg-map-click-btn:hover {
    background: var(--color-bg-muted, #f3f4f6);
}

.bg-map-click-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-tertiary, #6b7280);
}

/* ---- Step 2: Color By row ---- */

.bg-param-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.bg-param-label {
    flex: none;
    width: 80px;
    font-size: 13px;
    color: var(--color-text-primary, #111827);
}

.bg-colorby-select {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--color-border-strong, #d1d5db);
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-text-primary, #111827);
}

/* ---- Step 3: summary, exports, save ---- */

.bg-results-summary {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-text-primary, #111827);
}

.bg-count {
    font-weight: 700;
}

.bg-meta {
    color: var(--color-text-tertiary, #6b7280);
    font-size: 12px;
}

.bg-top-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--color-border-strong, #d1d5db);
    border-radius: 6px;
}

.bg-top-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-bg-muted, #f3f4f6);
    color: var(--color-text-primary, #111827);
}

.bg-top-row:last-child {
    border-bottom: none;
}

.bg-top-row:hover {
    background: var(--color-bg-muted, #f3f4f6);
}

.bg-top-fips {
    flex: 1;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bg-top-val {
    flex: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bg-top-pop {
    flex: none;
    width: 84px;
    text-align: right;
    color: var(--color-text-tertiary, #6b7280);
    font-variant-numeric: tabular-nums;
}

.bg-export-row {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.bg-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border-strong, #d1d5db);
    background: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--color-text-primary, #111827);
}

.bg-export-btn:hover {
    background: var(--color-bg-muted, #f3f4f6);
}

.bg-save-section {
    border-top: 1px solid var(--color-border-strong, #d1d5db);
    padding-top: 12px;
}

.bg-save-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary, #6b7280);
    margin-bottom: 6px;
}

.bg-save-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong, #d1d5db);
    border-radius: 6px;
    background: #ffffff;
    color: var(--color-text-primary, #111827);
}

.bg-status {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-tertiary, #6b7280);
}

/* ---- Map-container legend (torn down with the results preview) ---- */

.bg-legend {
    position: absolute;
    bottom: 28px;
    right: 12px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--color-border-strong, #d1d5db);
    border-radius: 6px;
    padding: 8px 12px;
    min-width: 150px;
    font-size: 12px;
    color: var(--color-text-primary, #111827);
    pointer-events: none;
}

.bg-legend-label {
    font-weight: 600;
    margin-bottom: 4px;
}

.bg-legend-bar {
    height: 10px;
    border-radius: 3px;
    margin-bottom: 4px;
}

.bg-legend-range {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-tertiary, #6b7280);
}

/* ---- D15 click popup (rendered inside the MapLibre popup shell) ---- */

.bg-popup {
    font-size: 12px;
    line-height: 1.5;
    color: #111827;
}

.bg-popup-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 4px;
}