/* ============================================================
   n2-text-size.css
   ────────────────────────────────────────────────────────────
   Sistem pengaturan ukuran teks per-komponen melalui CSS Variables.
   Nilai variabel diatur via slider di menu Settings (⚙️) dan
   disimpan ke localStorage oleh n2-text-size.js.

   Range: 8px – 30px per komponen.
   Tidak mengubah HTML, layout, tema, navigasi, atau fitur lain.
   Furigana (rt) di atas kanji TETAP proporsional & sejajar
   karena memakai satuan em relatif terhadap teks induk.
   ============================================================ */

:root {
  /* Default size (mengikuti ukuran rata-rata di mobile/desktop saat ini).
     Saat slider digerakkan, n2-text-size.js akan menimpa variabel ini
     melalui document.documentElement.style.setProperty(). */
  --n2-ts-word-jp:           22px;   /* Judul Pola Tata Bahasa (.word-jp)            */
  --n2-ts-example-jp:        17px;   /* Contoh Kalimat Jepang  (.example-jp/.dialogue) */
  --n2-ts-example-id:        14px;   /* Arti Indonesia         (.example-id/.dialogue-id) */
  --n2-ts-pembentukan:       14px;   /* 接続 / Pembentukan     (.plus-box--pembentukan) */
  --n2-ts-makna:             14px;   /* 意味 / Makna&Penggunaan (.plus-box--makna)      */
  --n2-ts-tip:               13px;   /* Catatan / Tip          (.tip-box)                */

  /* Rasio furigana terhadap teks induk (selalu proporsional).
     0.55 = 55% dari font-size kanji — angka aman agar ruby tidak
     menyentuh underline / huruf di atasnya. Lihat .word-jp rt dst. */
  --n2-ts-furi-ratio:        0.55;
}

/* ────────────────────────────────────────────────────────────
   PENERAPAN — gunakan !important + selektor lebih spesifik
   agar selalu mengalahkan aturan di n2-override.css yang ada.
   Variabel boleh diganti realtime; CSS sudah pakai var() jadi
   tidak perlu rebuild.
   ──────────────────────────────────────────────────────────── */

/* 1. Judul Pola Tata Bahasa (.word-jp) */
html body .word-card .word-jp {
  font-size: var(--n2-ts-word-jp) !important;
}

/* 2. Contoh Kalimat Jepang (.example-jp dan .dialogue) */
html body .word-card .example-jp,
html body .word-card .dialogue {
  font-size: var(--n2-ts-example-jp) !important;
}

/* 3. Arti Indonesia (.example-id dan .dialogue-id) */
html body .word-card .example-id,
html body .word-card .dialogue-id {
  font-size: var(--n2-ts-example-id) !important;
}

/* 4. Pembentukan / 接続 — .plus-box yang ditandai oleh n2-text-size.js */
html body .word-card .plus-box.plus-box--pembentukan {
  font-size: var(--n2-ts-pembentukan) !important;
}

/* 5. Makna & Penggunaan / 意味 — .plus-box dengan latar oranye */
html body .word-card .plus-box.plus-box--makna {
  font-size: var(--n2-ts-makna) !important;
}

/* Fallback: .plus-box yang belum sempat diberi sub-kelas (mis. baru
   di-render) → tetap pakai ukuran Pembentukan agar tidak loncat. */
html body .word-card .plus-box:not(.plus-box--makna):not(.plus-box--pembentukan) {
  font-size: var(--n2-ts-pembentukan) !important;
}

/* 6. Catatan / Tip (.tip-box) */
html body .word-card .tip-box {
  font-size: var(--n2-ts-tip) !important;
}

/* ────────────────────────────────────────────────────────────
   FURIGANA — proporsional & sejajar di atas kanji
   ──────────────────────────────────────────────────────────── */

/* Override semua rt di dalam kartu agar selalu RELATIF terhadap
   teks induk (em, bukan px). Dengan begitu, slider mengubah ukuran
   kanji → ukuran furigana ikut menyesuaikan proporsi. */
html body .word-card .word-jp rt,
html body .word-card .example-jp rt,
html body .word-card .dialogue rt,
html body .word-card .plus-box rt,
html body .word-card .tip-box rt {
  /* calc() diperlukan agar var() bisa dikalikan dengan 1em.
     Hasil: furigana selalu = ratio × ukuran kanji di atasnya.
     Slider ubah ukuran kanji → furigana ikut menyesuaikan. */
  font-size: calc(var(--n2-ts-furi-ratio, 0.55) * 1em) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  ruby-align: center;
  white-space: nowrap;
}

/* Pastikan ruby base tetap sejajar tengah & tidak miring oleh
   ruby-overhang di font tertentu. */
html body .word-card ruby {
  ruby-position: over;
  ruby-align: center;
  ruby-overhang: auto;
}

/* ────────────────────────────────────────────────────────────
   SLIDER UI DI DALAM SETTINGS PANEL (#rtb-panel)
   ──────────────────────────────────────────────────────────── */

#rtb-panel .rtb-group.n2-ts-group {
  /* mengikuti gaya .rtb-group lain (jarak, dsb.) */
}

#rtb-panel .n2-ts-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: nowrap;
}

#rtb-panel .n2-ts-slider-label {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted, #666);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

#rtb-panel .n2-ts-slider {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  accent-color: var(--n2-primary, #1976d2);
  cursor: pointer;
}

#rtb-panel .n2-ts-slider-val {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted, #666);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}

#rtb-panel .n2-ts-reset-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

#rtb-panel .n2-ts-reset-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid var(--card-border, #ddd);
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted, #666);
}
#rtb-panel .n2-ts-reset-btn:hover {
  background: var(--n2-example-bg, #e3f2fd);
  color: var(--n2-primary-dark, #0d47a1);
}

/* Dark mode tweak */
[data-theme="dark"] #rtb-panel .n2-ts-slider-label,
[data-theme="dark"] #rtb-panel .n2-ts-slider-val {
  color: var(--muted, #bbb);
}