/* ============================================================
   CONTATTI — LE LISTE

   I numeri in cima, il registro, il costruttore di criteri con le sue
   pastiglie e l'anteprima, la scelta a mano, la testata e la tabella di
   una lista, i criteri da leggere, gli esclusi; e in fondo le misure che
   stavano nel markup. E' la stessa famiglia dei file `list-*.js`.

   Stava in `contacts.css` e si carica subito dopo: nessuna regola di
   qui veste un elemento che la pagina vesta con lo stesso peso, quindi
   l'ordine fra i due fogli non cambia chi vince.
   ============================================================ */
/* ---- liste: i numeri in cima ---- */
/* Il fondo tenue con l'inchiostro forte sopra: di notte si rovescia da solo,
   mentre il bianco su un pieno colorato sparirebbe. */
/* I quattro toni delle schede stavano qui, riscritti a mano sopra a un
   componente di tutti (`.kpi-icon`): sono gli stessi di `.u-tone-*` in
   `utilities.css`, cioe' la coppia «fondo tenue piu' inchiostro forte»
   di §7. Adesso si usano quelli. */

/* ---- liste: registro con l'icona in mezzo ---- */
.ct-logrow.ico{grid-template-columns:120px 24px minmax(0,1fr);}

/* ---- il costruttore di criteri ---- */
.ct-qb{display:flex;flex-direction:column;gap:0;}
.ct-grp{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--field);}
.ct-grp-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ct-grp-t{font-size:10.5px;font-weight:700;color:var(--neutral-ink);text-transform:uppercase;letter-spacing:.04em;}
/* Campo, operatore, valore e la crocetta: quattro colonne fisse, così le
   condizioni di un gruppo restano incolonnate e si leggono scendendo. */
.ct-cond{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,1.3fr) 28px;
  gap:8px;align-items:center;}
.ct-cond+.ct-cond, .ct-cond+.ct-andlab{margin-top:8px;}
.ct-andlab{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;margin:6px 0 0 2px;}
.ct-orsep{display:flex;align-items:center;gap:10px;padding:10px 2px;}
.ct-orsep::before, .ct-orsep::after{content:"";height:1px;background:var(--border);flex:1;}
.ct-orsep span{font-size:10.5px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);
  border-radius:6px;padding:3px 9px;letter-spacing:.04em;}
.ct-vcell{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap;}
.ct-vcell>.aselect, .ct-vcell>.adate{flex:1 1 120px;min-width:0;}
.ct-qin{height:31px;border:1px solid var(--border);border-radius:9px;padding:0 9px;background:var(--field);
  font-size:12.5px;color:var(--text);min-width:0;width:90px;}
.ct-qin.w{flex:1 1 120px;width:auto;}
.ct-qin:focus{outline:2px solid var(--primary);outline-offset:0;background:var(--card);}

/* ---- le regole dette a pastiglie ---- */
.ct-rulesline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ct-rulechip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 9px;
  border-radius:8px;background:var(--card);border:1px solid var(--border);color:var(--text);}
.ct-rulechip .op{color:var(--neutral-ink);font-weight:500;}
.ct-orpill{font-size:10.5px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);
  border-radius:6px;padding:3px 8px;}
.ct-andpill{font-size:10.5px;font-weight:700;color:var(--neutral-ink);background:var(--track);
  border-radius:6px;padding:3px 8px;}

/* ---- costruttore e anteprima, affiancati ---- */
.ct-buildgrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:16px;align-items:start;}
.ct-qbprev{position:sticky;top:12px;}
.ct-qbprev .card{margin-bottom:0;}
.ct-prevn{font-size:26px;font-weight:700;letter-spacing:-.4px;}
.ct-prevn span{font-size:13px;font-weight:500;color:var(--neutral-ink);}
.ct-prevrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border);font-size:12px;}
.ct-prevrow:first-of-type{border-top:none;}

/* ---- scegliere i contatti a mano ---- */
.ct-pickwrap{border:1px solid var(--border);border-radius:12px;max-height:320px;overflow:auto;}
.ct-pickrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-top:1px solid var(--border);
  width:100%;text-align:left;background:none;border-left:none;border-right:none;border-bottom:none;
  color:var(--text);font:inherit;cursor:pointer;}
.ct-pickrow:first-child{border-top:none;}
.ct-pickrow:hover{background:var(--hover);}
.ct-pickrow.on{background:var(--primary-tint);}
/* Dentro a un bottone la spunta non è un controllo a sé: è un disegno, e
   lo stato lo porta la riga. */
.ct-chk.on{background:var(--primary);border-color:var(--primary);}
.ct-chk.on svg{opacity:1;}

.ct-stiles.two{grid-template-columns:repeat(2,minmax(0,1fr));}

@media (max-width:1100px){
  .ct-buildgrid{grid-template-columns:minmax(0,1fr);}
  .ct-qbprev{position:static;}
}
@media (max-width:760px){
  .ct-cond{grid-template-columns:minmax(0,1fr) 28px;}
  .ct-cond>.ct-vcell{grid-column:1/2;}
  .ct-stiles.two{grid-template-columns:minmax(0,1fr);}
  .ct-logrow.ico{grid-template-columns:24px minmax(0,1fr);}
  .ct-logrow.ico>.ct-cap:first-child{grid-column:1/-1;}
}

