/* ==========================================================================
   editor.css
   Styling area menulis (contenteditable) — layout & tampilan saja.
   Logika format ada di editor/commands.js + editor/serializer.js.
   ========================================================================== */

.note-title-field,
.note-body-field {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  caret-color: var(--color-accent);
  -webkit-user-select: text;
  user-select: text;
}

/* Mode Read Only (toggle di toolbar.js) — cuma indikasi visual, larangan
   ngetiknya sendiri sudah ditangani lewat contenteditable="false". */
.note-body-field.is-read-only {
  cursor: default;
}

.note-title-field {
  cursor: text;
  padding-top: 20px;
  padding-bottom: 15px;
}

.note-body-field {
  min-height: 40vh;
  cursor: text;
}

/* Placeholder untuk contenteditable kosong — via data-placeholder,
   bukan teks sungguhan, supaya tidak ikut tersimpan sebagai isi.
   note-title-field masih polos (:empty asli). note-body-field SELALU
   punya satu block anak (lihat serializer.js), jadi statusnya ditandai
   lewat class .is-empty yang dikelola editor.js, bukan :empty. */
.note-title-field:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
  pointer-events: none;
  font-weight: var(--weight-regular);
}

.note-body-field.is-empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-secondary);
  pointer-events: none;
  position: absolute;
}

.note-body-field {
  position: relative;
}

/* Placeholder hilang saat sedang difokus & kosong (kursor tetap terlihat) */
.note-title-field:empty:focus::before,
.note-body-field.is-empty:focus::before {
  opacity: 0.6;
}

::selection {
  background-color: var(--color-accent-soft);
}

/* ---- Block dasar (paragraph/heading) hasil render model dokumen ---- */

.editor-block {
  /* Jarak bawaan antar block teks (mis. antar paragraf). Sengaja pakai
     angka tetap 10px, BUKAN var(--space-md) (16px) — --space-md dipakai
     luas di tempat lain (padding/gap komponen non-editor), jadi tidak
     boleh ikut diubah cuma untuk mengecilkan jarak antar paragraf di sini. */
  margin: 0 0 10px 0;
  outline: none;
  /* Supaya karakter tab (fitur "spasi 2x = tab") tampil sebagai indentasi
     sungguhan, bukan diciutkan jadi satu spasi seperti default HTML, dan
     spasi berurutan tidak diciutkan browser sebelum sempat dikonversi. */
  white-space: pre-wrap;
  /* Teks panjang TANPA spasi (mis. link/string acak) harus tetap patah ke
     baris baru, bukan meluber keluar & bikin halaman bisa digeser
     horizontal. Browser modern (Chrome/Safari) SECARA DIAM-DIAM menerapkan
     perilaku serupa ini lewat UA stylesheet internal khusus saat elemen
     berstatus contenteditable="true" — begitu Mode Read Only mengubahnya
     jadi contenteditable="false" (lihat toolbar.js), quirk itu ikut hilang
     dan teks tanpa spasi jadi meluber. overflow-wrap: anywhere (+ fallback
     word-break untuk browser lama) bikin perilakunya konsisten di KEDUA
     mode, tidak bergantung pada quirk contenteditable itu lagi. */
  overflow-wrap: anywhere;
  word-break: break-word;
  tab-size: 4;
  -moz-tab-size: 4;
}

.editor-block:last-child {
  margin-bottom: 0;
}

.note-body-field p.editor-block {
  font-family: var(--font-document);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}

.note-body-field h1.editor-block,
.note-body-field h2.editor-block,
.note-body-field h3.editor-block,
.note-body-field h4.editor-block,
.note-body-field h5.editor-block,
.note-body-field h6.editor-block {
  font-family: var(--font-document);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-top: var(--space-lg);
}

.note-body-field h1.editor-block { font-size: var(--text-5xl); }
.note-body-field h2.editor-block { font-size: var(--text-4xl); }
.note-body-field h3.editor-block { font-size: var(--text-3xl); }
.note-body-field h4.editor-block { font-size: var(--text-2xl); }
.note-body-field h5.editor-block { font-size: var(--text-xl); }
.note-body-field h6.editor-block { font-size: var(--text-lg); }

