/* 書介カードの共通スタイル。intro.html と聖書本文ページのポップアップで共有する。
   フォントはBIBLE（bible/index.html）が保存する fontFamily/individualFonts/fontWeight を
   共有し、独自のプリセットは持たない（適用は各ページ側のスクリプトで行う）。 */

.text-english,
.text-chinese,
.text-japanese {
  line-height: 1.6;
}

/* グローバルナビ（z-index:10000）より前面に出す。
   Tailwind の z-50 では上端がナビに隠れる。 */
#bookIntroPopup {
  z-index: 10001;
}

/* 言語チップ（ポップアップ上部）。テーマの配色トークンに合わせる。 */
.book-intro-chip {
  padding: 4px 12px;
  color: var(--amana-ink-subtle);
  background: var(--amana-surface-raised);
  border: 1px solid var(--amana-border-strong);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.book-intro-chip:hover {
  background: var(--amana-surface-sunken);
}

.book-intro-chip.active {
  color: var(--amana-on-accent);
  background: var(--amana-accent);
  border-color: var(--amana-accent);
}

/* パラレル表示トグル。言語チップとは役割が違うので副アクセント色で区別する。 */
.book-intro-parallel-toggle {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: var(--amana-ink-subtle);
  background: var(--amana-surface-raised);
  border: 1px solid var(--amana-border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.book-intro-parallel-toggle:hover {
  background: var(--amana-surface-sunken);
}

.book-intro-parallel-toggle.active {
  color: var(--amana-on-accent);
  background: var(--amana-accent-2);
  border-color: var(--amana-accent-2);
}