/**
 * Nosumo Style Kit V5 — il vestito nuovo, in un posto solo.
 *
 * Viene da docs/planning/nosumo-v5-app.html, dove l'app e' stata ridisegnata
 * per intero: bianco, carattere Geist, viola #7C5CFF, angoli larghi.
 * (Nel disegno il colore principale era il blu #007AFF. Cambiato in viola il
 * 13/08/2026 dal titolare, per unirlo a quello del resto dell'app.)
 *
 * PERCHE' STA IN UN FILE SUO E NON DENTRO L'AREA RISERVATA
 * L'area riservata e' solo la prima sezione a montarlo. Le altre arrivano col
 * redesign, e devono trovare gli stessi bottoni e le stesse schede senza
 * ricopiarli. Se questo file fosse dentro una mini-app, alla terza sezione
 * avremmo tre copie leggermente diverse dello stesso bottone.
 *
 * PERCHE' TUTTO COMINCIA PER nk- E VIVE DENTRO .nk
 * Nel disegno le classi si chiamano .btn, .card, .chip. Nomi cosi' comuni che
 * la dashboard di oggi ne ha gia' di suoi: caricare questo file addosso al
 * vecchio ne romperebbe meta'. Con il prefisso e il contenitore, il vestito
 * nuovo si puo' mettere una sezione alla volta senza toccare le altre, che e'
 * esattamente come faremo il redesign.
 *
 * IL COLORE PRINCIPALE SI PUO' CAMBIARE DA FUORI
 * Basta ridefinire --nk-accent sul contenitore. Le pagine pubbliche delle
 * mini-app lo fanno col colore del cliente: la struttura resta la nostra, il
 * colore e' suo.
 */

/* ⛔ `hidden` DEVE NASCONDERE, E QUI NON NASCONDEVA NIENTE.
   [trovato il 12/08/2026 misurando, non leggendo]
   Il kit da' un `display` a quasi tutto (`.nk-chip` e' `inline-flex`, `.nk-btn`
   pure, `.hm-mode` uguale). Una regola dell'autore batte quella del browser,
   quindi `[hidden] { display: none }` del browser **perdeva**: un elemento col
   `hidden` messo dal JavaScript restava a schermo.

   Cosa si vedeva davvero: la pastiglia «0 in attesa» nella sezione Nosu, il
   bottone «Esegui 0 approvate», e soprattutto **l'interruttore Console/Focus**,
   che `home.js` nasconde quando non c'e' niente da approvare e che invece stava
   li' sempre. Cioe' il Focus si offriva anche a chi non aveva nessuna proposta:
   un interruttore che porta a una schermata vuota.

   ⚠ E i banchi dicevano verde, perche' controllavano `elemento.hidden`, che e'
   la **proprieta'** e valeva true: la proprieta' era giusta, il pixel no. Da qui
   in avanti si prova `getComputedStyle(...).display`, cioe' quello che vede chi
   guarda. Vale sempre: una prova che non guarda quello che l'occhio vede prima o
   poi dice verde su una cosa rotta. */
[hidden] { display: none !important; }

