/* Quanova Task Hub — minimalismo alla Apple, con l'accento di Quanova.

   Le regole vengono dalle Human Interface Guidelines (raccolte nella
   knowledge base apple-design): gerarchia fatta di peso e dimensione del
   testo, non di maiuscole e spaziature; superfici a schede raggruppate su
   un fondo neutro; il vetro solo per la navigazione, mai sul contenuto;
   il colore del marchio con parsimonia, sulle azioni primarie e sul
   progresso; bersagli da almeno 44 px dove si tocca.

   Il registro di prima — mono maiuscolo spaziato, da banco di laboratorio —
   resta solo dove serve davvero un carattere a spaziatura fissa: codici,
   identificativi, comandi da copiare. */

:root {
  /* --- scala di fondo, neutri profondi con deriva bluastra --- */
  /* Grigi neutri, quelli dei fondi di sistema: il nero del fondo, il
     #1c1c1e delle schede, il #2c2c2e degli elementi dentro le schede. La
     deriva bluastra di prima era la firma del banco da laboratorio. */
  --ink-950: #000000;
  --ink-900: #0e0e10;
  --ink-850: #1c1c1e;
  --ink-800: #2c2c2e;
  --ink-700: #3a3a3c;
  --ink-600: #48484a;
  --ink-100: #f5f5f7;

  --card: #1c1c1e;
  --card-2: #2c2c2e;
  --sep: rgb(84 84 88 / 0.55);

  /* Il vetro della navigazione: barra in alto, barra delle schede, «+».
     Solo lì — sul contenuto il vetro confonde invece di separare. */
  --glass: rgb(28 28 30 / 0.66);
  --glass-line: rgb(255 255 255 / 0.10);
  --glass-shine: rgb(255 255 255 / 0.12);
  --shadow-float: 0 12px 32px rgb(0 0 0 / 0.5);

  /* Gli anelli dell'avanzamento: le tue, il team, in tempo. Tre tinte
     validate insieme, tutte le coppie: ΔE minimo 9.4 per la deuteranopia. */
  --ring-1: var(--signal);
  --ring-2: #3987e5;
  --ring-3: #d95926;

  /* Il fondo dei controlli segmentati e dei campi, e la voce scelta. */
  --seg-bg: rgb(118 118 128 / 0.24);
  --seg-on: #636366;

  /* I tondi pieni dei riquadri: in scuro gli stessi rosso e ambra di stato,
     con il glifo scuro sopra; in chiaro serve un tono più acceso del testo
     ambra, che per essere leggibile è quasi marrone. */
  --tile-err: var(--signal-err);
  --tile-warn: var(--signal-warn);
  --on-tile: #000000;

  /* --- l'accento, uno solo: azione primaria e scelta attiva ---
     Bianco caldo al neon. In scuro è il tubo acceso: un crema caldo con un
     alone; in chiaro (più sotto) i pulsanti diventano un antracite caldo con
     la scritta in quel bianco caldo, come un'insegna al neon su un muro. Il
     verde di prima ricordava un ospedale. */
  --signal: #ffe7c4;
  --signal-rgb: 255 231 196;
  --glow: 0 0 0 1px rgb(255 236 210 / 0.55), 0 0 22px rgb(255 206 150 / 0.45);
  --glow-label: none;
  --glow-text: 0 0 12px rgb(255 206 150 / 0.55);
  --glow-icon: drop-shadow(0 0 6px rgb(255 206 150 / 0.6));

  /* Gli stati hanno colori propri, non quello dell'accento: «in corso» era
     verde come i pulsanti, e cambiando l'accento sarebbe diventato bianco.
     Validati insieme, tutte le coppie: ΔE minimo per i daltonismi 14.6 in
     scuro, 11.3 in chiaro. E non sono mai solo colore: ognuno ha la sua
     forma nel cerchio (vuoto, metà pieno, con il trattino, pieno). */
  --st-todo: #aeaeb2;
  --st-doing: #4c9bff;
  --st-done: var(--signal);
  --st-blocked: #e5484d;
  --err-rgb: 239 90 111;
  --backdrop: rgb(6 7 10 / 0.7);
  --signal-dim: rgb(var(--signal-rgb) / 0.5);
  --signal-warn: #f5b14a;

  --prio-0: #f5b14a;
  --prio-1: #c98d3a;
  --prio-2: #8f6529;
  --prio-3: #5b4119;
  --signal-err: #ef5a6f;
  --on-signal: #1d1408;

  /* --- l'inchiostro sovrapposto, a opacità --- */
  --over: 255 255 255;
  --surface: rgb(var(--over) / 0.03);
  --surface-hover: rgb(var(--over) / 0.05);
  --surface-strong: rgb(var(--over) / 0.08);
  --line: rgb(var(--over) / 0.06);
  --line-strong: rgb(var(--over) / 0.10);
  --line-hover: rgb(var(--over) / 0.15);
  --hair: rgb(var(--over) / 0.04);

  --text: rgb(var(--over) / 1);
  --text-strong: rgb(var(--over) / 0.85);
  --text-body: rgb(var(--over) / 0.65);
  --text-2: rgb(var(--over) / 0.45);
  --text-3: rgb(var(--over) / 0.40);
  --label: rgb(var(--over) / 0.30);
  --faint: rgb(var(--over) / 0.20);

  --bg: var(--ink-950);
  --panel: #000;
  --scroll-track: var(--ink-900);
  --scroll-thumb: var(--ink-700);
  --scroll-thumb-hover: var(--ink-600);
  --select-bg: var(--signal);
  --select-fg: var(--on-signal);

  /* --- tipografia: due registri distinti ---
     mono maiuscolo spaziato per i dati, sans per le frasi. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* I numeri grandi in tondo, come negli anelli di Fitness. Su chi non ha il
     font di sistema arrotondato si torna al sans, senza perdere niente. */
  --rounded: ui-rounded, "SF Pro Rounded", var(--sans);

  /* La scala dei testi di sistema, adattata allo schermo: nota 12, etichetta
     13, titolo 15, corpo 15 su desktop e 17 sul telefono, titolo grande 34. */
  --fs-note: 12px;
  --fs-label: 13px;
  --fs-title: 15px;
  --fs-body: 15px;
  --fs-headline: 17px;
  --fs-title2: 22px;
  --fs-large: 34px;
  --tr-label: normal;
  --tr-title: normal;

  --r: 10px;
  --r-card: 20px;

  color-scheme: dark;
}

/* Il tema chiaro non esiste nel sistema di riferimento: è lo stesso
   impianto specchiato. Cambia l'inchiostro sovrapposto, da bianco a
   nero, e l'accento scende di luminosità mantenendo la tonalità — il
   menta originale su fondo pallido avrebbe un contrasto sotto 1.5:1.

   Quale dei due valga lo decide data-theme sulla radice, messo da uno
   script nella <head> prima del primo disegno e poi da src/tema.js: qui
   non c'è una media query perché ce ne sarebbero due copie da tenere
   uguali, e «sistema» lo risolve lo script. */
:root[data-theme="light"] {
  --ink-950: #f2f2f7;
  --ink-900: #e5e5ea;
  --ink-850: #ffffff;
  --ink-800: #f2f2f7;
  --ink-700: #d1d1d6;
  --ink-600: #c7c7cc;
  --ink-100: #000000;

  --card: #ffffff;
  --card-2: #f2f2f7;
  --sep: rgb(60 60 67 / 0.18);

  --glass: rgb(255 255 255 / 0.72);
  --glass-line: rgb(0 0 0 / 0.08);
  --glass-shine: rgb(255 255 255 / 0.9);
  --shadow-float: 0 12px 32px rgb(0 0 0 / 0.12);

  --ring-1: var(--signal);
  --ring-2: #2a78d6;
  --ring-3: #eb6834;

  --seg-bg: rgb(118 118 128 / 0.12);
  --seg-on: #ffffff;

  --tile-err: #e5484d;
  --tile-warn: #e08a0b;
  --on-tile: #ffffff;

  --signal: #2a2119;
  --signal-rgb: 42 33 25;
  --signal-dim: rgb(var(--signal-rgb) / 0.45);
  --glow: 0 6px 18px rgb(42 33 25 / 0.22);
  --glow-label: 0 0 10px rgb(255 206 150 / 0.75);
  --glow-text: none;
  --glow-icon: none;

  --st-todo: #8e8e93;
  --st-doing: #1f6fd6;
  --st-done: var(--signal);
  --st-blocked: #c4314b;
  --signal-warn: #8a5a0d;
  --signal-err: #b62f42;
  --err-rgb: 182 47 66;
  --on-signal: #ffe7c4;
  --backdrop: rgb(11 13 18 / 0.45);

  --prio-0: #8a5a0d;
  --prio-1: #b8791f;
  --prio-2: #d9a24a;
  --prio-3: #efcf8f;

  --over: 11 13 18;
  --surface: rgb(var(--over) / 0.035);
  --surface-hover: rgb(var(--over) / 0.06);
  --surface-strong: rgb(var(--over) / 0.09);
  --line: rgb(var(--over) / 0.10);
  --line-strong: rgb(var(--over) / 0.16);
  --line-hover: rgb(var(--over) / 0.26);
  --hair: rgb(var(--over) / 0.07);

  --text-strong: rgb(var(--over) / 0.88);
  --text-body: rgb(var(--over) / 0.70);
  --text-2: rgb(var(--over) / 0.55);
  --text-3: rgb(var(--over) / 0.48);
  --label: rgb(var(--over) / 0.42);
  --faint: rgb(var(--over) / 0.28);

  --panel: #ffffff;
  --select-bg: #ffdcae;
  --select-fg: var(--ink-100);

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-100);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* iOS: niente rimbalzo, niente lampo grigio al tocco, niente auto-zoom
     del testo — l'app deve sembrare nativa, non una pagina scrollabile. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; }

