/* Nitido · pagine «contatti» nel design editoriale. Un file per gruppo di pagine, caricato dopo nitido.css (vedi _pagine_css.html).
   Solo token di colore di nitido.css, classi con lo scope della pagina.

   Pagine: l'elenco dei contatti (contacts_dashboard.html, .nx-contatti.ct-list), la scheda del contatto
   (contact_detail.html, .nx-contatti.ct-card) e la Newsletter (newsletter.html, .nx-contatti.ct-nl); le finestre
   stanno fuori dallo scope della pagina, in .ct-modal. I pezzi comuni sono in _contatti.html.
   Modello: Oggi (sezione 14 di nitido.css), le Richieste (tavola 05) e la scheda della coppia (tavola 02), con le
   scelte di Francesco 1A 2A 3A 4B: angoli, ombre e margini di oggi; un solo vino pieno per schermata dove si può.
   Classi: ct- (questo file); dentro le pagine si riusano nx-sh, nx-figs, nx-thumb, nx-name, nx-meta, nx-st, nx-kv...

   Indice: 1. Comuni  2. Elenco  3. Finestre  4. Scheda del contatto  5. Newsletter
           6. Larghezze intermedie  7. Telefono  8. Passaggio del mouse */

/* ───────────────────────── 1. Comuni ───────────────────────── */
/* il ponte Bootstrap, solo qui: niente margini di p/ul/titoli, link senza sottolineatura, grassetto 500 */
:where(.nx-contatti, .ct-modal) :is(p, ul, ol, dl, dd, figure, h1, h2, h3, fieldset) { margin: 0; }
:where(.nx-contatti, .ct-modal) :is(ul, ol):not(.dropdown-menu) { padding: 0; list-style: none; }
:where(.nx-contatti) a:not(.nx-btn):not(.dropdown-item) { color: inherit; text-decoration: none; }
.nx-contatti :is(b, strong), .ct-modal :is(b, strong) { font-weight: 500; }
.nx-contatti .nx-st { height: auto; line-height: 1.35; align-items: baseline; }
.nx-contatti .nx-st::before { align-self: center; }
.nx-contatti .nx-name a { color: inherit; }
.nx-contatti { --ct-b: 36px; }

/* testata: titolo serif grande (come il saluto di Oggi), la frase sotto, a destra l'azione */
.ct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin: 8px 0 28px; }
.ct-head-t { flex: 1 1 520px; min-width: 0; }
.ct-head-t > .nx-eb { margin-bottom: 12px; }
.ct-title { overflow-wrap: anywhere; }
.ct-head .nx-dek { margin-top: 14px; max-width: 72ch; }
.ct-head-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 4px; }

/* pillole di filtro: bianco con filetto, la scelta col filetto pieno d'inchiostro, il numero in grigio (come Richieste) */
.ct-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.ct-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--nx-r-pill);
  font-size: 13.5px; font-weight: 500; color: var(--nx-ink); background: var(--nx-wall); box-shadow: inset 0 0 0 1px var(--nx-line);
  white-space: nowrap; flex: none; transition: box-shadow .15s, background .15s, color .15s;
}
.ct-pill b { font-weight: 500 !important; color: var(--nx-ink2); font-variant-numeric: tabular-nums; }
.ct-pill.is-on { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.ct-pill.is-on b { color: var(--nx-ink); }
.ct-pill.is-quiet { box-shadow: none; color: var(--nx-ink2); padding: 0 12px; }
.ct-pill.is-quiet.is-on { box-shadow: inset 0 0 0 1.5px var(--nx-ink); color: var(--nx-ink); }
.ct-pill.is-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* ricerca: grigio galleria, si accende al fuoco */
.ct-find {
  display: flex; align-items: center; gap: 10px; flex: 0 1 380px; min-width: 240px; height: 44px; margin: 0; padding: 0 14px;
  border-radius: var(--nx-r-md); background: var(--nx-grey); color: var(--nx-ink2); cursor: text; transition: background .15s, box-shadow .15s;
}
.ct-find input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  font: 400 14px var(--nx-f-ui); color: var(--nx-ink);
}
.ct-find input::placeholder { color: var(--nx-ink2); opacity: .85; }
.ct-find:focus-within { background: var(--nx-wall); box-shadow: inset 0 0 0 1.5px var(--nx-ink); }

/* tendine a pillola (tipo, genere, etichette) */
.ct-select {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; margin: 0;
  padding: 0 34px 0 15px; border: 0; border-radius: var(--nx-r-pill); font: 500 13.5px var(--nx-f-ui); color: var(--nx-ink); cursor: pointer;
  white-space: nowrap; box-shadow: inset 0 0 0 1px var(--nx-line); transition: box-shadow .15s;
  background: var(--nx-wall) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F656D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 13px center / 12px no-repeat;
}
.ct-select.is-on { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.ct-select:focus-visible { outline: 2px solid var(--nx-ink); outline-offset: 2px; }
.ct-select--btn::after { display: none; }                  /* il triangolo di Bootstrap: c'è già la freccia */
.ct-select .nx-i { color: var(--nx-ink2); }

/* bottoni a icona delle righe (WhatsApp, «⋯»): 36 px, 44 sul telefono */
.ct-ib {
  display: inline-grid; place-items: center; flex: none; width: var(--ct-b); height: var(--ct-b); padding: 0; border: 0; border-radius: var(--nx-r);
  color: var(--nx-ink2); background: var(--nx-wall); box-shadow: inset 0 0 0 1px var(--nx-line); cursor: pointer; list-style: none;
  transition: box-shadow .15s, color .15s, background .15s;
}
.ct-ib .nx-i { width: 17px; height: 17px; }
.ct-ib::-webkit-details-marker { display: none; }

/* il menu «⋯», in vetro bianco */
.ct-menu { position: relative; }
.ct-menu > summary { box-shadow: none; }
.ct-menu[open] > summary { background: var(--nx-grey); color: var(--nx-ink); }
.ct-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; min-width: 230px; padding: 6px;
  border-radius: 14px; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--nx-sh-float);
}
.ct-pop form { display: flex; margin: 0; }
.ct-pop :is(a, button) {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
  font: 500 13.5px/1.2 var(--nx-f-ui); color: var(--nx-ink); text-align: left; white-space: nowrap; cursor: pointer;
}
.ct-pop .nx-i { color: var(--nx-ink2); }
.ct-pop .is-danger, .ct-pop .is-danger .nx-i { color: var(--nx-wine); }

