/* 18-c-frame.css — Phase 4c: C (Comprehension) action layer + sub-pill row.
 *
 * Slots the existing comp tabs UI under the [A][B][C] top pill row + adds
 * [Q] (MCQ) and [G] (Guesser) sub-pills. FRAME ONLY — C2–C5 player views,
 * the more-context toggle, and Guesser distractor pools are Phase 6/7/9.
 *
 * Body-class gates:
 *   .v2-mode-A → C frame hidden, B chrome (mode-bar / stt-result) hidden,
 *                C sub-pills hidden.
 *   .v2-mode-B → C frame hidden, C sub-pills hidden, B chrome shown.
 *   .v2-mode-C → C frame shown,  C sub-pills shown, B chrome hidden.
 *
 * Within C:
 *   .v2-cmode-Q → #comprehension-area visible inside #action-layer-C.
 *   .v2-cmode-G → Phase 9 stub message visible; #comprehension-area hidden.
 *
 * Shared chrome (sentence display, audio/video player, REC controls, [U]
 * trigger) has no mode-gated rule per BRD — it stays visible across all
 * modes. Only B's stage-specific UI (mode-bar + stt-result) is hidden when
 * the protocol switches.
 *
 * !important is required on the visibility rules because today's
 * comprehension protocol (practice.js) mutates #comprehension-area's
 * inline `style` attribute; the inline `display:none` from the template
 * would otherwise beat a class selector.
 */

/* ── C action layer ───────────────────────────────────────────────── */
.action-layer-C { display: none; margin-top: 0.5rem; }
body.v2-mode-C .action-layer-C { display: block; }
body.v2-mode-A .action-layer-C { display: none !important; }
body.v2-mode-B .action-layer-C { display: none !important; }

/* Inside C, the comp area shows only in Q sub-mode. */
body.v2-mode-C.v2-cmode-Q #comprehension-area { display: block !important; }
body.v2-mode-C.v2-cmode-G #comprehension-area { display: none !important; }

/* Non-C modes: comp area always hidden regardless of practice.js inline. */
body.v2-mode-A #comprehension-area { display: none !important; }
body.v2-mode-B #comprehension-area { display: none !important; }

