/**
 * Phase 14 — Post-Lesson Consolidation Loop styles.
 *
 * All colors via CSS custom-property tokens only — no raw hex values.
 * Breakpoints: 320px (mobile), 480px (options grid), 640px+ (desktop max-width).
 * Motion: correct-answer fade only; wrapped in prefers-reduced-motion guard.
 * Touch targets: min-height 44px on all interactive elements (WCAG 2.5.5).
 *
 * Class prefix: .consolidation-* (no collision with .organizer-*, .preteach-*).
 */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */

.consolidation-wrapper {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* ── Stage sections ──────────────────────────────────────────────────────── */

/* Stages are toggled via [hidden] attribute in JS — no extra display rule needed */
.consolidation-stage {
  padding-top: 8px;
}

.consolidation-stage-counter {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.consolidation-stage-heading {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 24px;
}

/* Screen-reader-only utility for aria-live announce region */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Stage 1: Retrieval Check ─────────────────────────────────────────────── */

.consolidation-retrieval {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.consolidation-retrieval__term-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
}

.consolidation-retrieval__term-label {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  margin: 0 0 12px 0;
  line-height: 1.55;
}

/* Recognition options grid: 1 column mobile, 2 columns at 480px+ */
.consolidation-retrieval__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 480px) {
  .consolidation-retrieval__options {
    grid-template-columns: 1fr 1fr;
  }
}

.consolidation-retrieval__option {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  border-left: 4px solid transparent;
}

.consolidation-retrieval__option:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.consolidation-retrieval__option--selected {
  border-left: 4px solid var(--color-border-md);
  background: var(--color-surface);
}

/* Correct state: accent left border + accent-light background fade (reduced-motion guarded) */
.consolidation-retrieval__option--correct {
  border-left: 4px solid var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .consolidation-retrieval__option--correct {
    background-color: var(--color-accent-light);
    transition: background-color 200ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .consolidation-retrieval__option--correct {
    background-color: var(--color-accent-light);
  }
}

/* Incorrect state: border-md left border only — NEVER red (ND-safe constraint) */
.consolidation-retrieval__option--incorrect {
  border-left: 4px solid var(--color-border-md);
  background: var(--color-surface);
}

/* Reframe card: hidden by default; JS reveals on wrong answer + Next tap */
.consolidation-retrieval__reframe {
  background: var(--color-surface);
  border: 1px solid var(--color-border-md);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.consolidation-retrieval__reframe-text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0 0 8px 0;
  line-height: 1.55;
}

.consolidation-retrieval__reframe-prompt {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* Free-recall textarea: always shown */
.consolidation-retrieval__recall-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consolidation-retrieval__recall-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.consolidation-retrieval__recall-input {
  min-height: 80px;
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
}

.consolidation-retrieval__recall-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.consolidation-retrieval__recall-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.consolidation-retrieval__encouragement {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* WR-06: Recall reframe card — mirrors .consolidation-retrieval__reframe styling.
   Revealed by JS when the student submits a blank recall answer. */
.consolidation-retrieval__recall-reframe {
  background: var(--color-surface);
  border: 1px solid var(--color-border-md);
  border-radius: 8px;
  padding: 16px;
  margin-top: 8px;
}

.consolidation-retrieval__recall-reframe-text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.55;
}

/* Stage 1 submit: full-width mobile, max-width 320px centered at 640px+ */
.consolidation-retrieval__submit {
  display: block;
  width: 100%;
  min-height: 44px;
}

@media (min-width: 640px) {
  .consolidation-retrieval__submit {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ── Stage 2: Reflection ─────────────────────────────────────────────────── */

.consolidation-reflection {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.consolidation-reflection__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consolidation-reflection__q1-label,
.consolidation-reflection__q2-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.consolidation-reflection__q1-input,
.consolidation-reflection__q2-input {
  min-height: 80px;
  width: 100%;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.55;
  resize: vertical;
  box-sizing: border-box;
}

.consolidation-reflection__q1-input:focus-visible,
.consolidation-reflection__q2-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Submit: full-width mobile, max-width 320px centered at 640px+ */
.consolidation-reflection__submit {
  display: block;
  width: 100%;
  min-height: 44px;
}

@media (min-width: 640px) {
  .consolidation-reflection__submit {
    max-width: 320px;
    margin: 0 auto;
  }
}

.consolidation-reflection__skip-link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  text-align: center;
  display: block;
}

.consolidation-reflection__skip-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Stage 3: Next-Step ─────────────────────────────────────────────────── */

.consolidation-next-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* CONS-03: exactly one action card per stage render */
.consolidation-next-step__action-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consolidation-next-step__action-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.4;
}

.consolidation-next-step__due-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.2;
}

.consolidation-next-step__nudge-chip {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 12px;
  padding: 2px 8px;
  line-height: 1.4;
}

/* Primary button: full-width mobile, max-width 320px centered at 640px+ */
.consolidation-next-step__submit {
  display: block;
  width: 100%;
  min-height: 44px;
}

@media (min-width: 640px) {
  .consolidation-next-step__submit {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* Muted secondary navigation link — intentionally de-emphasized (CONS-03) */
.consolidation-next-step__home-link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  text-align: center;
  display: block;
}

.consolidation-next-step__home-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Responsive (768px+ two-rem wrapper margins) ─────────────────────────── */

@media (min-width: 768px) {
  .consolidation-wrapper {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}