/* SegmentedControl — the compact box style is the default.
 *
 * The strip is `.tabs` / `.tab` (role=tablist / role=tab). styles.css ships
 * the boxed segmented-control geometry so every SegmentedControl across the
 * app — Settings Display, the Compare view / range / hours selection, the
 * Watchlist detail range, the Sign-in mode chooser — looks the same without
 * per-view overrides. The settings view's own overrides are now redundant
 * and removed.
 *
 * Sizing comes from tokens.css: --seg-track-pad (3px), --seg-opt-pad-y (7px),
 * --seg-opt-pad-x (14px), --seg-opt-radius (--radius) and
 * --seg-track-radius (--radius-md). Colour and type come from tokens.css too.
 * The default option font is --fs-small (13px) — the design board's size.
 */

/* ---- the strip: one rounded, boxed track holding the options ---------- */

.tabs {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--seg-track-pad);
  border: 1px solid var(--border-subtle);
  border-radius: var(--seg-track-radius);
  background: var(--surface-2);
}

/* ---- one option: content-sized, never wrap, rounded when selected ----- */

.tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  padding: var(--seg-opt-pad-y) var(--seg-opt-pad-x);
  border-radius: var(--seg-opt-radius);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.tab:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Visible keyboard focus — the inline-flex strip reserves no padding, so the
   outline sits inside each tab's rounded corner. */
.tabs .tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--seg-opt-radius);
}

/* ---- phone fill mode (MOBILE_PLAN.md P6) ----------------------------------
   Below 768 the strip fills its row: a full-width track whose cells split
   the width evenly (`flex: 1 1 0`), labels wrap instead of overflowing a
   320px column, and every cell keeps the 44px minimum hit target. The base
   `.tab { white-space: nowrap }` above stays the desktop contract. */

@media (max-width: 767.98px) {
  .tabs {
    display: flex;
    width: 100%;
  }

  .tab {
    flex: 1 1 0;
    white-space: normal;
    min-height: var(--hit-min);
  }
}