button, select, input, textarea { font: inherit; color: inherit; }

::selection { background: var(--select-bg); color: var(--select-fg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 5px;
  border: 2px solid var(--scroll-track);
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

:focus-visible {
  outline: 1px solid var(--signal);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* Il registro da strumento: ogni etichetta, intestazione e dato. */
.mono, .rail-title, .tmeta, .win, .frac, .state, .tnum,
.filters label, .field label, .noterow > span, .rwhen, .stat .k {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
}

/* --- marchio -------------------------------------------------------------
   Un file solo, nero su trasparente, usato come maschera: il colore arriva
   dal tema. In fase di build il percorso diventa un data URI. */

.logo {
  display: block;
  width: 138px;
  height: 19px;
  background-color: var(--text);
  -webkit-mask-image: url(../assets/quanova.png);
  mask-image: url(../assets/quanova.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.logo-lg { width: 176px; height: 25px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- accesso ------------------------------------------------------------ */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.gatebox {
  width: min(360px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px 20px;
}

.gatesub {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  color: var(--label);
  margin: 14px 0 20px;
}

.gatebox .field { margin-top: 12px; }

/* 16px non è una scelta estetica: sotto questa soglia iOS ingrandisce la
   pagina appena tocchi il campo, e questa è l'unica schermata dove si
   digita davvero da telefono. */
.gatebox .field input { font-size: 16px; padding: 8px 9px; }

.gatebox .primary { width: 100%; margin-top: 20px; }
.gatebox .primary:disabled { opacity: .5; cursor: progress; }

.gateerr {
  margin: 14px 0 0;
  padding: 6px 9px;
  border: 1px solid rgb(var(--err-rgb) / 0.4);
  border-radius: var(--r);
  color: var(--signal-err);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  font-variant-numeric: tabular-nums;
}

.gatenote {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--label);
  font-size: var(--fs-note);
  line-height: 1.6;
}

/* --- barra in alto ------------------------------------------------------ */

.top {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.top-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand p {
  margin: 0;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  color: var(--label);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
}

.top-stats { display: flex; align-items: center; gap: 18px; }

.stat { display: flex; align-items: baseline; gap: 6px; }

.stat .k {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--label);
  white-space: nowrap;
}

.stat .v {
  font-family: var(--sans);
  font-size: var(--fs-title);
  letter-spacing: normal;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.sync {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  color: var(--text-3);
}

/* Un cerchio da 6px al posto di qualunque icona di stato. */
.dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--label);
  flex: none;
}

.dot.live { background: var(--signal); }
.dot.local { background: var(--signal-warn); }

.top-actions { display: flex; gap: 4px; flex-wrap: wrap; }

button.primary, button.ghost {
  padding: 5px 10px;
  border-radius: var(--r);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-body);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}

button.ghost:hover { border-color: var(--line-hover); color: var(--text); }

button.primary {
  border-color: rgb(var(--signal-rgb) / 0.4);
  background: rgb(var(--signal-rgb) / 0.10);
  color: var(--signal);
}

button.primary:hover { background: rgb(var(--signal-rgb) / 0.16); }

button.ghost.danger { color: var(--text-3); }
button.ghost.danger:hover { color: var(--signal-err); border-color: rgb(var(--err-rgb) / 0.4); }

button.wide { width: 100%; }

/* --- impianto ----------------------------------------------------------- */

.top-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.views { display: flex; gap: 2px; margin-left: 6px; }

.vtab {
  padding: 5px 11px;
  border: 0;
  background: none;
  border-radius: var(--r);
  color: var(--text-3);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}

.vtab:hover { color: var(--text-body); background: var(--surface); }
.vtab.on { color: var(--text); background: var(--surface-strong); }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.usermenu { position: relative; }

.avatar-btn {
  border: 1px solid var(--line-strong);
  cursor: pointer;
  padding: 0;
  width: 26px;
  height: 26px;
}

.avatar-btn:hover { border-color: var(--line-hover); }
.avatar-btn[aria-expanded="true"] { border-color: var(--signal); color: var(--signal); }

.usercard {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  /* Adesso ci sta tutto il contorno dell'app: su uno schermo basso deve
     poter scorrere, invece di uscire dal fondo con «Esci» irraggiungibile. */
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--ink-850);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.usercard .ghost { margin-top: 10px; }

/* Le sezioni del menu: una parola sopra ogni gruppo di voci, come le
   etichette dei filtri. Dicono cosa c'è sotto senza doverlo leggere tutto. */
.mlabel {
  display: block;
  margin: 10px 0 2px;
  padding: 8px 9px 0;
  border-top: 1px solid var(--hair);
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
}

.menuitem {
  text-align: left;
  padding: 6px 9px;
  border: 0;
  background: none;
  border-radius: var(--r);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  cursor: pointer;
}

.menuitem:hover { background: var(--surface-strong); color: var(--text); }
.menuitem.danger { color: var(--text-3); }
.menuitem.danger:hover { color: var(--signal-err); }

/* --- barra dei filtri --------------------------------------------------- */

.toolbar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
}

.toolbar[data-slim="true"] .filters { display: none; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }

/* Il riquadro si stringe su quello che contiene: una pista che si allarga
   a riempire lo spazio disponibile mette l'indicatore in mezzo al vuoto. */
.fbox { min-width: 0; max-width: 100%; position: relative; }

/* Il bordo sfuma quando la pista continua oltre: il taglio netto sembra la
   fine dell'elenco, la sfumatura dice che c'è dell'altro. */
.fbox.scorre::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, transparent, var(--bg) 78%);
  pointer-events: none;
}

.flabel {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
  margin-bottom: 4px;
}

/* La pista: un contenitore solo, dentro cui le voci stanno in fila. Non va
   a capo — l'indicatore che scorre si muove su un asse, e su due righe
   salterebbe — quindi se non ci sta, scorre. */
.frow {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}

.frow::-webkit-scrollbar { display: none; }

/* L'indicatore. Sta sotto al testo e non intercetta i clic: è un riflesso
   della scelta, non un bersaglio. */
.fmark {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(var(--signal-rgb) / 0.22), rgb(var(--signal-rgb) / 0.10));
  box-shadow:
    inset 0 0 0 1px rgb(var(--signal-rgb) / 0.55),
    inset 0 1px 0 rgb(255 255 255 / 0.10),
    0 0 20px -4px rgb(var(--signal-rgb) / 0.55);
  opacity: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.34, 1.25, .64, 1),
              width .34s cubic-bezier(.34, 1.25, .64, 1),
              opacity .2s;
}

/* Il pallino di stato dentro la pastiglia: piccolo, e non si allarga. */
.chip .pip { align-self: center; margin-right: 1px; }

.chip {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--text-3);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: color .18s;
}

.chip:hover { color: var(--text-body); }
.chip .n { color: var(--faint); font-variant-numeric: tabular-nums; transition: color .18s; }

/* La voce scelta non porta un fondo suo: quello è dell'indicatore, che è
   uno solo e si sposta. Qui cambia solo l'inchiostro. */
.chip.on { color: var(--signal); text-shadow: var(--glow-text); }
.chip.on .n { color: var(--signal); opacity: .75; }

/* Un conteggio a zero resta leggibile ma smette di invitare: la voce c'è,
   e che sia vuota è un'informazione. */
.chip .n:empty { display: none; }

.tools { display: flex; align-items: center; gap: 6px; }

.tools input[type="search"] {
  width: 150px;
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
}

.tools input::placeholder { color: var(--faint); }

main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 22px 20px 70px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--hair);
}

.panel-head h2 {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  color: var(--text-strong);
}

.panel-hint {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
}

/* --- La lingua degli stati ------------------------------------------------
   Lo stesso cerchio dappertutto, in quattro forme: vuoto (da fare), mezzo
   pieno (in corso), col trattino (bloccata), pieno (fatta). Il colore aiuta
   ma non basta da solo: a 6 px i quattro punti di prima non si
   distinguevano, e chi non vede bene i colori li confondeva comunque.
   Qui la forma dice lo stato anche in bianco e nero. --c è il colore dello
   stato; ogni oggetto che usa questa lingua lo legge da lì. */
[data-s] { --c: var(--st-todo); }
[data-s="doing"] { --c: var(--st-doing); }
[data-s="blocked"] { --c: var(--st-blocked); }
[data-s="done"] { --c: var(--st-done); }

.pip {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: none;
  border: 1.5px solid var(--c, var(--st-todo));
  background: none;
}
.pip[data-s="doing"] { background: conic-gradient(var(--c) 0 50%, transparent 0); }
.pip[data-s="blocked"] { background: linear-gradient(var(--c), var(--c)) center / 100% 1.5px no-repeat; }
.pip[data-s="done"] { background: var(--c); }

/* --- gruppi sulla board -------------------------------------------------- */

.group { margin-bottom: 28px; scroll-margin-top: 16px; }

.group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

/* Il numero progressivo davanti al titolo: dice quante sezioni ci sono e
   in che ordine si attraversano. */
