/* Flow Scrum · Flow Kanban — i componenti dello stile unico (secondo foglio di ogni pagina, subito dopo css/tokens.css).
 * Consumano solo token (var(--sc-…)); misure in em/rem, così seguono il carattere della pagina e il proiettore.
 * Qui (PR 2): il focus da tastiera, gli avvisi (.ui-toast), la finestra di conferma (.ui-dialog, js/conferma.js).
 * Le PR successive aggiungono bottoni, campi, schede, pannelli e tooltip. */

/* ------------------------------------------------------------------ focus da tastiera: un solo anello per tutta l'app
 * Stessa forma ovunque (spessore, distanza, alone scuro sotto ai comandi). Il colore è il giallo d'azione; sulle superfici
 * chiare (l'ingresso giallo) l'area ridefinisce solo --sc-focus-colore per il contrasto. Nessuna regola
 * :focus-visible ridefinisce l'anello e nessun comando ha outline:none (test/stile.test.js). */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: var(--sc-focus-spessore) solid var(--sc-focus-colore);
  outline-offset: var(--sc-focus-distanza);
}
:is(button, a, summary, [role="button"], [role="tab"], .choice):focus-visible { box-shadow: var(--sc-focus-alone); }
/* i campi: l'anello aderisce al bordo */
:is(input, select, textarea):focus-visible { outline-offset: 0; }

/* ------------------------------------------------------------------ bottoni (PR 3): .ui-btn e le varianti
 * Un solo primario per vista (il prossimo passo: in città il bottone di «Cosa fare adesso»). Misure in em: seguono il
 * carattere della pagina (14 px in città, rem fluido in Flow Kanban) e il proiettore. I nomi vecchi delle due pagine dell'app
 * (body.sc-app: index.html e flowkanban.html) sono alias nella stessa regola finché non si migra il markup; ingresso e demo
 * restano fuori fino alla PR 9. La board (.jbtn) è dentro dalla PR 5, la retro (.rbtn) dalla PR 6: il loro primario
 * è giallo come nel resto dell'app. */
.ui-btn, :where(.sc-app) .rbtn, :where(.sc-app) .jbtn, :where(.sc-app) .btn, :where(.sc-app) button.primary, :where(.sc-app) .ghostbtn, :where(.sc-app) .panelbtn, :where(.sc-app) .trainer button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 2.5em; padding: .5em 1em; border-radius: var(--sc-raggio-m);
  border: 1px solid var(--sc-bordo-controllo); background: var(--sc-secondario); color: var(--sc-testo);
  font: inherit; font-weight: var(--sc-peso-medio); line-height: 1.2; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.ui-btn:hover, :where(.sc-app) :is(.btn, .jbtn, .rbtn, .ghostbtn, .trainer button):hover { background: var(--sc-secondario-hover); }
.ui-btn:active, :where(.sc-app) .btn:active { transform: translateY(1px); }
.ui-btn:disabled, .ui-btn[aria-disabled="true"], :where(.sc-app) :is(.btn, .jbtn, .rbtn, button.primary, .ghostbtn, .panelbtn):disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* primario: giallo pieno, uno per vista */
.ui-btn--primario, :where(.sc-app) .rbtn.primary, :where(.sc-app) .jbtn.primary, :where(.sc-app) .btn.primary, :where(.sc-app) button.primary, :where(.sc-app) .panelbtn {
  background: var(--sc-azione); color: var(--sc-su-azione); border-color: transparent; font-weight: var(--sc-peso-forte);
}
.ui-btn--primario:hover:not(:disabled), :where(.sc-app) :is(.rbtn.primary, .jbtn.primary, .btn.primary, button.primary, .panelbtn):hover:not(:disabled) { background: var(--sc-azione-hover); }
/* un primario spento non è giallo: il giallo dice «adesso fai questo» (PR 4) */
.ui-btn--primario:disabled, :where(.sc-app) :is(.rbtn.primary, .jbtn.primary, .btn.primary, button.primary, .panelbtn):disabled {
  background: var(--sc-secondario); color: var(--sc-testo-secondario); border-color: var(--sc-bordo-controllo);
}
/* fantasma: niente fondo né bordo finché non ci si passa sopra */
.ui-btn--fantasma, :where(.sc-app) .ghostbtn, :where(.sc-app) .jbtn.ghost { background: transparent; border-color: transparent; }
/* pericolo: bordo e testo rossi (il rosso pieno solo nella conferma finale) */
.ui-btn--pericolo, :where(.sc-app) .jbtn.danger, :where(.sc-app) .btn.danger, :where(.sc-app) .trainer button.red { background: transparent; border-color: var(--sc-danger); color: var(--sc-danger); }
.ui-btn--pericolo:hover, :where(.sc-app) :is(.jbtn.danger, .btn.danger, .trainer button.red):hover { background: var(--sc-danger-tenue); }
/* selezionato (un interruttore acceso, una scelta fatta): giallo tenue con il bordo, non pieno */
.ui-btn--selezionato, :where(.sc-app) .btn.on, :where(.sc-app) .ghostbtn.on { background: var(--sc-azione-tenue); border-color: var(--sc-azione-bordo); color: var(--sc-azione); }
/* icona: quadrato */
.ui-btn--icona { min-width: 2.5em; padding: .5em; }
/* piccolo */
.ui-btn--piccolo, :where(.sc-app) .btn.sm, :where(.sc-app) .jbtn.sm { min-height: 2.15em; padding: .35em .7em; font-size: .893em; border-radius: calc(var(--sc-raggio-m) - 2px); }

