/**
 * @file seg.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The segmented control: a row of joined buttons, the chosen one filled.
 *   Reads only the tokens in theme.css. The rules are theme.css's, moved unchanged and in order.
 * @usage Linked from public/spa.html right after theme.css, in the order theme.css held these rules
 *   (the shell block), and from every standalone page that links theme.css.
 * @version-history
 *   v1.0.0 — 2026-09-24 — Moved unchanged from css/theme.css (lines 1264-1274), so theme.css
 *     holds tokens only (UI consolidation, a move).
 */

/* ── Segmented control (canonical) ──
   A row of buttons in a bordered pill; the active segment is filled with the accent. Token-only so
   it flips in dark mode. The start of the deferred #8 tab-family consolidation — use this for new
   in-place view toggles (Draft/Published, picker tabs, scope toggles) instead of a per-view clone. */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.seg-btn { padding: 0.25rem 0.7rem; font-size: var(--text-small); line-height: 1.3; background: transparent; color: var(--text-dim); border: none; cursor: pointer; transition: background 0.15s, color 0.15s; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn:hover:not(:disabled) { background: var(--bg-surface); }
.seg-btn.active { background: var(--accent); color: #fff; }
.seg-btn:disabled { opacity: 0.6; cursor: default; }