.group-head .gnum {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.group-head h2 {
  font-family: var(--sans);
  font-size: var(--fs-title);
  letter-spacing: normal;
  color: var(--text);
}

.group-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.win {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--label);
}

/* Una riga sola: il testo intero resta nel suggerimento del cursore.
   Sei paragrafi di contesto sono il blocco di testo più grosso della
   lista, e nessuno li rilegge dopo la prima volta. */
.group-goal {
  color: var(--text-2);
  font-size: 12px;
  margin: 0 0 10px;
  max-width: 80ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.tasks { display: flex; flex-direction: column; gap: 2px; }

/* --- task ---------------------------------------------------------------- */

.task {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.task:hover { border-color: var(--line-strong); }
.task[data-status="done"] .tt-text { color: var(--text-3); text-decoration: line-through; }
.task.open { background: var(--surface-hover); border-color: var(--line-strong); }

.row { display: flex; align-items: stretch; gap: 4px; padding-right: 6px; }

/* La priorità: un colore al posto di una parola. Solo l'urgente è
   accesa, le altre scendono di peso. */
.stripe { width: 2px; flex: none; border-radius: 1px; }
.stripe[data-p="0"] { background: var(--signal-warn); }
.stripe[data-p="1"] { background: rgb(var(--over) / 0.28); }
.stripe[data-p="2"] { background: rgb(var(--over) / 0.12); }
.stripe[data-p="3"] { background: transparent; }

.rowbtn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 4px 7px 8px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.rowbtn .tt-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* L'avanzamento come barra: dice la stessa cosa di «3/7» in un colpo
   d'occhio e con due caratteri in meno da leggere. */
/* L'avanzamento è una quantità, non uno stato: resta neutro. Trenta barrette
   colorate su trenta righe diluirebbero l'accento fino a spegnerlo. */
.sbar { width: 30px; height: 2px; background: var(--surface-strong); flex: none; }
.sbar > i { display: block; height: 100%; background: rgb(var(--over) / 0.35); }

/* A riposo la riga porta il minimo: striscia, punto, titolo. Scadenza,
   avanzamento, assegnatario e comandi si rivelano passandoci sopra.
   Si nascondono con l'opacità e non con display, così la riga non si
   riassesta sotto il cursore.

   Due eccezioni volute:
   - una scadenza passata o imminente non si nasconde mai: è il motivo per
     cui stai guardando la lista;
   - dove non esiste il passaggio del mouse — telefoni e tablet — resta
     tutto visibile, altrimenti quelle informazioni sarebbero irraggiungibili. */
.rowtools, .row .reveal { transition: opacity .12s; }

@media (hover: hover) and (pointer: fine) {
  .rowtools, .row .reveal { opacity: 0; }

  .task:hover .rowtools, .task:focus-within .rowtools, .task.open .rowtools,
  .task:hover .reveal, .task:focus-within .reveal, .task.open .reveal { opacity: 1; }

  .row .due.reveal[data-d="overdue"],
  .row .due.reveal[data-d="soon"] { opacity: 1; }
}

/* Il numero della riga dentro il gruppo. */
.tnum {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--faint);
  flex: none;
}

.tmain { min-width: 0; flex: 1; }

/* Il titolo è il contenuto, non strumentazione: resta sans e leggibile.
   È l'unica deroga al registro mono maiuscolo, ed è deliberata. */
.tt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.tt-text {
  font-size: var(--fs-body);
  color: var(--text-strong);
  line-height: 1.35;
}

/* Un gradino sopra le etichette pure: questa riga porta informazione
   (priorità, effort, dipendenze, chi e quando), non è un nome di campo. */
.tmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: var(--fs-note);
  letter-spacing: 0.14em;
  color: var(--text-3);
  margin-top: 1px;
}

.tag {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--text-3);
  flex: none;
}

/* Ogni task porta la sua priorità. Solo la più alta è colorata: le altre
   scendono di opacità, così la gerarchia si legge senza spendere
   l'accento su quattro livelli. */
.tag.prio[data-p="0"] { color: var(--signal-warn); }
.tag.prio[data-p="1"] { color: var(--text-3); }
.tag.prio[data-p="2"] { color: var(--label); }
.tag.prio[data-p="3"] { color: var(--faint); }

.tright { display: flex; align-items: center; gap: 10px; flex: none; }

.frac {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--label);
}

/* La scadenza si accende solo quando conta: una data lontana è
   un'informazione, una scaduta è una decisione. */
.due {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  color: var(--label);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.due[data-d="soon"] { color: var(--signal-warn); }
.due[data-d="overdue"] { color: var(--signal-err); }
.due[data-d="done"] { color: var(--faint); text-decoration: line-through; }

.avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 8.5px;
  letter-spacing: normal;
  background: var(--surface-strong);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.avatar.unknown { color: var(--signal-err); border: 1px solid rgb(var(--err-rgb) / 0.3); background: none; }

.chev { color: var(--faint); font-size: 8px; transition: transform .15s ease; }
.task.open .chev { transform: rotate(90deg); }

.rowtools { display: flex; gap: 1px; flex: none; align-items: center; }

.ibtn {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  transition: color .15s, background-color .15s;
}

.ibtn:hover { background: var(--surface-strong); color: var(--text-body); }
.ibtn.danger:hover { color: var(--signal-err); }

.dmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}

.dmeta .mv {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--text-3);
}

.dmeta .mk { color: var(--label); }

.body {
  padding: 2px 12px 12px 18px;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: 12px;
}

.why {
  color: var(--text-body);
  max-width: 76ch;
  margin: 10px 0 0;
  white-space: pre-wrap;
  font-size: 12.5px;
}

.steps { display: flex; flex-direction: column; gap: 0; }

.step {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 3px 6px;
  border-radius: var(--r);
  cursor: pointer;
  max-width: 80ch;
  font-size: 12.5px;
  color: var(--text-body);
}

.step:hover { background: var(--surface); }
.step input { margin: 3px 0 0; accent-color: var(--signal); flex: none; }
.step.on span { color: var(--faint); text-decoration: line-through; }

.statusbtns { display: flex; gap: 4px; flex-wrap: wrap; }

.sbtn {
  padding: 3px 9px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}

.sbtn:hover { border-color: var(--line-hover); color: var(--text-body); }

.sbtn[aria-pressed="true"] {
  border-color: rgb(var(--signal-rgb) / 0.4);
  background: rgb(var(--signal-rgb) / 0.10);
  color: var(--signal);
}

.noterow { display: flex; flex-direction: column; gap: 4px; }

.noterow > span {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--label);
}

textarea {
  width: 100%;
  min-height: 46px;
  resize: vertical;
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--text-body);
  font-family: var(--sans);
}

.noterow textarea { max-width: 80ch; }
.stamp { color: var(--faint); }

/* --- stato vuoto --------------------------------------------------------- */

.blank {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 48px 24px;
  text-align: center;
}

.blank h2 {
  font-family: var(--sans);
  font-size: var(--fs-title);
  letter-spacing: normal;
  color: var(--text);
  margin-bottom: 8px;
}

.blank p { color: var(--text-2); margin: 0 auto; max-width: 48ch; font-size: 12.5px; }
.blankrow { display: flex; gap: 6px; justify-content: center; margin-top: 18px; }

.empty {
  color: var(--label);
  padding: 24px 0;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
}

/* --- finestre di dialogo -------------------------------------------------- */

dialog {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--ink-900);
  color: var(--ink-100);
  padding: 20px;
  width: min(640px, calc(100vw - 32px));
}

dialog::backdrop { background: var(--backdrop); }

dialog h2 {
  font-family: var(--sans);
  font-size: var(--fs-title);
  letter-spacing: normal;
  color: var(--text);
}

.field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; min-width: 0; }

.field label {
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  color: var(--label);
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 6px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--text-body);
}

/* I due registri anche dentro l'editor: i campi a valori scelti sono dati,
   il titolo e le descrizioni sono frasi e restano sans. */
.field select, #e-deps {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
}

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 10px; }

.hint {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
}

.dialog-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 18px; }

.groups-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }

.grow { display: grid; grid-template-columns: minmax(0, 1fr) 124px 22px; gap: 6px; align-items: center; }

.grow input {
  padding: 5px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--text-body);
  min-width: 0;
}

/* --- avvisi --------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 10px);
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  color: var(--text-body);
  padding: 6px 14px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10;
}

.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: rgb(var(--err-rgb) / 0.4); color: var(--signal-err); }

/* Un messaggio normale non intercetta i clic: sta sopra alla lista e non
   deve rubarle una ✕. Uno con un'azione invece deve poterla ricevere — ma
   solo mentre si vede. */
.toast.act.on { pointer-events: auto; display: flex; align-items: center; gap: 14px; }

.toast-act {
  padding: 4px 10px;
  border: 1px solid var(--signal-dim);
  border-radius: var(--r);
  background: rgb(var(--signal-rgb) / 0.08);
  color: var(--signal);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.toast-act:hover { background: rgb(var(--signal-rgb) / 0.16); }

@media (hover: none) {
  .toast-act { min-height: 36px; padding: 6px 14px; }
}

/* --- coda ----------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 12px;
  color: var(--label);
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

@media (max-width: 880px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rail { position: static; }
  .group-nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .top-inner { align-items: flex-start; }
  .brand { flex-wrap: wrap; }
  .brand p { padding-left: 0; border-left: 0; }

  /* Le statistiche vanno a capo invece di uscire dallo schermo. */
  .top-stats { flex-wrap: wrap; gap: 6px 14px; width: 100%; }
  .top-actions { width: 100%; }
}

