/* ============================================================================
   stage.css: tutto ciò che va sul palco o lo disegna.
   - stage plot (.stage-canvas, posizioni in % da data-* via app.js);
   - vista live (layout blank, sempre data-theme="dark");
   - player stems e stato della stanza live.
   stage.js: .liveview(.js), .slide(.active), #live-idx/prev/next/fs, .on sui toggle; la vista del brano sta in .slide[data-view].
   ============================================================================ */

/* ── stage plot ──────────────────────────────────────────────────────────── */
.stage-canvas {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--cable); border-radius: var(--r);
  background:
    repeating-linear-gradient(0deg, var(--cable) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--cable) 0 1px, transparent 1px 40px),
    var(--amp);
}
.stage-front, .stage-back {
  position: absolute; left: 0; right: 0; text-align: center; font-size: var(--fs-0); font-weight: 600;
  color: var(--ink-soft); padding: var(--s1); background: var(--amp);
}
.stage-front { bottom: 0; border-top: 1px dashed var(--cable); }
.stage-back { top: 0; border-bottom: 1px dashed var(--cable); }
.stage-empty {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s5);
  color: var(--ink-soft); font-size: var(--fs-0); text-align: center;
}
.stage-el {
  position: absolute; transform: translate(-50%, -50%); touch-action: none;
  display: flex; flex-direction: column; align-items: center; gap: var(--s1); cursor: grab;
}
.stage-el.dragging { opacity: .75; z-index: 50; cursor: grabbing; }
.stage-el .glyph {
  width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--amp-2); border: 2px solid var(--cable); color: var(--ink);
}
.stage-el .glyph svg { width: 22px; height: 22px; }
.stage-el .cap { font-size: var(--fs-0); font-weight: 600; background: var(--amp); padding: 0 var(--s1); border-radius: var(--r); }
/* il tipo si legge dal bordo; il fondo resta neutro per non sporcare l'icona */
.stage-el.musician .glyph { border-color: var(--cue); }
.stage-el.monitor .glyph { border-color: var(--warn); }
.stage-el.amp .glyph, .stage-el.di .glyph { border-color: var(--danger); }
.stage-el.drums .glyph, .stage-el.keys .glyph { border-color: var(--ink-soft); }
.stage-el.power .glyph, .stage-el.stand .glyph { border-color: var(--ok); }

