/* ============================================================
   WORKSPACE PANEL v4 — COMPONENTI
   I pezzi: lo scheletro con le icone, la ricerca, i pannelli,
   le tessere dei numeri, gli elenchi, la barra in basso.

   I nomi sono quelli del pannello vero (src/client/nuovo.css):
   le classi nuove hanno il prefisso nv-, quelle che c'erano gia'
   nella classica (.card, .tabs, .page-tab...) lo tengono senza.
   Un pezzo si copia di qua e di la' senza rinominare niente.

   Un componente nuovo si aggiunge in fondo, prima del telefono.
   Le sue correzioni per il telefono vanno nell'ultimo blocco
   (§ Il telefono), che e' uno solo apposta.
   ============================================================ */


/* --- Le icone ------------------------------------------------------------
   Disegnate a tratto, 24x24, tutte con lo stesso spessore: le crea icona() in
   js/kit.js. Prendono il colore dal testo che hanno attorno (currentColor),
   cosi' una voce attiva si accende con l'icona dentro senza una regola in piu'. */

.nv-icon {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* --- Lo scheletro ---------------------------------------------------------
   Spalla a sinistra, contenuto a destra, tutta l'altezza e non di piu'. Il
   markup e' <div class="shell nv">: la seconda classe e' quella che accende le
   regole qui sotto, come nel pannello. */

.shell {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

/* La spalla e' di vetro: semitrasparente e sfocata, cosi' la luce viola della
   pagina ci passa attraverso e la spalla non sembra un'altra finestra. */
.nv .side {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 0;
  padding: 1.4rem 1.2rem 1.2rem;
  border-right: 1px solid var(--line-soft);
  background: var(--glass-side);
  backdrop-filter: blur(16px);
}

.nv .side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

/* La marca: il logo e il nome, con sotto l'indirizzo in piccolo. E' un link
   alla pagina iniziale, come ci si aspetta da un logo. */
.nv-brand {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}
.nv-logo {
  display: block;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.85rem;
  box-shadow: 0 0.4rem 1.4rem var(--logo-glow), 0 0 0 1px var(--edge);
}
.nv-logo svg { display: block; width: 100%; height: 100%; }
/* Lo stesso logo, grande, sopra il modulo di ingresso. */
.nv-logo-big { width: 6.4rem; height: 6.4rem; margin-bottom: 1.6rem; border-radius: 1.6rem; }
.nv-brand-text { display: grid; font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.nv-brand-text small { color: var(--faint); font-size: 1.1rem; font-weight: 500; letter-spacing: 0; }

/* Si vedono solo sul telefono, dove la ricerca grande e il menu non ci stanno. */
.nv .menu-toggle,
.nv .nv-search-mini { display: none; }

/* La ricerca sempre in cima. Sembra un campo ma e' un bottone: apre la
   ricerca rapida (§ sotto), che e' anche il modo piu' veloce per andare
   ovunque. Il tasto scritto a destra dice che c'e' anche Ctrl K. */
.nv-search {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--faint);
  font-size: 1.3rem;
  text-align: left;
}
.nv-search:hover { border-color: var(--accent-line); background: var(--panel); color: var(--muted); }
.nv-search span { flex: 1; }

/* Il menu e' la parte che si allunga: scorre lui, e il piede resta in fondo. */
.nv-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0 -0.4rem;
  padding: 0 0.4rem;
  overflow-y: auto;
}
.nv-nav-group { display: grid; gap: 0.2rem; }
.nv-nav-label {
  margin: 1.8rem 1rem 0.6rem;
  color: var(--faint);
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Una voce: icona e nome. Link veri (<a>), cosi' si aprono in un'altra
   scheda col tasto centrale. */
.nv .nav a.nv-leaf,
.nv .nv-fold > summary {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.nv .nav a.nv-leaf:hover,
.nv .nv-fold > summary:hover { background: var(--hover-wash); color: var(--text); }
/* «Sei qui»: velo viola, riga viola a sinistra, l'icona viola. Il testo resta
   bianco — nella classica diventava verde, e si leggeva peggio. */
.nv .nav a.nv-leaf.active {
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nv .nav a.nv-leaf.active .nv-icon { color: var(--accent); }

/* Un gruppo che si apre e si chiude: un <details>, funziona senza JavaScript.
   La freccetta e' disegnata col bordo, quella di sistema non si colora. */
.nv .nv-fold { margin: 0.2rem 0 0; }
.nv .nv-fold > summary { list-style: none; }
.nv .nv-fold > summary::-webkit-details-marker { display: none; }
.nv .nv-fold[open] > summary { color: var(--text); }
.nv .nv-fold > summary::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.6;
  transform: rotate(-45deg);
  transition: transform var(--ease);
}
.nv .nv-fold[open] > summary::after { transform: rotate(45deg); }
/* I figli: un filo a sinistra che dice fin dove arriva il gruppo. */
.nv .nav-children {
  margin: 0.2rem 0 0.6rem 1.9rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--line);
}
.nv .nav-children a.nav-leaf {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 1.3rem;
  text-decoration: none;
}
.nv .nav-children a.nav-leaf:hover { background: var(--hover-wash); color: var(--text); }
.nv .nav-children a.nav-leaf.active { background: var(--accent-soft); color: var(--text); }

/* Il piede: cambia interfaccia, esci, e la versione (che ricarica). */
.nv-footer {
  display: grid;
  gap: 0.2rem;
  margin-top: auto;
  padding-top: 1.6rem;
}
.nv .nav .nv-footer-button {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  text-align: left;
}
.nv .nav .nv-footer-button:hover { background: var(--hover-wash); color: var(--text); }
.nv-footer-meta { padding: 0.8rem 1rem 0; color: var(--faint); font-size: 1.1rem; }
/* Il numero di versione e' anche il pulsante di ricarica: nell'app installata
   non c'e' la barra degli indirizzi. Da fermo sembra testo. */
.version-badge {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.version-badge:hover { background: none; color: var(--text); text-decoration: underline; }
.version-badge.update-ready { color: var(--accent); font-weight: 650; text-decoration: underline; }

/* La colonna di destra. I minmax(0, ...) non sono un vezzo: senza, la prima
   tabella larga sfonda la griglia e scorre di lato la pagina intera. */
.content-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.content {
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 2.8rem 3.2rem 4rem;
  overflow: auto;
}
/* Per le pagine che si prendono tutto lo schermo (un terminale, un visore). */
.content-wide {
  display: flex;
  flex-direction: column;
  padding: 1.2rem;
  overflow: hidden;
}


/* --- Le schede di pagina --------------------------------------------------
   Rimpiazzano le schede del browser nell'app installata. Nella classica
   erano linguette agganciate al foglio; qui sono pastiglie su una barra
   trasparente, come tutti gli altri controlli «scegline uno». */

.page-tabs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--tabs-h);
  padding: 0 1.2rem;
  border-bottom: 1px solid var(--line-soft);
}
.page-tabs-strip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.page-tabs-strip::-webkit-scrollbar { display: none; }
.page-tab {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  max-width: 19rem;
  height: 3rem;
  padding: 0 1rem 0 1.2rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--ease), color var(--ease);
}
.page-tab:hover { background: var(--hover-wash); color: var(--text); }
.page-tab.active {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.page-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La crocetta piena solo sulla scheda attiva o sotto il puntatore. */
.page-tab-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  background: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.65;
}
.page-tab.active .page-tab-close,
.page-tab:hover .page-tab-close { opacity: 1; }
.page-tab-close:hover { background: var(--wash-bad); color: var(--red); }
.page-tab-new {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-left: 0.4rem;
  padding: 0;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
}
.page-tab-new:hover { border-color: var(--line); background: var(--panel-2); color: var(--text); }