/* Il pannello sfiora i bordi dello schermo ma il contenuto resta dentro
   il notch e sopra la barra di sistema. */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 880px) {
    .top-inner, .shell {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    .shell { padding-bottom: max(60px, env(safe-area-inset-bottom)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* --- bacheca -------------------------------------------------------------- */

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.bcol {
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-height: 120px;
  transition: border-color .12s, background-color .12s;
}

.bcol.over { border-color: var(--signal); background: rgb(var(--signal-rgb) / 0.04); }

.bhead {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--hair);
}

.btitle {
  flex: 1;
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  color: var(--text-strong);
}

.bcount {
  font-family: var(--sans);
  font-size: var(--fs-label);
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.bbody { padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.bcard {
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: var(--r);
  background: var(--surface);
  cursor: grab;
  transition: border-color .12s, background-color .12s;
}

.bcard:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.bcard.dragging { opacity: .4; cursor: grabbing; }

.bcard[data-p="0"] { border-left-color: var(--signal-warn); }
.bcard[data-p="1"] { border-left-color: rgb(var(--over) / 0.28); }
.bcard[data-p="2"] { border-left-color: rgb(var(--over) / 0.12); }
.bcard[data-p="3"] { border-left-color: transparent; }

.bopen {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 9px 6px;
  cursor: pointer;
}

.btext { display: block; font-size: 12.5px; color: var(--text-strong); line-height: 1.35; }
.bmeta { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

/* I quattro punti per spostare senza mouse: invisibili finché non servono,
   sempre presenti dove il passaggio del cursore non esiste. */
.bmove { display: flex; gap: 4px; padding: 0 9px 8px; }

.bdot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: none;
  cursor: pointer;
}

/* Ognuno ha la forma dello stato in cui manda, come il pallino della
   colonna: si sceglie guardando, non leggendo. Quello dello stato attuale
   si spegne. */
.bdot { border: 1.5px solid var(--c); opacity: .6; transition: opacity .12s; }
.bdot[data-s="doing"] { background: conic-gradient(var(--c) 0 50%, transparent 0); }
.bdot[data-s="blocked"] { background: linear-gradient(var(--c), var(--c)) center / 100% 1.5px no-repeat; }
.bdot[data-s="done"] { background: var(--c); }
.bdot:hover { opacity: 1; }
.bdot:disabled { opacity: .15; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .bmove { opacity: 0; transition: opacity .12s; }
  .bcard:hover .bmove, .bcard:focus-within .bmove { opacity: 1; }
}

/* --- calendario ----------------------------------------------------------- */

.chead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.cmese {
  font-family: var(--sans);
  font-size: var(--fs-title);
  letter-spacing: normal;
  color: var(--text);
}

.cnav { display: flex; gap: 4px; }
.cnav .ghost { min-width: 30px; }

.cnames {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: 2px;
}

.cnames span {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
  padding: 0 4px 4px;
}

.cgrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cday {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color .12s, background-color .12s;
}

.cday.fuori { opacity: .38; }
.cday.oggi { border-color: var(--line-hover); }
.cday.over { border-color: var(--signal); background: rgb(var(--signal-rgb) / 0.04); }

.cnum {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.cday.oggi .cnum { color: var(--signal); }

.cev {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  border: 0;
  background: var(--surface);
  border-radius: 3px;
  padding: 3px 5px;
  cursor: pointer;
  text-align: left;
  font-size: 10.5px;
  color: var(--text-body);
  overflow: hidden;
}

.cev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cev:hover { background: var(--surface-strong); color: var(--text); }

/* L'ora non si accorcia mai: è corta, e un "09:0…" non è un orario. */
.cev .cora {
  flex: none;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.cev[data-p="0"] { box-shadow: inset 2px 0 0 var(--signal-warn); }

.cpool { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.cpool-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.cchip {
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: var(--r);
  background: var(--surface);
  padding: 4px 9px;
  font-size: 11.5px;
  color: var(--text-body);
  cursor: grab;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cchip:hover { background: var(--surface-hover); color: var(--text); }
.cchip[data-p="0"] { border-left-color: var(--signal-warn); }
.cchip[data-p="1"] { border-left-color: rgb(var(--over) / 0.28); }
.cchip[data-p="2"] { border-left-color: rgb(var(--over) / 0.12); }
.cchip[data-p="3"] { border-left-color: transparent; }

@media (max-width: 880px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .cday { min-height: 56px; }
  .cev span { display: none; }
}

/* Con quattro viste la barra non sta più su una riga stretta: le linguette
   passano sotto, a tutta larghezza, invece di uscire dallo schermo. */
@media (max-width: 700px) {
  .top-in {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 16px;
    gap: 8px 14px;
  }

  .views {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .views::-webkit-scrollbar { display: none; }
  .vtab { flex: 1; white-space: nowrap; }

  .toolbar { padding: 10px 16px; }
  .tools { width: 100%; }
  .tools input[type="search"] { flex: 1; width: auto; }
}

/* In una riga flex il width:100% ereditato da .field fa pretendere a ogni
   campo tutta la larghezza, e il vicino si schiaccia a zero: era il menu
   delle persone, largo quattro pixel e quindi inutilizzabile. Qui a
   dimensionare è il flex, non la larghezza. */
.withclear { display: flex; gap: 4px; align-items: center; }
.withclear > input, .withclear > select { width: auto; flex: 1 1 auto; min-width: 0; }
.withclear > button, .withclear > .prole { flex: 0 0 auto; }
.cpool { transition: border-color .12s, background-color .12s; }
.cpool.over { border-color: var(--signal); background: rgb(var(--signal-rgb) / 0.04); }

/* --- pannello Persone ----------------------------------------------------- */

.people-list { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 4px; }

.prow {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 104px 22px;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid var(--hair);
}

.prow:last-child { border-bottom: 0; }
.prow.spento { opacity: .45; }

.pwho { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.pname { font-size: 12.5px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pmail {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.prole {
  padding: 4px 7px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
}

.prole:disabled { opacity: .5; }

.invite {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.invite .withclear { gap: 6px; }
.invite .primary { white-space: nowrap; }
.invite .primary:disabled { opacity: .6; cursor: progress; }

.teamswitch { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hair); }

.teamlabel {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
  margin-bottom: 4px;
}

/* Perché il selettore esiste ancora, ora che la dashboard mostra tutto:
   senza questa riga sembra il filtro che non è più. */
.teamnote {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-note);
  line-height: 1.45;
  /* Non --faint: a 0.20 su questo fondo il contrasto sta sotto 2:1, e
     questa riga va letta, non intravista. */
  color: var(--text-3);
}

.teamswitch .menuitem { display: block; width: 100%; }
.teamswitch .menuitem.on { color: var(--signal); }
.teamswitch .menuitem:disabled { cursor: default; }

.prow { grid-template-columns: 18px minmax(0, 1fr) 104px 22px 22px; }

.teamadmin { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.teamadmin h3 {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  color: var(--text-strong);
  margin: 0 0 4px;
}

.teamadmin .field { margin-top: 10px; }
.teamadmin .ghost:disabled { opacity: .4; cursor: default; }
#add-form .withclear select:first-child { flex: 1 1 auto; min-width: 6em; }
.hint.warn { color: var(--signal-warn); }

/* --- avviso di mancato salvataggio --------------------------------------- */

.alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 9px 20px;
  background: rgb(var(--err-rgb) / 0.10);
  border-bottom: 1px solid rgb(var(--err-rgb) / 0.4);
  color: var(--signal-err);
  font-size: 12.5px;
}

.alert strong {
  font-family: var(--sans);
  font-size: var(--fs-label);
  letter-spacing: normal;
  font-weight: 500;
}

.alert span { color: var(--text-body); margin-right: auto; }
.alert .ghost { border-color: rgb(var(--err-rgb) / 0.4); color: var(--signal-err); flex: none; }

.dot.bad { background: var(--signal-err); }
.sync[data-bad="true"] { color: var(--signal-err); }

.hello-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  margin: 0 0 2px;
}

.savebar .why {
  font-family: var(--sans);
  text-transform: none;
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--text-3);
  flex-basis: 100%;
  font-variant-numeric: tabular-nums;
}

/* Un nome lungo di gruppo o di team non può allargare la pagina: la
   pastiglia non va a capo per scelta, quindi il testo si accorcia invece
   di spingere. Sotto i 360px bastava "Strumenti tecnici & distribuzione"
   per far scorrere di lato tutta l'applicazione. */
.fbox { max-width: 100%; min-width: 0; }

/* Dentro una pista le voci non si stringono e non si accorciano: «IN RITA…»
   non è un'etichetta, è un indovinello. Se non ci stanno, la pista scorre —
   ed è anche l'unico modo perché l'indicatore, che si muove su un asse,
   trovi la voce dove si aspetta. Il taglio resta per le pastiglie fuori dai
   filtri, come i team sulle righe di dashboard. */
.frow .chip { flex: none; max-width: none; }

.chip:not(.frow .chip) { max-width: 100%; min-width: 0; }

.chip:not(.frow .chip) > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* --- tocco ----------------------------------------------------------------
   Dove non c'è un mouse i comandi sono sempre visibili, e a 22 pixel sono
   sotto la metà dei 44 raccomandati. Qui crescono — e i due di riordino
   spariscono, perché quattro bersagli da 44px occuperebbero metà riga su
   uno schermo da 375. Riordinare resta un'azione da scrivania. */

@media (hover: none) {
  .ibtn { width: 36px; height: 36px; font-size: 13px; }
  .ibtn.move { display: none; }

  .rowbtn { padding-top: 11px; padding-bottom: 11px; }
  .avatar-btn { width: 36px; height: 36px; }
  .bdot { width: 20px; height: 20px; }

  .chip, .vtab, .sbtn, .menuitem { min-height: 34px; }
  button.primary, button.ghost { min-height: 36px; }
  .tools input[type="search"] { min-height: 36px; }
  .chip, .vtab { display: inline-flex; align-items: center; }

  .step { padding-top: 8px; padding-bottom: 8px; }
  .step input { width: 18px; height: 18px; margin-top: 1px; }

  .dline, .rec, .brow, .group-link { min-height: 40px; }

  /* Su touch tutto è sempre visibile, e il titolo finiva schiacciato fra
     data e comandi. Resta in vista solo ciò che chiede attenzione — la
     stessa regola del riposo su desktop — e il titolo riprende spazio. */
  .row .due[data-d="later"], .row .due[data-d="done"], .row .sbar { display: none; }
}

@media (max-width: 560px) {
  /* Il periodo del gruppo va a capo portandosi dietro il titolo: su uno
     schermo stretto il conteggio basta. */
  .group-head { flex-wrap: nowrap; }
  .group-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .group-right .win:first-child { display: none; }
}

/* --- collegamento MCP ----------------------------------------------------- */
/*
   L'elenco dei token riusa le righe del pannello Persone, ma qui non c'è
   né iniziale né ruolo: due colonne, nome a sinistra e revoca a destra.
*/
#mcp-list .prow.trow { grid-template-columns: minmax(0, 1fr) 24px; }

#mcp-url {
  font-family: var(--mono);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  color: var(--signal);
}

#mcp-result .withclear .ghost { white-space: nowrap; }

/* --- riepilogo dei filtri -------------------------------------------------- */
/*
   Una riga che dice quante task stai vedendo e quanti filtri hai addosso.
   I riquadri sopra dicono cosa si PUÒ filtrare; questa dice cosa si STA
   filtrando, che è l'informazione che manca quando una lista sembra vuota.
*/
.fsum {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  padding-top: 2px;
}

.fcount {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--label);
}

.fsum.on .fcount { color: var(--signal); }

.fwhich {
  font-family: var(--sans);
  font-size: var(--fs-note);
  letter-spacing: normal;
  color: var(--text-3);
}

.ghost.small { padding: 2px 8px; font-size: var(--fs-label); }

.fnote {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-note);
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- conferma ---------------------------------------------------------------- */

.ask { max-width: 420px; }
.ask p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-strong); }
.primary.danger {
  background: rgb(var(--err-rgb) / 0.14);
  border-color: rgb(var(--err-rgb) / 0.55);
  color: var(--signal-err);
}
.primary.danger:hover { background: rgb(var(--err-rgb) / 0.22); }

/* --- pannello dei team ------------------------------------------------------- */

.teampanel { width: min(620px, calc(100vw - 32px)); }

/* Le schede dei team usano la stessa pista dei filtri, ma senza indicatore
   che scorre: qui la scelta porta con sé un caricamento, e il fondo fisso
   dice subito quale team si sta guardando anche mentre arrivano i dati. */
.teamtabs { margin: 14px 0 6px; }
.teamtabs .chip.on, .tema .chip.on {
  background: linear-gradient(180deg, rgb(var(--signal-rgb) / 0.22), rgb(var(--signal-rgb) / 0.10));
  box-shadow: inset 0 0 0 1px rgb(var(--signal-rgb) / 0.55);
}
.teamtabs .chip.nuovo { color: var(--text-3); }
.teamtabs .chip.nuovo:hover { color: var(--signal); }

.teamnew { margin-top: 10px; }

/* --- interruttore del tema, nel menu del profilo --------------------------- */

.temarow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 9px 2px;
}

.temarow .flabel { margin: 0; }
.tema { margin: 0; flex: none; }

/* =============================================================================
   Revamp — superfici, controlli, navigazione, dashboard
   =============================================================================
   Tutto quello che c'è qui sotto sostituisce l'aspetto del banco da
   laboratorio con quello delle app di sistema. Le regole sono quelle delle
   HIG: schede raggruppate su fondo neutro, gerarchia di peso e dimensione,
   controlli segmentati neutri, vetro solo sulla navigazione, l'accento solo
   sulle azioni primarie e sul progresso. */

body { line-height: 1.42; }

main, .toolbar, .top-in { max-width: 1120px; }

/* --- barra in alto: vetro, e il titolo compatto quando si scorre --------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

body.scorso .top { border-bottom-color: var(--sep); }

.top-in { height: 54px; gap: 18px; position: relative; }

.logo { width: 112px; height: 15px; }

.ctitle {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  white-space: nowrap;
}

/* Il controllo segmentato: fondo grigio di sistema, voce scelta in rilievo.
   È neutro, come quelli di sistema: l'accento resta alle azioni primarie. */
.frow { background: var(--seg-bg); border: 0; padding: 2px; }

.fmark {
  top: 2px;
  bottom: 2px;
  background: var(--seg-on);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.06);
}

.chip {
  padding: 5px 13px;
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--text-body);
}

.chip:hover { color: var(--text); }
.chip .n { color: var(--text-3); }
.chip.on { color: var(--text); text-shadow: none; font-weight: 600; }
.chip.on .n { color: var(--text-2); opacity: 1; }

.teamtabs .chip.on, .tema .chip.on {
  background: var(--seg-on);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.06);
}

.views.frow { margin: 0 auto; }
.views .vtab { padding: 6px 16px; font-size: var(--fs-label); }

.fnote { color: var(--text-3); }
.fsum.on .fcount { color: var(--signal); }

/* --- il titolo grande ----------------------------------------------------------- */

.ltwrap { max-width: 1120px; margin: 0 auto; padding: 26px 20px 6px; }

.lt-over {
  margin: 0 0 2px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--signal);
}

.ltitle {
  font-size: var(--fs-large);
  line-height: 41px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}

.lt-sub { margin: 4px 0 0; font-size: var(--fs-title); color: var(--text-2); }

/* --- strumenti: ricerca e azioni ----------------------------------------------------- */

.toolbar { border-bottom: 0; padding-top: 10px; padding-bottom: 6px; align-items: flex-start; }

.tools input[type="search"] {
  width: 220px;
  height: 36px;
  padding: 0 12px 0 34px;
  background: var(--seg-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20'/%3E%3C/svg%3E") no-repeat 11px center / 15px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  font-size: var(--fs-title);
}

.tools input::placeholder { color: var(--text-3); }

button.primary, button.ghost {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: normal;
}

/* L'azione primaria è il colore pieno, come il «Fine» di sistema: per le
   azioni primarie si colora il fondo, non la scritta. */
button.primary { background: var(--signal); color: var(--on-signal); }
button.primary:hover { background: var(--signal); filter: brightness(1.07); }
button.ghost { background: var(--seg-bg); color: var(--text); }
button.ghost:hover { background: var(--seg-bg); filter: brightness(1.12); }
button.ghost.danger { color: var(--signal-err); }
.ghost.small { padding: 4px 11px; font-size: var(--fs-label); }

/* --- schede ------------------------------------------------------------------------ */

.card { background: var(--card); border-radius: var(--r-card); }

.panel { background: var(--card); border: 0; border-radius: var(--r-card); padding: 16px; }
.panel-head { border-bottom: 0; padding-bottom: 4px; }
.panel-head h2 { font-size: var(--fs-headline); font-weight: 600; color: var(--text); }
.panel-hint { font-size: var(--fs-label); color: var(--text-3); }

/* --- gruppi e righe: un elenco raggruppato, come i Promemoria ------------------------- */

.group { margin-bottom: 28px; }
.group-head { height: auto; border-bottom: 0; margin: 0 4px 8px; padding: 0; }
.group-head .gnum { display: none; }
.group-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.group-right .win { font-size: var(--fs-label); color: var(--text-3); }
.group-goal { margin: -4px 4px 10px; font-size: var(--fs-label); color: var(--text-3); }

.tasks { background: var(--card); border-radius: var(--r-card); overflow: hidden; gap: 0; }

.task { background: none; border: 0; border-radius: 0; position: relative; }
.task:hover { background: var(--surface); }
.task.open { background: var(--surface-hover); }
.task[data-status="done"] .tt-text { color: var(--text-3); text-decoration: none; }

/* Il separatore parte dal testo, non dal bordo: così il cerchio resta
   allineato in colonna e la riga si legge come una sola cosa. */
.task + .task::before, .irow + .irow::before, .nrow + .nrow::before,
.tasks > .donerow::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 52px;
  height: 1px;
  background: var(--sep);
  transform: scaleY(0.5);
  transform-origin: top;
}

.nrow + .nrow::before { left: 16px; }

.row { align-items: center; gap: 12px; padding: 0 8px 0 14px; min-height: 50px; }
.stripe { display: none; }
.rowbtn { padding: 13px 0; gap: 10px; }
.tt-text { font-size: var(--fs-body); color: var(--text); }
.due { font-size: var(--fs-label); }

.bang { color: var(--signal-warn); font-weight: 700; }
.bang.soft { color: var(--text-3); }

/* Il cerchio da spuntare. La forma dice lo stato — vuoto da fare, mezzo
   pieno in corso, col trattino bloccata, pieno fatta — e il colore la
   accompagna. Disegnato da 24 px ma si tocca su 44: il bersaglio minimo di
   sistema. */
.check {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  border: 1.75px solid var(--st-todo);
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .15s, background-color .2s;
}

.check::before { content: ""; position: absolute; inset: -10px; }

.check::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border-left: 2.2px solid var(--on-signal);
  border-bottom: 2.2px solid var(--on-signal);
  transform: rotate(-45deg) scale(0);
  transition: transform .28s cubic-bezier(.3, 1.6, .6, 1);
}