.nk {
  /* fondi e linee */
  --nk-ink: #FFFFFF;
  --nk-ink-2: #F5F5F7;
  --nk-ink-3: #EEEEF0;
  --nk-line: #E5E5EA;
  --nk-line-2: #D1D1D6;

  /* testo */
  --nk-paper: #0A0A0A;
  --nk-muted: #6B6B75;
  --nk-muted-2: #8E8E93;

  /* Colore principale, sovrascrivibile.
     ⛔ ERA IL BLU #007AFF, ED E' DIVENTATO IL VIOLA #7C5CFF il 13/08/2026,
     deciso dal titolare: «i dettagli che ora sono blu/indaco dovrebbero essere
     di questo colore». E' l'**unione dei tre colori** che la scaletta del
     design aspettava: #7C5CFF e' gia' `--mt-purple` in `mytap-tokens.css`,
     cioe' il viola con cui e' dipinta tutta la parte non ancora rivestita.
     Cambiando questo, il vestito nuovo e quello vecchio dicono lo stesso
     colore invece di litigare.
     ⚠ I due derivati si cambiano **insieme**: erano il blu schiarito e il blu
     scurito. Lasciarli avrebbe dato un bottone viola con la scritta blu.
     Sono calcolati con le stesse proporzioni di prima (soft = 70% di bianco,
     ink = meta' luminosita'), non scelti a occhio. */
  --nk-accent: #7C5CFF;
  --nk-accent-soft: #D8CEFF;
  --nk-accent-ink: #3E2E82;
  --nk-accent-2: #AF52DE;

  /* stati */
  --nk-danger: #FF3B30;
  --nk-success: #34C759;
  --nk-success-ink: #1F8A3B;
  --nk-warn: #FF9500;
  --nk-warn-ink: #B36200;

  --nk-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  --nk-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* L'altezza dei campi, una volta sola: la usano input, select e i campi
     dell'ora. Il valore e' quello che veniva da solo all'`input` (imbottitura
     10+10, bordo 2, testo 16), scritto perche' il `select` da solo ne faceva 40. */
  --nk-h-inp: 38px;

  --nk-r-xs: 6px;
  --nk-r-sm: 10px;
  --nk-r-md: 14px;
  --nk-r-lg: 20px;
  --nk-r-xl: 28px;

  --nk-ease: cubic-bezier(.22, 1, .36, 1);
  --nk-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 10px 30px -8px rgb(0 0 0 / .08);
  --nk-glow: 0 0 0 1px color-mix(in oklch, var(--nk-accent) 25%, transparent),
             0 12px 40px -10px color-mix(in oklch, var(--nk-accent) 30%, transparent);

  font-family: var(--nk-font);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.01em;
  color: var(--nk-paper);
  -webkit-font-smoothing: antialiased;
}

.nk *,
.nk *::before,
.nk *::after { box-sizing: border-box; }

.nk ::selection { background: var(--nk-accent-soft); color: var(--nk-accent-ink); }

/* ── Intestazione di sezione ───────────────────────────────────────── */

.nk-hr { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.nk-hr-m { flex: 1; min-width: 190px; }
.nk-h1 { font-size: 21px; font-weight: 600; letter-spacing: -.028em; }
.nk-hs { font-size: 13px; color: var(--nk-muted); margin-top: 3px; }
.nk-h2 { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }

/* ── Bottoni ───────────────────────────────────────────────────────── */

.nk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--nk-accent); color: #fff;
  border: 1px solid transparent; border-radius: 999px;
  padding: 9px 17px;
  font-family: var(--nk-font); font-size: 13px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: filter .18s var(--nk-ease), background .18s var(--nk-ease);
  /* Fissata, se no un bottone scritto come `<a>` e uno scritto come `<button>`
     vengono di due altezze diverse: l'`<a>` eredita l'interlinea 1.6 di `.nk`,
     il `<button>` usa quella del browser. Con tre bottoni in fila, come nelle
     schede di Pagine, la differenza si vede. */
  line-height: 1.25;
  text-decoration: none;
}
.nk-btn:hover { filter: brightness(1.07); }
.nk-btn:active { filter: brightness(.94); }
.nk-btn:disabled { opacity: .5; cursor: default; filter: none; }
.nk-btn:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 2px; }