/* --- I bottoni con un nome ------------------------------------------------ */

/* Il bottone fatto solo di un'icona: trasparente da fermo, prende fondo e
   bordo sotto il puntatore. Va sempre con aria-label e title. */
.nv-icon-button {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}
.nv-icon-button:hover { border-color: var(--line); background: var(--panel-2); color: var(--text); }
.nv-icon-button.on { color: var(--accent); }
.nv-icon-button.danger:hover { border-color: var(--tint-bad); background: var(--wash-bad); color: var(--red); }
.nv-icon-button .nv-icon { width: 1.7rem; height: 1.7rem; }

/* L'UNICO bottone acceso: quello che salva quello che hai appena scritto (o
   che entra, nella pagina di ingresso). Uno per schermata, al massimo. La
   classica non ne aveva nessuno; qui c'e' perche' l'Hub ha una cosa che si
   viene a fare davvero — scrivere un appunto al volo — e il bottone deve
   trovarsi senza cercarlo. «Riavvia», «Ferma», «Cancella» restano spenti. */
.nv-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-color: transparent;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: 0 0.4rem 1.4rem var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nv-primary:hover { border-color: transparent; background: var(--accent-hover); }


/* --- La pagina ------------------------------------------------------------
   Una colonna sola, larga al massimo 136rem e centrata: su uno schermo da
   27 pollici una riga lunga tutto lo schermo non si legge. */

.nv-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: 136rem;
  margin: 0 auto;
}
.nv-page-head h1 { margin: 0; }
.nv-page-head p { max-width: 72rem; margin: 0.6rem 0 0; }

/* La riga piccola viola sopra il titolo: la data, la sezione. */
.nv-eyebrow {
  margin: 0 0 0.6rem;
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* La testata della pagina iniziale: saluto a sinistra, stato a destra. Il
   titolo sfuma dal bianco al grigio: e' l'unico testo «decorato» del kit. */
.nv-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 0.8rem;
}
.nv-hero h1 {
  margin: 0;
  background: linear-gradient(180deg, var(--hero-from), var(--hero-to));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3.4rem;
}
.nv-hero p.muted { margin: 0.6rem 0 0; font-size: 1.45rem; }
.nv-hero-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem; }

