/* ============================================================
   QUICK ENGINE — MODE TAMPILAN "INLINE DALAM TEKS" (Tahap 2)
   ============================================================
   Alternatif dari daftar field terpisah (.qe-fields-grid default):
   seluruh teks Prompt Template ditampilkan apa adanya, dan tiap
   bracket [xxx] sudah jadi field yang bisa langsung diklik & diketik.
   Lihat js/qe-inline-fields.js untuk logikanya.
   ============================================================ */

/* Toggle List / Inline di header kartu Tahap 2 */
#qe-step2-mode-toggle.active {
  background: var(--txt) !important;
  color: var(--bg2) !important;
}

/* Container teks penuh — menggantikan isi .qe-fields-grid saat mode Inline aktif */
.qe-inline-prompt {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--txt2);
  padding: 4px 2px 6px;
}

/* Field inline — <span contenteditable> (BUKAN textarea). Ini elemen
   inline asli, jadi kalau isinya kepanjangan atau ada baris baru
   (Enter di dalam field), teksnya cuma "mengalir pindah baris" ikut
   lebar paragraf — PERSIS kayak highlight teks biasa — bukan melebar
   jadi kotak sendiri kayak sebelumnya. box-decoration-break:clone bikin
   tiap baris hasil wrap dapat background/border sendiri-sendiri (rapi,
   nempel teksnya), bukan satu kotak besar yang nyambung. */
span.qe-inline-field.qe-field-input {
  display: inline;
  box-sizing: border-box;
  cursor: text;
  padding: 1px 7px;
  border: none;
  border-bottom: 1.5px dashed var(--border3, var(--border2));
  border-radius: 5px 5px 3px 3px;
  background: var(--tint-2);
  color: var(--txt);
  font: inherit; /* [FIX] ikut persis ukuran & line-height teks sekitarnya
                     (.qe-inline-prompt) — sebelumnya di-override manual
                     jadi beda sendiri (12.5px/1.9) dari teks biasa
                     (13px/1.5), makanya baris yang ada field-nya kelihatan
                     lebih renggang daripada baris polos. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  outline: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
}
/* Placeholder [nama field] — murni CSS (bukan teks beneran), makanya
   klik lalu ketik langsung jalan tanpa perlu hapus apa pun dulu. */
span.qe-inline-field.qe-field-input:empty::before {
  content: attr(data-placeholder);
  color: var(--placeholder);
  font-style: italic;
  opacity: .85;
}
span.qe-inline-field.qe-field-input:focus {
  border-bottom-style: solid;
  border-bottom-color: var(--line-2b, #0A84FF);
  background: var(--tint-3);
  box-shadow: 0 1px 0 0 var(--line-2b, #0A84FF);
}
/* Field yang masih kosong — sama seperti dot biru di mode List, dikasih
   penanda visual halus supaya kelihatan mana yang belum diisi tanpa
   perlu buka daftar field terpisah. */
span.qe-inline-field.qe-field-input:empty {
  border-bottom-style: dashed;
}
span.qe-inline-field[data-inline-repeat="1"] {
  opacity: .82;
}

html.dark span.qe-inline-field.qe-field-input {
  background: rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.20);
}
html.dark span.qe-inline-field.qe-field-input:focus {
  background: rgba(255,255,255,.10);
}

@media (max-width: 560px) {
  .qe-inline-prompt { font-size: 13.5px; line-height: 1.55; }
}