.nk-btn.gh { background: var(--nk-ink); color: var(--nk-paper); border-color: var(--nk-line-2); }
.nk-btn.gh:hover { background: var(--nk-ink-2); filter: none; }
.nk-btn.dg { background: var(--nk-ink); color: var(--nk-danger);
             border-color: color-mix(in oklch, #FF3B30 30%, var(--nk-line)); }
.nk-btn.dg:hover { background: color-mix(in oklch, #FF3B30 7%, var(--nk-ink)); filter: none; }
.nk-btn.red { background: var(--nk-danger); color: #fff; border-color: transparent; }
.nk-btn.sm { padding: 6px 13px; font-size: 12px; }
.nk-btn.w { width: 100%; justify-content: center; }

/* Un'azione scritta, non un bottone: sta in fondo alle righe degli elenchi */
/* ⛔ 22×14 PIXEL, SOTTO IL MINIMO. [28/08/2026]
   Con `padding: 0` e il testo a 11,5px questo bottone misurava **22×14** sul
   telefono: sotto i 24×24 che le WCAG 2.2 chiedono come minimo AA. Ed e' il
   comando piu' usato della schermata Clienti — l'«Apri» di ogni riga.

   ⚠ Il padding e' compensato da un margine negativo uguale: l'area da toccare
     cresce, il disegno **non si sposta di un pixel**. In una tabella fitta come
     quella dei clienti, allargare per davvero avrebbe voluto dire rifare le
     righe.

   ⚠ `inline-flex` e non `inline-block` perche' serve `align-items: center`:
     senza, il testo si appoggia in alto e i 24px di altezza si vedono come uno
     scalino accanto agli altri elementi della riga. */
.nk-a {
  background: none; border: 0;
  padding: 5px 4px; margin: -5px -4px;
  min-height: 24px; display: inline-flex; align-items: center;
  font-family: var(--nk-font); font-size: 11.5px; font-weight: 600;
  color: var(--nk-accent); cursor: pointer; white-space: nowrap;
}
.nk-a:hover { text-decoration: underline; }
.nk-a.dg { color: var(--nk-danger); }
.nk-a.m { color: var(--nk-muted); }

/* ── Schede ────────────────────────────────────────────────────────── */

.nk-card {
  background: var(--nk-ink-2);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-r-md);
  padding: 16px;
  box-shadow: var(--nk-shadow);
}
.nk-card + .nk-card { margin-top: 11px; }

/**
 * ⚠ MA NON DENTRO UNA GRIGLIA.
 *
 * Quel margine serve alle schede impilate una sotto l'altra. Dentro `.nk-gr` lo
 * spazio lo fa gia' il `gap`, e il margine in piu' **sfalsa la fila**: la prima
 * scheda parte undici pixel piu' in alto delle altre e viene undici piu' alta,
 * perche' con `stretch` quel margine si mangia la traccia.
 *
 * Da fuori si vede come una fila di riquadri che non si allineano, e non si
 * capisce da dove venga: nel foglio della sezione non c'e' scritto niente.
 * Segnalato dal titolare il 03/08/2026 mettendo la schermata a fianco del
 * disegno, dove le schede di una fila sono **omogenee**.
 *
 * Sta qui e non nei fogli delle sezioni perche' riguarda ogni griglia del kit:
 * i quattro numeri della fedelta', quelli di NFC, le schede dei Premi.
 */
.nk-gr > .nk-card + .nk-card { margin-top: 0; }
.nk-card.sf {
  border-color: color-mix(in oklch, var(--nk-accent) 18%, var(--nk-line));
  background: radial-gradient(120% 140% at 0% 0%,
              color-mix(in oklch, var(--nk-accent) 9%, var(--nk-ink-2)), var(--nk-ink-2) 62%);
}
.nk-card.ft {
  border-color: color-mix(in oklch, var(--nk-accent) 32%, var(--nk-line));
  background: radial-gradient(90% 120% at 0% 0%,
              color-mix(in oklch, var(--nk-accent) 13%, transparent), transparent 58%), var(--nk-ink-2);
  box-shadow: var(--nk-glow);
}
.nk-card.flat { background: var(--nk-ink); }
.nk-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nk-card-top .nk-h2 { flex: 1; min-width: 130px; }
.nk-ct { font-weight: 600; font-size: 14.5px; letter-spacing: -.018em; margin-bottom: 4px; }
.nk-cd { font-size: 12.5px; color: var(--nk-muted); line-height: 1.5; }
.nk-cd b { color: var(--nk-paper); font-weight: 600; }

/* ── Griglie e numeri ──────────────────────────────────────────────── */

.nk-gr { display: grid; gap: 11px; margin-bottom: 14px; }
.nk-g2 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.nk-g3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nk-g4 { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.nk-sv { font-size: 24px; font-weight: 600; letter-spacing: -.035em; color: var(--nk-accent); line-height: 1; }
.nk-sv.n { color: var(--nk-paper); }
.nk-sv.gg { color: var(--nk-success-ink); }
.nk-sv.ww { color: var(--nk-warn-ink); }
.nk-sl { font-size: 11.5px; color: var(--nk-muted); margin-top: 6px; line-height: 1.35; }

/* ── Pastiglie ─────────────────────────────────────────────────────── */

.nk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--nk-accent) 24%, var(--nk-line));
  background: color-mix(in oklch, var(--nk-accent) 8%, var(--nk-ink));
  color: var(--nk-accent);
  padding: 4px 11px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .055em; text-transform: uppercase;
  white-space: nowrap;
}
.nk-chip.g { border-color: color-mix(in oklch, #34C759 30%, transparent);
             background: color-mix(in oklch, #34C759 10%, transparent); color: var(--nk-success-ink); }
.nk-chip.o { border-color: color-mix(in oklch, #FF9500 32%, transparent);
             background: color-mix(in oklch, #FF9500 11%, transparent); color: var(--nk-warn-ink); }
.nk-chip.v { border-color: color-mix(in oklch, #AF52DE 30%, transparent);
             background: color-mix(in oklch, #AF52DE 9%, transparent); color: #7B2CA8; }
.nk-chip.m { border-color: var(--nk-line); background: var(--nk-ink); color: var(--nk-muted); }
/* Con un colore deciso dal cliente il testo bianco e' l'unico sicuro */
.nk-chip.tinta { border-color: transparent; color: #fff; }

/* ── Righe di elenco ───────────────────────────────────────────────── */

.nk-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--nk-line); }
.nk-row:last-child { border-bottom: 0; }
.nk-rm { flex: 1; min-width: 0; }
.nk-rt { font-size: 13.5px; font-weight: 550; letter-spacing: -.012em; }
.nk-rs { font-size: 11.5px; color: var(--nk-muted); margin-top: 1px; }
.nk-ra { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nk-accent); flex-shrink: 0; }
.nk-dot.g { background: var(--nk-success); }
.nk-dot.o { background: var(--nk-warn); }
.nk-dot.r { background: var(--nk-danger); }
.nk-dot.m { background: var(--nk-line-2); }
.nk-off { opacity: .5; }

/* ── Campi ─────────────────────────────────────────────────────────── */

.nk-fld { margin-bottom: 11px; }
.nk-lbl { font-size: 11.5px; font-weight: 600; color: var(--nk-paper); margin-bottom: 5px; display: block; }
.nk-inp {
  width: 100%;
  background: var(--nk-ink);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-r-sm);
  padding: 10px 13px;
  font-family: var(--nk-font); font-size: 13px; color: var(--nk-paper);
  /**
   * L'ALTEZZA SI SCRIVE, E NON SI LASCIA DECIDERE AL BROWSER.
   *
   * Misurato sulla dashboard vera il 04/08/2026: `input` veniva 38px e `select`
   * 40px, con lo stesso carattere e la stessa imbottitura. I due elementi
   * ricavano l'altezza da regole interne del browser, diverse fra loro e scritte
   * da nessuna parte. In una fila di campi affiancati (Settore accanto a
   * Specializzazione, Regione accanto a CAP) quei due pixel si vedono sul bordo
   * di sotto, ed e' la stessa famiglia di difetti dell'omogeneita' delle schede.
   *
   * Provato prima con `line-height`, e non basta: il `select` la ignora per
   * l'altezza. L'unica cosa che li mette d'accordo e' dirla.
   */
  line-height: 1.25;
  height: var(--nk-h-inp);
  transition: border-color .16s, box-shadow .16s;
}

/* Il testo lungo non ha un'altezza fissa: cresce, ed e' il suo mestiere. */
textarea.nk-inp { height: auto; }
.nk-inp:focus {
  outline: 0;
  border-color: color-mix(in oklch, var(--nk-accent) 55%, var(--nk-line));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--nk-accent) 14%, transparent);
}
.nk-inp::placeholder { color: var(--nk-muted-2); }
textarea.nk-inp { resize: vertical; min-height: 70px; line-height: 1.55; }
select.nk-inp { cursor: pointer; }
.nk-help { font-size: 11.5px; color: var(--nk-muted); margin-top: 5px; line-height: 1.45; display: block; }
.nk-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; cursor: pointer; }
.nk-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--nk-accent); flex-shrink: 0; }
.nk-srch {
  display: flex; align-items: center; gap: 9px;
  background: var(--nk-ink); border: 1px solid var(--nk-line); border-radius: 999px;
  padding: 9px 15px; font-size: 13px; flex: 1; min-width: 150px;
}
.nk-srch input { border: 0; outline: 0; background: none; font-family: var(--nk-font); font-size: 13px; width: 100%; color: var(--nk-paper); }

/**
 * ⛔ I CAMPI DEL KIT SI DIFENDONO DA `app.css`, E NON ERA UN DETTAGLIO.
 *
 * [17/08/2026, il titolare: «le barre di ricerca hanno quell'alone grigio che
 * non va bene a livello di design. Deve essere pulita e uniforme»]
 *
 * `app.css` ha un blocco della V4 chiamato «LIGHT THEME — FORM FIELDS (Liquid
 * Glass Effect)» che scrive, con `!important`, su **ogni** input, select e
 * textarea di `body.light`:
 *     background: #f9fafb !important;
 *     border: 1px solid rgba(0,0,0,0.15) !important;
 *     box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
 *
 * ⚠ `app.css` si carica PRIMA del kit, quindi l'ordine darebbe ragione a noi:
 * ma con `!important` da una parte sola l'ordine non conta piu', e vince lui.
 * Il kit scriveva le stesse proprieta' senza `!important` e perdeva tutte.
 *
 * ⇒ COSA SI VEDEVA. Nella barra di ricerca il danno era evidente perche' sono
 * due scatole una dentro l'altra: la pillola bianca del kit, e dentro un
 * rettangolo grigio con bordo e ombra. Ma **misurando** (`getComputedStyle` sulla
 * dashboard vera) il fondo grigio ce l'avevano anche `.nk-inp` e
 * `textarea.nk-inp`, cioe' **tutti i campi di tutte le schermate rivestite**.
 * La ricerca era il punto in cui si notava, non il punto in cui succedeva.
 *
 * ⚠ SPECIFICITA', NON SOLO `!important`. Fra due `!important` decide la
 * specificita': `body.light input[type="search"]` vale (0,2,1), e un `.nk .nk-inp`
 * (0,2,0) perderebbe lo stesso. Si scrive `body .nk input.nk-inp` (0,2,2), che
 * vince senza dipendere dall'ordine dei fogli. E' la stessa lezione della barra
 * laterale in Focus, dove `!important` non bastava.
 *
 * ⚠ TUTTO DENTRO `.nk`: la V4 non rivestita tiene i suoi campi come sono. Qui si
 * difende il vestito nuovo, non si cambia quello vecchio.
 */
body .nk input.nk-inp,
body .nk select.nk-inp,
body .nk textarea.nk-inp {
  background: var(--nk-ink) !important;
  border: 1px solid var(--nk-line) !important;
  color: var(--nk-paper) !important;
  box-shadow: none;
}
body .nk input.nk-inp:focus,
body .nk select.nk-inp:focus,
body .nk textarea.nk-inp:focus {
  border-color: color-mix(in oklch, var(--nk-accent) 55%, var(--nk-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--nk-accent) 14%, transparent);
}

/* La ricerca e' due scatole una dentro l'altra: il vestito ce l'ha la pillola,
   e l'input dentro deve sparire del tutto. Senza queste righe si vedeva un
   rettangolo grigio dentro una pillola bianca, che e' la segnalazione da cui e'
   partito tutto. */
body .nk .nk-srch input {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--nk-paper) !important;
}
/* Il focus sta sulla pillola, non sull'input: se no l'anello viola disegnerebbe
   un rettangolo dentro un tondo. */
body .nk .nk-srch:focus-within {
  border-color: color-mix(in oklch, var(--nk-accent) 55%, var(--nk-line));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--nk-accent) 14%, transparent);
}

