/* ===========================================================================
   Flashcards — exam-paper retheme  (.noteviewer-body--flashcards)
   ---------------------------------------------------------------------------
   Page-scoped (loaded only on flashcard_index.html, after noteviewer.css +
   theme-light.css so equal-specificity rules win by source order). Brings the
   flip-card surface into the SAME exam-paper language as Notes / Topic
   Questions / MCQ: serif question + answer text, royal-blue for the QUESTION
   side, teal for the ANSWER side, calm paper surfaces, hairline rules. The 3-D
   flip mechanics (perspective / transform / backface) stay in noteviewer.css —
   this file only restyles colour, type and surfaces.

   Dark is the canonical base; light is colour-only via tokens. The light
   overrides previously used a gold/parchment palette (off the royal-blue lock);
   this file replaces it with the shared royal-blue + teal exam-paper tokens.

   Cascade: dark rules use `.noteviewer-body--flashcards <el>` (beats the (0,1,0)
   dark base in noteviewer.css); light rules mirror the existing
   `html.theme-light body:has(.noteviewer-body--flashcards) <el>` specificity so
   they tie and win by load order. Values come from per-theme --fc-* tokens.
   =========================================================================== */

/* ── Tokens — dark base (mirror mcq.css / grader.css palette) ─────────────── */
.noteviewer-body--flashcards {
  --fc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --fc-ink:           #eef4ff;
  --fc-paper-1:       #12152b;
  --fc-paper-2:       #0d1020;
  --fc-paper-border:  rgba(148, 163, 232, 0.16);
  --fc-line:          rgba(255, 255, 255, 0.11);
  --fc-faint:         rgba(220, 226, 245, 0.44);
  --fc-accent:        #84b6ff;
  --fc-accent-soft:   rgba(132, 182, 255, 0.14);
  --fc-accent-border: rgba(132, 182, 255, 0.36);
  --fc-teal:          #34d399;
  --fc-teal-soft:     rgba(52, 211, 153, 0.14);
  --fc-teal-border:   rgba(52, 211, 153, 0.36);
  --fc-zone-bg:       rgba(8, 10, 22, 0.55);
  --fc-zone-border:   rgba(148, 163, 232, 0.10);
  --fc-shadow:        0 2px 8px rgba(0, 0, 0, 0.34), 0 18px 50px rgba(0, 0, 0, 0.28);
}

/* ── Tokens — light (royal-blue + teal on white; replaces the gold parchment) ─ */
html.theme-light .noteviewer-body--flashcards {
  --fc-ink:           #0f172a;
  --fc-paper-1:       #ffffff;
  --fc-paper-2:       #ffffff;
  --fc-paper-border:  rgba(21, 26, 45, 0.10);
  --fc-line:          rgba(21, 26, 45, 0.10);
  --fc-faint:         rgba(21, 26, 45, 0.46);
  --fc-accent:        #3B52D0;
  --fc-accent-soft:   #EBF0FF;
  --fc-accent-border: #C4CFEE;
  --fc-teal:          #0B756E;
  --fc-teal-soft:     #E6F5F2;
  --fc-teal-border:   rgba(11, 117, 110, 0.30);
  --fc-zone-bg:       #ffffff;
  --fc-zone-border:   rgba(21, 26, 45, 0.08);
  --fc-shadow:        0 4px 16px rgba(21, 26, 45, 0.06), 0 16px 40px rgba(21, 26, 45, 0.05);
}

/* ══════════════════════════════════════════════════════════════════════════
   Question + answer text — the exam-paper signature: serif, calm weight.
   ══════════════════════════════════════════════════════════════════════════ */
.noteviewer-body--flashcards .flashcard-face p,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-face p,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-back p {
  font-family: var(--fc-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.08rem + 0.75vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fc-ink);
  text-wrap: pretty;
}

