/* ===== Inline controls layout ===== */
.lesson-controls--vocab {
  display: flex;
  align-items: stretch;
  gap: clamp(1px, 0.5vw, 5px);
  flex-wrap: nowrap;
}

@media (max-width: 640px) {
  .lesson-controls--vocab {
    gap: 1px;
  }
}

.lesson-controls--vocab .left-controls,
.lesson-controls--vocab .right-controls {
  display: contents;
}

.lesson-controls--vocab #removeFromDeck,
.lesson-controls--vocab #openCustomMeaning,
.lesson-controls--vocab #playVocabFemaleBtn,
.lesson-controls--vocab #playVocabMaleBtn,
.lesson-controls--vocab #previousLesson,
.lesson-controls--vocab #nextLesson,
.lesson-controls--vocab .font-picker>#fontPickerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  padding: 16px clamp(10px, 2vw, 24px);
  font-size: 1.2rem;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--lesson-inline-btn-min-height, 48px);
}

.lesson-controls--vocab .font-picker {
  min-width: 0;
  display: contents;
}

/* ===== Keep buttons inside the card as the viewport shrinks ===== */
@media (max-width: 1500px) {
  .lesson-controls--vocab .font-picker>#fontPickerBtn {
    min-width: 0;
  }
}

@media (max-width: 1200px) {
  .lesson-controls--vocab #playVocabFemaleBtn {
    flex: 0 1 auto;
  }

  .lesson-controls--vocab #playVocabMaleBtn {
    display: none !important;
  }

  .lesson-controls--vocab #playVocabFemaleBtn .audio-sex {
    display: none !important;
  }

  .lesson-controls--vocab #playVocabFemaleBtn .audio-icon {
    display: inline-block;
  }
}

/* ===== Example Sentences (vocab) — same fixes you applied to kana ===== */
/* 2) Allow "Show Furigana" to wrap and grow vertically */
#sentencesSection .sentences-tools .small {
  height: auto;
  /* allow multi-line */
  white-space: normal;
  /* permit wrapping */
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  /* consistent with other small buttons */
}

html:not(.theme-dark) body.lesson-vocab #sentencesSection #toggleFuri {
  border-color: var(--border) !important;
}

/* 3) Tighten JP multi-line spacing a bit vs global */
#sentencesSection .jp-sentence {
  line-height: 1.5;
}

/* 1) Community Mnemonics header: keep Show same height as Add when Add wraps */
#communityMnemonicsCard .card-head {
  align-items: stretch;
}

#communityMnemonicsCard #cmnHeaderAddBtn,
#communityMnemonicsCard #cmnHeaderToggleBtn {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  line-height: 1.2;
  height: auto;
  min-height: 44px;
}

/* ===== Disabled state for Previous button (vocab only) ===== */
.lesson-controls--vocab #previousLesson.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(60%);
  pointer-events: none;         /* prevent hover/focus states */
  box-shadow: none !important;
}

/* ===== Details panel typography ===== */
body.lesson-vocab .vocab-side .side-body {
  font-size: 1.3rem;
}

body.lesson-vocab .vocab-side .reading {
  font-size: 1.3rem;
  font-weight: 800;
}

body.lesson-vocab .vocab-side .mnemonic,
body.lesson-vocab .vocab-side .pos-list,
body.lesson-vocab .vocab-side .pos-list .chip {
  font-size: inherit;
}

/* ===== Component kanji cards — align with kanji radical cards ===== */
body.lesson-vocab .vocab-side .kanjis-grid {
  --rad-card-scale: 1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(12px * var(--rad-card-scale, 1));
  align-items: flex-start;
}

body.lesson-vocab .vocab-side .kanji-chip {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(6px * var(--rad-card-scale, 1));
  padding: calc(14px * var(--rad-card-scale, 1)) calc(12px * var(--rad-card-scale, 1));
  border-radius: calc(12px * var(--rad-card-scale, 1));
  min-width: calc(90px * var(--rad-card-scale, 1));
  min-height: calc(110px * var(--rad-card-scale, 1));
  text-align: center;
}

body.lesson-vocab .vocab-side .kanji-char {
  font-size: calc(5.4rem * var(--rad-card-scale, 1));
  line-height: 1;
  font-weight: 800;
}

body.lesson-vocab .vocab-side .kanji-meaning {
  font-size: calc(0.95rem * var(--rad-card-scale, 1));
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
}

/* ===== Example sentences styling ===== */
html:not(.theme-dark) body.lesson-vocab .sentences-head h2 {
  color: var(--teal);
}

@media (max-width: 640px) {
  body.lesson-vocab .vocab-wrap {
    padding: 0;
    gap: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  body.lesson-vocab .vocab-wrap > .card {
    border-radius: 0;
    flex: 1 1 auto;
  }

  body.lesson-vocab .vocab-main .card-body.vocab-body {
    padding-left: 5px;
    padding-right: 5px;
  }

  body.lesson-vocab .sentences-card {
    margin: 0;
    width: 100%;
  }

  body.lesson-vocab .sentences-head h2 {
    font-size: 1.5rem;
  }

  body.lesson-vocab .sentences-tools #toggleFuri {
    font-size: 1.08rem;
    padding: 10px 14px;
    border-radius: 13px;
  }

  body.lesson-vocab #sentencesList {
    padding: 5px;
    gap: 6px;
  }

  body.lesson-vocab .sentence-actions .icon-btn {
    width: 38px;
    height: 38px;
    font-size: 1.23rem;
    margin: 0;
  }

  body.lesson-vocab .sentence-actions .icon-btn.biggify {
    transform: scale(1.1);
  }

  body.lesson-vocab .jp-sentence,
  body.lesson-vocab .en-sentence {
    font-size: 1rem;
  }
}