/* Nexus 2.0: le aggiunte ai componenti di Inside (inside.css, che non si modifica), con i suoi token.
   I componenti comuni sono documentati in CLAUDE.md, sezione "Componenti".

   ==== SCALA GLOBALE (giro 9, squadra responsive 1): usarla in tutti i css dei moduli ====
   Unita' che cresce coi monitor enormi:
     --nx-u      1px fino a 2560px di viewport, poi cresce: 1.45px a 3840 (4K a dpr 1), max 2px.
                 Si usa cosi': width: calc(260 * var(--nx-u)); mai px nudi per testi e componenti.
   Tipografia (sul telefono il corpo sale a 16px; nessun testo sotto 12px):
     --nx-fs-0   12  etichette, meta, chip piccole        (= --fs-label)
     --nx-fs-1   13  testo secondario, card, tabelle       (= --fs-small; 14 sul telefono)
     --nx-fs-2   15  corpo                                 (= --fs-body; 16 sul telefono)
     --nx-fs-3   17  titoli di card, h3                    (= --fs-h3)
     --nx-fs-4   20..27 fluido, h2                         (= --fs-h2)
     --nx-fs-5   28..42 fluido, h1                         (= --fs-h1)
     --nx-riga   1.55 interlinea del corpo; --nx-riga-stretta 1.3 per card e meta
   Spaziature: --nx-sp-1 4, --nx-sp-2 8, --nx-sp-3 12, --nx-sp-4 16, --nx-sp-5 24, --nx-sp-6 36
   Bersagli: --nx-tocco 44px sul telefono (32 col puntatore fine); --nx-rientro il rientro
             standard di sottoliste e checklist (18).
   Breakpoint comuni (i media query non leggono le variabili, si scrivono cosi'):
     telefono     max-width: 767.98px   (stretto: max-width: 420px)
     tablet       768px .. 900px        (sotto 900px la barra laterale diventa cassetto, da Inside)
     desktop      901px .. 1599px
     largo        min-width: 1600px     (pg-larga a tutta larghezza, pg-lettura centrata)
     enorme       min-width: 2560px     (qui --nx-u comincia a crescere: 4K a dpr 1)
   ==== */

/* ---- token: correzioni di contrasto e i token nuovi ---- */
/* --faint almeno 4,5:1 su --bg, --bg-2 e --bg-3 in entrambi i temi (Inside lo teneva a ~3:1).
   In chiaro anche --muted scende, cosi' resta piu' forte di --faint. */