/* ══════════════════════════════════════════════════════════════════════════
   Card faces — calm paper. QUESTION = royal-blue top rail, ANSWER = teal rail.
   (Replaces the heavy electric-blue glow / bright-emerald gradient.)
   ══════════════════════════════════════════════════════════════════════════ */
.noteviewer-body--flashcards .flashcard-front,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-front {
  background: linear-gradient(180deg, var(--fc-paper-1) 0%, var(--fc-paper-2) 100%);
  border: 1px solid var(--fc-paper-border);
  border-top: 2px solid var(--fc-accent);
  box-shadow: var(--fc-shadow);
}
.noteviewer-body--flashcards .flashcard-back,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-back {
  background: linear-gradient(180deg, var(--fc-paper-1) 0%, var(--fc-paper-2) 100%);
  border: 1px solid var(--fc-paper-border);
  border-top: 2px solid var(--fc-teal);
  box-shadow: var(--fc-shadow);
}

/* Flip-affordance hint (dark only; light sets content:none) → quiet faint. */
.noteviewer-body--flashcards .flashcard-front::after,
.noteviewer-body--flashcards .flashcard-back::after {
  color: var(--fc-faint);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   Corner label pills — QUESTION (royal-blue) / ANSWER (teal) exam-paper chips.
   ══════════════════════════════════════════════════════════════════════════ */
.noteviewer-body--flashcards .flashcard-front .flashcard-label,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-front .flashcard-label {
  background: var(--fc-accent-soft);
  border-color: var(--fc-accent-border);
  color: var(--fc-accent);
  box-shadow: none;
}
.noteviewer-body--flashcards .flashcard-front .flashcard-label::before,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-front .flashcard-label::before {
  background: var(--fc-accent);
  box-shadow: 0 0 0 3px var(--fc-accent-soft);
}
.noteviewer-body--flashcards .flashcard-back .flashcard-label,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-back .flashcard-label {
  background: var(--fc-teal-soft);
  border-color: var(--fc-teal-border);
  color: var(--fc-teal);
  box-shadow: none;
}
.noteviewer-body--flashcards .flashcard-back .flashcard-label::before,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-back .flashcard-label::before {
  background: var(--fc-teal);
  box-shadow: 0 0 0 3px var(--fc-teal-soft);
}

/* ══════════════════════════════════════════════════════════════════════════
   Study zone, counter, progress — calm paper + royal-blue accents (no gold).
   ══════════════════════════════════════════════════════════════════════════ */
.noteviewer-body--flashcards .fc-study-zone,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-study-zone {
  background: var(--fc-zone-bg);
  border: 1px solid var(--fc-zone-border);
  box-shadow: var(--fc-shadow);
}

.noteviewer-body--flashcards .flashcard-counter,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-counter {
  background: var(--fc-accent-soft);
  border: 1px solid var(--fc-accent-border);
  color: var(--fc-accent);
  box-shadow: none;
}

.noteviewer-body--flashcards .fc-progress-track,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-progress-track {
  background: var(--fc-line);
}
.noteviewer-body--flashcards .fc-progress-fill,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-progress-fill {
  background: var(--fc-accent);
  box-shadow: none;
}

.noteviewer-body--flashcards .flashcard-divider,
html.theme-light body:has(.noteviewer-body--flashcards) .flashcard-divider {
  background: var(--fc-line);
}

/* ══════════════════════════════════════════════════════════════════════════
   Controls — calm; hover reads as a royal-blue wash (matches the other pages).
   ══════════════════════════════════════════════════════════════════════════ */
.noteviewer-body--flashcards .fc-btn:hover,
html.theme-light body:has(.noteviewer-body--flashcards) .fc-btn:hover {
  border-color: var(--fc-accent-border);
  background: var(--fc-accent-soft);
  color: var(--fc-accent);
}
.noteviewer-body--flashcards .fc-btn:hover .fc-btn-icon {
  opacity: 1;
}
html.theme-light #fc-shuffle:hover {
  background: var(--fc-accent-soft);
  border-color: var(--fc-accent-border);
  color: var(--fc-accent);
}