/**
 * yb-keyword-card.css  v1  (2026-06-30)
 * Flashcard keyword display fix (mobile-first): the card was a fixed-height box with
 * absolutely-centered text and no overflow handling, so multi-keyword lists / large
 * student fonts overflowed and clipped top+bottom. This makes the card height fluid and
 * the text area center-or-scroll (never clipped). Pairs with yb-keyword-card.js (adds the
 * .word-text-inner wrapper + one-keyword-per-line). Reversible: remove the <link> in index.html.
 */

/* fluid card height instead of dead 360px/340px */
.studys-word-content .word {
  height: clamp(300px, 56vh, 440px) !important;
  max-width: 560px;
  perspective: 1600px;
}
.studys-word-content .word li {
  height: 100% !important;
  overflow: hidden;
  border-radius: 32px;
}

/* center the audio button */
.studys-word-content .word-vector {
  transform: translateX(-50%) !important;
  z-index: 3;
}

/* text area: scroll-or-center, kills the top:50%/translateY clip */
.studys-word-content .word-front-text,
.studys-word-content .word-back-text {
  top: 56px !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 16px !important;
  transform: none !important;
  display: flex !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  font-size: clamp(19px, 5vw, 28px) !important;
  line-height: 1.45 !important;
  scrollbar-width: thin;
}

/* inner wrapper (added by yb-keyword-card.js): margin:auto = center when short, scroll when tall */
.studys-word-content .word-text-inner {
  margin: auto;
  width: 100%;
  text-align: center;
  font-weight: 700;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 4px 2px 8px;
  box-sizing: border-box;
}
.studys-word-content .word-text-inner p { margin: 0.2em 0; text-align: center; }
.studys-word-content .word-text-inner a { color: inherit; text-decoration: none; pointer-events: none; }

/* normalize teacher-pasted <ul><li> so it doesn't inherit the flip-card li rules */
.studys-word-content .word-text-inner ul,
.studys-word-content .word-text-inner ol {
  list-style: none; padding: 0; margin: 0; text-align: left;
}
.studys-word-content .word-text-inner li {
  position: static !important; top: auto !important; left: auto !important;
  right: auto !important; bottom: auto !important; width: auto !important;
  max-width: none !important; height: auto !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; transition: none !important;
  overflow: visible !important; backface-visibility: visible !important;
  display: list-item !important; padding: 6px 4px;
}

/* plain-text keyword list → one keyword per line */
.studys-word-content .kw-list { display: flex; flex-direction: column; gap: 2px; }
.studys-word-content .kw-item { padding: 8px 6px; line-height: 1.4; }
.studys-word-content .kw-item + .kw-item { border-top: 1px solid rgba(0, 0, 0, 0.07); }
.studys-word-content .word-back-text .kw-item + .kw-item { border-top-color: rgba(255, 255, 255, 0.16); }

/* thin scrollbars */
.studys-word-content .word-front-text::-webkit-scrollbar,
.studys-word-content .word-back-text::-webkit-scrollbar { width: 5px; }
.studys-word-content .word-front-text::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }
.studys-word-content .word-back-text::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 4px; }

/* tablet / desktop */
@media only screen and (min-width: 768px) {
  .studys-word-content .word {
    width: 640px !important;
    max-width: 92%;
    height: clamp(360px, 52vh, 480px) !important;
  }
  .studys-word-content .word li { height: 100% !important; }
  .studys-word-content .word-front-text,
  .studys-word-content .word-back-text { font-size: clamp(22px, 3vw, 32px) !important; }
}