:root { --faint: #80808a; --ombra: 0 14px 34px rgba(0,0,0,.45); --ombra-lato: -18px 0 44px rgba(0,0,0,.4); --velo: rgba(0,0,0,.5); }
:root[data-theme="light"] { --warn: #8a6708; --muted: #55555d; --faint: #66666f; --ombra: 0 14px 34px rgba(0,0,0,.16); --ombra-lato: -18px 0 44px rgba(0,0,0,.14); --velo: rgba(0,0,0,.28); }
@media print { :root, :root[data-theme="light"], :root[data-theme="dark"] { --muted: #444; --faint: #666; } }

/* ---- scala globale: unita', tipografia e spaziature (vedi il commento in cima) ---- */
:root {
  --nx-u: min(2px, calc(1px + max(0px, 100vw - 2560px) / 2844));
  --nx-fs-0: calc(12 * var(--nx-u));
  --nx-fs-1: calc(13 * var(--nx-u));
  --nx-fs-2: calc(15 * var(--nx-u));
  --nx-fs-3: calc(17 * var(--nx-u));
  --nx-fs-4: max(clamp(20px, 2.6vw, 27px), calc(27 * var(--nx-u)));
  --nx-fs-5: max(clamp(28px, 4vw, 42px), calc(42 * var(--nx-u)));
  --nx-riga: 1.55;
  --nx-riga-stretta: 1.3;
  --nx-sp-1: calc(4 * var(--nx-u));
  --nx-sp-2: calc(8 * var(--nx-u));
  --nx-sp-3: calc(12 * var(--nx-u));
  --nx-sp-4: calc(16 * var(--nx-u));
  --nx-sp-5: calc(24 * var(--nx-u));
  --nx-sp-6: calc(36 * var(--nx-u));
  --nx-tocco: 32px;
  --nx-rientro: calc(18 * var(--nx-u));
  /* i token di Inside passano dalla scala */
  --fs-label: var(--nx-fs-0);
  --fs-small: var(--nx-fs-1);
  --fs-body: var(--nx-fs-2);
  --fs-h3: var(--nx-fs-3);
  --fs-h2: var(--nx-fs-4);
  --fs-h1: var(--nx-fs-5);
  --side-w: calc(232 * var(--nx-u));
  --pannello-w: calc(680 * var(--nx-u));
}
/* i rem dei moduli crescono con la scala: 16px fino a 2560, 23px a 3840 */
html { font-size: calc(16 * var(--nx-u)); }
@media (max-width: 767.98px) {
  :root { --nx-fs-1: 14px; --nx-fs-2: 16px; --nx-tocco: 44px; }
}
@media print { :root { --fs-body: 11pt; --fs-small: 10pt; --fs-label: 9pt; --nx-u: 1px; } }

/* ---- utilita' ---- */
[hidden] { display: none !important; } /* vince su .row, .pill e gli altri display dei componenti */
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--bg-2); color: var(--white); border: 1px solid var(--white); padding: 10px 14px; font-size: var(--fs-small); font-weight: 700; text-transform: lowercase; }
.salta:focus { top: 12px; }
.forte { color: var(--white); font-weight: 700; }
.sottolineato { border-bottom: 1px solid var(--line); }
.sottolineato:hover { color: var(--white); border-bottom-color: var(--white); }
.dx { text-align: right; }
.piccolo { font-size: var(--fs-label); margin-top: 6px; }
code { font: 12.5px ui-monospace, "SF Mono", Menlo, monospace; background: var(--bg-3); padding: 1px 6px; word-break: break-all; color: var(--text); }
h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; text-transform: lowercase; }
h3 svg.ic { width: 17px; height: 17px; }
.head .lbl { display: inline-block; margin-bottom: 6px; }
a.lbl:hover { color: var(--white); }

/* ---- focus: sempre visibile, anche su .hint e sui campi (Inside toglieva l'outline) ---- */
:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.hint:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--white); outline-offset: 1px; }
.main:focus, .pannello:focus { outline: none; }

/* ---- barra laterale ---- */
.nav-gruppo + .nav-gruppo { margin-top: 18px; }
.nav .nav-sec { margin: 0 0 4px; padding: 0 10px 6px; border-bottom: 1px solid var(--line); }
.fresco { font-size: var(--fs-label); color: var(--faint); text-transform: lowercase; margin-bottom: 12px; }
.out-form { margin-left: auto; }
.out { background: none; border: 0; cursor: pointer; font: inherit; }

/* ---- campi ---- */
input[type=search] { width: 100%; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); padding: 10px 12px; font: inherit; font-size: var(--fs-small); border-radius: var(--r); }
input[type=search]:focus { border-color: var(--muted); }
.cerca input { width: min(340px, 80vw); }
/* un campo che sembra testo finche' non lo tocchi (titoli, date, note in riga) */
.campo-muto { background: transparent; border: 1px solid transparent; color: inherit; font: inherit; padding: 4px 6px; margin: -5px -7px; width: auto; max-width: 100%; }
.campo-muto:hover { border-color: var(--line); }
.campo-muto:focus { background: var(--bg-3); border-color: var(--muted); }

