/* 16-abc-pills.css — Phase 4a: top-level [A] [B] [C] pill row (frame only).
 *
 * Visual chrome only. The frame mounts above the existing watch/practice
 * toggle and the mode-pills row. Phase 4b/4c will wire actual behavior into
 * each pill — for now tapping a pill flips `body.v2-mode-{A|B|C}` and
 * persists the choice in localStorage, but nothing inside the modes changes.
 *
 * Design: matches the [U] button chrome (black-on-light rounded-rect),
 * sized larger for primary navigation. Hides on scroll-down >100px like
 * Wave O's `.lst-header` pattern.
 */

.v2-abc-pills {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
  padding: 4px 12px;
  background: var(--bg, #fff);
  margin: 0 -12px 0;
}
.v2-abc-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  color: var(--v2-ink, #14140f);
  text-decoration: none;
  font-size: 1.2rem; line-height: 1;
  margin-right: 4px;
  -webkit-tap-highlight-color: transparent;
}
.v2-abc-back:hover { background: var(--v2-surface-2, #f3f1ea); }

.v2-abc-timer {
  margin-left: auto;
  font: 500 0.78rem/1 Inter, system-ui, sans-serif;
  color: var(--v2-ink-3, #8a877e);
}
.v2-abc-timer .activity-timer { display: inline; }

/* A/B pills match the Library page aesthetic — soft borders, blue accent
 * on hover and when active. */
.v2-abc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 700 0.85rem/1 ui-monospace, SF Mono, Menlo, monospace;
  background: var(--card-bg, #fff);
  color: var(--fg, #212529);
  border: 1px solid var(--border, #dee2e6);
  border-radius: var(--radius, 8px);
  padding: 0 10px;
  height: 28px;
  min-width: 32px;
  cursor: pointer;
  letter-spacing: 0.05em;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.v2-abc-pill:hover {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
}
.v2-abc-pill:active { transform: scale(0.97); }
.v2-abc-pill:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}

/* Active pill = primary blue fill. */
.v2-abc-pill.is-active {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}

/* C enabled on STAGE for review (2026-05-30). (Was parked while the C views
   were rebuilt; they're now wired — Comprehension ladder C1–C5 + Q/G sub-pills.) */

/* Pills are letter-only — tighten padding. */
.v2-abc-pill { padding: 0 10px; min-width: 30px; }

/* Hint on its own row right below pills — scrolls with them. Library style.
 * Help [?] sits at the right end of this row (when in B mode). */
.v2-abc-hint-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px 6px;
  margin: 0 -12px 0.4rem;
  border-bottom: 1px solid var(--border, #dee2e6);
  background: var(--bg, #f8f9fa);
}
.v2-abc-hint {
  flex: 1;
  font: 400 0.8rem/1.3 Inter, system-ui, sans-serif;
  color: var(--muted, #6b7280);
}

/* Slow rim flash — added by v2-a-mode.js after ~12s of no interaction,
 * removed on first toggle or lookup. Three pulses, then idle. Bright orange
 * (#ff4700) to match the A1 known-word underline. */
@keyframes v2-hint-pulse {
   0%  { box-shadow: inset 0 0 0 0   #ff4700; }
  20%  { box-shadow: inset 0 0 0 2px #ff4700; }
  40%  { box-shadow: inset 0 0 0 0   #ff4700; }
 100%  { box-shadow: inset 0 0 0 0   #ff4700; }
}
.v2-abc-hint-row.v2-hint-flash {
  animation: v2-hint-pulse 2200ms ease-in-out 3;
  border-radius: 6px;
}

/* Chunk-length toggle ([<>] long / [><] short) — Base Protocol only.
 * Same footprint as a main A/B pill; hidden outside B mode (like the 1·2·3
 * sub-pills). is-long = orange fill (#ff4700, brand) so "expanded" reads as on. */
.v2-bchunk-toggle { display: none; letter-spacing: 0; }
body.v2-mode-B .v2-bchunk-toggle { display: inline-flex; }
.v2-bchunk-toggle.is-long {
  background: #ff4700;
  border-color: #ff4700;
  color: #fff;
}
.v2-bchunk-toggle.is-long:hover {
  border-color: #ff4700;
  box-shadow: 0 2px 8px rgba(255, 71, 0, 0.18);
}