/* Quando non c'e' niente: una riga smorta, o un invito tratteggiato a
   cominciare. Il tratteggio vuol dire «qui ci va qualcosa». */
.nv-empty { margin: 0; padding: 1.2rem 0.4rem; color: var(--faint); }
.nv-empty-action {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.6rem;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--muted);
  text-decoration: none;
}
.nv-empty-action:hover { border-color: var(--accent-line); color: var(--text); }

/* L'esito di un modulo, sotto il modulo. Vuoto non occupa spazio. */
.nv-form-message { min-height: 0; margin: 0; font-size: 1.25rem; }
.nv-form-message:empty { display: none; }


/* --- Il pallino e la pastiglia di salute ---------------------------------
   Il pallino e' lo stato di una cosa in un elenco: grigio se non si sa,
   altrimenti il semaforo con un alone. Piu' piccolo di una parola, si legge
   di sfuggita. */

.nv-dot {
  display: inline-block;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--faint);
}
.nv-dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--halo-ok); }
.nv-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px var(--halo-warn); }
.nv-dot.bad { background: var(--red); box-shadow: 0 0 0 3px var(--halo-bad); }

/* «Tutto a posto» / «2 cose da guardare», in alto a destra nell'Hub. */
.nv-health {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--panel);
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 500;
}
.nv-health.ok { color: var(--text); }
.nv-health.warn { border-color: var(--tint-warn); color: var(--amber); }
.nv-health.bad { border-color: var(--tint-bad); color: var(--red); }


/* --- Il pannello e la card ------------------------------------------------
   Il pannello (.nv-panel) e' una sezione con un titolo: «Progetti aperti»,
   «Appunti». La card (.card) e' una cosa sola dentro una griglia. Tutti e due
   hanno la luce dall'alto: un filo di bianco che sfuma, e una riga chiara
   sul bordo superiore. */

.nv-panel {
  min-width: 0;
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--sheen), transparent 30%), var(--panel);
  box-shadow: inset 0 1px 0 var(--sheen-strong);
}
.nv-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.nv-panel-head h2 { display: flex; align-items: center; gap: 0.9rem; margin: 0; font-size: 1.5rem; }
.nv-panel-head h2 .nv-icon { color: var(--accent); }
.nv-panel-head h2 a { color: inherit; text-decoration: none; }
.nv-panel-head h2 a:hover { color: var(--accent); }
/* «Tutti →» in alto a destra di un pannello. La freccia si sposta di due
   pixel sotto il puntatore: dice «di qua si va». */
.nv-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 1.25rem;
  text-decoration: none;
}
.nv-more .nv-icon { width: 1.4rem; height: 1.4rem; transition: transform var(--ease); }
.nv-more:hover { color: var(--text); }
.nv-more:hover .nv-icon { transform: translateX(2px); }
.nv-subhead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 -0.8rem;
  color: var(--muted);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nv-subhead .nv-icon { width: 1.4rem; height: 1.4rem; }

/* Due colonne, la prima piu' larga: a sinistra l'elenco lungo, a destra i
   pannelli corti uno sotto l'altro. .nv-panel-wide occupa due righe. */
.nv-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.6rem;
}
.nv-panel-wide { grid-row: span 2; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--sheen), transparent 60%), var(--panel);
  box-shadow: inset 0 1px 0 var(--sheen-strong);
  transition: border-color var(--ease);
}
.card:hover { border-color: var(--line-hover); }
/* Lo stato tinge il bordo, non il fondo — come nella classica. */
.card.ok { border-color: var(--tint-ok); }
.card.warn { border-color: var(--tint-warn); }
.card.bad { border-color: var(--tint-bad); }
.metric-label { color: var(--muted); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.metric-value { margin-top: 0.4rem; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }


/* --- Le tessere dei numeri ------------------------------------------------
   Quattro in fila: CPU, memoria, disco, server. Etichetta con icona, il
   numero grande, una barra sottile, una nota. tabular-nums: un numero che
   cambia ogni 15 secondi non deve far ballare quello che ha di fianco. */

.nv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.nv-stat {
  display: grid;
  gap: 0.6rem;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}
.nv-stat-head { display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 1.25rem; font-weight: 500; }
.nv-stat-head .nv-icon { width: 1.6rem; height: 1.6rem; }
.nv-stat-value { font-size: 2.8rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.nv-stat-note { overflow: hidden; color: var(--faint); font-size: 1.2rem; text-overflow: ellipsis; white-space: nowrap; }

/* La barra: sottile, senza bordo. Quando va tutto bene sfuma dal viola
   all'azzurro — e' la marca, non uno stato; quando non va bene diventa del
   colore del semaforo, e diventa di quel colore anche il numero. */
.nv-meter { height: 0.5rem; overflow: hidden; border-radius: var(--pill); background: var(--track); }
.nv-meter span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 600ms cubic-bezier(0.2, 0, 0, 1);
}
.nv-stat.ok .nv-meter span { background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.nv-stat.warn .nv-meter span { background: var(--amber); }
.nv-stat.warn .nv-stat-value { color: var(--amber); }
.nv-stat.bad .nv-meter span { background: var(--red); }
.nv-stat.bad .nv-stat-value { color: var(--red); }


/* --- I controlli «scegline uno» -------------------------------------------
   Tre, e hanno la stessa forma: una vaschetta col bordo, e dentro la scelta
   attiva che si solleva (--elevated e --shadow-lift). Nella classica le
   sezioni di una pagina erano linguette con una riga sotto; qui sono tutte
   pastiglie, cosi' l'occhio impara una forma sola. */

/* Le sezioni di una pagina (Overview, Terminale, Code, Git). */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.6rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--r) + 0.2rem);
  background: var(--well);
}
.tabs button {
  margin: 0;
  padding: 0.7rem 1.3rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
}
.tabs button:hover { background: var(--hover-wash); color: var(--text); }
.tabs button.active { background: var(--elevated); color: var(--text); box-shadow: var(--shadow-lift); }

