/* ============================================================
   CONTATTI — IL TELEFONO

   Stava in fondo a `contacts.css`, e quel foglio era arrivato a
   ottocentocinquanta righe con due mestieri: la pagina del desktop e la
   sua forma sotto ai 640. Si carica **subito dopo** di lui, quindi le
   regole vincono sulle stesse di prima esattamente come quando stavano in
   coda allo stesso file.
   ============================================================ */

/* ============================================================
   CONTATTI SU UN TELEFONO (640)

   Le soglie di sopra si fermano a 760: da li' in giu' la pagina non era
   mai stata guardata. Tre decisioni, e la prima e' quella che conta.

   **La tabella non scorre, cambia forma.** Undici colonne in
   trecentosettantacinque pixel non sono undici colonne: sono una tabella
   che si trascina di lato in cui la prima cosa utile — il nome — esce
   dallo schermo al primo dito. Qui ogni riga diventa una **scheda**: il
   nome in cima, la spunta nell'angolo, e sotto le altre colonne come
   «etichetta: valore». Il nome della colonna lo scrive
   `content:attr(data-lab)`, cosi' non sta due volte nel markup e nessuna
   colonna diventa un numero senza nome. Niente si nasconde: quello che
   si vedeva sul computer si vede anche qui, in un'altra forma.

   **La testata si spezza in tre righe**, non in due: titolo, sezioni,
   azioni. Le sezioni restano una striscia che scorre — sono quattro e
   una la stai guardando — invece di andare a capo e prendersi due righe.

   **Le griglie scendono all'osso.** Quelle che a 760 erano gia' due
   colonne diventano una; il percorso a sei passi resta a due, perche' a
   una diventa un elenco lungo e si perde il senso di «a che punto e'».
   ============================================================ */