/* ------------------------------------------------------------------ schede (PR 4): due sole forme
 * barra: le schede di un pannello (Pannelli del Trainer, pannello destro della città): testo, riga gialla sotto l'aperta.
 * segmented: scelte, filtri e viste (categorie dei pezzi, Linea / Distinta, Le mie fasi / Tutti i passi, i round del
 * foglio): voci in una capsula, la scelta in giallo tenue col bordo. Le viste della board (.jtabs) e le schede del
 * dettaglio (.jitabs) sono barra dalla PR 5; i formati della retro (.rsegs) segmented dalla PR 6. */
.ui-tabs--barra, :where(.sc-app) .ftabs, :where(.sc-app) .stabs, :where(.sc-app) .jtabs, :where(.sc-app) .jitabs {
  display: flex; gap: .25em; border-bottom: 1px solid var(--sc-bordo-tenue);
}
.ui-tab, :where(.sc-app) .ftab, :where(.sc-app) .stab, :where(.sc-app) .jtab {
  padding: .55em 1em; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; border-radius: var(--sc-raggio-s) var(--sc-raggio-s) 0 0;
  background: none; color: var(--sc-testo-secondario); font: inherit; font-size: 1.05rem; font-weight: var(--sc-peso-medio); cursor: pointer;
}
.ui-tab:hover, :where(.sc-app) :is(.ftab, .stab, .jtab):hover { color: var(--sc-testo); background: var(--sc-secondario); }
.ui-tab--on, :where(.sc-app) .ftab.on, :where(.sc-app) .stab.on, :where(.sc-app) .jtab.on {
  color: var(--sc-testo); border-bottom-color: var(--sc-azione); font-weight: var(--sc-peso-forte);
}
.ui-segmented, :where(.sc-app) .rsegs, :where(.sc-app) .bomfilter, :where(.sc-app) .rtabs, :where(.sc-app) #top .tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--sc-campo);
  border: 1px solid var(--sc-bordo-tenue); border-radius: var(--sc-raggio-m);
}
.ui-segmented__voce, :where(.sc-app) .rseg, :where(.sc-app) .tab, :where(.sc-app) #top .tabs a, :where(.sc-app) .bomfilter button, :where(.sc-app) .rtabs button {
  display: inline-flex; align-items: center; gap: .35em; min-height: 0; padding: .35em .8em; border: 0; border-radius: var(--sc-raggio-s);
  background: none; color: var(--sc-testo-secondario); font-weight: var(--sc-peso-medio); text-decoration: none; cursor: pointer;
}
.ui-segmented__voce:hover, :where(.sc-app) :is(.rseg:not(:disabled), .tab, #top .tabs a, .bomfilter button, .rtabs button):hover { color: var(--sc-testo); background: var(--sc-secondario); }
.ui-segmented__voce--on, :where(.sc-app) .rseg.on, :where(.sc-app) .tab.on, :where(.sc-app) #top .tabs a.on, :where(.sc-app) .bomfilter button.on, :where(.sc-app) .rtabs button.on {
  background: var(--sc-azione-tenue); color: var(--sc-azione); box-shadow: inset 0 0 0 1px var(--sc-azione-bordo);
}

/* ------------------------------------------------------------------ pannelli e card (PR 4): i due Pannelli del Trainer uguali
 * la finestra, il titolo, le card (riquadri di una scheda), la card in evidenza (il comando principale della scheda) e il
 * titolo di sezione (MAIUSCOLO piccolo, emoji facoltativa davanti). In rem: seguono il carattere della pagina. */