/* la casella di scelta: 18 px, zona da toccare più grande */
.ct-chk { display: grid; place-items: center; width: 22px; height: 44px; margin: -10px 0; cursor: pointer; }
.ct-chk input {
  appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 0;
  border-radius: 5px; background: var(--nx-wall); box-shadow: inset 0 0 0 1.5px var(--nx-ring); cursor: pointer; transition: background .15s, box-shadow .15s;
}
.ct-chk input::after {
  content: ""; width: 10px; height: 10px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ct-chk input:checked { background: var(--nx-ink); box-shadow: none; }
.ct-chk input:checked::after { opacity: 1; }
.ct-chk input:focus-visible { outline: 2px solid var(--nx-ink); outline-offset: 2px; }

/* etichette: un puntino del loro colore e il nome, su grigio galleria */
.ct-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ct-tag, var(--nx-mute)); }
.ct-tag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px; border-radius: var(--nx-r-pill);
  font-size: 12px; font-weight: 500; color: var(--nx-ink2); background: var(--nx-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-tag.is-more { padding: 0 8px; }

/* piede di pagina */
.ct-foot { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 14px 40px; margin-top: 44px; }
.ct-foot .nx-warm { max-width: 62ch; }
.ct-count { margin-left: auto; font-size: 13px; color: var(--nx-ink2); }

/* ───────────────────────── 2. Elenco (contacts_dashboard.html) ───────────────────────── */
.ct-list .ct-pills { margin-bottom: 14px; }
.ct-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 0; }
.ct-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.ct-reset { margin-left: 10px; }
.ct-reset .nx-i { width: 13px; height: 13px; }
.ct-tagdd-m { min-width: 260px; max-height: 340px; overflow-y: auto; }
.ct-tagopt {
  display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 0 10px; border-radius: var(--nx-r-sm);
  font-size: 13.5px; color: var(--nx-ink); cursor: pointer;
}
.ct-tagopt.is-none { color: var(--nx-ink2); cursor: default; white-space: normal; padding: 8px 10px; }
.ct-tagopt input {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin: 0; border-radius: 4px;
  box-shadow: inset 0 0 0 1.5px var(--nx-ring); background: var(--nx-wall); cursor: pointer;
}
.ct-tagopt input::after {
  content: ""; width: 9px; height: 9px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ct-tagopt input:checked { background: var(--nx-ink); box-shadow: none; }
.ct-tagopt input:checked::after { opacity: 1; }

/* invitati delle gallery: i matrimoni come pillole piccole, l'esportazione in alto a destra */
.ct-guests { margin-top: 36px; }
.ct-guests .nx-sh { margin-bottom: 6px; }
.ct-guests .nx-ul .nx-i { width: 14px; height: 14px; }
.ct-guests-x { margin: 0 0 14px; max-width: 70ch; font-size: 13.5px; line-height: 1.5; color: var(--nx-ink2); }
.ct-pills--sm { gap: 6px; }

/* il sotto-filtro del gruppo (Fornitori → Location, Fiorista…) e il menu delle gallery: tendine lunghe che non
   devono mai allargare la pagina, il testo lungo si accorcia con i puntini */
.ct-sub { margin: 14px 0 0; }
.ct-select--sub, .ct-select--gallery { max-width: 100%; min-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* la rubrica: intestazione sotto il filetto pieno, poi i gruppi per iniziale. Ogni riga è una griglia:
   scelta · iniziali · contatto · recapiti · newsletter ed etichette · azioni */
.ct-th, .ct-row {
  display: grid; column-gap: 18px;
  grid-template-columns: 22px 48px minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, .95fr) 84px;
  grid-template-areas: "chk th nm rc st ac";
}
.ct-list .c-chk { grid-area: chk; }
.ct-list .c-nm { grid-area: nm; min-width: 0; }
.ct-list .c-rc { grid-area: rc; min-width: 0; }
.ct-list .c-st { grid-area: st; min-width: 0; }
.ct-list .c-ac { grid-area: ac; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ct-row > .nx-thumb { grid-area: th; }
.ct-th { align-items: center; min-height: 48px; margin-top: 30px; border-top: 2px solid var(--nx-rule-strong); border-bottom: 1px solid var(--nx-rule); }
.ct-th > span { font: 600 var(--nx-t-eb)/1.35 var(--nx-f-ui); letter-spacing: var(--nx-eb-track); text-transform: uppercase; color: var(--nx-ink2); white-space: nowrap; }
.ct-th > .c-nm { grid-column: th-start / nm-end; }

.ct-sec { margin-top: 22px; }
.ct-sh { margin-bottom: 0; }
.ct-sh .nx-sh-t { min-width: 1ch; font-size: 22px; }
.ct-row { position: relative; align-items: center; min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--nx-rule); }
.ct-rows > .ct-row:last-child { border-bottom: 0; }
.ct-row .nx-name { font-size: var(--nx-t-list); }
.ct-thumb .nx-thumb-m { font-size: 16px; letter-spacing: .01em; }
.ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; margin-top: 4px; }
.ct-meta .nx-i { width: 13px; height: 13px; vertical-align: -2px; }
.ct-sep { color: var(--nx-mute); }
.ct-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-paid); font-weight: 500; }
.ct-partner, .ct-note { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.ct-note { cursor: help; }
.ct-gender {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; margin: 0; border: 0; border-radius: var(--nx-r-pill);
  font: 600 11px/1 var(--nx-f-ui); color: var(--nx-ink2); background: var(--nx-grey); cursor: pointer; transition: background .15s, color .15s;
}
.ct-gender.is-static { cursor: default; }
.ct-gender.is-busy { opacity: .5; }
.ct-line {
  display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 13.5px; line-height: 1.6; color: var(--nx-ink);
}
.ct-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-line .nx-i { flex: none; color: var(--nx-ink2); }
.ct-line.is-none { color: var(--nx-ink2); }
.ct-list .c-st > .nx-st { font-size: 13px; }
.ct-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ct-row.is-picked { background: linear-gradient(90deg, var(--nx-hover), var(--nx-hover)); }
.ct-row:has(.ct-menu[open]), .ct-row.has-menu { z-index: 5; }

/* scelta di più contatti: una barra che compare quando ne scegli almeno uno */
.ct-bulk {
  position: sticky; bottom: 20px; z-index: 12; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  width: fit-content; max-width: 100%; margin: 24px auto 0; padding: 10px 10px 10px 18px; border-radius: var(--nx-r-lg);
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--nx-sh-float);
}
.ct-bulk-n { font-size: 13.5px; color: var(--nx-ink2); white-space: nowrap; }
.ct-bulk-n b { font-weight: 600; color: var(--nx-ink); }
.ct-bulk .nx-btn { height: 40px; }

