:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button, input, select, textarea { font-family: inherit; color: inherit; }

/* ---------------------------------------------------------------- scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--c-track); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* ------------------------------------------------------------------- slider */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 2px; background: var(--c-track); border-radius: 2px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-white); cursor: grab; transition: transform 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%;
  background: var(--c-white); cursor: grab;
}
input[type=range]:disabled { opacity: 0.4; }

/* Valore numerico editabile: legge come lo <span> del design system,
   ma resta un campo per digitare il valore esatto. */
.val {
  width: 58px; text-align: right;
  background: transparent; border: 1px solid transparent;
  border-radius: 4px; padding: 1px 4px;
}
.val:hover { border-color: var(--c-track); }
.val:focus { border-color: var(--c-sec); background: var(--c-bg); outline: none; color: var(--c-primary); }

/* -------------------------------------------------------------- color input */
input[type=color] {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 28px; padding: 0;
  border: 1px solid var(--c-track); border-radius: 6px;
  background: none; cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 4px; }

/* --------------------------------------------------------------- focus ring */
:focus-visible { outline: 1px solid var(--c-sec); outline-offset: 1px; }
input[type=text]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--c-sec);
}

/* ------------------------------------------------------------------- select */
select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

/* -------------------------------------------- controllo segmentato (toggle) */
.seg { display: flex; border: 1px solid var(--c-track); border-radius: 6px; overflow: hidden; }
.seg button {
  flex: 1; padding: 6px 4px; border: 0; background: transparent;
  color: var(--c-muted); cursor: pointer;
  font-size: 10px; letter-spacing: 0.03em;
  transition: color 0.2s ease, background 0.2s ease;
}
.seg button:hover { color: var(--c-primary); background: var(--c-border); }
.seg button + button { border-left: 1px solid var(--c-track); }
.seg button.on { background: var(--c-primary); color: var(--c-bg); font-weight: 500; }

/* ----------------------------------------------------------- sidebar mobile */
/* -------------------------------------------------------------------- toast */
#toast {
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#toast.show { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------------- canvas */
/* Il rapporto lo porta il wrapper (impostato da resize()): le percentuali si
   risolvono contro #viewport, che ha altezza definita, e il canvas ci sta
   dentro senza deformarsi in nessuno dei due assi. */
#canvasWrap { max-width: 100%; max-height: 100%; }
#cv { display: block; width: 100%; height: 100%; }

/* Righe che compaiono solo in modalità "colore personalizzato": due classi
   così .hidden vince sempre su display:flex, in qualsiasi ordine di cascata. */
.row-color { display: flex; align-items: center; gap: 0.5rem; }
.row-color.hidden { display: none; }

/* ------------------------------------------------------------------ details */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }