/* ============================================================
   SETTINGS INTEGRATION v1 — 2026-07-17
   Memastikan SEMUA tombol/toggle di panel Setelan Baca (⚙️)
   benar-benar terpetakan ke tampilan pada halaman bab.
   File ini di-load PALING AKHIR agar mengalahkan aturan
   `!important` dari unify-colors.css yang sebelumnya membekukan
   warna kanji, warna arti, warna furigana, dan font arti pengguna.
   
   Rules of engagement:
   - Selektor dinaikkan spesifisitasnya (:root/body prefiks) supaya
     memenangkan cascade tanpa efek samping.
   - Semua override memakai CSS custom properties yang di-set
     N1ReadPrefs.apply() di progress.js.
   - Ada fallback var() ke UC/tema — jadi kalau user pilih
     "Bawaan", tampilan tetap sama dengan sebelumnya.
   ============================================================ */

/* ------------------------------------------------------------
   1. WARNA KANJI (.word-jp) — panel: "Warna Kanji"
   Sebelumnya unify-colors.css memaksa color:var(--uc-accent)!important
   ------------------------------------------------------------ */
html body .word-jp,
html[data-theme="dark"] body .word-jp,
html body.sepia-mode .word-jp {
  color: var(--word-jp-color, var(--uc-accent, var(--pink))) !important;
}

/* Nomor kartu & judul TOC — ikut warna kanji supaya konsisten
   dan agar tombol "Warna Kanji" terlihat efeknya. */
html body .card-num,
html body .toc-kanji,
html body .chap-kanji,
html[data-theme="dark"] body .card-num,
html[data-theme="dark"] body .toc-kanji,
html[data-theme="dark"] body .chap-kanji,
html body.sepia-mode .card-num,
html body.sepia-mode .toc-kanji,
html body.sepia-mode .chap-kanji {
  color: var(--word-jp-color, var(--uc-accent, var(--pink))) !important;
}