/* ---- chip, pallini, avatar ---- */
.chip--sm { padding: 1px 7px; font-size: 11px; gap: 4px; }
.chip--ok { color: var(--ok); border-color: var(--ok); }
.chip--warn { color: var(--warn); border-color: var(--warn); }
.chip--err { color: var(--err); border-color: var(--err); }
.dot { background: var(--faint); }
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--err { background: var(--err); }
.dot--faint { background: var(--faint); }
.dot--sm { width: 6px; height: 6px; }
.ava--sm { width: 26px; height: 26px; font-size: 10px; }
.ava--xs { width: 22px; height: 22px; font-size: 9px; }

/* ---- filtri: la barra sotto .head ---- */
.filtri { display: flex; gap: 8px; flex-wrap: wrap; margin: -10px 0 18px; }
.filtri .chip:hover, .barra .chip:hover { color: var(--white); border-color: var(--muted); }
.filtri .chip.on, .barra .chip.on { color: var(--on-strong); background: var(--white); border-color: var(--white); }
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -10px 0 18px; }
.barra select, .barra input { width: auto; padding: 6px 10px; font-size: var(--fs-label); }
.barra .togli { margin-left: auto; }
.salti { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- stato vuoto: cosa manca e da dove cominciare ---- */
.vuoto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 6px 0; }
.vuoto p { color: var(--muted); font-size: var(--fs-small); max-width: 56ch; }
.vuoto .row { gap: 8px; }
.card.vuoto { padding: 20px; }

/* ---- blocchi e righe ---- */
.blocco { margin-top: 14px; scroll-margin-top: 16px; }
.blocchi > .card { scroll-margin-top: 16px; height: 100%; }
.righe { list-style: none; }
.righe li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.righe li:last-child { border-bottom: 0; }
.riga-link { display: flex; flex-wrap: wrap; gap: 4px 12px; width: 100%; }
.riga-link:hover strong { text-decoration: underline; }
.dati { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 16px; font-size: var(--fs-small); }
.dati dt { font-size: var(--fs-label); font-weight: 700; text-transform: lowercase; color: var(--faint); padding-top: 2px; }
.dati dd { min-width: 0; overflow-wrap: anywhere; }
.dati.stretti { grid-template-columns: 110px minmax(0, 1fr); }
tr.cliccabile { cursor: pointer; }
.link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-label); font-weight: 700; text-transform: lowercase; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--white); }
.link.pericolo { color: var(--err); }
details > summary.link, details > summary.pill { list-style: none; display: inline-flex; }
details > summary::-webkit-details-marker { display: none; }

/* ---- testo lungo e markdown reso da md() ---- */
.prosa { font-size: var(--fs-small); line-height: 1.65; max-width: 72ch; overflow-wrap: anywhere; }
.prosa > * + * { margin-top: .7em; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: .3em; }
.prosa h2, .prosa h3, .prosa h4, .prosa h5, .prosa h6 { display: block; color: var(--white); text-transform: none; font-size: var(--fs-body); margin: 1.3em 0 .4em; }
.prosa h2 { font-size: var(--fs-h3); }
.prosa a { text-decoration: underline; text-underline-offset: 3px; }
.prosa a:hover { color: var(--white); }
.prosa strong { color: var(--white); }
.prosa blockquote { padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); }
.prosa pre { background: var(--bg-3); padding: 10px 12px; overflow-x: auto; }
.prosa pre code { background: none; padding: 0; word-break: normal; white-space: pre; }
.prosa hr { border: 0; border-top: 1px solid var(--line); }

/* ---- tooltip dei "?" (posizionato da nexus.js dentro la viewport) e popover ---- */
.hint { position: relative; }
/* il "?" resta un cerchio da 15px ma il bersaglio e' 24x24 (WCAG 2.5.8): il cerchio e' uno sfondo,
   i margini negativi tengono la riga com'era (inside.css non si tocca) */
