/* segmented-control — @tokens: --segmented-control-gap, --segmented-control-pad, --segmented-control-option-pad-y, --segmented-control-option-pad-x

   The iOS-style segmented control: a mutually-exclusive PILL button group riding a
   track, where the selected segment lifts to a raised light pill. This is the
   wayfinding/view-switch control (List / Grid / Map) — distinct from `.hzo-tabs`,
   which are underline content-panel tabs over a panel. Batch E (navigation).

   Radio-backed control — same pattern as its siblings variation-swatch and
   rating-input: sr-only radios (still focusable & form-submittable), the focus ring
   rides the adjacent label, and checked/disabled are driven by `:checked +` /
   `:disabled +`. Each option is independent; only the CHECKED one lifts (`+`, the
   adjacent label only — no cumulative `~`).

   Intended markup (coordinator writes the demo):

     <span class="hzo-segmented-control" role="radiogroup" aria-label="View">
       <input type="radio" id="v-list" name="view" class="hzo-segmented-control__radio" checked>
       <label for="v-list" class="hzo-segmented-control__option">List</label>
       <input type="radio" id="v-grid" name="view" class="hzo-segmented-control__radio">
       <label for="v-grid" class="hzo-segmented-control__option">Grid</label>
       <input type="radio" id="v-map" name="view" class="hzo-segmented-control__radio">
       <label for="v-map" class="hzo-segmented-control__option">Map</label>
     </span>

   Token-only. The track's inner gap/padding and the option's snug pad have no
   semantic tokens in the scale (they're the sub-pixel dial that gives the raised-pill
   look), so they are component tokens with literal fallbacks — the same dial pattern
   variation-swatch/icon-button use. Everything else reads a semantic/L1 token. */
.hzo-segmented-control {
    display: inline-flex;
    align-items: center;
    gap: var(--segmented-control-gap, 2px);
    padding: var(--segmented-control-pad, 3px);
    background: var(--bg-alt);
    border-radius: var(--radius-pill);
}

/* Radio — visually hidden but still focusable & form-submittable (sr-only). Never
   display:none — that removes it from the tab order and the submitted form.
   (copied verbatim from variation-swatch__radio.) */
.hzo-segmented-control__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
}

/* Option — the clickable <label> segment. Unselected reads as quiet body text. */
.hzo-segmented-control__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--segmented-control-option-pad-y, 6px) var(--segmented-control-option-pad-x, 16px);
    border-radius: var(--radius-control);
    color: var(--text-body);
    font-size: var(--fs-75);
    line-height: var(--lh-none);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-base) ease,
                color var(--transition-base) ease,
                box-shadow var(--transition-base) ease;
}

/* Hover (unselected) — darken toward the heading colour as a cue. */
.hzo-segmented-control__option:hover {
    color: var(--text-heading);
}

/* Selected (checked) — the raised light pill: lifts off the track with a light
   fill + small shadow. The checked radio's own adjacent label is the only one lit
   (`+`, no cumulative `~`). */
.hzo-segmented-control__radio:checked + .hzo-segmented-control__option {
    background: var(--card-bg, #fff);
    color: var(--text-heading);
    box-shadow: var(--shadow-sm);
    font-weight: var(--fw-600);
}

/* A11y — required. The radio is hidden, so the focus ring rides its label option. */
.hzo-segmented-control__radio:focus-visible + .hzo-segmented-control__option {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-segmented-control__radio:disabled + .hzo-segmented-control__option,
.hzo-segmented-control.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-segmented-control__option { transition: none; }
}