/* Le stesse quattro forme del pallino, in grande. Il mezzo disco e il
   trattino stanno dentro al bordo con un respiro attorno, come le icone di
   stato di Linear o di Things: a 24 px il pieno fino al bordo sembrerebbe
   già una spunta. */
.check { border-color: var(--c); }
.check[data-s="doing"] {
  padding: 3.5px;
  background: conic-gradient(var(--c) 0 50%, transparent 0) content-box;
}
.check[data-s="blocked"] { background: linear-gradient(var(--c), var(--c)) center / 10px 2px no-repeat; }
.check:hover { border-color: var(--st-done); }
.check[data-s="blocked"]:hover { border-color: var(--c); }

.check[data-s="done"], .check.spuntata { background: var(--st-done); border-color: var(--st-done); padding: 0; }
.check[data-s="done"]::after, .check.spuntata::after { transform: rotate(-45deg) scale(1); }
.check.spuntata { animation: tocco .36s cubic-bezier(.3, 1.6, .6, 1); }

@keyframes tocco { 40% { transform: scale(1.2); } }

.task.uscente .rowbtn, .irow.uscente .irow-main { animation: esce .4s ease .18s forwards; }
@keyframes esce { to { opacity: 0.3; } }

.donerow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px 0 52px;
  border: 0;
  background: none;
  text-align: left;
  font-size: var(--fs-label);
  color: var(--text-3);
  cursor: pointer;
}

