/* 22-c4-c5.css — Phase 7d+7e: C4 by-sentence + C5 by-word views (items 21, 22).
 *
 * Owns:
 *   - .v2-c4-view, .c4-strips, .c4-strip-*, .c4-mcq*  (C4 — sentence player)
 *   - .v2-c5-view, .c5-strip, .c5-mcq*                (C5 — word player)
 *
 * Visibility gates set by v2-c-levels.js (body classes).
 * Mirrors the visual language of 20-c3-view.css so all three views feel
 * consistent: 3-strip layout, dark "play" buttons, soft surface MCQ panel
 * with green/red answer feedback.
 *
 * No 20-c3-view.css changes — that file's pane gates only mention
 * v2-clevel-3. Per-level visibility for C4/C5 is gated here.
 */

/* ── Pane gates for C4/C5 + hide C1's pane under those levels ─────── */
body.v2-mode-C.v2-clevel-4 .v2-c1-view,
body.v2-mode-C.v2-clevel-5 .v2-c1-view { display: none !important; }

body.v2-mode-C.v2-clevel-4 .v2-c3-view,
body.v2-mode-C.v2-clevel-5 .v2-c3-view { display: none !important; }

/* Hide legacy #comprehension-area under C4/C5 (parity with C3 rule). */
body.v2-mode-C.v2-clevel-4 #comprehension-area,
body.v2-mode-C.v2-clevel-5 #comprehension-area { display: none !important; }

/* ──────────────────────────────────────────────────────────────────
 * C4 — by-sentence player view
 * ────────────────────────────────────────────────────────────────── */

.v2-c4-view {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 6px 4px 12px;
}
body.v2-mode-C.v2-cmode-Q.v2-clevel-4 .v2-c4-view { display: flex; }
.v2-c4-view[hidden] { display: none !important; }

