/* SLE-TH-segmented — segmented control / toggle button group.
 *
 * Variants:
 *   .suite-seg            — container (flex row, optional border ring)
 *   .suite-seg-btn        — individual button (border, no-bg by default)
 *   .suite-seg-btn.on     — active state (--bk bg in light, --g4 in dark)
 *
 * Promoted from campscout `.tgl-btn` / `.tgl-group` and matos
 * `.m-seg button` / `.m-amort-mode button` on 2026-06-14 (suite-wide CSS
 * consolidation). Distinct from the existing `.segmented-control` which
 * backs the JS-driven `@suite/lib/segmented-control` component; this is
 * a simpler primitive for inline toggle clusters.
 *
 * Depends on tokens.css.
 */
.suite-seg { display: inline-flex; border: 1px solid var(--g2); border-radius: var(--radius-sm); overflow: hidden; }
.suite-seg-btn { flex: 1; padding: var(--sp-1h) var(--sp-3); background: transparent; color: var(--g4); border: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.suite-seg-btn + .suite-seg-btn { border-left: 1px solid var(--g2); }
.suite-seg-btn:hover { background: var(--g1); color: var(--text); }
.suite-seg-btn.on { background: var(--bk); color: var(--white); }
@media (prefers-color-scheme: dark) {
  .suite-seg-btn.on { background: var(--g4); color: var(--bk); }
}