/* Il marchio dinamico: il tavolo (home ed editor) e l'editor stesso.
   Tutto coi token di assets/site.css, che si carica prima. */

/* ---------- il tavolo ---------- */
/* id e classe: le copie del marchio (caricamento, giro) perdono gli id ma tengono le classi.
   :where() toglie peso agli id: senza, #canvasWrap batterebbe .marchio-home .tavolo (absolute)
   e in home il tavolo da 1000px tornerebbe nel flusso, allargando la pagina. */
:where(#canvasWrap), .tavolo{ position:relative; overflow:hidden }
:where(#canvasWrap) canvas, .tavolo canvas{ display:block }
:where(#boardBg), .tavolo-fondo{ position:absolute; inset:0; width:100%; height:100% }
:where(#stage), .tavolo-scena{ position:absolute; inset:0 }
.cut{ position:absolute; will-change:transform; cursor:pointer }
.cut canvas{ display:block; pointer-events:none }
.cut.boil canvas{ position:absolute; left:0; top:0; display:none }
.cut.boil canvas.on{ display:block }
.cut::after{ content:""; position:absolute; inset:30px; border:1px dashed transparent; border-radius:2px; transition:border-color var(--t) var(--enter); pointer-events:none }
.cut:hover::after{ border-color:color-mix(in srgb, var(--accent) 70%, transparent) }
.cut.locked::after{ border-color:var(--accent); border-style:solid }
#canvasWrap.busy::after{ content:""; position:absolute; inset:0; background:var(--card); z-index:1 }

/* ---------- in home ----------
   Il tavolo e' largo 1000px e marchio.js lo scala (transform) per riempire
   .marchio-home, che qui prende la misura piu' grande che sta nello schermo. */
/* overflow:clip: il tavolo e' largo 1000px veri prima che lo script lo scali, e un
   telefono allargherebbe la pagina per farcelo stare. Si taglia sul bordo dello
   schermo, non del marchio, cosi' i tasselli spinti dall'hover hanno aria. */
.nudo main{ display:flex; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh; padding-block:var(--gutter); overflow:clip }
/* il titolo nascosto non deve far scaricare Special Gothic: la home non lo usa */
.nudo .sr-only{ font-family:sans-serif }
.marchio-home{ position:relative; aspect-ratio:var(--formato);
               width:min(100%, (100vh - 2 * var(--gutter)) * var(--formato));
               width:min(100%, (100dvh - 2 * var(--gutter)) * var(--formato)) }
/* stesso limite di STRETTO in marchio.js */
@media (max-width: 767px){
  .marchio-home{ aspect-ratio:var(--formato-m);
                 width:min(100%, (100vh - 2 * var(--gutter)) * var(--formato-m));
                 width:min(100%, (100dvh - 2 * var(--gutter)) * var(--formato-m)) }
}
.marchio-home .tavolo{ position:absolute; left:0; top:0; transform-origin:0 0; transition:opacity 500ms var(--enter) }
.marchio-senza-js{ position:absolute; inset:0; display:grid; place-items:center; margin:0; font-size:clamp(32px, 8vw, 96px) }
/* niente rettangolo d'attesa: il marchio entra quando e' pronto */
.marchio-home .tavolo.busy{ opacity:0 }
.marchio-home .tavolo.busy::after{ content:none }
.marchio-home .cut{ cursor:default }
.marchio-home .cut::after{ content:none }

/* ---------- l'editor ---------- */
.editor{ display:grid; grid-template-columns:minmax(300px, 360px) minmax(0, 1fr); height:100vh; height:100dvh }
.editor aside{ overflow-y:auto; border-right:1px solid var(--line); padding:var(--s-6) var(--s-6) var(--s-16) }
.editor aside > header{ display:grid; gap:var(--s-2); padding-bottom:var(--s-6); border-bottom:1px solid var(--line) }
.editor aside > header > *{ margin:0 }
.editor aside > header a{ font-size:var(--fs-small); color:var(--ink-2); text-decoration:none }
.editor .fisarmonica{ max-width:none }
.editor .fisarmonica summary{ font-size:var(--fs-lead) }
.editor .fisarmonica > div{ display:grid; gap:var(--s-4); color:var(--ink); margin-bottom:var(--s-6) }
.editor .fisarmonica .nota-ed{ font-size:var(--fs-small); color:var(--ink-2); margin:0 }
.editor .campo{ max-width:none }
.editor .campo textarea{ min-height:96px; font-family:var(--font-text); text-transform:uppercase }
.editor .campo input[type=range]{ max-width:none }
.editor .azioni-ed{ display:grid; gap:var(--s-2) }
.editor .azioni-ed .btn{ justify-content:center }
.editor .salva{ position:sticky; bottom:calc(var(--s-6) * -1); margin:var(--s-6) calc(var(--s-6) * -1) 0; padding:var(--s-4) var(--s-6); background:var(--bg); border-top:1px solid var(--line); display:grid; gap:var(--s-2) }
.editor .salva .btn{ justify-content:center }
.editor .salva p{ margin:0; font-size:var(--fs-small); color:var(--ink-2) }

.editor main{ display:flex; flex-direction:column; min-width:0; max-width:none; margin:0; padding:0; background:var(--card) }
.editor #stageArea{ flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden }
.editor #canvasWrap{ box-shadow:0 24px 64px rgb(0 0 0 / .18) }
.editor .piede-ed{ display:flex; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) var(--s-6); border-top:1px solid var(--line); font-size:var(--fs-meta); color:var(--ink-2); font-variant-numeric:tabular-nums }

/* label + valore sopra, cursore sotto */
.cursore{ display:grid; grid-template-columns:1fr auto; gap:var(--s-2) var(--s-4); align-items:baseline }
.cursore label{ font-size:var(--fs-control); font-weight:600 }
.cursore output{ font-size:var(--fs-small); color:var(--ink-2); font-variant-numeric:tabular-nums }
.cursore input{ grid-column:1 / -1; max-width:none }
.off{ opacity:.35; pointer-events:none }

/* segmenti a bottoni: il motore li vuole con aria-pressed */
.segmenti.a-bottoni{ display:flex; flex-wrap:wrap; width:auto; border-radius:var(--r-card) }
.segmenti button{ flex:1 0 auto; height:var(--ctl-sm); padding:0 var(--s-3); border:0; border-radius:var(--r-pill); background:none; color:var(--ink); font:500 var(--fs-small) var(--font-text); cursor:pointer; transition:background var(--t) var(--enter), color var(--t) var(--enter) }
.segmenti button:hover{ background:color-mix(in srgb, var(--ink) 8%, transparent) }
.segmenti button[aria-pressed=true]{ background:var(--ink); color:var(--bg) }
.segmenti button:disabled{ opacity:.35; cursor:not-allowed }

.campione-colore{ display:grid; grid-template-columns:20px 40px 1fr; gap:var(--s-3); align-items:center }
.campione-colore input[type=color]{ width:40px; height:var(--ctl-md); padding:0; border:0; border-radius:var(--r-sm); background:none; cursor:pointer }
.campione-colore input[type=color]::-webkit-color-swatch-wrapper{ padding:0 }
.campione-colore input[type=color]::-webkit-color-swatch{ border:1px solid var(--line); border-radius:var(--r-sm) }
.campione-colore input[type=color]::-moz-color-swatch{ border:1px solid var(--line); border-radius:var(--r-sm) }
.campione-colore input[type=text]{ height:var(--ctl-md); padding:0 var(--s-4); border:0; border-radius:var(--r-pill); background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); font:var(--fs-small) ui-monospace, Menlo, monospace; text-transform:uppercase }
#swatchField.off .campione-colore{ opacity:.35 }

.gruppo-font{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--s-3) }
.font-riga{ min-height:28px }
.campione-font{ font-size:17px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.font-riga:has(input:not(:checked)) .campione-font{ opacity:.35 }

#toast{ position:fixed; right:var(--gutter); bottom:var(--gutter); padding:var(--s-3) var(--s-6); border-radius:var(--r-card); background:var(--ink); color:var(--bg); font-size:var(--fs-small); opacity:0; translate:0 8px; transition:opacity var(--t) var(--enter), translate var(--t) var(--enter); pointer-events:none; z-index:10 }
#toast.show{ opacity:1; translate:none }

/* sotto i 768px i controlli vanno sotto il tavolo */
@media (max-width: 767px){
  .editor{ grid-template-columns:1fr; grid-template-rows:auto 1fr; height:auto }
  .editor main{ order:-1; height:55vh; position:sticky; top:0; z-index:1 }
  .editor aside{ border-right:0 }
}