/* flashcards.css — the practice deck.
 *
 * Layered on jp-ar.css and reuses its chrome wherever the deck does the same
 * job as the drill: `.drill-head`, `.drill-bar`, `.drill-done`, `.drill-chip`,
 * `.kana-btn`, `.kana-play`, `.kana-headline`, `.kana-mnemonic`, `.vd-seg`.
 * Only what is genuinely new to a flip-card is here, under `fc-`.
 *
 * EVERY COLOUR IS A CUSTOM PROPERTY, none hardcoded. theme.css re-points those
 * properties for the Fuji theme and cannot reach a literal — NOTES.md lists the
 * eight places that already had to be patched by hand for exactly that reason,
 * and a card is a light plate behind two scripts' ink, which is the shape of
 * bug that disappears entirely on a dark ground.
 *
 * The Japanese runs are set larger than the Latin around them, per the rule set
 * 2026-08-13 on the reading chapter: the prompt is 3rem against English's 1.7,
 * and `.fc-front .jp` keeps that gap wherever else Japanese lands.
 */

/* ------------------------------ Japanese inside the page's own prose ------ */

/* The same bump reading.css makes, for the same reason and to the same numbers:
   jp-ar.css gives `.jp` the Japanese face but no size, so かな quoted in a
   paragraph renders visibly smaller than the Latin around it. Farhad's rule of
   2026-08-13 — the Japanese is set at least 3px larger than the Latin — was
   asked of the reading chapter first; a page built after it should be born
   following it rather than wait for the pass over the lessons.

   Scoped to pages that load this stylesheet, which is the deck alone. */
@media screen {
  .jp { font-size: 1.2em; }
  .kicker .jp { font-size: 1.3em; }
}

.fc-controls { align-items: flex-start; }

/* ------------------------------------------------------------- the chapters */

.fc-chapters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fc-chapters > * { min-width: 0; }

.fc-chapbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  font: 500 11px/1.3 var(--mono);
  color: var(--muted);
  min-width: 0;
}
.fc-chapbox:hover { border-color: var(--accent); }
/* `.on` is toggled in JS rather than selected with `:has(input:checked)`. The
   `:has` version worked, but a checkbox that only looks checked when the
   stylesheet is new is the kind of thing nobody notices until a reader on an
   older browser sees four identical grey pills. */
.fc-chapbox.on {
  border-color: var(--accent);
  background: var(--blue-bg);
  color: var(--accent-ink);
}
.fc-chapbox input { accent-color: var(--accent); margin: 0; }
.fc-chapnum { font-weight: 700; color: var(--accent-ink); }
/* The chapter's name is the first thing to go at phone width; the number is
   what identifies it and stays. */
.fc-chapname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 30rem) {
  .fc-chapname { display: none; }
}

/* ---------------------------------------------------------------- the modes */

.fc-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--s-3) 0 var(--s-2);
}
.fc-mode { padding: 9px 16px; font-size: 12px; }
.fc-mode.on {
  border-color: var(--accent);
  background: var(--blue-bg);
  color: var(--accent-ink);
  font-weight: 700;
}
.fc-mode:disabled { opacity: .45; cursor: default; }
.fc-mode:disabled:hover { border-color: var(--border); background: var(--card); }

.fc-strip {
  font: 500 12px/1.5 var(--mono);
  color: var(--muted);
  margin: 0 0 var(--s-3);
}

/* ---------------------------------------------------------------- the stage */

.fc-stage { display: none; }
.fc-stage.shown { display: block; }

.fc-empty { display: none; font: 500 12px/1.5 var(--mono); color: var(--faint); }
.fc-empty.shown { display: block; }

.fc-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: var(--s-4) var(--s-3);
  margin: var(--s-2) 0 var(--s-3);
  min-height: 11rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.fc-card > * { min-width: 0; max-width: 100%; }
.fc-card.is-flipped {
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  border-color: var(--accent);
  background: var(--blue-bg);
}

.fc-front { min-width: 0; }
.fc-card.is-flipped .fc-front { display: none; }

.fc-prompt {
  margin: 0;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.fc-prompt.is-ja {
  font-family: var(--jp);
  font-size: 3rem;
  font-weight: 500;
  color: var(--jp-ink);
}
.fc-prompt.is-en {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--ink);
}
.fc-prompt.is-ar {
  font-family: var(--ar);
  font-size: 2.4rem;
  line-height: 1.9;
  color: var(--ar-ink);
  direction: rtl;
  unicode-bidi: isolate;
}

.fc-side {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: var(--s-2) 0 0;
}

/* ----------------------------------------------------------------- the back */

.fc-back { display: none; min-width: 0; }
.fc-card.is-flipped .fc-back { display: block; }

.fc-back .kana-headline { margin-bottom: var(--s-2); }
.fc-back-en { margin: 0 0 var(--s-1); font-size: 1.05rem; color: var(--ink); }

.fc-back-ar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0 0 var(--s-2);
  min-width: 0;
}
.fc-back-ar > * { min-width: 0; }
.fc-back-ar .ar-i {
  font-family: var(--ar);
  font-size: 1.35rem;
  line-height: 1.95;
  color: var(--ar-ink);
}

.fc-back-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0 0 var(--s-2);
  font: 500 11px/1.5 var(--mono);
  color: var(--faint);
  min-width: 0;
}
.fc-back-meta > * { min-width: 0; }
.fc-chip {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  white-space: nowrap;
}
.fc-back-cat { overflow-wrap: break-word; }

.fc-history {
  font: 500 11px/1.5 var(--mono);
  color: var(--faint);
  margin: var(--s-2) 0 0;
}

/* -------------------------------------------------------------- the buttons */

.fc-flip { padding: 11px 22px; font-size: 12px; }
.fc-flip[hidden] { display: none; }

.fc-rate { display: none; gap: 10px; flex-wrap: wrap; }
.fc-rate.shown { display: flex; }
.fc-rate > * { min-width: 0; }

.fc-rate-btn {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font: 600 13px/1.2 var(--mono);
  color: var(--ink);
}
.fc-rate-btn:active { transform: scale(.98); }
.fc-rate-btn.is-knew { border-color: var(--green-edge); background: var(--green-bg); color: var(--green); }
.fc-rate-btn.is-miss { border-color: var(--wrong-edge); background: var(--wrong-bg); color: var(--wrong-ink); }
.fc-rate-btn.is-knew:hover { border-color: var(--green); }
.fc-rate-btn.is-miss:hover { border-color: var(--wrong-ink); }

.fc-forget {
  display: block;
  margin: var(--s-4) auto 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 500 11px/1.4 var(--mono);
  color: var(--faint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fc-forget:hover { color: var(--wrong-ink); }

.fc-done .drill-restart { margin-top: var(--s-2); }

/* ------------------------------------------------------------------- print */

/* A deck is a screen exercise — on paper it is one blank card and a dead
   button. The page's prose prints; the widget does not. */
@media print {
  .fc-mounted { display: none; }
}