html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Space Grotesk", sans-serif; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid #E8954A;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background-color: #CBD5CD; border-radius: 999px; }

.dot-line {
  background-image: repeating-linear-gradient(90deg, #CBD5CD 0 6px, transparent 6px 10px);
  height: 2px;
}

/* ===================== Area Blok Visual (Blockly) =====================
 * Blockly menghitung posisi kanvas & scrollbar berdasarkan ukuran container
 * saat di-inject. Aturan di bawah memastikan container punya dimensi tegas
 * dan stabil, dipasangkan dengan Blockly.svgResize() di lesson-coding.ejs.
 * ===================================================================== */
#blocklyDiv {
  position: relative;
  width: 100%;
  min-width: 0; /* penting di dalam CSS grid/flex: cegah container melebar dari isinya */
  overflow: hidden;
}

#blocklyDiv .injectionDiv {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

#blocklyDiv,
#blocklyDiv * {
  box-sizing: border-box;
}

/* Lapisan pertahanan untuk bug "scrollbar sisa": saat panel balok (flyout)
 * ditutup, Blockly menyembunyikan panelnya tapi kadang scrollbar-nya tetap
 * tergambar sebagai batang abu-abu vertikal. Kalau flyout tersembunyi,
 * scrollbar-nya ikut disembunyikan. (Penanganan utamanya di JavaScript;
 * ini cadangan kalau ada kondisi yang lolos.) */
#blocklyDiv .blocklyFlyout[style*="display: none"] ~ .blocklyFlyoutScrollbar,
#blocklyDiv .blocklyFlyout[display="none"] ~ .blocklyFlyoutScrollbar {
  display: none !important;
}

/* Sembunyikan scrollbar flyout yang lebarnya nol / tidak terpakai */
#blocklyDiv .blocklyFlyoutScrollbar .blocklyScrollbarHandle[height="0"],
#blocklyDiv .blocklyFlyoutScrollbar .blocklyScrollbarHandle[width="0"] {
  display: none;
}

/* --- Kenyamanan di layar HP --- */
@media (max-width: 767px) {
  /* Perbesar tulisan kategori toolbox supaya lebih mudah disentuh */
  #blocklyDiv .blocklyTreeRow {
    padding: 10px 8px !important;
  }
  #blocklyDiv .blocklyTreeLabel {
    font-size: 14px !important;
  }
  /* Tombol zoom & tempat sampah agak dijauhkan dari tepi */
  #blocklyDiv .blocklyZoom > image,
  #blocklyDiv .blocklyZoom > svg > image {
    opacity: 0.9;
  }
}