/* Badge kelas kata (bunkei/dooshi/adj/dll) — ikut warna kanji sebagai background */
html body .pos-badge,
html body .toc-num,
html[data-theme="dark"] body .pos-badge,
html[data-theme="dark"] body .toc-num,
html body.sepia-mode .pos-badge,
html body.sepia-mode .toc-num {
  background: var(--word-jp-color, var(--uc-accent)) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   2. WARNA ARTI (.word-id-ind, .example-id, .dialogue-id) —
      panel: "Warna Arti"
   ------------------------------------------------------------ */
html body .word-id-ind,
html[data-theme="dark"] body .word-id-ind,
html body.sepia-mode .word-id-ind {
  color: var(--word-id-color, var(--text)) !important;
}
html body .example-id,
html body .dialogue-id,
html[data-theme="dark"] body .example-id,
html[data-theme="dark"] body .dialogue-id,
html body.sepia-mode .example-id,
html body.sepia-mode .dialogue-id {
  color: var(--word-id-example-color, var(--word-id-color, var(--translation-color, var(--text)))) !important;
}

/* ------------------------------------------------------------
   3. WARNA FURIGANA (rt) — panel: "Warna Furigana"
   ------------------------------------------------------------ */
html body rt,
html body ruby rt,
html[data-theme="dark"] body rt,
html body.sepia-mode rt {
  color: var(--word-furi-color, var(--muted)) !important;
}

/* ------------------------------------------------------------
   4. FONT LATIN untuk teks arti/plus-box/warning/UI —
      panel: "Gaya Huruf Arti" (Inter/Nunito/Poppins/Lora/Mudah Baca)
   Sebelumnya unify-colors.css baris 345-348 memaksa 'Inter' saja.
   ------------------------------------------------------------ */
html body .word-id-ind,
html body .example-id,
html body .dialogue-id,
html body .plus-box,
html body .warning-note,
html body .grammar-intro,
html body .grammar-intro[style],
html body .meaning-row,
html body .meaning-word {
  font-family: var(--latin-font, 'Inter', 'Nunito', system-ui, sans-serif) !important;
}
/* strong di dalam blok arti — pakai font Latin juga (jangan warisi serif JP) */
html body .plus-box strong,
html body .warning-note strong,
html body .grammar-intro strong,
html body .grammar-intro[style] strong {
  font-family: var(--latin-font, 'Inter', 'Nunito', system-ui, sans-serif) !important;
}

/* ------------------------------------------------------------
   5. FONT JEPANG (kanji, furigana, contoh kalimat) —
      panel: "Gaya Huruf Jepang" (Mincho / Gothic)
   Perkuat supaya benar-benar menang bila ada aturan lain.
   ------------------------------------------------------------ */
html body [lang="ja"],
html body .word-jp,
html body .example-jp,
html body .dialogue,
html body .chap-kanji,
html body .toc-kanji,
html body .meaning-word[lang="ja"] {
  font-family: var(--jp-font, 'Noto Serif JP'), 'Yu Mincho', 'YuMincho', 'Hiragino Mincho Pro', serif !important;
}

/* ------------------------------------------------------------
   6. UKURAN HURUF S/M/L/XL — panel: "Ukuran Huruf"
   Variabel sudah di-set (--word-jp-size, --body-size,
   --example-size, --sub-size). Selektor sengaja dibuat lebih
   spesifik daripada `html body .word-card .word-jp` di
   n{level}-text-size.css supaya menang cascade.
   Sekaligus mengalirkan nilai user ke variabel --n2-ts-* yang
   dipakai n{level}-text-size.css, agar dua sistem sinkron.
   ------------------------------------------------------------ */
/* Alirkan preferensi Ukuran Huruf ke variabel --n2-ts-* dan --n4-ts-*
   supaya file n{level}-text-size.css tidak lagi memaksa ukuran fixed. */
html body .word-card,
html[data-theme] body .word-card,
html body.sepia-mode .word-card {
  --n2-ts-word-jp:     var(--word-jp-size, 20px);
  --n2-ts-example-jp:  var(--example-size, 13px);
  --n2-ts-example-id:  var(--body-size, 13px);
  --n2-ts-pembentukan: var(--body-size, 13px);
  --n2-ts-makna:       var(--body-size, 13px);
  --n2-ts-tip:         var(--sub-size, 12px);
  --n3-ts-word-jp:     var(--word-jp-size, 20px);
  --n3-ts-example-jp:  var(--example-size, 13px);
  --n3-ts-example-id:  var(--body-size, 13px);
  --n3-ts-pembentukan: var(--body-size, 13px);
  --n3-ts-makna:       var(--body-size, 13px);
  --n3-ts-tip:         var(--sub-size, 12px);
  --n4-ts-word-jp:     var(--word-jp-size, 20px);
  --n4-ts-example-jp:  var(--example-size, 13px);
  --n4-ts-example-id:  var(--body-size, 13px);
  --n4-ts-pembentukan: var(--body-size, 13px);
  --n4-ts-makna:       var(--body-size, 13px);
  --n4-ts-tip:         var(--sub-size, 12px);
}

/* Selektor eksplisit yang mengalahkan `html body .word-card .word-jp`
   di n{level}-text-size.css (kedua rule sama-sama :is/attr-count 3,
   selektor kita PANJANG dengan 4 kelas → 40 spesifisitas > 30). */
html body .word-card.word-card .word-jp {
  font-size: var(--word-jp-size, 20px) !important;
}
html body .word-card.word-card .example-jp,
html body .word-card.word-card .dialogue {
  font-size: var(--example-size, 13px) !important;
}
html body .word-card.word-card .example-id,
html body .word-card.word-card .dialogue-id,
html body .word-card.word-card .word-id-ind {
  font-size: var(--body-size, 13px) !important;
}
html body .word-card.word-card .plus-box {
  font-size: var(--body-size, 13px) !important;
}
html body .word-card.word-card .tip-box,
html body .word-card.word-card .sub-note,
html body .word-card.word-card .furi-note {
  font-size: var(--sub-size, 12px) !important;
}

/* ------------------------------------------------------------
   7. SPASI BARIS (line-height) — panel: "Spasi Baris"
   ------------------------------------------------------------ */
html body .example-jp,
html body .dialogue,
html body .word-jp {
  line-height: var(--lh-jp, 1.7) !important;
}
html body .example-id,
html body .dialogue-id,
html body .word-id-ind {
  line-height: var(--lh-id, 1.6) !important;
}

/* ------------------------------------------------------------
   8. JARAK KARTU — panel: "Jarak Kartu"
   ------------------------------------------------------------ */
html body .word-list {
  gap: var(--card-gap, 1px) !important;
}
html body .word-card {
  margin-bottom: var(--card-gap, 1px) !important;
}

/* ------------------------------------------------------------
   9. MODE FOKUS — panel: "Mode Fokus" (.focus-mode)
   Pastikan class terpasang menyembunyikan contoh/plus/warning.
   ------------------------------------------------------------ */
html body.focus-mode .example-box,
html body.focus-mode .plus-box,
html body.focus-mode .warning-note,
html body.focus-mode .grammar-intro,
html body.focus-mode .tip-box,
html body.focus-mode .nuance-box {
  display: none !important;
}
/* Sisakan hanya .word-jp + .word-meta (kata & arti) */
html body.focus-mode .card-body .sub-note,
html body.focus-mode .card-body .furi-note {
  display: none !important;
}

/* ------------------------------------------------------------
   10. MODE RINGKAS (Compact) — panel Belajar Aktif: "▤ Ringkas"
   ------------------------------------------------------------ */
html body.compact-mode .example-box,
html body.compact-mode .plus-box,
html body.compact-mode .tip-box,
html body.compact-mode .nuance-box,
html body.compact-mode .warning-note {
  display: none !important;
}

/* ------------------------------------------------------------
   11. HIGHLIGHT POLA ON/OFF — panel Belajar Aktif: "✏️ Highlight Pola"
   unify-colors.css sudah men-set .highlight ke var(--uc-accent).
   Saat highlight-off, kembalikan ke warna teks normal + tanpa
   underline supaya benar-benar tidak berbeda dari teks sekitarnya.
   Selektor `html body.highlight-off` cukup spesifik untuk kalahkan
   .example-jp .highlight (2 kelas + tag) dan .highlight (1 kelas).
   ------------------------------------------------------------ */
html body.highlight-off .highlight,
html body.highlight-off .example-jp .highlight,
html body.highlight-off .dialogue .highlight,
html body.highlight-off .word-jp .highlight {
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-weight: inherit !important;
}
html body.highlight-off .highlight ruby,
html body.highlight-off .highlight ruby rt {
  color: inherit !important;
}

/* ------------------------------------------------------------
   12. SEMBUNYIKAN ARTI (Belajar Aktif) —
       body.hide-translation-mode + .revealed
   ------------------------------------------------------------ */
html body.hide-translation-mode .word-id-ind,
html body.hide-translation-mode .example-id,
html body.hide-translation-mode .dialogue-id {
  filter: blur(6px);
  cursor: pointer;
  transition: filter 0.2s ease;
  user-select: none;
}
html body.hide-translation-mode .word-id-ind.revealed,
html body.hide-translation-mode .example-id.revealed,
html body.hide-translation-mode .dialogue-id.revealed {
  filter: none;
  user-select: text;
}
html body.hide-translation-mode .word-id-ind:hover,
html body.hide-translation-mode .example-id:hover,
html body.hide-translation-mode .dialogue-id:hover {
  filter: blur(3px);
}

/* ------------------------------------------------------------
   13. MODE FURIGANA — 'show' | 'tap' | 'hidden'
   Sudah didefinisikan di style.css tetapi kita perkuat
   agar tetap efektif meski ada override tema.
   ------------------------------------------------------------ */
html body.furigana-hidden rt {
  display: none !important;
}
html body.furigana-tap rt {
  color: transparent !important;
  background: var(--uc-border, rgba(120,120,120,.25)) !important;
  border-radius: 3px;
  transition: color 0.15s;
  cursor: pointer;
}
html body.furigana-tap ruby.furi-revealed rt,
html body.furigana-tap .furi-revealed rt {
  color: var(--word-furi-color, var(--muted)) !important;
  background: transparent !important;
}

/* ------------------------------------------------------------
   14. SEMBUNYIKAN KATA YANG SUDAH DIPELAJARI
       — panel utama progress: "🙈 Sembunyikan yang sudah dipelajari"
   ------------------------------------------------------------ */
html body.hide-learned-mode .word-card.is-learned {
  display: none !important;
}

/* ------------------------------------------------------------
   15. SLIDER KANJI INLINE — Belajar Aktif: "Aa: Slider Kanji"
   ------------------------------------------------------------ */
html body:not(.show-inline-font-ctrl) .inline-font-ctrl {
  display: none !important;
}
html body.show-inline-font-ctrl .inline-font-ctrl {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 6px 10px;
  background: var(--uc-bg-2, rgba(0,0,0,0.04));
  border: 1px solid var(--uc-border, rgba(0,0,0,0.1));
  border-radius: 8px;
  font-size: 12px;
}
html body.show-inline-font-ctrl .inline-font-ctrl label {
  font-weight: 600;
  color: var(--uc-text, var(--text));
  min-width: 46px;
}
html body.show-inline-font-ctrl .inline-font-ctrl input[type="range"] {
  flex: 1;
  min-width: 100px;
}
html body.show-inline-font-ctrl .inline-font-ctrl .ifc-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--uc-accent, var(--pink));
  min-width: 34px;
  text-align: right;
}