/* ── vista live ──────────────────────────────────────────────────────────── */
.live-body { background: var(--stage); }
.liveview { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* sul palco ogni bersaglio è almeno 56px */
.liveview .btn { min-height: var(--hit-stage); min-width: var(--hit-stage); font-size: var(--fs-2); }
.liveview .iconbtn { width: var(--hit-stage); height: var(--hit-stage); min-height: var(--hit-stage); }
.liveview .btn svg { width: 22px; height: 22px; }
.live-top {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--stage);
}
.live-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--fh); font-weight: var(--fh-weight); font-stretch: var(--fh-stretch); font-size: var(--fs-2);
}
.live-pos { font-size: var(--fs-2); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.stage-tools, .slide-tools-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
#live-fs[hidden] { display: none; }
.stage-tools { padding: 0 var(--s4) var(--s3); border-bottom: 1px solid var(--cable); }
.slide-tools { margin-bottom: var(--s3); }
.slide-tools > summary {
  display: inline-flex; align-items: center; min-height: var(--hit-stage); padding: 0 var(--s4); cursor: pointer; list-style: none;
  border: 1px solid var(--cable); border-radius: var(--r); font-size: var(--fs-2); font-weight: 600; color: var(--ink-soft);
}
.slide-tools > summary::-webkit-details-marker { display: none; }
.slide-tools[open] > summary { color: var(--ink); margin-bottom: var(--s3); }
.slide-tools > summary:focus-visible { outline: 2px solid var(--cue); outline-offset: 2px; }
/* da 900px lo spazio c'e': stage.js le tiene aperte e il pulsante sparisce */
@media (min-width: 900px) { .slide-tools > summary { display: none; } .slide-tools[open] > summary { margin: 0; } }
.stage-group { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.stage-group .btn[aria-pressed="true"] { background: var(--cue); border-color: var(--cue); color: var(--cue-ink); }
.stage-tr {
  min-width: var(--hit-stage); text-align: center; font-size: var(--fs-2); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.live-stage { flex: 1; padding: var(--s6) var(--s5); display: flex; flex-direction: column; }
.slide { max-width: 900px; margin: 0 auto; width: 100%; min-width: 0; }
.liveview.js .slide { display: none; }
.liveview.js .slide.active { display: block; }
.slide-set { font-size: var(--fs-2); font-weight: 700; color: var(--cue); }
.slide-title {
  margin: var(--s2) 0 var(--s3); font-size: var(--fs-4); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; /* il titolo intero sta in title="" */
}
.slide-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-bottom: var(--s4);
  color: var(--ink-soft); font-size: var(--fs-2); font-variant-numeric: tabular-nums;
}
.slide-note {
  background: color-mix(in srgb, var(--cue) 10%, var(--amp)); border: 1px solid var(--cue); padding: var(--s3) var(--s4);
  border-radius: var(--r); margin-bottom: var(--s3); color: var(--ink); font-size: var(--fs-2); overflow-wrap: anywhere;
}
.slide-text, .slide-chords { line-height: 1.5; margin: 0 0 var(--s3); font-size: var(--fs-2); }
.slide-chords { color: var(--cue); font-weight: 700; font-family: var(--fm); white-space: pre; overflow-x: auto; }
.slide-empty { color: var(--ink-soft); font-size: var(--fs-2); }
.stage-alert { margin: var(--s3) var(--s4); font-size: var(--fs-2); }
.stage-msg { margin: var(--s3) var(--s4); font-size: var(--fs-2); }
.stage-wake { margin: var(--s3) var(--s4); color: var(--ink-soft); font-size: var(--fs-2); }
.stage-msg[hidden], .stage-wake[hidden] { display: none; }
/* lo scroll verticale resta al browser; il trascinamento orizzontale lo legge stage.js (swipe) */
.live-stage, .slide { touch-action: pan-y; }
/* scheda: i dati del brano a caratteri grandi, al posto della riga compatta e della nota */
.sheet-facts { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin: 0 0 var(--s5); font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.sheet-facts div { margin: 0; min-width: 0; }
.sheet-facts .sheet-wide { flex-basis: 100%; }
.sheet-facts dt { color: var(--ink-soft); font-size: var(--fs-2); }
.sheet-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
/* una vista alla volta: la scelta sta in data-view dell'articolo */
.slide[data-view="lyrics"] .slide-sheet, .slide[data-view="sheet"] .slide-text { display: none; }
.slide[data-view="sheet"] .meta-fact, .slide[data-view="sheet"] .slide-note { display: none; }

/* ChordPro (ChordProRenderer): accordo sopra la sillaba, colonne allineate anche con segmenti vuoti */
.cp-line { display: flex; flex-wrap: wrap; align-items: flex-end; }
.cp-seg { display: inline-block; vertical-align: bottom; max-width: 100%; }
.cp-chord, .cp-lyric { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-chord { min-height: 1.5em; color: var(--cue); font-family: var(--fm); font-weight: 700; padding-right: .5ch; }
.cp-lyric { min-height: 1.5em; }
.cp-gap { height: .75em; }
.cp-comment { margin: var(--s2) 0; color: var(--ink-soft); font-style: italic; }
.cp-chorus { margin: var(--s2) 0; padding-left: var(--s4); border-left: 1px solid var(--cable); }

.live-nav {
  position: sticky; bottom: 0; display: flex; gap: var(--s3); padding: var(--s3) var(--s4);
  border-top: 1px solid var(--cable); background: var(--stage);
}
.live-nav .btn { flex: 1; justify-content: center; }
/* sotto 900px la barra deve stare su una riga (5 bersagli da 56px su 375px) e il testo parte più in alto */
@media (max-width: 899px) {
  .stage-tools { gap: var(--s2); }
  .live-stage { padding-top: var(--s4); }
  .slide-meta { gap: 0 var(--s4); margin-bottom: var(--s3); }
}
/* misure del testo sul palco: mai sotto 22px */
.live-size-md .slide-title { font-size: var(--fs-4); }
.live-size-md .slide-text, .live-size-md .slide-chords { font-size: var(--fs-2); }
.live-size-lg .slide-title { font-size: clamp(36px, 11vw, 56px); }
.live-size-lg .slide-text, .live-size-lg .slide-chords { font-size: clamp(22px, 3vw, 28px); }
.live-size-xl .slide-title { font-size: clamp(36px, 11vw, 56px); }
.live-size-xl .slide-text, .live-size-xl .slide-chords { font-size: clamp(28px, 3.6vw, 40px); }

/* ── player stems e mini mixer ───────────────────────────────────────────── */
.stems-player { margin-top: var(--s2); }
.sp-transport { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); flex-wrap: wrap; }
.sp-play { min-width: var(--hit); }
.sp-bar { flex: 1; min-width: 8rem; height: 10px; background: var(--cable); border-radius: var(--r); cursor: pointer; overflow: hidden; }
.sp-bar i { display: block; height: 100%; width: 0; background: var(--ok); }
.sp-time { font-variant-numeric: tabular-nums; font-size: var(--fs-0); color: var(--ink-soft); min-width: 6rem; text-align: right; }
.sp-offline.on { color: var(--ok); }
.sp-mix { display: grid; gap: var(--s2); }
.sp-strip { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); background: var(--amp-2); border-radius: var(--r); flex-wrap: wrap; }
.sp-name { min-width: 8rem; font-weight: 600; display: flex; flex-direction: column; }
.sp-name small { font-weight: 400; color: var(--ink-soft); font-size: var(--fs-0); }
.sp-vol { flex: 1; min-width: 6rem; accent-color: var(--cue); }
.sp-btns { display: flex; gap: var(--s1); }
.sp-solo, .sp-mute, .sp-del {
  width: var(--hit); height: var(--hit); border-radius: var(--r); border: 1px solid var(--cable);
  background: transparent; color: var(--ink-soft); cursor: pointer; font-weight: 700; font-size: var(--fs-0);
}
.sp-del { font-size: var(--fs-1); line-height: 1; }
.sp-solo.on { background: var(--warn); color: var(--stage); border-color: var(--warn); }
.sp-mute.on { background: var(--danger); color: var(--stage); border-color: var(--danger); }
.sp-del:hover { color: var(--danger); border-color: var(--danger); }
.sp-midi { margin-top: var(--s3); }
.sp-cat { max-width: 8rem; }

/* stanza live (sync tra dispositivi via server) */
.live-room { margin: var(--s2) 0 var(--s4); }
.live-status { display: inline-block; padding: var(--s2) var(--s3); border-radius: var(--r); background: var(--amp); border: 1px solid var(--cable); font-size: var(--fs-0); }
.live-status.ok { color: var(--ok); }
.live-status.err { color: var(--danger); }
.live-pick .tname { font-weight: 600; }

/* ── stampa: lo stage plot va su carta ───────────────────────────────────── */
@media print {
  .stage-canvas { background: var(--paper) !important; border-color: var(--paper-soft); }
  .stage-el .glyph { background: var(--paper-2); border-color: var(--paper-soft); color: var(--paper-ink); }
  .stage-el .cap { background: transparent; color: var(--paper-ink); }
  .stage-back, .stage-front { background: var(--paper); color: var(--paper-soft); border-color: var(--paper-line); }
}