/* Platform-wide segmented control. `.global-segmented` / `.global-segmented__btn` is the
   canonical toggle for switching a view or mode between 2–4 mutually-exclusive
   options (My Pay Deposits/Bills, availability month/week, a list/board switch).

   The idiom is a recessed pill track with one RAISED white panel marking the
   live option — emphasis comes from the lift, not a colored fill, so the active
   segment reads as on-brand on any tenant (no indigo). This is deliberately
   distinct from `.global-tabs` (components/page-tabs.css): tabs are the underline
   strip for in-page navigation; a segmented control flips one setting where
   exactly one option is always active. */

/* ── The recessed track ── inline-flex so it hugs its buttons; the 3px padding
   is the moat the raised active panel sits inside. */
.global-segmented {
    display: inline-flex;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-md);
}

/* --equal: every segment the same width (the widest label wins) so a two-option
   toggle reads as one balanced control instead of two ragged buttons. */
.global-segmented--equal {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

/* --block: equal segments spanning the whole column, for a switch that sits in
   a form between full-width pickers (the opportunity drawer's Virtual / In
   Person and Pick a date / Relative to event). Written after --equal so the
   pair resolves to a block grid. */
.global-segmented--block {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: 100%;
}

/* --field: a switch in a form row stands as tall as the inputs beside it (the
   track's two moat edges plus each segment make one --control-h-base) and
   speaks at body size, so it reads as an answer field, not a toolbar chip. */
.global-segmented--field .global-segmented__btn {
    min-height: calc(var(--control-h-base) - 2 * var(--spacing-2xs));
    font-size: var(--font-size-md);
}

.global-segmented__btn {
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-smd);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xsm);
    transition: color var(--transition-fast), background var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* The option you're NOT in brightens on hover so it reads as clickable. */
.global-segmented__btn:hover {
    color: var(--color-text);
}

/* The live option: a raised white panel with action-ink text. The active
   fill is the neutral card surface — the emphasis is the lift, not a hue — so
   it reads identically for every tenant. Defined after :hover so it wins when
   the active segment is also hovered. */
.global-segmented__btn--active,
.global-segmented__btn.is-active {
    background: var(--color-card-bg);
    color: var(--color-action);
    box-shadow: var(--shadow-sm);
}

.global-segmented__btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Seated in a tab strip's actions cluster ──
   `.global-tab-card__actions` is the row a tab card hands its page-level
   controls, so a segmented control there lands directly beside `.global-tab`
   labels. Against that surface --color-surface-subtle measured 1.08:1 — near
   enough to invisible that the switch read as two loose words with one of them
   boxed — and the muted label 2.41:1. A step down the grey ramp gives the
   recess a visible edge without turning it into a second filled control, and
   takes the label to 7.21:1.

   Scoping on the ancestor rather than the component keeps the canon (the base
   rules above) untouched: every segmented control NOT in a tab strip paints
   exactly as it did. The scheduling page's two tabs were carrying identical
   copies of these three declarations in their own feature sheets before this
   rule existed; both are the same shipped strip, so they are one rule.
   Widening the base greys instead is a design review of every page that mounts
   either component (ADR-125/ADR-131), which this is not. */
.global-tab-card__actions .global-segmented {
    height: var(--control-h-base);
    background: var(--color-grey-200);
}

/* The live segment keeps its brand colour — without the :not() this would take
   the emphasis off the option the reader is standing in. */
.global-tab-card__actions .global-segmented__btn:not(.is-active) {
    color: var(--color-grey-700);
}

/* ── Beside a compact picker ──
   The Sort rows (the saved-view drawers' Sort by, the toolbar's Sort menu) put a
   direction pair — "A → Z" / "Z → A", "Most recent" / "Oldest" — right under or
   beside the site combobox, and the drawer's Row height trio stands in the same
   column. A recessed grey track there read as a different kind of control from
   the pill it sits with (Nick, 09-20). `--picker` keeps the segmented behaviour
   and wears the picker's skin instead: no track, two (or three) bordered pills
   at the control height, the live one inked and tinted. */
.global-segmented--picker {
    padding: 0;
    gap: var(--spacing-xs);
    background: none;
}
.global-segmented--picker .global-segmented__btn {
    flex: 1 1 0;
    min-height: var(--filter-ctrl-h, var(--control-h-base));
    padding: 0 var(--spacing-smd);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-body);
}
.global-segmented--picker .global-segmented__btn:hover {
    background: var(--color-grey-50);
    border-color: var(--color-text-muted);
    color: var(--color-text);
}
.global-segmented--picker .global-segmented__btn--active,
.global-segmented--picker .global-segmented__btn.is-active {
    background: var(--color-action-tint);
    border-color: var(--color-action);
    color: var(--color-action);
    box-shadow: none;
}