/* Additions on top of the original compiled Tailwind (tw.css). */
.lucide { flex-shrink: 0; }
.fill-yellow-400 { fill: #facc15; }
.tf-embed { background: transparent; }
@media (max-width: 639px) {
  .tf-hide-mobile { display: none; }
  .tf-stack-mobile { flex-direction: column; gap: 1rem; }
  .tf-stack-mobile > aside { width: 100%; }
  .tf-stack-mobile > aside nav { display: flex; gap: .25rem; }
  .tf-stack-mobile > aside nav button { justify-content: center; }
  .tf-container { width: 100% !important; }
}
@media (hover: none) { .tf-touch-show { opacity: 1 !important; } }
/* Builder on phones and small tablets: stack editor above preview and let the page scroll. */
@media (max-width: 767px) {
  .tf-builder-body #builder-root { height: auto; min-height: 100vh; overflow: visible; }
  .tf-builder-main { flex-direction: column; overflow: visible; }
  .tf-builder-left { max-width: none !important; overflow: visible; }
  .tf-builder-right { border-left: 0; border-top: 1px solid #e5e7eb; padding: 1rem; overflow: visible; }
  .tf-questions { flex-direction: column; height: auto; }
  .tf-palette { width: 100%; border-right: 0; border-bottom: 1px solid #f3f4f6; max-height: 220px; }
  .tf-qlist { overflow: visible; padding: 1rem; }
}
.inline-block { display: inline-block; }