/* ============================================================
   N2 UNIFY COLORS — satu warna kalem & konsisten di semua mode
   (light / dark / sepia), diadaptasi dari pendekatan yang sama
   dipakai di proyek N3 Bunpo (unify-colors.css).

   Sebelumnya N2 punya 3 warna kotak berbeda di satu kartu:
     - example-box → biru pucat (--n2-example-bg)
     - tip-box     → kuning     (--n2-tip-bg)
     - plus-box    → ungu / oranye inline (--n2-plus-bg / #fff3e0)
   Warna-warna yang saling berbeda ini membuat satu kartu terasa
   ramai saat semua terbuka bersamaan. File ini menyatukannya jadi
   1 aksen biru netral, dan tetap memakai variabel --n2-* yang
   sudah ada supaya tidak bentrok dengan n2-override.css.

   Ditulis dengan selector setara/lebih spesifik dari rule asli
   (sama-sama !important) supaya menang tanpa perlu mengubah file
   lama (style.css, n2-override.css, n2-final-theme.css tetap utuh).
   ============================================================ */

:root{
  --uc-bg:      #eef2f9;
  --uc-bg-2:    #e4eaf5;
  --uc-border:  #90a4c8;
  --uc-accent:  #3b5998;
  --uc-text:    #24304a;
}

[data-theme="dark"]{
  --uc-bg:      #1c2333;
  --uc-bg-2:    #232c40;
  --uc-border:  #4a5a82;
  --uc-accent:  #9db4e8;
  --uc-text:    #dbe2f0;
}

body.sepia-mode{
  --uc-bg:      #f1e9d8;
  --uc-bg-2:    #e9dfc8;
  --uc-border:  #b8a67e;
  --uc-accent:  #5c4a2a;
  --uc-text:    #3a2f1c;
}

/* ------------------------------------------------------------
   example-box (Contoh Kalimat)
   — DIUBAH: bukan lagi 1 kotak besar berisi semua kalimat dengan
   divider tipis di dalamnya, tapi TIAP kalimat contoh (pasangan
   example-jp + example-id) tampil sebagai kartu terpisah sendiri,
   dengan jarak putih murni di antaranya — meniru cara N3 Bunpo
   menampilkan tiap contoh kalimat sebagai unit visual sendiri.
   Tidak mengubah data JSON: example-box tetap ada sebagai wadah
   pembungkus/pemberi jarak kiri, tapi tidak lagi diberi 1 warna
   latar menerus untuk semua kalimat di dalamnya.
   ------------------------------------------------------------ */