.donerow:hover { background: var(--surface); }
.donehow { color: var(--signal); font-weight: 600; }
.donehow::before { content: "·"; margin-right: 6px; color: var(--text-3); font-weight: 400; }
.tasks > .none { padding: 14px 16px; margin: 0; color: var(--text-3); }

/* --- finestre: schede, e dal basso sul telefono ---------------------------------------- */

dialog {
  background: var(--card);
  border: 0;
  border-radius: 22px;
  box-shadow: var(--shadow-float);
  padding: 22px;
}

dialog h2 { font-size: var(--fs-title2); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }

/* --- menu del profilo ---------------------------------------------------------------- */

.usercard {
  background: var(--card);
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  padding: 10px;
  min-width: 260px;
}

.usercard .who-name { font-size: var(--fs-headline); font-weight: 600; color: var(--text); padding: 4px 12px 0; }
.usercard .who-mail, .usercard .who-role { font-size: var(--fs-label); color: var(--text-3); padding: 0 12px; }
.menuitem { padding: 9px 12px; border-radius: 9px; font-size: var(--fs-title); color: var(--text); }
.menuitem:hover { background: var(--seg-bg); }
.menuitem.danger { color: var(--signal-err); }
.mlabel { margin: 8px 0 2px; padding: 10px 12px 2px; border-top: 1px solid var(--sep); font-size: var(--fs-note); color: var(--text-3); }
.temarow { padding: 4px 12px; }
.avatar-btn { width: 32px; height: 32px; border: 0; background: var(--seg-bg); font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.avatar-btn[aria-expanded="true"] { background: var(--signal); color: var(--on-signal); }
.sync { font-size: var(--fs-label); color: var(--text-3); }

/* --- dashboard ------------------------------------------------------------------------ */

.dash2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.dcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.hero { display: flex; align-items: center; gap: 24px; padding: 22px; }

.rings { width: 176px; height: 176px; flex: none; overflow: visible; }
.ring-track { stroke: var(--tinta); opacity: 0.2; }
.ring-arc {
  stroke: var(--tinta);
  transition: stroke-dashoffset 1.15s cubic-bezier(.2, .85, .25, 1), opacity .3s;
}

.rlegend { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; }

.rl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "testa quota" "sotto sotto";
  align-items: baseline;
  gap: 1px 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rl-head { grid-area: testa; display: flex; align-items: center; gap: 8px; font-size: var(--fs-title); font-weight: 600; color: var(--text); }
.rl-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--tinta); flex: none; }
.rl-pct { grid-area: quota; font-family: var(--rounded); font-size: 24px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.rl-sub { grid-area: sotto; margin-left: 18px; font-size: var(--fs-label); color: var(--text-3); }
.rl:hover .rl-head { color: var(--signal); }

.smart { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.stile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  background: var(--card);
  border: 0;
  border-radius: 18px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease;
}

.stile:active { transform: scale(0.97); }
.stile-top { display: flex; align-items: center; justify-content: space-between; }
.stile-ico { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--seg-bg); color: var(--text-3); transition: background-color .3s, color .3s; }
.stile-ico svg { width: 19px; height: 19px; }
.stile-n { font-family: var(--rounded); font-size: 28px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.stile-name { font-size: var(--fs-title); font-weight: 600; color: var(--text-2); }
.stile.on .stile-n, .stile.on .stile-name { color: var(--text); }
.stile.on[data-tono="err"] .stile-ico { background: var(--tile-err); color: var(--on-tile); }
.stile.on[data-tono="warn"] .stile-ico { background: var(--tile-warn); color: var(--on-tile); }

.dsec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 8px; }
.dsec-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.dsec-more { padding: 4px 0; border: 0; background: none; color: var(--signal); font-size: var(--fs-title); font-weight: 500; cursor: pointer; }

.ilist { overflow: hidden; }

.irow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 12px 0 14px; }

.irow-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.irow-title { font-size: var(--fs-body); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irow-sub { display: flex; flex-wrap: wrap; gap: 4px; font-size: var(--fs-label); color: var(--text-3); }
.irow-sub [data-d="overdue"] { color: var(--signal-err); }
.irow-sub [data-d="soon"] { color: var(--signal-warn); }
.sepdot { color: var(--text-3); }

.dempty { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 30px 16px; text-align: center; font-size: var(--fs-label); color: var(--text-3); }
.dempty strong { font-size: var(--fs-headline); color: var(--text); }
.dempty-ico { width: 46px; height: 46px; margin-bottom: 8px; border-radius: 999px; display: grid; place-items: center; background: rgb(var(--signal-rgb) / 0.14); color: var(--signal); }
.dempty-ico svg { width: 24px; height: 24px; }

.nrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 12px 0 16px;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.nrow:hover, .irow-main:hover { background: var(--surface); }
.nrow-name { flex: 0 1 auto; min-width: 70px; max-width: 42%; font-size: var(--fs-title); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbar { flex: 1; height: 6px; border-radius: 999px; background: var(--seg-bg); overflow: hidden; }
.nbar i { display: block; height: 100%; border-radius: 999px; background: var(--ring-2); transition: width .6s cubic-bezier(.2, .85, .25, 1); }
.nbar.quiet i { background: var(--text-3); }
.nrow-val { min-width: 38px; text-align: right; font-size: var(--fs-title); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pav { width: 28px; height: 28px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--seg-bg); font-size: var(--fs-note); font-weight: 600; color: var(--text-2); }
.ico { width: 20px; height: 20px; flex: none; }
.chev { width: 15px; height: 15px; color: var(--text-3); }

/* Un ingresso che si nota: le schede salgono una dopo l'altra quando si
   arriva sulla vista, non a ogni aggiornamento. */
.entrata .dcol > *, .entrata .group { animation: sale .5s cubic-bezier(.2, .85, .25, 1) both; }
.entrata .dcol > :nth-child(2) { animation-delay: .06s; }
.entrata .dcol > :nth-child(3) { animation-delay: .12s; }
.entrata .dcol + .dcol > * { animation-delay: .08s; }
@keyframes sale { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .ring-arc, .nbar i, .fmark { transition: none !important; }
  .entrata .dcol > *, .entrata .group, .check.spuntata { animation: none !important; }
}

/* --- barra delle schede e «+»: solo sul telefono ---------------------------------- */

.tabbar, .fab { display: none; }

@media (max-width: 860px) {
  .dash2 { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --fs-body: 17px; }

  .views { display: none; }
  #btn-new { display: none; }
  .ctitle { display: block; }
  body.scorso .ctitle { opacity: 1; }
  .top-in { height: 48px; }
  .logo { width: 96px; height: 13px; }

  .ltwrap { padding: 16px 16px 4px; }
  main { padding: 14px 16px calc(env(safe-area-inset-bottom) + 108px); }
  .toolbar { padding-left: 16px; padding-right: 16px; }
  .tools { width: 100%; }
  .tools input[type="search"] { flex: 1; width: auto; }

  .hero { padding: 18px; gap: 16px; }
  .rings { width: 128px; height: 128px; }
  .rlegend { gap: 12px; }
  .rl-pct { font-size: 20px; }
  .rl-sub { margin-left: 18px; }
  .dash2, .dcol { gap: 18px; }

  .tabbar {
    display: flex;
    position: fixed;
    z-index: 45;
    left: 12px;
    right: 86px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    height: 64px;
    padding: 5px;
    gap: 2px;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--glass-line);
    border-radius: 999px;
    box-shadow: var(--shadow-float), inset 0 1px 0 var(--glass-shine);
  }

  .tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--text-2);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: color .2s, background-color .25s, transform .15s;
  }

  .tab svg { width: 24px; height: 24px; }
  .tab.on { color: var(--signal); background: var(--seg-bg); }

  .fab {
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 45;
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom) + 10px);
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 999px;
    background: var(--signal);
    color: var(--on-signal);
    box-shadow: var(--shadow-float), inset 0 1px 0 rgb(255 255 255 / 0.25);
    cursor: pointer;
    transition: transform .15s;
  }

  .fab svg { width: 26px; height: 26px; }
  .tab:active, .fab:active { transform: scale(0.92); }

  .toast { bottom: calc(env(safe-area-inset-bottom) + 88px); }

  /* Le finestre salgono dal basso, come i fogli di sistema: si chiudono
     dove sta il pollice e lasciano vedere da dove si è partiti. */
  dialog {
    margin: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }

  dialog[open] { animation: foglio .38s cubic-bezier(.2, .9, .3, 1); }
  @keyframes foglio { from { transform: translateY(100%); } }
}