/* pagine: numeri come pillole piccole */
.ct-pages { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--nx-rule); }
.ct-pages-l { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ct-pg {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--nx-r-pill);
  font-size: 13.5px; font-weight: 500; color: var(--nx-ink); font-variant-numeric: tabular-nums; transition: box-shadow .15s, background .15s;
}
.ct-pg.is-on { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.ct-pg.is-off { color: var(--nx-mute); }
.ct-pg.is-gap { color: var(--nx-ink2); min-width: 20px; padding: 0; }

/* ───────────────────────── 3. Finestre (.ct-modal) ───────────────────────── */
/* titolo in DM Serif con l'etichetta sopra (come le finestre del Team); campi di Nitido su grigio galleria */
.ct-modal .modal-header { align-items: flex-start; padding-bottom: 4px; }
.ct-modal .modal-title.nx-ct-mtitle { margin: 0; font: 400 26px/1.15 var(--nx-f-serif); letter-spacing: -.014em; color: var(--nx-ink); overflow-wrap: anywhere; }
.ct-modal .ct-mkick { display: block; margin-bottom: 6px; font-family: var(--nx-f-ui); }
.ct-modal .modal-body { padding-top: 16px; }
/* il piede della finestra: Bootstrap calcola il padding da --bs-modal-padding, che in nitido.css ha due
   valori (20px 24px) e rende il calcolo non valido (padding 0): qui lo si scrive per esteso */
.ct-modal .modal-footer { justify-content: flex-end; gap: 8px; padding: 14px 24px 20px; }
.ct-modal .modal-footer > * { margin: 0; }
.ct-modal .nx-btn.disabled { opacity: .5; pointer-events: none; }
.ct-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 18px; }
.ct-msec { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--nx-rule); }
.ct-msec > .nx-eb { display: block; margin-bottom: 12px; }
.ct-mt { margin-top: 16px; }
.ct-at { position: relative; display: block; }
.ct-at > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; color: var(--nx-ink2); pointer-events: none; }
.ct-at > .nx-input { padding-left: 32px; }
.ct-box { margin-top: 12px; padding: 14px 16px 16px; border-radius: 14px; background: var(--nx-grey); }
.ct-box .nx-input { background: var(--nx-wall); }
.ct-box-x { margin: 0 0 12px; font-size: 13px; color: var(--nx-ink2); }
.ct-consent .nx-check { font-weight: 500; }
.ct-mnote { margin-bottom: 16px; }
.ct-mnote .nx-i { flex: none; margin-top: 1px; }

/* interruttore (il partner da creare) */
.ct-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 40px; margin: 0; font-size: 14px; font-weight: 500; color: var(--nx-ink); cursor: pointer; }
.ct-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-switch-t { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--nx-ring); transition: background .2s; }
.ct-switch-t::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--nx-wall); box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform .2s var(--nx-ease); }
.ct-switch input:checked + .ct-switch-t { background: var(--nx-ink); }
.ct-switch input:checked + .ct-switch-t::after { transform: translateX(14px); }
.ct-switch input:focus-visible + .ct-switch-t { outline: 2px solid var(--nx-ink); outline-offset: 2px; }

/* etichette da spuntare: pillole con il puntino del loro colore */
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chipck { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.ct-chipck input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ct-chipck > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--nx-r-pill);
  font-size: 13.5px; font-weight: 500; color: var(--nx-ink); background: var(--nx-wall); box-shadow: inset 0 0 0 1px var(--nx-line);
  transition: box-shadow .15s, background .15s;
}
.ct-chipck input:checked + span { box-shadow: inset 0 0 0 1.5px var(--nx-ink); background: var(--nx-grey); }
.ct-chipck input:focus-visible + span { outline: 2px solid var(--nx-ink); outline-offset: 2px; }

/* WhatsApp a più contatti: il messaggio a sinistra, le chat una alla volta a destra */
.ct-wa { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px 28px; }
.ct-wa-c, .ct-wa-s { display: flex; flex-direction: column; min-width: 0; }
.ct-wa-c > .nx-eb, .ct-wa-s > .nx-eb { margin-bottom: 12px; }
.ct-wa-box { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 14px; background: var(--nx-grey); }
.ct-wa-n { margin: 0; font: 400 44px/1 var(--nx-f-serif); letter-spacing: -.03em; color: var(--nx-ink); font-variant-numeric: tabular-nums; }
.ct-wa-n small { font-size: .5em; color: var(--nx-ink2); letter-spacing: 0; }
.ct-wa-bar { height: 3px; border-radius: 2px; background: var(--nx-track); overflow: hidden; }
.ct-wa-fill { height: 100%; background: var(--nx-ink); transition: width .3s var(--nx-ease); }
.ct-wa-next { margin: 4px 0 2px; font-size: 13.5px; color: var(--nx-ink2); overflow-wrap: anywhere; }
.ct-wa-next b { color: var(--nx-ink); }
.ct-wa-box .nx-btn { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }
.ct-wa-note { display: flex; gap: 8px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--nx-ink2); }
.ct-wa-note .nx-i { flex: none; margin-top: 1px; }