.example-box{
  background: transparent !important;
  border-left: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[data-theme="dark"] .example-box,
body.sepia-mode .example-box{
  background: transparent !important;
  border-left: none !important;
}

/* Label "Contoh Kalimat" — tetap di luar kartu-kartu kalimat,
   jadi judul mini untuk keseluruhan box */
.example-box > div[style*="font-weight:700"]{
  margin: 0 0 10px 2px !important;
}

/* Tiap kalimat (example-jp) membuka sebuah "kartu" baru: latar +
   border kiri + radius atas. example-id (terjemahannya) menutup
   kartu yang sama: radius bawah, tanpa border-top supaya menyatu
   visual dengan example-jp di atasnya sebagai SATU kotak. */
.example-jp{
  display: block;
  background: var(--uc-bg) !important;
  border-left: 4px solid var(--uc-accent) !important;
  border-radius: 8px 8px 0 0;
  padding: 12px 12px 4px !important;
  margin: 0 !important;
}
.example-id{
  display: block;
  background: var(--uc-bg) !important;
  border-left: 4px solid var(--uc-accent) !important;
  border-radius: 0 0 8px 8px;
  padding: 4px 12px 12px !important;
  margin: 0 !important;
}
[data-theme="dark"] .example-jp,
[data-theme="dark"] .example-id,
body.sepia-mode .example-jp,
body.sepia-mode .example-id{
  background: var(--uc-bg) !important;
  border-left-color: var(--uc-accent) !important;
}

/* Spacer bawaan <div style="height:6px;"> di antara tiap pasangan
   kalimat — sebelumnya diubah jadi garis putus-putus; sekarang
   dijadikan jarak putih murni antar "kartu kalimat" supaya kalimat
   1 dan kalimat 2 terlihat sebagai 2 kotak terpisah, bukan 1 kotak
   panjang dengan garis pembatas di tengahnya. */
.example-box > div[style*="height:6px"]{
  height: 14px !important;
  border-top: none !important;
  margin: 0 !important;
}
.example-box > div[style*="height:6px"]:last-child{
  height: 0 !important;
}

/* ------------------------------------------------------------
   plus-box (接続 Pembentukan & 意味 Makna) — termasuk varian
   inline style="background:#fff3e0..." yang dipakai untuk kotak
   Makna & Penggunaan
   ------------------------------------------------------------ */
.plus-box,
.plus-box[style]{
  background: var(--uc-bg) !important;
  border-color: var(--uc-border) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
.plus-box strong,
.plus-box[style] strong{
  color: var(--uc-accent) !important;
}
[data-theme="dark"] .plus-box,
[data-theme="dark"] .plus-box[style],
body.sepia-mode .plus-box,
body.sepia-mode .plus-box[style]{
  background: var(--uc-bg) !important;
  color: var(--uc-text) !important;
}
[data-theme="dark"] .plus-box strong,
body.sepia-mode .plus-box strong{
  color: var(--uc-accent) !important;
}

/* Kotak Makna (意味, varian inline style="background:#fff3e0...")
   diberi shade sedikit lebih terang dari kotak Pembentukan (接続) di
   atasnya — masih 1 keluarga warna biru-abu, tapi cukup beda supaya
   mata langsung sadar sudah pindah dari 1 kotak ke kotak lain tanpa
   perlu menambah warna baru yang mencolok */
.plus-box[style*="fff3e0"]{
  background: var(--uc-bg-2) !important;
}
[data-theme="dark"] .plus-box[style*="fff3e0"],
body.sepia-mode .plus-box[style*="fff3e0"]{
  background: var(--uc-bg-2) !important;
}

/* Tabel di dalam plus-box (mis. tabel Pola Pembentukan Bab 20–22) */
.plus-box table{ border-color: var(--uc-border) !important; }
.plus-box table tr{ background: transparent !important; }
.plus-box table tr[style],
.plus-box table td[style]{
  background: var(--uc-bg-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
}
.plus-box table tr:first-child td[style]{
  background: var(--uc-bg-2) !important;
  color: var(--uc-accent) !important;
}
.plus-box table td[style] strong{ color: var(--uc-accent) !important; }
.plus-box table tr:nth-child(even) td[style]{ background: var(--uc-bg-2) !important; }
[data-theme="dark"] .plus-box table tr[style],
[data-theme="dark"] .plus-box table td[style],
body.sepia-mode .plus-box table tr[style],
body.sepia-mode .plus-box table td[style]{
  background: var(--uc-bg-2) !important;
  color: var(--uc-text) !important;
}
[data-theme="dark"] .plus-box table tr:first-child td[style],
body.sepia-mode .plus-box table tr:first-child td[style]{
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   tip-box (💡 Ingat) & nuance-box
   ------------------------------------------------------------ */
.tip-box, .nuance-box{
  background: transparent !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
.tip-icon, .nuance-icon{ color: var(--uc-accent) !important; }

/* ------------------------------------------------------------
   Highlight kata kunci di kalimat contoh — satu warna, semua mode
   ------------------------------------------------------------ */
.example-jp .highlight,
.dialogue .highlight,
.highlight{
  background: none !important;
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   section-header (kotak judul di atas tiap section)
   ------------------------------------------------------------ */
.section-header{
  background: var(--uc-bg) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
.section-header .sec-kanji,
.section-header:not(:has(.sec-num-badge)){
  color: var(--uc-accent) !important;
}
.section-header .sec-num-badge,
.section-header .sec-label{
  background: var(--uc-accent) !important;
  color: #fff !important;
}
[data-theme="dark"] .section-header,
body.sepia-mode .section-header{
  background: var(--uc-bg) !important;
  border-left-color: var(--uc-accent) !important;
  color: var(--uc-text) !important;
}
[data-theme="dark"] .section-header .sec-kanji,
body.sepia-mode .section-header .sec-kanji{
  color: var(--uc-accent) !important;
}

/* ------------------------------------------------------------
   Judul pola Jepang (.word-jp) — dikembalikan ke warna teks utama
   (hitam di light mode / putih-terang di dark mode), BUKAN warna
   aksen biru/hijau. Fallback var(--text) dipakai hanya jika user
   belum memilih warna kanji custom lewat Reading Toolbar.
   ------------------------------------------------------------ */
.word-jp{ color: var(--word-jp-color, var(--text)) !important; }
.pos-badge{ background: var(--uc-accent) !important; color: #fff !important; }
.card-num{ color: var(--uc-accent) !important; }
.toc-num{ background: var(--uc-accent) !important; }
.toc-kanji{ color: var(--uc-accent) !important; }
[data-theme="dark"] .card-num,
body.sepia-mode .card-num{
  background: transparent !important;
  color: var(--uc-accent) !important;
}

/* ============================================================
   KENYAMANAN BACA — spacing, line-height, & pemisahan tipografi
   (tidak mengubah ukuran font dasar agar slider S/M/L/XL user
   tetap berfungsi normal; hanya menambah jarak & line-height)
   ============================================================ */

/* Jarak antar kotak (plus-box, tip-box, example-box) dilonggarkan
   supaya mata dapat "napas" antar blok informasi. Jarak dibedakan:
   transisi ke JENIS kotak baru (mis. Contoh Kalimat → Pembentukan)
   diberi jarak lebih besar daripada transisi di dalam kotak yang
   sama, supaya mata merasakan "pindah topik" bukan sekadar baris baru. */
.plus-box{ margin-top: 22px !important; }
.tip-box{ margin-top: 16px !important; }
.example-box{ margin-top: 16px !important; margin-bottom: 4px !important; }
.plus-box + .plus-box{ margin-top: 24px !important; }

/* Kotak tip (💡) yang menempel setelah plus-box (mis. setelah 意味)
   sering terasa "nempel" karena keduanya sama-sama box terakhir di
   card — beri jarak setara dengan jarak antar plus-box */
.plus-box + .tip-box{ margin-top: 20px !important; }

/* Jarak antar word-card (satu pola tata bahasa ke pola berikutnya)
   diperjelas dengan padding bawah + garis pemisah bawaan yang sudah
   ada (border-bottom di .word-card) supaya lebih terasa sebagai batas
   card, bukan sekadar lanjutan konten.
   Base style.css memakai --card-gap: 1px (via .word-list { gap }) —
   nyaris tidak ada jarak sama sekali antar pola. Dinaikkan ke 14px
   supaya mata jelas "berhenti sebentar" sebelum pola berikutnya. */
:root{ --card-gap: 14px !important; }
.card-body{ padding: 14px 16px 20px !important; }
.word-card{ padding-bottom: 10px !important; }

/* Baris dengan furigana (ruby) — line-height lebih lega supaya rt
   tidak terlalu mepet ke baris sebelumnya di kalimat contoh panjang.
   (Padding kartu kalimat sudah diatur di definisi .example-jp/.example-id
   di atas — di sini hanya menambah line-height, tidak menimpa padding.) */
.example-jp{
  line-height: 2 !important;
}
ruby{ margin: 0 1px; }
rt{ line-height: 1.4; }

/* Kotak Makna (意味) & Pembentukan (接続) sering berisi 1 paragraf
   panjang tanpa jeda baris (3-4 kalimat digabung). Line-height
   dinaikkan sedikit dari 1.6 bawaan supaya paragraf padat ini tetap
   terasa lega dibaca di layar sempit, tanpa mengubah teksnya. */
.plus-box{
  line-height: 1.85 !important;
}
.tip-box{
  line-height: 1.7 !important;
}

/* Pemisahan gaya tipografi: teks Jepang tetap serif, teks Indonesia
   sans-serif — supaya mata langsung tahu sedang membaca bagian mana */
.example-id, .word-id-ind,
.plus-box, .tip-box{
  font-family: 'Inter', 'Nunito', system-ui, sans-serif !important;
}
[lang="ja"], .example-jp, .word-jp{
  font-family: var(--jp-font, 'Noto Serif JP'), 'Yu Mincho', serif !important;
}

/* ------------------------------------------------------------
   Titik-titik "mikro" yang masih mepet — ini yang paling sering
   dilihat mata karena berulang di SETIAP kalimat/kartu, jadi
   dampaknya ke rasa "menumpuk" lebih besar daripada jarak antar
   kotak besar yang sudah diperbaiki di atas.
   ------------------------------------------------------------ */

/* 1) Kalimat Jepang → terjemahan Indonesia: sekarang keduanya
   sudah jadi 1 "kartu" menyatu (lihat definisi .example-jp/.example-id
   di bagian atas file — radius+padding membuatnya terlihat sebagai
   1 kotak), jadi TIDAK perlu margin tambahan di sini lagi (margin-top
   akan merusak penyatuan visual kartu jp+id).

/* 2) Judul pola (word-jp) → baris badge 文型 + arti singkat
   (word-meta), base cuma margin-top: 4px — nyaris menempel padahal
   ini transisi pertama yang dilihat mata di setiap kartu. */
.word-meta{ margin-top: 8px !important; margin-bottom: 2px !important; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   OVERRIDE WARNA INLINE HARDCODE DI JSON
   Semua warna label, kotak, badge disatukan ke 1 aksen biru
   ============================================================ */

/* Label sub-heading A. B. (inline style="color:#e91e8c" / color:#9c27b0 dll) */
.example-box > div[style*="color:#e91e8c"],
.example-box > div[style*="color:#9c27b0"],
.example-box > div[style*="color:#1976d2"],
.example-box > div[style*="color:#1565c0"],
.example-box > div[style*="color:#2e7d32"],
.example-box > div[style*="color:#388e3c"],
.example-box > div[style*="color:#b71c1c"],
.example-box > div[style*="color:#e65100"],
.example-box > div[style*="color:#4527a0"],
.example-box > div[style*="color:#6a1b9a"],
.example-box > div[style*="color:#880e4f"],
.example-box > div[style*="color:#01579b"],
.example-box > div[style*="color:#0277bd"] {
  color: var(--uc-accent) !important;
}

/* Border kiri example-box yang berwarna-warni (inline style="border-left-color:#...") */
.example-box[style*="border-left-color"],
.example-box[style*="border-left"],
.example-box[style] {
  border-left-color: var(--uc-accent) !important;
}

/* pos-badge (文型) yang hardcode pink inline */
.pos-badge[style*="background:#e91e8c"],
.pos-badge[style*="background"],
span.pos-badge[style] {
  background: var(--uc-accent) !important;
  color: #fff !important;
}

/* plus-box background inline berwarna-warni (#f3e9fb, #e8eaf6, #fff3e0 dll) */
.plus-box[style*="background:#f3e9fb"],
.plus-box[style*="background:#e8eaf6"],
.plus-box[style*="background:#f4f1fb"],
.plus-box[style*="background:#faf0ff"],
.plus-box[style*="background:#ede7f6"],
.plus-box[style*="background:#f5f5ff"],
.plus-box[style*="background:#f9f7ff"],
.plus-box[style*="background:#f4f5fb"],
.plus-box[style*="background:#f0f7ff"],
.plus-box[style*="background:#e8f5e9"],
.plus-box[style*="background:#f1f8e9"],
.plus-box[style*="background:#f0fff4"],
.plus-box[style*="background:#e1f5fe"],
.plus-box[style*="background:#e3f2fd"],
.plus-box[style*="background:#fce4ec"],
.plus-box[style*="background:#fff0f5"],
.plus-box[style*="background:#fbe9e7"],
.plus-box[style*="background:#fff8e1"],
.plus-box[style*="background:#fff8ee"],
.plus-box[style*="background:#fef6f4"],
.plus-box[style*="background:#e9f6f4"],
.plus-box[style*="background:#eef0fa"],
.plus-box[style*="background:#f9fbe7"],
.plus-box[style*="background:#fff5f7"] {
  background: var(--uc-bg) !important;
  border-color: var(--uc-border) !important;
  border-left-color: var(--uc-accent) !important;
}

/* strong di dalam plus-box yang hardcode warna */
.plus-box strong[style*="color"],
.plus-box > strong[style] {
  color: var(--uc-accent) !important;
}

/* Border plus-box inline */
.plus-box[style*="border:1px solid #b39ddb"],
.plus-box[style*="border:1px solid #7e57c2"],
.plus-box[style*="border:1px solid #a5d6a7"],
.plus-box[style*="border:1px solid #1976d2"],
.plus-box[style*="border:1px solid #90caf9"],
.plus-box[style*="border:1px solid #f48fb1"],
.plus-box[style*="border:1px solid #ff9800"] {
  border-color: var(--uc-border) !important;
  border-left-color: var(--uc-accent) !important;
}

/* Tabel header inline di dalam plus-box */
.plus-box table tr[style*="background:#"],
.plus-box table td[style*="background:#"],
.plus-box table th[style*="background:#"] {
  background: var(--uc-bg-2) !important;
  color: var(--uc-text) !important;
  border-color: var(--uc-border) !important;
}
.plus-box table tr:first-child td[style*="background:#"],
.plus-box table tr:first-child th[style*="background:#"] {
  color: var(--uc-accent) !important;
}

/* warning-note / perhatian box inline */
div[style*="background:#fff8e1"],
div[style*="background:#fff3e0"],
div[style*="background:#fbe9e7"],
div[style*="background:#ffebee"] {
  background: var(--uc-bg-2) !important;
  border-color: var(--uc-border) !important;
  color: var(--uc-text) !important;
}

/* ============================================================
   DEFAULT WARNA HITAM — judul pola, arti, furigana
   ============================================================ */
:root {
  --word-jp-color: #111111;
  --word-id-color: #111111;
}
[data-theme="dark"] {
  --word-jp-color: #e8e8e8;
  --word-id-color: #e8e8e8;
}
body.sepia-mode {
  --word-jp-color: #2a1f0e;
  --word-id-color: #2a1f0e;
}

/* Judul pola Jepang */
.word-jp { color: var(--word-jp-color) !important; }

/* Arti/terjemahan Indonesia */
.word-id-ind { color: var(--word-id-color) !important; }

/* Furigana — sedikit lebih muda agar tidak terlalu berat */
rt { color: var(--word-jp-color) !important; opacity: 0.7; }

/* ============================================================
   FIX — tip-box (💡) berisi kalimat Jepang panjang dengan ruby
   (furigana) tabrakan/numpuk ke baris di atasnya saat wrap.
   Akar masalah: .tip-box hanya diberi line-height 1.7, lebih kecil
   dari .example-jp (2) dan .plus-box (1.85), padahal isi tip-box
   sering mengandung kalimat Jepang panjang + ruby yang butuh ruang
   vertikal ekstra untuk furigana saat teks wrap ke baris baru.
   Solusi: samakan line-height tip-box dengan example-jp saat
   mengandung ruby, dan beri sedikit padding vertikal ekstra. ============================================================ */
.tip-box {
  line-height: 2 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.tip-box ruby {
  margin: 0 1px;
}
/* Furigana di dalam tip-box: pastikan tidak menempel ke baris atas
   dengan memberi sedikit jarak vertikal antar baris yang mengandung ruby */
.tip-box rt {
  line-height: 1 !important;
}