.hint { width: 24px; height: 24px; margin: -4.5px -4.5px -4.5px .5px; border: 0; background: radial-gradient(circle closest-side, var(--bg-3) calc(100% - 5px), var(--line) calc(100% - 5px) calc(100% - 4px), transparent calc(100% - 4px)); }
.hint:hover, .hint:focus { background: radial-gradient(circle closest-side, var(--bg-3) calc(100% - 5px), var(--muted) calc(100% - 5px) calc(100% - 4px), transparent calc(100% - 4px)); }
/* il ? di un blocco che si apre sta subito sotto il summary: dentro il summary sarebbe un controllo annidato */
.fold-aiuto { margin: 6px 0 8px; }
.fold-aiuto .hint { margin-left: -4.5px; }
.hint:hover::after, .hint:focus::after { max-width: min(280px, 90vw); }
.js .hint:hover::after, .js .hint:focus::after { content: none; display: none; }
.suggerimento { position: fixed; z-index: 95; max-width: min(280px, 90vw); background: var(--bg-3); border: 1px solid var(--line); color: var(--text); padding: 9px 12px; font-size: var(--fs-label); line-height: 1.5; box-shadow: var(--ombra); }
.suggerimento[hidden] { display: none; }
.popover { position: absolute; z-index: 85; min-width: 180px; max-width: min(320px, 92vw); background: var(--bg-3); border: 1px solid var(--line); box-shadow: var(--ombra); padding: 6px; }
.popover[hidden] { display: none; }
.popover .popover-voce { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); font: inherit; font-size: var(--fs-small); padding: 9px 10px; cursor: pointer; text-transform: lowercase; }
.popover .popover-voce:hover, .popover .popover-voce:focus-visible { background: var(--bg-2); color: var(--white); }
.popover .popover-voce:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; }
.popover .lbl { display: block; padding: 6px 10px 4px; }

/* ---- pannello laterale sopra la pagina, col velo ---- */
.velo { position: fixed; inset: 0; background: var(--velo); z-index: 74; }
.velo[hidden], .pannello[hidden] { display: none; }
.pannello { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100vw); z-index: 75; background: var(--bg-2); border-left: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 3vw, 30px); padding-bottom: max(30px, env(safe-area-inset-bottom)); box-shadow: var(--ombra-lato); animation: nx-entra .16s ease-out; }
.pannello-testa { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.pannello-chiudi { margin: -8px -8px 0 0; }
body.con-pannello { overflow: hidden; }

/* ---- bacheca a colonne e card di bacheca ---- */
.bacheca { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; align-items: start; }
.colonna { background: var(--bg); border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.colonna.sopra { border-color: var(--muted); background: var(--bg-2); }
.colonna-testa { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 700; text-transform: lowercase; color: var(--muted); padding: 2px 2px 6px; border-bottom: 1px solid var(--line); }
.colonna-testa .num { margin-left: auto; color: var(--faint); }
.scheda-mini { display: block; background: var(--bg-2); border: 1px solid var(--line); padding: 10px 12px; font-size: var(--fs-small); position: relative; }
.scheda-mini:hover { border-color: var(--muted); }
.scheda-mini .scheda-mini-titolo { color: var(--white); font-weight: 700; display: block; overflow-wrap: anywhere; }
.scheda-mini .scheda-mini-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: var(--fs-label); color: var(--muted); }
/* trascinamento (nx.trascina) */
[data-trascina] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.trascinando { opacity: .35; }
.trascina-fantasma { position: fixed; z-index: 96; pointer-events: none; box-shadow: var(--ombra); transform: rotate(1.5deg); opacity: .95; margin: 0; }
.trascina-segno { height: 3px; background: var(--white); margin: -2px 0; flex: none; }
.in-attesa-tocco { outline: 2px dashed var(--muted); outline-offset: 2px; }

/* ---- tabelle ---- */
.tbl select { width: auto; min-width: 140px; }

/* ---- accessi (clienti) ---- */
.gruppo { margin: 18px 0 8px; }
.accessi { list-style: none; display: grid; gap: 10px; }
.accesso { border: 1px solid var(--line); background: var(--bg); padding: 14px 16px; scroll-margin-top: 16px; }
.accesso:target { border-color: var(--white); }
.accesso-testa { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.accesso-testa strong { color: var(--white); overflow-wrap: anywhere; }
.accesso-piede { display: flex; gap: 18px; align-items: baseline; margin-top: 12px; flex-wrap: wrap; }
.accesso-piede details { flex: 1; min-width: 0; }
.segreto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.segreto code:not([hidden]) { color: var(--white); user-select: all; -webkit-user-select: all; }
.note { font-size: var(--fs-small); color: var(--muted); margin-top: 10px; white-space: pre-line; }
.form-accesso { margin-top: 14px; }
.campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 14px; }
.campi .largo { grid-column: 1 / -1; }
.aggiungi { margin: 18px 0 6px; }
.aggiungi[open] > summary { margin-bottom: 4px; }
.yfold { margin-top: 12px; }

/* ---- persone ---- */
.tperson .ava:not(.ava--sm):not(.ava--xs) { width: 32px; height: 32px; }
tr.salvato td { background: var(--bg-3); }

/* ---- avviso in basso, con l'inverso del gesto ---- */
.avviso { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 90; display: flex; gap: 16px; align-items: center; background: var(--bg-3); border: 1px solid var(--line); color: var(--text); padding: 12px 18px; font-size: var(--fs-small); box-shadow: var(--ombra); width: max-content; max-width: calc(100vw - 24px); }
.avviso[hidden] { display: none; }
.avviso .link { color: var(--white); flex: none; }
.avviso .avviso-x { flex: none; margin: -6px -10px -6px -8px; }
.avviso-voce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .pannello { animation: none; } }