/* ───────────────────────── 4. Scheda del contatto (contact_detail.html) ───────────────────────── */
/* come la scheda della coppia (tavola 02): testata, copertina con le iniziali, indice, due colonne */
.ct-mast, .ct-mast .nx-mast-l { align-items: center; }
.ct-mast .nx-mast-r { align-items: center; gap: 14px; }
.ct-mast .nx-st { font-size: 13px; }
.ct-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -12px 0;
  font-size: 13px; font-weight: 500; color: var(--nx-ink2); white-space: nowrap; transition: color .15s;
}
.ct-back .nx-i { width: 14px; height: 14px; }

.ct-hero { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: 48px; margin-top: 28px; }
.ct-cover { align-self: start; }
.ct-cover .nx-classico-ini { letter-spacing: .01em; }
.ct-id { display: flex; flex-direction: column; min-width: 0; }
.nx-ct-name {
  margin: 10px 0 0; font: 400 56px/1 var(--nx-f-serif); letter-spacing: -.026em; color: var(--nx-ink);
  text-wrap: balance; overflow-wrap: anywhere;
}
.ct-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 14px 0 0; font-size: 16px; color: var(--nx-ink2); }
.ct-when span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ct-when .nx-i { width: 15px; height: 15px; flex: none; }
.ct-when .ct-lnk { color: var(--nx-ink); font-weight: 500; }
.ct-reach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ct-split { display: inline-flex; }
.ct-split > .nx-btn:first-child:not(:last-child) { border-radius: var(--nx-r) 0 0 var(--nx-r); }
.ct-split .dropdown { display: inline-flex; }
.ct-split .ct-split-t { width: 34px; padding: 0; margin-left: -1px; border-radius: 0 var(--nx-r) var(--nx-r) 0; color: var(--nx-ink2); }
.ct-split .ct-split-t::after { display: none; }
.ct-split .dropdown-menu { min-width: 220px; }

/* le cifre del contatto, in fondo alla colonna (allineate al piede della copertina) */
.ct-specs { display: flex; flex-wrap: wrap; margin: 24px 0 0; border-top: 1px solid var(--nx-rule); }
.ct-hero .ct-specs { margin-top: auto; }
.ct-hero .ct-reach:has(+ .ct-specs), .ct-hero .ct-when:has(+ .ct-specs) { margin-bottom: 24px; }
.ct-spec { min-width: 0; padding: 14px 32px 0 0; }
.ct-spec + .ct-spec { padding-left: 28px; box-shadow: inset 1px 0 0 var(--nx-rule); }
.ct-spec dt { display: block; }
.ct-spec dd { margin: 7px 0 0; font-size: 14.5px; font-weight: 500; color: var(--nx-ink); }
.ct-spec dd.ct-spec-v { margin-top: 5px; font: 400 24px/1 var(--nx-f-serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* indice della scheda */
.ct-index {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 40px; padding: 14px 0;
  border-top: 1px solid var(--nx-rule); border-bottom: 1px solid var(--nx-rule);
}
.ct-index a { display: inline-flex; align-items: baseline; gap: 6px; padding: 12px 0; margin: -12px 0; font-size: 13.5px; font-weight: 500; color: var(--nx-ink); white-space: nowrap; }
.ct-index em { font: italic 400 14px/1 var(--nx-f-serif); color: var(--nx-wine); }

/* corpo: colonna principale e colonna a destra con un filetto */
.ct-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--nx-gap-col); margin-top: 48px; align-items: start; }
.ct-main, .ct-aside { min-width: 0; }
.ct-aside { padding-left: 40px; margin-left: -24px; box-shadow: inset 1px 0 0 var(--nx-rule); }
.ct-card .ct-blk { margin-top: 48px; min-width: 0; scroll-margin-top: 80px; }
.ct-card .ct-main > .ct-blk:first-child, .ct-card .ct-aside > .ct-blk:first-child { margin-top: 0; }
.ct-csh { margin-bottom: 8px; }
.ct-none { padding: 12px 0; font-size: 14px; color: var(--nx-ink2); }
.ct-lnk { color: var(--nx-ink); text-decoration: underline; text-decoration-color: var(--nx-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* matrimoni e richieste collegate: monogramma, coppia, data e luogo, ruolo, stato */
.ct-link {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto var(--ct-b); column-gap: 16px; align-items: center;
  min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--nx-rule);
}
.ct-link:last-child { border-bottom: 0; }
.ct-link-t { min-width: 0; }
.ct-link .nx-name { white-space: normal; text-wrap: balance; }
.ct-link .nx-meta b { font-weight: 500; }
.ct-role {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--nx-r-pill);
  font-size: 12px; font-weight: 500; color: var(--nx-ink2); background: var(--nx-grey); white-space: nowrap;
}
.ct-link-x { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.ct-link-x .nx-st { font-size: 13px; }
.ct-link .ct-ib { color: var(--nx-ink); }

/* note in un riquadro grigio (come nella scheda della coppia) */
.ct-notebox { margin-top: 12px; padding: 16px 18px; border-radius: 14px; background: var(--nx-grey); }
.ct-note-t { font-size: 14px; line-height: 1.55; color: var(--nx-ink); white-space: pre-line; overflow-wrap: anywhere; }
.ct-note-t.is-empty { color: var(--nx-ink2); }

/* elenchi chiave → valore, con i puntini di guida */
.ct-kv { margin-top: 2px; }
.ct-kv li { min-width: 0; }
.ct-kv-k { flex: none; color: var(--nx-ink2); white-space: nowrap; }
.ct-kv-v { min-width: 0; text-align: right; color: var(--nx-ink); overflow-wrap: anywhere; }
.ct-kv-v.is-none { color: var(--nx-mute); }
.ct-kv .nx-kv-sub { font-size: 12.5px; text-align: right; }
.ct-kv .nx-st { font-size: 13px; flex: none; }
.ct-kv li.is-2 .nx-kv-sub { flex-basis: 100%; }
.ct-wa-l { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px -4px -6px 2px; vertical-align: middle; color: var(--nx-ink2); border-radius: 8px; }
.ct-tags--card { gap: 6px; margin-top: 12px; }
.ct-tags--card .ct-tag { height: 28px; padding: 0 12px; font-size: 13px; }

/* ───────────────────────── 5. Newsletter (newsletter.html) ───────────────────────── */
/* le cifre di chi la riceve, poi due colonne: destinatari | messaggio; sotto gli ultimi invii */
.ct-nl .ct-head { margin-bottom: 26px; }
.ct-nl-figs { margin-bottom: 8px; }
.ct-nl-board {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--nx-gap-col);
  align-items: start; margin-top: 48px;
}
.ct-nl-aud, .ct-nl-comp { min-width: 0; }
.ct-nl-comp { padding-left: 40px; margin-left: -24px; box-shadow: inset 1px 0 0 var(--nx-rule); }

