/* ---------------------------------------------------------------
   Map / Historical pill switch.
   Single source of truth: this file is copied to the repo-root assets/
   as ihp_toggle.css so app_members2.py renders the control identically.
   Deliberately scoped to .view-toggle only — no body/global rules, which
   would leak into every app2 page when the map is embedded in /members/.
   --------------------------------------------------------------- */

.view-toggle {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-width: 320px;
    padding: 4px;
    background: #C1CEE8;
    border: 2px solid #424D9E;
    border-radius: 999px;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #343057;
    box-sizing: border-box;
}

/* Dash may wrap each option in .dash-radioitem, or emit a bare label.
   Both shapes need to fill their grid cell. */
.view-toggle .dash-radioitem {
    display: flex;
    min-width: 0;
    height: 100%;
}

/* The radio dot itself is never shown — the filled segment is the state. */
.view-toggle-input,
.view-toggle input[type="radio"] {
    display: none !important;
}

.view-toggle-label,
.view-toggle label {
    display: flex;
    align-items: center;      /* vertical centring; was flex-start + top padding,
                                 which is what pushed the text off-centre */
    justify-content: center;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border-radius: 999px;
    cursor: pointer;
    box-sizing: border-box;
    color: #343057;
    background: transparent;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    transition: background-color 150ms ease, color 150ms ease;
}

/* Selected segment. Three selectors so it works whether Dash nests the input
   inside the label or emits it as a preceding sibling. */
.view-toggle-label:has(.view-toggle-input:checked),
.view-toggle label:has(input[type="radio"]:checked),
.view-toggle input[type="radio"]:checked + label {
    background: #72A26E;
    color: #ffffff;
    box-shadow: 0 1px 5px rgba(52, 48, 87, 0.18);
}