/* Il filtro di un elenco, col numero di elementi accanto a ogni voce. Scorre
   di lato invece di andare a capo: le voci sono parole corte e tante. */
.nv-filter {
  display: flex;
  gap: 0.2rem;
  max-width: 100%;
  padding: 0.4rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: calc(var(--r) + 0.2rem);
  background: var(--well);
  scrollbar-width: none;
}
.nv-filter::-webkit-scrollbar { display: none; }
.nv-filter button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  white-space: nowrap;
}
.nv-filter button:hover { background: var(--hover-wash); color: var(--text); }
.nv-filter button span { color: var(--faint); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.nv-filter button.active { background: var(--elevated); color: var(--text); box-shadow: var(--shadow-lift); }
.nv-filter button.active span { color: var(--accent); }

/* Il tipo di una cosa che si sta scrivendo (Nota / Idea / Da fare). Sono
   radio veri, nascosti: funzionano con la tastiera e dentro un <form>. Qui
   la scelta si accende in viola invece di sollevarsi, perche' sta dentro un
   modulo e deve dire «questo verra' salvato cosi'». */
.nv-segmented { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.2rem; }
.nv-segmented input { position: absolute; width: 1px; opacity: 0; pointer-events: none; }
.nv-segmented span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  color: var(--muted);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.nv-segmented span .nv-icon { width: 1.5rem; height: 1.5rem; }
.nv-segmented span:hover { background: var(--panel-2); color: var(--text); }
.nv-segmented input:checked + span { border-color: var(--accent-line); background: var(--accent-soft); color: var(--text); }
.nv-segmented input:checked + span .nv-icon { color: var(--accent); }
.nv-segmented input:focus-visible + span { box-shadow: var(--ring); }


/* --- Scrivi al volo -------------------------------------------------------
   Il modulo in cima all'Hub: tipo, testo, a cosa si riferisce, Salva. Il
   campo non ha bordo — il bordo e' quello del riquadro intero, che si
   accende quando ci si scrive dentro. */

.nv-capture {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.nv-capture:focus-within { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-focus); }
.nv-capture-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem auto;
  align-items: start;
  gap: 0.8rem;
}
.nv-capture textarea {
  min-height: var(--tap);
  max-height: 24rem;
  padding: 1rem 1.1rem;
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  resize: none;
}
.nv-capture textarea:focus { box-shadow: none; }
.nv-capture select { height: var(--tap); }
.nv-capture .nv-primary { height: var(--tap); padding: 0 1.8rem; }
.nv-capture .nv-form-message { padding: 0 1rem 0.4rem; }


/* --- La riga di un elenco: il progetto ------------------------------------
   Avatar con l'iniziale, nome, stato col pallino, azioni a destra, etichette
   sotto. Da ferma la riga quasi non ha bordo: si disegna sotto il puntatore.
   In un elenco di dieci righe dieci riquadri sono una griglia, non un elenco. */

.nv-projects { display: grid; gap: 0.8rem; }
.nv-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main actions" "tags tags";
  align-items: center;
  gap: 0.6rem 1.2rem;
  padding: 1rem 1rem 1rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--row-wash);
  transition: border-color var(--ease), background var(--ease);
}
.nv-project:hover { border-color: var(--line); background: var(--row-hover); }
.nv-project-main { display: flex; grid-area: main; align-items: center; gap: 1.2rem; min-width: 0; color: var(--text); text-decoration: none; }
/* Il colore dell'avatar viene dal nome (--hue, da 0 a 359, lo calcola
   coloreDaNome() in js/kit.js): lo stesso progetto ha sempre lo stesso
   colore, e progetti diversi si distinguono senza leggere. Saturazione e
   luminosita' sono fisse, cosi' nessuno esce acceso piu' degli altri; le
   luminosita' le danno i token, perche' sul chiaro si invertono. */