.ui-pannello, :where(.sc-app) #modalBody:has(.fpanel), :where(.sc-app) .panel.fpanel-fl {
  background: var(--sc-superficie); color: var(--sc-testo); border: 1px solid var(--sc-bordo); border-radius: var(--sc-raggio-l);
  padding: 1.2rem 1.5rem; font-size: 1rem; box-shadow: var(--sc-ombra-3); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ui-pannello__titolo, :where(.sc-app) .fpanel > h2, :where(.sc-app) #pTitle {
  margin: 0 0 .3em; font-size: 1.45rem; font-weight: var(--sc-peso-forte); letter-spacing: -.01em; line-height: 1.2;
}
.ui-pannello__sottotitolo, :where(.sc-app) .fpanel > .sub, :where(.sc-app) .panel.fpanel-fl > .sub {
  margin: 0 0 .85em; color: var(--sc-testo-secondario); line-height: 1.45;
}
.ui-pannello__sottotitolo b, :where(.sc-app) :is(.fpanel, .panel.fpanel-fl) > .sub b { color: var(--sc-testo); font-variant-numeric: tabular-nums; }
.ui-pannello__chiudi, :where(.sc-app) #modalBody:has(.fpanel) > .close, :where(.sc-app) .panel.fpanel-fl > .close {
  position: absolute; top: .9rem; right: .9rem; width: 2.3rem; height: 2.3rem; padding: 0; display: grid; place-items: center;
  border-radius: var(--sc-raggio-m); border: 1px solid var(--sc-bordo-controllo); background: var(--sc-secondario); color: var(--sc-testo); font-size: 1.1rem; cursor: pointer;
}
.ui-pannello__chiudi:hover, :where(.sc-app) :is(#modalBody:has(.fpanel), .panel.fpanel-fl) > .close:hover { background: var(--sc-secondario-hover); }
.ui-card, :where(.sc-app) .rcard, :where(.sc-app) .fbox, :where(.sc-app) .pbox {
  background: var(--sc-superficie-2); border: 1px solid var(--sc-bordo); border-radius: var(--sc-raggio-m); padding: .85em 1em; min-width: 0;
}
.ui-card--evidenza, :where(.sc-app) .rcard.rstage, :where(.sc-app) .fbox-main, :where(.sc-app) .pmain {
  border-color: var(--sc-azione-bordo); background: linear-gradient(var(--sc-azione-velo), var(--sc-azione-velo)), var(--sc-superficie-2);
}
.ui-section-title, :where(.sc-app) .fbox > h3, :where(.sc-app) .pbox > h2 {
  margin: 0 0 .65em; font-size: .93rem; font-weight: var(--sc-peso-medio); text-transform: uppercase; letter-spacing: .06em;
  color: var(--sc-testo-secondario); line-height: 1.3;
}

/* ------------------------------------------------------------------ campi (PR 3): .ui-field, e i campi delle due pagine dell'app
 * (zero specificità; la board è dentro dalla PR 5, la retro dalla PR 6) */
.ui-field, :where(.sc-app :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"]), select, textarea)) {
  font: inherit; color: var(--sc-testo); background: var(--sc-campo); border: 1px solid var(--sc-bordo-controllo);
  border-radius: var(--sc-raggio-s); padding: .5em .7em; min-height: 2.5em;
}
.ui-field:focus, :where(.sc-app :is(input, select, textarea)):focus { border-color: var(--sc-azione); }
:where(.sc-app) select option { background: var(--sc-superficie); color: var(--sc-testo); }

/* ------------------------------------------------------------------ avvisi (js/avvisi.js): in alto al centro sotto la testata,
 * compatti, UNO ALLA VOLTA (la coda è in js/avvisi.js), al massimo due righe; un clic lo chiude. L'area dice solo l'altezza
 * (--sc-avvisi-alto: in Flow Kanban sotto la testata e sopra la linea, senza toccare i comandi del banco). */
.ui-avvisi {
  position: fixed; top: var(--sc-avvisi-alto, 82px); left: 50%; transform: translateX(-50%); z-index: var(--sc-z-avvisi);
  display: flex; justify-content: center; width: max-content; max-width: var(--sc-avvisi-largo, min(60vw, 40em)); pointer-events: none;
}
.ui-avvisi--sotto { z-index: var(--sc-z-avvisi-sotto); }
/* con una finestra aperta e poco posto: una riga sola, coi puntini (il testo intero è nel title) */
.ui-avvisi--riga .ui-toast { display: block; white-space: nowrap; text-overflow: ellipsis; }
.ui-toast {
  --tono: var(--sc-info);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-width: 100%; padding: .4em .95em .4em .8em; pointer-events: auto; cursor: pointer;
  border-radius: var(--sc-raggio-s); border: 1px solid var(--sc-bordo); border-left: .25em solid var(--tono);
  background: var(--sc-superficie); color: var(--sc-testo);
  font-family: var(--sc-font); font-size: .9rem; font-weight: var(--sc-peso-medio); line-height: 1.35;
  box-shadow: var(--sc-ombra-1); animation: ui-toast-in .2s ease-out;
}
.ui-toast--info { --tono: var(--sc-info); }
.ui-toast--ok { --tono: var(--sc-ok); background: linear-gradient(var(--sc-ok-tenue), var(--sc-ok-tenue)), var(--sc-superficie); }
.ui-toast--warn { --tono: var(--sc-warn); background: linear-gradient(var(--sc-warn-tenue), var(--sc-warn-tenue)), var(--sc-superficie); }
.ui-toast--danger { --tono: var(--sc-danger); border-color: var(--sc-danger); background: linear-gradient(var(--sc-danger-tenue), var(--sc-danger-tenue)), var(--sc-superficie); }
/* l'evento: solo i momenti che segnano il ritmo (il via, la Review, la Retro, l'obiettivo, «3… 2… 1…», la fine del round) */
.ui-toast--evento {
  --tono: var(--sc-azione); background: var(--sc-azione); color: var(--sc-su-azione); border-color: var(--sc-azione);
  font-size: 1.2rem; font-weight: var(--sc-peso-forte); padding: .45em 1.2em; border-radius: var(--sc-raggio-m); box-shadow: var(--sc-ombra-2);
}
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(-.4em); } }
@media (prefers-reduced-motion: reduce) { .ui-toast { animation: none; } }

