/* La tavolozza: come sono fatti il comando in testa e il pannello dei due
   colori. Sta in un foglio suo perché lo carica anche l'organismo, che è
   un'altra pagina e un altro build: una copia sola, come per colori.js che
   la disegna. Dove il comando sta, in fondo a quale barra, lo dice invece
   il foglio di ciascuna pagina, perché quello è diverso.

   La pelle è quella di tutto il resto: squadrata, mono, minuta, due colori. */

/* Il comando: quadretto e parola dentro lo stesso bottone, così non c'è da
   centrare mezzo quadretto da sei pixel per capire cosa fa. */
.fondo-apri {
  display: inline-flex; align-items: center; gap: 9px; padding: 4px 2px;
  /* Niente rettangolo azzurro del sistema sotto il dito: il pannello si apre
     sopra la pagina, e quel lampo resterebbe a galleggiare pure lui. */
  -webkit-tap-highlight-color: transparent;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.fondo-apri:hover, .fondo-apri[aria-expanded="true"] { color: var(--ink); }
.coppia { display: inline-flex; border: 1px solid var(--frame); }
.fondo-apri:hover .coppia, .fondo-apri[aria-expanded="true"] .coppia { border-color: var(--accent); }
.coppia .meta { display: block; width: 13px; height: 13px; }
.coppia .meta + .meta { border-left: 1px solid var(--frame); }
/* La parola si ritirava fra i 900 e i 1150, dove il posto è contato: era lunga
   («fondo e inchiostro») e mangiava la riga. Dal 9.9.2026 è una sola, corta, e
   ci sta dappertutto: il comando dice sempre cosa fa. */

/* La tavolozza non scende più da sotto il bottone: galleggia sopra la pagina
   e si apre in mezzo allo schermo. Il motivo sta in colori.js: quello che si
   guarda scegliendo un colore è la pagina che diventa, non il pannello, e
   qui c'è la conseguenza: sta sopra ogni altro strato (la lente, la soglia),
   perché lo si apre da qualunque punto del sito e non dev'essere coperto. */
/* Chiusa vuol dire chiusa anche dove il foglio della pagina non ha una regola
   per `hidden`: il pannello si porta la sua, se no `display: flex` vince
   sull'attributo e la tavolozza sta sempre aperta. */
.tavolozza[hidden] { display: none; }
.tavolozza {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 60;
  /* Larga: i campi si tengono col pollice o col mouse senza mirare, e due
     colonne da duecento pixel sono la differenza fra scegliere un colore e
     indovinarlo. La larghezza è scritta e le due colonne se la dividono:
     senza, un pannello che si dimensiona da sé si stringe a una colonna e i
     due colori finiscono uno sotto l'altro: che è esattamente quello che non
     si vuole far vedere. Affiancati si vede che sono due. Su uno schermo
     stretto prende quasi tutta la riga, ma resta lo stesso pannello: non c'è
     una seconda tavolozza per il telefono. */
  width: min(460px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto;
  display: flex; flex-wrap: wrap; gap: 18px; padding: 0 18px 18px;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 22px 60px color-mix(in srgb, var(--fondo) 78%, transparent);
}

/* La maniglia. Prende tutta la larghezza e sfonda i fianchi del pannello:
   una maniglia da cercare non è una maniglia. I puntini a sinistra dicono da
   soli che la cosa si prende in mano: è un segno che si legge senza
   istruzioni, e costa un gradiente. */
.tv-testa {
  /* Il fianco sfondato si paga nella base: coi margini negativi la maniglia
     misurerebbe 36px MENO della riga, ci starebbe accanto alle due colonne e
     le schiaccerebbe a zero. Si dichiara larga quanto la riga più i due
     margini, e allora la riga è tutta sua e il resto va a capo. */
  flex: 1 0 calc(100% + 36px); margin: 0 -18px; padding: 10px 18px;
  display: flex; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--rule);
  cursor: move; touch-action: none; user-select: none; -webkit-user-select: none;
}
.tavolozza.in-mano .tv-testa { cursor: grabbing; }
.tavolozza.in-mano { box-shadow: 0 26px 70px color-mix(in srgb, var(--fondo) 86%, transparent); }
.tv-presa {
  width: 9px; height: 11px; color: var(--faint);
  background-image: radial-gradient(currentColor 0.9px, transparent 1.1px);
  background-size: 4px 4px;
}
.tv-testa:hover .tv-presa { color: var(--ink); }
.tv-titolo, .tv-chiudi {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
}
.tv-titolo { color: var(--mut); }
.tv-chiudi { margin-left: auto; padding: 2px 0; color: var(--faint); }
.tv-chiudi:hover { color: var(--ink); }

.tv-colonna { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tv-capo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tv-nome { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut); }
.tv-bollo { width: 15px; height: 15px; border: 1px solid var(--frame); }
/* Il campo: da sinistra a destra la tinta si accende, dal basso in alto si
   schiarisce. Sono due sfumature sopra la tinta piena, come le fa chiunque
   ma qui senza angoli tondi e senza ombre, che è la differenza. Alto, perché
   è dentro questo rettangolo che sta tutta la scelta. */
.tv-campo {
  position: relative; height: 148px; cursor: crosshair; touch-action: none;
  border: 1px solid var(--frame);
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    var(--tinta, #f00);
}
.tv-tinte {
  position: relative; height: 16px; cursor: ew-resize; touch-action: none;
  border: 1px solid var(--frame);
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
/* La mira: un quadratino col colore dentro e due bordi, uno chiaro e uno
   scuro, così si vede sopra qualunque colore ci finisca sotto. */
.tv-mira {
  position: absolute; width: 13px; height: 13px; margin: -7px 0 0 -7px; pointer-events: none;
  border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.65);
}
.tv-mira-riga { top: 50%; height: 18px; margin-top: -9px; }
.tv-esa {
  width: 100%; min-width: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 8px; border-radius: 0; background: var(--card); border: 1px solid var(--rule); color: var(--ink);
}
/* Il piede prende tutta la riga sotto le due colonne, e l'avviso, quando c'è,
   se ne prende una sua: accanto al bottone si spezzerebbero tutti e due a
   metà parola. */
/* Quando non c'è niente da dire, i due si leggono e sono quelli di casa,
   il piede se ne va invece di lasciare una riga vuota sotto i campi. */
.tv-piede:not(:has(> :not([hidden]))) { display: none; }
.tv-piede { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 1px; }
.tv-avviso { flex: 1 0 100%; margin: 0; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alert); }
.tv-casa {
  margin-left: auto; padding: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.tv-casa:hover { color: var(--ink); }