/* SHARED·TIERSEG (425) — the names-only segmented depth selector. (locked chrome · D-729)
 *
 * EXTRACTED 2026-08-20 from the live 502 read (web/css/cards/weeks/read.css) — Phase 2
 * block 5 of cc-wb-cascade-and-weeks-extract. Values VERBATIM (.wkr-seg → tsg): sunken
 * pill rail, label-register buttons, raised-card .on state; long-press peeks read-time
 * (the wire's business — this file has no hover, phone-true). An unwritten tier is a
 * DISABLED button — visible and honest, never a fall-through (D-541). The .on class is
 * applied by the consumer's wire (502's renderSeg), never rendered.
 *
 * ⚠️ NOT '.seg': app.css already styles .seg inside .progress-bar, and a bare .seg root
 * here would restyle those elements — the exact generic-class bleed the molecule ruling's
 * collision grep exists to catch.
 *
 * 🔴 THE WORDMARK SELECTOR IS FIXED HERE, quick → loops. The read's copy still keyed the
 * Loops wordmark on [data-t="quick"], but the renderer emits data-t="loops" since the
 * migration-049 rename went "all the way" (Andrew, 2026-08-20) — the CSS selector was
 * MISSED by that sweep, so the D-729 wordmark could never render again once Loops
 * relights. Dead-vs-dead today (Loops is HELD, so the disabled plain label renders either
 * way — pixel-neutral, gate-proven); on relight this is the difference between the ruled
 * wordmark and a plain label. Flagged in the Phase-2 report. */
.tsg { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-pill); padding: var(--space-4); margin-top: var(--space-12); }
.tsg button { font-family: var(--font-label); font-size: var(--text-body-sm); font-weight: var(--weight-600); color: var(--text-secondary); padding: var(--space-8) var(--space-16); border: 0; background: none; border-radius: var(--radius-pill); cursor: pointer; line-height: var(--leading-100); transition: background var(--duration-180), color var(--duration-180); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tsg button:focus { outline: none; }
.tsg button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.tsg button:active { transform: scale(0.97); }
.tsg button.on { background: var(--surface-card); color: var(--nav-active); box-shadow: 0 var(--nudge-1) var(--space-4) var(--ink-900-a12); }
/* the Loops tier wears the BabyWeeks wordmark treatment (display font + teal fullstop, D-729) —
   a branded, different-KIND read, not just a shorter one. Only while live and selectable: the
   HELD/disabled button renders the plain label (Andrew 2026-08-19, wordmark-rule exception). */
.tsg button[data-t="loops"]:not([disabled]) { font-family: var(--font-display); font-weight: var(--weight-wordmark); letter-spacing: var(--tracking-neg-01); }
.tsg button[data-t="loops"]:not([disabled]) b { color: var(--brand); font-weight: inherit; }
/* an unwritten tier is a DISABLED seg button — visible and honest (D-541) */
.tsg button[disabled] { opacity: 0.4; cursor: default; }