/* FurankuSan skin: i componenti comuni a tutti i plugin. Vuole tokens.css prima di sé.
   Qui c'è solo ciò che non dipende dal plugin: la griglia della finestra, le misure delle colonne e i
   casi particolari restano nella pagina del plugin, dopo questo file. Regole e esempi in STILE.md. */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 500 12px var(--ui); }

/* ---------- Rack: le linee da 1 px sono lo sfondo che si vede nel gap della griglia ---------- */
.app { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.app > * { background: var(--chassis); min-width: 0; min-height: 0; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; }
header img { height: 34px; width: auto; display: block; margin-right: 8px; }
h1 { margin: 0; }
.grow { flex: 1; }
.tiny { color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Pulsanti e select ---------- */
button, .filebtn, select {
  font: 600 11px var(--ui); color: var(--fg); background: var(--well); border: 1px solid var(--line); border-radius: 3px; padding: 6px 9px; cursor: pointer; letter-spacing: .03em;
}
button:hover, .filebtn:hover, select:hover { border-color: var(--glow-dim); }
button[aria-pressed="true"] { background: var(--glow); color: var(--on-glow); border-color: var(--glow); box-shadow: 0 0 12px var(--glow-shadow); }
button:focus-visible, select:focus-visible, input:focus-visible, .kn:focus-visible, .filebtn:focus-within { outline: 2px solid var(--glow); outline-offset: 2px; }
select { min-width: 0; max-width: 100%; }
/* Il pulsante principale (Play): ciano pieno a riposo, si spegne quando è premuto */
button.primary, button.primary:hover { background: var(--glow); color: var(--on-glow); border-color: var(--glow); padding: 7px 18px; min-width: 76px; font-size: 12px; box-shadow: 0 0 12px var(--glow-shadow-soft); }
button.primary[aria-pressed="true"] { background: var(--well); color: var(--glow); border-color: var(--glow); box-shadow: 0 0 12px var(--glow-shadow-soft); }
/* ‹ menu › */
.presetbox { display: flex; gap: 2px; align-items: stretch; }
.presetbox button { padding-inline: 6px; }
.presetbox select { min-width: 0; flex: 1; }

/* ---------- Menu galleggiante (voci, separatori a 1 px, campioni di colore) ---------- */
.menu { position: fixed; z-index: 16; display: flex; flex-direction: column; gap: 1px; padding: 3px; background: var(--chassis); border: 1px solid var(--glow-dim); border-radius: 4px; box-shadow: var(--float-shadow); }
.menu button { text-align: left; border: 0; background: transparent; padding: 5px 8px; white-space: nowrap; }
.menu button:hover { background: var(--well); }
.menu button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Dialogo modale ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: var(--veil); }
.dialog { width: 300px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--chassis); border: 1px solid var(--glow-dim); border-radius: 6px; box-shadow: var(--dialog-shadow); }
.textbox { background: var(--well); color: var(--fg); border: 1px solid var(--line); border-radius: 3px; padding: 5px 6px; font: 500 12px var(--ui); }
.dialog .btns { justify-content: flex-end; }

.menu .swatches { display: flex; gap: 4px; padding: 5px 8px; }
.menu .textbox { margin: 3px 5px; width: 13em; }
.menu .swatches button { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--line); }
.menu .swatches button:hover { border-color: var(--fg); }
.menu .swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fg); }
.pair { display: flex; align-items: center; gap: 8px; }

/* ---------- Colonne e sezioni ---------- */
.side { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
h2 { font: 600 11px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
section > * + * { margin-top: 6px; }
section > h2 + * { margin-top: 0; }
.field { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 6px; align-items: center; }
.field select { width: 100%; }
.field > span { color: var(--muted); font-size: 11px; }
.check { display: flex; gap: 6px; align-items: center; font-size: 11px; min-height: 22px; }
input[type=checkbox], input[type=range] { accent-color: var(--glow); }
input[type=range] { width: 100%; margin: 0; }
.btns { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Manopola (il disegno e il comportamento sono in knob.js) ---------- */
.knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px 2px; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.knob .lbl { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.kn { width: 46px; height: 46px; cursor: ns-resize; touch-action: none; border-radius: 50%; }
.kn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kn .body { fill: var(--knob-body); stroke: var(--knob-rim); }
.kn .track, .kn .v { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.kn .track { stroke: var(--line); }
.kn .v { stroke: var(--glow); filter: drop-shadow(0 0 3px var(--glow)); }
.kn .p { stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; }
.knob .val { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--well); padding: 1px 5px; border-radius: 2px; }

/* ---------- Sopra un canvas ---------- */
canvas { display: block; }
.viewbar { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; }
.hint { position: absolute; left: 8px; bottom: 6px; max-width: calc(100% - 16px); color: var(--fg); background: var(--scrim); padding: 2px 6px; border-radius: 3px; font-size: 11px; pointer-events: none; }

/* ---------- LED: acceso, si accende il punto, non il pulsante ---------- */
.led { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--well); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.led i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.led[aria-pressed="true"] { color: var(--fg); background: var(--well); box-shadow: none; }
.led[aria-pressed="true"] i { background: var(--glow); box-shadow: 0 0 6px var(--glow); }

/* ---------- Meter (il disegno sul canvas è in STILE.md) ---------- */
.meters { display: flex; justify-content: center; gap: 18px; }
.mcol { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.mval { width: 56px; text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; background: var(--well); padding: 2px 4px; border-radius: 2px; white-space: nowrap; }

/* ---------- Schede, letture, grafici, chip ---------- */
.card { background: var(--chassis); padding: 9px 11px; min-width: 0; overflow: hidden; }
.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; }
.readouts b { display: block; font: 600 13px var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--glow); }
.readouts b.hot { color: var(--block); }
.readouts small { display: block; color: var(--muted); font-size: 9.5px; letter-spacing: 0; white-space: nowrap; }
.plot { position: relative; background: var(--well); border: 1px solid var(--line); min-height: 0; }
.plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.plot span { position: absolute; left: 4px; top: 2px; z-index: 1; padding: 0 3px; background: var(--scrim); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
/* Due righe corte piuttosto che un nome tagliato */
.chips button { padding: 4px 2px; font-size: 10px; line-height: 1.1; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: center; text-align: center; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; margin-bottom: 6px; }
.cardhead h2 { margin: 0; }
.cardhead button { padding: 3px 6px; font-size: 10px; }

/* ---------- Sezione che si apre ---------- */
.fold { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px 6px; background: transparent; color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fold::before { content: '▸'; }
.fold[aria-expanded="true"]::before { content: '▾'; }
.fold small { margin-left: auto; color: var(--fg); font-size: 10px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.fold + .knobs { margin-top: 6px; }

/* ---------- Icone vettoriali: tratto, e .f per le parti piene ---------- */
svg.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.ico .f { fill: currentColor; stroke: none; }

/* ---------- Pulsante che apre un file ---------- */
.filebtn { position: relative; display: block; text-align: center; }
.filebtn input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* ---------- Spiegazione al passaggio del mouse ---------- */
.tip { position: fixed; z-index: 20; max-width: 280px; background: var(--tip-bg); border: 1px solid var(--glow-dim); border-radius: 4px; padding: 8px 10px; font: 500 12px/1.45 var(--ui); color: var(--fg); pointer-events: none; box-shadow: var(--float-shadow); }
.tip b { display: block; color: var(--glow); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }

/* ---------- Touch: bersagli più alti ---------- */
@media (pointer: coarse) {
  button, .filebtn, select { min-height: 34px; }
}