/* La voce comune degli strumenti — 12/08/2026.

   Nasce da una scelta: gli strumenti devono sembrare fatti dalla stessa mano
   che ha fatto stageplot.it, senza diventarne una copia. Da lì arrivano tre
   cose e tre soltanto — l'occhiello monospaziato, il titolo grosso a due
   voci, il verde acqua — mentre il fondo resta bianco.

   Il fondo bianco non è timidezza: qui dentro passano foto e PDF, e un fondo
   scuro mente sui loro colori. (Nel tavolo di ritaglio di «Posso pubblicarlo?»
   vale il contrario, ed è scuro apposta: lì si giudica una foto, non si legge
   una pagina.) E il resto del dominio — home, profilo, CV — è bianco: fare
   scuri solo gli strumenti spaccherebbe il sito in due.

   Questo foglio porta i TOKEN e poche classi nuove. Non ridefinisce .btn né
   le altre classi che ogni strumento ha già con significati suoi: si aggancia
   PRIMA del foglio locale, che resta libero di vincere. */

:root {
  /* Inchiostri. Il nero non è nero: tira appena al verde, come su StagePlot,
     e accanto al verde acqua non stona. */
  --ink:    #0f1614;
  --mut:    #5a6b67;

  /* Il grigio delle note piccole. Era #8b9793, che sul bianco dà 3,02 di
     contrasto: sotto il 4,5 che serve per leggere un testo di 12-13 px, e
     misurato su tutti gli strumenti erano 163 righe illeggibili — proprio
     quelle che spiegano cosa fa un comando. Scurito del minimo necessario:
     la tinta è la stessa, cambia solo quanta luce arriva. */
  --faint:  #68716d;

  /* La seconda voce del titolone resta chiara: a 42 px la soglia è 3:1, non
     4,5, e lì #8b9793 basta. Separarlo da --faint serve a non scurire il
     titolo per colpa delle note — sono due mestieri diversi. */
  --eco:    #8b9793;

  --line:   #e3e8e6;
  --line-forte: #ccd6d3;

  --bg:     #ffffff;
  --panel:  #f7faf9;

  /* Il verde acqua è quello di stageplot.it. --teal-l sui FONDI (è più chiaro
     e regge il testo scuro sopra), --teal sul TESTO.

     Sul testo era #0d9488: 3,74 sul bianco, sotto soglia per l'occhiello a
     12 px e per i link. Ora #0a7d72, che a occhio è lo stesso verde.

     Il valore è calcolato contro il fondo PEGGIORE, non contro il bianco: metà
     delle note sta dentro riquadri grigini (#f7faf9 i pannelli, #f1f3f4 le
     pillole) e lì il contrasto scende di un decimo. Il primo tentativo aveva
     fatto i conti col bianco e sette strumenti tornavano sotto soglia. */
  --teal:       #0a7d72;
  --teal-l:     #14b8a6;
  --teal-scuro: #04211d;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --raggio:   10px;
  --raggio-l: 14px;
}

/* L'occhiello: tre parole in monospaziato che dicono di cosa si parla, prima
   ancora del nome dello strumento. Servono a chi arriva da una ricerca e non
   sa dove è capitato. */
.occhiello {
  font: 500 12px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
}

/* Il titolo a due voci: la prima riga dice il nome, la seconda finisce la
   frase in grigio. È la stessa figura del «Disegna il palco. / Il rider si
   costruisce da solo.» */
.titolone {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1.08;
  margin: 0;
}
.titolone .eco { color: var(--eco); }

.apertura {
  color: var(--mut);
  font-size: 17px;
  line-height: 1.5;
  max-width: 460px;
  margin: 16px 0 30px;
}
.apertura b { color: var(--ink); font-weight: 650; }

/* La riga in fondo al pannello: dice le tre cose che tolgono il dubbio prima
   che venga. Monospaziata perché sembri un'etichetta, non una promessa. */
.riga-mono {
  font: 400 12.5px var(--mono);
  color: var(--faint);
  text-align: center;
  margin-top: 22px;
}
.riga-mono b { color: var(--teal); font-weight: 500; }

/* Sui telefoni il titolone non può restare da 42px: andrebbe a capo dove
   capita e mangerebbe mezza schermata prima che si veda cosa fa lo strumento. */
@media (max-width: 520px) {
  .titolone { font-size: 30px; letter-spacing: -.9px; }
  .apertura { font-size: 16px; margin-bottom: 24px; }
  .occhiello { font-size: 11px; }
}

/* Chi ha chiesto meno movimento non deve vedere comparse e scorrimenti. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ————— Roba grande abbastanza per un dito (13/08/2026) —————

   Misurato su tutti e diciannove gli strumenti: 105 bersagli sotto i 44 px,
   che è la misura minima di un tocco (linea guida Apple; Google dice 48). Le
   chip stavano a 26 px, i segmenti a 29, certi comandi a 15.

   Non è pignoleria: questi strumenti si usano in piedi in una sala, con una
   mano che tiene il telefono e l'altra su un mixer. Un bersaglio da 26 px lì
   si sbaglia, e sbagliarlo può voler dire far ripartire una misura da capo.

   Si allarga SOLO dove si tocca — schermo stretto oppure puntatore grosso —
   così sul computer, dove si punta col mouse, l'aspetto resta quello scelto.
   Il testo non cambia mai dimensione: cresce l'area, non la grafica. */

