/* ============================================================
   CONTATTI — LA SCHEDA DI UN CONTATTO

   La scala dei corpi, le nove schede, le pastiglie che si tolgono e
   quelle che aggiungono, i filtri e i tipi dell'attivita', le spunte con
   la loro parola, i riquadri modificabili, e le misure che stavano nel
   markup della scheda.

   Stava in `contacts.css`, dopo le liste, e si carica dopo di loro.
   ============================================================ */
/* ---- la scala dei corpi dentro alla scheda ----
   Tre misure e basta: 14 il titolo di sezione, 13 il corpo delle righe,
   11.5 quello che sta sotto. Prima le righe ereditavano il 14 della
   pagina e ogni lista sembrava composta con un carattere diverso. */
.ct-listrow, .ct-tl-i, .ct-note, .ct-dealbox, .ct-logrow, .ct-sigrow, .ct-sw{font-size:13px;}
.ct-listrow strong, .ct-tl-i strong, .ct-note strong{font-weight:600;}
.ct-rec-r .ct-strong, .ct-rec-l .ct-strong{font-size:13px;}

/* Le nove schede della scheda contatto: il componente è quello della
   scheda cliente, con il contatore attaccato all’etichetta. */
.ct-rectabs{margin-bottom:14px;width:fit-content;max-width:100%;}
.ct-rectabs button{cursor:pointer;font-family:inherit;}
.ct-rectabs button:hover{color:var(--text);}
.ct-rectabs .ct-tab-n{background:rgba(127,100,80,.12);}
.ct-rectabs button.active .ct-tab-n{background:var(--primary-soft);color:var(--primary-dark);}

/* ---- la pastiglia che si toglie, e quella che aggiunge ----
   Un servizio scelto porta la sua crocetta: toglierlo non deve passare
   per «Modifica», cercarlo fra dodici e premere «Fatto». */
.ct-chip .x{width:15px;height:15px;border-radius:50%;border:none;background:transparent;padding:0;
  display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.55;
  cursor:pointer;flex-shrink:0;margin-right:-3px;}
.ct-chip .x:hover{opacity:1;background:var(--primary-mid);color:var(--on-accent);}
.ct-chip .x svg{width:10px;height:10px;}
.ct-chip.add{border-style:dashed;background:transparent;color:var(--neutral-ink);cursor:pointer;
  font-family:inherit;font-size:12.5px;padding:5px 11px;}
.ct-chip.add:hover{border-color:var(--primary-mid);color:var(--primary-dark);background:var(--primary-tint);}

/* ---- l’etichetta con la sua icona ---- */
.ct-kico{display:flex;align-items:center;gap:6px;}
.ct-kico svg{width:13px;height:13px;color:var(--muted);flex-shrink:0;}

/* ---- i filtri dell’attività ----
   Sono un segmentato e non sei pastiglie: in questa app un segmentato
   vuol dire «scegli fra questi», e non si confonde con un comando. */
.ct-actf{margin-bottom:14px;}
.ct-actf .ct-pill-n{font-size:10.5px;font-weight:700;background:var(--track);color:var(--neutral-ink);
  border-radius:5px;padding:0 5px;margin-left:5px;}
.ct-actf button[aria-checked="true"] .ct-pill-n{background:var(--card);color:var(--primary-dark);}

/* ---- il tipo di attività si vede dal colore ----
   Fondo tenue e inchiostro forte, la coppia che di notte si rovescia da
   sola: un pieno con l’icona bianca sopra sparirebbe a metà tinte. */
.ct-tlic.t-call{background:var(--primary-soft);color:var(--primary-dark);}
.ct-tlic.t-mail{background:var(--blue-soft);color:var(--blue);}
.ct-tlic.t-meet{background:var(--violet-soft);color:var(--violet);}
.ct-tlic.t-note{background:var(--amber-soft);color:var(--amber-dark);}
.ct-tlic.t-task{background:var(--green-soft);color:var(--green-dark);}
.ct-tlic.t-imp{background:var(--track);color:var(--neutral-ink);}
.ct-tlic.t-quote{background:var(--pink-soft);color:var(--pink);}
.ct-tlic.t-won{background:var(--primary);color:var(--on-accent);}

/* ---- una spunta con la sua parola, tutta premibile ----
   Un `<label>` non porta il clic a un `<button>`: la parola accanto alla
   casella non faceva niente. Ora sono lo stesso bottone. */
.ct-chkrow{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px 0 9px;
  border:1px solid var(--border);border-radius:10px;background:var(--card);cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);font-family:inherit;}
.ct-chkrow:hover{background:var(--hover);}
.ct-chkrow svg{width:13px;height:13px;color:var(--muted);}
.ct-chkrow[aria-checked="true"]{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}
.ct-chkrow[aria-checked="true"] svg{color:var(--primary-dark);}
.ct-chkrow[aria-checked="true"] .ct-chk{background:var(--primary);border-color:var(--primary);}
.ct-chkrow[aria-checked="true"] .ct-chk svg{opacity:1;color:var(--on-accent);}

/* Le righe modificabili dentro alla colonna stretta di sinistra: l’etichetta
   sopra e il valore sotto, che a 290px in due colonne non ci stanno.

   Una riga qui sono due righe di testo, e con quattro pixel sopra e sotto
   il valore di una finiva attaccato all'etichetta della successiva: dieci
   voci di fila si leggevano come un blocco solo. Lo spazio fra due voci
   diverse deve essere maggiore di quello fra l'etichetta e il suo valore,
   se no le due cose non si distinguono. */
.ct-rec-l .pf-card{padding:15px 16px 16px;}
.ct-rec-l .pf-row{grid-template-columns:minmax(0,1fr) 22px;align-items:start;min-height:0;padding:7px;gap:0;}
.ct-rec-l .pf-label{grid-column:1/2;line-height:1.3;}
.ct-rec-l .pf-val{grid-column:1/2;margin-top:3px;line-height:1.3;}
.ct-rec-l .pf-editor{grid-column:1/-1;margin-top:3px;}
/* La colonna va detta, non lasciata indovinare: con la sola `grid-row` la
   matita veniva piazzata da sola nella prima colonna libera — cioe' sopra
   all'etichetta, sovrapposta alla riga. Sta a lato, in mezzo alle due
   righe di testo. */
.ct-rec-l .pf-pencil{grid-column:2/3;grid-row:1/3;align-self:center;justify-self:end;}

/* ---- la nota a destra nella testata di un riquadro modificabile ---- */
.pf-head .ct-cap{margin-left:auto;text-align:right;max-width:46%;font-size:11.5px;line-height:1.35;flex-shrink:0;}

/* Il titolo di un riquadro modificabile sta accanto a quello di una
   sezione: mezzo pixel di differenza si vede, e sembra un errore. */
.ct-rec .pf-head-title{font-size:14px;}

/* ---- Le misure che stavano nel markup della scheda ---- */
/* Un valore forte dentro a una riga tenue: il colore del testo normale
   torna esplicito perche' `color` si eredita gia' calcolato. */
.ct-ink{color:var(--text);}
.ct-nameline{gap:7px;min-width:0;}
.ct-clientbadge{height:32px;padding:0 12px;}
.ct-rowend{justify-content:flex-end;}
.ct-rowtop{align-items:flex-start;}
.ct-emptypad{padding:22px;}

/* Il tono di un riquadro-numero: prima erano due token passati come
   stringhe alla funzione che lo disegna, e finivano in un attributo
   `style`. Sono sempre gli stessi quattro, e sono sempre la coppia fondo
   tenue / inchiostro forte, quindi stanno qui. */