/* Foglio di stile del pannello. Ripreso dal prototipo approvato
   (mockups/dashboard-bozza2.html): il disegno e' quello, qui cambia
   solo da dove arrivano i dati. */
*{box-sizing:border-box}
  :root{
    color-scheme:light;
    --navy:#17224A; --blue:#1B75BC; --cyan:#29ABE2; --copper:#B87333;
    --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#F5F8FC; --surface-3:#EDF1F7;
    --border:#DEE4EE; --border-2:#C9D2E0;
    --text:#17224A; --text-2:#54627E; --muted:#8592AB;
    --accent:#1B75BC; --accent-weak:#EAF2FB;
    --new:#1B75BC; --new-bg:#EAF2FB;
    --read:#5B6B88; --read-bg:#EBEFF5;
    --done:#1F7A54; --done-bg:#E6F4EC;
    --open:#1F7A54; --open-bg:#E6F4EC;
    --closed:#6B7893; --closed-bg:#EBEFF5;
    --shadow:0 1px 2px rgba(20,30,60,.04),0 8px 24px -14px rgba(20,30,60,.18);
    --radius:12px;
    --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  }
  :root[data-theme="dark"], .dark{
    color-scheme:dark;
    --bg:#0C1220; --surface:#141D33; --surface-2:#101827; --surface-3:#1B2743;
    --border:#25324F; --border-2:#33425f;
    --text:#EBEFF7; --text-2:#AEBAD1; --muted:#8492AE;
    --accent:#4C9BE6; --accent-weak:#152743;
    --new:#5BA6EA; --new-bg:#152743;
    --read:#AEBAD1; --read-bg:#1E2942;
    --done:#5CC993; --done-bg:#12291F;
    --open:#5CC993; --open-bg:#12291F;
    --closed:#9AA7C0; --closed-bg:#1E2942;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -16px rgba(0,0,0,.6);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --bg:#0C1220; --surface:#141D33; --surface-2:#101827; --surface-3:#1B2743;
      --border:#25324F; --border-2:#33425f;
      --text:#EBEFF7; --text-2:#AEBAD1; --muted:#8492AE;
      --accent:#4C9BE6; --accent-weak:#152743;
      --new:#5BA6EA; --new-bg:#152743; --read:#AEBAD1; --read-bg:#1E2942;
      --done:#5CC993; --done-bg:#12291F; --open:#5CC993; --open-bg:#12291F;
      --closed:#9AA7C0; --closed-bg:#1E2942;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -16px rgba(0,0,0,.6);
    }
  }
  /* Il colore di fondo va anche su html e body, non solo su .tmapp. Quello che
     si vede quando il contenuto e' piu' corto dello schermo, o quando su iOS si
     tira la pagina oltre il bordo (l'effetto elastico), e' il fondo del
     DOCUMENTO: restando bianco spuntava una banda chiara sotto il pannello
     scuro. `color-scheme` intona anche le parti disegnate dal browser, barra di
     scorrimento compresa. */
  html{background:var(--bg)}
  body{margin:0;background:var(--bg)}
  .tmapp{font-family:var(--font);color:var(--text);background:var(--bg);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}
  .tmapp button{font-family:inherit;color:inherit;cursor:pointer}
  .tmapp :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

  /* ---- brand mark ---- */
  .mk{display:block;transform-origin:50% 50%}
  .mk-spin{animation:tmspin 60s linear infinite}
  @keyframes tmspin{to{transform:rotate(360deg)}}

  /* ---- LOGIN ---- */
  .login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
  /* "Torna al sito" sotto il modulo di accesso: largo quanto la card ma con il
     peso di un pulsante secondario, staccato da Entra da un po' d'aria, cosi'
     non sembra una seconda strada per entrare. Stesso blocco su telefono e su
     schermo grande: la card e' gia' a larghezza unica. */
  .torna{width:100%;margin-top:22px;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    text-decoration:none;color:var(--text-2);font-size:13px}
  .torna:hover{color:var(--accent)}
  .login-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:34px 30px}
  .login-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
  .login-brand b{font-size:15px;letter-spacing:.14em;font-weight:500}
  .login-brand span{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:lowercase;margin-top:3px}
  .login h1{font-size:19px;font-weight:500;margin:0 0 6px}
  .login p.sub{color:var(--text-2);font-size:14px;margin:0 0 22px}
  /* la password del pannello non e' quella dell'anteprima: il gestore di
     password del browser propone la seconda, e si sbaglia */
  .login p.sub.nota-pw{font-size:12.5px;line-height:1.55;color:var(--text-3,#7d8db2);
    border-left:2px solid var(--accent,#29ABE2);padding-left:10px;margin:-14px 0 22px}
  .field{margin-bottom:16px}
  .field label{display:block;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--text-2);margin-bottom:6px}
  .field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:14px;color:var(--text);background:var(--surface-2);border:1px solid var(--border-2);border-radius:9px;padding:11px 13px;transition:border-color .2s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
  .field textarea{resize:vertical;min-height:84px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:500;border-radius:9px;padding:11px 18px;border:1px solid transparent;transition:background .2s,border-color .2s,transform .1s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--navy);color:#fff;width:100%}
  .btn-primary:hover{background:#22345f}
  :root[data-theme="dark"] .btn-primary,.dark .btn-primary{background:var(--accent);color:#08111f}

  /* Fix di specificita': `.tmapp button{color:inherit}` (classe + elemento) batteva
     le regole a sola classe qui sotto. In tema chiaro il testo dei pulsanti pieni
     diventava navy su fondo navy, cioe' invisibile. */
  .tmapp .btn-primary{color:#fff}
  .tmapp .fbtn.on,.tmapp .segbtn.on{color:#fff}
  :root[data-theme="dark"] .tmapp .btn-primary,.dark .tmapp .btn-primary{color:#08111f}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--border-2)}
  .btn-ghost:hover{background:var(--surface-3)}
  .btn-sm{padding:7px 12px;font-size:13px}
  .demo-note{margin-top:18px;font-size:12px;color:var(--muted);text-align:center}

  /* ---- APP SHELL ---- */
  .shell{display:none;min-height:100vh;flex-direction:column}
  .shell.on{display:flex}
  /* `min-width:0` sul marchio e `flex:none` sui comandi: se qualcosa non ci
     sta, a cedere e' il nome — che si accorcia — non la barra, che prima si
     allargava oltre lo schermo e faceva scorrere di lato tutto il pannello. */
  .topbar{display:flex;align-items:center;gap:16px;padding:0 clamp(14px,3vw,28px);height:60px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
  .topbar .brand{display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden}
  .topbar .brand b{white-space:nowrap}
  .topbar > .btn,.topbar > .icon-btn{flex:none}
  .topbar .brand b{font-size:14px;letter-spacing:.12em;font-weight:500}
  .topbar .brand em{font-style:normal;color:var(--muted);font-size:13px;letter-spacing:.02em}
  .topbar .sp{flex:1}
  .chip{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:5px 10px;border-radius:20px;background:var(--copper);color:#fff}
  .icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-2);border-radius:9px;color:var(--text)}
  .icon-btn:hover{background:var(--surface-3)}

  .body{display:flex;flex:1;min-height:0}
  .nav{width:210px;flex:none;background:var(--surface);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:4px}
  .nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--text-2);font-size:14px;font-weight:500;text-decoration:none;border:1px solid transparent}
  .nav a .ico{width:18px;height:18px;flex:none;opacity:.8}
  .nav a:hover{background:var(--surface-3);color:var(--text)}
  .nav a.sel{background:var(--accent-weak);color:var(--accent);border-color:transparent}
  .nav a .badge{margin-left:auto;font-size:11px;font-weight:600;background:var(--new);color:#fff;border-radius:20px;padding:1px 7px;min-width:18px;text-align:center}
  .nav a.sel .badge{background:var(--accent);color:#08111f}
  .nav-foot{margin-top:auto;font-size:11px;color:var(--muted);padding:10px 12px;line-height:1.5}

  /* `viewport-fit=cover` (index.html) fa arrivare la pagina fin sotto la barra
     di Safari e la barretta del gesto: senza questo l'ultima riga dell'elenco
     ci finiva sotto. env() vale 0 dove quelle fasce non esistono. */
  .main{flex:1;min-width:0;overflow:auto;
    padding:clamp(16px,3vw,30px);
    padding-bottom:calc(clamp(16px,3vw,30px) + env(safe-area-inset-bottom,0px))}
  .page{display:none}
  .page.on{display:block}
  .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
  .page-head h2{font-size:20px;font-weight:500;margin:0;letter-spacing:-.01em}
  .page-head p{margin:4px 0 0;color:var(--text-2);font-size:13.5px}

  /* stat tiles */
  /* 140 e non 160: con 160 su un telefono da 360 i quattro riquadri finivano
     uno per riga (servivano 334px e ce n'erano 328, mancavano sei pixel) e la
     panoramica diventava lunghissima. Con 140 stanno a due a due gia' da 320. */
  .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:26px}
  .tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
  .tile .k{font-size:12px;letter-spacing:.02em;color:var(--text-2);font-weight:500}
  .tile .v{font-size:28px;font-weight:500;margin-top:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .tile.accent .v{color:var(--accent)}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
  .card-h{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border)}
  .card-h h3{font-size:15px;font-weight:500;margin:0}
  .card-h .sp{flex:1}

  /* toolbar */
  .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .search{position:relative;flex:1;min-width:180px}
  .search input{width:100%;font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--border-2);border-radius:9px;padding:10px 12px 10px 34px}
  .search input:focus{outline:none;border-color:var(--accent)}
  .search .ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
  .filters{display:flex;gap:6px;flex-wrap:wrap}
  .fbtn{font-size:13px;font-weight:500;padding:8px 13px;border-radius:20px;border:1px solid var(--border-2);background:var(--surface);color:var(--text-2)}
  .fbtn:hover{background:var(--surface-3)}
  .fbtn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
  :root[data-theme="dark"] .fbtn.on,.dark .fbtn.on{background:var(--accent);color:#08111f;border-color:var(--accent)}

  /* message list */
  .list{display:flex;flex-direction:column}
  /* Righe dei partner: il logo vero accanto al nome, cosi' chi accende e spegne
     vede la cosa che sta accendendo e non un elenco di parole. Il riquadro ha
     una misura fissa e il logo ci sta dentro intero, senza ritagli: sono marchi
     altrui. Fondo bianco perche' quasi tutti sono disegnati per stare sul
     bianco, e nel pannello scuro senza fondo sparirebbero. */
  .prow{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:16px;
    padding:12px 18px;border-top:1px solid var(--border)}
  .prow .anteprima{height:52px;background:#fff;border-radius:8px;display:flex;align-items:center;
    justify-content:center;padding:7px 9px}
  .prow .anteprima img{max-width:100%;max-height:100%;object-fit:contain}
  .prow .nome{font-weight:600;font-size:14px}
  .prow .stato{font-size:12px;color:var(--muted);margin-top:2px}
  /* Spento: si sbiadisce il logo, non la riga intera, se no l'interruttore
     sembra disabilitato anche lui e non si capisce che si puo' ancora premere. */
  .prow.spento .anteprima{opacity:.38}
  @media (max-width:560px){
    .prow{grid-template-columns:74px minmax(0,1fr) auto;gap:12px;padding:12px 14px}
    .prow .anteprima{height:42px}
  }
  .row{display:grid;grid-template-columns:10px 1.1fr 1.4fr auto;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--border);cursor:pointer;text-align:left;background:transparent;border-left:0;border-right:0;border-bottom:0;width:100%;color:var(--text)}
  .row:first-child{border-top:0}
  .row:hover{background:var(--surface-2)}
  .row .dot{width:9px;height:9px;border-radius:50%;background:var(--border-2)}
  .row.st-nuovo .dot{background:var(--new)}
  .row .who{min-width:0}
  .row .who b{font-weight:500;font-size:14px;color:var(--text)}
  .row.st-nuovo .who b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--new);margin-left:7px;vertical-align:middle}
  .row .who span{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row .msg{font-size:13.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* pastiglia e data affiancate, incollate a destra. `justify-content:flex-end`
     e non `text-align`: la pastiglia e' un flex item, l'allineamento del testo
     non la sposterebbe. */
  .row .meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
  .row .meta .date{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .pill{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 10px;border-radius:20px;line-height:1.4;white-space:nowrap}
  .pill.nuovo{color:var(--new);background:var(--new-bg)}
  .pill.letto{color:var(--read);background:var(--read-bg)}
  .pill.gestito{color:var(--done);background:var(--done-bg)}
  .pill.aperta{color:var(--open);background:var(--open-bg)}
  .pill.chiusa{color:var(--closed);background:var(--closed-bg)}
  .empty{padding:40px 18px;text-align:center;color:var(--muted);font-size:14px}

  /* positions */
  .pos{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr auto;gap:16px;align-items:center;padding:15px 18px;border-top:1px solid var(--border)}
  .pos:first-child{border-top:0}
  .pos .t b{font-weight:500;font-size:14.5px;display:block;color:var(--text)}
  .pos .t span{font-size:12.5px;color:var(--muted)}
  .pos .c{font-size:13px;color:var(--text-2)}
  .pos-act{display:flex;align-items:center;gap:16px;justify-content:flex-end}
  /* toggle switch */
  .sw{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
  .sw input{position:absolute;opacity:0;width:0;height:0}
  .sw .track{width:40px;height:23px;border-radius:20px;background:var(--closed-bg);border:1px solid var(--border-2);flex:none;position:relative;transition:background .2s,border-color .2s}
  .sw .knob{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.28);transition:transform .2s}
  .sw input:checked + .track{background:var(--open);border-color:var(--open)}
  .sw input:checked + .track .knob{transform:translateX(17px)}
  /* la casella vera e' larga e alta zero: il contorno di fuoco cadeva su un
     punto invisibile e chi naviga da tastiera non vedeva dov'era. Lo disegniamo
     sul binario, che e' il pezzo che si vede. */
  .sw input:focus-visible{outline:none}
  .sw input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}
  .sw .pill{min-width:66px}

  /* drawer */
  .scrim{position:fixed;inset:0;background:rgba(12,18,32,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
  /* domanda dentro la pagina: sta sopra i cassetti (41) e sopra l'avviso (60) */
  .modale{position:fixed;inset:0;height:100dvh;z-index:70;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,18,32,.62)}
  .modale[hidden]{display:none}
  .modale-c{background:var(--surface);border:1px solid var(--border);border-radius:14px;
    box-shadow:0 30px 70px -30px rgba(0,0,0,.6);width:min(460px,100%);padding:22px 22px 18px}
  .modale-c h3{font-size:16px;font-weight:600;margin:0 0 8px}
  .modale-c p{font-size:14px;line-height:1.6;color:var(--text-2);margin:0;white-space:pre-line}
  .modale-el{margin-top:12px;max-height:180px;overflow:auto;border-left:2px solid var(--accent);
    padding:8px 0 8px 12px;font-size:13px;line-height:1.7;color:var(--text-2);white-space:pre-wrap}
  .modale-c input#mdVal{width:100%;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:14px;letter-spacing:.02em;padding:10px 12px;border-radius:9px;
    border:1px solid var(--border-2);background:var(--surface-2);color:var(--text)}
  .modale-f{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
  .modale-f .btn{width:auto}
  .modale-f .btn-pericolo{background:#8a2f2f;color:#fff;border-color:transparent}
  .scrim.on{opacity:1;pointer-events:auto}
  /* `dvh` e non `vh`: su iOS 100vh comprende anche la fascia occupata dalla
     barra del browser, quindi il fondo del cassetto — dove stanno Elimina,
     Annulla e Salva — finiva sotto quella barra e non si riusciva a premerlo.
     `dvh` misura l'altezza VERA disponibile e si aggiorna quando la barra si
     ritrae. Il 100vh resta come ripiego per i browser che non conoscono dvh. */
  .drawer{position:fixed;top:0;right:0;height:100vh;height:100dvh;width:min(460px,100%);background:var(--surface);border-left:1px solid var(--border);box-shadow:-20px 0 50px -30px rgba(0,0,0,.5);transform:translateX(100%);transition:transform .24s cubic-bezier(.3,.8,.3,1);z-index:41;display:flex;flex-direction:column}
  .drawer.on{transform:none}
  /* i moduli bilingui hanno due colonne affiancate: a 460px l'inglese usciva fuori */
  #posDrawer,#credDrawer{width:min(760px,100%)}
  .drawer-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
  .drawer-h h3{font-size:16px;font-weight:500;margin:0}
  .drawer-h .sp{flex:1}
  .drawer-b{padding:20px;overflow:auto;flex:1}
  /* stessa ragione della .main: i pulsanti non devono finire sotto la barra */
  .drawer-f{padding:14px 20px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:flex;gap:10px;flex-wrap:wrap}
  .kv{display:flex;flex-direction:column;gap:3px;margin-bottom:16px}
  .kv .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .kv .v{font-size:14.5px;color:var(--text)}
  .kv .v a{color:var(--accent);text-decoration:none}
  .kv .v a:hover{text-decoration:underline}
  .msgbox{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;font-size:14px;color:var(--text);line-height:1.6;white-space:pre-wrap}
  /* segmented state control */
  .seg{display:inline-flex;width:100%;border:1px solid var(--border-2);border-radius:10px;overflow:hidden}
  .segbtn{flex:1;padding:10px 8px;font-size:13px;font-weight:500;background:transparent;color:var(--text-2);border:0;border-right:1px solid var(--border)}
  .segbtn:last-child{border-right:0}
  .segbtn:hover{background:var(--surface-3)}
  .segbtn.on{background:var(--navy);color:#fff}
  :root[data-theme="dark"] .segbtn.on,.dark .segbtn.on{background:var(--accent);color:#08111f}

  /* ---------- traduzioni mancanti ---------- */
  /* segnale forte: questa voce non e' ancora tradotta, sul sito inglese esce vuota */
  .warn{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;letter-spacing:.04em;
    color:#8a5a12;background:#fdf1dc;border:1px solid #f0d9ad;border-radius:20px;padding:2px 9px;white-space:nowrap}
  :root[data-theme="dark"] .warn,.dark .warn{color:#f0c27a;background:rgba(184,115,51,.16);border-color:rgba(184,115,51,.4)}
  .warn::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

  /* ---------- certificazioni ---------- */
  .cred{display:grid;grid-template-columns:78px 1fr 190px auto;gap:14px;align-items:center;
    padding:13px 16px;border-top:1px solid var(--border);text-align:left}
  .cred:first-child{border-top:0}
  .cred .sig{font-size:17px;font-weight:600;color:var(--accent);letter-spacing:-.01em}
  .cred .t b{display:block;font-size:14px;font-weight:500}
  .cred .t > span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
  .cred .doc{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
  .cred .doc.no{color:var(--muted);font-style:italic}
  .cred .act{display:flex;align-items:center;gap:10px;justify-content:flex-end}
  .grp-h{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);
    border-top:1px solid var(--border);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
  .grp-h:first-child{border-top:0}
  .grp-h .n{margin-left:auto;font-weight:500;letter-spacing:.1em;color:var(--muted)}

  /* ---------- campi bilingui ---------- */
  .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  /* Campi che restano modificabili ma che sul sito non finiscono: la stima RAL
     con l'interruttore abbassato. Sbiaditi, non disabilitati — cosi' si puo'
     preparare il testo prima di accenderla. */
  .f2.spento{opacity:.5}
  .lng{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.12em;
    color:var(--muted);margin-bottom:5px}
  .lng i{font-style:normal;padding:1px 6px;border-radius:4px;background:var(--surface-3);color:var(--text-2)}
  .sep{margin:20px 0 14px;padding-top:14px;border-top:1px solid var(--border);
    font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .hint{font-size:12px;color:var(--muted);line-height:1.5;margin-top:-6px;margin-bottom:14px}
  .filedrop{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--border-2);
    border-radius:10px;font-size:13px;color:var(--text-2)}
  .filedrop b{font-weight:500;color:var(--text)}

  /* Sotto i 400px la barra in alto non ci sta comunque: hamburger, marchio,
     IT/EN, Pubblica, tema. Sparisce "· pannello", che e' l'unica parte
     puramente decorativa — il nome del pannello lo dice gia' il titolo della
     scheda del browser. Sotto i 360 va via anche la sigla e resta il solo
     monogramma, che e' anche il collegamento alla panoramica. */
  /* Sotto i 400px la barra e' al limite: si stringono gli spazi da 16 a 10 (30px
     recuperati sui cinque intervalli) e sparisce "· pannello", l'unica parte
     puramente decorativa — il nome del pannello lo dice gia' il titolo della
     scheda. Cosi' la sigla T&M resta anche sui telefoni da 360, che sono tanti. */
  /* Con "· pannello" la barra chiede 432px: su un iPhone da 430 sfora di due
     pixel, e il nome andava a capo sotto la sigla. Sui telefoni resta ☰ T&M
     Pubblica, tema, Esci — che il pannello sia il pannello lo dice gia' il
     titolo della scheda del browser. La soglia e' 560 e non 430 per coprire
     anche il telefono girato di lato. */
  @media (max-width:560px){ .brand em{display:none} }
  @media (max-width:400px){ .topbar{gap:10px} .topbar .brand{gap:8px} }
  @media (max-width:359px){ .brand b{display:none} }

  @media (max-width:820px){
    /* Si nasconde il CONTENITORE, non solo il documento dentro: prima spariva
       il testo ma il suo <div> restava a occupare la terza colonna, e le
       azioni finivano a capo sotto la sigla. Le colonne qui sono tre e i
       figli visibili devono essere tre. */
    .cred{grid-template-columns:60px minmax(0,1fr);gap:8px 10px}
    .cred .cdoc{display:none}
    /* Le azioni vanno su una riga loro, allineate a destra. Tenendole in una
       terza colonna il titolo si riduceva a 115px su un telefono da 390 (a
       320 addirittura a 45) e andava a capo tre volte: la riga era comunque
       alta due righe, ma illeggibile. Cosi' il titolo prende tutta la
       larghezza meno la sigla, e il pulsante resta grande abbastanza da
       centrarlo col pollice. */
    .cred .act{grid-column:1 / -1;justify-content:flex-end}
    .f2{grid-template-columns:1fr}
    .nav{position:fixed;left:0;top:60px;bottom:0;z-index:30;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
    .nav.on{transform:none}
    /* Velo sul contenuto quando il menu e' aperto: si vede che il menu ha la
       precedenza, e il tocco finisce sul velo invece che sul pulsante sotto.
       E' un pseudo-elemento, quindi il bersaglio del clic resta .main: basta
       un ascoltatore li' per chiudere (vedi app.js). */
    .main{position:relative}
    .nav.on ~ .main::after{content:"";position:absolute;inset:0;background:rgba(12,18,32,.5);z-index:5}
    .icon-btn.menu{display:inline-flex}
    .row{grid-template-columns:10px 1fr auto}
    .row .msg{display:none}
    /* sul telefono la colonna di destra e' stretta: pastiglia sopra, data
       sotto, invece di spingere il nome fuori dalla sua */
    .row .meta{flex-direction:column;align-items:flex-end;gap:4px}
    .pos{grid-template-columns:1fr auto}
    .pos .c{display:none}
  }
  @media (min-width:821px){ .icon-btn.menu{display:none} }
  @media (prefers-reduced-motion: reduce){ .tmapp *{animation:none!important;transition:none!important} }

/* ---------- avviso a scomparsa (aggiunto nella versione collegata) ---------- */
.avviso{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  max-width:min(560px,92vw);padding:13px 20px;border-radius:10px;font-size:13.5px;line-height:1.5;
  background:var(--navy);color:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.avviso[hidden]{display:none}
/* `.login{display:flex}` (regola d'autore) batte il display:none che il browser
   applica all'attributo hidden: senza questa riga la schermata di accesso resta
   visibile sopra il pannello anche dopo essere entrati. */
.login[hidden]{display:none}
.avviso.ko{background:#8a2f2f}
:root[data-theme="dark"] .avviso,.dark .avviso{background:var(--surface-3);color:var(--text);border:1px solid var(--border-2)}
:root[data-theme="dark"] .avviso.ko,.dark .avviso.ko{background:#4a1f22;border-color:#7a3438;color:#ffd9d9}

/* ---------- chi è entrato (barra in alto) ---------- */
.chiEntrato{font-size:12.5px;color:var(--text-2);white-space:nowrap;margin-right:4px}
@media (max-width:820px){ .chiEntrato{display:none} }