/* ---- la testata di una lista ----
   Contenuto imbottito, poi una riga, poi le schede sul bordo di sotto:
   appiccicate al testo sembravano la continuazione della frase sopra. */
.ct-lhead{padding:0;overflow:hidden;}
.ct-lhead-top{padding:18px 18px 15px;}
.ct-lhead .ct-dtabs{border-top:1px solid var(--border);padding:0 8px;}
.ct-ltitle{font-size:19px;font-weight:700;margin:0;letter-spacing:-.2px;line-height:1.25;}
.ct-lsub{font-size:12.5px;color:var(--neutral-ink);line-height:1.45;max-width:70ch;}
.ct-lhead .ct-box{margin:2px 0 0;}

/* ---- la tabella delle liste ----
   Un numero allineato a destra tocca l’intestazione della colonna dopo:
   qui le colonne contate vogliono un dito d’aria in più. */
.ct-ltable th.ct-num, .ct-ltable td.ct-num{padding-right:24px;}
.ct-ltable th:first-child, .ct-ltable td:first-child{padding-left:14px;}
.ct-ltable tr[data-ct="l-row"]{cursor:pointer;}

/* ---- i criteri di una lista, da leggere ----
   Il numero in cima è il risultato, non un ornamento: è la sola cosa che
   le condizioni scritte sotto non dicono. Ogni condizione è una riga con
   tre pesi — il campo, l’operatore, il valore — così si legge come una
   frase invece che come una pastiglia dentro a una scatola. */
.ct-qcard{padding:0;overflow:hidden;}
.ct-qres{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--field);
  border-bottom:1px solid var(--border);flex-wrap:wrap;}
.ct-qres-n{font-size:30px;font-weight:700;letter-spacing:-.6px;line-height:1;color:var(--primary-dark);
  font-variant-numeric:tabular-nums;}
.ct-qres-t{font-size:13.5px;font-weight:600;color:var(--text);}
.ct-qview{padding:16px 18px 6px;display:flex;flex-direction:column;align-items:flex-start;}
.ct-qgnum{align-self:stretch;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 8px;}
.ct-qgnum:not(:first-child){margin-top:4px;}
.ct-qrow{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;border-radius:10px;max-width:100%;
  background:var(--card);border:1px solid var(--border);font-size:13px;}
.ct-qrow .f{font-weight:600;color:var(--text);}
.ct-qrow .o{color:var(--neutral-ink);}
.ct-qrow .v{font-weight:600;color:var(--primary-dark);background:var(--primary-soft);
  border-radius:7px;padding:2px 9px;}
/* «E» fra due condizioni: una linea con la parola in mezzo, così si vede
   che le righe stanno insieme senza doverlo leggere. */
.ct-qand{display:flex;align-items:center;gap:9px;padding:5px 0 5px 12px;align-self:stretch;}
.ct-qand::after{content:"";height:1px;background:var(--line-soft);flex:1;}
.ct-qand span{font-size:10.5px;font-weight:700;color:var(--neutral-ink);letter-spacing:.06em;}
.ct-qview .ct-orsep{padding:12px 0;align-self:stretch;}
.ct-qfoot{display:flex;align-items:center;gap:7px;padding:0 18px 15px;font-size:12px;color:var(--neutral-ink);}
.ct-qfoot svg{color:var(--muted);flex-shrink:0;}
.ct-qempty{display:flex;align-items:center;gap:10px;padding:20px 18px;font-size:13px;color:var(--neutral-ink);}
.ct-qempty svg{color:var(--dim);width:18px;height:18px;flex-shrink:0;}

/* ---- gli esclusi a mano ---- */
.ct-qexcl{padding:14px 18px 16px;border-top:1px solid var(--border);background:var(--field);}
.ct-qexcl .ct-flab{margin-bottom:8px;}
.ct-qexrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--border);font-size:13px;}
.ct-qexrow:first-of-type{border-top:none;}

/* ---- Liste di contatti: le misure che stavano nel markup ---- */
.ct-footsplit{justify-content:space-between;}
.ct-titlerow{gap:7px;}
.ct-vplain{font-weight:500;}
.ct-namecol{min-width:220px;}
.ct-helptitle{font-size:13.5px;}
.ct-helptext{line-height:1.5;}
.ct-helpkv{gap:8px 14px;}
.ct-helpv{font-size:12px;}
.ct-lhead-cols{align-items:flex-start;gap:18px;}
.ct-lhead-stack{gap:8px;min-width:0;}
.ct-lhead-tags{gap:9px;}
.ct-dlgtitle{margin:0;}
.ct-chiprow{gap:10px;margin-bottom:18px;}
.ct-checkrow{gap:7px;margin-bottom:16px;cursor:pointer;}

.ct-bsep{border-top:1px solid var(--border);padding-top:9px;}
.ct-qsub{margin-top:5px;}