/* La dashboard non ha filtri né ricerca: la barra degli strumenti sparisce,
   e il titolo grande passa direttamente alle schede. */
body[data-vista="dashboard"] .toolbar { display: none; }
#btn-new { padding: 7px 15px; font-size: var(--fs-label); }

/* La data sempre in fondo a destra, in colonna da una riga all'altra: prima
   gli elementi che compaiono al passaggio — avanzamento, assegnatario —
   prendevano spazio anche da invisibili, e ogni data finiva altrove. */
.tright .avatar { order: 1; }
.tright .sbar { order: 2; }
.tright .due { order: 3; min-width: 44px; text-align: right; }

/* Sul telefono lo stato del salvataggio è il solo pallino: la parola accanto
   al titolo compatto affollava la barra, e il pallino dice già tutto — la
   fascia d'avviso arriva comunque, se qualcosa non va. */
@media (max-width: 700px) {
  .sync span { display: none; }
}

/* --- telefono: la riga porta titolo e data, il resto quando la si apre ------- */
@media (hover: none) {
  /* Su ogni riga matita, croce e iniziali si mangiavano mezzo titolo. Le
     azioni compaiono sulla riga aperta, come le azioni di una cella nelle
     app di sistema; chi è assegnato si legge nel dettaglio. */
  .task:not(.open) .rowtools { display: none; }
  .task:not(.open) .tright .avatar, .task:not(.open) .tright .sbar { display: none; }
  .row .rowtools { opacity: 1; }
}

@media (max-width: 700px) {
  /* Ricerca e «Filtri» sulla stessa riga, il riepilogo sotto, i riquadri
     dei filtri a tutta larghezza quando si aprono. */
  .toolbar { gap: 10px; }
  .toolbar .filters { display: contents; }
  .toolbar .tools { order: 1; flex: 1 1 0; width: auto; }

  .ltwrap[data-vista="lista"] + .toolbar { padding-top: 6px; }
}

/* Lo stato di una task aperta è una scelta fra quattro: un controllo
   segmentato, come i filtri, non quattro bottoni sciolti. */
.statusbtns { display: inline-flex; gap: 0; padding: 2px; border-radius: 10px; background: var(--seg-bg); flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
.sbtn { padding: 6px 12px; border: 0; border-radius: 8px; background: none; color: var(--text-body); font-size: var(--fs-label); font-weight: 500; white-space: nowrap; }
.sbtn:hover { color: var(--text); }
.sbtn[aria-pressed="true"] { background: var(--seg-on); color: var(--text); font-weight: 600; box-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 1px 1px rgb(0 0 0 / 0.06); border: 0; }

/* Aperta, la task ha spazio: il titolo va a capo invece di accorciarsi. */
.task.open .rowbtn .tt-text { white-space: normal; }

/* In un foglio lungo, «Salva» resta sempre a portata: la fila dei pulsanti
   si attacca al fondo mentre il modulo scorre sotto. */
@media (max-width: 700px) {
  dialog .dialog-actions {
    position: sticky;
    bottom: calc(-22px - env(safe-area-inset-bottom));
    margin: 18px -22px calc(-22px - env(safe-area-inset-bottom));
    padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--sep);
  }
  dialog .dialog-actions button { flex: 1; min-height: 46px; }
}

/* --- bacheca e calendario nello stesso linguaggio delle schede ---------------- */

.bcol { background: var(--card-2); border: 0; border-radius: var(--r-card); padding: 10px; }
.bcol.over { box-shadow: inset 0 0 0 2px var(--signal); background: var(--card-2); }
.bhead { border-bottom: 0; padding: 4px 6px 10px; }
.bhead, .bhead * { font-size: var(--fs-title); font-weight: 600; color: var(--text); }
.bcard { background: var(--card); border: 0; border-radius: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.bcard:hover { background: var(--card); box-shadow: 0 4px 14px rgb(0 0 0 / 0.12); }
/* L'urgente si vede dal filo d'ambra a sinistra; le altre priorità no. */
.bcard[data-p="0"] { box-shadow: inset 3px 0 0 var(--signal-warn), 0 1px 2px rgb(0 0 0 / 0.06); }
.bcard[data-p="1"], .bcard[data-p="2"], .bcard[data-p="3"] { border-left-color: transparent; }

.cgrid { gap: 6px; }
.cday { background: var(--card); border: 0; border-radius: 12px; }
.cday.oggi { box-shadow: inset 0 0 0 2px var(--signal); }
.cday.over { box-shadow: inset 0 0 0 2px var(--signal); background: var(--card); }
.cday.oggi .cnum { color: var(--signal); font-weight: 700; }
.cev { border-radius: 6px; }
.cnames span { font-size: var(--fs-note); color: var(--text-3); }
.cpool { background: var(--card); border: 0; border-radius: var(--r-card); padding: 16px; }
.cpool.over { box-shadow: inset 0 0 0 2px var(--signal); background: var(--card); }
.cnav .ghost { min-width: 36px; }
.cmese { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); text-transform: capitalize; }

/* --- niente ingrandimento automatico su iPhone ---------------------------------
   Safari su iOS ingrandisce la pagina quando si tocca un campo il cui testo è
   sotto i 16 px, e non torna indietro da solo: aprire «Nuova task» lasciava
   la pagina zoomata e tagliata. I campi qui erano a 12,5, 13 e 15 px.

   Il rimedio è il testo, non il viewport: bloccare lo zoom con
   maximum-scale toglierebbe anche l'ingrandimento a chi ne ha bisogno per
   leggere. 17 px è il corpo del testo di sistema su iPhone.

   !important perché la regola deve valere per ogni campo, compresi quelli
   con un selettore per identificativo e quelli che verranno: è un vincolo
   della piattaforma, non una scelta di stile da sovrascrivere. */
@media (hover: none) and (pointer: coarse), (max-width: 700px) {
  input, select, textarea { font-size: 17px !important; }
}

/* --- filtri: il pulsante nella barra, il pannello da sinistra ------------------ */

.toolbar { align-items: center; }
.filters { align-items: center; gap: 10px 12px; }

.filtra {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--seg-bg);
  color: var(--text);
  font-size: var(--fs-title);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.filtra svg { width: 18px; height: 18px; }
.filtra:hover { filter: brightness(1.12); }
.filtra.on { background: rgb(var(--signal-rgb) / 0.14); color: var(--signal); }

.filtra .badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--signal);
  color: var(--on-signal);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fsum { flex-basis: auto; padding-top: 0; }

/* Il pannello. Il fondo è quello della pagina e le liste sono schede, come
   nei fogli di impostazioni: le opzioni si leggono come righe, non come
   bottoni. Entra da sinistra e si chiude toccando fuori, con Esc o con
   «Mostra». */
dialog.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(380px, 88vw);
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0 24px 24px 0;
  background: var(--bg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}

dialog.drawer[open] {
  display: flex;
  flex-direction: column;
  animation: dalLato .36s cubic-bezier(.2, .9, .3, 1);
}

@keyframes dalLato { from { transform: translateX(-100%); } }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(env(safe-area-inset-top) + 20px) 18px 8px 22px;
}

.drawer-head h2 { flex: 1; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }

.linkbtn {
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--signal);
  font-size: var(--fs-title);
  font-weight: 500;
  cursor: pointer;
}

.roundbtn {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--seg-bg);
  color: var(--text-2);
  cursor: pointer;
}

.roundbtn svg { width: 16px; height: 16px; }

.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 20px; }

.drawer-foot {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--sep);
}

.drawer-foot .primary { min-height: 46px; }

.dgroup { margin-top: 20px; }
.dgroup-t { margin: 0 14px 7px; font-size: var(--fs-label); font-weight: 600; color: var(--text-3); }
.dgroup-list { background: var(--card); border-radius: 14px; overflow: hidden; }
.dgroup-note { margin: 7px 14px 0; font-size: var(--fs-label); color: var(--text-3); }

.drow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}

.drow + .drow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  height: 1px;
  background: var(--sep);
  transform: scaleY(0.5);
  transform-origin: top;
}

.drow:hover { background: var(--surface); }
.drow-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow-n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.drow-ck { width: 18px; height: 18px; flex: none; color: var(--signal); visibility: hidden; }
.drow.on .drow-ck { visibility: visible; }
.drow.on .drow-l { font-weight: 600; }