/* ⚠ E la crocetta che Chrome mette dentro `input[type=search]`: e' grigia, sta
   attaccata al bordo destro della pillola e compare solo mentre si scrive,
   quindi la barra cambia forma sotto le dita. La ricerca qui e' immediata e si
   svuota selezionando: non serve. */
body .nk .nk-srch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ── Nota ──────────────────────────────────────────────────────────── */

.nk-note {
  border-radius: var(--nk-r-md);
  padding: 15px 17px;
  font-size: 12.5px; line-height: 1.6;
  border: 1px solid color-mix(in oklch, var(--nk-accent) 20%, var(--nk-line));
  background: color-mix(in oklch, var(--nk-accent) 4%, var(--nk-ink));
  color: var(--nk-muted);
  margin-top: 13px;
}
.nk-note b { color: var(--nk-paper); font-weight: 600; }
.nk-note.w { border-color: color-mix(in oklch, #FF9500 28%, var(--nk-line));
             background: color-mix(in oklch, #FF9500 5%, var(--nk-ink)); }

/* ── Vuoto ─────────────────────────────────────────────────────────── */

.nk-empty {
  text-align: center; padding: 34px 22px;
  border: 1.5px dashed var(--nk-line-2); border-radius: var(--nk-r-lg);
  background: var(--nk-ink-2);
}
.nk-empty-i { font-size: 34px; margin-bottom: 11px; opacity: .4; }
.nk-empty-t { font-size: 17px; font-weight: 600; letter-spacing: -.025em; margin-bottom: 6px; }
.nk-empty-d { font-size: 13px; color: var(--nk-muted); max-width: 400px; margin: 0 auto 16px; line-height: 1.55; }

/* ── Tabella ───────────────────────────────────────────────────────── */

.nk-sc { overflow-x: auto; }
.nk-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.nk-tbl th { text-align: left; padding: 9px 11px; background: var(--nk-ink-3);
             font-weight: 600; font-size: 11px; border-bottom: 1px solid var(--nk-line); white-space: nowrap; }
.nk-tbl td { padding: 9px 11px; border-bottom: 1px solid var(--nk-line); color: var(--nk-muted); }
.nk-tbl tr:last-child td { border-bottom: 0; }
.nk-tbl td b { color: var(--nk-paper); font-weight: 600; }

/* ── Schede a linguetta ────────────────────────────────────────────── */

.nk-tabs { display: inline-flex; background: var(--nk-ink-3); border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 16px; }
.nk-tabs button {
  border: 0; background: transparent;
  font-family: var(--nk-font); font-size: 12.5px; font-weight: 550; color: var(--nk-muted);
  padding: 6px 15px; border-radius: 999px; cursor: pointer;
  transition: all .22s var(--nk-ease);
}
.nk-tabs button:hover { color: var(--nk-paper); }
.nk-tabs button[aria-selected="true"] {
  background: var(--nk-ink); color: var(--nk-accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / .09); font-weight: 600;
}

/* ── Riquadro di modifica ──────────────────────────────────────────── */

.nk-ovl {
  position: fixed; inset: 0; z-index: 9000;
  background: color-mix(in oklch, #0A0A0A 34%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  overflow-y: auto;
}
/* ⛔ LA FINESTRA CHE STA SOPRA LE ALTRE. [25/08/2026]
   Tutte le `.nk-ovl` hanno lo stesso `z-index`, quindi fra due aperte vince
   **quella che sta piu' in basso nel documento**. Di solito non capita, ma con
   una conferma capita sempre: la conferma nasce da un'altra finestra, e se
   quella e' stata spostata piu' in giu' (lo fa `in-pagina/finestre.js`, che
   trasloca le finestre dentro le sezioni e lascia dov'erano quelle gia' figlie
   di `<body>`) la conferma esce **dietro**. Misurato sui gruppi NFC: il velo
   dei gruppi finiva in `#nsm-finestre`, che sta dopo la conferma, e per
   confermare bisognava prima chiudere quello che si stava confermando.
   ⇒ Chi chiede «sei sicuro?» sta sopra a chi l'ha chiesto. Sempre. */
.nk-ovl.nk-ovl-sopra { z-index: 9400; }

.nk-modal {
  background: var(--nk-ink); border-radius: var(--nk-r-lg);
  box-shadow: 0 18px 60px rgb(0 0 0 / .22);
  max-width: 468px; width: 100%; padding: 24px;
  animation: nk-pop .26s var(--nk-ease);
  max-height: calc(100vh - 44px); display: flex; flex-direction: column;
}
@keyframes nk-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.nk-modal-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.nk-modal-t { font-size: 18px; font-weight: 600; letter-spacing: -.026em; flex: 1; }
.nk-modal-body { overflow-y: auto; flex: 1; margin: 0 -2px; padding: 0 2px; }
.nk-modal-f { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.nk-x {
  width: 30px; height: 30px; border-radius: 999px; border: 0; background: var(--nk-ink-2);
  color: var(--nk-muted); font-size: 17px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.nk-x:hover { background: var(--nk-ink-3); color: var(--nk-paper); }
.nk-esito { font-size: 12px; color: var(--nk-muted); margin-right: auto; }
.nk-esito.ok { color: var(--nk-success-ink); }
.nk-esito.ko { color: var(--nk-danger); }

/* ── Dettagli richiudibili ─────────────────────────────────────────── */

.nk-more { border-top: 1px solid var(--nk-line); margin-top: 14px; padding-top: 12px; }
.nk-more > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--nk-accent);
  list-style: none; margin-bottom: 12px;
}
.nk-more > summary::-webkit-details-marker { display: none; }
.nk-more > summary::before { content: '+ '; font-weight: 700; }
.nk-more[open] > summary::before { content: '– '; }

/* ── Indirizzo da copiare ──────────────────────────────────────────── */

.nk-copy {
  display: flex; align-items: center; gap: 9px;
  background: var(--nk-ink); border: 1px solid var(--nk-line); border-radius: var(--nk-r-sm);
  padding: 9px 11px;
}
.nk-copy code {
  font-family: var(--nk-mono); font-size: 11.5px; color: var(--nk-paper);
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.nk-copy code::-webkit-scrollbar { display: none; }

/* ── Riquadro dell'anteprima ───────────────────────────────────────── */

/* Dal disegno, blocco `.ph`. Nel mockup e' un rettangolo grigio con scritto
   «anteprima» dentro; nell'app ci va l'anteprima vera. L'altezza di 98px e'
   invece una scelta del disegno, e resta. */
.nk-ph {
  background: var(--nk-ink-3);
  border-radius: var(--nk-r-sm);
  height: 98px;
  display: flex; align-items: center; justify-content: center;
  color: var(--nk-muted-2);
  font-size: 11.5px;
  overflow: hidden;
  position: relative;
}

/* ── Menu a tendina ────────────────────────────────────────────────── */

/**
 * Dal disegno, blocchi `.mwrap` / `.mdots` / `.menu` / `.k`.
 *
 * Sta nel kit e non in una sezione perche' lo usano in tanti: la foto in alto a
 * destra, le schede di Pagine col loro `•••`, e piu' avanti CRM, fedelta' e NFC.
 * Scriverlo una volta e' anche il modo di non ritrovarsi fra un mese tre menu
 * leggermente diversi.
 *
 * Le voci sono `button` e `a` veri, non `div` come nel mockup: dentro un menu
 * servono la tastiera e il lettore di schermo, e un `div` non li ha.
 */

.nk-mwrap { position: relative; display: inline-block; }

.nk-mdots {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid var(--nk-line-2);
  background: var(--nk-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; letter-spacing: 1px;
  color: var(--nk-muted);
  cursor: pointer;
  padding: 0;
  font-family: var(--nk-font);
}
.nk-mdots:hover { background: var(--nk-ink-2); color: var(--nk-paper); }
.nk-mdots:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 2px; }

.nk-menu {
  position: absolute; right: 0; top: 38px; z-index: 30;
  background: var(--nk-ink);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-r-md);
  box-shadow: 0 4px 24px rgb(0 0 0 / .12);
  padding: 6px;
  min-width: 186px;
  display: none;
}
.nk-menu.on { display: block; }

.nk-menu button,
.nk-menu a {
  width: 100%;
  padding: 8px 12px;
  border: 0; background: transparent;
  border-radius: var(--nk-r-xs);
  font-family: var(--nk-font); font-size: 13px; font-weight: 500;
  color: var(--nk-paper);
  text-align: left; text-decoration: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 9px;
}
.nk-menu button:hover,
.nk-menu a:hover { background: var(--nk-ink-2); }
.nk-menu button:focus-visible,
.nk-menu a:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: -2px; }
.nk-menu .dg { color: var(--nk-danger); }
.nk-menu hr { border: 0; border-top: 1px solid var(--nk-line); margin: 5px 0; }
.nk-menu .nk-k { width: 15px; text-align: center; opacity: .6; font-size: 12px; flex-shrink: 0; }

/* ── Barre di scorrimento ──────────────────────────────────────────── */

/**
 * Quella di sistema e' larga quindici pixel, grigia e squadrata, con la sua
 * corsia sempre accesa: dentro un vestito fatto di angoli larghi e linee
 * sottili e' la cosa piu' pesante dello schermo, e si vede solo lei.
 *
 * Qui diventa una lineetta arrotondata su corsia trasparente. I tre pixel di
 * bordo trasparente col `background-clip` servono a staccarla dal bordo: senza,
 * resta appiccicata e sembra un errore.
 *
 * Le due righe si scrivono tutte e due apposta: `scrollbar-width` la capiscono
 * Firefox e i browser nuovi, `::-webkit-scrollbar` Chrome, Edge e Safari.
 */

.nk, .nk * {
  scrollbar-width: thin;
  scrollbar-color: var(--nk-line-2) transparent;
}
.nk::-webkit-scrollbar,
.nk ::-webkit-scrollbar { width: 10px; height: 10px; }

.nk::-webkit-scrollbar-track,
.nk ::-webkit-scrollbar-track { background: transparent; }

.nk::-webkit-scrollbar-thumb,
.nk ::-webkit-scrollbar-thumb {
  background: var(--nk-line-2);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.nk::-webkit-scrollbar-thumb:hover,
.nk ::-webkit-scrollbar-thumb:hover {
  background: var(--nk-muted-2);
  background-clip: content-box;
}

.nk::-webkit-scrollbar-corner,
.nk ::-webkit-scrollbar-corner { background: transparent; }

@media (max-width: 640px) {
  .nk-card { padding: 14px; }
  .nk-h1 { font-size: 19px; }
  .nk-modal { padding: 19px; }
}

/* Testo per i soli lettori di schermo. [26/08/2026]
   Nato dalla schermata Piano: l'elenco «cosa comprende» distingueva compreso e
   non compreso con un pallino verde o grigio, e nient'altro. A occhio si legge,
   con uno screen reader no: le due righe suonavano identiche, quindi chi non
   vede non poteva sapere cosa il suo piano avesse davvero. */
.nk-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}