.nv-project-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border: 1px solid hsl(var(--hue, 260) 60% 50% / 0.25);
  border-radius: 1.1rem;
  background: hsl(var(--hue, 260) 55% var(--avatar-bg-l) / 0.65);
  color: hsl(var(--hue, 260) 85% var(--avatar-fg-l));
  font-size: 1.6rem;
  font-weight: 700;
}
.nv-project-text { display: grid; gap: 0.2rem; min-width: 0; }
.nv-project-text strong { overflow: hidden; font-size: 1.45rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nv-project-text small { display: flex; align-items: center; gap: 0.6rem; min-width: 0; overflow: hidden; color: var(--muted); font-size: 1.2rem; white-space: nowrap; }
.nv-branch { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--mono); font-size: 1.15rem; }
.nv-branch .nv-icon { width: 1.3rem; height: 1.3rem; }
/* Le etichette partono sotto il nome, non sotto l'avatar. */
.nv-project-tags { display: flex; flex-wrap: wrap; grid-area: tags; gap: 0.4rem; padding-left: 5rem; }
.nv-project-actions { display: flex; flex-wrap: wrap; grid-area: actions; align-items: center; justify-content: flex-end; gap: 0.2rem; }


/* --- Le pastiglie ---------------------------------------------------------
   .badge e' un'etichetta di stato (bordo, fondo quasi trasparente).
   .tag-chip e' un'etichetta che sceglie l'utente, col colore che sceglie
   lui: il colore si passa come --tag nello style, vedi esempio.html.
   .nv-tag-soft e' il tipo di una cosa, smorto: «Admin», «Docs». */

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 2px 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--row-wash);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  white-space: nowrap;
}
.badge.ok { border-color: var(--tint-ok); background: var(--wash-ok); color: var(--green); }
.badge.warn { border-color: var(--tint-warn); background: var(--wash-warn); color: var(--amber); }
.badge.bad { border-color: var(--tint-bad); background: var(--wash-bad); color: var(--red); }
.badge.info { border-color: var(--tint-info); background: var(--wash-info); color: var(--cyan); }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.2rem;
  padding: 2px 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-size: 1.15rem;
  line-height: 1;
  white-space: nowrap;
  /* Bordo e fondo sono il colore scelto, diluito. Il testo passa da --tag-text,
     che sul chiaro si scurisce: un giallo scelto guardando lo scuro, sul bianco,
     come testo non si legge. */
  --tag-text: var(--tag, var(--muted));
  border-color: color-mix(in srgb, var(--tag, var(--muted)) 40%, transparent);
  background: color-mix(in srgb, var(--tag, var(--muted)) 12%, transparent);
  color: var(--tag-text);
}
:root[data-theme="light"] .tag-chip { --tag-text: color-mix(in srgb, var(--tag, var(--muted)) 55%, #000); }

.nv-tag-soft {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  color: var(--muted);
  font-size: 1.1rem;
  white-space: nowrap;
}

/* Il numero d'uso (CPU 18%, Claude 40%): fondo appena tinto dal semaforo,
   testo bianco. Nella classica era un fondo pieno; qui e' un velo, perche'
   sta in alto vicino al titolo e non deve rubargli l'occhio. */
.usage-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--panel);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.usage-chip.ok { border-color: var(--tint-ok); background: var(--wash-ok); }
.usage-chip.warn { border-color: var(--tint-warn); background: var(--wash-warn); }
.usage-chip.bad { border-color: var(--tint-bad); background: var(--wash-bad); }
.nv-usage { display: flex; flex-wrap: wrap; gap: 0.6rem; }


/* --- I collegamenti -------------------------------------------------------
   Due forme per la stessa cosa (un indirizzo fuori dall'app):
   la pastiglia, piccola, in fila sotto un progetto;
   la tessera, con l'iniziale colorata, in una griglia.
   Il tipo colora l'iniziale: admin viola, sito azzurro, docs giallo. Qui il
   giallo non e' un semaforo: e' dentro un avatar, non accanto a uno stato. */

.nv-links-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.nv-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: var(--panel-2);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ease), background var(--ease);
}
.nv-link-pill .nv-icon { width: 1.4rem; height: 1.4rem; color: var(--muted); }
.nv-link-pill:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.nv-link-pill.nv-kind-admin { border-color: var(--accent-line); }
.nv-link-pill.nv-kind-admin .nv-icon { color: var(--accent); }
/* «+ Collegamento»: tratteggiato, come ogni posto dove si aggiunge. */
.nv-link-add { border-style: dashed; background: transparent; color: var(--muted); }
.nv-project-actions .nv-link-pill { margin-left: 0.4rem; }

