.learn-words-page .wl-header-title {
  min-width: 0;
}

.learn-words-page .vl-card-subtle {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.learn-words-page .progress {
  height: 8px;
  border-radius: 999px;
}

.learn-words-page .progress-bar {
  border-radius: 999px;
}

.learn-words-page .display-6 {
  overflow-wrap: anywhere;
}

.learn-words-page #sentences-section,
.learn-words-page .input-group {
  min-width: 0;
}

@media (max-width: 576px) {
  .learn-words-page .vl-card-subtle {
    padding: 1rem;
  }

  .learn-words-page.is-typing .card-top-offset,
  .learn-words-page.is-typing .wl-progress-wrap,
  .learn-words-page.is-typing .reveal-btn,
  .learn-words-page.is-typing .wl-streak {
    display: none !important;
  }

  .learn-words-page.is-typing .vl-card-subtle {
    padding: 0.5rem 0.875rem;
  }

  .learn-words-page.is-typing #hidden-word {
    font-size: 1.5rem;
  }

  .learn-words-page.is-typing #guess {
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
  }

  .learn-words-page.is-typing #check-guess-btn {
    font-size: 1rem;
    padding: 0.375rem 0.75rem;
  }

  .learn-words-page.is-typing .wl-guess-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .learn-words-page.is-typing .sentence-item {
    padding: 0.5rem 0.625rem;
  }

  /* Hide the global footer only while mobile learn-words typing is active. */
  body:has(.learn-words-page.is-typing) > footer {
    display: none;
  }

  /* Zero both vertical margins while typing — margin-bottom avoids the blank
   * strip left after the hidden footer, margin-top reclaims ~48px under the
   * navbar that would otherwise push content (Word/Translation card) above
   * the visible viewport on long-sentence vocabulary items. */
  body:has(.learn-words-page.is-typing) > main {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Ensure nested diff spans inherit the parent color (green/red). */
.correct-word *,
.wrong-word * {
  color: inherit;
  font-weight: inherit;
}

/* Harmonize label and word fonts */
:root {
  /* Learn Words monospace sizing token (used only in learn_words.css) */
  --lw-mono-size: 0.95rem;
}

/* Labels above the diff grid */
.diff-label strong {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--lw-mono-size);
  line-height: 1.2; /* prevents clipping on tall glyphs */
  font-weight: bold;
}

/* Diff grid characters */
.vl-typo-wrap .vl-typo-ch {
  font-size: var(--lw-mono-size);
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.2;
}


/* Reserve approximately one feedback line so Correct/Incorrect never shifts the card. */
.learn-words-page .wl-feedback {
  min-height: 1.75rem;
}


/* Streak indicator: a labelled pill next to the word actions, never adjacent
 * to the masked word, so the grey dot is not read as another mask character. */
.learn-words-page .wl-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
}

.learn-words-page .wl-streak .streak-circle {
  margin-left: 0;
}

.learn-words-page .wl-section-title {
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

/* The mode filter stays reachable on every width; below md only the visible
 * text label is dropped (it remains available to screen readers). */
@media (max-width: 767.98px) {
  .learn-words-page .wl-filter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Summary layout is scoped so book cards and the word exercise stay unchanged. */
.learn-words-page .learning-summary {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 2rem);
}
.learning-summary-recommendation {
  margin-bottom: 1.25rem;
}
.learning-summary-primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}
.learning-summary-primary:empty { display: none; }
.learning-summary-primary form { display: contents !important; }
.learning-summary .btn {
  min-height: 2.75rem;
  white-space: normal;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.learning-summary .badge { flex-shrink: 0; }
.learning-summary-new {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.5rem;
}
.learning-summary-secondary { margin-top: 1.5rem; }
.learning-summary-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.learning-summary-help {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.learning-summary summary { cursor: pointer; }
.learning-summary [data-recommended="1"] {
  font-weight: 600;
}
.learning-summary .btn:focus-visible,
.learning-summary summary:focus-visible {
  outline: 3px solid var(--bs-body-color, #212529);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  .learning-summary-primary { grid-template-columns: 1fr; }
  .learning-summary-secondary .btn,
  .learning-summary-new .btn,
  .learning-summary-links .btn { width: 100%; }
  .learning-summary-links { flex-direction: column; }
}

#wordInfoModal .modal-dialog { max-width: 40rem; }
#wordInfoModal .modal-body { overflow-wrap: anywhere; }
#wordInfoModal .btn { min-height: 2.75rem; white-space: normal; }
#wordInfoModal .btn-close { min-width: 2rem; min-height: 2rem; }
#wordInfoModal #wiGoldExamples details {
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
}
#wordInfoModal #wiGoldExamples summary { cursor: pointer; font-weight: 500; }
#wordInfoModal .btn:focus-visible,
#wordInfoModal summary:focus-visible {
  outline: 3px solid var(--bs-body-color, #212529);
  outline-offset: 3px;
}
@media (max-width: 575.98px) {
  #wordInfoModal #wiLoadTranslationBtn { width: 100%; }
  #wordInfoModal #wiDescTranslationRow > div:first-child { flex-wrap: wrap; }
}