/* Shared population-filter control styles.
   Loaded by all 4 HTML pages so the rounded segmented control is identical
   on every tab. Color tokens come from the page's own palette. */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 auto 20px auto;
    padding: 0;
    font-size: 13px;
    flex-wrap: wrap;
    justify-content: center;
}
.control-label { color: var(--text-muted); font-weight: 500; }
.control-hint { color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg);
}
.seg-btn {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 6px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn:hover:not(.active) { background: var(--bg-card); color: var(--text); }
.seg-btn.active {
    background: var(--bg-card);
    color: var(--text);
    font-weight: 600;
}