/*
 * Custom styles layered on top of Tailwind.
 * In DEV, Tailwind itself is provided by the Play CDN (see layouts).
 * In PROD, run the Tailwind CLI to generate this file from tailwind/app.css.
 */

html { scroll-behavior: smooth; }

/* Thin, unobtrusive scrollbars for the editor panels. */
.scroll-slim::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-slim::-webkit-scrollbar-thumb { background: #cbd5cf; border-radius: 8px; }
.scroll-slim::-webkit-scrollbar-track { background: transparent; }

/* The 3D canvas should fill its container and never trigger page scroll. */
#editor-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Simple utility for cards that pop on hover in the catalog. */
.catalog-card { transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.catalog-card:hover { transform: translateY(-2px); }
.catalog-card.is-active { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13,148,136,.25); }