/* ------------------------------------------------------------------ la finestra di conferma (js/conferma.js), uguale nei due giochi */
.ui-velo {
  position: fixed; inset: 0; z-index: var(--sc-z-conferma); display: grid; place-items: center; padding: 1em;
  background: var(--sc-velo); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ui-dialog {
  width: min(34em, calc(100vw - 32px)); max-height: 92vh; overflow: auto; padding: 1.45em 1.6em;
  background: var(--sc-superficie); color: var(--sc-testo); font-family: var(--sc-font); font-size: 1rem;
  border: 1px solid var(--sc-azione-bordo); border-radius: var(--sc-raggio-l); box-shadow: var(--sc-ombra-3);
}
.ui-dialog__titolo { margin: 0 0 .45em; font-size: 1.35em; font-weight: var(--sc-peso-forte); line-height: 1.25; color: var(--sc-testo); }
.ui-dialog__testo { margin: 0 0 1.15em; line-height: 1.45; color: var(--sc-testo); white-space: pre-line; }
/* il campo di chiediTesto() (js/conferma.js): etichetta sopra, campo a tutta larghezza */
.ui-dialog__campo { display: flex; flex-direction: column; gap: .4em; margin: 0 0 1.15em; line-height: 1.4; color: var(--sc-testo); }
.ui-dialog__campo .ui-field { width: 100%; box-sizing: border-box; }
.ui-dialog__azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7em; }

/* ------------------------------------------------------------------ i colori-dato negli stili in linea (PR 10b)
 * Un colore che è un dato (il colore di un team, di una persona, di un'epic, una serie di un grafico) arriva nel template
 * come variabile, già passato da safeColor (style="--sc-fondo-dato:…"): qui si applica con la stessa forza che aveva lo
 * stile in linea di prima (!important batte le regole normali, come uno style=). */
[style*="--sc-fondo-dato"] { background: var(--sc-fondo-dato) !important; }
[style*="--sc-fondo-colore-dato"] { background-color: var(--sc-fondo-colore-dato) !important; }
[style*="--sc-testo-dato"] { color: var(--sc-testo-dato) !important; }

/* ------------------------------------------------------------------ il tooltip dell'app (js/tip.js, PR 8): uno solo, al
 * posto del title del browser; sotto il comando (o sopra), dentro lo schermo, col tasto quando c'è; segue il proiettore */
.ui-tip {
  position: fixed; z-index: var(--sc-z-tip); max-width: min(22em, calc(100vw - 16px)); width: max-content;
  padding: .35em .65em; border-radius: var(--sc-raggio-s); border: 1px solid var(--sc-bordo);
  background: var(--sc-superficie); color: var(--sc-testo); box-shadow: var(--sc-ombra-tip);
  font-family: var(--sc-font); font-size: var(--sc-t-s); font-weight: var(--sc-peso-medio); line-height: 1.35;
  pointer-events: auto; white-space: normal;
}
.ui-tip[hidden] { display: none; }
.ui-tip kbd {
  display: inline-block; margin-left: .55em; padding: 0 .4em; min-width: 1.4em; text-align: center; border-radius: 4px;
  border: 1px solid var(--sc-bordo-controllo); background: var(--sc-secondario); color: var(--sc-testo-secondario);
  font-family: var(--sc-font-mono); font-size: .9em; font-weight: var(--sc-peso-normale);
}
/* le icone SVG dei comandi (js/icone.js): grandi quanto il testo, colore del testo */
.ui-ico { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; flex: none; }
.ui-ico svg { display: block; width: 100%; height: 100%; }
.tool > .ui-ico { width: 1em; height: 1em; } /* nelle barre degli strumenti: grande quanto le emoji accanto */