@media (max-width: 900px) {
  .dati, .dati.stretti { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dati dd { margin-bottom: 8px; }
  .cerca, .cerca input { width: 100%; }
  .cerca { flex: 1 1 100%; }
  /* la barra in alto e' fissa: le ancore (#accessi, #accesso-12) non finiscono sotto */
  [id] { scroll-margin-top: 72px; }
}

/* ---- telefono ---- */
@media (max-width: 767.98px) {
  /* iPhone non ingrandisce la pagina quando il campo e' almeno a 16px */
  input, select, textarea, input[type=search], .barra select, .barra input { font-size: 16px; }
  /* bersagli di tocco di almeno 44px: l'area cliccabile si allarga senza spostare il disegno */
  .link, .hint, .icon-btn, .theme-btn, .pill--sm { position: relative; }
  .link::before, .hint::before, .icon-btn::before, .theme-btn::before, .pill--sm::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .tb-btn { width: 44px; height: 44px; }
  .filtri .chip, .barra .chip { min-height: 44px; min-width: 44px; justify-content: center; padding-top: 6px; padding-bottom: 6px; display: inline-flex; align-items: center; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  details > summary.link, details > summary.pill { display: inline-flex; }

  /* tabelle lunghe: ogni riga diventa una card; le celle con data-label mostrano l'etichetta */
  .tbl--card thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--card, .tbl--card tbody, .tbl--card tr, .tbl--card td { display: block; width: 100%; }
  .tbl--card tr { border: 1px solid var(--line); background: var(--bg-2); padding: 10px 12px; margin-bottom: 10px; }
  .tbl--card tr:hover td { background: none; }
  .tbl--card td { border: 0; padding: 4px 0; text-align: left; }
  .tbl--card td[data-label] { position: relative; padding-left: 120px; min-height: 28px; }
  .tbl--card td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 110px; font-size: var(--fs-label); font-weight: 700; text-transform: lowercase; color: var(--faint); }
  .tbl--card td:empty { display: none; }
  .tbl-wrap:has(> .tbl--card) { overflow: visible; }
  .card.tbl-wrap:has(> .tbl--card) { background: none; border: 0; padding: 0; }

  .bacheca { grid-auto-columns: minmax(82vw, 1fr); scroll-snap-type: x mandatory; }
  .colonna { scroll-snap-align: start; }
  .accesso { padding: 12px; }
  .avviso { left: 12px; right: 12px; transform: none; width: auto; justify-content: space-between; }
}

/* ---- ritocchi comuni dal consolidamento (30/09/2026) ---- */
details:has(> .popover) { position: relative; }
.popover--riquadro { padding: 14px 16px; width: min(400px, calc(100vw - 16px)); max-width: none; }
button.chip { font: inherit; font-size: var(--fs-label); font-weight: 700; text-transform: lowercase; cursor: pointer; }
button.chip:not(.on) { background: none; }
.barra input[type=search] { width: min(280px, 100%); }
@media (max-width: 767.98px) { .barra input[type=search] { width: 100%; } }
/* l'ultima parola e il suo "?" vanno a capo insieme */
.con-aiuto { white-space: nowrap; }
input[type=url] { width: 100%; background: var(--bg-3); color: var(--text); border: 1px solid var(--line); padding: 10px 12px; font: inherit; font-size: var(--fs-small); border-radius: var(--r); outline: none; }
input[type=url]:focus { border-color: var(--muted); }
.bacheca { grid-auto-columns: minmax(var(--colonna-min, 260px), 1fr); }
.prosa .spunta, .prosa .lav-spunta { display: inline-block; width: 11px; height: 11px; border: 1px solid var(--muted); margin-right: 7px; vertical-align: -1px; }
.prosa .spunta.fatta, .prosa .lav-spunta.fatta { background: var(--muted); }
.tbl--card td:not([data-label]):first-child { color: var(--white); font-weight: 700; }
@media (max-width: 767px) { input[type=url] { font-size: 16px; } }
.bacheca { cursor: default; }
.bacheca.senza-scatti { scroll-snap-type: none; }
.bacheca.scorre-a-mano, .bacheca.scorre-a-mano * { cursor: grabbing !important; user-select: none; }
[data-trascina] :is(input, textarea, select) { -webkit-user-select: text; user-select: text; }
input.campo-muto, select.campo-muto, textarea.campo-muto { background: transparent; border-color: transparent; }
input.campo-muto:hover, select.campo-muto:hover, textarea.campo-muto:hover { border-color: var(--line); }
input.campo-muto:focus, select.campo-muto:focus, textarea.campo-muto:focus { border-color: var(--muted); background: var(--bg-3); }
.barra select { max-width: 100%; }
.ava { text-transform: uppercase; }
@media (max-width: 900px) { .side:not(.open) { box-shadow: none; } }
/* Monitor grandi: le pagine-bacheca (body.pg-larga: attivita', pipe, progetti, gantt, settimana,
   calendario) usano tutta la larghezza; le pagine da leggere restano a una misura centrata. */
@media (min-width: 1600px) {
  .main { padding-inline: clamp(44px, 3vw, 72px); }
  .pg-larga .main { max-width: none; }
  .pg-lettura .main { max-width: 1680px; margin-inline: auto; }
}

/* I numeri grandi (pipe, soldi, piano): cifre proporzionali, le tabulari di Helvetica Now sembrano una macchina da scrivere. */
.bal .v { font-variant-numeric: proportional-nums; letter-spacing: -.01em; }
/* Filtri sul telefono: le chip alte come le select accanto. */
@media (max-width: 767px) { .barra .chip { min-height: 40px; } }

/* card accesso: host, percorso e utente lunghi vanno a capo dentro la card (il percorso dopo le /) */
.accesso code { overflow-wrap: anywhere; word-break: normal; }

/* ---- scala globale sui componenti comuni (giro 9): crescono con --nx-u sopra i 2560px,
   nessun testo sotto 12px, bersagli da --nx-tocco sul telefono ---- */
.main { max-width: calc(1280 * var(--nx-u)); }
.brand { font-size: calc(16 * var(--nx-u)); }
.nav a { gap: calc(11 * var(--nx-u)); padding: calc(9 * var(--nx-u)) calc(10 * var(--nx-u)); }
.nav svg.ic, h3 svg.ic { width: calc(17 * var(--nx-u)); height: calc(17 * var(--nx-u)); }
.side { padding: calc(22 * var(--nx-u)) calc(18 * var(--nx-u)); }
.ava { width: calc(34 * var(--nx-u)); height: calc(34 * var(--nx-u)); font-size: var(--nx-fs-0); }
.ava--sm, .tperson .ava { width: calc(26 * var(--nx-u)); height: calc(26 * var(--nx-u)); font-size: var(--nx-fs-0); letter-spacing: -.02em; }
.ava--xs { width: calc(24 * var(--nx-u)); height: calc(24 * var(--nx-u)); font-size: var(--nx-fs-0); letter-spacing: -.04em; }
.chip { padding: calc(3 * var(--nx-u)) calc(10 * var(--nx-u)); }
.chip--sm { padding: calc(1 * var(--nx-u)) calc(7 * var(--nx-u)); font-size: var(--nx-fs-0); gap: var(--nx-sp-1); }
.dot--sm { width: calc(6 * var(--nx-u)); height: calc(6 * var(--nx-u)); }
.pill { padding-block: calc(11 * var(--nx-u)); padding-inline: calc(20 * var(--nx-u)); }
.pill--sm { padding: calc(6 * var(--nx-u)) calc(14 * var(--nx-u)); }
.card { padding: calc(20 * var(--nx-u)); }
code { font-size: max(12px, calc(12.5 * var(--nx-u))); }
.tb-btn svg { width: calc(22 * var(--nx-u)); height: calc(22 * var(--nx-u)); }
.icon-btn { font-size: calc(15 * var(--nx-u)); }
.topbar .theme-btn { font-size: calc(17 * var(--nx-u)); }
/* i pezzi di Inside sotto 12px salgono a 12 */
.badge, .sday .others, .pcal-grid .dh, .yfold summary::before { font-size: 12px; }
/* pannello laterale: proporzionato sui monitor enormi, a tutto schermo sul telefono */
.pannello { width: min(var(--pannello-w), 100vw); padding: clamp(18px, 3vw, calc(30 * var(--nx-u))); }
/* popover, suggerimenti e avviso crescono con la scala */
.popover { min-width: calc(180 * var(--nx-u)); max-width: min(calc(320 * var(--nx-u)), 92vw); padding: calc(6 * var(--nx-u)); }
.popover .popover-voce { padding: calc(9 * var(--nx-u)) calc(10 * var(--nx-u)); }
.popover--riquadro { width: min(calc(400 * var(--nx-u)), calc(100vw - 16px)); padding: calc(14 * var(--nx-u)) calc(16 * var(--nx-u)); }
.suggerimento { max-width: min(calc(280 * var(--nx-u)), 90vw); padding: calc(9 * var(--nx-u)) calc(12 * var(--nx-u)); }
.avviso { padding: calc(12 * var(--nx-u)) calc(18 * var(--nx-u)); gap: calc(16 * var(--nx-u)); }
.dati { grid-template-columns: calc(130 * var(--nx-u)) minmax(0, 1fr); }
.dati.stretti { grid-template-columns: calc(110 * var(--nx-u)) minmax(0, 1fr); }
.bacheca { grid-auto-columns: minmax(calc(var(--colonna-min, 260px) + (var(--nx-u) - 1px) * 260), 1fr); gap: var(--nx-sp-3); }
.colonna { padding: calc(10 * var(--nx-u)); gap: var(--nx-sp-2); }
.scheda-mini { padding: calc(10 * var(--nx-u)) calc(12 * var(--nx-u)); }
.head { margin-bottom: calc(26 * var(--nx-u)); }
@media (max-width: 900px) {
  .dati, .dati.stretti { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .pannello { width: 100vw; border-left: 0; padding: 16px 14px max(30px, env(safe-area-inset-bottom)); }
  .bacheca { grid-auto-columns: minmax(82vw, 1fr); }
  .popover .popover-voce { min-height: var(--nx-tocco); }
  .scheda-mini .scheda-mini-meta { font-size: var(--nx-fs-0); }
}

/* ---- regole della direzione artistica (giro 9) ----
   1. numeri grandi proporzionali (tabular solo nelle colonne delle tabelle)
   2. controlli della barra filtri a un'altezza sola, 32px a pillola
   3. bordo sinistro 3px = stato; bordo intero solo per la selezione */
.bal .v, .fl-cifra, .pt-orologio, .pipe-valore, .pj-card .num, .pannello .num, .att-timer-tot, .pipe-col-valore { font-variant-numeric: proportional-nums; letter-spacing: -.01em; }
.tbl td.num { font-variant-numeric: tabular-nums; }
.tbl th.dx, .tbl td.dx { text-align: right; }
.barra .chip, .filtri .chip { padding: calc(6 * var(--nx-u)) calc(12 * var(--nx-u)); min-height: calc(32 * var(--nx-u)); }
.barra select, .barra input[type=search], .barra input[type=text], .barra input[type=date] {
  height: calc(32 * var(--nx-u)); border-radius: 999px; background-color: transparent; font-weight: 700;
  padding: calc(6 * var(--nx-u)) calc(12 * var(--nx-u)); font-size: var(--fs-label);
}
.barra select { padding-right: calc(30 * var(--nx-u)); }
.scheda-mini, .card, .chip, .pill--ghost, .link, .campo-muto, .cal-voce { transition: border-color .12s, color .12s, background-color .12s, opacity .12s; }
/* la bacheca sfuma a destra: si capisce che scorre */
.bacheca { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
@media (min-width: 1600px) { .pj-bacheca, .pipe-bacheca { -webkit-mask-image: none; mask-image: none; } }
/* pannello: il velo entra in dissolvenza, il foglio scivola */
.velo { animation: nx-velo .16s ease-out; }
@keyframes nx-velo { from { opacity: 0; } to { opacity: 1; } }
.pannello { animation: nx-entra .16s cubic-bezier(.2, .8, .2, 1); }
@keyframes nx-entra { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .velo, .pannello { animation: none; } }

/* ---- telefono: filtri in una riga che scorre, tocchi da 44px ---- */
@media (max-width: 767.98px) {
  .barra, .filtri { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; }
  .barra::-webkit-scrollbar, .filtri::-webkit-scrollbar { display: none; }
  .barra > *, .filtri > * { flex: none; }
  .barra .chip, .filtri .chip, .barra select, .barra input[type=search], .barra input[type=text], .barra input[type=date] { min-height: var(--nx-tocco); height: auto; }
  .barra input[type=search] { width: min(240px, 70vw); }
  .barra .togli { margin-left: 0; }
  /* bersagli: la marca, "esci", i link nelle card e nelle righe */
  .brand, .out, .sottolineato, .forte, a.lbl, .scheda-mini-titolo, a.chip, .popover-voce { position: relative; }
  .brand::before, .out::before, .sottolineato::before, a.forte::before, a.lbl::before, a.scheda-mini-titolo::before, a.chip::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .pill { min-height: var(--nx-tocco); }
  .tb-btn, .icon-btn { min-width: var(--nx-tocco); min-height: var(--nx-tocco); }
}
/* il "?" dell'aiuto: 12px nel cerchio da 17 (Inside lo teneva a 10 in 15) */
.hint { width: calc(17 * var(--nx-u)); height: calc(17 * var(--nx-u)); font-size: var(--nx-fs-0); line-height: 1; }
.suggerimento, .hint:hover::after, .hint:focus::after { font-size: var(--fs-label); }
@media (max-width: 767.98px) {
  /* campi e link delle tabelle: almeno 44px al tocco */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select { min-height: var(--nx-tocco); }
  .tbl td a:not(.pill):not(.chip) { display: inline-flex; align-items: center; min-height: var(--nx-tocco); }
}
@media (max-width: 767.98px) {
  /* interruttori e caselle con l'etichetta: tutta la riga si tocca, alta 44px */
  label.switch, label.check { min-height: var(--nx-tocco); align-items: center; }
}