/* ═══════════════════════════════════════════════════════════════════
   journal.css

   TENTANG LEBAR

   Yang menentukan lebar kolom baca bukan lebar layar, melainkan kenyamanan
   mata: sekitar 65–75 huruf per baris. Di atas itu, mata kehilangan awal
   baris berikutnya setiap kali berpindah, dan orang mulai membaca ulang
   baris yang sama tanpa sadar.

   Karena itu pada layar 8K teksnya TIDAK dibentangkan. Ruang berlebih
   dipakai untuk daftar yang lebih lapang, atau dibiarkan kosong. Ruang
   kosong bukan pemborosan — ia yang membuat tulisan terbaca.

   Ukuran huruf memakai clamp() sehingga tumbuh mengikuti layar tanpa titik
   putus yang kaku: dari ponsel 320px sampai monitor 7680px, perubahannya
   mengalir.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --jr-tinta:#16211C;
  --jr-tinta-2:#4A5A52;
  --jr-tinta-3:#8B968F;
  --jr-kertas:#FBFCFA;
  --jr-kartu:#FFFFFF;
  --jr-garis:rgba(22,33,28,.10);
  --jr-hijau:#1A3A2E;
  --jr-lime:#D6F24B;
  --jr-mint:#2F8F6E;

  /* ── Skala tipografi ──
     Ukuran huruf dihitung dari lebar layar, bukan dipilih dari beberapa
     titik putus. Artinya pada 8K, 16K, atau resolusi apa pun yang belum ada
     namanya, perbandingannya tetap — tidak ada ukuran yang "pecah" karena
     layarnya melampaui titik putus terakhir yang pernah dipikirkan.

     Batas atas tetap ada, dan itu disengaja. Huruf yang terus membesar
     mengikuti monitor akan melampaui jarak baca yang nyaman: pada jarak
     lengan, huruf 30px sudah terlalu besar berapa pun resolusinya. Yang
     bertambah pada layar besar seharusnya JUMLAH yang terlihat, bukan
     ukuran satu-satunya.

     Lebar kolom memakai ch — satuan yang mengikat pada lebar huruf itu
     sendiri, bukan pada piksel. Enam puluh delapan huruf tetap enam puluh
     delapan huruf, sebesar apa pun hurufnya. */
  --jr-kolom:68ch;
  --jr-tepi:clamp(16px, 4vw, 48px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.jr{margin:0;background:var(--jr-kertas);color:var(--jr-tinta);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  /* 15px pada 320px, 19px pada ~1050px, lalu berhenti. Kemiringannya
     landai supaya perubahannya tidak terasa melompat saat jendela diubah. */
  font-size:clamp(15px, 0.55vw + 13.2px, 19px);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  /* Huruf tetap tajam pada kerapatan piksel berapa pun: teks digambar dari
     bentuk vektor, jadi ia tidak dapat pecah — yang pecah hanya gambar. */
  text-rendering:optimizeLegibility}

/* ═══════════ Bilah atas ═══════════ */
.jr-top{position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:clamp(10px, 2vw, 24px);
  padding:12px var(--jr-tepi);
  background:rgba(251,252,250,.86);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--jr-garis)}
.jr-brand{display:flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--jr-hijau);flex:0 0 auto}
.jr-brand svg{width:21px;height:21px}
.jr-brand b{font:700 clamp(15px,.4vw+14px,18px) Fraunces,Georgia,serif}

