/* ===== Inline controls layout (match vocab lesson behavior) ===== */

.lesson-controls--kana {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(2px, 1vw, 10px);
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

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

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

.lesson-controls--kana #removeFromDeck,
.lesson-controls--kana #openCustomMeaning,
.lesson-controls--kana #playKanaFemaleBtn,
.lesson-controls--kana #playKanaMaleBtn,
.lesson-controls--kana #prevBtn,
.lesson-controls--kana #nextBtn {
  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);
  align-self: stretch;
  height: 100%;
}

.lesson-controls--kana .audio-btn {
  gap: 0.5em;
}

.lesson-controls--kana .audio-btn .audio-icon {
  line-height: 1;
}

@media (max-width: 1500px) {
  .lesson-controls--kana #playKanaMaleBtn {
    display: none !important;
  }

  .lesson-controls--kana #playKanaFemaleBtn {
    flex: 0 1 auto;
  }

  .lesson-controls--kana #playKanaFemaleBtn .audio-sex {
    display: none !important;
  }

  .lesson-controls--kana #playKanaFemaleBtn .audio-icon {
    display: inline-block;
  }
}

@media (max-width: 640px) {
  body.lesson-kana .lesson-main .card-body.lesson-body {
    padding-left: 2px;
    padding-right: 2px;
  }

  body.lesson-kana #kanaSentencesSection {
    margin: 0;
    border-radius: 0;
    width: 100%;
  }

  body.lesson-kana .lesson-side {
    margin-bottom: 0;
  }

  body.lesson-kana .lesson-side + #kanaSentencesSection {
    margin-top: 0;
  }

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

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

  body.lesson-kana #kanaSentencesList {
    padding: 5px;
    gap: 6px;
  }

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

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

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

/* Kana-only: make both header buttons the same height even when one wraps */
#communityMnemonicsCard .card-head {
  align-items: stretch;            /* let children stretch to the row height */
}

#communityMnemonicsCard #cmnHeaderAddBtn,
#communityMnemonicsCard #cmnHeaderToggleBtn {
  align-self: stretch;             /* match the tallest sibling */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: normal;             /* allow “Add a mnemonic” to wrap */
  height: auto;                    /* grow with the row */
  min-height: 44px;                /* keep a solid tap target */
}

/* Kana-only: allow Show Furigana to wrap and grow */
#kanaSentencesSection .sentences-tools .small {
  height: auto !important;         /* cancel global fixed height */
  white-space: normal;             /* label can wrap to 2 lines */
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;              /* same visual weight as other small buttons */
}

html:not(.theme-dark) body.lesson-kana .sentences-head h2 {
  color: var(--teal);
}

html.theme-dark body.lesson-kana .sentences-head h2 {
  color: var(--teal);
}

/* Kana-only: reduce JP line-height to a prudent amount */
#kanaSentencesSection .jp-sentence {
  line-height: 1.5;                /* was ~1.9/2.2 in global rules */
}

/* Furigana color in reviews: muted tone like lessons-vocab */
#kanaSentencesSection .jp-sentence rt {
  color: var(--muted, #9aa0a6);
}