/* ------------------------------------------------------------
   16. MODE SATU KARTU — Belajar Aktif: "▣ Satu Kartu"
   Sudah didefinisikan di override.css; pastikan overlay hadir
   ------------------------------------------------------------ */
html body.one-card-mode #reading-toolbar,
html body.one-card-mode #back-to-top,
html body.one-card-mode #section-indicator {
  display: none !important;
}

/* ------------------------------------------------------------
   17. FULLSCREEN — panel: "⛶ Buka Layar Penuh"
   ------------------------------------------------------------ */
html body.is-fullscreen .page-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ------------------------------------------------------------
   18. STATE AKTIF TOMBOL PANEL (visual feedback bahwa toggle bekerja)
   ------------------------------------------------------------ */
#rtb-panel .rtb-opt.active,
#rtb-panel .rtb-font-opt.active,
#rtb-panel .rtb-focus-btn.active,
#rtb-panel .rtb-swatch.active {
  background: var(--uc-accent, var(--pink)) !important;
  color: #fff !important;
  border-color: var(--uc-accent, var(--pink)) !important;
  box-shadow: 0 0 0 2px var(--uc-accent, var(--pink)) inset,
              0 2px 8px rgba(0,0,0,0.15);
}
#rtb-panel .rtb-swatch.active {
  outline: 3px solid var(--uc-accent, var(--pink));
  outline-offset: 2px;
}
#rtb-panel .rtb-font-opt.active .rtb-font-check {
  display: inline-block !important;
  color: #fff !important;
  font-weight: 800;
}
#rtb-panel .rtb-font-opt:not(.active) .rtb-font-check {
  display: none !important;
}

/* ------------------------------------------------------------
   19. SMOOTH TRANSITION — supaya pergantian setting terasa hidup
   ------------------------------------------------------------ */
.word-jp, .example-jp, .dialogue,
.word-id-ind, .example-id, .dialogue-id,
rt, .card-num, .toc-kanji, .pos-badge {
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    font-size 0.18s ease,
    line-height 0.18s ease,
    font-family 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .word-jp, .example-jp, .dialogue,
  .word-id-ind, .example-id, .dialogue-id,
  rt, .card-num, .toc-kanji, .pos-badge {
    transition: none !important;
  }
}

/* ============================================================
   END settings-integration.css
   ============================================================ */