.jr-tabs{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.jr-tabs::-webkit-scrollbar{display:none}
.jr-tab{flex:0 0 auto;padding:8px 14px;border-radius:99px;text-decoration:none;
  color:var(--jr-tinta-2);font:600 13.5px Inter,sans-serif;
  white-space:nowrap;transition:background .15s,color .15s}
.jr-tab:hover{background:rgba(22,33,28,.05)}
.jr-tab.on{background:var(--jr-hijau);color:#fff}

.jr-act{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.jr-ic{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  color:var(--jr-tinta-2);text-decoration:none;transition:background .15s}
.jr-ic:hover{background:rgba(22,33,28,.06);color:var(--jr-hijau)}
.jr-ic svg{width:17px;height:17px}

.jr-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:11px;cursor:pointer;text-decoration:none;
  border:1px solid var(--jr-garis);background:transparent;color:var(--jr-tinta);
  font:600 13px Inter,sans-serif;transition:all .15s}
.jr-btn:hover{border-color:rgba(22,33,28,.2);background:rgba(22,33,28,.03)}
.jr-btn svg{width:15px;height:15px}
.jr-btn.pri{background:var(--jr-hijau);border-color:var(--jr-hijau);color:var(--jr-lime);
  font-weight:700}
.jr-btn.pri:hover{background:#204A3A}
.jr-btn.sub{color:var(--jr-tinta-3);border-color:transparent}
.jr-btn.sub:hover{color:var(--jr-tinta)}
.jr-btn.bahaya{color:#A94747;border-color:rgba(169,71,71,.28)}
.jr-btn.bahaya:hover{background:rgba(169,71,71,.07)}

/* ═══════════ Pemberitahuan blokir ═══════════ */
.jr-ban{margin:16px var(--jr-tepi) 0;padding:14px 18px;border-radius:14px;
  background:rgba(169,71,71,.07);border:1px solid rgba(169,71,71,.22);
  font-size:13.5px;line-height:1.55;color:#7A3838}
.jr-ban b{display:block;margin-bottom:3px;color:#8E3C3C}
.jr-ban span{display:block;opacity:.85}

/* ═══════════ Daftar ═══════════ */
.jr-main{padding:clamp(20px, 4vw, 56px) var(--jr-tepi) 80px}

/* Kolom tumbuh mengikuti lebar, tetapi tiap kartu tidak pernah melebar
   melampaui lebar baca yang nyaman. Pada 8K itu berarti banyak kolom
   sempit, bukan sedikit kolom raksasa. */
.jr-grid{display:grid;gap:clamp(12px, 1.5vw, 22px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  max-width:150rem;margin:0 auto}

.jr-card{display:flex;flex-direction:column;gap:9px;
  padding:clamp(16px, 1.6vw, 24px);border-radius:16px;text-decoration:none;
  background:var(--jr-kartu);border:1px solid var(--jr-garis);color:inherit;
  transition:transform .2s cubic-bezier(.2,.8,.25,1),box-shadow .2s,border-color .2s}
.jr-card:hover{transform:translateY(-2px);border-color:rgba(22,33,28,.16);
  box-shadow:0 8px 26px rgba(20,40,30,.08)}
.jr-card.pin{border-color:rgba(214,242,75,.6);
  box-shadow:inset 3px 0 0 var(--jr-lime)}
.jr-card-h{display:flex;align-items:center;gap:8px}
.jr-card-h time{margin-left:auto;font:500 11.5px ui-monospace,monospace;
  color:var(--jr-tinta-3)}
.jr-card h3{margin:0;font:600 clamp(15px,.35vw+14px,18px)/1.35 Fraunces,Georgia,serif;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jr-card p{margin:0;font-size:13px;line-height:1.55;color:var(--jr-tinta-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jr-card-f{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;
  font-size:11.5px;color:var(--jr-tinta-3)}
.jr-card-f i{font-style:normal;opacity:.5}
.jr-pulih{color:var(--jr-mint);font-weight:600;cursor:pointer}

/* Penanda bentuk tulisan. Warnanya berbeda supaya buku harian dan tulisan
   terbuka tidak pernah tertukar sekilas — kesalahan itu mahal. */
.jr-kind{padding:3px 9px;border-radius:99px;
  font:700 10px Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.jr-kind.k-diary{background:rgba(147,109,183,.14);color:#6B4A8C}
.jr-kind.k-journal{background:rgba(47,143,110,.13);color:#227356}
.jr-kind.k-post{background:rgba(214,242,75,.34);color:#4A5A18}
.jr-dot{width:7px;height:7px;border-radius:50%;background:#936DB7;flex:0 0 auto}
.jr-dot.t{background:var(--jr-mint)}

.jr-kosong{max-width:30rem;margin:clamp(40px,10vh,120px) auto;text-align:center}
.jr-kosong h2{margin:0 0 10px;font:600 clamp(19px,.6vw+17px,26px) Fraunces,Georgia,serif}
.jr-kosong p{margin:0 0 22px;color:var(--jr-tinta-2);line-height:1.65}

/* ═══════════ Membaca ═══════════ */
.jr-read{max-width:var(--jr-kolom);margin:0 auto;
  padding:clamp(28px, 5vw, 72px) var(--jr-tepi) 120px}

.jr-read-h{margin-bottom:clamp(24px, 3vw, 40px)}
.jr-read-h h1{margin:14px 0 12px;
  font:600 clamp(26px, 2.2vw + 20px, 44px)/1.2 Fraunces,Georgia,serif;
  letter-spacing:-.015em}
.jr-priv{display:inline-flex;align-items:center;gap:5px;margin-left:7px;
  padding:3px 9px;border-radius:99px;background:rgba(22,33,28,.06);
  font:600 10.5px Inter,sans-serif;color:var(--jr-tinta-2)}
.jr-priv svg{width:11px;height:11px}
.jr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:13px;color:var(--jr-tinta-3)}
.jr-meta i{font-style:normal;opacity:.5}
.jr-mood{padding:2px 9px;border-radius:99px;background:rgba(214,242,75,.3);
  color:#4A5A18;font-weight:600;font-size:11.5px}

/* Isi tulisan. Ukurannya sedikit lebih besar daripada antarmuka di
   sekitarnya — bacaan panjang menuntut mata lebih dari sekadar label. */
.jr-body{font-size:clamp(16px, .5vw + 14.5px, 20px);line-height:1.75;
  color:#1E2C26}
.jr-body p{margin:0 0 1.15em}
.jr-body h2{margin:1.9em 0 .55em;
  font:600 clamp(20px,.8vw+17px,29px)/1.3 Fraunces,Georgia,serif}
.jr-body h3{margin:1.6em 0 .5em;
  font:600 clamp(17px,.5vw+15px,23px)/1.35 Fraunces,Georgia,serif}
.jr-body h4{margin:1.4em 0 .45em;font:700 1em Inter,sans-serif}
.jr-body a{color:var(--jr-mint);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px}
.jr-body strong{font-weight:700}
.jr-body ul,.jr-body ol{margin:0 0 1.15em;padding-left:1.4em}
.jr-body li{margin-bottom:.35em}
.jr-body blockquote{margin:1.5em 0;padding:2px 0 2px 1.15em;
  border-left:3px solid var(--jr-lime)}
.jr-body blockquote p{margin:0 0 .5em;color:var(--jr-tinta-2);font-style:italic}
.jr-body blockquote p:last-child{margin:0}
.jr-body code{padding:2px 6px;border-radius:5px;background:rgba(22,33,28,.06);
  font:500 .87em ui-monospace,SFMono-Regular,Menlo,monospace}
.jr-body pre{margin:1.5em 0;padding:16px 18px;border-radius:12px;overflow-x:auto;
  background:#16211C;color:#D7E4DC}
.jr-body pre code{background:transparent;padding:0;color:inherit;font-size:.85em}
.jr-body hr{margin:2.4em auto;width:44px;border:0;border-top:2px solid var(--jr-garis)}
/* Gambar boleh melampaui kolom baca sedikit: gambar dinilai berbeda dari
   teks, dan mengurungnya pada lebar baca membuatnya terasa sesak. */
.jr-body img{display:block;max-width:min(100%, calc(var(--jr-kolom) + 8rem));
  width:auto;height:auto;margin:1.8em auto;border-radius:12px}

.jr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(28px,4vw,48px)}
.jr-tag{padding:4px 11px;border-radius:99px;background:rgba(22,33,28,.05);
  font-size:12px;color:var(--jr-tinta-2)}
.jr-read-f{display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(28px,4vw,48px);padding-top:22px;border-top:1px solid var(--jr-garis)}

/* ═══════════ Tanggapan ═══════════ */
.jr-komen{margin-top:clamp(32px,5vw,64px)}
.jr-komen h3{margin:0 0 16px;font:600 16px Fraunces,Georgia,serif}
.jr-kbox{display:flex;gap:10px;margin-bottom:22px}
.jr-kbox textarea{flex:1;min-height:64px;padding:11px 14px;border-radius:12px;
  border:1px solid var(--jr-garis);background:var(--jr-kartu);resize:vertical;
  font:400 14px Inter,sans-serif;line-height:1.55;color:var(--jr-tinta);outline:none}
.jr-kbox textarea:focus{border-color:var(--jr-mint);
  box-shadow:0 0 0 3px rgba(47,143,110,.11)}
.jr-k{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--jr-garis)}
.jr-k-av{width:32px;height:32px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  background:rgba(47,143,110,.14);display:grid;place-items:center;
  font:700 12px Inter,sans-serif;color:var(--jr-mint)}
.jr-k-b{flex:1;min-width:0}
.jr-k-n{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.jr-k-n b{font:600 13px Inter,sans-serif}
.jr-k-n time{font-size:11px;color:var(--jr-tinta-3)}
.jr-k-t{font-size:13.5px;line-height:1.55;color:var(--jr-tinta-2);
  white-space:pre-wrap;word-break:break-word}
.jr-k-x{margin-left:auto;border:0;background:transparent;cursor:pointer;
  color:var(--jr-tinta-3);font-size:11px;padding:2px 6px}
.jr-k-x:hover{color:#A94747}

/* ═══════════ Penyunting ═══════════ */
.jr-modal{position:fixed;inset:0;z-index:200;display:flex;
  align-items:center;justify-content:center;padding:clamp(0px,2vw,24px);
  background:rgba(22,33,28,.42);backdrop-filter:blur(8px)}
.jr-sheet{width:min(56rem,100%);max-height:100%;display:flex;flex-direction:column;
  background:var(--jr-kartu);border-radius:clamp(0px,1.4vw,20px);overflow:hidden;
  box-shadow:0 24px 70px rgba(20,40,30,.28)}
.jr-sheet-h{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-bottom:1px solid var(--jr-garis)}
.jr-sheet-h b{font:600 15px Fraunces,Georgia,serif;flex:1}
.jr-x{width:32px;height:32px;border:0;border-radius:9px;background:transparent;
  cursor:pointer;color:var(--jr-tinta-3);font-size:13px}
.jr-x:hover{background:rgba(22,33,28,.06);color:var(--jr-tinta)}
.jr-sheet-b{flex:1;min-height:0;overflow-y:auto;padding:18px}
.jr-sheet-f{display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-top:1px solid var(--jr-garis);background:rgba(22,33,28,.015)}
.jr-sheet-f .kanan{margin-left:auto;display:flex;gap:8px}

.jr-judul{width:100%;padding:10px 0;border:0;background:transparent;outline:none;
  font:600 clamp(19px,.8vw+17px,26px) Fraunces,Georgia,serif;color:var(--jr-tinta)}
.jr-judul::placeholder{color:var(--jr-tinta-3);font-weight:400}
.jr-isi{width:100%;min-height:min(52vh,420px);padding:12px 0;border:0;
  background:transparent;outline:none;resize:vertical;
  font:400 clamp(15px,.4vw+14px,17px) Inter,sans-serif;line-height:1.7;
  color:#1E2C26}
.jr-isi::placeholder{color:var(--jr-tinta-3)}

.jr-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--jr-garis)}
.jr-f{display:flex;flex-direction:column;gap:5px;flex:1;min-width:9rem}
.jr-f label{font:700 10px Inter,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--jr-tinta-3)}
.jr-f input,.jr-f select{padding:8px 11px;border-radius:9px;
  border:1px solid var(--jr-garis);background:var(--jr-kartu);outline:none;
  font:500 13px Inter,sans-serif;color:var(--jr-tinta)}
.jr-f input:focus,.jr-f select:focus{border-color:var(--jr-mint)}

/* Pilihan keterbukaan sebagai tiga kartu, bukan menu turun. Ini keputusan
   yang paling menentukan siapa dapat melihat tulisan seseorang — ia layak
   terlihat sekaligus, bukan tersembunyi di balik satu klik. */
.jr-priv-pick{display:grid;gap:8px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.jr-pp{display:flex;gap:10px;padding:12px 14px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--jr-garis);background:transparent;text-align:left;
  transition:all .15s}
.jr-pp:hover{border-color:rgba(22,33,28,.2)}
.jr-pp.on{border-color:var(--jr-mint);background:rgba(47,143,110,.06)}
.jr-pp svg{width:17px;height:17px;flex:0 0 auto;color:var(--jr-tinta-3);margin-top:1px}
.jr-pp.on svg{color:var(--jr-mint)}
.jr-pp b{display:block;font:700 12.5px Inter,sans-serif;margin-bottom:2px}
.jr-pp span{display:block;font-size:11px;line-height:1.45;color:var(--jr-tinta-3)}

.jr-hitung{font:500 11.5px ui-monospace,monospace;color:var(--jr-tinta-3)}

/* Daftar berbagi */
.jr-share-l{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.jr-share-i{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border-radius:10px;background:rgba(22,33,28,.04)}
.jr-share-i b{flex:1;font:600 13px Inter,sans-serif}
.jr-share-i button{border:0;background:transparent;cursor:pointer;
  color:var(--jr-tinta-3);font-size:11px}
.jr-share-i button:hover{color:#A94747}

.jr-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  z-index:300;padding:11px 20px;border-radius:12px;background:var(--jr-hijau);
  color:#fff;font:600 13px Inter,sans-serif;
  box-shadow:0 8px 30px rgba(20,40,30,.3);transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.jr-toast.on{transform:translateX(-50%)}

/* ═══════════ Layar sangat lebar ═══════════
   Kolom baca tidak melebar. Yang bertambah hanya ruang di sisinya, dan itu
   memang tujuannya: teks selebar monitor 8K tidak dapat dibaca siapa pun. */
/* Pada layar sangat lebar, kolomnya melonggar sedikit — tetapi hanya
   sedikit. Enam puluh delapan huruf sudah di batas atas kenyamanan; delapan
   puluh sudah mulai melelahkan. Ruang selebihnya memang dibiarkan kosong. */
@media (min-width:2400px){
  :root{--jr-kolom:72ch}
  .jr-grid{max-width:180rem}
}
@media (min-width:4000px){
  :root{--jr-kolom:76ch;--jr-tepi:clamp(48px,3vw,120px)}
}
/* Layar menegak — ponsel diputar, atau monitor yang diputar berdiri.
   Yang berubah bukan ukuran hurufnya, melainkan seberapa lega jaraknya. */
@media (orientation:portrait) and (min-width:900px){
  .jr-read{padding-top:clamp(40px,7vw,90px)}
  .jr-body{line-height:1.85}
}

/* ═══════════ Ponsel ═══════════ */
@media (max-width:640px){
  .jr-brand b{display:none}
  .jr-btn.pri span{display:none}
  .jr-btn.pri{padding:9px 12px}
  .jr-sheet{border-radius:18px 18px 0 0;max-height:96vh;margin-top:auto}
  .jr-modal{padding:0;align-items:flex-end}
  .jr-kbox{flex-direction:column}
}

/* ═══════════ Mode gelap ═══════════ */
@media (prefers-color-scheme:dark){
  :root{
    --jr-tinta:#E6EDE9;--jr-tinta-2:#A3B2AA;--jr-tinta-3:#75857C;
    --jr-kertas:#111815;--jr-kartu:#18211D;
    --jr-garis:rgba(255,255,255,.09);
  }
  .jr-top{background:rgba(17,24,21,.86)}
  .jr-brand{color:var(--jr-lime)}
  .jr-body{color:#DDE7E1}
  .jr-body pre{background:#0C120F}
  .jr-kind.k-diary{background:rgba(147,109,183,.2);color:#C3A5DC}
  .jr-kind.k-journal{background:rgba(47,143,110,.2);color:#6FCCA6}
  .jr-kind.k-post{background:rgba(214,242,75,.18);color:#C5DE58}
  .jr-tab.on{background:var(--jr-lime);color:#16211C}
  .jr-btn.pri{background:var(--jr-lime);border-color:var(--jr-lime);color:#16211C}
  .jr-btn.pri:hover{background:#C2E22F}
}

@media (prefers-reduced-motion:reduce){
  .jr-card,.jr-btn,.jr-tab,.jr-toast{transition:none}
  .jr-card:hover{transform:none}
}

/* Saat dicetak, yang tersisa hanyalah tulisannya. */
@media print{
  .jr-top,.jr-read-f,.jr-komen,.jr-tags{display:none}
  body.jr{background:#fff;font-size:11pt}
  .jr-read{max-width:none;padding:0}
  .jr-body{font-size:11pt;line-height:1.6}
}

/* ═══════════════════════════════════════════════════════════════════
   LAPISAN

   Seperti legenda peta: yang berubah bukan naskahnya, melainkan apa yang
   ditampilkan di atasnya. Naskah asli tetap sama persis meski seluruh
   lapisan dipadamkan — dan itulah yang membuatnya bertahan.
   ═══════════════════════════════════════════════════════════════════ */

.jl-legend{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  margin:0 0 clamp(20px,3vw,32px);padding:10px 0;
  border-top:1px solid var(--jr-garis);border-bottom:1px solid var(--jr-garis)}
.jl-legend-t{font:700 10px Inter,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:var(--jr-tinta-3);margin-right:3px}

.jl-lg{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border-radius:99px;cursor:pointer;border:1px solid var(--jr-garis);
  background:transparent;color:var(--jr-tinta-3);
  font:600 11.5px Inter,sans-serif;transition:all .16s}
.jl-lg svg{width:13px;height:13px}
.jl-lg em{font-style:normal;font-size:9.5px;font-weight:700;opacity:.6}
.jl-lg:hover{border-color:var(--lg,var(--jr-mint));color:var(--jr-tinta)}
/* Lapisan yang menyala memakai warnanya sendiri, sehingga hubungan antara
   tombol dan tanda di dalam teks terbaca tanpa perlu dijelaskan. */
.jl-lg.on{border-color:var(--lg);color:var(--lg);
  background:color-mix(in srgb, var(--lg) 10%, transparent)}
.jl-lg.tambah{border-style:dashed;color:var(--jr-mint)}

/* ── Tanda di dalam teks ──
   Garis bawah, bukan sorotan blok. Sorotan yang pekat membuat mata berhenti
   pada tandanya alih-alih membaca kalimatnya; garis tipis memberi tahu
   tanpa mengganggu. */
.jl-m{border-bottom:1.5px solid transparent;cursor:pointer;
  transition:background .18s,border-color .18s;border-radius:2px}
.jl-m:hover{background:rgba(22,33,28,.05)}

body:not(.jl-off-terjemahan) .jl-terjemahan{border-bottom-color:#3E7CB1}
body:not(.jl-off-maksud)     .jl-maksud{border-bottom-color:#6B4A8C}
body:not(.jl-off-rasa)       .jl-rasa{border-bottom-color:#B5566E}
body:not(.jl-off-konteks)    .jl-konteks{border-bottom-color:#2F8F6E}
body:not(.jl-off-catatan)    .jl-catatan{border-bottom-color:#8A7B4A}
body:not(.jl-off-koreksi)    .jl-koreksi{border-bottom-color:#B4741E}

/* Potongan yang diselimuti lebih dari satu lapisan diberi garis lebih tebal
   — pertanda bahwa ada lebih dari satu hal yang bisa dibuka di situ. */
.jl-m[data-layer*=","]{border-bottom-width:2.5px;border-bottom-style:double}

.jl-m.pilih{background:rgba(214,242,75,.32);border-radius:3px}

/* ── Kartu isi lapisan ── */
.jl-pop{position:absolute;z-index:120;width:min(22rem,calc(100vw - 32px));
  padding:13px 15px;border-radius:14px;
  background:var(--jr-kartu);border:1px solid var(--jr-garis);
  box-shadow:0 12px 40px rgba(20,40,30,.18);
  animation:jlIn .16s ease-out}
@keyframes jlIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
.jl-pop-h{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.jl-pop-h svg{width:13px;height:13px;color:var(--lg,var(--jr-mint))}
.jl-pop-h b{font:700 11px Inter,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--lg,var(--jr-mint))}
.jl-pop-h i{margin-left:auto;font-style:normal;font-size:10.5px;
  color:var(--jr-tinta-3)}
.jl-pop-b{font-size:13.5px;line-height:1.6;color:var(--jr-tinta-2);
  white-space:pre-wrap}
.jl-pop-f{display:flex;gap:6px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--jr-garis)}
.jl-pop-f button{border:0;background:transparent;cursor:pointer;padding:3px 7px;
  font:600 11px Inter,sans-serif;color:var(--jr-tinta-3);border-radius:6px}
.jl-pop-f button:hover{background:rgba(22,33,28,.06);color:var(--jr-tinta)}
.jl-pop-f .hapus:hover{color:#A94747}
.jl-pop + .jl-pop{margin-top:8px}

/* ── Lapisan seluruh naskah (terjemahan) ── */
.jl-full{margin:clamp(24px,3vw,40px) 0 0;border-radius:14px;
  border:1px solid var(--jr-garis);background:rgba(62,124,177,.04);
  overflow:hidden}
.jl-full summary{display:flex;align-items:center;gap:9px;padding:12px 16px;
  cursor:pointer;font:700 12px Inter,sans-serif;color:#3E7CB1;
  list-style:none;user-select:none}
.jl-full summary::-webkit-details-marker{display:none}
.jl-full summary::before{content:'';width:0;height:0;flex:0 0 auto;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .18s}
.jl-full[open] summary::before{transform:rotate(90deg)}
.jl-full summary b{padding:2px 8px;border-radius:99px;
  background:rgba(62,124,177,.16);font-size:9.5px;letter-spacing:.06em}
.jl-full summary i{margin-left:auto;font-style:normal;font-weight:500;
  font-size:11px;color:var(--jr-tinta-3)}
.jl-full-b{padding:0 16px 16px;font-size:clamp(15px,.4vw+14px,17px);
  line-height:1.7;color:var(--jr-tinta-2)}
.jl-full-b p{margin:0 0 .9em}

/* Bilah pilih teks: muncul saat penulis menyorot bagian naskah. */
.jl-bar{position:absolute;z-index:130;display:flex;gap:3px;padding:5px;
  border-radius:12px;background:var(--jr-hijau);
  box-shadow:0 8px 26px rgba(20,40,30,.3);animation:jlIn .14s ease-out}
.jl-bar button{display:flex;align-items:center;gap:5px;padding:6px 10px;
  border:0;border-radius:8px;background:transparent;cursor:pointer;color:#DCE8E1;
  font:600 11px Inter,sans-serif;white-space:nowrap}
.jl-bar button:hover{background:rgba(255,255,255,.12);color:#fff}
.jl-bar button svg{width:12px;height:12px}

@media (prefers-color-scheme:dark){
  .jl-m:hover{background:rgba(255,255,255,.06)}
  .jl-full{background:rgba(62,124,177,.08)}
}
@media (prefers-reduced-motion:reduce){
  .jl-pop,.jl-bar{animation:none}
  .jl-m,.jl-lg{transition:none}
}
/* Saat dicetak, seluruh lapisan dipadamkan dan yang tersisa naskahnya. */
@media print{
  .jl-legend,.jl-pop,.jl-bar{display:none}
  .jl-m{border-bottom:0}
}

/* ═══════════ Bilah alat penyunting ═══════════
   Tombolnya menyisipkan penanda Markdown; yang tersimpan tetap teks biasa.
   Orang yang hafal penandanya tidak perlu menyentuh bilah ini, dan yang
   tidak hafal tidak perlu menghafalnya. */
.jr-tool{display:flex;flex-wrap:wrap;align-items:center;gap:2px;
  margin:-4px -4px 10px;padding:5px;border-radius:12px;
  background:rgba(22,33,28,.04);position:sticky;top:0;z-index:5}
.jr-tool button{width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--jr-tinta-2);display:grid;place-items:center;
  transition:background .13s,color .13s}
.jr-tool button:hover{background:rgba(22,33,28,.08);color:var(--jr-tinta)}
.jr-tool button:active{transform:scale(.92)}
.jr-tool button svg{width:15px;height:15px}
.jr-tool-s{width:1px;height:18px;margin:0 4px;background:var(--jr-garis)}
.jr-tool-v{width:auto !important;margin-left:auto;padding:0 11px;gap:6px;
  display:inline-flex !important;align-items:center;
  font:600 11.5px Inter,sans-serif}
.jr-tool-v.on{background:var(--jr-hijau) !important;color:var(--jr-lime) !important}

.jr-prev{min-height:min(52vh,420px);padding:12px 0;overflow-y:auto;
  font-size:clamp(15px,.4vw+14px,17px);line-height:1.7;color:#1E2C26}
.jr-prev[hidden]{display:none}
.jr-prev p{margin:0 0 1em}
.jr-prev h2,.jr-prev h3{font-family:Fraunces,Georgia,serif;margin:1.4em 0 .5em}
.jr-prev blockquote{margin:1.2em 0;padding-left:1em;
  border-left:3px solid var(--jr-lime);color:var(--jr-tinta-2);font-style:italic}
.jr-prev ul,.jr-prev ol{padding-left:1.4em}
.jr-prev code{padding:2px 6px;border-radius:5px;background:rgba(22,33,28,.06);
  font:500 .87em ui-monospace,monospace}
.jr-prev img{max-width:100%;border-radius:10px;margin:1em 0}
.jr-prev hr{margin:2em auto;width:44px;border:0;border-top:2px solid var(--jr-garis)}

/* ═══════════ Sorotan bermakna ═══════════
   Warnanya membawa arti, bukan sekadar hiasan: hijau untuk yang ditekankan,
   merah untuk yang belum yakin. Sorotan tanpa arti akan kehilangan maknanya
   begitu penulisnya lupa apa maksudnya. */
body:not(.jl-off-penting) .jl-penting{background:rgba(31,122,77,.13);
  border-bottom-color:#1F7A4D;border-radius:3px;padding:0 2px}
body:not(.jl-off-ragu) .jl-ragu{background:rgba(196,70,47,.11);
  border-bottom-color:#C4462F;border-radius:3px;padding:0 2px;
  border-bottom-style:dashed}

/* ═══════════ Naskah asli ═══════════
   Bukti bahwa yang dibaca di atas benar-benar berasal dari naskah ini, dan
   tidak ada lapisan yang diam-diam mengubahnya. */
.jr-source{margin:clamp(20px,3vw,32px) 0 0;padding:18px 20px;border-radius:14px;
  background:#16211C;color:#C8D6CE;overflow-x:auto;
  font:400 13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;word-break:break-word;
  border:1px solid rgba(255,255,255,.07)}
.jr-source[hidden]{display:none}
.jl-lg.naskah{margin-left:auto}
.jl-lg.naskah.on{border-color:var(--jr-hijau);color:var(--jr-hijau);
  background:rgba(22,33,28,.07)}

/* ═══════════ Identitas penulis ═══════════
   Nama pengguna tidak berubah; nama asli yang dikenali orang. Keduanya
   disebutkan supaya tulisan yang bertahan lama tetap dapat ditelusuri
   kembali ke orangnya. */
.jr-penulis{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.jr-penulis-av{width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;background:rgba(47,143,110,.14)}
.jr-ini{display:grid;place-items:center;
  font:700 13px Inter,sans-serif;color:var(--jr-mint)}
.jr-penulis-n{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.jr-penulis-n b{font:600 13.5px Inter,sans-serif;color:var(--jr-tinta)}
.jr-penulis-n i{font-style:normal;font:500 11.5px ui-monospace,monospace;
  color:var(--jr-tinta-3)}

@media (prefers-color-scheme:dark){
  .jr-tool{background:rgba(255,255,255,.04)}
  .jr-tool button:hover{background:rgba(255,255,255,.08)}
  .jr-source{background:#0C120F}
  .jr-prev{color:#DDE7E1}
}
@media (max-width:520px){
  .jr-tool-v span{display:none}
  .jr-tool-v{padding:0;width:32px !important}
}

/* Lapisan baru */
body:not(.jl-off-cerita)  .jl-cerita{border-bottom-color:#8C5A2B}
body:not(.jl-off-sumber)  .jl-sumber{border-bottom-color:#4A6B8A}
body:not(.jl-off-tempat)  .jl-tempat{border-bottom-color:#5C7A3E}

/* ═══════════════════════════════════════════════════════════════════
   PREFERENSI BACA

   Ini HIASAN, bukan makna. Pilihannya milik pembaca, bukan penulis, dan
   tidak ikut tersimpan bersama naskah — mengubahnya tidak mengubah apa pun
   tentang tulisan itu sendiri.

   Semua pilihan memakai huruf yang sudah ada di sistem atau sudah dimuat
   halaman ini. Tidak ada yang diambil dari layanan luar: huruf yang gagal
   dimuat harus tetap menghasilkan tulisan yang terbaca.
   ═══════════════════════════════════════════════════════════════════ */
.jr-body{font-family:var(--jr-huruf, Inter, system-ui, sans-serif);
  font-size:calc(clamp(16px, .5vw + 14.5px, 20px) * var(--jr-zoom, 1));
  line-height:var(--jr-rapat, 1.75)}
.jr-read{max-width:calc(var(--jr-kolom) * var(--jr-lebar, 1))}

body.jr-f-serif   { --jr-huruf: Fraunces, Georgia, 'Times New Roman', serif }
body.jr-f-sans    { --jr-huruf: Inter, system-ui, -apple-system, sans-serif }
body.jr-f-mono    { --jr-huruf: ui-monospace, SFMono-Regular, Menlo, monospace }
/* Huruf sistem: apa pun yang dipilih perangkat pembaca sendiri. Pilihan
   paling awet — ia tidak pernah gagal dimuat. */
body.jr-f-sistem  { --jr-huruf: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif }

.jr-pref{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);
  z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.jr-pref-b{width:42px;height:42px;border:0;border-radius:13px;cursor:pointer;
  background:var(--jr-kartu);color:var(--jr-tinta-2);display:grid;place-items:center;
  border:1px solid var(--jr-garis);
  box-shadow:0 4px 16px rgba(20,40,30,.10);transition:all .15s}
.jr-pref-b:hover{color:var(--jr-tinta);transform:translateY(-1px)}
.jr-pref-b svg{width:18px;height:18px}

.jr-pref-p{width:min(17rem,calc(100vw - 24px));padding:14px;border-radius:16px;
  background:var(--jr-kartu);border:1px solid var(--jr-garis);
  box-shadow:0 14px 44px rgba(20,40,30,.18);animation:jlIn .16s ease-out}
.jr-pref-p[hidden]{display:none}
.jr-pref-g{margin-bottom:13px}
.jr-pref-g:last-child{margin-bottom:0}
.jr-pref-g > label{display:block;margin-bottom:6px;
  font:700 9.5px Inter,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--jr-tinta-3)}
.jr-pref-r{display:flex;gap:5px}
.jr-pref-r button{flex:1;padding:8px 4px;border-radius:9px;cursor:pointer;
  border:1px solid var(--jr-garis);background:transparent;color:var(--jr-tinta-2);
  font:600 11px Inter,sans-serif;transition:all .14s}
.jr-pref-r button:hover{border-color:var(--jr-mint)}
.jr-pref-r button.on{background:var(--jr-hijau);border-color:var(--jr-hijau);color:#fff}
.jr-pref-r button.serif{font-family:Fraunces,Georgia,serif}
.jr-pref-r button.mono{font-family:ui-monospace,monospace;font-size:10px}
.jr-pref-x{width:100%;margin-top:12px;padding:7px;border-radius:9px;
  border:1px dashed var(--jr-garis);background:transparent;cursor:pointer;
  font:600 10.5px Inter,sans-serif;color:var(--jr-tinta-3)}
.jr-pref-x:hover{color:var(--jr-tinta)}

@media (prefers-color-scheme:dark){
  .jr-pref-r button.on{background:var(--jr-lime);border-color:var(--jr-lime);color:#16211C}
}
@media print{ .jr-pref{display:none} }

/* ═══════════ Membawa tulisan keluar ═══════════ */
.jr-out{position:relative}
.jr-out-m{position:absolute;right:0;bottom:calc(100% + 6px);z-index:60;
  width:15rem;padding:5px;border-radius:14px;
  background:var(--jr-kartu);border:1px solid var(--jr-garis);
  box-shadow:0 12px 36px rgba(20,40,30,.18);animation:jlIn .15s ease-out}
.jr-out-m[hidden]{display:none}
.jr-out-m a{display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
  color:var(--jr-tinta);transition:background .13s}
.jr-out-m a:hover{background:rgba(214,242,75,.24)}
.jr-out-m b{display:block;font:600 12.5px Inter,sans-serif}
.jr-out-m span{display:block;font-size:10.5px;color:var(--jr-tinta-3);margin-top:1px}