.c4-strips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 10px;
  background: var(--v2-surface, #fdfcf7);
}
.c4-strip {
  padding: 6px 4px;
  line-height: 1.7;
  border-radius: 6px;
  transition: background 0.16s ease, opacity 0.16s ease;
}
.c4-strip.is-dim { opacity: 0.55; }
.c4-strip.is-empty { color: var(--v2-ink-3, #8a877e); font-style: italic; }
.c4-strip.c4-strip-current {
  background: var(--v2-surface-2, #f3f1ea);
  border: 1px solid var(--v2-hairline-strong, #c9c5b9);
  padding: 8px 8px;
}
.c4-strip-empty {
  color: var(--v2-ink-3, #8a877e);
  font-style: italic;
  letter-spacing: 0.08em;
}

.c4-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.c4-play-btn,
.c4-ready-btn,
.c4-next-btn {
  font: 600 0.9rem/1 Inter, system-ui, sans-serif;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 8px;
  padding: 9px 14px;
  background: #fff;
  color: var(--v2-ink, #14140f);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.c4-play-btn {
  background: var(--v2-ink, #14140f);
  color: #fff;
  border-color: var(--v2-ink, #14140f);
}
.c4-play-btn:hover {
  background: var(--v2-ink-2, #4a4842);
  border-color: var(--v2-ink-2, #4a4842);
}
.c4-play-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.c4-ready-btn:hover,
.c4-next-btn:hover {
  background: var(--v2-surface-2, #f3f1ea);
  border-color: var(--v2-ink-3, #8a877e);
}

.c4-mcq {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 10px;
  background: #fff;
}
.c4-mcq[hidden] { display: none !important; }
.c4-mcq-prompt {
  font: 600 0.95rem/1.4 Inter, system-ui, sans-serif;
  color: var(--v2-ink, #14140f);
}
.c4-mcq-options { display: flex; flex-direction: column; gap: 6px; }
.c4-mcq-option {
  display: flex;
  align-items: flex-start;
  text-align: left;
  font: 500 0.9rem/1.4 Inter, system-ui, sans-serif;
  background: var(--v2-surface, #fdfcf7);
  color: var(--v2-ink, #14140f);
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.c4-mcq-option:hover:not(.is-locked) {
  background: #fff;
  border-color: var(--v2-ink-3, #8a877e);
}
.c4-mcq-option:disabled,
.c4-mcq-option.is-locked { cursor: default; }
.c4-mcq-option.is-correct {
  background: #ddf3e0;
  border-color: #2e7d32;
  color: #14401a;
}
.c4-mcq-option.is-incorrect {
  background: #fce0e0;
  border-color: #b03030;
  color: #4d1212;
}
.c4-mcq-option.is-right-answer:not(.is-correct):not(.is-incorrect) {
  border-color: #2e7d32;
  background: #f1fbf3;
}
.c4-mcq-feedback {
  font: 600 0.85rem/1.4 Inter, system-ui, sans-serif;
  min-height: 1.2em;
}
.c4-mcq-feedback.is-correct { color: #2e7d32; }
.c4-mcq-feedback.is-incorrect { color: #b03030; }

/* ──────────────────────────────────────────────────────────────────
 * C5 — by-word player view
 * ────────────────────────────────────────────────────────────────── */

.v2-c5-view {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 6px 4px 12px;
}
body.v2-mode-C.v2-cmode-Q.v2-clevel-5 .v2-c5-view { display: flex; }
.v2-c5-view[hidden] { display: none !important; }

.c5-strip {
  padding: 10px 12px;
  line-height: 2.0;
  min-height: 3em;
  border: 1px solid var(--v2-hairline-strong, #c9c5b9);
  border-radius: 10px;
  background: var(--v2-surface-2, #f3f1ea);
  letter-spacing: 0.04em;
  /* Word-spacing helps spread placeholders so each is a clear tap target. */
  word-spacing: 0.2em;
}

/* Placeholders that have an attached MCQ get a faint underline so the
 * student knows long-press will reveal something. */
.c5-strip .v2tk-ph.c5-has-mcq {
  position: relative;
}
.c5-strip .v2tk-ph.c5-has-mcq::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -3px;
  height: 2px;
  background: var(--v2-target, #b08d34);
  opacity: 0.55;
  border-radius: 1px;
  pointer-events: none;
}
.c5-strip .v2tk-ph.is-mcq-target {
  outline: 2px solid var(--v2-target, #b08d34);
  outline-offset: 1px;
}
.c5-strip-empty {
  color: var(--v2-ink-3, #8a877e);
  font-style: italic;
  letter-spacing: 0.08em;
}

.c5-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.c5-play-btn,
.c5-next-btn {
  font: 600 0.9rem/1 Inter, system-ui, sans-serif;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 8px;
  padding: 9px 14px;
  background: #fff;
  color: var(--v2-ink, #14140f);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.c5-play-btn {
  background: var(--v2-ink, #14140f);
  color: #fff;
  border-color: var(--v2-ink, #14140f);
}
.c5-play-btn:hover {
  background: var(--v2-ink-2, #4a4842);
  border-color: var(--v2-ink-2, #4a4842);
}
.c5-next-btn:hover {
  background: var(--v2-surface-2, #f3f1ea);
  border-color: var(--v2-ink-3, #8a877e);
}
.c5-meta {
  font: 500 0.78rem/1.4 Inter, system-ui, sans-serif;
  color: var(--v2-ink-3, #8a877e);
  margin-top: 2px;
}

/* Pop-out MCQ panel. We render it inline under the strip rather than
 * as a true floating panel — simpler on mobile + no occlusion of nearby
 * placeholders. */
.c5-mcq-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 20, 15, 0.06);
}
.c5-mcq-panel[hidden] { display: none !important; }

.c5-mcq-prompt {
  font: 600 0.92rem/1.4 Inter, system-ui, sans-serif;
  color: var(--v2-ink, #14140f);
}
.c5-mcq-options { display: flex; flex-direction: column; gap: 6px; }
.c5-mcq-option {
  display: flex;
  align-items: flex-start;
  text-align: left;
  font: 500 0.9rem/1.4 Inter, system-ui, sans-serif;
  background: var(--v2-surface, #fdfcf7);
  color: var(--v2-ink, #14140f);
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.c5-mcq-option:hover:not(.is-locked) {
  background: #fff;
  border-color: var(--v2-ink-3, #8a877e);
}
.c5-mcq-option:disabled,
.c5-mcq-option.is-locked { cursor: default; }
.c5-mcq-option.is-correct {
  background: #ddf3e0;
  border-color: #2e7d32;
  color: #14401a;
}
.c5-mcq-option.is-incorrect {
  background: #fce0e0;
  border-color: #b03030;
  color: #4d1212;
}
.c5-mcq-option.is-right-answer:not(.is-correct):not(.is-incorrect) {
  border-color: #2e7d32;
  background: #f1fbf3;
}
.c5-mcq-feedback {
  font: 600 0.85rem/1.4 Inter, system-ui, sans-serif;
  min-height: 1.2em;
}
.c5-mcq-feedback.is-correct { color: #2e7d32; }
.c5-mcq-feedback.is-incorrect { color: #b03030; }

.c5-mcq-close {
  align-self: flex-end;
  font: 500 0.8rem/1 Inter, system-ui, sans-serif;
  background: transparent;
  color: var(--v2-ink-3, #8a877e);
  border: 1px solid var(--v2-hairline, #e5e3dc);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.c5-mcq-close:hover {
  background: var(--v2-surface-2, #f3f1ea);
  color: var(--v2-ink, #14140f);
}

/* ── Mobile niceties ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .c4-strips { padding: 6px 6px; }
  .c4-strip.c4-strip-current { padding: 6px 6px; }
  .c4-play-btn, .c4-ready-btn, .c4-next-btn { width: 100%; }
  .c5-play-btn, .c5-next-btn { width: 100%; }
  .c5-strip { padding: 8px 8px; line-height: 1.9; }
}

/* ── Phase 8: C4 extra-context strips ─────────────────────────────── */
/* Chip styling is canonical in 20-c3-view.css; C4 reuses .v2-c-more-context-chip
 * untouched. Here we only add C4's own extra strip cosmetics (matches C3 dimming). */
.c4-strip-extra {
  opacity: 0.32;
  padding: 4px 4px;
  line-height: 1.6;
  border-radius: 5px;
  font-size: 0.92em;
}
.c4-strip-extra.is-empty {
  color: var(--v2-ink-3, #8a877e);
  font-style: italic;
}

/* ── Phase 8: C5 solved-word visual cue (post-correct answer toast) ── */
.c5-strip .v2tk-ph.is-c5-solved {
  background: #ddf3e0;
  border-color: #2e7d32;
  color: #14401a;
}