/* The isolated foreign-language word being learned (flashcard front, MC
   prompt/options on whichever side is the vocab, free-text/pronunciation
   prompt) - never translations or body text, see the mode JS files for
   exactly where this is applied. Loaded last so it reliably wins the cascade
   over .btn/.flashcard-lemma, which also set font-family at equal specificity. */
.lang-word { font-family: var(--font-vocab); }

.session-screen {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.session-progress {
  height: 8px;
  background: var(--color-paper-dim);
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--color-ink);
}

.session-progress-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width var(--transition-medium);
}

.session-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.session-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.session-exit {
  justify-content: flex-start;
  min-width: 0;
  padding-left: 0;
}

.session-label {
  color: var(--color-muted);
  font-size: 0.9rem;
  text-align: right;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-heading span {
  color: var(--color-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-pills .btn {
  min-width: 0;
  padding-inline: var(--space-2);
  font-size: 0.85rem;
}

/* --- Flashcard 3D flip --------------------------------------------------*/
.flashcard-wrap {
  perspective: 1200px;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.flashcard {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(0.4, 0.2, 0.2, 1);
}

.flashcard.is-flipped { transform: rotateY(180deg); }

.flashcard-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
  box-shadow: var(--shadow-hard-accent);
  text-align: center;
}

.flashcard:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.flashcard-back {
  transform: rotateY(180deg);
  justify-content: flex-start;
  overflow-y: auto;
}

.flashcard-lemma { font-size: 1.8rem; }
.flashcard-hint { color: var(--color-muted); font-size: 0.9rem; }
.flashcard-example { font-style: italic; color: var(--color-muted); font-size: 0.9rem; margin-top: var(--space-2); }
.flashcard-side-label,
.flashcard-example-label {
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flashcard-answer { width: 100%; }
.flashcard-alternatives { color: var(--color-muted); font-size: 0.85rem; margin-top: var(--space-1); }

.flashcard-example-card {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--color-paper-dim);
  text-align: left;
  line-height: 1.45;
}

.flashcard-example-source { margin-top: var(--space-1); }
.flashcard-example-translation { margin-top: var(--space-2); }
.flashcard-example-translation span {
  display: block;
  color: var(--color-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
.flashcard-example-empty { color: var(--color-muted); font-size: 0.85rem; }
.flashcard-toggle { align-self: center; }

.rating-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}

/* --- Multiple choice -----------------------------------------------------*/
.mc-options {
  display: grid;
  gap: var(--space-2);
}

.mc-option { width: 100%; justify-content: flex-start; text-align: left; }

/* --- Cloze / free text ---------------------------------------------------*/
.cloze-sentence { font-size: 1.2rem; line-height: 1.6; }
.cloze-blank {
  display: inline-block;
  min-width: 4ch;
  border-bottom: 2px solid var(--color-ink);
  text-align: center;
}

.free-text-input {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1.1rem;
  background: var(--color-paper);
  color: var(--color-ink);
}

.diff-line { font-size: 1rem; margin-top: var(--space-2); }
.diff-correct { color: var(--color-green); }
.diff-wrong { color: var(--color-red); text-decoration: line-through; }

/* --- Live dictionary --------------------------------------------------- */
.dict-result {
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--color-paper);
}

.dict-result-lemma { font-size: 1.2rem; }
.dict-result-translation { color: var(--color-muted); margin-top: 2px; }

@media (max-width: 380px) {
  .flashcard-face { padding: var(--space-3); }
  .rating-row { gap: var(--space-1); }
  .rating-row .btn { padding-inline: var(--space-2); font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .flashcard { transition: none; }
}