.nv-link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.8rem; }
.nv-link-tile {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--row-wash);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--ease), background var(--ease), transform var(--ease);
}
.nv-link-tile:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); }
.nv-link-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--elevated);
  color: var(--muted);
  font-weight: 700;
}
.nv-link-avatar.nv-kind-admin { border-color: var(--accent-line); background: var(--accent-soft); color: var(--kind-admin); }
.nv-link-avatar.nv-kind-sito { border-color: var(--tint-info); background: var(--wash-info); color: var(--kind-sito); }
.nv-link-avatar.nv-kind-docs { border-color: var(--tint-warn); background: var(--wash-warn); color: var(--kind-docs); }
.nv-link-text { display: grid; flex: 1; gap: 0.1rem; min-width: 0; }
.nv-link-text strong { overflow: hidden; font-size: 1.35rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nv-link-text small { overflow: hidden; color: var(--faint); font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.nv-link-go { width: 1.5rem; height: 1.5rem; color: var(--faint); }

/* La riga di un elenco da gestire (nome, indirizzo, tipo, azioni). */
.nv-link-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.9rem 0.6rem;
  border-top: 1px solid var(--line-soft);
}
.nv-link-row:first-of-type { border-top: 0; }


/* --- Gli appunti ----------------------------------------------------------
   Una nota: a sinistra il tipo (o la casella, se e' una cosa da fare), il
   testo, sotto i dettagli, a destra le azioni. Le azioni sono mezze spente
   finche' non ci si passa sopra: dieci note con tre bottoni accesi ciascuna
   sono trenta bottoni. */

.nv-notes { display: grid; gap: 0.6rem; }
.nv-notes-grid { grid-template-columns: repeat(auto-fill, minmax(34rem, 1fr)); gap: 1rem; }
.nv-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.1rem;
  padding: 1.1rem 1rem 1.1rem 1.2rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--row-wash);
  transition: border-color var(--ease);
}
.nv-note:hover { border-color: var(--line); }
/* Fissata: un velo viola in cima e il bordo viola. */
.nv-note.pinned { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), transparent), var(--panel); }
.nv-note.done .nv-note-body { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--strike); }
.nv-note-kind {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.9rem;
  background: var(--elevated);
  color: var(--muted);
}
.nv-note-idea .nv-note-kind { background: var(--wash-warn); color: var(--amber); }
.nv-note-nota .nv-note-kind { background: var(--wash-info); color: var(--cyan); }
.nv-note-kind .nv-icon { width: 1.5rem; height: 1.5rem; }

/* La casella da spuntare: l'unico posto del kit dove il verde e' un fondo
   pieno. Fatto e' fatto, ed e' la cosa piu' soddisfacente da vedere. */
.nv-check {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 0.9rem;
  background: transparent;
  color: transparent;
}
.nv-check:hover { border-color: var(--green); background: transparent; color: var(--tint-ok); }
.nv-check.on,
.nv-check.on:hover { border-color: var(--green); background: var(--green); color: var(--on-green); }
.nv-check .nv-icon { width: 1.6rem; height: 1.6rem; stroke-width: 2.5; }

.nv-note-main { min-width: 0; padding-top: 0.2rem; }
.nv-note-body { font-size: 1.4rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.nv-note-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.4rem; color: var(--faint); font-size: 1.15rem; }
.nv-note-project { color: var(--accent); text-decoration: none; }
.nv-note-project:hover { text-decoration: underline; }
.nv-note-actions { display: flex; gap: 0.1rem; opacity: 0.55; transition: opacity var(--ease); }
.nv-note:hover .nv-note-actions,
.nv-link-row:hover .nv-note-actions,
.nv-note.pinned .nv-note-actions { opacity: 1; }
.nv-note-actions .nv-icon-button { width: 3rem; height: 3rem; }


/* --- La cronologia --------------------------------------------------------
   Cosa e' successo, il piu' recente in alto. Un pallino viola per riga, la
   cosa a sinistra (smorta, con l'oggetto in bianco), quando a destra. */