/* mentre le email partono: vetro bianco sulla tavola */
.ct-nl-busy {
  position: absolute; inset: -12px; z-index: 30; align-items: center; justify-content: center; border-radius: var(--nx-r-lg);
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ct-nl-busy-in { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; }
.ct-nl-busy-t { font: 400 26px/1.15 var(--nx-f-serif); letter-spacing: -.014em; color: var(--nx-ink); }
.ct-nl-busy-x { max-width: 38ch; font-size: 13.5px; color: var(--nx-ink2); }
.ct-spin { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--nx-track); border-top-color: var(--nx-wine); animation: ct-spin .8s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* destinatari: filtri, «scegli tutti», l'elenco che scorre */
.ct-nl-filters { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 14px; }
.ct-find--full { flex: none; width: 100%; min-width: 0; }
.ct-nl-filters .ct-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ct-nl-filters .ct-select { width: 100%; min-width: 0; height: 36px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ct-nl-filters .ct-switch { align-self: flex-start; font-size: 13.5px; }
.ct-nl-all {
  display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 12px 0 0; padding: 0 2px; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--nx-ink); border-top: 2px solid var(--nx-rule-strong); border-bottom: 1px solid var(--nx-rule);
}
.ct-nl-all .ct-chk { margin: 0; height: auto; }
.ct-nl-scroll {
  max-height: 560px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent);
}
.ct-nl-item { border-bottom: 1px solid var(--nx-rule); }
.ct-nl-item.d-none { display: none; }
.ct-nl-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; margin: 0; padding: 12px 2px; cursor: pointer; }
.ct-nl-row .ct-chk { height: 22px; margin: 0; }
.ct-nl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-nl-n { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--nx-ink); overflow-wrap: anywhere; }
.ct-nl-m { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; line-height: 1.45; color: var(--nx-ink2); }
.ct-nl-m > span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.ct-nl-m .nx-i, .ct-nl-t .ct-tag .nx-i { width: 12px; height: 12px; color: var(--nx-ink2); flex: none; }
.ct-nl-t .ct-tags { margin-top: 3px; }
.ct-nl-t .ct-tag { height: 22px; font-size: 11.5px; }
.ct-nl-s { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-top: 1px; text-align: right; }
.ct-nl-s .nx-st { font-size: 12.5px; }
.ct-nl-s small { font-size: 11.5px; color: var(--nx-ink2); white-space: nowrap; }
.ct-nl-item.is-picked { background: var(--nx-hover); }

/* il messaggio: campi di Nitido, l'editor su un foglio bianco con il filetto */
.ct-nl-field { margin-top: 16px; }
.ct-nl-subject { height: 52px; font-size: 16px; }
.ct-nl-ed { position: relative; margin-top: 16px; border-radius: var(--nx-r-lg); background: var(--nx-wall); box-shadow: inset 0 0 0 1px var(--nx-rule); }
.ct-nl .ct-nl-bar.ql-toolbar.ql-snow { border: 0; border-radius: var(--nx-r-lg) var(--nx-r-lg) 0 0; padding: 8px 10px; background: var(--nx-grey); font-family: var(--nx-f-ui); }
.ct-nl .ql-snow.ql-toolbar button { width: 32px; height: 32px; padding: 7px; border-radius: 8px; }
.ct-nl .ql-snow.ql-toolbar button:hover, .ct-nl .ql-snow.ql-toolbar button.ql-active { background: var(--nx-wall); }
.ct-nl .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ct-nl .ql-snow.ql-toolbar button:hover .ql-stroke { stroke: var(--nx-ink); }
.ct-nl .ql-snow.ql-toolbar button.ql-active .ql-fill, .ct-nl .ql-snow.ql-toolbar button:hover .ql-fill { fill: var(--nx-ink); }
.ct-nl .ql-snow .ql-stroke { stroke: var(--nx-ink2); }
.ct-nl .ql-snow .ql-fill { fill: var(--nx-ink2); }
.ct-nl .ql-snow .ql-picker { color: var(--nx-ink); font-size: 13.5px; font-weight: 500; height: 32px; }
.ct-nl .ql-snow .ql-picker.ql-header { width: 128px; }
.ct-nl .ql-snow .ql-picker-label { display: flex; align-items: center; border: 0 !important; border-radius: 8px; padding-left: 10px; }
.ct-nl .ql-snow .ql-picker.ql-expanded .ql-picker-label, .ct-nl .ql-snow .ql-picker-label:hover { background: var(--nx-wall); color: var(--nx-ink); }
.ct-nl .ql-snow .ql-picker-options { border: 0 !important; border-radius: 12px; padding: 6px; box-shadow: var(--nx-sh-float); }
.ct-nl .ql-snow .ql-picker-item { padding: 6px 8px; border-radius: 8px; }
/* le voci della tendina e dei link nella lingua della pagina (data-label di Quill, data-nx-* dallo script) */
.ct-nl .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]::before,
.ct-nl .ql-snow .ql-picker.ql-header .ql-picker-item[data-label]::before { content: attr(data-label); }
.ct-nl .ql-snow .ql-tooltip { z-index: 5; border: 0; border-radius: 12px; padding: 8px 12px; box-shadow: var(--nx-sh-float); color: var(--nx-ink); font: 400 13.5px var(--nx-f-ui); }
.ct-nl .ql-snow .ql-tooltip[data-nx-apri]::before { content: attr(data-nx-apri); }
.ct-nl .ql-snow .ql-tooltip[data-nx-scrivi][data-mode=link]::before { content: attr(data-nx-scrivi); }
.ct-nl .ql-snow .ql-tooltip a.ql-action[data-nx-modifica]::after { content: attr(data-nx-modifica); }
.ct-nl .ql-snow .ql-tooltip.ql-editing a.ql-action[data-nx-salva]::after { content: attr(data-nx-salva); }
.ct-nl .ql-snow .ql-tooltip a.ql-remove[data-nx-togli]::before { content: attr(data-nx-togli); }
.ct-nl .ql-snow .ql-tooltip input[type=text] { height: 32px; border: 0; border-radius: 8px; background: var(--nx-grey); font: 400 13.5px var(--nx-f-ui); }
.ct-nl .ql-snow .ql-tooltip a { color: var(--nx-ink); }
.ct-nl .ql-container.ql-snow { border: 0; font: 400 16px/1.6 var(--nx-f-ui); color: var(--nx-ink); }
.ct-nl #editor-container { min-height: 340px; }
.ct-nl .ql-editor { min-height: 340px; padding: 18px 20px; }
.ct-nl .ql-editor.ql-blank::before { left: 20px; right: 20px; font-style: normal; color: var(--nx-ink2); }
.ct-nl .ql-editor h1, .ct-nl .ql-editor h2, .ct-nl .ql-editor h3 { font-family: var(--nx-f-ui) !important; color: var(--nx-ink) !important; }
.ct-nl-ph { margin-top: 10px; line-height: 1.6; }
.ct-nl-ph code { padding: 1px 6px; border-radius: 6px; background: var(--nx-grey); color: var(--nx-ink); font: 500 12px var(--nx-f-ui); overflow-wrap: anywhere; }