@media (max-width: 560px), (pointer: coarse) {
  .btn,
  .seg-btn,
  .chip,
  .scelta-btn,
  .vista-btn,
  .unit,
  .step,
  .f-dl,
  .preset,
  .adv-btn,
  button.link-piccolo,
  select,
  /* comandi con un nome tutto loro, trovati misurando: la cella dei tempi in
     BPM e il pulsante che copia i millisecondi in Ritardo diffusori — si
     toccano per copiare un numero, e sbagliarli copia il numero sbagliato */
  .cell,
  .haas {
    min-height: 44px;
  }

  /* I segmenti stanno in fila dentro una pillola: se cresce il figlio deve
     crescere anche il vassoio, o il testo esce dal bordo arrotondato. */
  .seg, .viste, .scelta, .unit-toggle, .chips { align-items: stretch; }
  .seg-btn, .vista-btn, .scelta-btn, .unit, .chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* I comandi scritti come una parola sottolineata — «Nascondi i tempi»,
     «Ricomincia da capo» — restano piccoli da vedere ma diventano grandi da
     toccare: l'area si estende sopra e sotto il testo, invisibile. */
  .btn-ghost, .reset-link {
    position: relative;
    display: inline-block;
  }
  .btn-ghost::after, .reset-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* ————— Il contorno di fuoco (14/08/2026) —————

   Chi gira gli strumenti col tasto Tab — perché non usa il mouse, o perché ha
   una mano sul mixer e l'altra sulla tastiera — deve VEDERE dove si trova.
   Misurato su tutti e diciannove: nessuno aveva una regola «:focus-visible»,
   e quattordici fogli locali spengono l'outline con «outline: none» sul
   «:focus» o con «appearance: none», che se lo porta via da solo. Risultato:
   si premeva Tab e non si muoveva niente di visibile.

   Tre scelte, e il perché di ognuna:

   1. «:focus-visible» e non «:focus». Così il contorno compare quando si
      naviga da tastiera e NON quando si clicca col mouse — che è il motivo
      per cui l'outline era stato spento in giro: dava fastidio al clic.

   2. «!important». Non è pigrizia: i fogli locali si agganciano DOPO questo,
      e la loro «.freq-input:focus { outline: none }» ha più peso di qualunque
      selettore si scriva qui. Senza, il contorno resterebbe scritto e
      invisibile. Nessun altro punto del sito usa «!important» sull'outline,
      quindi qui non si scavalca una scelta di nessuno.

   3. Il verde acqua e non il blu di sistema: è il colore della casa, e a
      3 px con 2 px di stacco si vede sia sul bianco delle pagine sia sul
      fondo scuro del tavolo di ritaglio di «Posso pubblicarlo?». */

a[href]:focus-visible,
area[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
  outline: 3px solid var(--teal) !important;
  outline-offset: 2px !important;
}

/* ————— Il dito, anche in larghezza (15/08/2026) —————

   La regola qui sopra fa crescere i bersagli SOLO in altezza («min-height»).
   Misurato: i comandi tondi — il «−» e il «+» dell'ottava in Tonalità — sono
   larghi 30 px e alti 44. Un bersaglio 30×44 si sbaglia come uno 30×30: il
   dito arriva di lato. Serve anche la larghezza, e su un comando tondo con
   «border-radius: 999px» il cerchio resta un cerchio.

   E le righe che si aprono («＋ Metti il pulsante nel tuo sito», «▸ Oppure
   parti da un file»): sono alte 27-31 px perché il loro riquadro è alto
   quanto il testo. Un «summary» è per definizione una cosa da toccare — non
   esiste un «summary» decorativo — quindi la regola può essere generale.

   Stessa storia per i segmenti stretti: «Live» in Tara un impianto misura 28
   px di larghezza, «10 s» 29, la pillola «X» di Posso pubblicarlo? 40 — tutti
   alti 44 e larghi come la parola che contengono. Su una fila di tre, portarli
   a 44 costa 50 px in tutto: entrano anche in una scheda da 280. */

@media (max-width: 560px), (pointer: coarse) {
  .step,
  .seg-btn,
  .chip { min-width: 44px; }
  summary { min-height: 44px; }
}

/* Chi ha alzato il contrasto di sistema vuole un segno più netto, non più
   elegante: il contorno diventa nero, che stacca su qualunque fondo. */
@media (prefers-contrast: more) {
  a[href]:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible,
  [contenteditable]:focus-visible {
    outline-color: var(--ink) !important;
  }
}