.nv-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.nv-timeline li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.85rem 0 0.85rem 1.8rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1.3rem;
}
.nv-timeline li:last-child { border-bottom: 0; }
.nv-timeline li::before {
  content: "";
  position: absolute;
  top: 1.45rem;
  left: 0.2rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.nv-timeline li.nv-empty::before { display: none; }
.nv-timeline-what { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.nv-timeline-what::first-letter { text-transform: uppercase; }
.nv-timeline-what b { color: var(--text); font-weight: 500; }
.nv-timeline time { color: var(--faint); font-size: 1.15rem; white-space: nowrap; }


/* --- La barra degli strumenti ---------------------------------------------
   Sopra un elenco: il filtro a sinistra, ricerca e scelte a destra. */

.nv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.nv-toolbar-right { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.nv-toolbar-right select { width: auto; min-width: 18rem; }
/* Un campo con la lente dentro. */
.nv-input-icon { position: relative; display: block; min-width: 24rem; }
.nv-input-icon .nv-icon { position: absolute; top: 50%; left: 1.1rem; width: 1.6rem; height: 1.6rem; color: var(--faint); transform: translateY(-50%); }
.nv-input-icon input { padding-left: 3.6rem; }


/* --- La tabella, l'output, il testo da leggere a carattere ---------------
   Uguali alla classica, coi colori nuovi. */

.table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
}
.table th, .table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.table th {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.table tr:last-child td { border-bottom: 0; }
.table tr.selected > td { background: var(--accent-soft); }
.table-wrap { overflow: auto; }

.output-box {
  max-height: calc(var(--visual-height) - 23rem);
  margin: 0;
  padding: 1.2rem 1.4rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sunken);
  color: var(--text);
  font-family: var(--mono);
  font-size: 1.25rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.output-box.ok { border-color: var(--tint-ok); }
.output-box.bad { border-color: var(--tint-bad); }

.mono { font-family: var(--mono); font-size: 1.25rem; word-break: break-all; }


/* --- Il messaggio di passaggio -------------------------------------------- */

.toast {
  position: fixed;
  bottom: 2.4rem;
  left: 50%;
  z-index: 100;
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--glass-line);
  border-radius: var(--r);
  background: var(--glass-solid);
  color: var(--text);
  font-size: 1.3rem;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  pointer-events: none;
}


/* --- La ricerca rapida ----------------------------------------------------
   Ctrl K, o la lente. Una finestra in alto al centro con un campo e un
   elenco: progetti, pagine, collegamenti, e in fondo «scrivi come appunto».
   E' l'unica finestra sopra la pagina in tutto il kit: si apre e si chiude
   in un attimo, e la tastiera ci lavora dentro (frecce, Invio, Esc). */

.nv-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(8vh, 1.6rem) 1.6rem 1.6rem;
  background: var(--veil);
  backdrop-filter: blur(4px);
  animation: nv-fade 140ms ease-out;
}
.nv-palette {
  display: flex;
  flex-direction: column;
  width: min(64rem, 100%);
  max-height: min(60rem, calc(var(--visual-height) - 4rem));
  overflow: hidden;
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  background: var(--glass-solid);
  box-shadow: var(--shadow);
  animation: nv-pop 160ms cubic-bezier(0.2, 0, 0, 1);
}
.nv-palette-input {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0 1.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.nv-palette-input input {
  height: 5.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
}
.nv-palette-input input:focus { box-shadow: none; }
.nv-palette-list { padding: 0.6rem; overflow-y: auto; }
.nv-palette-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  padding: 1rem 1.2rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.nv-palette-item .nv-icon { color: var(--muted); }
.nv-palette-item.active,
.nv-palette-item:hover { background: var(--accent-soft); }
.nv-palette-item.active .nv-icon { color: var(--accent); }
.nv-palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-palette-hint { max-width: 40%; overflow: hidden; color: var(--faint); font-size: 1.2rem; text-overflow: ellipsis; white-space: nowrap; }
@keyframes nv-fade { from { opacity: 0; } }
@keyframes nv-pop { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }


/* --- La barra in basso ----------------------------------------------------
   Esiste solo sul telefono (§ sotto): da largo non c'e'. */

.nv-bottom { display: none; }


/* --- La pagina di ingresso ------------------------------------------------
   Il logo grande, un riquadro di vetro, la luce viola in alto. Il bottone
   «Entra» e' acceso: e' l'unica cosa da fare in quella pagina. */

.login {
  display: grid;
  place-items: center;
  min-height: var(--visual-height);
  padding: 1.8rem;
  background: radial-gradient(60rem 40rem at 50% -10%, var(--login-haze), transparent 70%), var(--bg);
}
.login form {
  display: grid;
  gap: 1.2rem;
  justify-items: start;
  width: min(38rem, 100%);
  padding: 3.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass-login);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}
.login h1 { margin: 0; }
.login input { width: 100%; }
.login button {
  width: 100%;
  border-color: transparent;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
}
.login button:hover { border-color: transparent; background: var(--accent-hover); }


/* --- I colori del testo ---------------------------------------------------
   Le uniche classi di colore. Vogliono dire una cosa sola, sempre. */

.muted { color: var(--muted); }
.ok { color: var(--green); }   /* funziona */
.warn { color: var(--amber); } /* guardalo */
.bad { color: var(--red); }    /* non funziona */
.info { color: var(--cyan); }  /* vive altrove */


/* --- Il telefono ----------------------------------------------------------
   TUTTE le correzioni per gli schermi stretti stanno qui, in un blocco solo.

   Quattro punti di rottura, e non se ne inventano altri:
     1200px  le due colonne di pannelli diventano una
     1100px  le griglie a quattro diventano due
      820px  telefono: la spalla diventa una barra in alto, compare la barra
             in basso, il menu e' un foglio a tutto schermo
      520px  telefono stretto: si stringe la barra delle schede
   Piu' (pointer: coarse), che non e' una larghezza. */

@media (max-width: 1200px) {
  .nv-columns { grid-template-columns: minmax(0, 1fr); }
  .nv-panel-wide { grid-row: auto; }
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  /* L'altezza della barra in alto, tacca compresa. La usano anche il foglio del
     menu e tutto quello che si ferma sotto la barra. */
  :root { --top-total: calc(var(--top-h) + env(safe-area-inset-top)); }

  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: var(--visual-height);
  }
  /* La spalla diventa la barra in alto. Altezza fissa, e NIENTE backdrop-filter:
     un filtro sul genitore diventa il riferimento dei figli position:fixed, e il
     foglio del menu si aprirebbe dentro la barra invece che sullo schermo. */
  .nv .side {
    justify-content: center;
    height: var(--top-total);
    padding: env(safe-area-inset-top) 1rem 0 1.2rem;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    background: var(--side);
    backdrop-filter: none;
    z-index: 70;
  }
  .nv .side .nv-logo { width: 3rem; height: 3rem; border-radius: 0.75rem; }
  .nv-brand-text small { display: none; }
  .nv .nv-search-mini,
  .nv .menu-toggle { display: inline-grid; padding: 0; }
  .nv-search { display: none; }

  /* Il menu aperto e' un foglio a tutto schermo sotto la barra in alto. */
  .nv .nav.nv-nav { display: none; }
  .nv .side.nav-open .nav.nv-nav {
    position: fixed;
    top: var(--top-total);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    display: flex;
    margin: 0;
    padding: 1.2rem 1.6rem calc(2rem + env(safe-area-inset-bottom));
    background: var(--bg);
    animation: nv-fade 140ms ease-out;
  }
  .nv .nav a.nv-leaf,
  .nv .nv-fold > summary { padding: 1.1rem 1rem; font-size: 1.5rem; }
  .nv .nav-children a.nav-leaf { padding: 0.9rem 1rem; font-size: 1.4rem; }

  /* Il contenuto lascia sotto lo spazio della barra in basso, piu' la tacca:
     l'ultima riga deve potersi leggere sopra la barra, non sotto. */
  .content { padding: 1.8rem 1.6rem calc(var(--bottom-h) + 2.4rem + env(safe-area-inset-bottom)); }
  .content-wide { padding: 0.8rem 0.8rem calc(var(--bottom-h) + env(safe-area-inset-bottom)); }

  /* La barra in basso: quattro destinazioni e il menu, a portata di pollice.
     Galleggia staccata dai bordi, di vetro, con gli angoli tondi: si vede che
     non e' parte della pagina e che la pagina ci passa sotto. Le pagine che
     vogliono tutto lo schermo (un terminale) semplicemente non la mettono. */
  .nv-bottom {
    position: fixed;
    right: 0.8rem;
    bottom: calc(0.8rem + env(safe-area-inset-bottom));
    left: 0.8rem;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: var(--bottom-h);
    padding: 0.6rem;
    border: 1px solid var(--glass-line);
    border-radius: 2.2rem;
    background: var(--glass);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(20px) saturate(1.4);
  }
  .nv-tab {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.3rem;
    min-height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: 1.6rem;
    background: transparent;
    color: var(--muted);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
  }
  .nv-tab:hover { background: transparent; }
  .nv-tab .nv-icon { width: 2.1rem; height: 2.1rem; }
  .nv-tab.active,
  .nv-tab.active:hover { background: var(--accent-soft); color: var(--text); }
  .nv-tab.active .nv-icon { color: var(--accent); }

  .nv-hero h1 { font-size: 2.8rem; }
  .nv-hero-side { justify-content: flex-start; }
  .nv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .nv-stat { padding: 1.2rem 1.3rem; border-radius: var(--r); }
  .nv-stat-value { font-size: 2.4rem; }
  .nv-panel { padding: 1.4rem; border-radius: var(--r); }
  .grid, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nv-capture-row { grid-template-columns: minmax(0, 1fr) auto; }
  .nv-capture-row select { grid-row: 2; grid-column: 1; }
  .nv-capture-row .nv-primary { grid-row: 2; }
  .nv-project { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "actions" "tags"; }
  .nv-project-actions { justify-content: flex-start; padding-left: 4.6rem; }
  .nv-notes-grid { grid-template-columns: minmax(0, 1fr); }
  /* Senza puntatore non c'e' il «passarci sopra»: le azioni si vedono sempre. */
  .nv-note-actions { opacity: 1; }
  .nv-toolbar-right, .nv-input-icon, .nv-toolbar-right select { width: 100%; min-width: 0; }
  .nv-link-row .nv-tag-soft { display: none; }
  .nv-icon-button { width: var(--tap); height: var(--tap); }
  .nv-note-actions .nv-icon-button { width: 3.8rem; height: 3.8rem; }
  .nv-palette-overlay { padding-top: calc(1.2rem + env(safe-area-inset-top)); }
}

@media (max-width: 520px) {
  :root { --tabs-h: 3.8rem; }
  .page-tab { max-width: 15rem; padding: 0 0.9rem; }
}

@media (pointer: coarse) {
  /* 44px dove si tocca — ma non sui bottoni DENTRO una barra (la crocetta di
     una scheda): li' si allarga il bersaglio senza sfondare la barra. */
  .nv .nav a.nv-leaf,
  .nv .nv-fold > summary,
  .nv-filter button,
  .tabs button {
    min-height: var(--tap);
  }
  .page-tab-close { width: 2.6rem; height: 2.6rem; opacity: 1; }
}