/* Stato vuoto: stesso motivo e prossimo passo in dashboard, panoramica e stampa. */
.ui-vuoto {
  display: flex; align-items: center; gap: .75em; padding: 1em; margin: .75em 0;
  border: 1px solid var(--sc-bordo); border-radius: var(--sc-raggio-m);
  background: var(--sc-superficie-2); color: var(--sc-testo-secondario);
  font-size: var(--sc-t-m); line-height: 1.5; text-align: left;
}
.ui-vuoto__icona { flex: none; font-size: 1.5em; }
.ui-vuoto p { margin: 0; }

/* Modelli della board: stessi componenti, con la modalità del dialog nativo. */
dialog.sc-modelli { box-sizing: border-box; font-size: calc(1rem * var(--sc-scala)); }
dialog.sc-modelli::backdrop { background: var(--sc-velo); }

/* Il doppio tocco sui comandi non ingrandisce la pagina; il pinch resta disponibile. */
button, select, [role="button"] { touch-action: manipulation; }
@media (any-pointer: coarse) {
  /* Specificità maggiore di .btn.sm: il minimo non deve perdere nella cascata. */
  #topbar button.btn { min-width: 44px; min-height: 44px; }

  body button, body .tool, body select, body .sw {
    min-width: 44px; min-height: 44px;
  }
  body input:not([type="checkbox"]):not([type="radio"]), body textarea, body select {
    font-size: max(16px, 1em);
  }
}
/* Gli appunti del facilitatore non si proiettano con la richiesta. */
html.projector .scenari-privati { display: none; }
.scenario-richiesta p { font-size: calc(1.1rem * var(--sc-scala, 1)); line-height: 1.5; white-space: pre-wrap; }
#fpane-scenari fieldset { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
#scTesto { display: block; width: 100%; }

/* Richieste del Trainer: testo integrale, scorrimento e chiusura esplicita per ogni invio. */
.scenari-ricevuti { position: fixed; z-index: var(--sc-z-board); top: 5rem; right: 1rem; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 6rem); overflow: auto; }
.scenari-ricevuti:empty { display: none; }
.scenari-ricevuti > div { background: var(--sc-superficie); color: var(--sc-testo); border: 1px solid var(--sc-bordo); border-radius: 12px; padding: 1rem; margin-bottom: .5rem; }
.scenari-ricevuti p { overflow-wrap: anywhere; }

@media (any-pointer: coarse) and (max-width: 1180px) {
  /* Gli indicatori restano nella scheda Città; spazio ai comandi del workshop. */
  body #topbar { gap: 4px; }
  #topbar #ticker, #topbar > .logo, #topbar > .sep { display: none; }
}

@media (pointer: coarse) {
  #topbar .kbd, #tools .k, #drawer .kbd { display: none; }
}

/* Densità comune delle righe di filtri e viste. I nomi della board sono alias:
 * il minimo lascia crescere i testi su più righe, senza altezze fisse. */
:is(.ui-controlli, .jtool, .jviste) { --sc-controllo-h: var(--sc-h-m); }
.sc-app :is(.ui-controlli, .jtool, .jviste) :is(button, input, select) {
  box-sizing: border-box; min-height: var(--sc-controllo-h);
  padding: var(--sc-spazio-1) var(--sc-spazio-3);
  font-size: calc(14px * var(--sc-scala, 1)); line-height: 1.2;
  border-radius: var(--sc-raggio-s);
}
.sc-app :is(.ui-controlli, .jtool, .jviste) button {
  border-radius: var(--sc-raggio-m); white-space: normal;
}
html.projector :is(.ui-controlli, .jtool, .jviste) { --sc-controllo-h: var(--sc-h-l); }
@media (any-pointer: coarse) {
  :is(.ui-controlli, .jtool, .jviste) { --sc-controllo-h: var(--sc-h-l); }
  .sc-app :is(.ui-controlli, .jtool, .jviste) :is(button, input, select) {
    font-size: max(16px, calc(14px * var(--sc-scala, 1)));
  }
}