/* Pill Toggle */

/* The track is a recessed surface with a hairline, not a raw --zf-border slab, so it reads as
   a control rather than a stray grey block next to the bordered inputs it sits beside. 42px
   tall matches an input/dropdown trigger (10px padding + 14px text + 1px border) so a toggle
   placed in a form column lines up with the field next to it. */
.zf-pill-toggle {
    display: inline-flex;
    align-items: center;
    background-color: var(--zf-section-bg, #f3f5fb);
    border: 1px solid var(--zf-border);
    border-radius: 999px;
    padding: 3px;
    height: 42px;
    box-sizing: border-box;
    gap: 2px;
}

/* font-family: inherit is load-bearing — <button> does NOT inherit the page font, so without
   it the labels render in the browser's default UI face while every control around them is
   Montserrat. Weight is 600 in BOTH states on purpose: bolding only the active pill changes
   its text width, which shifted the whole track on every toggle. */
.zf-pill-toggle__pill {
    padding: 0 20px;
    background: transparent;
    color: var(--zf-text-muted);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    border-radius: 999px;
    height: 34px;
    font-weight: 600;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    outline: none;
    white-space: nowrap;
}

.zf-pill-toggle__pill:focus-visible {
    outline: 2px solid var(--zf-primary);
    outline-offset: 2px;
}

.zf-pill-toggle__pill:not(.zf-pill-toggle__pill--active):hover {
    background-color: var(--zf-card-bg);
    color: var(--zf-text-primary);
}

/* The active pill's background-color arrives as an inline style from PillToggleTagHelper
   (left-color / right-color), so only the shared chrome lives here. */
.zf-pill-toggle__pill--active {
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(10, 27, 52, 0.35);
    cursor: default;
}

/* Read-only rendering (disabled="true"). The buttons carry the native disabled attribute,
   so they fire no clicks; this only makes that visible. */
.zf-pill-toggle--disabled {
    opacity: 0.6;
}

.zf-pill-toggle--disabled .zf-pill-toggle__pill {
    cursor: not-allowed;
}