/* TENDINE DEI MENU A SCELTA (select) · 03/11/2026
   Leonardo (pagina Profilo): «questi menu a tendina non sono in linea con il resto del sito… anche l'estetica, è troppo
   squadrato… deve essere tutto in linea e con lo stile del resto del sito». La tendina che si apre era quella del
   browser (fondo bianco, voce azzurra, angoli vivi) e ignorava tema e angoli del sito.
   UNA SOLA VERITÀ per tutte le pagine: area riservata (app.py, page()), scheda a passi (wizard.html), VIP-A, VIP-AG,
   VIP-M, DDS, intake DDS, landing. Ogni pagina ha i suoi nomi di variabile: qui si legge la prima che esiste.
   Due livelli:
   1. color-scheme segue il tema → in ogni browser la tendina nativa esce almeno scura sul tema scuro e chiara sul
      chiaro (Firefox, Safari, Chrome vecchi);
   2. dove il browser sa vestire la tendina (Chrome/Edge dal 135, «customizable select»: appearance:base-select sul
      select E sul suo ::picker) la tendina diventa un riquadro del sito: fondo del pannello, bordo, angolo «dentro»
      (20 px), voci a capsula (22 px), voce scelta in oro con la spunta, passaggio del mouse con un velo oro. La
      freccia resta quella di ogni pagina (background-image), quella di base-select si spegne. Altezza: quella che il
      browser trova libera, così la tendina si ribalta verso l'alto da sola vicino al fondo. */
html{
  --td-fondo:var(--panel,var(--card,var(--surface,#141414)));
  --td-testo:var(--white,var(--txt,var(--ink,#f2f4f6)));
  --td-bordo:var(--line,rgba(255,255,255,.10));
  --td-oro:var(--gold,var(--oro,var(--accent,#C5A059)));
  --td-grigio:var(--gray,var(--muted,#9aa0a6));
  --td-velo:color-mix(in srgb,var(--td-oro) 16%,transparent);
  --td-ombra:0 14px 40px rgba(0,0,0,.45)}
html[data-theme="light"]{--td-ombra:0 10px 30px rgba(0,0,0,.16)}
/* I RIQUADRI CHE IL BROWSER APRE DA SOLO seguono il tema: tendina nativa dei select (dove non c'è base-select),
   calendario e orologio delle date, tavolozza del colore, frecce dei numeri, pulsante «scegli file». */
select,input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week],
input[type=color],input[type=number],input[type=file],input[type=search]{color-scheme:dark}
html[data-theme="light"] :is(select,input[type=date],input[type=datetime-local],input[type=time],input[type=month],
 input[type=week],input[type=color],input[type=number],input[type=file],input[type=search]){color-scheme:light}
/* SUGGERIMENTI dei campi con <datalist> (/static/suggerimenti.js) e dell'indirizzo (dfsugg): stesso riquadro della
   tendina dei select. */
.sugg-box,.dfsugg{background:var(--td-fondo);color:var(--td-testo);border:1px solid var(--td-bordo);border-radius:var(--r-dentro,20px);
  padding:6px;box-shadow:var(--td-ombra);overflow:auto;font-size:14px;line-height:1.3}
.sugg-box{position:absolute;z-index:400;display:none;max-width:min(520px,calc(100vw - 24px))}
.sugg-box>div,.dfsugg>div{padding:9px 14px;border-radius:var(--r-campo,22px);cursor:pointer}
.sugg-box>div.att,.sugg-box>div:hover,.dfsugg>div.att,.dfsugg>div:hover{background:var(--td-velo)}
.sugg-box .sugg-nota{color:var(--td-grigio);font-size:12.5px;margin-left:6px}
/* CASELLE DI SPUNTA, PALLINI, CURSORI, BARRE: accento oro del sito, non il blu del browser (03/11: su Listino e
   Quaderni le spunte erano blu; le pagine che vogliono un accento proprio, es. il rosso della scheda a passi, hanno
   regole più specifiche e restano come sono). */
input[type=checkbox],input[type=radio],input[type=range],progress,meter{accent-color:var(--td-oro)}
/* A FUOCO: i select e le aree di testo rispondono come i campi di testo (bordo oro + alone), non col contorno di
   sistema o con niente (03/11: nell'area riservata il select a fuoco non cambiava). */
select:focus,textarea:focus{outline:none;border-color:var(--td-oro);box-shadow:0 0 0 3px var(--td-velo)}
@supports (appearance:base-select){
 /* «html …» per vincere, a parità di !important, sull'«appearance:none!important» della freccia di ogni pagina,
    qualunque sia l'ordine dei fogli di stile */
 html select:not([multiple]),html select:not([multiple])::picker(select){-webkit-appearance:base-select!important;appearance:base-select!important}
 /* 03/11 sera (Leonardo, filtri di Valutazioni: «lì dove c'è scritto tutti… è decentrato, non è al centro del pulsante»):
    con base-select il select diventa un contenitore flessibile ad allineamento «normal» e il testo sale in alto nei
    select bassi (38 px): qui va al centro, come nei pulsanti */
 html select:not([multiple]){align-items:center}
 select:not([multiple])::picker-icon{display:none}
 select:not([multiple])::picker(select){background:var(--td-fondo);color:var(--td-testo);border:1px solid var(--td-bordo);
  border-radius:var(--r-dentro,20px);padding:6px;margin:6px 0;box-shadow:var(--td-ombra);overflow:auto;
  min-width:anchor-size(width);font:inherit;font-size:14.5px}
 select:not([multiple]) option{padding:9px 14px;border-radius:var(--r-campo,22px);color:var(--td-testo);background:transparent;
  cursor:pointer;font:inherit;line-height:1.3}
 select:not([multiple]) option:hover,select:not([multiple]) option:focus-visible{background:var(--td-velo);outline:none}
 select:not([multiple]) option:checked{color:var(--td-oro);font-weight:700}
 select:not([multiple]) option::checkmark{color:var(--td-oro);margin-right:8px}
 select:not([multiple]) option:disabled{color:var(--td-grigio);cursor:default}
 select:not([multiple]) optgroup{padding:4px 0}
 select:not([multiple]) optgroup>legend{color:var(--td-grigio);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px 4px}
}