/* ─────────────────────────────────────────────────────────────────────────────
   Segmented control — pick one option from a small adjacent set, shown as pills
   in a shared track. Used by the cashflow granularity / chart-view toggles and
   the forecast modal's likelihood switch (ADR-018).

   Mark the chosen option with .is-active. In a form-post variant the current
   choice is also disabled so it renders inert rather than re-posting itself.
   ───────────────────────────────────────────────────────────────────────────── */
.segmented {
    display: inline-flex;
    gap: var(--spacing-05);
    padding: var(--spacing-05);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}
.segmented__btn {
    border: 0;
    background: transparent;
    padding: var(--spacing-1-5) var(--spacing-4);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.segmented__btn:hover:not(:disabled) { color: var(--color-text); }
.segmented__btn.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
}
.segmented__btn:disabled { cursor: default; }

/* Compact variant — small enough to sit inside a heading line (e.g. the
   forecast modal head), styled to read like the app's uppercase tags. */
.segmented--xs .segmented__btn {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}