/* l'invio: chi è scelto a sinistra, il bottone vino a destra */
.ct-nl-send {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-top: 22px; padding-top: 18px;
  border-top: 2px solid var(--nx-rule-strong);
}
.ct-nl-sel { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.ct-nl-sel b { font: 400 22px/1.15 var(--nx-f-serif); letter-spacing: -.01em; color: var(--nx-ink); }
.ct-nl-sel span { font-size: 13px; line-height: 1.45; color: var(--nx-ink2); }
.ct-nl-send .nx-btn--primary { min-width: 220px; }
.ct-nl-ro { flex: 1 1 100%; }
.ct-nl-brand { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--nx-ink2); }
.ct-nl-brand .nx-i { flex: none; margin-top: 1px; }

/* ultimi invii: la tabella «lavoro» di Nitido */
.ct-nl-hist { margin-top: 56px; }
.ct-nl-table { margin-top: 4px; }
.ct-nl-table th:first-child, .ct-nl-table td:first-child { padding-left: 0; }
.ct-nl-table th:last-child, .ct-nl-table td:last-child { padding-right: 0; }
.ct-nl-table td.text-end { font-variant-numeric: tabular-nums; }

/* ───────────────────────── 6. Larghezze intermedie ───────────────────────── */
@media (max-width: 1280px) and (min-width: 768px) {
  .ct-hero { grid-template-columns: 196px minmax(0, 1fr); column-gap: 36px; }
  .nx-ct-name { font-size: 48px; }
  .ct-body { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 48px; }
  .ct-aside { padding-left: 32px; margin-left: -16px; }
}
@media (max-width: 1180px) and (min-width: 768px) {
  /* i recapiti sotto il nome: nome, newsletter ed etichette restano leggibili */
  .ct-th, .ct-row { grid-template-columns: 22px 48px minmax(0, 1.2fr) minmax(0, 1fr) 84px; grid-template-areas: "chk th nm st ac" "chk th rc st ac"; row-gap: 6px; }
  .ct-th { grid-template-areas: "chk th nm st ac"; }
  .ct-th > .c-rc { display: none; }
  .ct-specs, .ct-hero .ct-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-spec, .ct-spec + .ct-spec { padding: 12px 12px 12px 0; box-shadow: none; }
  .ct-spec:nth-child(even) { padding-left: 16px; box-shadow: inset 1px 0 0 var(--nx-rule); }
  .ct-spec:nth-child(n+3) { border-top: 1px solid var(--nx-rule); }
}
@media (max-width: 1120px) and (min-width: 768px) {
  .ct-body { grid-template-columns: minmax(0, 1fr); }
  .ct-aside {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start;
    margin: 56px 0 0; padding: 0; box-shadow: none;
  }
  .ct-card .ct-aside > .ct-blk, .ct-card .ct-aside > .ct-blk:first-child { margin-top: 0; margin-bottom: 40px; }
  .ct-nl-board { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .ct-nl-comp { padding-left: 0; margin-left: 0; box-shadow: none; }
  .ct-nl-scroll { max-height: 480px; }
}

/* ───────────────────────── 7. Telefono (375 e 320 px) ───────────────────────── */
@media (max-width: 767px) {
  .nx-contatti { --ct-b: 44px; }

  /* testata: il titolo, la frase, l'azione a tutta larghezza */
  .ct-head { margin: 2px 0 20px; gap: 14px; }
  .ct-head-t { flex-basis: 100%; }
  .ct-head .nx-dek { margin-top: 10px; }
  .ct-head-a { width: 100%; padding-bottom: 0; }
  .ct-head-a > .nx-btn { flex: 1 1 auto; height: 44px; font-size: 14px; }

  /* pillole e filtri in una riga che scorre di lato (la pagina no) */
  .ct-pills, .ct-filters {
    flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--nx-gutter)); margin-right: calc(-1 * var(--nx-gutter));
    padding: 2px var(--nx-gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }                                                    /* la sfumatura sui bordi: .is-scrollable di nitido.css */
  .ct-pills::-webkit-scrollbar, .ct-filters::-webkit-scrollbar { display: none; }
  .ct-pill, .ct-pill.is-sm, .ct-select, .ct-pg { height: 44px; }
  .ct-pill.is-sm { padding: 0 14px; }
  .ct-pg { min-width: 44px; }
  .ct-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
  /* sotto-filtro e gallerie: una riga loro, a tutta larghezza (dopo le regole di base sopra) */
  .ct-sub { margin-top: 10px; }
  .ct-select--sub, .ct-select--gallery { display: block; width: 100%; min-width: 0; }
  .ct-find { flex: none; width: 100%; min-width: 0; }
  .ct-filters .dropdown { flex: none; }
  .ct-reset { flex: none; margin-left: 4px; }

  /* la rubrica: iniziali, nome e tipo; sotto i recapiti; poi newsletter e azioni */
  .ct-th { display: flex; align-items: center; gap: 14px; min-height: 48px; margin-top: 22px; }
  .ct-th > .c-rc, .ct-th > .c-st { display: none; }
  .ct-th .ct-chk { margin: 0; }
  .ct-row, .ct-th + .ct-sec .ct-row {
    grid-template-columns: 22px 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start; min-height: 0; padding: 14px 0 12px;
    grid-template-areas: "chk th nm nm" ". . rc rc" ". . st ac";
  }
  .ct-row > .nx-thumb { width: 40px; height: 40px; }
  .ct-thumb .nx-thumb-m { font-size: 14px; }
  .ct-row .ct-chk { margin: -2px 0 0; height: 40px; }
  .ct-row .nx-name { white-space: normal; }
  .ct-list .c-ac { align-self: center; gap: 4px; }
  .ct-list .c-st { align-self: center; }
  .ct-line { line-height: 1.5; }
  .ct-gender { height: 26px; min-width: 30px; }
  .ct-sec { margin-top: 20px; }
  .ct-pop { min-width: 220px; }
  .ct-pop :is(a, button) { min-height: 44px; }

  .ct-bulk { bottom: calc(76px + env(safe-area-inset-bottom)); width: 100%; padding: 10px 12px; }
  .ct-bulk .nx-btn { height: 44px; flex: 1 1 auto; }
  .ct-bulk-n { flex-basis: 100%; }
  .ct-pages { flex-direction: column; align-items: flex-start; }
  .ct-foot { flex-direction: column; gap: 12px; margin-top: 32px; }
  .ct-count { margin-left: 0; }
  .nx-contatti .nx-empty .nx-btn { height: 44px; }

  /* scheda: copertina compatta (come la scheda della coppia), una colonna, bottoni da 44 px */
  .ct-mast { flex-wrap: wrap; row-gap: 6px; }
  .ct-mast .nx-mast-r { flex-wrap: wrap; }
  .ct-hero { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; row-gap: 0; margin-top: 18px; }
  .ct-cover { grid-row: 1 / span 2; grid-column: 1; align-self: start; border-radius: var(--nx-r); box-shadow: none; }
  .ct-cover .nx-classico-ini { font-size: 24px; padding: 6px 8px 8px; margin-top: 0; }
  .ct-cover .nx-classico-ini .nx-brk { --l: 6px; --w: 1.1px; }
  .ct-cover .nx-classico-cap { display: none; }
  .ct-id { display: contents; }
  .ct-id > * { grid-column: 1 / -1; }
  .ct-id > .nx-eb, .ct-id > .nx-ct-name { grid-column: 2; }
  .ct-id > .nx-eb { align-self: end; white-space: normal; }
  .nx-ct-name { margin-top: 6px; font-size: 32px; line-height: 1.04; align-self: start; }
  .ct-when { margin-top: 16px; font-size: 14.5px; gap: 2px 12px; }
  .ct-reach { margin-top: 14px; }
  .ct-reach > .nx-btn, .ct-split { flex: 1 1 auto; }
  .ct-reach .nx-btn { height: 44px; font-size: 14px; }
  .ct-split > .nx-btn:first-child { flex: 1 1 auto; }
  .ct-split .ct-split-t { width: 44px; }
  .ct-hero .ct-reach:has(+ .ct-specs), .ct-hero .ct-when:has(+ .ct-specs) { margin-bottom: 0; }
  .ct-specs, .ct-hero .ct-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
  .ct-spec, .ct-spec + .ct-spec { padding: 12px 12px 12px 0; box-shadow: none; }
  .ct-spec:nth-child(even) { padding-left: 14px; box-shadow: inset 1px 0 0 var(--nx-rule); }
  .ct-spec:nth-child(n+3) { border-top: 1px solid var(--nx-rule); }
  .ct-spec dd { overflow-wrap: anywhere; }
  .ct-index {
    flex-wrap: nowrap; overflow-x: auto; gap: 18px; margin: 32px calc(-1 * var(--nx-gutter)) 0; padding: 12px var(--nx-gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ct-index::-webkit-scrollbar { display: none; }
  .ct-index a { min-height: 44px; align-items: center; }
  .ct-body { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .ct-aside { padding: 0; margin: 0; box-shadow: none; }
  .ct-card .ct-blk, .ct-card .ct-aside > .ct-blk:first-child { margin-top: 40px; }
  .ct-card .ct-main > .ct-blk:first-child { margin-top: 0; }
  .ct-link { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "th t go" ". r r"; row-gap: 8px; column-gap: 12px; align-items: start; }
  .ct-link > .nx-thumb { grid-area: th; width: 40px; height: 40px; }
  .ct-link > .nx-thumb .nx-thumb-m { font-size: 14px; }
  .ct-link-t { grid-area: t; }
  .ct-link > .ct-ib { grid-area: go; margin-top: -2px; }
  .ct-link-x { grid-area: r; justify-content: flex-start; }
  .ct-kv .nx-kv-sub { text-align: left; }
  .ct-wa-l { width: 44px; height: 44px; margin: -14px -10px -14px 0; }

  /* newsletter: una colonna; i filtri due a due; l'invio a tutta larghezza */
  .ct-nl-board { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 36px; }
  .ct-nl-comp { padding-left: 0; margin-left: 0; box-shadow: none; }
  .ct-nl-filters .ct-filters { display: grid; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .ct-nl-filters .ct-select { height: 44px; }
  .ct-nl-filters .ct-switch { min-height: 44px; }
  .ct-nl-scroll { max-height: 62vh; }
  .ct-nl-row { grid-template-columns: 22px minmax(0, 1fr); row-gap: 6px; }
  .ct-nl-s { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; text-align: left; }
  .ct-nl-row .ct-chk { height: 24px; }
  .ct-nl .ql-snow.ql-toolbar button { width: 36px; height: 36px; }
  .ct-nl .ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
  .ct-nl #editor-container, .ct-nl .ql-editor { min-height: 260px; }
  .ct-nl-send { flex-direction: column; align-items: stretch; }
  .ct-nl-sel { flex: none; }
  .ct-nl-send .nx-btn--primary { width: 100%; min-width: 0; height: 48px; }
  .ct-nl-hist { margin-top: 44px; }

  /* finestre: un campo per riga */
  .ct-fgrid { grid-template-columns: minmax(0, 1fr); }
  .ct-fgrid > [class*="nx-span-"] { grid-column: 1 / -1; }
  .ct-modal .nx-input { height: 48px; font-size: 16px; }
  .ct-modal .nx-textarea { height: auto; }
  .ct-modal .modal-footer .nx-btn { flex: 1 1 auto; height: 48px; }
  .ct-modal .modal-title.nx-ct-mtitle { font-size: 24px; }
  .ct-wa { grid-template-columns: minmax(0, 1fr); }
  .ct-chipck > span { min-height: 44px; }
}
@media (max-width: 359px) {
  .nx-ct-name { font-size: 28px; }
}

/* ───────────────────────── 8. Passaggio del mouse (solo puntatori veri) ───────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .ct-pill:hover { box-shadow: inset 0 0 0 1px var(--nx-ink); }
  .ct-pill.is-on:hover { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
  .ct-pill.is-quiet:not(.is-on):hover { box-shadow: none; color: var(--nx-ink); }
  .ct-select:hover { box-shadow: inset 0 0 0 1px var(--nx-ink); }
  .ct-select.is-on:hover { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
  .ct-row:not(.is-picked):hover::after {
    content: ""; position: absolute; left: calc(-1 * var(--nx-hang)); top: 18px; bottom: 18px; width: var(--nx-mark); background: var(--nx-ink);
  }
  .ct-row .nx-name a:hover, .ct-link .nx-name a:hover, .ct-line:hover span, .ct-partner:hover {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--nx-line);
  }
  .ct-ib:hover { color: var(--nx-ink); box-shadow: inset 0 0 0 1px var(--nx-ink); }
  .ct-menu > summary:hover { box-shadow: none; background: var(--nx-hover); }
  .ct-pop :is(a, button):hover { background: var(--nx-hover); }
  .ct-gender:not(.is-static):hover { color: var(--nx-wine); background: var(--nx-veil); }
  .ct-tagopt:hover { background: var(--nx-hover); }
  .ct-pg:not(.is-on):not(.is-off):not(.is-gap):hover { background: var(--nx-hover); }
  .ct-back:hover { color: var(--nx-ink); }
  .ct-index a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--nx-line); }
  .ct-lnk:hover { text-decoration-color: var(--nx-ink); }
  .ct-chipck:hover > span { box-shadow: inset 0 0 0 1px var(--nx-ink); }
  .ct-chipck input:checked + span:hover { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
  .ct-nl-item:not(.is-picked):hover { background: var(--nx-hover); }
  .ct-wa-l:hover { color: var(--nx-ink); background: var(--nx-hover); }
}

/* ───────────────────────── Profondità (palette Grafite): Contatti e Newsletter ───────────────────────── */
/* la rubrica: il titolo di ogni lettera sul tavolo, i contatti in un foglio */
.nx-crm .ct-rows { margin-top: 8px; background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
.nx-crm .ct-row { padding-left: var(--nx-sheet-padx); padding-right: var(--nx-sheet-padx); }
.nx-crm .ct-rows > :first-child { border-radius: var(--nx-r-sheet) var(--nx-r-sheet) 0 0; }
.nx-crm .ct-rows > :last-child { border-radius: 0 0 var(--nx-r-sheet) var(--nx-r-sheet); }
.nx-crm .ct-rows > :only-child { border-radius: var(--nx-r-sheet); }
.nx-crm .ct-th { margin-top: 24px; padding: 0 var(--nx-sheet-padx); min-height: 36px; border-top: 0; border-bottom: 0; }
.nx-crm .ct-sec { margin-top: 28px; }
.nx-crm .ct-find { background: var(--nx-sheet); box-shadow: inset 0 0 0 1px var(--nx-sheet-line); }
.nx-crm .ct-find:focus-within { box-shadow: inset 0 0 0 1.5px var(--nx-ink); }
.nx-crm .ct-row.is-picked { background: var(--nx-hover); }
/* la scheda di un contatto: ogni sezione è un foglio */
.nx-crm .ct-card .ct-blk { margin-top: var(--nx-gap-sheet); padding: var(--nx-sheet-pad); background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
.nx-crm .ct-card .ct-main > .ct-blk:first-child, .nx-crm .ct-card .ct-aside > .ct-blk:first-child { margin-top: 0; }
.nx-crm .ct-card .ct-body { column-gap: var(--nx-gap-col); margin-top: 28px; }
.nx-crm .ct-card .ct-aside { padding-left: 0; margin-left: 0; box-shadow: none; }
/* newsletter: destinatari, messaggio e storico sono tre fogli */
.nx-crm .ct-nl-aud, .nx-crm .ct-nl-comp, .nx-crm .ct-nl-hist { padding: var(--nx-sheet-pad); background: var(--nx-sheet); border-radius: var(--nx-r-sheet); box-shadow: var(--nx-sheet-ring); }
.nx-crm .ct-nl-comp { margin-left: 0; box-shadow: var(--nx-sheet-ring); }
.nx-crm .ct-nl-board { column-gap: var(--nx-gap-col); margin-top: 28px; }
.nx-crm .ct-nl-hist { margin-top: var(--nx-gap-sheet); }
@media (hover: hover) and (pointer: fine) {
  .nx-crm .ct-row:hover { background: var(--nx-hover); }
}
/* azioni secondarie tranquille: WhatsApp e «…» si accendono sulla riga */
@media (hover: hover) and (pointer: fine) {
  .nx-crm .ct-row .ct-ib { opacity: .5; transition: opacity .15s; }
  .nx-crm .ct-row:hover .ct-ib, .nx-crm .ct-row:focus-within .ct-ib, .nx-crm .ct-menu[open] .ct-ib { opacity: 1; }
}