@media (max-width:640px){
  /* **Le sezioni vanno a capo, non scorrono.** Sono quattro o cinque
     parole corte: su un telefono la striscia ne mostrava tre e le altre
     restavano dietro a uno scorrimento orizzontale dentro a una
     pastigliera, che e' il gesto che nessuno prova. Due righe costano
     trenta pixel e le fanno vedere tutte. */
  .ct-tabs{display:flex;flex-wrap:wrap;width:100%;overflow-x:visible;}
  /* ---- la testata ---- */
  .ct-htitle{font-size:19px;}
  .ct-hleft{flex-wrap:wrap;gap:10px;}
  .ct-hleft .ct-tabs{flex:1 0 100%;width:100%;}
  .ct-head{gap:10px;}

  /* ---- la barra: la ricerca prende la riga, i filtri stanno sotto ---- */
  .ct-bar{gap:8px;}
  .ct-bar .ct-search{flex:1 0 100%;max-width:none;}

  /* ---- la tabella diventa una lista di schede ----
     La forma la da' `.table-cards` in `components.css`, che e' di tutte
     le pagine che hanno una tabella larga. Qui resta quello che e' solo
     dei Contatti: la spunta, che non e' una colonna ma il gesto della
     scheda, e il posto che le si lascia accanto al nome. */
  .ct-tablecard{padding:8px;background:transparent;border:0;box-shadow:none;}
  /* La spunta va nell'angolo solo dove c'e' (`.ct-chkcol`): anche le
     tabelle dell'import diventano schede, e li' la prima cella e' il
     titolo — spostata nell'angolo finiva sopra al resto della scheda. */
  .ct-table.table-cards tr.sel{background:var(--primary-tint);border-color:var(--primary-mid);}
  .ct-table.table-cards tr.sel td{background:transparent;}
  .ct-table.table-cards:has(.ct-chkcol) td:first-child{position:absolute;top:10px;right:10px;padding:0;}
  .ct-table.table-cards:has(.ct-chkcol) td:nth-child(2){padding:0 36px 5px 0;}
  .ct-table.table-cards:has(.ct-chkcol) td:nth-child(2) .ct-strong{font-size:14px;}
  /* La barra del punteggio non si stira su mezza scheda. */
  .ct-scoretrack{max-width:120px;}

  /* ---- il resto delle griglie ---- */
  .ct-stiles,.ct-stiles.two,.ct-resgrid,.ct-colgrid{grid-template-columns:minmax(0,1fr);}
  .ct-journey{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ct-jst:nth-child(2n+1)::before{display:none;}
  .ct-dggrid,.ct-grid2,.ct-kv{grid-template-columns:minmax(0,1fr);}

  /* ============================================================
     LA TESTATA E LE SCHEDE DEL TELEFONO (`contacts/mobile.js`)
     ============================================================ */
  /* Le quattro sezioni come viste, con il loro conto, e accanto i filtri. */
  .ct-mseg a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
  .ct-mseg-n{font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
  .ct-mseg a.active .ct-mseg-n{color:var(--primary-dark);}
  /* Le viste salvate: una riga che scorre, come i filtri veloci. */
  /* Sul telefono i pezzi della pagina stanno piu' vicini: diciotto pixel
     fra una riga di pastiglie e la ricerca sono una riga vuota. */
  .ct-page{gap:10px;}
  .ct-mviews{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:2px 12px 2px;}
  .ct-mviews::-webkit-scrollbar{display:none;}
  .ct-mviews .qf-chip{flex:0 0 auto;white-space:nowrap;}
  .ct-mdirty{margin:0;}
  .ct-page > .ct-search{flex:0 0 auto;width:100%;max-width:none;height:42px;margin:0;padding:0 12px;border-radius:12px;
    background:var(--card);}
  .ct-page > .ct-search svg{width:17px;height:17px;}
  .ct-page > .ct-search input{font-size:14px;}
  .ct-mcount{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px;
    font-size:12px;color:var(--muted);}

  /* La scheda di un contatto nell'elenco. */
  .ct-mlist{display:flex;flex-direction:column;gap:10px;}
  .ct-mcard{display:block;padding:14px;margin:0;color:inherit;text-decoration:none;}
  .ct-mcard:active{background:var(--hover);}
  .ct-mcard.dim{opacity:.7;}
  .ct-mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
  .ct-mc-id{display:flex;flex-direction:column;min-width:0;}
  .ct-mc-id b{font-size:15px;font-weight:700;line-height:1.3;}
  .ct-mc-id small{font-size:12px;color:var(--muted);margin-top:2px;}
  .ct-mc-score{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;}
  .ct-mc-score b{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums;}
  .ct-mc-score small{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
  .ct-mc-score .ct-track{width:64px;height:5px;margin-top:4px;}
  .ct-mc-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;}
  .ct-mc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
  .ct-mc-foot{display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:10px;border-top:1px solid var(--border);}
  .ct-mc-task{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
  .ct-mc-tasktxt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  /* La scheda di un contatto: il quadrato con le iniziali e' quello del
     desktop, alla misura del titolo; le sezioni salgono nella testata. */
  .mhead-ava .ct-bigav{display:flex;align-items:center;justify-content:center;}
  .ct-rectabs{width:auto;}
  .ct-rectabs svg{display:none;}
  /* Le cinque cose da fare sono cinque tasselli, come nel disegno: una
     riga di bersagli uguali per un dito, non cinque icone sospese. */
  .ct-mdetail .ct-qa{gap:6px;margin-bottom:2px;}
  .ct-mdetail .ct-qa button{padding:10px 0 9px;border:1px solid var(--border);border-radius:14px;background:var(--card);
    box-shadow:var(--shadow);font-size:11.5px;}
  .ct-mdetail .ct-qa button:active{background:var(--hover);}
  .ct-mdetail .ct-qa button span{width:auto;height:auto;background:none;border-radius:0;}
  .ct-mdetail .ct-qa button span svg{width:18px;height:18px;}
  /* Le due strade di un contatto, larghe meta' riga ciascuna. */
  .ct-mdetail .ct-cta{flex-wrap:nowrap;gap:9px;}
  .ct-mdetail .ct-cta .btn{flex:1;min-height:46px;justify-content:center;border-radius:13px;font-size:13.5px;}

  /* Le liste e i compiti come schede (`.m-card` del vestito comune):
     qui solo quello che e' loro. */
  .ct-mlist > .m-card{margin:0;}
  .ct-mlist > .m-card.dim{opacity:.72;}
  .ct-mwarn{margin:0;font-size:12px;line-height:1.45;color:var(--muted);}
  .ct-mowner{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--neutral-ink);}
  .ct-mtask-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-width:0;}
  .ct-mtask-row .ct-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:none;}
  /* L'inchiostro neutro solo senza un tono: `.crm-late` sta in
     `contacts.css`, che si carica prima, e a parita' di peso perderebbe. */
  .ct-mdue{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:12px;font-weight:600;}
  .ct-mdue:not(.crm-late):not(.crm-soon){color:var(--neutral-ink);}
}