/* Geist (SIL OFL 1.1) — variable latin subset, embedded as data URI (no network) */
@font-face {
font-family: "Geist";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(data:font/woff2;base64,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) format("woff2");
}
:root {
color-scheme: light dark;
--font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
/* ---- scala tipografica: otto gradini, nessuna misura fuori scala ---- */
--text-2xs: 10.5px; --lh-2xs: 1.4; --ls-2xs: 0.06em;
--text-xs: 11.5px; --lh-xs: 1.45;
--text-sm: 12.5px; --lh-sm: 1.45;
--text-base: 14px; --lh-base: 1.5;
--text-lg: 16px; --lh-lg: 1.45; --ls-lg: -0.01em;
--text-xl: 20px; --lh-xl: 1.35; --ls-xl: -0.01em;
--text-2xl: 26px; --lh-2xl: 1.22; --ls-2xl: -0.02em;
--text-3xl: 32px; --lh-3xl: 1.15; --ls-3xl: -0.025em;
/* ---- pesi: quattro, con dei nomi ---- */
--w-normal: 400;
--w-medium: 500;
--w-semi: 600;
/* ---- lunghezza di riga leggibile per la prosa ---- */
--measure-read: 68ch;
/* ---- la conversazione: due misure, non una ----
Un messaggio è PROSA e si legge per righe: oltre le ~76 battute l'occhio perde il capo
tornando a sinistra. Il tetto in pixel è la cintura di sicurezza per un carattere di
ripiego più largo del previsto — a 15px in Geist il primo dei due vince sempre.
Un ALLEGATO non si legge: una miniatura, un'anteprima o un video guadagnano dallo
spazio, e stringerli alla misura del testo vuol dire buttare via mezzo canale su uno
schermo largo. Quindi il messaggio nel suo insieme (e la riga di scrittura sotto, che
deve stare incolonnata con quello che scrive) si ferma a --measure-msg-wide, e solo il
testo si ferma prima.
Prima non si fermava niente: a 1710px la fascia d'hover, la barra degli strumenti e il
composer attraversavano tutto lo schermo per accompagnare tre righe di testo larghe un
terzo. ---- */
--measure-msg: min(76ch, 860px);
--measure-msg-wide: 1120px;
/* ---- spaziatura: griglia 4/8, niente numeri a caso.
--sp-05 e --sp-15 sono i due mezzi gradini che servono davvero
(scarti di 2px fra icona e testo, respiro di 6px dentro le pastiglie). ---- */
--sp-05: 2px;
--sp-1: 4px;
--sp-15: 6px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
/* ---- neutri tiepidi: una sola famiglia, appena calda per stare col rosso ---- */
--bg: #FFFFFF;
--app-bg: #F5F4F2;
--surface: #FFFFFF;
--surface-2: #FCFCFB;
--ink: #191715;
--ink-2: #4A4642;
--muted: #78736E;
--faint: #A6A19B;
--border: #EAE8E6; /* filo visibile: contenitori, campi, testate */
--hairline: #F1EFED; /* filo interno: righe di elenco */
--raise: #F6F5F3; /* hover neutro */
--wash: rgba(25, 23, 21, 0.04); /* velatura d'hover, sopra qualunque fondo */
/* Il fondo di una colonna di bacheca. Un token suo e non `--wash` riciclata, perché qui
conta il VERSO del gradino e nei due temi è opposto: la colonna deve stare fra il fondo
della pagina e la superficie della scheda — pagina, poi colonna, poi scheda — o la
scheda si legge come un incavo invece che come l'oggetto in cima alla pila.
Chiara: una velatura scura sul fondo pallido. Scura: una velatura chiara sul fondo
quasi nero, più tenue della superficie delle schede. */
--col-bg: rgba(25, 23, 21, 0.035);
--field: #FFFFFF;
--field-2: #F6F5F3;
/* ---- l'unico accento: si usa col contagocce ---- */
--accent: #8B0C15;
--accent-hover: #A5121D;
--accent-soft: #FBEFF0;
--accent-wash: rgba(139, 12, 21, 0.06); /* voce di navigazione attiva */
--accent-line: rgba(139, 12, 21, 0.22);
--focus: rgba(139, 12, 21, 0.45); /* anello di focus */
--on-accent: #FFFFFF;
/* ---- semantici: il pericolo NON è il marchio, si vede da lontano ---- */
--green: #15803D;
--on-green: #FFFFFF;
/* Tre stati, tre tinte, in ENTRAMBI i temi: scaduto non è un errore e non è un avviso.
Chiaro: #B54708 ambra bruciata / #CC3A1E rosso / #9A6700 ocra. Scuro (vedi sotto):
#F0883E arancio / #FF7B5C corallo / #E3B341 giallo. */
--overdue: #B54708;
--danger: #CC3A1E;
--warn: #9A6700;
/* ---- pastiglie a velatura: fondo tinto tenue, testo dello stesso colore ---- */
--tint-neutral-bg: rgba(25, 23, 21, 0.055); --tint-neutral-ink: #57534E;
--tint-red-bg: rgba(204, 58, 30, 0.10); --tint-red-ink: #A3300F;
--tint-amber-bg: rgba(180, 120, 10, 0.13); --tint-amber-ink: #855A05;
--tint-green-bg: rgba(21, 128, 61, 0.10); --tint-green-ink: #146C36;
--tint-blue-bg: rgba(30, 90, 180, 0.10); --tint-blue-ink: #1B4F9C;
--check-border: #D6D3D1;
--avatar-ink: #FFFFFF;
--chip: rgba(25, 23, 21, 0.055);
--chip-ink: #57534E;
--drop: #FBEFF0;
/* raggi: una sola famiglia, 6/8/10/12 */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 10px;
--r-lg: 12px;
--r-pill: 999px; /* pastiglie e contapunti */
--r-full: 50%; /* cerchi: avatar, pallini */
/* ombre: solo per ciò che galleggia davvero (popover, pannello, modale) */
--sh-1: 0 1px 2px rgba(25, 23, 21, 0.05);
--sh-2: 0 4px 8px rgba(25, 23, 21, 0.04), 0 16px 32px rgba(25, 23, 21, 0.08);
--sh-card: 0 1px 2px rgba(25, 23, 21, 0.04), 0 6px 16px -6px rgba(25, 23, 21, 0.12);
--sh-panel: -1px 0 0 var(--border), -26px 0 44px -30px rgba(25, 23, 21, 0.18);
--sh-modal: 0 8px 16px rgba(25, 23, 21, 0.05), 0 28px 56px rgba(25, 23, 21, 0.12);
--ring: 0 0 0 3px var(--focus);
--ease: cubic-bezier(0.32, 0.72, 0, 1);
/* durate: pressione, passaggio, pannello */
--dur-1: 100ms;
--dur-2: 160ms;
--dur-3: 240ms;
/* barra laterale delle conversazioni: inchiostro, non melanzana */
--side-col: 260px;
--side-bg: #141417;
--side-ink: rgba(255, 255, 255, 0.68);
--side-ink-strong: #FFFFFF;
--side-line: rgba(255, 255, 255, 0.09);
--side-hover: rgba(255, 255, 255, 0.055);
--side-active: rgba(229, 72, 77, 0.16); /* velatura d'accento + filo a sinistra */
--side-active-ink: #FFFFFF;
--side-badge: #E5484D;
/* rail: la strisciolina di sezioni. Stesso fondo della barra: rail + barra sono un
UNICO blocco scuro di navigazione, il filo sottile lo tiene solo verso il contenuto.
88px e non 68: a 68 le etichette stavano a 10,5px — sotto la misura a cui si legge una
parola senza fermarsi — e i nomi veri («Conversazioni», «I miei task») non ci
entravano, tanto che erano stati accorciati in un'altra lingua («My tasks»). A 12px
con 88px di colonna ci stanno per esteso, e i venti pixel in più li paga la traccia di
coda dell'elenco, non una colonna di dati. */
--rail-col: 88px;
--rail-bg: var(--side-bg);
--rail-ink: rgba(255, 255, 255, 0.60);
--rail-ink-strong: #FFFFFF;
--rail-hover: rgba(255, 255, 255, 0.07);
--rail-active: rgba(255, 255, 255, 0.12);
/* ---- livelli di sovrapposizione: una scala ordinale, un solo posto dove cambiarli.
I primi quattro gradini NON sono strati dell'app: sono impilamenti interni a un
componente (un contenuto sopra il suo pseudo-elemento, una testata appiccicata
dentro uno scorrevole). Dal rail in su si parla di strati veri. ---- */
--z-base: 0;
--z-local: 1;
--z-sticky: 2;
--z-float: 3;
--z-rail: 20; /* rail e pannelli agganciati: dettaglio task, thread */
--z-dropdown: 40; /* menu e popover ancorati a un pulsante */
--z-panel: 60; /* popover che devono stare sopra i menu */
--z-nav: 70; /* i menu della barra in cima */
--z-scrim: 90; /* velo del cassetto */
--z-overlay: 100; /* modali */
--z-layer: 120; /* strato a tutto schermo: scheda persona */
--z-alert: 140; /* banner di riconnessione */
--z-toast: 200; /* notifiche: sempre in cima */
/* ---- collegamenti: blu, mai bordeaux. Il marchio non è un link. ---- */
--link: #1F5FA8;
--link-hover: #17457A;
/* ---- informativo ---- */
--info: #1B4F9C;
--info-bg: rgba(30, 90, 180, 0.10);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #0E0E10;
--app-bg: #0A0A0C;
--surface: #131316;
--surface-2: #18181B;
--ink: #F7F8F8;
--ink-2: rgba(247, 248, 248, 0.78);
--muted: rgba(247, 248, 248, 0.62);
--faint: rgba(247, 248, 248, 0.38);
--border: rgba(255, 255, 255, 0.11);
--hairline: rgba(255, 255, 255, 0.06);
--raise: rgba(255, 255, 255, 0.045);
--wash: rgba(255, 255, 255, 0.05);
--col-bg: rgba(255, 255, 255, 0.028);
--field: #0E0E11;
--field-2: #17171A;
--accent: #E5484D;
--accent-hover: #F0666A;
--accent-soft: rgba(229, 72, 77, 0.14);
--accent-wash: rgba(229, 72, 77, 0.12);
--accent-line: rgba(229, 72, 77, 0.34);
--focus: rgba(229, 72, 77, 0.55);
--on-accent: #FFFFFF;
--green: #46C57F;
--on-green: #06210F;
/* arancio caldo: sul fondo scuro «in ritardo» era lo STESSO #E3B341 di «avviso», e le
due celle si leggevano identiche. Tre tinte, tre significati (vedi il chiaro) */
--overdue: #F0883E;
--danger: #FF7B5C;
--warn: #E3B341;
--tint-neutral-bg: rgba(255, 255, 255, 0.075); --tint-neutral-ink: rgba(247, 248, 248, 0.72);
--tint-red-bg: rgba(255, 123, 92, 0.16); --tint-red-ink: #FF9E82;
--tint-amber-bg: rgba(227, 179, 65, 0.16); --tint-amber-ink: #EDC46B;
--tint-green-bg: rgba(70, 197, 127, 0.16); --tint-green-ink: #5FD79A;
--tint-blue-bg: rgba(90, 150, 240, 0.16); --tint-blue-ink: #8CB8F5;
--check-border: rgba(255, 255, 255, 0.22);
--chip: rgba(255, 255, 255, 0.075);
--chip-ink: rgba(247, 248, 248, 0.72);
--drop: rgba(229, 72, 77, 0.14);
--sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--sh-2: 0 4px 8px rgba(0, 0, 0, 0.32), 0 16px 32px rgba(0, 0, 0, 0.48);
--sh-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
--sh-panel: -1px 0 0 var(--border), -26px 0 44px -30px rgba(0, 0, 0, 0.8);
--sh-modal: 0 8px 16px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.6);
--side-bg: #08080A;
--side-ink: rgba(255, 255, 255, 0.62);
--side-line: rgba(255, 255, 255, 0.08);
--side-hover: rgba(255, 255, 255, 0.05);
--side-active: rgba(229, 72, 77, 0.18);
--side-active-ink: #FFFFFF;
--side-badge: #E5484D;
--rail-bg: var(--side-bg); /* rail e barra: un unico blocco scuro */
--link: #7FB2E8;
--link-hover: #A6CCF2;
--info: #8CB8F5;
--info-bg: rgba(90, 150, 240, 0.16);
}
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
/* tema forzato: anche i controlli nativi (checkbox, select, scrollbar) devono seguirlo */
color-scheme: dark;
--bg: #0E0E10;
--app-bg: #0A0A0C;
--surface: #131316;
--surface-2: #18181B;
--ink: #F7F8F8;
--ink-2: rgba(247, 248, 248, 0.78);
--muted: rgba(247, 248, 248, 0.62);
--faint: rgba(247, 248, 248, 0.38);
--border: rgba(255, 255, 255, 0.11);
--hairline: rgba(255, 255, 255, 0.06);
--raise: rgba(255, 255, 255, 0.045);
--wash: rgba(255, 255, 255, 0.05);
--col-bg: rgba(255, 255, 255, 0.028);
--field: #0E0E11;
--field-2: #17171A;
--accent: #E5484D;
--accent-hover: #F0666A;
--accent-soft: rgba(229, 72, 77, 0.14);
--accent-wash: rgba(229, 72, 77, 0.12);
--accent-line: rgba(229, 72, 77, 0.34);
--focus: rgba(229, 72, 77, 0.55);
--on-accent: #FFFFFF;
--green: #46C57F;
--on-green: #06210F;
--overdue: #F0883E; /* come nel blocco di sopra: distinto da --warn e da --danger */
--danger: #FF7B5C;
--warn: #E3B341;
--tint-neutral-bg: rgba(255, 255, 255, 0.075); --tint-neutral-ink: rgba(247, 248, 248, 0.72);
--tint-red-bg: rgba(255, 123, 92, 0.16); --tint-red-ink: #FF9E82;
--tint-amber-bg: rgba(227, 179, 65, 0.16); --tint-amber-ink: #EDC46B;
--tint-green-bg: rgba(70, 197, 127, 0.16); --tint-green-ink: #5FD79A;
--tint-blue-bg: rgba(90, 150, 240, 0.16); --tint-blue-ink: #8CB8F5;
--check-border: rgba(255, 255, 255, 0.22);
--chip: rgba(255, 255, 255, 0.075);
--chip-ink: rgba(247, 248, 248, 0.72);
--drop: rgba(229, 72, 77, 0.14);
--sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--sh-2: 0 4px 8px rgba(0, 0, 0, 0.32), 0 16px 32px rgba(0, 0, 0, 0.48);
--sh-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
--sh-panel: -1px 0 0 var(--border), -26px 0 44px -30px rgba(0, 0, 0, 0.8);
--sh-modal: 0 8px 16px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.6);
--side-bg: #08080A;
--side-ink: rgba(255, 255, 255, 0.62);
--side-line: rgba(255, 255, 255, 0.08);
--side-hover: rgba(255, 255, 255, 0.05);
--side-active: rgba(229, 72, 77, 0.18);
--side-active-ink: #FFFFFF;
--side-badge: #E5484D;
--rail-bg: var(--side-bg); /* rail e barra: un unico blocco scuro */
--link: #7FB2E8;
--link-hover: #A6CCF2;
--info: #8CB8F5;
--info-bg: rgba(90, 150, 240, 0.16);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: var(--text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--r-xs); }
/* Il salto al contenuto. Fuori dallo schermo finché non prende il fuoco — non `display:
none`, che lo toglierebbe anche all'ordine del Tab, cioè a chi serve. */
.skip-link {
position: absolute; top: 0; left: 0; z-index: 200;
transform: translateY(-140%);
padding: var(--sp-2) var(--sp-3);
background: var(--surface); color: var(--ink);
border: 1px solid var(--border); border-radius: 0 0 var(--r-sm) 0;
font-size: var(--text-sm); font-weight: 600; text-decoration: none;
transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus { transform: translateY(0); }
/* il bersaglio del salto è `tabindex="-1"`: il contorno del fuoco lì non serve a nessuno */
.main:focus { outline: none; }
::selection { background: var(--accent-soft); }
/* numeri incolonnati ovunque contino: date, conteggi, statistiche, orari */
.tnum, time, .pane-meta, .count, .badge-dot, .seg-dot { font-variant-numeric: tabular-nums; }
/* scorciatoia da tastiera: un tastino inciso, mai un'etichetta colorata */
.kbd {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 var(--sp-1);
border: 1px solid var(--border); border-radius: 4px;
font-family: var(--mono);
font-size: var(--text-2xs); line-height: 1;
color: var(--faint);
background: transparent;
letter-spacing: 0;
flex: 0 0 auto;
user-select: none;
}
/* chi ha chiesto meno movimento non deve subire né entrate né scorrimenti animati.
È l'UNICO blocco della regola: ce n'era un secondo in fondo al foglio che diceva la
stessa cosa con altre parole — due posti da tenere allineati per un effetto solo. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
/* l'attesa va azzerata insieme alla durata: un'animazione che parte dopo due secondi,
accorciata ma non anticipata, tiene lo stato iniziale a schermo per due secondi e poi
salta — che è proprio il movimento a scatto da cui si sta scappando */
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* le entrate a scatto (pannello, scrim, pop della spunta) non si accorciano: si tolgono */
.panel, .overlay, .circle.pop { animation: none !important; transition: none !important; }
}
/* Instrument Serif (SIL OFL 1.1) — sottoinsieme latin, servito da /fonts/ perché la CSP
consente font-src 'self' data: e non i domini di Google (vedi server/app.js).
Si usa in DUE posti e basta: l'insegna del login e il titolo di un progetto. Un tocco
editoriale sparso su tutta l'app diventa un tema, e questa è un'app tecnica. */
@font-face {
font-family: "Instrument Serif";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/instrument-serif-latin-400.woff2) format("woff2");
}
/* ============ topbar ============ */
.topbar {
position: relative; /* ancora dei due menu: navigazione e account */
flex: 0 0 auto;
height: 52px;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: 0 var(--sp-4);
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; min-width: 0; }
.brand-dot {
width: 10px; height: 10px; border-radius: var(--r-full);
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-wash);
flex: 0 0 auto;
}
.brand-name { font-weight: var(--w-semi); font-size: var(--text-base); letter-spacing: -0.01em; }
/* marchio a sinistra, poi la sezione a schermo: la topbar dice sempre dove siamo */
.brand-sep { width: 1px; height: 16px; background: var(--border); }
.top-section {
font-size: var(--text-base);
font-weight: var(--w-medium);
color: var(--ink-2);
letter-spacing: -0.01em;
max-width: 240px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-wrap { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; position: relative; }
.search-box {
width: min(620px, 100%);
display: flex;
align-items: center;
gap: var(--sp-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
font-size: var(--text-base);
color: var(--muted);
transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.search-box:hover { border-color: var(--check-border); }
/* Il fuoco è un filo, non una fascia: --ring sono tre pixel di rosso a velatura attorno a
una pastiglia larga 620px, e sulla barra di ricerca — che è il primo posto dove il fuoco
arriva — diventava la cosa più vistosa dell'intestazione. Un pixel d'accento sul bordo
dice la stessa cosa e non sposta il peso della pagina. */
.search-box:focus-within {
background: var(--surface);
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent);
}
.search-box input { padding: 3px 0; }
/* il suggerimento sparisce appena si scrive: da lì in poi conta solo il testo */
.search-box:focus-within .kbd { opacity: 0; }
.search-box input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); }
/* `outline: none` senza niente in cambio lascia chi naviga da tastiera senza sapere dov'è:
restava solo la tinta del bordo della scatola (`:focus-within`), che non è un anello e
non si vede in alto contrasto. L'anello sta sul CAMPO, dov'è il cursore — anche perché
è lì che qualsiasi verifica di accessibilità va a cercarlo. */
.search-box input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.search-box input::placeholder { color: var(--muted); }
.search-results {
position: absolute;
top: 42px;
width: min(620px, 100%);
max-height: 60vh;
overflow-y: auto;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-modal);
z-index: var(--z-panel);
padding: var(--sp-15);
animation: rise var(--dur-2) var(--ease);
}
/* Il tipo è l'intestazione del suo gruppo, non una colonna ripetuta a ogni riga: al posto
di sessantotto pixel di "task task task task" prima di ogni titolo, una riga sola che
dice "3 task" e sotto i tre titoli alla loro larghezza. */
.sr-head {
padding: var(--sp-2) var(--sp-2) var(--sp-1);
font-size: var(--text-2xs); line-height: var(--lh-2xs);
font-weight: var(--w-medium); letter-spacing: var(--ls-2xs); text-transform: uppercase;
color: var(--faint);
}
.sr-head + .sr-item { margin-top: 0; }
.sr-item + .sr-head { margin-top: var(--sp-15); border-top: 1px solid var(--hairline); }
.sr-item {
display: flex;
align-items: baseline;
gap: var(--sp-2);
width: 100%;
text-align: left;
background: transparent;
border: 0;
border-radius: var(--r-xs);
padding: var(--sp-15) var(--sp-2);
cursor: pointer;
}
.sr-item:hover, .sr-item.active { background: var(--raise); }
/* la riga preselezionata: la tinta d'hover più il filo, così si distingue da quella che
il puntatore sta sfiorando per caso mentre le frecce muovono altrove */
.sr-item.active { box-shadow: inset 0 0 0 1px var(--border); }
/* il titolo alla sua larghezza naturale, l'estratto si stringe: prima erano il contrario,
e il nome di un canale finiva ai puntini per far posto a un estratto che nessuno legge */
.sr-title { flex: 0 1 auto; min-width: 0; font-size: var(--text-base); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-snippet { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* la parte che combacia: in evidenza col peso, non con un fondo giallo da evidenziatore */
.sr-hit { background: transparent; color: inherit; font-weight: var(--w-semi); }
.sr-empty { padding: var(--sp-3); color: var(--muted); font-size: var(--text-base); }
/* le scorciatoie in fondo al pannello: si appiccicano al bordo di sotto, perché l'elenco
sopra scorre e le istruzioni non devono scorrere via con lui */
.sr-foot {
position: sticky; bottom: calc(var(--sp-15) * -1);
display: flex; align-items: center; gap: var(--sp-4);
margin: var(--sp-15) calc(var(--sp-15) * -1) calc(var(--sp-15) * -1);
padding: var(--sp-15) var(--sp-3);
background: var(--surface-2);
border-top: 1px solid var(--hairline);
border-radius: 0 0 var(--r-md) var(--r-md);
font-size: var(--text-2xs); color: var(--faint);
}
.sr-foot > span { display: inline-flex; align-items: center; gap: var(--sp-15); }
.top-right { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-15); }
.icon-btn {
position: relative;
background: transparent;
border: 0;
border-radius: var(--r-xs);
width: 30px; height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.icon-btn.danger:hover { color: var(--danger); background: var(--tint-red-bg); }
.badge-dot {
position: absolute;
top: 2px; right: 2px;
min-width: 15px; height: 15px;
padding: 0 var(--sp-1);
border-radius: var(--r-pill);
background: var(--accent);
color: var(--on-accent);
font-size: var(--text-2xs);
font-weight: var(--w-semi);
line-height: 15px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.menu {
position: absolute;
top: 46px; right: 12px;
min-width: 210px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
padding: var(--sp-15);
z-index: var(--z-panel);
animation: rise var(--dur-2) var(--ease);
}
.menu-head { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-1); }
.menu-name { font-weight: var(--w-semi); font-size: var(--text-base); }
.menu-mail { font-size: var(--text-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.menu-item {
display: block; width: 100%; text-align: left;
background: transparent; border: 0; border-radius: var(--r-xs);
padding: var(--sp-2) var(--sp-3); font-size: var(--text-base); cursor: pointer;
}
.menu-item:hover { background: var(--raise); }
/* ============ shell ============ */
.app { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.main {
position: relative;
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
background: var(--bg);
overflow: hidden;
}
.main-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* ============ menu di navigazione (topbar) ============ */
/* Il dock a tile è stato sostituito da questo: un pannello che scende dall'icona in alto
a destra, con una voce per sezione e un sotto-elenco per Progetti e App. */
.nav-btn.icon-btn { color: var(--ink-2); }
.nav-btn[aria-expanded="true"] { background: var(--chip); color: var(--ink); }
.nav-menu {
position: absolute;
top: 46px; right: 46px;
width: 268px;
max-height: min(74vh, 560px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-modal);
padding: var(--sp-15);
z-index: var(--z-nav);
}
.nav-menu-head {
margin: var(--sp-05) 0 var(--sp-1);
padding: 0 var(--sp-2);
color: var(--faint);
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 34px;
text-align: left;
background: transparent;
border: 0;
border-radius: var(--r-sm);
padding: var(--sp-15) var(--sp-2);
color: var(--ink-2);
font-size: var(--text-base);
cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.nav-item:hover { background: var(--wash); color: var(--ink); }
.nav-item[aria-current="true"] { background: var(--accent-wash); color: var(--ink); font-weight: var(--w-medium); }
.nav-item.has-unread .nav-label { font-weight: var(--w-semi); color: var(--ink); }
.nav-ico { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.nav-ico svg { width: 16px; height: 16px; }
.nav-item[aria-current="true"] .nav-ico { color: var(--ink); }
.nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge {
flex: 0 0 auto;
min-width: 18px;
padding: 0 var(--sp-15);
border-radius: var(--r-pill);
background: var(--accent);
color: var(--on-accent);
font-size: var(--text-2xs);
font-weight: var(--w-semi);
line-height: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* ============ rail di Area X ============ */
/* La strisciolina a sinistra della barra: per il team è TUTTA la navigazione dell'app.
Stesso fondo della barra — insieme fanno UN solo blocco scuro, non due zone. Le prime
voci cambiano il contenuto della barra qui accanto, le ultime la sezione. Sotto i 900px
sparisce e le stesse voci diventano una fila di schede in cima al cassetto. */
.rail {
flex: 0 0 var(--rail-col);
width: var(--rail-col);
display: flex;
flex-direction: column;
background: var(--rail-bg);
color: var(--rail-ink);
overflow: hidden;
}
.rail[hidden] { display: none; }
.rail-inner {
display: flex; flex-direction: column; align-items: stretch;
padding: var(--sp-2) var(--sp-1) var(--sp-4);
overflow-y: auto;
overscroll-behavior: contain;
}
/* I tre gruppi: si parla / si lavora / si amministra. Il filo fra l'uno e l'altro è tutta
la struttura che serve — dieci voci di fila si leggevano tutte ogni volta, perché niente
diceva dove finiva un genere di destinazione e cominciava l'altro. */
.rail-group {
display: flex; flex-direction: column; align-items: center;
gap: var(--sp-05);
}
.rail-group + .rail-group {
margin-top: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid var(--side-line);
}
.rail-btn {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 3px;
width: 100%;
background: transparent; border: 0; border-radius: var(--r-sm);
padding: var(--sp-15) var(--sp-05) var(--sp-1);
color: var(--rail-ink);
cursor: pointer;
transition: color var(--dur-1) var(--ease);
}
.rail-btn:hover { color: var(--rail-ink-strong); }
.rail-btn:hover .rail-ico { background: var(--rail-hover); }
/* Il fuoco da tastiera è un ANELLO attorno a tutta la voce e non si confonde con la voce
accesa, che invece si segna con la barretta d'accento a sinistra (vedi `.is-on`): due
stati diversi, due segni diversi — arrivarci col tabulatore e essere lì dentro non sono
la stessa cosa, e prima si assomigliavano troppo. */
.rail-btn:focus-visible {
outline: 2px solid var(--rail-ink-strong);
outline-offset: -2px;
color: var(--rail-ink-strong);
}
/* la velatura sta attorno all'ICONA, non a tutta la voce: segna dove sei senza che
l'etichetta diventi un blocco pieno */
.rail-ico {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 30px;
border-radius: 9px;
transition: background var(--dur-2) var(--ease);
}
/* DOVE SI È: velatura attorno all'icona, inchiostro pieno, e una barretta d'accento sul
filo sinistro della colonna. La sola velatura era un grigio su grigio scuro — con dieci
voci in fila bisognava cercarla. */
.rail-btn.is-on { color: var(--rail-ink-strong); }
.rail-btn.is-on .rail-ico { background: var(--rail-active); }
/* dentro il pulsante, non a filo di finestra: appiccicata al bordo dello schermo la
barretta si legge come un artefatto invece che come un segno */
.rail-btn.is-on::before {
content: "";
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 3px;
border-radius: var(--r-full);
background: var(--side-badge);
}
/* segnaposto: la voce c'è per dire che arriverà, ma non porta da nessuna parte */
.rail-btn.is-soon, .rail-tab.is-soon { opacity: 0.42; cursor: default; }
.rail-btn.is-soon:hover .rail-ico, .rail-tab.is-soon:hover { background: transparent; }
/* 12px, non 10,5: sotto quella misura un'etichetta si decifra, non si legge — ed era il
motivo per cui i nomi erano stati accorciati fino a cambiare lingua. La colonna adesso è
larga abbastanza (88px) perché ci stiano interi; se una parola dovesse comunque
eccedere, va a capo invece di finire ai puntini: un nome di destinazione tagliato non
dice dove porta. */
.rail-label {
font-size: 12px;
font-weight: var(--w-medium);
letter-spacing: -0.005em;
line-height: 1.2;
text-align: center;
max-width: 100%;
}
.rail-btn.is-on .rail-label { font-weight: var(--w-semi); }
/* nel cassetto le schede stanno cinque per riga: lì l'etichetta è quella corta, e una
riga sola (vedi `short` in `RAIL_GRUPPI`) */
.rail-tab .rail-label {
font-size: var(--text-xs);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* i non letti: un pallino quando basta sapere che c'è qualcosa, un numero quando il
numero serve a decidere se aprire adesso */
.rail-dot {
position: absolute; top: 1px; right: 2px;
width: 8px; height: 8px;
border-radius: var(--r-full);
background: var(--side-badge);
box-shadow: 0 0 0 2px var(--rail-bg);
}
.rail-count {
position: absolute; top: -2px; right: -3px;
min-width: 17px; padding: 0 var(--sp-1);
border-radius: var(--r-pill);
background: var(--side-badge); color: var(--on-accent);
font-size: var(--text-2xs); font-weight: var(--w-semi); line-height: 17px;
text-align: center;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--rail-bg);
}
/* le stesse voci in orizzontale, in cima al cassetto: col dito non c'è spazio per una
quinta colonna, quindi il rail diventa una riga di schede */
.rail-tabs {
flex: 0 0 auto;
display: flex;
gap: var(--sp-05);
padding: var(--sp-2) var(--sp-2) var(--sp-15);
border-bottom: 1px solid var(--side-line);
/* sette voci in una riga sola, alla larghezza di un telefono, vorrebbe dire sette
etichette tutte ai puntini: si va a capo, quattro per riga */
flex-wrap: wrap;
row-gap: var(--sp-05);
}
.rail-tab {
/* cinque colonne esatte (quattro gap da 2px in mezzo): con nove voci fanno 5 + 4, cioè
DUE righe invece di tre. Tre righe di schede in cima a un cassetto erano un terzo di
schermo speso in navigazione prima di vedere il contenuto */
flex: 0 0 calc(20% - 1.6px); min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: var(--sp-05);
background: transparent; border: 0; border-radius: var(--r-sm);
padding: var(--sp-15) var(--sp-05) var(--sp-1);
color: var(--side-ink);
cursor: pointer;
}
.rail-tab:hover { color: var(--side-ink-strong); background: var(--side-hover); }
.rail-tab.is-on { background: var(--side-active); color: var(--side-active-ink); }
.rail-tab.is-on .rail-label { font-weight: var(--w-semi); }
.rail-tab:focus-visible { outline: 2px solid var(--side-ink-strong); outline-offset: -2px; }
.rail-tab .rail-ico { width: 28px; height: 24px; }
.rail-tab .rail-dot, .rail-tab .rail-count { box-shadow: 0 0 0 2px var(--side-bg); }
.rail-tab.is-on .rail-dot, .rail-tab.is-on .rail-count { box-shadow: 0 0 0 2px var(--side-active); }
/* ============ barra laterale delle conversazioni ============ */
/* Inchiostro, non melanzana: col rail forma l'unico blocco scuro dell'app e serve a dire
"qui si parla". Vive solo sopra una conversazione. */
.side {
flex: 0 0 var(--side-col);
width: var(--side-col);
min-width: 0;
display: flex;
flex-direction: column;
background: var(--side-bg);
color: var(--side-ink);
border-right: 1px solid var(--side-line);
overflow: hidden;
}
.side[hidden] { display: none; }
.side-inner { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.side-top {
flex: 0 0 auto;
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4);
}
.ws-name {
flex: 1 1 auto;
min-width: 0;
font-size: var(--text-lg);
font-weight: var(--w-semi);
letter-spacing: var(--ls-lg);
color: var(--side-ink-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-compose {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: var(--side-ink-strong);
border: 0; border-radius: var(--r-full);
color: var(--side-bg);
cursor: pointer;
transition: opacity var(--dur-2) var(--ease);
}
.ws-compose:hover { opacity: 0.86; }
.ws-compose:focus-visible { outline: 2px solid var(--side-ink-strong); outline-offset: 2px; }
.side-find-wrap {
flex: 0 0 auto;
display: flex; align-items: center; gap: var(--sp-2);
margin: 0 var(--sp-3) var(--sp-2);
padding: var(--sp-1) var(--sp-2);
border: 1px solid var(--side-line);
border-radius: var(--r-sm);
color: var(--side-ink);
}
.side-find-wrap:focus-within { border-color: var(--side-ink-strong); }
.side-find-wrap svg { flex: 0 0 auto; }
.side-find {
flex: 1 1 auto; min-width: 0;
background: transparent; border: 0; outline: none;
color: var(--side-ink-strong);
font-size: var(--text-base);
}
.side-find::placeholder { color: var(--side-ink); opacity: 0.85; }
.side-find::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }
/* selettore Team / Clienti: due mezze pillole, il lato spento porta i suoi non letti */
.seg {
flex: 0 0 auto;
display: inline-flex;
padding: var(--sp-05);
border-radius: var(--r-pill);
background: var(--chip);
}
.seg-btn {
display: inline-flex; align-items: center; gap: var(--sp-15);
background: transparent; border: 0; border-radius: var(--r-pill);
padding: var(--sp-1) var(--sp-3);
font-size: var(--text-sm); color: var(--muted);
cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-on { background: var(--surface); color: var(--ink); font-weight: var(--w-medium); box-shadow: 0 0 0 1px var(--border), var(--sh-1); }
.seg-dot {
min-width: 16px; padding: 0 var(--sp-1);
border-radius: var(--r-pill);
background: var(--accent); color: var(--on-accent);
font-size: var(--text-2xs); font-weight: var(--w-semi); line-height: 16px;
font-variant-numeric: tabular-nums;
}
/* in cima alla colonna delle conversazioni — e nel cassetto, che quella colonna la
sostituisce — il selettore sta su fondo scuro e prende tutta la riga */
.side-inner .seg {
display: flex;
margin: var(--sp-05) var(--sp-3) var(--sp-2);
background: var(--side-line);
}
.side-inner .seg-btn { flex: 1 1 0; justify-content: center; color: var(--side-ink); }
.side-inner .seg-btn:hover { color: var(--side-ink-strong); }
.side-inner .seg-btn.is-on { background: var(--side-active); color: var(--side-active-ink); box-shadow: none; }
.side-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--sp-05) var(--sp-2) 20px;
}
.side-head {
margin: var(--sp-3) 0 var(--sp-1);
padding: 0 var(--sp-2);
color: var(--side-ink);
font-size: var(--text-xs);
font-weight: var(--w-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.side-head:first-child { margin-top: var(--sp-05); }
.side-row {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; min-height: 28px; min-width: 0;
text-align: left;
background: transparent; border: 0; border-radius: var(--r-xs);
padding: 3px var(--sp-2);
color: var(--side-ink);
font-size: var(--text-base);
font-weight: var(--w-medium);
cursor: pointer;
position: relative;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
/* il filo d'accento a sinistra vale più di una campitura: dice "sei qui" senza pesare.
Il rosso è quello del badge, non --accent: sul tema chiaro --accent è #8B0C15, e due
pixel di bordeaux sul fondo #141417 della barra non si vedono affatto (1,4:1). */
.side-row::before {
content: "";
position: absolute; left: 0; top: 5px; bottom: 5px;
width: 2px; border-radius: 0 2px 2px 0;
background: var(--side-badge);
opacity: 0;
transition: opacity var(--dur-2) var(--ease);
}
.side-row:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.side-row[aria-current="true"] { background: var(--side-active); color: var(--side-active-ink); }
.side-row[aria-current="true"]::before { opacity: 1; }
.side-row[aria-current="true"] .side-glyph { color: var(--side-active-ink); }
.side-row.has-unread { color: var(--side-ink-strong); font-weight: var(--w-semi); }
.side-row:focus-visible { outline: 2px solid var(--side-ink-strong); outline-offset: -2px; }
/* canale silenziato: riga smorzata, conteggio ancora presente ma spento (non un badge acceso) */
.side-row.is-muted, .dm-row.is-muted { opacity: 0.5; font-weight: 400; }
.side-row.is-muted .side-count, .dm-row.is-muted .side-count { background: var(--side-badge); opacity: 0.55; }
.side-glyph {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 15px;
color: var(--side-ink);
font-size: var(--text-base);
line-height: 1;
}
.side-glyph.is-lock svg { width: 13px; height: 13px; }
.side-row .avatar { flex: 0 0 auto; }
.side-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-count {
flex: 0 0 auto;
min-width: 18px; padding: 0 var(--sp-15);
border-radius: var(--r-pill);
background: var(--side-badge); color: var(--on-accent);
font-size: var(--text-2xs); font-weight: var(--w-semi); line-height: 18px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* --- la stella: appunta un canale in cima, per sé soli --- */
/* Sta SOPRA l'angolo destro della riga, fuori dal flusso: così la riga resta larga uguale
con e senza, e niente di quello che il foglio di stile sa già di `.side-row` va riscritto.
Il posto glielo fa `.side-row.has-star` con l'imbottitura a destra, o si sovrapporrebbe
al conteggio dei non letti. */
.side-row-slot { position: relative; }
.side-row.has-star { padding-right: 26px; }
.side-star {
position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
background: transparent; border: 0; border-radius: var(--r-xs);
color: var(--side-ink); cursor: pointer;
/* spenta è invisibile finché non serve: dodici stelle vuote in colonna sono dodici
inviti a fare una cosa che quasi nessuno fa dodici volte */
opacity: 0;
transition: opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.side-row-slot:hover .side-star,
.side-star:focus-visible,
.side-star.is-on { opacity: 1; }
.side-star:hover { color: var(--side-ink-strong); }
.side-star:focus-visible { outline: 2px solid var(--side-ink-strong); outline-offset: -2px; }
/* accesa la stella si riempie: è lo stesso disegno, non un secondo tracciato */
.side-star.is-on { color: var(--side-ink-strong); }
.side-star.is-on svg path { fill: currentColor; }
.side-empty { padding: var(--sp-1) var(--sp-2); color: var(--side-ink); font-size: var(--text-sm); opacity: 0.8; }
/* barra di strumenti dentro la colonna scura: "Segna tutte come lette" e simili */
.side-tools { flex: 0 0 auto; display: flex; align-items: center; padding: 0 var(--sp-3) var(--sp-2); }
.side-flat {
background: transparent; border: 0; border-radius: var(--r-xs);
padding: 4px 7px; margin-left: -7px;
color: var(--side-ink); font-size: var(--text-sm); cursor: pointer;
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.side-flat:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.side-flat:focus-visible { outline: 2px solid var(--side-ink-strong); outline-offset: -2px; }
/* ---- DM: righe alte, con anteprima e ora (la colonna diventa una casella di posta) ---- */
.dm-row {
display: flex; align-items: flex-start; gap: var(--sp-2);
width: 100%; min-width: 0;
text-align: left;
background: transparent; border: 0; border-radius: var(--r-sm);
padding: var(--sp-2);
color: var(--side-ink);
cursor: pointer;
transition: background var(--dur-1) var(--ease);
}
.dm-row:hover { background: var(--side-hover); }
.dm-row[aria-current="true"] { background: var(--side-active); color: var(--side-active-ink); }
.dm-row:focus-visible { outline: 2px solid var(--side-ink-strong); outline-offset: -2px; }
.dm-row .avatar { flex: 0 0 auto; }
.dm-row .side-count { align-self: center; }
.dm-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-05); }
.dm-top { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.dm-name {
flex: 1 1 auto; min-width: 0;
font-size: var(--text-base); font-weight: var(--w-semi);
color: var(--side-ink-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm-row[aria-current="true"] .dm-name { color: var(--side-active-ink); }
.dm-time {
flex: 0 0 auto;
font-size: var(--text-xs); color: var(--side-ink);
font-variant-numeric: tabular-nums;
}
.dm-row[aria-current="true"] .dm-time { color: var(--side-active-ink); opacity: 0.75; }
/* due righe di anteprima e non una: una riga sola taglia proprio dove si capisce di cosa
si parlava, e il senso dell'elenco è non dover aprire per ricordarselo */
.dm-prev {
font-size: var(--text-sm); line-height: 1.35;
color: var(--side-ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.dm-row[aria-current="true"] .dm-prev { color: var(--side-active-ink); opacity: 0.8; }
.dm-prev.is-empty { opacity: 0.65; font-style: italic; }
.dm-prev-me { opacity: 0.8; }
.dm-row.has-unread .dm-name { font-weight: var(--w-semi); }
.dm-row.has-unread .dm-prev { color: var(--side-ink-strong); font-weight: var(--w-medium); }
/* ---- Attività: schede, con un filo d'accento su quelle non lette ---- */
.act-card {
display: flex; align-items: flex-start; gap: var(--sp-2);
width: 100%; min-width: 0;
text-align: left;
background: transparent; border: 0;
border-bottom: 1px solid var(--side-line);
border-radius: 0;
padding: var(--sp-3) var(--sp-2);
color: var(--side-ink);
cursor: pointer;
transition: background var(--dur-1) var(--ease);
}
.act-card:hover { background: var(--side-hover); }
.act-card:focus-visible { outline: 2px solid var(--side-ink-strong); outline-offset: -2px; }
/* non letta: un filo d'accento sul bordo, come nell'Inbox — non una campitura */
.act-card.unread { box-shadow: inset 2px 0 0 var(--side-badge); }
.act-card .avatar { flex: 0 0 auto; }
.act-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-05); }
.act-top { display: flex; align-items: baseline; gap: var(--sp-15); min-width: 0; }
/* il glifo del tipo sta in testa alla riga del nome: da solo, senza etichetta scritta */
.act-top .act-glyph { flex: 0 0 auto; align-self: center; color: var(--side-ink); opacity: 0.92; }
.act-top .act-glyph svg { width: 12px; height: 12px; }
.act-who {
flex: 1 1 auto; min-width: 0;
font-size: var(--text-base); font-weight: var(--w-semi); color: var(--side-ink-strong);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.act-time {
flex: 0 0 auto;
font-size: var(--text-xs); color: var(--side-ink);
font-variant-numeric: tabular-nums;
}
.act-kind {
display: flex; align-items: center; gap: var(--sp-1);
font-size: var(--text-xs); color: var(--side-ink); opacity: 0.9;
}
.act-glyph { display: inline-flex; align-items: center; }
.act-glyph svg { width: 11px; height: 11px; }
.act-text {
font-size: var(--text-sm); line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.act-card.unread .act-text { color: var(--side-ink-strong); font-weight: var(--w-medium); }
/* ---- File: i filtri stanno nella barra, l'elenco nel pannello ---- */
.files-body { display: flex; flex-direction: column; gap: 0; }
/* Chi non ha la barra laterale (il cliente) i filtri se li tiene in riga sopra l'elenco:
pastiglie piccole, sulla stessa colonna di testo delle righe di file. */
.file-chips {
flex: 0 0 auto;
display: flex; flex-wrap: wrap; gap: var(--sp-15);
padding: var(--sp-3) var(--sp-5) var(--sp-1);
}
.file-chip {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-pill);
padding: var(--sp-1) var(--sp-3);
font-size: var(--text-sm);
color: var(--muted);
cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.file-chip:hover { background: var(--raise); color: var(--ink); }
.file-chip:focus-visible { outline: 2px solid var(--check-border); outline-offset: 1px; }
.file-chip[aria-current="true"] {
background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: var(--w-medium);
}
.file-row {
display: flex; align-items: center; gap: var(--sp-3);
border-bottom: 1px solid var(--hairline);
padding: var(--sp-1) 0;
}
.file-row:hover { background: var(--raise); }
.file-open {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-sm);
color: inherit; text-decoration: none;
}
.file-open:focus-visible { outline: 2px solid var(--check-border); outline-offset: -2px; }
.file-ico {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: var(--r-sm);
background: var(--chip);
color: var(--muted);
overflow: hidden;
}
.file-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.file-glyph { display: inline-flex; }
.file-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-05); }
.file-name {
font-size: var(--text-base); font-weight: var(--w-medium);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-meta {
font-size: var(--text-sm); color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* l'azione secondaria si mostra all'avvicinarsi: la riga primaria è "apri il file" */
.file-jump { flex: 0 0 auto; margin-right: var(--sp-3); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.file-row:hover .file-jump, .file-row:focus-within .file-jump { opacity: 1; }
/* col dito resta a vista: la regola vive nel blocco senza-hover della chat, più sotto.
Ce n'è uno solo in tutto il foglio, e va tenuto così. */
/* "Aggiungi canale" / "Nuovo messaggio" dentro la barra scura */
.side .side-add { color: var(--side-ink); }
.side .side-add:hover, .side-panel .side-add:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.side-panel .side-add { color: var(--side-ink); }
.side .inline-input, .side-panel .inline-input {
background: rgba(255, 255, 255, 0.12);
border-color: var(--side-line);
color: var(--side-ink-strong);
}
/* scelta della persona con cui aprire un messaggio diretto */
.dm-picker { display: flex; flex-direction: column; gap: var(--sp-05); max-height: 320px; overflow-y: auto; }
.dm-pick {
display: flex; align-items: center; gap: var(--sp-3);
width: 100%; text-align: left;
background: transparent; border: 0; border-radius: 8px;
padding: var(--sp-2) var(--sp-2); color: var(--ink); font-size: var(--text-base); cursor: pointer;
}
.dm-pick:hover { background: var(--raise); }
.dm-pick-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-add {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; text-align: left;
background: transparent; border: 0; border-radius: var(--r-xs);
padding: var(--sp-15) var(--sp-2); color: var(--muted); font-size: var(--text-base); cursor: pointer;
}
.side-add:hover { background: var(--raise); color: var(--ink); }
/* campo di inserimento al volo (nuovo progetto, nuova sezione, nuovo task) */
.inline-input {
width: 100%;
background: var(--field);
border: 1px solid var(--check-border);
border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-2);
font-size: var(--text-base);
outline: none;
box-shadow: var(--ring);
}
/* ============ barra laterale dei Progetti ============ */
/* Lo stesso nodo #side delle conversazioni, con l'elenco dei progetti al posto dei canali.
`.is-proj` dice SOLO "qui ci stanno i progetti" e cambia la larghezza: il vestito è lo
stesso, l'inchiostro di .side.
Prima si rivestiva di chiaro, e passare da Home a Task ribaltava la colonna da scura a
chiara — la navigazione dell'app cambiava colore a seconda di dove si stava, e il rail
scuro appiccicato a sinistra restava a fare da terzo blocco senza famiglia. Rail + barra
sono UN blocco di navigazione, sempre; il contenuto è la parte chiara, sempre.
Sotto i 900px la barra sparisce come l'altra e diventa il cassetto (.proj-drawer), che
invece resta chiaro: lì è un pannello sopra il contenuto, non la colonna di navigazione. */
.side.is-proj {
flex: 0 0 240px;
width: 240px;
}
.psb {
display: flex; flex-direction: column;
flex: 1 1 auto; min-height: 0;
padding: 10px var(--sp-2);
overflow-y: auto;
}
.psb-pin {
display: flex; align-items: center; gap: var(--sp-3);
width: 100%;
background: transparent; border: 0; border-radius: var(--r-sm);
padding: var(--sp-2) var(--sp-2);
color: var(--ink-2); font-size: var(--text-base); text-align: left; cursor: pointer;
position: relative;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.psb-pin:hover { background: var(--wash); color: var(--ink); }
.psb-pin.is-active { background: var(--accent-wash); color: var(--ink); font-weight: var(--w-medium); }
.psb-pin-ico { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
.psb-pin.is-active .psb-pin-ico { color: var(--ink); }
.psb-pin-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psb-head { display: flex; align-items: center; gap: var(--sp-15); margin: 15px var(--sp-1) 3px var(--sp-2); }
/* i 15px sono lo stacco dalla voce appuntata sopra. Al team quella voce non c'è (ce l'ha
nel rail): l'intestazione è la prima cosa della barra, e quel margine sarebbe un buco */
.psb-head:first-child { margin-top: var(--sp-05); }
.psb-title {
flex: 1 1 auto;
font-size: var(--text-xs); font-weight: var(--w-medium); letter-spacing: 0.06em; text-transform: uppercase;
color: var(--faint);
}
.psb-add {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
background: transparent; border: 0; border-radius: var(--r-xs);
color: var(--muted); cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.psb-add:hover { background: var(--raise); color: var(--ink); }
/* ---- l'elenco dei progetti dentro la colonna scura: gli stessi token di .side-row, così
i canali e i progetti si leggono come due elenchi dello stesso oggetto ---- */
.side.is-proj .psb-pin,
.side.is-proj .psb-row { color: var(--side-ink); }
.side.is-proj .psb-pin:hover,
.side.is-proj .psb-row:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.side.is-proj .psb-pin.is-active,
.side.is-proj .psb-row.is-active { background: var(--side-active); color: var(--side-active-ink); }
.side.is-proj .psb-pin-ico { color: var(--side-ink); }
.side.is-proj .psb-pin.is-active .psb-pin-ico { color: var(--side-active-ink); }
.side.is-proj .psb-title { color: var(--side-ink); }
.side.is-proj .psb-count { color: rgba(255, 255, 255, 0.44); }
.side.is-proj .psb-empty { color: var(--side-ink); }
.side.is-proj .psb-add { color: var(--side-ink); }
.side.is-proj .psb-add:hover { background: var(--side-hover); color: var(--side-ink-strong); }
.side.is-proj .psb-input {
background: rgba(255, 255, 255, 0.12);
border-color: var(--side-line);
color: var(--side-ink-strong);
}
.side.is-proj .psb-input::placeholder { color: rgba(255, 255, 255, 0.42); }
.side.is-proj .psb-pin:focus-visible,
.side.is-proj .psb-add:focus-visible,
.side.is-proj .psb-row:focus-visible { outline-color: var(--side-ink-strong); }
/* il quadratino del progetto è l'unico colore della colonna: gli si dà un filo attorno,
altrimenti una tinta scura (il blu, il viola) sparisce nel fondo */
.side.is-proj .psb-sq { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.psb-list { display: flex; flex-direction: column; }
.psb-row {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%;
background: transparent; border: 0; border-radius: var(--r-sm);
padding: var(--sp-15) var(--sp-2);
color: var(--ink-2); font-size: var(--text-base); text-align: left; cursor: pointer;
position: relative;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.psb-row:hover { background: var(--wash); color: var(--ink); }
.psb-row.is-active { background: var(--accent-wash); color: var(--ink); font-weight: var(--w-medium); }
.psb-row.is-active::before, .psb-pin.is-active::before {
content: "";
position: absolute; left: 0; top: 5px; bottom: 5px;
width: 2px; border-radius: 0 2px 2px 0;
background: var(--accent);
}
/* nella colonna scura vale lo stesso rosso del filo dei canali (vedi .side-row::before) */
.side.is-proj .psb-row.is-active::before,
.side.is-proj .psb-pin.is-active::before { background: var(--side-badge); }
.psb-sq { flex: 0 0 auto; width: 15px; height: 15px; border-radius: var(--r-xs); }
.psb-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psb-count { flex: 0 0 auto; font-size: var(--text-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.psb-empty { padding: var(--sp-15) var(--sp-2); font-size: var(--text-sm); color: var(--muted); }
.psb-new { padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); }
.psb-input {
width: 100%;
background: var(--field); border: 1px solid var(--check-border); border-radius: var(--r-xs);
padding: var(--sp-1) var(--sp-2); font-size: var(--text-base); color: var(--ink); outline: none; box-shadow: var(--ring);
}
.psb-pin:focus-visible, .psb-add:focus-visible, .psb-row:focus-visible {
outline: 2px solid var(--focus); outline-offset: -2px;
}
/* il cassetto dei progetti sul telefono: base chiara di .drawer-panel, senza padding doppio.
In colonna perché sopra l'elenco ci sta la riga di schede del rail, come nell'altro cassetto */
.drawer-panel.proj-drawer { width: min(280px, 84vw); padding: 0; display: flex; flex-direction: column; }
.drawer-panel.proj-drawer .psb { width: 100%; }
/* le schede del rail qui vivono su fondo chiaro: prendono l'inchiostro dei progetti, non
quello della barra delle conversazioni */
.drawer-panel.proj-drawer .rail-tabs { border-bottom-color: var(--border); }
.drawer-panel.proj-drawer .rail-tab { color: var(--ink-2); }
.drawer-panel.proj-drawer .rail-tab:hover { background: var(--wash); color: var(--ink); }
.drawer-panel.proj-drawer .rail-tab.is-on { background: var(--accent-wash); color: var(--ink); }
.drawer-panel.proj-drawer .rail-dot,
.drawer-panel.proj-drawer .rail-count { box-shadow: 0 0 0 2px var(--surface); }
/* ============ avatars ============ */
.avatar {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-full);
color: var(--avatar-ink);
font-weight: var(--w-medium);
line-height: 1;
letter-spacing: -0.01em;
}
.avatar.xs { width: 24px; height: 24px; font-size: var(--text-2xs); }
.avatar.sm { width: 20px; height: 20px; font-size: 9.5px; }
.avatar.md { width: 30px; height: 30px; font-size: var(--text-sm); }
.avatar-empty {
flex: 0 0 auto;
width: 24px; height: 24px;
border-radius: var(--r-full);
border: 1px dashed var(--check-border);
color: var(--faint);
display: inline-flex; align-items: center; justify-content: center;
font-size: var(--text-xs);
}
.proj-icon {
flex: 0 0 auto;
width: 30px; height: 30px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
color: var(--avatar-ink);
font-size: var(--text-xs);
font-weight: var(--w-semi);
letter-spacing: 0.02em;
}
/* ============ project header ============ */
.pane-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5) 0;
}
.pane-title {
font-size: var(--text-2xl);
line-height: var(--lh-2xl);
font-weight: var(--w-semi);
letter-spacing: var(--ls-2xl);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pane-meta { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
/* nelle teste di chat il titolo torna al gradino piccolo: lì il nome del canale sta in
riga con gli strumenti, non apre una pagina */
.chat-head .pane-title { line-height: var(--lh-lg); }
/* Testata di progetto: il SECONDO e ultimo posto col carattere da titolo (l'altro è
l'insegna del login). Un progetto è la cosa più grossa che l'app contiene — task,
bacheca, calendario, timeline stanno tutti sotto quel nome — e merita di aprirsi come
apre un documento, non come una riga d'elenco un gradino più grande. Il tondo del
corpo resta Geist ovunque: qui è il titolo e basta. */
.proj-head { padding-top: var(--sp-5); padding-bottom: var(--sp-4); align-items: center; }
.proj-head .pane-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
line-height: var(--lh-3xl);
font-weight: 400;
letter-spacing: var(--ls-3xl);
color: var(--ink);
}
/* l'icona cresce col titolo, altrimenti resta una spilla appuntata su una parola grossa */
.proj-head .proj-icon { width: 34px; height: 34px; font-size: var(--text-sm); }
/* Il campo "nuovo progetto" in testata è il gemello di quello nella barra laterale (stesso
data-fkey): su desktop la barra c'è sempre e lo ospita lei, quindi qui si nasconde per non
mostrarlo due volte; sotto i 900px la barra sparisce e questo torna ad essere l'unico. */
@media (min-width: 901px) { .head-inline { display: none; } }
/* le pagine "piatte" (Progetti a zero, I miei task, Inbox, Team e account, Dashboard, API,
App) non hanno le schede sotto alla testata: senza un filo restano sospese. Gli si dà la
stessa banda della chat — titolo, respiro, bordo — così ogni sezione apre allo stesso
modo. La vista progetto (che ha .tabs col suo bordo) e le teste di chat restano com'erano. */
.pane-head:has(> .pane-title.plain):not(.chat-head) {
padding-top: var(--sp-4);
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--border);
}
/* La testata della scheda Persone non ha titolo: «Team e account» lo dice la topbar e
«Persone» la scheda. Restano il cassetto del telefono e il conto delle righe, e siccome
la regola qui sopra non aggancia più, la banda con filo e respiro non arriva — ed è
giusto così: il filo lo disegna già la fila di schede, e sotto viene subito l'elenco.
Serve solo che il conto non stia incollato alla prima riga. */
.pane-head.is-bare { padding-bottom: var(--sp-2); }
.tabs {
flex: 0 0 auto;
display: flex;
gap: var(--sp-05);
padding: 0 var(--sp-5);
border-bottom: 1px solid var(--border);
margin-top: var(--sp-3);
}
.tab {
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: var(--sp-2) var(--sp-3) var(--sp-3);
margin-bottom: -1px;
border-radius: var(--r-xs) var(--r-xs) 0 0;
font-size: var(--text-base);
font-weight: var(--w-medium);
color: var(--muted);
cursor: pointer;
transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.tab:hover { color: var(--ink); background: var(--wash); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: var(--w-semi); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.toolbar {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-5);
flex-wrap: wrap;
}
.btn-accent {
display: inline-flex; align-items: center; gap: var(--sp-15);
background: var(--accent);
color: var(--on-accent);
border: 1px solid var(--accent);
border-radius: var(--r-xs);
padding: var(--sp-15) var(--sp-3);
font-size: var(--text-base);
font-weight: var(--w-medium);
cursor: pointer;
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-accent:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-accent:active:not(:disabled) { transform: scale(0.985); }
.btn-accent:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-accent:disabled, .btn-ghost:disabled, .toggle-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xs);
padding: var(--sp-15) var(--sp-3);
font-size: var(--text-base);
font-weight: var(--w-medium);
cursor: pointer;
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-ghost:hover:not(:disabled) { background: var(--raise); border-color: var(--check-border); }
.btn-ghost:active:not(:disabled) { transform: scale(0.985); }
.btn-ghost:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tool-select {
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-2);
font-size: var(--text-base);
color: var(--ink-2);
cursor: pointer;
}
.tool-select:hover { background: var(--raise); }
.tool-toggle {
background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-2); font-size: var(--text-base); color: var(--muted); cursor: pointer;
}
.tool-toggle:hover { background: var(--raise); color: var(--ink); }
.tool-toggle[aria-pressed="true"] { background: var(--chip); border-color: var(--border); color: var(--ink); }
.tool-filter {
margin-left: auto;
background: var(--field);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-3);
font-size: var(--text-base);
min-width: 210px;
outline: none;
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.tool-filter:focus { border-color: var(--check-border); box-shadow: var(--ring); }
/* visibilità per singolo cliente: pulsante di stato + popover con le caselle */
.cv { position: relative; flex: 0 0 auto; }
.cv-btn {
display: inline-flex; align-items: center; gap: var(--sp-2);
max-width: 260px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-3);
font-size: var(--text-sm);
color: var(--ink-2);
cursor: pointer;
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.cv-btn:hover:not(:disabled) { background: var(--raise); }
.cv-btn:disabled { cursor: not-allowed; color: var(--muted); }
.cv-btn[aria-expanded="true"] { background: var(--raise); border-color: var(--check-border); }
.cv-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--check-border); }
.cv-btn.is-on .cv-dot { background: var(--green); }
.cv-pop {
position: absolute;
top: calc(100% + 6px); right: 0;
z-index: var(--z-panel);
width: 260px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
padding: var(--sp-2);
}
.cv-head { margin: var(--sp-05) var(--sp-15) var(--sp-15); font-size: var(--text-sm); color: var(--muted); }
.cv-row {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-15);
border-radius: var(--r-xs);
font-size: var(--text-base);
cursor: pointer;
}
.cv-row:hover { background: var(--raise); }
.cv-row input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.cv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-empty { margin: var(--sp-1) var(--sp-15); font-size: var(--text-sm); color: var(--muted); }
.cv-note {
margin: var(--sp-2) var(--sp-15) var(--sp-05);
padding-top: var(--sp-2);
border-top: 1px solid var(--hairline);
font-size: var(--text-xs); line-height: 1.45; color: var(--muted);
}
/* ============ list ============ */
.list { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 60px; }
/* ============================================================ la griglia dell'elenco
Ogni colonna ha DUE variabili, e la differenza fra le due è tutta la meccanica:
--px-
quanto PESA quella colonna nel bilancio della riga. Una lunghezza, 0px
quando la colonna non c'è.
--gc-
la TRACCIA vera in `grid-template-columns`. Svuotarla (`--gc-pm: ;`)
toglie la traccia dal modello, e siccome le celle di quella colonna il JS
non le disegna, celle e tracce restano in pari. Azzerarla invece che
svuotarla non basterebbe: una traccia da 0px esiste ancora, la cella
successiva ci finirebbe dentro e le colonne si scollerebbero.
Il nome del task NON è più né una traccia elastica né un tetto fisso.
Era `minmax(320px, 1fr)`: il nome si prendeva tutto lo spazio libero e i metadati
finivano appiccicati al bordo destro — nella vista di consegna, dove le colonne
opzionali sono vuote, il nome del cliente stava a sinistra e il suo stato dall'altra
parte dello schermo. Sopra i 1600px c'era il difetto opposto: tetto fisso a 760px,
quindi lo stato si fermava sempre a 782px dal bordo qualunque cosa ci fosse a destra —
settecento pixel di niente su una vista a due colonne.
Adesso la larghezza si CALCOLA da quello che c'è: `100cqw` è la larghezza vera
dell'elenco (`.list` si dichiara contenitore, vedi più sotto), meno il peso delle
colonne accese, meno i margini della riga. Il `clamp` la tiene fra un minimo leggibile e
un tetto di lettura, e quello che avanza va nella traccia di coda `--gc-fill`. Tolta una
colonna, il nome si allarga da sé; accese tutte, si stringe e i metadati non scappano.
Il conto lo verifica `tests/lista-grid.test.js`, gradino per gradino.
`--gc-task` sta su `.grid` e non su `.list` apposta: `100cqw` misura il contenitore
ANTENATO, e un contenitore non può interrogare sé stesso. Su `.list` misurerebbe la
finestra. */
.list {
/* i margini della riga: `padding: 0 22px` su `.trow` e su `.list-head` */
--row-pad: 44px;
/* Il minimo è 320px e non 240: sotto quella misura un nome di task non è più un nome, è
un'abbreviazione. Se non ci sta, non si stringe il nome — si tolgono le colonne di
coda, ed è quello che fa la scala di `@container` più sotto.
Il tetto è 640px: oltre, un titolo non si legge meglio, e ogni pixel in più è un pixel
di distanza fra il nome e il suo stato. */
--task-min: 320px;
--task-max: 640px;
--gc-fill: 1fr;
--px-assignee: 130px;
--px-due: 94px;
/* Lo status porta l'etichetta OPERATIVA per intero: la più lunga è «Aspettando
cliente», che a 11.5px dentro la pastiglia (più l'imbottitura e gli 8px della cella)
chiede circa 134px. A 116px usciva «Aspettando clie…» — cioè la colonna per cui si
apre l'elenco era l'unica illeggibile. Da qui in giù non scende mai sotto i 148px. */
--px-status: 152px;
--px-prio: 88px;
/* la colonna Progetto esiste solo dove la griglia ce l'ha davvero ("I miei task"): nella
Lista di progetto pesa zero, o ruberebbe al nome uno spazio che nessuno occupa */
--px-project: 0px;
--px-pm: 100px;
--px-tec: 100px;
}
/* 156px e non 124: la colonna esiste in una vista sola ("I miei task"), e lì il nome del
progetto è l'unica cosa che dice a CHI appartiene la riga. A 124 usciva «Rilancio sito
Ac…» e «Onboarding clie…» — due clienti diversi che si leggevano uguali. Lo spazio lo
pagano le quattro colonne che questa vista non disegna più. */
.list.with-project { --px-project: 156px; }
/* "I miei task": la lista di CHI LAVORA, non un elenco di progetto.
Porta tre colonne invece di sette (`PERSONAL_COLS` in app.js: progetto, scadenza,
status — l'assegnatario sarebbe lo stesso nome su ogni riga), e quelle quattro colonne
in meno tornano al nome. Senza questo tetto più alto lo spazio recuperato finiva tutto
nella traccia di coda: una riga di sei parole e mezzo schermo di niente a destra, che è
proprio come si presentava questa vista. Le tracce restano quelle della griglia di
pass 1: qui cambia un tetto, non un modello. */
.list.personal { --task-max: 720px; }
.grid {
display: grid;
--gc-assignee: var(--px-assignee);
--gc-due: var(--px-due);
--gc-status: var(--px-status);
--gc-prio: var(--px-prio);
--gc-project: var(--px-project);
--gc-pm: var(--px-pm);
--gc-tec: var(--px-tec);
--meta-w: calc(
var(--px-assignee) + var(--px-due) + var(--px-status) + var(--px-prio) +
var(--px-project) + var(--px-pm) + var(--px-tec)
);
--gc-task: clamp(var(--task-min), calc(100cqw - var(--meta-w) - var(--row-pad)), var(--task-max));
grid-template-columns: var(--gc-task) var(--gc-assignee) var(--gc-due) var(--gc-status) var(--gc-prio) var(--gc-pm) var(--gc-tec) var(--gc-fill);
align-items: center;
}
/* "I miei task": stessa griglia più la colonna Progetto ATTACCATA al nome.
Stava in fondo, fra Priorità e P. M. — cioè dall'altra parte dello schermo rispetto al
nome che qualifica. In questa vista le righe vengono da progetti diversi, e «rifare la
home» senza sapere di chi è la home non è un task: è un frammento. L'ordine delle celle
in `buildTaskRow` e in `listHeader` segue questo, o celle e tracce si scollano. */
.grid.with-project {
grid-template-columns: var(--gc-task) var(--gc-project) var(--gc-assignee) var(--gc-due) var(--gc-status) var(--gc-prio) var(--gc-pm) var(--gc-tec) var(--gc-fill);
}
/* Una colonna che NESSUNA riga riempie: il JS mette la classe sul contenitore, qui si
toglie la traccia e si azzera il peso.
Il selettore arriva fino a `.grid` di proposito. Su `.list` la variabile si limiterebbe
a EREDITARE, e un valore ereditato perde contro qualunque dichiarazione applicata
direttamente a `.grid` — comprese quelle dei `@container` qui sotto, che così
resuscitavano la traccia di una colonna dichiarata vuota. Dichiarandola qui, sulla
stessa `.grid`, vince la specificità e la colonna spenta resta spenta a ogni gradino. */
.list.hide-assignee .grid { --gc-assignee: ; --px-assignee: 0px; }
.list.hide-due .grid { --gc-due: ; --px-due: 0px; }
.list.hide-status .grid { --gc-status: ; --px-status: 0px; }
.list.hide-prio .grid { --gc-prio: ; --px-prio: 0px; }
.list.hide-project .grid { --gc-project: ; --px-project: 0px; }
.list.hide-pm .grid { --gc-pm: ; --px-pm: 0px; }
.list.hide-tec .grid { --gc-tec: ; --px-tec: 0px; }
/* ============================================================ la scala delle colonne
Il problema che questa scala risolve: le soglie stavano sulla larghezza della FINESTRA,
ma l'elenco non vive nella finestra — vive in `.main`, cioè finestra meno il rail meno
la colonna dei progetti (~240px). Una finestra da 1080px lasciava all'elenco meno di
800px, e con le sette colonne di metadati il conto non tornava: la griglia sfondava il
contenitore e la colonna del nome restava schiacciata al minimo. Si leggeva «Rifare l…».
Quindi le soglie si misurano sull'elenco, con `@container`: `.list` si dichiara
contenitore e le sue righe — intestazione compresa, che sta dentro `.list` come le altre
e cade quindi sulle stesse regole — reagiscono alla larghezza REALE che hanno.
Ogni gradino toglie le colonne meno importanti e stringe quelle che restano, e la somma
sta SEMPRE sotto la larghezza minima del gradino (i 44px di `padding` delle righe sono
nel conto). Nome, assegnatario, scadenza e stato non si toccano mai: sono le quattro
cose per cui si apre un elenco di task, e devono restare ATTACCATE al nome — è per
questo che a cadere per primi sono P. M. e TECNICO, che sono responsabilità di contorno
e vivono comunque per intero nella scheda del task.
Un gradino tocca solo `--px-
` (il peso) e `--gc-
` (la traccia) delle colonne
che RESTANO o che TOGLIE. Non rialza mai una colonna spenta dai dati: quelle sono
inchiodate a zero da `.list.hide-
.grid`, che vince per specificità (vedi sopra).
Le vecchie media query più in basso restano come ripiego per un browser senza
`@container`: fanno la stessa cosa, misurando la finestra. */
.list { container-type: inline-size; container-name: lista; }
/* 1320px: via P. M. e TECNICO, le due colonne di responsabilità secondaria. Restano nome,
assegnatario, scadenza, stato, priorità, progetto: 320 + 130+94+152+88+124 + 44 = 952 */
@container lista (max-width: 1320px) {
.grid {
--gc-pm: ; --px-pm: 0px;
--gc-tec: ; --px-tec: 0px;
}
.grid > .col-pm, .grid > .col-tec { display: none; }
}
/* 1000px: via anche Priorità e Progetto. 320 + 120+88+150 + 44 = 722.
La soglia è 1000 e non 1040 per un motivo misurato: una finestra da 1366px — il portatile
più comune — meno il rail (88px) e la colonna dei progetti (240px) lascia all'elenco
1038px. A 1040 la Priorità sarebbe caduta per due pixel, proprio alla larghezza in cui
la si guarda di più. */
@container lista (max-width: 1000px) {
.grid {
--px-assignee: 120px;
--px-due: 88px;
--px-status: 150px;
--gc-prio: ; --px-prio: 0px;
--gc-project: ; --px-project: 0px;
}
.grid > .col-prio, .grid > .col-project { display: none; }
}
/* 760px: restano le quattro, strette. Lo stato NON scende sotto i 148px nemmeno qui:
«Aspettando cliente» si legge intero a ogni larghezza, o la colonna non serve a niente.
200 + 90+76+148 + 44 = 558 */
@container lista (max-width: 760px) {
.grid {
--task-min: 200px;
--px-assignee: 90px;
--px-due: 76px;
--px-status: 148px;
}
}
/* Ripiego per un browser che non conosce `container-type` — e quindi nemmeno `cqw`, che
renderebbe invalido tutto `grid-template-columns`. Lì il nome torna a essere la traccia
elastica di prima: metadati appiccicati a destra, ma una griglia che funziona. */
@supports not (container-type: inline-size) {
.grid {
--gc-task: minmax(320px, 1fr);
--gc-fill: ;
}
}
.list-head {
position: sticky; top: 0; z-index: var(--z-sticky);
background: var(--bg);
border-bottom: 1px solid var(--border);
height: 34px;
padding: 0 22px;
}
.list-head span {
font-size: var(--text-sm);
color: var(--muted);
font-weight: var(--w-medium);
padding-left: 8px;
}
.list-head span:first-child { padding-left: 0; }
/* la colonna della data si legge incolonnata a destra, testata compresa */
.list-head .col-due, .trow .col-due { text-align: right; padding-right: 10px; }
/* intestazione di sezione: una fascia a tutta larghezza, non una riga come le altre.
"Da fare 3" in grassetto ma senza fondo si perdeva fra i task che elenca */
.section-head {
display: flex; align-items: center; gap: 7px;
height: 40px;
padding: 0 22px;
margin-top: 8px;
background: var(--raise);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
}
/* nome marcato accanto al triangolo, conto tenue e incolonnato */
.section-name { font-weight: var(--w-semi); font-size: var(--text-base); color: var(--ink); }
.section-count { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Il "⋯" del task manager — sezione e testata di progetto.
Stessa forma del "…" di un canale in chat: l'azione distruttiva non sta esposta sulla
riga, sta dentro un menu che compare quando la riga la si sta guardando davvero
(hover) o quando ci si è arrivati col tasto di tabulazione (focus-within). */
.pop-menu-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.pop-menu-btn { opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.section-head:hover .pop-menu-btn,
.section-head:focus-within .pop-menu-btn,
.col-head:hover .pop-menu-btn,
.col-head:focus-within .pop-menu-btn,
.member-row:hover .pop-menu-btn,
.member-row:focus-within .pop-menu-btn,
.pop-menu-btn:focus-visible,
.pop-menu-btn[aria-expanded="true"] { opacity: 1; }
/* in testata di progetto non c'è una riga su cui passare: il "⋯" è sempre a vista.
Lo stesso nella barra della scheda di un task, dove è il vicino di casa di "chiudi". */
.proj-head .pop-menu-btn,
.panel-bar .pop-menu-btn { opacity: 1; }
.pop-menu {
position: absolute;
top: 100%; left: 0;
min-width: 190px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
padding: 5px;
z-index: var(--z-dropdown);
}
/* in testata di progetto il "⋯" è l'ultima cosa a destra: il menu si aggancia dall'altro
lato, o uscirebbe dallo schermo. Stessa cosa in fondo a una riga di persona. */
.proj-head .pop-menu,
.panel-bar .pop-menu,
.member-actions .pop-menu { left: auto; right: 0; }
.pop-menu .menu-item.danger { color: var(--danger); }
.trow {
height: 44px;
padding: 0 22px;
border-bottom: 1px solid var(--hairline);
cursor: pointer;
transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* `--cell-bg` è il fondo della riga, dichiarato come variabile perché serve anche alla
sfumatura sotto i pulsanti (vedi `.row-actions`): se le due tinte non combaciano, la
sovrimpressione si vede come un rettangolo appiccicato sopra il nome */
.trow { --cell-bg: var(--bg); }
.trow:hover { background: var(--wash); --cell-bg: var(--wash); }
.trow:focus-within { --cell-bg: var(--wash); }
/* riga aperta: fondo neutro e un filo d'accento sul bordo, niente campitura rossa */
.trow.is-open { background: var(--raise); box-shadow: inset 2px 0 0 var(--accent); --cell-bg: var(--raise); }
/* riga da cui la scheda è stata CHIUSA: lo stesso filo, spento a metà. Non è più aperta —
quindi niente fondo — ma è il punto in cui si stava, e chi torna all'elenco deve
ritrovarlo senza rileggere quaranta righe. Sparisce alla prima riga aperta dopo. */
.trow.is-picked { box-shadow: inset 2px 0 0 var(--muted); }
/* `position: relative` + il posto riservato a destra: i pulsanti di riga (sposta su/giù,
«Apri») stavano NEL FLUSSO della cella del nome, e i loro 61px li toglievano al titolo
anche da spenti (`opacity: 0` non toglie spazio). Fuori dal flusso il nome li recupera,
e il `padding-right` gli impedisce di finirci sotto quando all'hover si accendono. */
/* Niente spazio riservato. I 92px tenuti da parte per i pulsanti di riga erano 92px in
meno per il nome SEMPRE, anche sulle righe che non si stanno guardando — e su un elenco
stretto (vedi la scala di `@container`) restavano al titolo otto pixel. I pulsanti
passano SOPRA la coda del nome quando la riga è sotto il puntatore, con una sfumatura
che li stacca dal testo invece di un buco permanente. */
.cell-task { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0; }
/* guide di rientro dei sottotask: un filo per livello, alto quanto la riga. Il margine
negativo mangia il `gap` della cella, così il rientro resta esattamente 22px a livello */
.t-guides { flex: 0 0 auto; align-self: stretch; display: flex; margin-right: -9px; }
.t-guide { width: 22px; border-left: 1px solid var(--hairline); }
/* all'hover il filo si vede un po' di più: dice fin dove arriva il ramo che si sta toccando */
.trow:hover .t-guide, .trow.is-open .t-guide { border-left-color: var(--border); }
/* celle senza filo verticale: come in Asana le colonne le separano le pillole, non le righe */
.trow .cell { padding-left: 8px; font-size: var(--text-base); color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* una cella senza valore dice "vuota" con un trattino: una colonna di celle bianche si
legge come dati che non sono arrivati. Solo dove non c'è NESSUN nodo dentro, così le
celle che si disegnano già un segnaposto proprio non finiscono con due. */
.trow .cell.empty { color: var(--faint); }
.trow .cell.empty:empty::before { content: "—"; }
.t-title {
flex: 0 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: 3px 4px; margin: -3px -4px;
border-radius: var(--r-xs);
font-size: var(--text-base);
}
.t-title:hover { box-shadow: inset 0 0 0 1px var(--border); }
/* Un task completato è una cosa finita: la riga INTERA si spegne e il nome si sbarra.
La spunta verde no — è l'unica cosa che resta da vedere, ed è quella che si ri-clicca
per riaprirlo. (Stesso trattamento sulle schede della Bacheca, più sotto.) */
.trow.is-done .cell { color: var(--faint); }
.trow.is-done .t-title {
color: var(--muted);
text-decoration: line-through;
text-decoration-color: var(--faint);
text-decoration-thickness: 1px;
}
.trow.is-done .assign-cell, .trow.is-done .due-cell { color: var(--faint); }
.trow.is-done .avatar, .trow.is-done .status-chip,
.trow.is-done .prio-text, .trow.is-done .subchip { opacity: 0.65; }
.title-input {
flex: 1 1 auto; min-width: 0;
background: var(--field);
border: 1px solid var(--check-border);
border-radius: var(--r-xs);
padding: 3px 6px;
font-size: var(--text-base);
outline: none;
box-shadow: var(--ring);
}
.row-actions {
position: absolute; right: 0; top: 0; bottom: 0;
display: flex; align-items: center; gap: 2px;
/* la sfumatura parte trasparente e diventa il fondo della riga: la coda del nome sfuma
sotto i pulsanti invece di finirci sotto di netto. `--cell-bg` segue lo stato della
riga (normale, sotto il puntatore, aperta), o la sfumatura si vedrebbe come una banda */
padding-left: 28px;
background: linear-gradient(90deg, transparent, var(--cell-bg) 30%);
opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
/* Spenti non si premono nemmeno per sbaglio. Fuori dal flusso stanno SOPRA il posto
riservato a destra: invisibili ma cliccabili, un colpo di pollice lì dentro avrebbe
spostato un task di posto senza che nessuno avesse visto un pulsante. `pointer-events`
segue l'opacità, ovunque questa venga accesa (compresi i due blocchi per il dito, dove
la barra è sempre a vista). */
.row-actions { pointer-events: none; }
.trow:hover .row-actions, .trow:focus-within .row-actions { opacity: 1; pointer-events: auto; }
.mini {
background: transparent; border: 0; border-radius: var(--r-xs);
padding: 2px 7px; font-size: var(--text-sm); color: var(--muted); cursor: pointer;
}
.mini:hover { background: var(--chip); color: var(--ink); }
.mini.danger:hover { color: var(--danger); }
/* Sposta su/giù: icona a vista, nome solo per lo screen reader (title e aria-label
dicono già tutto a chi guarda, e due etichette per riga mangerebbero la colonna) */
.mini.move { display: inline-flex; align-items: center; padding: 2px 5px; }
.move-label {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* maniglia di trascinamento: compare all'hover della riga; col dito sparisce del tutto
(vedi il blocco per i puntatori senza hover, in fondo alla sezione della chat) */
.drag-handle {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 14px; margin-left: -4px;
color: var(--faint); cursor: grab;
opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.drag-handle:active { cursor: grabbing; }
/* la maniglia è anche un pulsante da tastiera (Alt+frecce): quando prende il fuoco si
vede, altrimenti sarebbe una fermata del Tab su un quadratino trasparente */
.drag-handle:focus-visible { opacity: 1; }
/* «Nessun commento.»: era uno `style` in linea, che la CSP (style-src 'self') blocca —
il testo restava attaccato ai bordi e nella console compariva una violazione */
.empty.cmt-empty { padding: 4px 0; } /* due classi: `.empty` arriva dopo, nel foglio */
.trow:hover .drag-handle, .trow:focus-within .drag-handle { opacity: 1; }
.trow.dragging, .card.dragging { opacity: 0.5; }
/* dove atterra: un filo d'accento sul bordo che si sta per scavalcare */
.trow.is-drop-before, .card.is-drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.trow.is-drop-after, .card.is-drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
/* priorità: pallino muto sotto i 680px, etichetta piena sopra */
.prio-dot { display: none; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--faint); }
.prio-dot.p-alta { background: var(--danger); }
.prio-dot.p-media { background: var(--warn); }
.prio-dot.p-bassa { background: var(--muted); }
/* UNA sola ricetta di pastiglia, per tutta l'app: raggio --r-xs, --text-xs a 500, stesso
passo d'imbottitura. Status, priorità, conto dei sottotask e distintivi stavano sulla
stessa riga con tre raggi e tre imbottiture diverse, e si vedeva. Cambia il colore, che
è l'unica cosa che deve distinguerli — la forma no. */
.status-chip, .col-prio .prio-text, .subchip, .badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--w-medium);
line-height: 1.5;
padding: var(--sp-05) var(--sp-2);
border-radius: var(--r-xs);
max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* su desktop la priorità è una pillola colorata come lo status (la firma di Asana): tinge il
testo esistente, senza aggiungere nodi — sotto i 680px torna il solo pallino (vedi media) */
.col-prio .prio-text {
background: var(--tint-neutral-bg); color: var(--tint-neutral-ink);
}
.col-prio.p-alta .prio-text { background: var(--tint-red-bg); color: var(--tint-red-ink); }
.col-prio.p-media .prio-text { background: var(--tint-amber-bg); color: var(--tint-amber-ink); }
.col-prio.p-bassa .prio-text { background: var(--tint-neutral-bg); color: var(--tint-neutral-ink); }
.col-prio.empty .prio-text { background: transparent; padding: 0; color: var(--faint); }
/* la cella di una persona — Assegnatario, ma anche P. M. e TECNICO, che sono campi
liberi: stessa pastiglia, stesso passo, così le tre colonne si leggono allo stesso modo */
.assign-cell { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; color: var(--muted); font-size: var(--text-base); }
.assign-cell > span:not(.avatar):not(.avatar-empty) {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.due-cell { font-size: var(--text-base); color: var(--muted); font-variant-numeric: tabular-nums; }
/* scaduta e ancora aperta: l'unico rosso della colonna, con un filo di peso in più */
.due-cell.overdue { color: var(--overdue); font-weight: var(--w-medium); }
/* in giornata: avviso, non allarme */
.due-cell.today { color: var(--warn); }
.due-cell.placeholder { color: var(--faint); }
/* i segnaposto ("Assegna", "Scadenza") non sono valori: sono inviti. Tinta da segnaposto,
e si accendono solo quando la riga è sotto il puntatore o sotto il fuoco — a riposo la
colonna resta vuota, che è la verità (nessuno assegnato, nessuna data) */
.ph {
display: inline-flex; align-items: center; gap: 7px;
color: var(--faint);
opacity: 0;
transition: opacity var(--dur-1) var(--ease);
}
.trow:hover .ph, .trow:focus-within .ph, .trow.is-open .ph { opacity: 1; }
/* chip: fondo tinto tenue, mai pieno saturo — il colore serve solo a distinguere lo stato */
.status-chip {
background: var(--tint-neutral-bg);
color: var(--tint-neutral-ink);
}
/* le velature semantiche vivono nei token: chiaro e scuro cambiano da soli, senza
dover ripetere ogni tinta in tre blocchi come prima */
.status-chip.s-corso { background: var(--tint-blue-bg); color: var(--tint-blue-ink); }
.status-chip.s-quasi { background: var(--tint-green-bg); color: var(--tint-green-ink); }
.status-chip.s-bloccato { background: var(--tint-red-bg); color: var(--tint-red-ink); }
.status-chip.s-aspettando { background: var(--tint-amber-bg); color: var(--tint-amber-ink); }
.status-chip.s-completato { background: var(--tint-green-bg); color: var(--tint-green-ink); }
.subchip {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 4px;
color: var(--chip-ink);
background: var(--chip);
font-variant-numeric: tabular-nums;
}
/* "I miei task" non ha la colonna Assegnatario — sono i miei task, quel nome sarebbe lo
stesso su ogni riga. L'unica riga con un proprietario DIVERSO è il sottotask di
qualcun altro, e quella se lo porta qui, accanto al nome: una faccia e un nome, non una
colonna. Si stringe per primo quando il nome è lungo (`min-width: 0` + puntini), perché
il nome del task viene prima di chi lo fa. */
.row-assign {
flex: 0 1 auto;
min-width: 0;
display: inline-flex; align-items: center; gap: 6px;
color: var(--muted); font-size: var(--text-xs);
padding: var(--sp-05) var(--sp-2) var(--sp-05) 3px;
border-radius: var(--r-full);
background: var(--chip);
}
.row-assign > span:not(.avatar):not(.avatar-empty) {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.twisty {
flex: 0 0 auto;
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; padding: 0; border-radius: 4px;
color: var(--faint); cursor: pointer;
}
.twisty:hover { background: var(--chip); color: var(--ink); }
.twisty svg { transition: transform var(--dur-2) var(--ease); }
.twisty[aria-expanded="true"] svg { transform: rotate(90deg); }
.twisty-spacer { flex: 0 0 auto; width: 16px; height: 16px; }
.circle {
flex: 0 0 auto;
width: 19px; height: 19px;
border: 1.5px solid var(--check-border);
border-radius: var(--r-full);
background: transparent;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
color: transparent;
transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.circle.sm { width: 17px; height: 17px; }
.circle:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.circle[aria-checked="true"] { background: var(--green); border-color: var(--green); color: var(--on-green); }
.circle:disabled { cursor: not-allowed; opacity: 0.6; }
.circle.pop { animation: pop var(--dur-3) var(--ease); }
@keyframes pop {
0% { transform: scale(0.82); }
55% { transform: scale(1.14); }
100% { transform: scale(1); }
}
.ghost-row {
display: flex; align-items: center; gap: 8px;
height: 38px;
padding: 0 22px 0 48px;
color: var(--muted);
font-size: var(--text-base);
background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.ghost-row:hover { color: var(--ink); background: var(--raise); }
.ghost-input-wrap { padding: 5px 22px 5px 48px; }
.add-section-wrap { padding: 14px 22px 0; }
/* ============ bacheca ============ */
/* Le colonne erano larghe 300px fisse: con tre sezioni su una finestra da 1400px restava
mezzo schermo di fondo vuoto a destra, e con dieci sparivano oltre il bordo senza che
niente lo dicesse. `minmax(272px, 1fr)` fa le due cose insieme — poche sezioni si
dividono la larghezza, molte si fermano a 272px e la bacheca scorre.
L'ombra sul bordo destro dice che c'è dell'altro: sono due sfumature per lato, una
ancorata al CONTENUTO (`local`, del colore del fondo) e una al riquadro (`scroll`,
scura). Quando si è al capo la prima copre la seconda, e l'ombra semplicemente non c'è:
nessun JavaScript, nessun listener sullo scorrimento. */
.board {
flex: 1 1 auto; min-height: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(272px, 1fr);
/* Una riga sola, alta quanto la bacheca. Serve a dare alle colonne un `max-height: 100%`
che significhi qualcosa: senza traccia dichiarata la riga si dimensionerebbe sul
contenuto più alto, e il tetto della colonna cadrebbe su sé stesso. */
grid-template-rows: 100%;
align-items: start; gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5) var(--sp-5);
overflow-x: auto; overflow-y: hidden;
background:
linear-gradient(to right, var(--app-bg) 40%, transparent) left center / 28px 100% no-repeat local,
linear-gradient(to left, var(--app-bg) 40%, transparent) right center / 28px 100% no-repeat local,
linear-gradient(to right, var(--wash), transparent) left center / 20px 100% no-repeat scroll,
linear-gradient(to left, var(--wash), transparent) right center / 20px 100% no-repeat scroll,
var(--app-bg);
background-origin: padding-box;
}
/* La colonna è un CONTENITORE, non un oggetto.
Prima era un riquadro bianco col suo filo di bordo, e dentro ci stavano schede bianche
col loro filo di bordo: due confini della stessa forza a due pixel di distanza, di cui
quello che conta — la scheda, la cosa che si legge, si clicca e si trascina — era il più
interno e quindi il più debole. Con poche schede il riquadro vuoto pesava più di quello
che conteneva.
Adesso il bordo ce l'ha solo la scheda. La colonna è una velatura sul fondo della
bacheca: si vede dove comincia e dove finisce, ma non compete con niente. Il nome in
testata resta pieno e scuro — è l'etichetta della colonna, non il suo riquadro. */
.col {
display: flex; flex-direction: column; min-height: 0;
/* alta quanto il suo contenuto, mai più della bacheca (`grid-template-rows: 100%` sopra):
la colonna che si allunga fino al bordo dello schermo con tre schede dentro era il
motivo per cui "Aggiungi task" finiva a mezzo metro dall'ultima scheda */
align-self: start; max-height: 100%;
background: var(--col-bg);
border: 0;
border-radius: var(--r-lg);
transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* Il bersaglio del rilascio resta clamoroso: senza bordo a riposo, in trascinamento la
colonna prende la tinta `--drop` e un anello d'accento disegnato all'interno (un
`box-shadow` non sposta di un pixel, un `border` che compare sì). */
.col.is-over { background: var(--drop); box-shadow: inset 0 0 0 1px var(--accent); }
/* Mentre si trascina — e solo allora — le colonne tornano a riempire l'altezza: un
bersaglio di rilascio alto 46px è un bersaglio che si manca. La classe la mette e la
toglie `buildBacheca`/`clearDropMarks` in app.js. */
.board.is-dragging .col { align-self: stretch; }
.col-head { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-3); }
/* il "+" della testata: scoperto, non in hover. Una colonna può essere lunga, e il gemello
in coda alle schede si vede solo dopo averle scorse tutte — se anche questo si nascondesse
fino al passaggio del puntatore, col dito non ci sarebbe nessun modo di aggiungere un
task senza arrivare in fondo. */
.col-head-add {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
background: transparent; border: 0; border-radius: var(--r-xs);
color: var(--muted); cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.col-head-add:hover { background: var(--raise); color: var(--ink); }
.col-head-add:focus-visible { outline: none; box-shadow: var(--ring); color: var(--ink); }
/* intestazione colonna: nome marcato e scuro, conto incolonnato, non un'etichetta tenue */
.col-name {
flex: 1 1 auto;
font-size: var(--text-base); font-weight: var(--w-semi); color: var(--ink);
cursor: text; border-radius: var(--r-xs); padding: 2px 4px; margin: -2px -4px;
}
.col-name:hover { box-shadow: inset 0 0 0 1px var(--border); }
.col-count { flex: 0 0 auto; font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--faint); font-variant-numeric: tabular-nums; }
/* La colonna scorre e si aggancia alle schede: fermandosi dove capita restava una scheda
tagliata a metà in fondo, che si legge come un guasto invece che come "ce n'è ancora". */
.col-body {
/* `min-height: 0` e non 60px: il vuoto di una colonna senza schede lo dichiara il
riquadro tratteggiato qui sotto (`:empty::after`), che ha una misura sua. Sessanta
pixel di corpo vuoto sotto l'ultima scheda erano solo distanza fra la scheda e
l'azione successiva. */
flex: 0 1 auto; min-height: 0; overflow-y: auto;
padding: var(--sp-1) var(--sp-3) var(--sp-3);
display: flex; flex-direction: column; gap: var(--sp-2);
scroll-snap-type: y proximity;
scroll-padding-block-start: var(--sp-1);
}
.card { scroll-snap-align: start; }
/* La sfumatura in fondo alla colonna: dice "sotto continua" senza aggiungere un nodo né
un velo colorato (una maschera funziona su qualunque fondo, tema scuro compreso).
Il punto delicato è QUANDO farla vedere: sempre, e una colonna con tre schede che non
scorre si ritrova l'ultima scheda mezza sbiadita per niente.
La risolve la timeline di scorrimento: se il riquadro non scorre la timeline è inattiva,
l'animazione non si applica affatto e --colfade resta 0. Se scorre, la sfumatura c'è per
tutto il tragitto e si chiude negli ultimi 12% — cioè quando l'ultima scheda è arrivata.
Un browser che non la conosce non vede nessuna sfumatura, che è il vecchio comportamento. */
@supports (animation-timeline: scroll()) {
@property --colfade {
syntax: "";
inherits: false;
initial-value: 0px;
}
.col-body {
mask-image: linear-gradient(to bottom, #000 calc(100% - var(--colfade)), transparent 100%);
animation: col-fade linear both;
animation-timeline: scroll(self block);
}
@keyframes col-fade {
0%, 88% { --colfade: 28px; }
100% { --colfade: 0px; }
}
}
/* colonna senza schede: un riquadro tratteggiato al posto del vuoto, che all'hover del
trascinamento dice dove si rilascia. Puro CSS: nessun nodo, nessun cambio di logica. */
.col-body:empty::after {
content: "Nessun task";
flex: 1 1 auto;
display: flex; align-items: center; justify-content: center;
min-height: 46px;
border: 1px dashed var(--border); border-radius: var(--r-md);
color: var(--faint); font-size: var(--text-sm);
transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.col.is-over .col-body:empty::after { content: "Rilascia qui"; border-color: var(--accent); color: var(--accent); }
/* a riposo la scheda non galleggia: filo di bordo e basta. All'hover si stacca di 1px e
prende l'ombra — è l'unico momento in cui un'ombra è giustificata qui. */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--sp-3) var(--sp-3) var(--sp-3);
cursor: pointer;
display: flex; flex-direction: column; gap: var(--sp-2);
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* Due pixel di priorità sul fianco sinistro: nella Lista la priorità ha la sua colonna,
in bacheca era l'unico dato che spariva del tutto. Un filo si legge di lato senza
rubare una riga alla scheda, e le tre tinte sono quelle delle pastiglie della Lista. */
.card { position: relative; overflow: hidden; }
.card::before {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: 2px;
background: transparent;
}
.card.p-alta::before { background: var(--tint-red-ink); }
.card.p-media::before { background: var(--tint-amber-ink); }
.card.p-bassa::before { background: var(--tint-neutral-ink); opacity: 0.5; }
.card.p-alta, .card.p-media, .card.p-bassa { padding-left: calc(var(--sp-3) + 2px); }
.card:hover { border-color: var(--check-border); transform: translateY(-1px); box-shadow: var(--sh-card); }
.card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.card.dragging { opacity: 0.5; }
.card-title { font-size: var(--text-base); overflow-wrap: anywhere; }
.card.is-done .card-title {
color: var(--muted);
text-decoration: line-through;
text-decoration-color: var(--faint);
text-decoration-thickness: 1px;
}
/* come nella Lista: si spegne tutto tranne la spunta */
.card.is-done .avatar, .card.is-done .subchip,
.card.is-done .due-cell, .card.is-done .avatar-empty { opacity: 0.65; }
/* Il piede della scheda porta cinque cose (spunta, sottotask, scadenza, status, faccia) in
272px: se non va a capo la scadenza si spezza su due righe e lo status diventa «In co…».
Va a capo, e la faccia resta appesa a destra della riga in cui finisce. */
.card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); row-gap: var(--sp-15); }
.card-foot .spacer { flex: 1 1 auto; }
.card-foot .due-cell { white-space: nowrap; }
.card-foot .status-chip { min-width: 0; }
/* la faccia si spinge a destra da sé: col `.spacer` di prima, quando il piede andava a
capo lo spazio elastico restava sulla riga di sopra e l'avatar cominciava la seconda
riga da sinistra, in mezzo al nulla */
.card-foot > .avatar, .card-foot > .avatar-empty { margin-left: auto; }
/* il campo in riga che prende il posto di "Aggiungi task": stessi margini del pulsante,
così aprendolo la colonna non sussulta */
.col-new { flex: 0 0 auto; padding: 0 var(--sp-3) var(--sp-3); }
.col-add {
flex: 0 0 auto;
display: flex; align-items: center; gap: var(--sp-2);
background: transparent; border: 0; border-radius: var(--r-sm);
padding: var(--sp-2) var(--sp-3); margin: 0 var(--sp-3) var(--sp-3);
color: var(--muted); font-size: var(--text-base); cursor: pointer; text-align: left;
}
.col-add:hover { background: var(--surface); color: var(--ink); }
.col-add:focus-visible { outline: none; box-shadow: var(--ring); color: var(--ink); }
/* ============ calendario ============ */
.cal { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.cal-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cal-title { font-weight: var(--w-semi); font-size: var(--text-base); text-transform: capitalize; }
/* un mese senza scadenze lo dice qui, in coda al titolo: la griglia resta, perché le
date servono comunque, e una riga smorta basta a distinguere "vuoto" da "non caricato" */
.cal-note { font-size: var(--text-sm); color: var(--faint); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.cal-dow { background: var(--raise); padding: var(--sp-2) var(--sp-2); font-size: var(--text-xs); color: var(--muted); }
.cal-cell { background: var(--surface); min-height: 104px; padding: var(--sp-15); display: flex; flex-direction: column; gap: var(--sp-1); }
.cal-cell.out { background: var(--raise); }
.cal-day { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-cell.today .cal-day { color: var(--accent); font-weight: var(--w-semi); }
.cal-task {
text-align: left; background: var(--chip); border: 0; border-radius: var(--r-xs);
padding: 3px var(--sp-15); font-size: var(--text-xs); color: var(--ink-2); cursor: pointer;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.cal-task:hover { background: var(--raise); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.cal-task.done { text-decoration: line-through; color: var(--muted); }
/* ============ timeline ============ */
.tl { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.tl-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: var(--sp-3); height: 34px; border-bottom: 1px solid var(--hairline); }
.tl-name { font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* il nome è un pulsante: apre il task. Lo stile stava inline nel JS, che è il posto
sbagliato per cinque dichiarazioni che non cambiano mai */
button.tl-name { background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }
button.tl-name:hover { text-decoration: underline; }
.tl-row.is-sub .tl-name { color: var(--ink-2); }
.tl-track { position: relative; height: 18px; background: var(--raise); border-radius: var(--r-xs); }
/* la corsia è rientrata di 6px per lato: senza, un pallino centrato sull'ULTIMO giorno
della finestra restava per metà fuori dalla pista, e le barre andavano a sbattere
contro gli angoli arrotondati */
.tl-lane { position: absolute; inset: 0 6px; }
.tl-bar { position: absolute; top: 3px; height: 12px; border-radius: var(--r-pill); background: var(--accent); opacity: 0.85; }
.tl-bar.done { background: var(--green); }
/* un task con la SOLA scadenza è un punto nel tempo, non un intervallo: pallino e data
scritta accanto — prima era una barretta del 2% senza nessuna indicazione */
.tl-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: var(--r-full); background: var(--accent); }
.tl-dot.done { background: var(--green); }
.tl-dot-date {
position: absolute; top: 50%; transform: translateY(-50%); margin-left: var(--sp-3);
font-size: var(--text-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* Ribaltata: si ancora al bordo destro della sua metà (`right` lo mette il JS), non a un
`transform` che porta la data fuori dalla pista quando la pista è stretta. */
.tl-dot-date.before { left: auto; margin-left: 0; margin-right: var(--sp-3); transform: translateY(-50%); }
/* la linea di oggi: sfora sopra e sotto la pista, così le corsie adiacenti la ricuciono
in una riga sola che attraversa tutta la timeline */
.tl-today { position: absolute; top: -8px; bottom: -8px; width: 0; border-left: 1px dashed var(--accent); opacity: 0.6; }
.tl-sec { font-weight: var(--w-medium); font-size: var(--text-sm); color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--sp-4) 0 var(--sp-2); }
.tl-scale { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; padding-left: 232px; margin-bottom: var(--sp-1); }
/* ============ detail panel ============ */
.panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(560px, 52%);
display: flex; flex-direction: column;
background: var(--surface);
box-shadow: var(--sh-panel);
z-index: var(--z-rail);
animation: slide-in var(--dur-3) var(--ease);
}
@keyframes slide-in {
from { transform: translateX(18px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* ---- su uno schermo largo la scheda si mette IN FILA, non sopra ----
Fino a qui la scheda è una tenda: `position: absolute`, ancorata a destra, 52% della
larghezza. Su uno schermo largo quella tenda copriva la metà destra dell'elenco — e con
la colonna del nome ormai a tetto (`--task-max`, vedi la griglia) copriva proprio le
righe che si stavano leggendo: si apriva un task e si perdeva di vista il suo vicino.
Sopra la soglia `#main` diventa una fila di due colonne e la scheda è la seconda. Non
copre niente: l'elenco si restringe e la scala di `@container` gli toglie da sé le
colonne che non ci stanno più — è esattamente il lavoro per cui quella scala misura il
CONTENITORE e non la finestra. Il nome del task resta a vista in ogni caso.
Sotto la soglia non si tocca niente: lì la finestra non basta per due colonne vere, e
una scheda strizzata a 380px si legge peggio di una tenda.
La soglia è 1710, non 1440 e nemmeno 1680. Il metro non è un numero di pixel sul nome ma
il COSTO della scheda: quanti nomi finiscono a puntini in più rispetto alla stessa pagina
con la scheda chiusa. Misurato sull'elenco vero (411 righe, 9 nomi già a puntini da
chiusa): a 1440 e a 1680 aprire la scheda ne tronca 4 in più (nome a 531px contro 554),
a 1710 zero (549px contro 554). Sotto la soglia la scheda resta una tenda — copre la
colonna di stato, ma quello che resta scoperto si legge intero, che è il male minore.
Sarebbe più giusto misurare il CONTENITORE e non la finestra — la colonna laterale non
è sempre la stessa, e un cliente non ce l'ha affatto. Ma un `@container` non può
riguardare l'elemento che lo dichiara, e la fila è proprio `.main`: dovrebbe misurarsi
da sé. La scala interna dell'elenco quel lavoro lo fa già (`@container lista`), e questa
soglia le lascia sempre abbastanza spazio. */
@media (min-width: 1710px) {
.main.with-panel { flex-direction: row; }
.main.with-panel > .main-inner { flex: 1 1 auto; min-width: 0; }
.main.with-panel > .panel {
position: static;
flex: 0 0 min(560px, 40%);
width: auto;
border-left: 1px solid var(--border);
box-shadow: none;
animation: none;
}
}
.panel-bar { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-15); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
/* «Completato» è uno STATO del task, non il comando principale del pannello: si spunta,
come si spunta nell'elenco, e la spunta sta in cima al contenuto insieme al titolo che
descrive. Prima era un pulsante largo trecento pixel in cima a tutto — la cosa più
grossa del pannello era il modo di chiuderlo, non quello che c'era scritto dentro. */
.panel-done {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; text-align: left;
background: transparent; border: 0; border-radius: var(--r-xs);
padding: var(--sp-15) var(--sp-2); margin: 0 0 var(--sp-1) calc(var(--sp-2) * -1);
color: var(--muted); font-size: var(--text-sm); cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.panel-done:hover:not(:disabled) { background: var(--raise); color: var(--ink-2); }
.panel-done:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.panel-done:disabled { opacity: 0.55; cursor: not-allowed; }
/* la casella: lo stesso tondo vuoto delle righe d'elenco, che diventa verde da spuntato */
.panel-done-box {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
border: 1.5px solid var(--check-border); border-radius: var(--r-full);
color: transparent;
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.panel-done-box svg { width: 12px; height: 12px; }
.panel-done:hover:not(:disabled) .panel-done-box { border-color: var(--muted); color: var(--faint); }
.panel-done.is-done .panel-done-box { background: var(--green); border-color: var(--green); color: var(--on-green); }
.panel-done.is-done { color: var(--green); }
.panel-done.is-done:hover .panel-done-box { color: var(--on-green); }
.spacer { flex: 1 1 auto; }
.panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px var(--sp-5) 26px; }
.crumb {
display: inline-flex; align-items: center; gap: var(--sp-1);
background: transparent; border: 0; border-radius: var(--r-xs);
padding: 3px 7px 3px 5px; margin: 0 0 8px -5px;
color: var(--muted); font-size: var(--text-sm); cursor: pointer; max-width: 100%;
}
.crumb:hover { background: var(--raise); color: var(--ink); }
.crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-title {
width: 100%;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
padding: 4px 7px; margin: 0 0 16px -7px;
font-size: var(--text-xl); font-weight: var(--w-semi); letter-spacing: -0.02em; line-height: 1.3;
outline: none;
}
.panel-title:hover:not(:read-only) { border-color: var(--border); }
.panel-title:focus { border-color: var(--check-border); background: var(--field); box-shadow: var(--ring); }
.fields { display: flex; flex-direction: column; }
.field {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
align-items: center;
gap: var(--sp-3);
min-height: 38px;
padding: 3px 0;
}
/* Dieci campi di fila sono un elenco senza articolazioni: chi cerca la scadenza la trova
contando. Il filo raggruppa quello che si guarda insieme — chi ci lavora, quando, come
sta, i campi nostri — e costa un pixel. */
.field.is-group { border-top: 1px solid var(--hairline); margin-top: var(--sp-15); padding-top: var(--sp-15); }
.field-label { font-size: var(--text-base); color: var(--muted); }
/* ---- la fascia dei campi ESSENZIALI: stato, assegnatario, scadenza ----
Sono i tre campi per cui una scheda si apre davvero, e prima erano tre righe in mezzo ad
altre cinque: otto righe da 38px — trecento pixel — fra il titolo e la descrizione, cioè
fra chi apre il task e il lavoro che ci sta dentro. Su un portatile la descrizione
cominciava sotto il bordo del pannello.
Qui vanno in orizzontale, etichetta SOPRA il valore: tre righe diventano una, e i tre
campi si leggono in un colpo d'occhio invece che scorrendo una colonna. `auto-fit` con
un minimo di 132px li rimette in colonna da sé quando il pannello è stretto (col dito, o
a finestra dimezzata) — senza una soglia scritta a mano, che sarebbe sbagliata a ogni
larghezza di pannello diversa da quella per cui è stata scritta. */
.fields.essential {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: var(--sp-2) var(--sp-4);
margin-bottom: var(--sp-4);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--hairline);
}
.fields.essential .field {
display: flex; flex-direction: column; align-items: stretch;
gap: 3px; min-height: 0; padding: 0;
border-top: 0; margin-top: 0; padding-top: 0;
}
.fields.essential .field-label {
font-size: var(--text-xs); font-weight: var(--w-medium);
color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em;
}
.fields.essential .field-value { width: 100%; }
.fields.essential .field-select, .fields.essential .date-input { width: 100%; min-width: 0; }
/* ---- "Altri campi": il contorno, ripiegato ----
Inizio, priorità, progetto e sezione, P. M. e TECNICO non sono meno importanti: sono
meno FREQUENTI. Si compilano una volta e poi si rileggono di rado, mentre il costo di
tenerli sempre aperti lo pagava ogni apertura di scheda. La riga che li apre è un
comando quieto — nessun fondo, nessun bordo — perché è un ripiegamento, non un'azione. */
.panel-more {
display: flex; align-items: center; gap: var(--sp-15);
width: 100%;
background: transparent; border: 0; border-radius: var(--r-sm);
padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
color: var(--muted); font-size: var(--text-sm); font-weight: var(--w-medium);
cursor: pointer;
transition: color var(--dur-1) var(--ease);
}
.panel-more:hover { color: var(--ink-2); }
.panel-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.panel-more svg { width: 14px; height: 14px; transition: transform var(--dur-2) var(--ease); }
.panel-more[aria-expanded="true"] svg { transform: rotate(90deg); }
.fields.more { padding-bottom: var(--sp-2); }
/* `hidden` da solo non basta: `.fields` dichiara `display: flex`, e una dichiarazione di
`display` batte l'attributo. Senza questa riga la sezione si diceva chiusa (caret
girato, `aria-expanded="false"`) e restava a schermo per intero — cioè esattamente il
problema che doveva risolvere. */
.fields.more[hidden] { display: none; }
.field-value { min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
/* Un menu e una data devono avere la stessa altezza, lo stesso raggio e lo stesso filo di
un campo di testo: prima erano due controlli nativi, ciascuno col disegno che il sistema
gli dà — la freccina grigia di macOS accanto al calendarietto azzurro — e nella stessa
colonna sembravano tre famiglie di comandi diverse.
`appearance: none` toglie la decorazione del sistema; la freccina la disegniamo noi con
una SVG in `background-image`, che segue `currentColor` via `stroke` scritto a mano.
Il calendario nativo dentro `` NON si può rifare in CSS: quello resta
del browser (e va bene: è un widget che la gente conosce). Qui si allinea solo la
cornice, e il suo pulsantino prende la stessa opacità del resto. */
.field-select, .date-input {
appearance: none; -webkit-appearance: none;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm);
min-height: 30px;
padding: var(--sp-1) var(--sp-2);
font-family: inherit;
font-size: var(--text-base);
color: var(--ink);
max-width: 100%;
cursor: pointer;
outline: none;
}
/* posto per la freccina, e la freccina */
.field-select {
padding-right: var(--sp-5);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378736E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-2) center;
}
:root[data-theme="dark"] .field-select,
:root[data-theme="dark"] .select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .field-select,
:root:not([data-theme="light"]) .select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A0A0A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
}
.field-select:hover:not(:disabled), .date-input:hover:not(:disabled) { border-color: var(--border); background-color: var(--field); }
.field-select:focus, .date-input:focus { border-color: var(--check-border); background-color: var(--field); box-shadow: var(--ring); }
.field-select:disabled, .date-input:disabled { opacity: 0.6; cursor: not-allowed; }
.date-input { font-variant-numeric: tabular-nums; }
/* il pulsantino del calendario: pieno colore era l'unica macchia azzurra dell'app */
.date-input::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.date-input:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }
.field-text {
background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-2); font-size: var(--text-base); width: 100%; outline: none;
}
.field-text:hover:not(:read-only) { border-color: var(--border); background: var(--field); }
.field-text:focus { border-color: var(--check-border); background: var(--field); box-shadow: var(--ring); }
.proj-chip {
display: inline-flex; align-items: center; gap: var(--sp-15);
background: var(--chip); color: var(--chip-ink);
border-radius: var(--r-xs); padding: 3px var(--sp-2);
font-size: var(--text-sm);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-label { font-size: var(--text-sm); color: var(--muted); margin: var(--sp-5) 0 var(--sp-2); font-weight: var(--w-medium); }
.panel-label.tight { margin-top: var(--sp-4); }
.panel-desc {
width: 100%; min-height: 88px; resize: vertical;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-sm);
padding: 9px var(--sp-3);
line-height: 1.6; font-size: var(--text-base); color: var(--ink-2);
outline: none;
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.panel-desc:focus { border-color: var(--check-border); background: var(--field); color: var(--ink); box-shadow: var(--ring); }
.panel-desc::placeholder { color: var(--faint); }
.panel-desc[readonly] { background: var(--raise); }
.sub-row {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) var(--sp-15) var(--sp-2) 0;
border-bottom: 1px solid var(--hairline);
cursor: pointer; border-radius: var(--r-xs);
transition: background var(--dur-2) var(--ease);
}
.sub-row:hover { background: var(--raise); }
.sub-row .st { flex: 1 1 auto; min-width: 0; font-size: var(--text-base); overflow-wrap: anywhere; }
.sub-row.is-done .st {
color: var(--muted);
text-decoration: line-through;
text-decoration-color: var(--faint);
text-decoration-thickness: 1px;
}
/* position: relative = ancora della barra azioni, che è assoluta e quindi esce dalla
griglia: comparire all'hover non deve spostare di un pixel quello che c'è sotto */
.cmt { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; }
.cmt-body { min-width: 0; }
.cmt-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.cmt-author { font-weight: var(--w-semi); font-size: var(--text-base); }
.cmt-time { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0; color: var(--muted); opacity: 0.85; font-variant-numeric: tabular-nums; }
.cmt-text { font-size: var(--text-base); color: var(--ink-2); overflow-wrap: anywhere; white-space: pre-wrap; }
/* una menzione è un riferimento a una persona, non una parola in grassetto rosso: prende
la stessa velatura di marchio del tag di canale qui sotto — stesso fondo, stesso raggio,
stesso rientro negativo — così menzione e cancelletto si leggono come una cosa sola */
.cmt-text .mention, .msg-text .mention {
color: var(--accent); font-weight: var(--w-medium);
background: var(--accent-wash); border-radius: var(--r-xs);
padding: 0 3px; margin: 0 -1px;
}
/* il tag di un canale: stessa famiglia della menzione — stesso accento, stesso peso — ma
questo si preme, e la velatura più il cursore sono lì a dirlo. `display: inline` perché
scorre DENTRO il testo: una pastiglia in blocco romperebbe l'a capo di una frase lunga */
.chan-tag {
display: inline;
margin: 0 -1px; padding: 0 3px;
background: var(--accent-wash); color: var(--accent);
border: 0; border-radius: var(--r-xs);
font: inherit; font-weight: var(--w-medium);
cursor: pointer;
}
.chan-tag:hover { background: var(--accent-soft); }
.chan-tag:focus-visible { outline: none; box-shadow: var(--ring); }
/* il testo passa dal parser markdown-lite come in chat: i blocchi hanno già il loro
spazio, il pre-wrap del contenitore raddoppierebbe le righe vuote */
.cmt-text:has(.md-p), .cmt-text:has(.md-list), .cmt-text:has(.md-pre), .cmt-text:has(.md-quote) { white-space: normal; }
.cmt-tomb { font-style: italic; color: var(--faint); }
.cmt.is-editing { background: var(--raise); border-radius: var(--r-sm); padding-left: var(--sp-2); padding-right: var(--sp-2); }
/* stessa barra dei messaggi, stesso posto: angolo in alto a destra, solo all'hover */
.cmt:hover > .cmt-tools, .cmt:focus-within > .cmt-tools { opacity: 1; pointer-events: auto; }
/* al posto del composer, per un cliente: stessa fascia in fondo al pannello, una riga sola */
.cmt-signpost {
flex: 0 0 auto; margin: 0;
padding: var(--sp-4) var(--sp-5) calc(16px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--border);
background: var(--surface);
}
.composer-box {
display: flex; gap: var(--sp-3); align-items: flex-start;
padding: var(--sp-3) var(--sp-5) var(--sp-4);
border-top: 1px solid var(--border);
background: var(--surface);
}
.composer-inner {
flex: 1 1 auto; min-width: 0;
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--field);
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.composer-inner:focus-within { border-color: var(--check-border); box-shadow: var(--ring); }
.composer-area {
width: 100%; min-height: 54px; max-height: 160px; resize: none;
border: 0; background: transparent; outline: none;
padding: 9px var(--sp-3); font-size: var(--text-base); line-height: 1.5;
}
.composer-area::placeholder { color: var(--faint); }
/* ============ composer della chat: barra, area, strumenti, invio ============ */
/* dentro la chat la fascia del composer non ha un filo tutto suo: il feed finisce, il
riquadro comincia, e il bordo è quello del riquadro (come in Slack) */
.feed-foot .composer-box, .thread-foot .composer-box { border-top: 0; background: var(--bg); padding-top: var(--sp-1); }
/* La riga di scrittura si ferma dove si ferma la conversazione, e comincia dove comincia:
il tetto comprende i due margini del riquadro (`padding: … var(--sp-5)`, box-sizing
border-box), che sono gli stessi del feed — così il bordo destro del composer cade sulla
stessa verticale del bordo destro dei messaggi. Un campo di scrittura largo 1700px sotto
una colonna di messaggi larga 1120 leggeva come due pagine diverse. */
.feed-foot .composer-box { max-width: calc(var(--measure-msg-wide) + var(--sp-5) * 2); }
.feed-foot .composer-inner, .thread-foot .composer-inner { border-color: var(--check-border); }
.composer-rich { position: relative; border-radius: var(--r-lg); overflow: visible; }
.composer-rich .composer-area {
min-height: 76px; max-height: 220px;
padding: 10px var(--sp-3);
transition: min-height var(--dur-3) var(--ease), max-height var(--dur-3) var(--ease);
}
/* --- a riposo: una riga sola ---
Un riquadro alto un quarto di schermo davanti a una casella vuota prometteva un tema, non
un messaggio. Chiuso, il composer è la riga di scrittura più le icone che servono davvero
e l'invio; si apre al fuoco o appena c'è qualcosa da mandare (is-collapsed la mette
syncOpen() in app.js). La barra di formattazione, chiusa, sta via anche con «Aa» acceso.
L'altezza cambia con la durata lunga dei token — chi ha chiesto meno movimento è già
servito dal blocco prefers-reduced-motion in cima al foglio. */
.composer-rich.is-collapsed { display: flex; align-items: center; }
.composer-rich.is-collapsed .composer-area {
flex: 1 1 auto; width: auto; min-width: 0;
min-height: 34px; max-height: 34px;
padding: 7px var(--sp-3);
/* una riga vuol dire una riga: senza questo il segnaposto lungo va a capo e la seconda
riga finisce tagliata a metà dal tetto dell'altezza */
white-space: nowrap; overflow: hidden;
}
.composer-rich.is-collapsed .composer-bar {
flex: 0 0 auto;
border-top: 0;
padding: var(--sp-1) var(--sp-15) var(--sp-1) 0;
}
/* chiuso restano le icone che si usano: niente spaziatore, niente segnaposto, niente filo */
.composer-rich.is-collapsed .composer-bar .spacer,
.composer-rich.is-collapsed .composer-bar > .composer-sep,
.composer-rich.is-collapsed .composer-btn.is-soon { display: none; }
/* --- formattazione --- */
.composer-toolbar {
display: flex; align-items: center; gap: var(--sp-05);
padding: var(--sp-1) var(--sp-2);
border-bottom: 1px solid var(--hairline);
overflow-x: auto; scrollbar-width: none;
}
.composer-toolbar::-webkit-scrollbar { display: none; }
.composer-toolbar[hidden] { display: none; }
.composer-sep { flex: 0 0 auto; width: 1px; height: 16px; margin: 0 var(--sp-1); background: var(--border); }
.composer-tool, .composer-btn {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
color: var(--muted); cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.composer-tool:hover:not(:disabled), .composer-btn:hover:not(:disabled) { background: var(--raise); color: var(--ink); }
.composer-tool:disabled, .composer-btn:disabled { cursor: default; }
.composer-tool.glyph { font-size: var(--text-base); line-height: 1; }
.composer-tool.is-bold span { font-weight: 700; }
.composer-tool.is-italic span { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.composer-tool.is-underline span { text-decoration: underline; text-underline-offset: 2px; }
.composer-tool.is-strike span { text-decoration: line-through; }
/* --- allegati: pillole in attesa nel composer --- */
.att-pending {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-15);
padding: var(--sp-2) var(--sp-3) var(--sp-05);
}
.att-pending[hidden] { display: none; }
.att-chip {
display: inline-flex; align-items: center; gap: var(--sp-15); max-width: 100%;
padding: 3px var(--sp-1) 3px var(--sp-2);
background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-pill);
font-size: var(--text-sm); color: var(--ink-2);
}
.att-chip-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip-size { color: var(--faint); font-variant-numeric: tabular-nums; }
.att-chip.is-uploading { opacity: 0.72; }
.att-chip.is-error { border-color: var(--danger); color: var(--danger); }
.att-chip.is-error .att-chip-size { color: var(--danger); }
.att-chip-retry {
background: transparent; border: 0; padding: 0 var(--sp-05);
color: var(--accent); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline;
}
.att-chip-x {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; padding: 0;
background: transparent; border: 0; border-radius: var(--r-pill);
color: var(--faint); cursor: pointer;
}
.att-chip-x:hover { background: var(--raise); color: var(--ink); }
/* registrazione in corso: pallino, cronometro, ferma, annulla */
.att-rec {
display: inline-flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-1) var(--sp-3);
background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-pill);
font-size: var(--text-sm); color: var(--ink-2);
}
.att-rec-dot {
width: 8px; height: 8px; border-radius: var(--r-full); background: var(--danger);
animation: att-pulse 1.2s ease-in-out infinite;
}
@keyframes att-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .att-rec-dot { animation: none; } }
.att-rec-time { font-variant-numeric: tabular-nums; color: var(--muted); }
.att-rec .btn-ghost { padding: 1px var(--sp-15); font-size: var(--text-sm); }
.composer-btn.is-recording { background: var(--danger); color: var(--on-accent); }
.composer-btn.is-recording:hover:not(:disabled) { background: var(--danger); color: var(--on-accent); }
/* --- allegati consegnati: sotto il messaggio o il commento --- */
.att-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); margin-top: var(--sp-15); }
.att-img { display: inline-block; line-height: 0; border-radius: var(--r-sm); overflow: hidden; }
.att-thumb { display: block; max-width: min(320px, 100%); max-height: 320px; height: auto; border-radius: var(--r-sm); }
.att-audio { width: min(320px, 100%); height: 38px; }
.att-video { max-width: min(420px, 100%); max-height: 360px; border-radius: var(--r-sm); background: #000; }
.att-file {
display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%;
padding: var(--sp-15) var(--sp-3);
background: var(--chip); border: 1px solid var(--border); border-radius: var(--r-sm);
color: var(--ink-2); font-size: var(--text-sm); text-decoration: none;
}
.att-file:hover { background: var(--raise); color: var(--ink); }
.att-file .att-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file .att-size { color: var(--faint); font-variant-numeric: tabular-nums; }
/* --- copia in privato --- */
.composer-dm {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-05) var(--sp-3) var(--sp-15);
font-size: var(--text-sm); color: var(--muted); cursor: pointer;
}
.composer-dm[hidden] { display: none; }
.composer-dm-check { accent-color: var(--accent); margin: 0; cursor: pointer; }
.composer-dm-who { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* --- barra in basso --- */
.composer-bar {
display: flex; align-items: center; gap: var(--sp-05);
padding: var(--sp-1) var(--sp-2) var(--sp-15);
border-top: 1px solid var(--hairline);
}
.composer-bar .spacer { flex: 1 1 auto; }
.composer-aa-text { font-size: var(--text-sm); font-weight: var(--w-semi); letter-spacing: -0.01em; }
.composer-aa.is-on { background: var(--chip); color: var(--ink); }
/* segnaposto: si vedono, ma è chiaro che non fanno niente */
.composer-btn.is-soon { color: var(--faint); opacity: 0.55; }
.composer-btn.is-soon:hover { background: transparent; color: var(--faint); }
/* si vede solo vicino al tetto (COUNT_SHOW in app.js), e diventa giallo quando manca poco */
.composer-count {
flex: 0 0 auto; margin: 0 var(--sp-2);
font-size: var(--text-xs); color: var(--faint); font-variant-numeric: tabular-nums;
}
.composer-count[hidden] { display: none; }
.composer-count.is-warn { color: var(--warn); font-weight: var(--w-semi); }
/* --- invio --- */
.composer-send-group { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 1px; }
.composer-send, .composer-send-more {
display: inline-flex; align-items: center; justify-content: center;
height: 28px;
background: var(--chip); border: 0; color: var(--faint);
cursor: default; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.composer-send { width: 32px; border-radius: var(--r-xs) 0 0 var(--r-xs); }
.composer-send-more { width: 20px; border-radius: 0 var(--r-xs) var(--r-xs) 0; cursor: pointer; }
.composer-send-more:hover:not(:disabled) { background: var(--raise); color: var(--ink); }
.composer-send.is-ready { background: var(--accent); color: var(--on-accent); cursor: pointer; }
.composer-send.is-ready:hover { background: var(--accent-hover); }
.composer-pop {
position: absolute; z-index: var(--z-dropdown);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
box-shadow: var(--sh-2); padding: var(--sp-15);
}
.composer-pop[hidden] { display: none; }
.composer-emoji-pop {
left: 8px; bottom: calc(100% + 6px);
display: grid; grid-template-columns: repeat(8, 28px); gap: var(--sp-05);
max-width: calc(100% - 16px);
}
.composer-emoji {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: var(--r-xs);
font-size: var(--text-lg); line-height: 1; cursor: pointer;
}
.composer-emoji:hover { background: var(--raise); }
.composer-send-pop { right: 0; bottom: calc(100% + 6px); min-width: 232px; }
.composer-send-mode {
display: flex; align-items: flex-start; gap: var(--sp-2); width: 100%;
background: transparent; border: 0; border-radius: var(--r-xs);
padding: var(--sp-15) var(--sp-2); text-align: left; cursor: pointer; color: var(--ink-2);
}
.composer-send-mode:hover { background: var(--raise); }
.composer-mode-tick { flex: 0 0 auto; width: 14px; color: var(--accent); opacity: 0; margin-top: 1px; }
.composer-send-mode.is-on .composer-mode-tick { opacity: 1; }
.composer-mode-label { display: block; font-size: var(--text-base); }
.composer-mode-hint { display: block; font-size: var(--text-xs); color: var(--faint); }
/* ============ markdown-lite nei messaggi ============ */
.msg-text .md-p { margin: 0 0 var(--sp-15); }
.msg-text .md-p:last-child { margin-bottom: 0; }
.msg-text .md-list { margin: var(--sp-05) 0 var(--sp-15); padding-left: 20px; }
.msg-text .md-list:last-child { margin-bottom: 0; }
.msg-text .md-list li { margin: 1px 0; }
.msg-text .md-quote {
margin: var(--sp-05) 0 var(--sp-15); padding: 1px 0 1px var(--sp-3);
border-left: 3px solid var(--border); color: var(--muted);
}
.msg-text .md-quote:last-child { margin-bottom: 0; }
.msg-text .md-code, .msg-text .md-pre code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-sm);
}
.msg-text .md-code {
background: var(--field-2); border: 1px solid var(--hairline); border-radius: var(--r-xs);
padding: 0 var(--sp-1);
}
.msg-text .md-pre {
margin: var(--sp-05) 0 var(--sp-15); padding: var(--sp-2) var(--sp-3);
background: var(--field-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
overflow-x: auto; white-space: pre;
}
.msg-text .md-pre:last-child { margin-bottom: 0; }
/* un collegamento è blu, non bordeaux: il rosso del marchio vuol dire "azione nostra",
e un link a un sito esterno non è un'azione dell'app */
.md-link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.md-link:hover { color: var(--link-hover); }
.md-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--sp-05); }
.msg-text u { text-underline-offset: 2px; }
.mention-pop {
position: fixed;
z-index: var(--z-dropdown);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
padding: var(--sp-1);
min-width: 180px;
max-height: 200px;
overflow-y: auto;
}
.mention-item {
display: flex; align-items: center; gap: var(--sp-2); width: 100%;
background: transparent; border: 0; border-radius: var(--r-xs);
padding: var(--sp-15) var(--sp-2); font-size: var(--text-base); cursor: pointer; text-align: left;
}
.mention-item:hover, .mention-item.active { background: var(--raise); color: var(--ink); }
/* ============ chat ============ */
/* --- testata del canale: nome col cancelletto, argomento, strumenti a destra --- */
.pane-head.chat-head {
padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border);
gap: var(--sp-3);
}
.chan-id { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.chan-name { display: inline-flex; align-items: baseline; gap: var(--sp-05); min-width: 0; }
.chan-hash { color: var(--muted); font-size: var(--text-xl); font-weight: var(--w-medium); }
.chat-head .pane-title { font-size: var(--text-lg); font-weight: var(--w-semi); letter-spacing: var(--ls-lg); }
.chan-topic {
font-size: var(--text-sm); color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 300px;
}
.chat-head-tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }
.chat-blank { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
/* --- il menu "…" delle impostazioni del canale, in testata --- */
.chan-menu-wrap { position: relative; display: inline-flex; }
.chan-menu {
position: absolute;
top: 100%; right: 0;
min-width: 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--sh-2);
padding: var(--sp-1);
z-index: var(--z-dropdown);
}
.chan-menu .menu-item.danger { color: var(--danger); }
/* --- pannello "Dettagli canale" --- */
.cd-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-lg); font-weight: var(--w-semi); letter-spacing: var(--ls-lg); margin-bottom: var(--sp-3); }
.cd-name .mini { margin-left: auto; }
.cd-rows { display: flex; flex-direction: column; gap: var(--sp-05); }
.cd-row { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-1) 0; }
.cd-key { flex: 0 0 92px; color: var(--muted); font-size: var(--text-sm); }
.cd-val { flex: 1 1 auto; color: var(--ink); overflow-wrap: anywhere; }
.cd-row .mini { flex: 0 0 auto; }
.cd-members { display: flex; flex-direction: column; gap: var(--sp-15); margin: var(--sp-3) 0; }
.cd-member { display: flex; align-items: center; gap: var(--sp-2); }
/* --- separatore di giornata: pillola centrata su un filo --- */
.day-div {
position: relative;
display: flex; align-items: center; justify-content: center;
margin: var(--sp-4) 0 var(--sp-2);
}
.day-div::before {
content: "";
position: absolute; left: 0; right: 0; top: 50%;
height: 1px; background: var(--hairline);
}
/* la pillola è un'insegna, non un messaggio: niente bordo né ombra, testo piccolo e muto.
Prima pesava più delle righe che divide e portava l'occhio nel posto sbagliato. */
.day-pill {
position: relative;
background: var(--bg);
border: 0;
border-radius: var(--r-pill);
padding: 1px var(--sp-3);
font-size: var(--text-xs); font-weight: var(--w-medium); color: var(--muted);
letter-spacing: 0.01em;
}
/* --msg-bleed: quanto la tinta d'hover deve sbordare oltre il padding del contenitore */
/* I messaggi si appoggiano in basso, vicino al composer, come in ogni chat: un canale con
quattro messaggi non lascia più mezzo schermo di vuoto sopra la riga di scrittura.
Il margine automatico sul primo figlio si mangia lo spazio libero solo quando ce n'è:
appena il flusso è più alto del riquadro si azzera da sé e lo scorrimento resta intero
(niente justify-content: flex-end, che nasconderebbe la cima dei messaggi vecchi). */
.feed {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column;
padding: var(--sp-4) var(--sp-5) var(--sp-4);
--msg-bleed: 22px;
}
/* Tutto quello che sta nel feed — messaggi, separatori di giornata, la riga "Nuovi
messaggi", il pulsante dei messaggi precedenti — si ferma alla stessa misura, a sinistra
come il resto dell'app. Se si fermasse solo il testo, i separatori resterebbero righe
larghe 1600px sotto una colonna di testo larga 600, e la conversazione non si leggerebbe
più come una colonna. */
.feed > * { flex: 0 0 auto; width: 100%; max-width: var(--measure-msg-wide); }
.feed > *:first-child { margin-top: auto; }
.msg { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; }
.msg-head { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.msg-author { font-weight: var(--w-semi); font-size: var(--text-base); }
/* solo l'ora, e un gradino più smorta: è un appiglio, non un'informazione da leggere */
.msg-time {
font-family: var(--mono);
font-size: var(--text-2xs);
letter-spacing: 0;
color: var(--faint);
font-variant-numeric: tabular-nums;
}
/* la misura di lettura, dentro il messaggio: il testo si ferma qui, gli allegati no —
`.att-list` sta accanto e arriva fino al bordo del messaggio (vedi --measure-msg-wide) */
.msg-text {
overflow-wrap: anywhere; font-size: var(--text-base); color: var(--ink-2);
white-space: pre-wrap; max-width: var(--measure-msg);
}
/* la riga si accende all'hover: la tinta esce dai margini del contenitore ma resta
fuori dal flusso, così passarci sopra non sposta un pixel */
.msg::before {
content: "";
position: absolute; z-index: var(--z-base);
top: 0; bottom: 0;
left: calc(var(--msg-bleed, 0px) * -1);
right: calc(var(--msg-bleed, 0px) * -1);
background: var(--raise);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-2) var(--ease);
}
/* `.is-hover` la mette app.js: il `:hover` del CSS non si rivaluta quando il poll
sostituisce il messaggio sotto un puntatore fermo (vedi restoreHoveredMsg) */
.msg:hover::before, .msg.is-hover::before, .msg:focus-within::before { opacity: 1; }
.msg.is-editing::before { display: none; }
/* il contenuto sta sopra la tinta: entrambi in layer posizionato, ordine deterministico */
.msg > .avatar, .msg-body { position: relative; z-index: var(--z-local); min-width: 0; }
/* barra azioni: sta DENTRO l'angolo in alto a destra del messaggio. Prima scavalcava di
undici pixel il bordo di sopra, e sul primo messaggio dopo un separatore di giornata
finiva a cavallo della pillola con la data — una barra di comandi appoggiata su
un'insegna. Ancorata dentro non copre mai niente che non sia il messaggio suo. */
.msg-tools {
position: absolute; z-index: var(--z-sticky);
top: var(--sp-05); right: 0;
display: flex; align-items: center; gap: var(--sp-05);
padding: var(--sp-05);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r-sm);
box-shadow: var(--sh-2);
opacity: 0; pointer-events: none;
transition: opacity var(--dur-2) var(--ease);
}
.msg:hover > .msg-tools, .msg.is-hover > .msg-tools, .msg:focus-within > .msg-tools { opacity: 1; pointer-events: auto; }
.msg-tool {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px;
background: transparent; border: 0; border-radius: var(--r-xs);
color: var(--muted); cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.msg-tool:hover { background: var(--chip); color: var(--ink); }
.msg-tool:focus-visible { outline: none; box-shadow: var(--ring); color: var(--ink); }
.msg-tool.danger:hover { background: var(--accent-soft); color: var(--danger); }
/* le tre reazioni pronte in testa alla barra: stessa cella dei pulsanti accanto (26px),
dentro l'emoji e basta — così la barra resta una riga sola e l'occhio le prende insieme.
Accesa quando la reazione è già mia: ricliccarla la toglie, e si deve vedere quale */
.msg-quick { font-size: 15px; line-height: 1; }
.msg-quick.is-on { background: var(--accent-wash); }
.msg-quick.is-on:hover { background: var(--accent-soft); }
/* l'emoji non intercetta il clic: il bersaglio è il pulsante, tutti e 26 i pixel.
A riposo è appena trattenuta: a colori pieni accanto a icone a filo urlava più di loro */
.msg-quick-emoji { pointer-events: none; opacity: 0.85; transition: opacity var(--dur-1) var(--ease); }
.msg-quick:hover .msg-quick-emoji, .msg-quick.is-on .msg-quick-emoji { opacity: 1; }
/* lo stacco fra le reazioni e le azioni: due famiglie di gesti nella stessa barra */
.msg-tools-sep { flex: 0 0 auto; width: 1px; align-self: stretch; margin: 3px var(--sp-05); background: var(--border); }
@media (hover: none) {
/* col dito non c'è hover: la barra resta a vista e rientra nel messaggio, così non
scavalca quello sopra; la tinta la lascia solo il focus da tastiera */
.msg-tools { opacity: 1; pointer-events: auto; top: 2px; }
/* il trascinamento HTML5 col dito non esiste: la maniglia sparisce e restano i
pulsanti Sposta su/giù, che invece funzionano */
.drag-handle { display: none; }
/* col dito i pulsanti sono SEMPRE a vista: sovrapposti alla coda del nome coprirebbero
per sempre l'ultima parola, quindi lì — e solo lì — il posto torna riservato. Nella
riga a due piani del telefono quella larghezza c'è (il nome sta su una riga sua). */
.row-actions { opacity: 1; pointer-events: auto; }
.cell-task { padding-right: 92px; }
/* nemmeno il "⋯" di sezione può nascondersi dietro un hover che non arriva mai */
.pop-menu-btn { opacity: 1; }
.ph { opacity: 1; }
/* la barra è scesa dentro il messaggio: la griglia scende con lei, o le finisce sopra */
.msg-emoji-pop { top: 32px; }
.msg:hover::before { opacity: 0; }
/* un puntatore vero c'è comunque (mouse su schermo touch, penna): se app.js lo vede
sopra la riga, la tinta si accende lo stesso */
.msg.is-hover::before { opacity: 1; }
.msg:focus-within::before { opacity: 1; }
/* stessa ragione nell'elenco dei file: senza hover, "Vai al messaggio" non si scoprirebbe */
.file-jump { opacity: 1; }
/* --- premuto. Su queste righe e pastiglie l'UNICO ritorno era `:hover`, che col dito non
arriva mai: si toccava e per un attimo non rispondeva niente, che è la sensazione di un
tocco andato a vuoto. Due ricette, come i due fondi dell'app — le righe chiare prendono
la tinta di rilievo, quelle sull'inchiostro dei cassetti la loro velatura chiara. --- */
.nav-item:active, .menu-item:active, .psb-row:active, .psb-pin:active,
.sr-item:active, .btn-ghost:active, .icon-btn:active, .tab:active,
.file-chip:active, .seg-btn:active, .drawer-btn:active {
background: var(--raise);
}
.side-row:active, .dm-row:active, .act-card:active, .rail-tab:active,
.side-chip:active, .side-flat:active {
background: var(--side-hover);
}
}
/* selettore delle reazioni: stessa griglia del composer, ma ancorata al messaggio.
Sta dentro .msg (position: relative), non dentro .msg-tools, che svanisce all'uscita
del puntatore e si porterebbe via il popover appena aperto. */
.msg-emoji-pop { top: 16px; right: 0; left: auto; bottom: auto; }
/* chip delle reazioni: pillole sotto il testo, la mia si stacca con la tinta d'accento */
.msg-reactions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }
.msg-reaction {
display: inline-flex; align-items: center; gap: var(--sp-1);
padding: 1px var(--sp-2) 1px var(--sp-15); min-height: 22px;
background: var(--chip); color: var(--chip-ink);
border: 1px solid transparent; border-radius: var(--r-pill);
font-size: var(--text-sm); line-height: 1.5; cursor: pointer;
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.msg-reaction:hover:not(:disabled) { border-color: var(--check-border); color: var(--ink); }
.msg-reaction:focus-visible { outline: none; box-shadow: var(--ring); }
.msg-reaction:disabled { cursor: default; }
.msg-reaction.is-mine { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.msg-reaction-emoji { font-size: var(--text-base); line-height: 1; }
.msg-reaction-count { font-variant-numeric: tabular-nums; font-weight: var(--w-medium); }
/* messaggio raggiunto da un salto (ricerca, notifica): una pulsazione breve e sobria,
giusto il tempo di dire "è questo". Poi la classe cade e il feed torna com'era. */
.msg.is-highlight::before { opacity: 1; background: var(--accent-soft); animation: msg-pulse 2s var(--ease); }
@keyframes msg-pulse {
0% { opacity: 0; }
12% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
.msg.is-highlight::before { animation: none; }
}
/* il margine è il posto giusto per questo spazio: nel DOM la targhetta segue il testo
dentro `.msg-text`, che è `pre-wrap` — uno spazio scritto nel testo finirebbe anche in
un copia-incolla, e senza niente si leggeva "testo(modificato)" */
.msg-edited { font-size: var(--text-xs); color: var(--faint); margin-left: var(--sp-15); }
.msg.is-editing { background: var(--raise); border-radius: var(--r-sm); padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; }
.msg-tomb { font-style: italic; color: var(--faint); }
/* Il messaggio che sta partendo: la bolla c'è già, ma sbiadita, con l'orologino in coda
al testo. Nessun colore nuovo — solo meno inchiostro, che è il modo più onesto di dire
"c'è ma non è ancora vero". */
.msg.is-pending { opacity: 0.55; }
.msg.is-pending .msg-flag { color: var(--faint); }
.msg-flag {
display: inline-flex; align-items: center;
margin-left: var(--sp-15);
vertical-align: middle;
font-size: var(--text-xs);
}
/* non partito: pastiglia rossa a velatura, come tutti gli altri stati semantici dell'app */
.msg.is-failed .msg-text { color: var(--ink-2); }
.msg-flag.is-failed {
background: var(--tint-red-bg); color: var(--tint-red-ink);
border-radius: var(--r-pill); padding: 1px var(--sp-2);
}
.msg-retry { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: 3px; }
.msg-retry-btn {
background: none; border: 0; padding: 0;
color: var(--link); font: inherit; font-size: var(--text-sm);
cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.msg-retry-btn:hover { color: var(--accent); }
.msg-retry-why { font-size: var(--text-xs); color: var(--faint); }
.msg-editor {
margin-top: var(--sp-1);
border: 1px solid var(--check-border); border-radius: var(--r-md);
background: var(--field); box-shadow: var(--ring);
}
.msg-edit-area { min-height: 46px; }
.msg-editor-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-15) var(--sp-2) var(--sp-2); }
.msg-edit-count { flex: 0 0 auto; font-size: var(--text-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
/* indicatore di thread: facce di chi ha risposto, "N risposte" in blu, l'ultima in grigio */
.msg-thread {
display: inline-flex; align-items: center; gap: var(--sp-2);
margin-top: var(--sp-1); padding: 3px var(--sp-2) 3px var(--sp-1);
background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
font-size: var(--text-sm); color: var(--ink-2); cursor: pointer;
transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.msg-thread:hover { background: var(--surface); border-color: var(--border); box-shadow: var(--sh-card); color: var(--ink); }
.msg-thread.is-open { background: var(--surface); border-color: var(--accent-line); color: var(--ink); }
.msg-thread:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.msg-thread-faces { display: inline-flex; align-items: center; gap: var(--sp-05); }
.msg-thread-faces .avatar { width: 20px; height: 20px; font-size: 9px; border-radius: var(--r-full); }
.msg-thread-count { font-weight: var(--w-semi); }
.msg-thread:hover .msg-thread-count { text-decoration: underline; }
.msg-thread-when { color: var(--muted); font-weight: 400; }
/* messaggio accorpato al precedente: niente avatar né nome, l'ora appare all'hover */
/* `min-height`: una riga accorpata di una riga sola misura 23px, la barra degli strumenti
32 — appoggiata in alto sfondava di undici pixel dentro il messaggio successivo, gli
rubava il puntatore e ci si trovava a un pixel dall'Elimina del messaggio SOPRA. La riga
si allarga quanto basta a contenerla e la barra si centra: non esce mai dal suo messaggio */
.msg.is-cont { padding-top: 1px; padding-bottom: 1px; min-height: 34px; }
.msg.is-cont > .msg-tools { top: 50%; transform: translateY(-50%); }
.msg-gutter-time {
align-self: start;
padding-top: var(--sp-05);
font-family: var(--mono);
font-size: var(--text-2xs);
letter-spacing: 0;
line-height: 1.5;
color: var(--faint);
text-align: right;
font-variant-numeric: tabular-nums;
opacity: 0;
transition: opacity var(--dur-1) var(--ease);
}
.msg.is-cont:hover .msg-gutter-time,
.msg.is-cont.is-hover .msg-gutter-time,
.msg.is-cont:focus-within .msg-gutter-time { opacity: 1; }
/* pannello del thread: stessa grammatica del pannello di dettaglio dei task */
.thread-panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(460px, 46%);
display: flex; flex-direction: column; min-height: 0;
background: var(--surface);
box-shadow: var(--sh-panel);
z-index: var(--z-rail);
animation: slide-in var(--dur-3) var(--ease);
}
.thread-bar { flex: 0 0 auto; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.thread-title { font-size: var(--text-lg); font-weight: var(--w-semi); letter-spacing: var(--ls-lg); }
.thread-where { font-size: var(--text-base); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-back { display: none; }
.thread-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px var(--sp-4); --msg-bleed: 18px; }
.thread-root { padding-bottom: var(--sp-1); }
.thread-foot { flex: 0 0 auto; position: relative; }
.thread-empty { padding: var(--sp-4) var(--sp-1); }
.thread-sep { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-1); }
.thread-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.thread-sep-label {
flex: 0 0 auto;
font-size: var(--text-2xs); font-weight: var(--w-semi); letter-spacing: 0.07em; text-transform: uppercase;
color: var(--muted);
}
/* separatore dei nuovi messaggi: un filo d'accento, non una fascia */
.feed-new { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-15); }
.feed-new::before, .feed-new::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--accent); opacity: 0.34; }
.feed-new-label {
flex: 0 0 auto;
font-size: var(--text-2xs); font-weight: var(--w-semi); letter-spacing: 0.07em; text-transform: uppercase;
color: var(--accent);
}
.feed-older {
display: block; margin: var(--sp-05) auto var(--sp-3);
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill);
padding: var(--sp-1) var(--sp-4); font-size: var(--text-sm); color: var(--muted); cursor: pointer;
transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.feed-older:hover:not(:disabled) { background: var(--raise); color: var(--ink); }
.feed-older:disabled { opacity: 0.6; cursor: default; }
/* la pillola galleggia sopra il composer, quindi il piede della chat fa da contenitore */
.feed-foot { position: relative; flex: 0 0 auto; }
.jump-pill {
position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
background: var(--ink); color: var(--bg);
border: 0; border-radius: var(--r-pill); padding: var(--sp-15) var(--sp-4);
font-size: var(--text-sm); cursor: pointer; box-shadow: var(--sh-2); z-index: var(--z-float);
}
.jump-pill[hidden] { display: none; }
/* barra laterale a scomparsa: esiste solo sotto i 900px, dove la colonna fissa sparisce */
.drawer-btn {
display: none; flex: 0 0 auto; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: transparent; border: 1px solid transparent; border-radius: var(--r-xs);
color: var(--muted); cursor: pointer;
}
.drawer-btn:hover { background: var(--raise); color: var(--ink); }
.drawer-scrim {
position: fixed; inset: 0; z-index: var(--z-scrim);
background: rgba(10, 10, 12, 0.38);
display: flex; animation: fade var(--dur-2) var(--ease);
}
.drawer-panel {
width: min(280px, 82vw); height: 100%; overflow-y: auto;
background: var(--surface); border-right: 1px solid var(--border);
box-shadow: var(--sh-2); padding: var(--sp-3) var(--sp-2);
animation: drawer-in var(--dur-3) var(--ease);
}
/* col cassetto la barra laterale è la stessa: stesso fondo d'inchiostro, stesso contenuto */
.drawer-panel.side-panel {
width: min(288px, 86vw);
padding: 0;
overflow: hidden;
display: flex;
background: var(--side-bg);
border-right: 0;
color: var(--side-ink);
}
.drawer-panel.side-panel .side-inner { width: 100%; }
/* il cassetto delle sole voci del rail, per le sezioni che una barra non ce l'hanno:
stesso fondo d'inchiostro (dentro c'è il rail), e si ferma all'altezza delle schede —
coprire tutta la pagina per tre righe sarebbe una tenda al posto di un pannello */
.drawer-panel.rail-drawer {
width: min(288px, 86vw);
height: auto; align-self: flex-start;
padding: 0; overflow: hidden;
background: var(--side-bg); border-right: 0;
color: var(--side-ink);
}
.drawer-panel.rail-drawer .rail-tabs { border-bottom: 0; padding: var(--sp-3) var(--sp-2) var(--sp-3); }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }
/* nota inline dentro pannelli e schede: una riga muta, niente scenografia */
.empty { color: var(--muted); font-size: var(--text-base); padding: var(--sp-4) var(--sp-5); }
/* stato vuoto di una SEZIONE: un solo aspetto in tutta l'app (Progetti, I miei task,
Inbox, File). Centrato, con respiro sopra e sotto, così legge come una scelta e non
come una lista rotta. Costruito da emptyState() in app.js. */
.empty-state {
display: flex; flex-direction: column; align-items: center;
text-align: center;
gap: var(--sp-2);
max-width: 340px;
margin: 56px auto 44px;
padding: 0 20px;
}
/* l'icona è un segno, non un'illustrazione: 24px a filo, nel grigio più smorto. I due
dischi tinti d'accento di prima erano la cosa più colorata dello schermo per dire che
non c'era niente — l'accento si spende sull'azione, non sul vuoto. */
.empty-state .es-ico {
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: var(--sp-1);
color: var(--faint);
}
.empty-state .es-ico svg { width: 24px; height: 24px; }
.empty-state .es-line { margin: 0; font-size: var(--text-base); color: var(--ink-2); line-height: var(--lh-base); letter-spacing: -0.005em; }
/* una riga di spiegazione, non un paragrafo: se non ci sta in una riga il testo è sbagliato */
.empty-state .es-hint { margin: 0; font-size: var(--text-sm); color: var(--muted); line-height: var(--lh-base); max-width: 44ch; }
.empty-state .btn-ghost { margin-top: var(--sp-3); }
/* l'azione di uno stato vuoto è un invito, non il comando principale della schermata:
se qui compare un pulsante d'accento diventa il rosso più grosso di tutta la pagina */
.empty-state .btn-accent { margin-top: var(--sp-3); }
/* dentro la colonna scura (Salvati, File) i grigi del tema chiaro sono invisibili:
lì lo stato vuoto prende l'inchiostro della barra, non quello del contenuto */
.side .empty-state { max-width: 240px; margin: var(--sp-7) auto var(--sp-6); }
.side .empty-state .es-ico { color: rgba(255, 255, 255, 0.34); }
.side .empty-state .es-line { color: var(--side-ink-strong); }
.side .empty-state .es-hint { color: var(--side-ink); }
.text-input {
flex: 1 1 auto; min-width: 0;
background: var(--field);
border: 1px solid var(--border);
border-radius: var(--r-xs);
padding: var(--sp-2) var(--sp-3);
font-size: var(--text-base);
outline: none;
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.text-input:focus { border-color: var(--check-border); box-shadow: var(--ring); }
.text-input::placeholder { color: var(--faint); }
.text-input:disabled { opacity: 0.55; cursor: not-allowed; }
.hint { flex: 0 0 auto; font-size: var(--text-sm); color: var(--muted); }
/* ============ inbox / my tasks ============ */
.plain-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-15) var(--sp-5) 40px; }
.notif {
display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
gap: var(--sp-3); align-items: center;
width: 100%; text-align: left;
background: transparent; border: 0;
border-bottom: 1px solid var(--hairline);
padding: var(--sp-3) var(--sp-3); cursor: pointer;
transition: background var(--dur-2) var(--ease);
}
.notif:hover { background: var(--raise); }
/* non letta: un filo d'accento sul bordo, non una campitura */
.notif.unread { box-shadow: inset 2px 0 0 var(--accent); }
.notif-text { font-size: var(--text-base); overflow: hidden; text-overflow: ellipsis; }
.notif.unread .notif-text { font-weight: var(--w-medium); }
.notif-kind { font-size: var(--text-xs); color: var(--muted); }
.notif-time { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.group-head { font-weight: var(--w-medium); font-size: var(--text-base); color: var(--muted); padding: 20px 0 var(--sp-15); }
.group-head.late { color: var(--overdue); }
/* ============ team e account ============ */
.members-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px var(--sp-5) 40px; }
.member-row {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--hairline); border-radius: var(--r-sm);
transition: background var(--dur-2) var(--ease);
}
.member-row:hover { background: var(--raise); }
.member-name { flex: 1 1 160px; min-width: 0; font-size: var(--text-base); }
.member-mail { font-size: var(--text-sm); color: var(--muted); }
/* forma e passo vengono dalla ricetta unica delle pastiglie (vedi .status-chip) */
.badge { flex: 0 0 auto; }
/* Team e Cliente sono due categorie pari, non una buona e una meno: prendono entrambe la
pastiglia neutra. «Team» era su velatura d'accento — il rosso del marchio finiva a dire
«dei nostri», e in una pagina di venti righe erano venti macchie bordeaux. Chi è cliente
e chi no si legge dal testo della pastiglia, che è esattamente il suo mestiere. */
.badge.team, .badge.client { background: var(--chip); color: var(--chip-ink); }
.member-actions { flex: 0 0 auto; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.member-row:hover .member-actions, .member-row:focus-within .member-actions { opacity: 1; }
/* un token che il server non onora più: resta in elenco (si revoca per pulizia), spento */
.member-row.token-invalid > :not(.member-actions) { opacity: 0.5; }
.select {
/* la stessa ricetta di .field-select nel pannello: cornice nostra, freccina nostra.
La larghezza delle colonne (.sel-role, .sel-chan) resta dov'è, qui sotto:
questo blocco fa solo la forma, così un menu ha lo stesso aspetto in tutta l'app */
appearance: none; -webkit-appearance: none;
background-color: var(--field);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378736E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-2) center;
border: 1px solid var(--border); border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-5) var(--sp-1) var(--sp-2);
min-height: 30px;
font-family: inherit; font-size: var(--text-base); color: var(--ink);
max-width: 190px; outline: none; cursor: pointer;
transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.select:focus { border-color: var(--check-border); box-shadow: var(--ring); }
.select:disabled { opacity: 0.55; cursor: not-allowed; }
/* I selettori in una riga di persona sono COLONNE, e una colonna ha una larghezza sola.
Lasciati alla loro misura naturale, il ruolo era largo quanto la parola dentro —
«Amministratore» in una riga, «Manager» in quella dopo — e tutto quello che veniva dopo
ballava di trenta pixel per riga. Le misure stanno larghe sulla parola più lunga di
ciascuno; sotto i 680px si sciolgono, perché lì le righe vanno a capo e una larghezza
fissa diventerebbe solo un motivo per uscire dallo schermo.
Il tipo (Team/Cliente) qui non c'è più: era una terza colonna larga quanto «Cliente» per
un dato che la pastiglia già scrive, e adesso si cambia dal "⋯" della riga. */
.select.sel-role { width: 152px; }
.select.sel-chan { width: 150px; }
.form-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: var(--sp-4); }
.form-grid .text-input { flex: 1 1 150px; }
/* una spiegazione larga milleduecento pixel è una riga sola che l'occhio perde a metà:
la stessa misura della prosa in chat */
.perm-note { font-size: var(--text-sm); color: var(--muted); margin: var(--sp-3) 0 var(--sp-4); max-width: var(--measure-read); }
/* ============ apps ============ */
/* L'ospite delle app è un FRATELLO di #main con la stessa scatola (`.main` + `.app-host`):
i due si danno il cambio con `hidden`, e le cornici che stanno qui dentro non vengono
mai staccate dall'albero — staccare un