/* ── G sub-mode stub (Phase 9 placeholder) ────────────────────────── */
.v2-c-stub {
  display: none;
  padding: 1.5rem 1rem;
  margin: 0.75rem 0;
  border: 1px dashed var(--v2-hairline, #e5e3dc);
  border-radius: 10px;
  background: var(--v2-surface, #fdfcf7);
  color: var(--v2-ink-3, #8a877e);
  font: 500 0.95rem/1.5 Inter, system-ui, sans-serif;
  text-align: center;
}
body.v2-mode-C.v2-cmode-G .v2-c-stub { display: block; }
.v2-c-stub strong {
  display: block; margin-bottom: 4px;
  color: var(--v2-ink, #14140f);
  font-weight: 700;
}

/* ── B chrome hidden in A and C modes; pills relocated in B ──────── */
/* The 1/2/3 + ? pills moved to the top pill row (.v2-b-subpills). Hide
 * the in-line #mode-bar everywhere now — its instruction can move to
 * the hint row separately if needed. */
#practice-section .mode-bar { display: none !important; }
body.v2-mode-A #practice-section .stt-result,
body.v2-mode-C #practice-section .stt-result { display: none !important; }

/* ── B sub-pills — inline inside .v2-abc-pills row ────────────────── */
.v2-b-subpills {
  display: none;
  align-items: center;
  gap: 6px;
}
body.v2-mode-B .v2-b-subpills { display: inline-flex; }
body.v2-mode-B .v2-b-subpills::before {
  content: '·';
  color: var(--v2-ink-3, #8a877e);
  font-size: 1.1rem;
  margin: 0 2px;
}

/* Round digit pills — fixed circle, distinct from the rounded-square A pills. */
.v2-b-subpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  font: 700 0.85rem/1 ui-monospace, SF Mono, Menlo, monospace;
  background: transparent;
  border: 2px solid #d1d5db;
  color: var(--muted, #6b7280);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
/* Per-game rim colors (inactive = rim only). !important guards against any
 * leftover .mode-pill rule in 03-practice.css that might fill inactive
 * pills when the .done class lingers from earlier sessions. */
.v2-b-subpill[data-midx="0"] { border-color: #ef4444 !important; color: #ef4444 !important; background: transparent !important; }
.v2-b-subpill[data-midx="1"] { border-color: #3b82f6 !important; color: #3b82f6 !important; background: transparent !important; }
.v2-b-subpill[data-midx="2"] { border-color: #22c55e !important; color: #22c55e !important; background: transparent !important; }
/* Active = filled with its color. Only one at a time. */
.v2-b-subpill.active[data-midx="0"] { background: #ef4444 !important; color: #fff !important; }
.v2-b-subpill.active[data-midx="1"] { background: #3b82f6 !important; color: #fff !important; }
.v2-b-subpill.active[data-midx="2"] { background: #22c55e !important; color: #fff !important; }

/* Help [?] — far right, in line with hint row below. */
.v2-abc-help {
  display: none;
  width: 28px; height: 28px;
  padding: 0;
  border: 1px solid var(--v2-hairline-strong, #c9c5b9);
  border-radius: 50%;
  background: #fff;
  color: var(--v2-ink-3, #8a877e);
  font: 700 0.95rem/1 ui-monospace, SF Mono, Menlo, monospace;
  cursor: pointer;
  margin-left: 6px;
  -webkit-tap-highlight-color: transparent;
}
body.v2-mode-B .v2-abc-help { display: inline-flex; align-items: center; justify-content: center; }
.v2-abc-help:hover { background: var(--v2-surface-2, #f3f1ea); color: var(--v2-ink, #14140f); }

/* ── A action layer gate (latent from Phase 4b — wire it now) ─────── */
.action-layer-A { display: none; }
body.v2-mode-A .action-layer-A { display: block; }

/* ── C sub-pills — inline inside .v2-abc-pills row ───────────────── */
.v2-c-subpills {
  display: none;
  align-items: center;
  gap: 6px;
}
body.v2-mode-C .v2-c-subpills { display: inline-flex; }
/* separator glyph before Q G group */
body.v2-mode-C .v2-c-subpills::before {
  content: '·';
  color: var(--v2-ink-3, #8a877e);
  font-size: 1.1rem;
  margin: 0 2px;
}

/* ── A sub-pills — same shape, sit immediately after [A] pill ─────── */
.v2-a-subpills {
  display: none;
  align-items: center;
  gap: 6px;
}
body.v2-mode-A .v2-a-subpills { display: inline-flex; }
body.v2-mode-A .v2-a-subpills::before {
  content: '·';
  color: var(--v2-ink-3, #8a877e);
  font-size: 1.1rem;
  margin: 0 2px;
}
/* Separator between A's sub-pills (1 2) and the next top-level pill [B]. */
body.v2-mode-A .v2-a-subpills::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--v2-hairline-strong, #c9c5b9);
  margin: 0 8px 0 6px;
  vertical-align: middle;
}

.v2-a-subpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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: 30px;
  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, box-shadow 0.15s ease;
}
.v2-a-subpill:hover {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
}
.v2-a-subpill:active { transform: scale(0.97); }
.v2-a-subpill:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}
.v2-a-subpill.is-active {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}

/* [X] polarity chip — same shape as A sub-pills. */
.v2-a-xchip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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: 30px;
  margin-left: 4px;
  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, box-shadow 0.15s ease;
}
.v2-a-xchip:hover {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
}
.v2-a-xchip:active { transform: scale(0.97); }
.v2-a-xchip.is-on {
  background: var(--primary, #2563eb);
  border-color: var(--primary, #2563eb);
  color: #fff;
}

.v2-c-subpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 0.85rem/1 ui-monospace, SF Mono, Menlo, monospace;
  background: #fff;
  color: var(--v2-ink, #14140f);
  border: 1px solid var(--v2-ink, #14140f);
  border-radius: 6px;
  padding: 0 10px;
  height: 28px;
  min-width: 30px;
  cursor: pointer;
  letter-spacing: 0.05em;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.v2-c-subpill:hover { background: var(--v2-surface-2, #f3f1ea); }
.v2-c-subpill:active { transform: scale(0.97); }
.v2-c-subpill:focus-visible {
  outline: 2px solid var(--v2-target, #b08d34);
  outline-offset: 2px;
}
.v2-c-subpill.is-active {
  background: var(--v2-ink, #14140f);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────
 * Phase 10 — view (d) "Лише нові" toggle inside the C action layer.
 *
 * Lives in the .v2-c-levels pill row, pushed to the right via
 * margin-left: auto. When toggled ON, #action-layer-C gets class
 * `view-d-only-new` and KNOWN tokens rendered by C views (.v2tk-ph /
 * .v2tk-tok) collapse to silent gaps so the placeholder strip
 * highlights what the student doesn't know yet. UNKNOWN tokens keep
 * their normal placeholder rim so they remain identifiable as targets.
 */
.v2-c-view-d-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 28px;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 999px;
  background: #fff;
  color: var(--v2-ink-3, #8a877e);
  font: 500 0.78rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.v2-c-view-d-toggle:hover { background: var(--v2-surface-2, #f3f1ea); }
.v2-c-view-d-toggle.is-on,
.v2-c-view-d-toggle[aria-pressed="true"] {
  background: var(--v2-correct-tint, #e8efe0);
  border-color: var(--v2-known, #2d4e6a);
  color: var(--v2-ink, #14140f);
}
.v2-c-view-d-toggle .v2-c-view-d-glyph { font-size: 1rem; line-height: 1; }
.v2-c-view-d-toggle .v2-c-view-d-label { white-space: nowrap; }
@media (max-width: 480px) {
  .v2-c-view-d-toggle .v2-c-view-d-label { display: none; }
  .v2-c-view-d-toggle { padding: 0 8px; }
}

/* View-d ON: KNOWN tokens lose their slate fill + ink-blue rim so they
 * read as quiet gaps; unknown placeholders keep their normal rim.
 * Applies to BOTH the placeholder spans (.v2tk-ph) and the inline
 * tokens (.v2tk-tok) emitted by V2Tokens.renderPlaceholders. */
.action-layer-C.view-d-only-new .v2tk-ph.is-known,
.action-layer-C.view-d-only-new .v2tk-tok.is-known {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: transparent;
  opacity: 0.32;
}
.action-layer-C.view-d-only-new .v2tk-ph:not(.is-known),
.action-layer-C.view-d-only-new .v2tk-tok:not(.is-known) {
  background: var(--v2-new-tint, rgba(45, 78, 106, 0.06));
}