/* ---- Highlight (stabilo) — preset via CSS var agar kontras per tema ----
   padding-inline memberi "napas" di kiri-kanan teks yang di-highlight (jadi
   terasa seperti ada spasi tambahan sebelum & sesudah teks, tanpa mengubah
   teks aslinya) — dikombinasikan box-decoration-break supaya padding itu
   tetap konsisten walau highlight-nya kepotong ganti baris. */
.run-highlight-amber,
.run-highlight-mint,
.run-highlight-sky,
.run-highlight-rose,
.run-highlight-lavender,
.run-highlight-lime,
.run-highlight-peach,
.run-highlight-aqua,
.run-highlight-grape,
.run-highlight-custom {
  border-radius: 5px;
  padding-inline: 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.run-highlight-amber { background-color: var(--highlight-amber); }
.run-highlight-mint { background-color: var(--highlight-mint); }
.run-highlight-sky { background-color: var(--highlight-sky); }
.run-highlight-rose { background-color: var(--highlight-rose); }
.run-highlight-lavender { background-color: var(--highlight-lavender); }
.run-highlight-lime { background-color: var(--highlight-lime); }
.run-highlight-peach { background-color: var(--highlight-peach); }
.run-highlight-aqua { background-color: var(--highlight-aqua); }
.run-highlight-grape { background-color: var(--highlight-grape); }
/* Highlight warna kustom (hex dari input type="color") — background-color-nya
   di-set langsung lewat inline style di serializer.js (bukan class ini). */

/* ---- Hyperlink ---- */
.run-link {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  /* Klik/tap biasa membuka link (lihat handleClickForLink di editor.js);
     Ctrl/Cmd/Alt+klik di desktop tetap menaruh kursor teks untuk
     mengedit tulisan link tersebut. */
  cursor: pointer;
}

/* ---- List item (bulleted / numbered / checklist) ----
   Marker (bullet/nomor/kotak-centang) SENGAJA digambar lewat ::before, BUKAN
   elemen DOM sungguhan — supaya tidak ikut terhitung sebagai karakter oleh
   selection.js saat menghitung offset kursor (lihat block-model.js). Kotak
   centang checklist dideteksi lewat koordinat klik di editor.js
   (CHECKBOX_ZONE_PX), bukan lewat event pada elemen sungguhan. */
.editor-list-item {
  position: relative;
  /* flow-root supaya KOTAK block ini sendiri (bukan cuma baris teksnya)
     ikut membungkus di sisi float gambar kiri/kanan — tanpa ini, kotak li
     tetap mulai dari tepi kiri asli (tidak digeser float, cuma line box
     teksnya yang menyempit), jadi marker ::before yang absolute relatif ke
     kotak ini berakhir di bawah/ketiban gambar walau teksnya sendiri sudah
     kelihatan wrap dengan benar. */
  display: flow-root;
  padding-left: 1.7em;
  margin-bottom: var(--space-2xs);
}

.editor-list-item--bulleted-list-item::before {
  content: "•";
  position: absolute;
  left: 0.45em;
  /* Center ke tengah tinggi baris PERTAMA teksnya, bukan dipatok dari atas
     (top:0) — top:0 dulu bikin dot selalu nempel ke atas kotak .editor-
     list-item, jadi begitu ukuran font teksnya berubah (baseline & tinggi
     barisnya ikut berubah) dot-nya jadi kelihatan turun/nggak center lagi.
     line-height:1 di sini bikin tinggi kotak marker sendiri = font-size-nya
     persis, jadi translateY(-50%) benar-benar center-kan dot itu, bukan
     center-kan ruang kosong leading di sekitarnya. */
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  font-size: 1.15em;
  line-height: 1;
}

.editor-list-item--numbered-list-item::before {
  content: attr(data-marker-number) ".";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: 1.4em;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.editor-list-item--checklist-item {
  padding-left: 1.9em;
}

.editor-list-item--checklist-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1em;
  height: 1.1em;
  border: 1.6px solid var(--color-text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.editor-list-item--checklist-item[data-checked="true"]::before {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.editor-list-item--checklist-item[data-checked="true"]::after {
  content: "";
  position: absolute;
  left: 0.26em;
  /* Centang ini pseudo-element TERPISAH dari kotaknya (::after, bukan
     anak dari ::before), jadi centering-nya diikutkan ke titik tengah yang
     sama (top:50%) lalu digeser dikit ke atas (translateY sedikit lebih
     dari -50%) — bentuk centang yang dirotasi -45deg itu secara visual
     "berat sebelah" ke bawah kalau geometris pas 50%, jadi perlu nudge
     supaya kelihatan center di dalam kotaknya. */
  top: 50%;
  width: 0.5em;
  height: 0.26em;
  border-left: 2px solid var(--color-surface);
  border-bottom: 2px solid var(--color-surface);
  transform: translateY(-65%) rotate(-45deg);
  pointer-events: none;
}

.editor-list-item--checklist-item[data-checked="true"] {
  color: var(--color-text-secondary);
  opacity: 0.75;
}

/* ---- Quote ---- */
.note-body-field blockquote.editor-block {
  /* flow-root: sama alasannya seperti .editor-list-item di atas — supaya
     border-left (bagian dari kotak blockquote sendiri) ikut membungkus di
     sisi float gambar, bukan tetap di tepi kiri asli sampai ketiban/ketutup
     gambar walau isi teksnya sendiri sudah wrap dengan benar. */
  display: flow-root;
  margin-left: 0;
  margin-right: 0;
  padding: var(--space-2xs) var(--space-md);
  border-left: 3px solid var(--color-accent);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ---- Divider ----
   Void block (non-editable, lihat serializer.js/editor.js) — dirender lewat
   <hr> sungguhan supaya tidak ikut terhitung sebagai karakter oleh
   selection.js (yang cuma menjumlahkan textContent, dan <hr> tidak
   punya textContent). */
.editor-block--divider {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  cursor: default;
}

.editor-block--divider hr {
  border: none;
  margin: 0;
  /* Sengaja BUKAN border solid var(--color-border) biasa lagi — warna itu
     tetap SAMA PERSIS apa pun yang ada di baliknya, jadi nyaris hilang di
     dua kondisi: (1) tema yang --color-border-nya nyaris senada dengan
     --color-bg-nya sendiri (mis. tema oled: #1B1B1E di atas #000000), dan
     (2) saat divider ini ada di dalam Scene — background Scene warnanya
     bebas dipilih user & di-set inline dari JS (lihat scene.css/
     serializer.js), jadi mustahil ditebak satu warna abu-abu tetap yang
     selalu kontras di sini.
     Sebelumnya dicoba mix-blend-mode: overlay + abu-abu 50% (128,128,128).
     TERNYATA itu keliru: overlay punya sifat matematis di mana warna
     sumber 50% gray hampir PERSIS jadi no-op — dan makin ekstrem si
     backdrop (putih murni #FFFFFF di tema light, hitam murni #000000 di
     tema oled), makin dekat overlay ke "tidak mengubah apa-apa". Hasilnya
     dividernya kelihatan nyaris tanpa warna sama sekali, persis di dua
     tema paling umum dipakai.
     Solusinya: mix-blend-mode: difference. |backdrop - abu-abu| tetap
     menghasilkan beda yang kelihatan bahkan di backdrop paling ekstrem
     (hitam/putih murni) maupun di warna Scene custom apa pun, karena tidak
     punya titik "no-op" seperti overlay. Alpha di-set sedang (0.4) supaya
     hasilnya tetap halus (bukan garis tebal kontras tinggi), tapi konsisten
     kelihatan jelas di semua kondisi. */
  border-top: 1px solid rgba(128, 128, 128, 0.4);
  mix-blend-mode: difference;
}

/* ---- Gambar (block "image") ----
   Void block lain (non-editable, sama seperti Divider di atas). Ukuran,
   border-radius, posisi (kiri/tengah/kanan), dan wrap text diatur lewat
   CSS custom property + class yang di-set dari model (serializer.js) —
   atau dari pratinjau langsung bottom sheet (toolbar/image-sheet.js)
   sebelum di-commit ke model lewat "Terapkan". <img>-nya sendiri baru
   terisi `src` belakangan secara async (lihat services/image-service.js
   hydrateImageElements(), dipanggil editor.js setiap render). */
.editor-block--image {
  --img-w: 320px;
  --img-h: 200px;
  --img-radius: 12px;
  --img-clip: none;
  display: block;
  width: var(--img-w);
  max-width: 100%;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  cursor: pointer;
}

/* Posisi tengah: block sendirian di barisnya, teks berikutnya SELALU jatuh
   di bawah (tidak pernah di-float, terlepas dari status toggle wrap). */
.editor-block--image-center {
  margin-left: auto;
  margin-right: auto;
}

/* Kiri/kanan TANPA wrap: gambar tetap block-level di posisinya sendiri,
   teks setelahnya tetap di baris baru di bawah (tidak di-wrap). */
.editor-block--image-left:not(.editor-block--image-wrap) {
  margin-left: 0;
  margin-right: auto;
}

.editor-block--image-right:not(.editor-block--image-wrap) {
  margin-left: auto;
  margin-right: 0;
}

/* Kiri/kanan DENGAN wrap ON: gambar di-float supaya block-block teks
   sesudahnya membungkus di sisi yang berlawanan — lebar bungkusnya
   otomatis mengikuti lebar+tinggi gambar plus margin (perilaku float CSS
   bawaan, tanpa perlu shape-outside). */
.editor-block--image-left.editor-block--image-wrap {
  float: left;
  margin: 0 var(--space-md) var(--space-sm) 0;
}

.editor-block--image-right.editor-block--image-wrap {
  float: right;
  margin: 0 0 var(--space-sm) var(--space-md);
}

.editor-image__frame {
  width: 100%;
  height: var(--img-h);
  border-radius: var(--img-radius);
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  clip-path: var(--img-clip);
}

/* Crop bentuk SVG aktif (bintang/love/dll — lihat image-clip-shapes.js):
   border-radius kotak & garis tepi kotak dimatikan total, karena bentuknya
   sekarang sepenuhnya ditentukan oleh clip-path, bukan kotak membulat lagi
   — border 1px lurus tadi akan kepotong tidak rapi kalau tetap dipasang
   berbarengan dengan clip-path bentuk non-kotak. */
.editor-block--image-clipped .editor-image__frame {
  border-radius: 0;
  border: none;
}

.editor-image__frame--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  border-style: dashed;
}

/* Toggle "Latar Transparan" (image-sheet.js) — frame di belakang <img>
   dilepas warnanya (bg + border) supaya kanal alpha PNG benar-benar tembus
   ke warna latar catatan/scene di baliknya, bukan ketutup --color-surface. */
.editor-block--image-transparent .editor-image__frame {
  background-color: transparent;
  border-color: transparent;
}

.editor-image__img {
  width: 100%;
  height: 100%;
  /* "kalo ratio nya di ubah gambar nya harus nge fit jangan gepeng" —
     object-fit: cover mengisi penuh kotak tanpa meregangkan/menggepengkan
     gambar, kelebihannya dipotong (di-crop), rasio asli tetap terjaga. */
  object-fit: cover;
  display: block;
  -webkit-user-select: none;
  user-select: none;
}

/* Supaya float gambar tidak "bocor" ke luar area catatan saat jadi block
   terakhir dokumen (parent tidak otomatis ikut menghitung tinggi elemen
   yang di-float). */
.note-body-field::after {
  content: "";
  display: table;
  clear: both;
}

/* Heading & Divider selalu mulai di baris barunya sendiri — tidak ikut
   dibungkus di samping gambar yang sedang di-float. */
.note-body-field h1.editor-block,
.note-body-field h2.editor-block,
.note-body-field h3.editor-block,
.note-body-field h4.editor-block,
.note-body-field h5.editor-block,
.note-body-field h6.editor-block,
.editor-block--divider {
  clear: both;
}