/* Nel pannello la pista «Raggruppa» ha già il suo titolo sopra. */
.drawer .fbox .flabel, .fside .fbox .flabel { display: none; }
.drawer .frow, .fside .frow { width: 100%; }
.drawer .frow .chip, .fside .frow .chip { flex: 1; justify-content: center; }

/* --- la lista unica e le sezioni ---------------------------------------------- */

.group.flat { margin-top: 4px; }
.gteam { font-size: var(--fs-label); font-weight: 500; color: var(--text-3); }

@media (max-width: 700px) {
  .toolbar .filtra { order: 2; }
  .toolbar .fsum { order: 3; flex-basis: 100%; }

  /* Sul telefono il pannello è un foglio laterale a tutta altezza, non il
     foglio dal basso delle altre finestre. */
  dialog.drawer {
    margin: 0;
    width: min(380px, 90vw);
    height: 100%;
    max-height: none;
    border-radius: 0 24px 24px 0;
    padding: 0;
  }

  dialog.drawer[open] { animation: dalLato .36s cubic-bezier(.2, .9, .3, 1); }
}

/* --- barra in alto: le viste al centro della pagina ---------------------------
   Tre colonne, le due laterali uguali: il controllo delle viste sta così al
   centro esatto della pagina, qualunque sia la larghezza del logo a sinistra
   e dei pulsanti a destra. Prima era centrato fra i due, e siccome a destra
   c'è più roba pendeva verso sinistra. */
.top-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.top-in > .logo { justify-self: start; }
.top-in > .top-right { justify-self: end; margin-left: 0; }
.views.frow { margin: 0; }
.logo { position: relative; }
.logo a { position: absolute; inset: -6px -8px; border-radius: 8px; }
.logo a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

@media (max-width: 700px) {
  .top-in { grid-template-columns: minmax(0, 1fr) auto; }
}

/* --- Il neon -----------------------------------------------------------------
   L'accento è un bianco caldo, e in scuro da solo sarebbe quasi il bianco del
   testo: a distinguerlo è l'alone, come un tubo acceso. Solo dove c'è
   un'azione o una scelta — il pulsante primario, il +, la scheda attiva, il
   numero dei filtri, l'anello delle tue task — così l'alone vuol dire
   qualcosa. In chiaro gli stessi pulsanti sono antracite caldo con la
   scritta in bianco caldo, che è lei a brillare (--glow-label). */
button.primary, .filtra .badge, .avatar-btn[aria-expanded="true"] {
  box-shadow: var(--glow);
  text-shadow: var(--glow-label);
}
.fab { box-shadow: var(--glow), var(--shadow-float); }
:root[data-theme="light"] .fab svg { filter: drop-shadow(0 0 5px rgb(255 206 150 / 0.8)); }

.tab.on, .linkbtn, .dsec-more, .lt-over, .rl:hover .rl-head, .cday.oggi .cnum { text-shadow: var(--glow-text); }
.tab.on svg, .drow-ck { filter: var(--glow-icon); }
.ring-arc.neon { filter: var(--glow-icon); }

/* --- La colonna del team -----------------------------------------------------
   Prima colonna della riga quando la lista mescola più team. Una pastiglia
   neutra, larga quanto il nome più lungo in lista (--tteam-w, misurato da
   ui.js): i nomi dei team si leggono in colonna e i titoli partono tutti
   dallo stesso punto. Neutra perché il colore è già speso per gli stati e
   per l'accento — un team non è un allarme. */
.tteam {
  flex: none;
  width: var(--tteam-w, auto);
  max-width: 168px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--seg-bg);
  color: var(--text-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task[data-status="done"] .tteam { opacity: .55; }

/* Sul telefono la colonna fissa ruberebbe mezzo titolo: il team sale sopra
   il titolo, piccolo, come il nome dell'elenco nelle liste smart dei
   Promemoria. */
@media (max-width: 700px) {
  .rowbtn:has(.tteam) { flex-wrap: wrap; row-gap: 2px; padding-top: 9px; padding-bottom: 10px; }
  .tteam {
    order: -1;
    flex-basis: 100%;
    width: auto;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--text-3);
    font-size: 12px;
    text-align: left;
  }
}

/* --- I filtri fissi a sinistra, su schermo largo -------------------------------
   La lista diventa due colonne: i filtri, la lista. La pagina resta larga
   quanto la barra in alto, così la colonna dei filtri parte sotto il logo e
   la lista finisce sotto «Nuova». La colonna scorre per conto suo e resta
   ferma mentre la lista scorre: è la barra laterale delle app del Mac. */
.fside { display: none; }

@media (min-width: 1024px) {
  body.filtri-fissi .pagina {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
  }

  body.filtri-fissi .colonna > .ltwrap,
  body.filtri-fissi .colonna > .toolbar,
  body.filtri-fissi .colonna > main {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.filtri-fissi .fside {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(54px + env(safe-area-inset-top));
    max-height: calc(100vh - 54px - env(safe-area-inset-top));
    max-height: calc(100dvh - 54px - env(safe-area-inset-top));
    padding-top: 26px;
  }

  .fside-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 0 14px; min-height: 32px; }
  .fside-head h2 { flex: 1; font-size: var(--fs-headline); font-weight: 700; color: var(--text); }
  .fside-head .linkbtn { font-size: var(--fs-label); }

  .fside-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 28px; }
  .fside .dgroup { margin-top: 18px; }
  .fside .dgroup:first-child { margin-top: 10px; }
  /* Col mouse una riga da 46 px è un bersaglio da dito: qui bastano 36, e
     l'elenco delle persone ci sta senza scorrere. */
  .fside .drow { min-height: 36px; font-size: var(--fs-title); }
  .fside .drow-ck { width: 16px; height: 16px; }

  /* Il pulsante «Filtra» resta nella barra: è lui che riapre la colonna, e
     quando la colonna è aperta lo dice restando premuto. */
  .filtra[aria-expanded="true"] { background: var(--seg-on); color: var(--text); }
}

/* --- I commenti ----------------------------------------------------------------
   Una conversazione sotto la task: la sigla, il nome e quando, poi il testo.
   Niente fumetti colorati — sono appunti di lavoro, non una chat — ma la
   forma è quella che tutti sanno leggere. Il campo per scrivere sta in fondo
   e cresce con quello che ci si scrive. */
.thread { max-width: 80ch; }
.thread-t { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: var(--fs-label); font-weight: 600; color: var(--text-3); }
.thread-n {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--seg-bg);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.thread-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }

.cmt { display: flex; gap: 10px; align-items: flex-start; }
.avatar.cav { width: 28px; height: 28px; font-size: 11px; font-weight: 600; letter-spacing: 0; }
.cmt.old .cav { background: none; border: 1px dashed var(--line-strong); color: var(--text-3); }
.cmt-body { flex: 1; min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: 8px; min-height: 18px; }
.cmt-who { font-size: var(--fs-label); font-weight: 600; color: var(--text); }
.cmt-when { font-size: var(--fs-note); color: var(--text-3); }
.cmt-text {
  margin: 2px 0 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* «Elimina» solo sui propri, e solo quando ci si passa sopra: su dieci
   commenti dieci pulsanti sarebbero più rumore che testo. Sul telefono,
   dove il passaggio non esiste, resta sempre. */
.cmt-del {
  margin-left: auto;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: var(--fs-note);
  cursor: pointer;
}
.cmt-del:hover { color: var(--signal-err); }
@media (hover: hover) and (pointer: fine) {
  .cmt-del { opacity: 0; transition: opacity .12s; }
  .cmt:hover .cmt-del, .cmt-del:focus-visible { opacity: 1; }
}

.composer { display: flex; align-items: flex-end; gap: 10px; }
.composer .cav { margin-bottom: 5px; }
.composer textarea {
  flex: 1;
  min-height: 38px;
  max-height: 180px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 19px;
  background: var(--seg-bg);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}
.composer textarea:focus { outline: none; border-color: rgb(var(--signal-rgb) / 0.6); }
.composer .primary { flex: none; height: 38px; padding: 0 16px; border-radius: 19px; font-weight: 600; }
.composer .primary:disabled { opacity: .35; box-shadow: none; text-shadow: none; filter: none; cursor: default; }

.ccount { order: 0; display: inline-flex; align-items: center; gap: 3px; color: var(--text-3); font-size: var(--fs-note); font-variant-numeric: tabular-nums; }
.ccount svg { width: 14px; height: 14px; }

/* --- Link di invito ------------------------------------------------------------
   Nel pannello Team e persone, sotto l'invito per email: il ruolo e «Crea
   link». Sotto, i link del team come le righe dei collegamenti a ChatGPT:
   quando sono stati creati, se sono stati usati e da chi, una croce. */
#link-result { margin-top: 10px; }
#link-result .withclear .ghost { white-space: nowrap; }
#link-list { margin-top: 10px; }
#link-list:empty { display: none; }
#link-list .prow.trow { grid-template-columns: minmax(0, 1fr) 24px; }
#link-form .withclear > .prole { flex: 1 1 auto; }

.gatebox .hint { display: block; margin-top: 5px; }

/* I pulsanti che fanno da collegamento — «Password dimenticata», «Ho già un
   account»: testo e basta, sotto il pulsante principale. Mancava la regola,
   e il browser li disegnava come pulsanti grigi. */
.linkish {
  display: block;
  margin: 12px auto 0;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--text-2);
  font-size: var(--fs-label);
  cursor: pointer;
}
.linkish:hover { color: var(--text); text-decoration: underline; }