/* Struttura e componenti. Usa SOLO i token di themes/<tema>.css (con ripieghi per i token aggiunti dopo):
   per cambiare aspetto si cambia il tema, non questo file. Spaziature: multipli di --s (densità del tema). */
@font-face { font-family: "Literata Variable"; font-style: normal; font-display: swap; font-weight: 200 900; src: url(fonts/literata-latin-opsz-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Literata Variable"; font-style: italic; font-display: swap; font-weight: 200 900; src: url(fonts/literata-latin-opsz-italic.woff2) format("woff2-variations"); }
@font-face { font-family: "Geist Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/geist-latin-wght-normal.woff2) format("woff2-variations"); }
@font-face { font-family: "Instrument Sans Variable"; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%; src: url(fonts/instrument-sans-latin-standard-normal.woff2) format("woff2-variations"); }

:root {
  --s: calc(4px * var(--densita, 1));
  --lettura: var(--font-lettura, var(--font-titoli));
  --link: var(--collegamento, var(--accento));
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--sfondo); color: var(--testo); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; }
/* Token facoltativi (con ripiego, i temi vecchi restano uguali): --peso-titoli, --spaziatura-titoli,
   --anello / --anello-bordo (focus), --ombra-controlli, --ombra-finestra, --velo (dietro le finestre),
   --tratto-icone (spessore delle icone, 1.75), --testata-sfondo / --testata-ombra (la barra in alto). */
h1, h2, h3 { font-family: var(--font-titoli); font-weight: var(--peso-titoli, 500); line-height: 1.2; margin: 0; font-optical-sizing: auto; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); letter-spacing: var(--spaziatura-titoli, -0.015em); }
h2 { font-size: 1.12rem; letter-spacing: -0.005em; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tenue { color: var(--testo-tenue); }
.piccolo { font-size: 0.84rem; }

/* ——— testata e impaginazione ——— */
.testata { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--s) * 3); padding: calc(var(--s) * 3) calc(var(--s) * 6);
  position: relative; z-index: 3; background: var(--testata-sfondo, var(--superficie)); border-bottom: 1px solid var(--bordo);
  box-shadow: var(--testata-ombra, 0 1px 3px rgb(0 0 0 / 0.06)); }
.marchio { font-family: var(--font-titoli); font-weight: 600; font-size: 1.05rem; color: var(--testo); text-decoration: none; }
.testata-azioni { display: flex; gap: calc(var(--s) * 2); align-items: center; }
.corpo { flex: 1; display: flex; min-height: 0; }
.main:focus, .main:focus-visible { outline: none; }
.main { flex: 1; overflow-y: auto; padding: calc(var(--s) * 4) calc(var(--s) * 6) calc(var(--s) * 16); outline: none; scroll-padding-top: 24px; }
.main > * { max-width: 1040px; margin-inline: auto; }
.chat { width: clamp(320px, var(--larghezza-chat, 400px), 50vw); flex-shrink: 0; position: relative; border-left: 1px solid var(--bordo); background: var(--superficie); display: flex; flex-direction: column; min-height: 0; }
:root[data-chat="chiusa"] .chat { display: none; }
:root .solo-stretto { display: none; }
.velo-chat, .chat-maniglia { display: none; }
/* Bordo trascinabile per allargare la chat (solo sul computer): area di presa di 9 px a cavallo del bordo. */
.chat-bordo { position: absolute; left: -5px; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; touch-action: none; }
.chat-bordo::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background 0.15s, width 0.15s; }
.chat-bordo:hover::after, .chat-bordo:focus-visible::after, .allarga-chat .chat-bordo::after { left: 3px; width: 3px; background: var(--anello-bordo, var(--accento)); }
.chat-bordo:focus-visible { outline: none; }
.allarga-chat, .allarga-chat * { cursor: col-resize !important; user-select: none; -webkit-user-select: none; }
@media (max-width: 860px) {
  :root .solo-stretto { display: inline-flex; }
  /* Sul telefono la chat è un cassetto dal basso (Drawer di shadcn): sale sopra un velo, si chiude toccando il
     velo, trascinando giù la maniglia, con Esc o con «Chiudi». */
  .chat { position: fixed; left: 0; right: 0; bottom: 0; width: auto; height: min(88dvh, calc(100dvh - 40px)); z-index: 20;
    border-left: 0; border-top: 1px solid var(--bordo); border-radius: calc(var(--raggio) * 1.6) calc(var(--raggio) * 1.6) 0 0;
    box-shadow: var(--ombra-finestra, 0 -8px 24px rgb(0 0 0 / 0.12)); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
  :root[data-chat="chiusa"] .chat { display: flex; transform: translateY(105%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.3s; }
  .velo-chat { display: block; position: fixed; inset: 0; z-index: 19; background: var(--velo, rgb(0 0 0 / 0.4)); opacity: 1; transition: opacity 0.3s; }
  :root[data-chat="chiusa"] .velo-chat { opacity: 0; pointer-events: none; }
  .chat-bordo { display: none; }
  .chat-maniglia { display: block; width: 44px; height: 5px; border-radius: 999px; background: var(--bordo); margin: 8px auto 0; flex: 0 0 auto; }
  .chat-testa { touch-action: none; padding-top: calc(var(--s) * 2); }
  .chat.trascina { transition: none; }
  .main { padding-inline: 16px; }
  .testata { padding-inline: 16px; }
}

/* ——— controlli ——— */
.btn { font: inherit; font-size: 0.9rem; font-weight: 500; color: var(--testo); background: transparent; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: calc(var(--s) * 2) calc(var(--s) * 3.5); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: calc(var(--s) * 1.5); white-space: nowrap; }
.btn:hover { background: var(--accento-tenue); border-color: var(--accento-tenue); }
.btn-s { padding: var(--s) calc(var(--s) * 2.5); font-size: 0.84rem; }
.btn-accento { background: var(--accento); color: var(--accento-testo); border-color: var(--accento); }
.btn-accento:hover { background: var(--accento); border-color: var(--accento); filter: brightness(1.07); }
.btn-discreto { border-color: transparent; color: var(--testo-tenue); }
.btn-pericolo { color: var(--errore); }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn[aria-pressed="true"] { background: var(--accento-tenue); border-color: var(--accento-tenue); color: var(--testo); }
:focus-visible { outline: 2px solid var(--anello-bordo, var(--accento)); outline-offset: 2px; }
.campo { font: inherit; color: var(--testo); background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: calc(var(--s) * 2.5) calc(var(--s) * 3.5); width: 100%; }
.campo::placeholder { color: var(--testo-tenue); opacity: 0.85; }
.campo:focus-visible { outline: none; border-color: var(--anello-bordo, var(--accento)); box-shadow: 0 0 0 3px var(--anello, var(--accento-tenue)); }
.campo-s { width: auto; padding: var(--s) calc(var(--s) * 2); font-size: 0.84rem; background: transparent; }
textarea.campo { resize: vertical; min-height: 5rem; line-height: 1.55; }
textarea.campo.lettura { font-family: var(--lettura); font-size: 1rem; line-height: 1.7; }
.riga { display: flex; gap: calc(var(--s) * 2); align-items: center; flex-wrap: wrap; }
.riga > .campo { flex: 1; min-width: 10rem; }
.riga > .campo-s { flex: 0 0 auto; min-width: 0; }
label.etichetta, div.etichetta { display: grid; justify-items: start; gap: var(--s); font-size: 0.84rem; color: var(--testo-tenue); }

/* ——— home ——— */
.saluto { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--s) * 4); flex-wrap: wrap; margin: calc(var(--s) * 4) 0 calc(var(--s) * 10); }
.saluto .data { color: var(--testo-tenue); }
kbd { font: inherit; font-size: 0.78rem; padding: 0 5px; border: 1px solid var(--bordo); border-radius: 4px; }
@media (max-width: 600px) { .testata { flex-wrap: wrap; } .testata-azioni { flex-wrap: wrap; justify-content: flex-end; } }

.scaffale { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: calc(var(--s) * 8) calc(var(--s) * 6); }
.bacheca-anteprima { display: grid; gap: calc(var(--s) * 2.5); align-content: start; padding-top: calc(var(--s) * 3); border-top: 2px solid var(--testo); text-decoration: none; color: var(--testo); }
.bacheca-anteprima[data-tipo="note"] { border-top-color: var(--accento); }
.bacheca-anteprima h2 { font-size: 1.35rem; display: flex; gap: calc(var(--s) * 2); align-items: baseline; }
.bacheca-anteprima:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.anteprima-voci { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--s) * 1.5); }
.anteprima-voci li { display: flex; gap: calc(var(--s) * 2.5); align-items: baseline; font-size: 0.92rem; min-width: 0; }
.anteprima-voci li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--testo-tenue); transform: translateY(1px); }
.anteprima-voci li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estratto { font-family: var(--lettura); font-size: 0.98rem; line-height: 1.65; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.estratto-titolo { font-family: var(--lettura); font-style: italic; }
.conteggio { font-size: 0.8rem; color: var(--testo-tenue); }
.barra { height: 2px; background: var(--bordo); overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--accento); }
.nuova-bacheca { margin-top: calc(var(--s) * 14); padding-top: calc(var(--s) * 5); border-top: 1px solid var(--bordo); display: grid; gap: calc(var(--s) * 3); max-width: 720px; }
/* Titolo, origine e pulsante della stessa altezza: il titolo prende lo spazio, la scelta resta compatta. */
.nuova-bacheca .riga { align-items: stretch; }
.nuova-bacheca .riga > .campo { flex: 1 1 16rem; }
.nuova-bacheca .riga > select.campo { flex: 0 1 13rem; min-width: 9rem; cursor: pointer; }
@media (max-width: 600px) { .nuova-bacheca .riga > * { flex: 1 1 100%; } .nuova-bacheca .riga > .btn { justify-content: center; } }
.vuoto { color: var(--testo-tenue); padding: calc(var(--s) * 10) 0; max-width: 44ch; line-height: 1.6; }

/* ——— una bacheca ——— */
.testa-bacheca { display: grid; gap: calc(var(--s) * 2); margin: calc(var(--s) * 3) 0 calc(var(--s) * 6); }
.testa-bacheca .riga { justify-content: space-between; }
.indietro { font-size: 0.86rem; color: var(--testo-tenue); text-decoration: none; }
.indietro:hover { color: var(--testo); text-decoration: underline; }
.descrizione { color: var(--testo-tenue); max-width: 64ch; }
.aggiungi { margin-bottom: calc(var(--s) * 4); display: grid; gap: calc(var(--s) * 2); }
.filtri { display: flex; gap: var(--s); flex-wrap: wrap; align-items: center; margin-bottom: calc(var(--s) * 4); }

.elenco { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo); }
.elemento { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--s) * 3.5); align-items: start; padding: calc(var(--s) * 3.5) calc(var(--s) * 1); border-bottom: 1px solid var(--bordo); }
.elemento[data-stato="fatto"] .elemento-titolo { color: var(--fatto); text-decoration: line-through; text-decoration-color: var(--fatto); }
.elemento.evidenziato { background: var(--accento-tenue); border-radius: var(--raggio); }
.elemento.trascina { opacity: 0.4; }
.elemento-corpo { display: grid; gap: calc(var(--s) * 1.5); min-width: 0; }
.elemento-titolo { font: inherit; font-size: 1rem; font-weight: 500; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.elemento-titolo:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.maniglia { cursor: grab; color: var(--testo-tenue); user-select: none; padding: 2px 4px; opacity: 0; }
.elemento:hover .maniglia, .elemento:focus-within .maniglia { opacity: 1; }
@media (hover: none) { .maniglia { opacity: 1; padding: calc(var(--s) * 2) calc(var(--s) * 2.5); } }
.stato { width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--testo-tenue); background: transparent; cursor: pointer; padding: 0; position: relative; }
.stato:hover { border-color: var(--accento); }
.stato[data-stato="in_corso"] { border-color: var(--accento); background: conic-gradient(var(--accento) 0 50%, transparent 50% 100%); }
.stato[data-stato="fatto"] { background: var(--accento); border-color: var(--accento); }
.stato[data-stato="fatto"]::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 5px; height: 9px; border: solid var(--accento-testo); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.valori { display: flex; gap: calc(var(--s) * 4); flex-wrap: wrap; font-size: 0.86rem; color: var(--testo-tenue); }
.valori b { font-weight: 500; color: var(--testo); }
.chips { display: flex; gap: calc(var(--s) * 1.5); flex-wrap: wrap; align-items: center; }
.chip { font: inherit; display: inline-flex; align-items: center; gap: 4px; font-size: 0.78rem; padding: 1px calc(var(--s) * 2.5); border-radius: 999px; background: var(--accento-tenue); color: var(--testo); text-decoration: none; border: 0; cursor: pointer; }
.chip-link { background: transparent; color: var(--link); border: 1px solid currentColor; }
button.chip:hover, a.chip:hover { text-decoration: underline; }
.testo-lungo { white-space: pre-wrap; overflow-wrap: anywhere; }
.elemento .testo-lungo { font-size: 0.9rem; color: var(--testo-tenue); max-width: 72ch; }

/* Note: un quaderno. Il testo è il protagonista, in Literata, con gli a capo conservati (poesie comprese). */
.note { columns: 3 300px; column-gap: calc(var(--s) * 8); }
.nota { break-inside: avoid; margin-bottom: calc(var(--s) * 8); display: grid; gap: calc(var(--s) * 2); padding-top: calc(var(--s) * 3); border-top: 1px solid var(--bordo); }
.nota.evidenziato { border-top: 2px solid var(--accento); }
.nota .elemento-titolo { font-family: var(--lettura); font-size: 1.12rem; font-weight: 600; }
.nota .testo-lungo { font-family: var(--lettura); font-size: 1rem; line-height: 1.75; max-width: 60ch; }
.nota .data-nota { font-size: 0.78rem; color: var(--testo-tenue); }

/* ——— finestra di modifica ——— */
dialog { box-shadow: var(--ombra-finestra, none); border: 1px solid var(--bordo); border-radius: calc(var(--raggio) * 1.4); background: var(--superficie); color: var(--testo); padding: calc(var(--s) * 6); width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); }
dialog::backdrop { background: var(--velo, rgb(20 30 28 / 0.32)); }
dialog form { display: grid; gap: calc(var(--s) * 3.5); }
.azioni-dialogo { display: flex; justify-content: space-between; gap: calc(var(--s) * 2); flex-wrap: wrap; margin-top: calc(var(--s) * 2); }

/* ——— chat ——— */
.chat-testa { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--s) * 3.5) calc(var(--s) * 5); border-bottom: 1px solid var(--bordo); }
.chat-testa h2 { font-size: 1rem; }
.chat-contesto { font-size: 0.8rem; color: var(--testo-tenue); }
.chat-messaggi { flex: 1; overflow-y: auto; padding: calc(var(--s) * 5); display: grid; gap: calc(var(--s) * 5); align-content: start; }
.msg { display: grid; gap: calc(var(--s) * 2); }
.msg-testo { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg[data-ruolo="persona"] { justify-self: end; max-width: 86%; background: var(--accento-tenue); padding: calc(var(--s) * 2.5) calc(var(--s) * 3.5); border-radius: calc(var(--raggio) * 1.4) calc(var(--raggio) * 1.4) 4px calc(var(--raggio) * 1.4); }
.msg[data-ruolo="assistente"] { padding-left: calc(var(--s) * 3.5); border-left: 2px solid var(--accento); }
.msg-meta { font-size: 0.74rem; color: var(--testo-tenue); }
.proposta { border: 1px solid var(--errore); border-radius: var(--raggio); padding: calc(var(--s) * 3); display: grid; gap: calc(var(--s) * 2.5); font-size: 0.9rem; }
.proposta.chiusa { border-color: var(--bordo); color: var(--testo-tenue); }
/* Una preferenza da confermare non è un'eliminazione: bordo d'accento, non d'errore. */
.proposta.proposta-preferenza { border-color: var(--accento); }
.chat-modulo { border-top: 1px solid var(--bordo); padding: calc(var(--s) * 3.5) calc(var(--s) * 4); display: grid; gap: calc(var(--s) * 2); }
.chat-modulo textarea { min-height: 3.4rem; max-height: 12rem; }
/* Chat allargata: messaggi e campo restano una colonna leggibile al centro (le righe lunghe stancano). */
.chat-messaggi > *, .chat-modulo > * { width: 100%; max-width: 760px; margin-inline: auto; }
.chat-piede { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--s) * 2); }
.suggerimenti { display: grid; gap: calc(var(--s) * 1.5); justify-items: start; }
.suggerimenti .btn { white-space: normal; text-align: left; }
.attesa::after { content: "…"; animation: puntini 1.2s steps(3, end) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; }
@keyframes puntini { to { width: 1.2em; } }

/* ——— avvisi ——— */
.avvisi { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: var(--s); z-index: 30; }
.avviso { background: var(--testo); color: var(--sfondo); padding: calc(var(--s) * 2.5) calc(var(--s) * 4.5); border-radius: var(--raggio); font-size: 0.9rem; animation: entra 0.18s ease-out;
  display: flex; align-items: center; gap: calc(var(--s) * 4); justify-content: space-between; max-width: min(28rem, calc(100vw - 32px)); box-shadow: var(--ombra-finestra, none); }
.avviso > span { overflow-wrap: anywhere; }
.avviso-azione { font: inherit; font-size: 0.84rem; font-weight: 600; color: inherit; background: transparent; border: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  border-radius: calc(var(--raggio) * 0.7); padding: 2px calc(var(--s) * 2.5); cursor: pointer; flex: 0 0 auto; }
.avviso-azione:hover { background: color-mix(in oklab, currentColor 12%, transparent); }
.avviso[data-tipo="errore"] { background: var(--errore); color: #fff; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .attesa::after { animation: none; width: 1.2em; } .avviso { animation: none; } .chat, .velo-chat, :root[data-chat="chiusa"] .chat { transition: none; } }

/* Impostazioni e fonti web */
fieldset.gruppo { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: calc(var(--s) * 3) calc(var(--s) * 4); display: grid; gap: calc(var(--s) * 3); margin: 0; min-width: 0; }
fieldset.gruppo legend { padding: 0 var(--s); font-weight: 600; font-size: 0.9rem; }
.preferenze { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s); }
.preferenze li { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--s) * 2); font-size: 0.9rem; overflow-wrap: anywhere; }
.fonti { font-size: 0.82rem; }
.fonti summary { cursor: pointer; color: var(--testo-tenue); }
.fonti ul { margin: var(--s) 0 0; padding-left: calc(var(--s) * 4); display: grid; gap: 2px; }
.fonti a { color: var(--collegamento); overflow-wrap: anywhere; }
.chat-piede .riga { flex-wrap: nowrap; }
[hidden] { display: none !important; }
.msg-piede { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--s) * 2); flex-wrap: wrap; }
.proposta-dove { border-color: var(--accento); margin: calc(var(--s) * -4) 0 calc(var(--s) * 8); }
.proposta-dove p { margin: 0 0 calc(var(--s) * 2); overflow-wrap: anywhere; }
.doppioni { margin: 0 0 calc(var(--s) * 2); padding-left: calc(var(--s) * 4); }
.doppioni a { color: var(--collegamento); }
.aggiungi + .proposta-dove { margin: calc(var(--s) * 3) 0 calc(var(--s) * 4); }

/* Ombra leggera dei controlli (shadow-xs nei temi che la chiedono) */
.btn:not(.btn-discreto), .campo:not(.campo-s) { box-shadow: var(--ombra-controlli, none); }
.campo:not(.campo-s):focus-visible { box-shadow: 0 0 0 3px var(--anello, var(--accento-tenue)); }

/* ——— bacheche flessibili: selettore di vista, tabella, colonne, editor dei campi ——— */
.segmenti { display: inline-flex; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 2px; gap: 2px; }
.segmenti .btn { border-color: transparent; box-shadow: none; padding: 2px calc(var(--s) * 2.5); }
.segmenti .btn[aria-pressed="true"] { background: var(--accento-tenue); }
.stelle { letter-spacing: 1px; color: var(--testo); }

.tabella-scorre { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); }
.tabella { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabella th, .tabella td { text-align: left; padding: calc(var(--s) * 2) calc(var(--s) * 3); border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella tbody tr:last-child > * { border-bottom: 0; }
.tabella thead th { font-weight: 500; color: var(--testo-tenue); white-space: nowrap; background: var(--accento-tenue); }
.tabella tbody th { font-weight: 400; min-width: 12rem; }
.tabella tbody tr:hover { background: var(--accento-tenue); }
.tabella tr[data-stato="fatto"] .elemento-titolo { color: var(--testo-tenue); text-decoration: line-through; }
/* Stato in tabella: una riga sola, la colonna larga quanto la pillola. Il pallino ripete il cerchio dell'elenco. */
.tabella td.cella-stato { width: 1%; white-space: nowrap; }
.chip-stato { gap: 6px; padding: 1px 9px 1px 7px; line-height: 1.55; background: transparent; border: 1px solid var(--bordo); color: var(--testo-tenue); transition: border-color 0.15s, color 0.15s; }
.chip-stato::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.25px solid currentColor; box-sizing: border-box; }
.chip-stato[data-stato="in_corso"] { color: var(--testo); }
.chip-stato[data-stato="in_corso"]::before { border-color: var(--accento); background: conic-gradient(var(--accento) 0 50%, transparent 50% 100%); }
.chip-stato[data-stato="fatto"]::before { border-color: var(--accento); background: var(--accento); }
button.chip-stato:hover { text-decoration: none; border-color: var(--accento); color: var(--testo); }
.tabella .numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabella .ordina { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.colonne { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: calc(var(--s) * 3); overflow-x: auto; padding-bottom: calc(var(--s) * 2); }
.colonna { background: var(--accento-tenue); border-radius: var(--raggio); padding: calc(var(--s) * 2.5); display: grid; align-content: start; gap: calc(var(--s) * 2); min-height: 6rem; border: 1px dashed transparent; }
.colonna.sopra { border-color: var(--anello-bordo, var(--accento)); }
.colonna-testa { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--s); }
.colonna-testa h2 { font-size: 0.92rem; }
.colonna-voci { display: grid; gap: calc(var(--s) * 2); }
.scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: calc(var(--s) * 2.5) calc(var(--s) * 3); display: grid; gap: calc(var(--s) * 1.5); cursor: grab; box-shadow: var(--ombra-controlli, none); }
.scheda[data-stato="fatto"] .elemento-titolo { color: var(--testo-tenue); text-decoration: line-through; }
.scheda .valori { font-size: 0.8rem; }

.editor-campi { display: grid; gap: calc(var(--s) * 2); margin-bottom: calc(var(--s) * 2); }
.riga-campo { display: grid; gap: var(--s); }
.riga-campo .riga { flex-wrap: nowrap; }
.riga-campo .campo-tipo { flex: 0 0 9.5rem; min-width: 0; }
@media (max-width: 600px) { .riga-campo .riga { flex-wrap: wrap; } .riga-campo .campo-tipo { flex: 1 1 8rem; } }

/* ——— palette comandi (⌘K) ——— */
dialog.palette { padding: 0; width: min(560px, calc(100vw - 32px)); margin-top: 12vh; overflow: hidden; display: flex; flex-direction: column; max-height: min(480px, 76dvh); }
.palette-testa { display: flex; align-items: center; gap: calc(var(--s) * 2); padding: 0 calc(var(--s) * 3.5); border-bottom: 1px solid var(--bordo); }
.palette-lente { color: var(--testo-tenue); font-size: 1.1rem; }
.palette-campo { flex: 1; font: inherit; font-size: 0.95rem; color: var(--testo); background: transparent; border: 0; padding: calc(var(--s) * 3.5) 0; outline: none; }
.palette-elenco { overflow-y: auto; padding: calc(var(--s) * 1.5); flex: 1; }
.palette-titolo { font-size: 0.75rem; font-weight: 500; color: var(--testo-tenue); padding: calc(var(--s) * 2) calc(var(--s) * 2.5) var(--s); }
.palette-voce { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--s) * 3); padding: calc(var(--s) * 2) calc(var(--s) * 2.5); border-radius: calc(var(--raggio) * 0.7); cursor: pointer; font-size: 0.9rem; }
.palette-voce[aria-selected="true"] { background: var(--accento-tenue); }
.palette-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.palette-nota { font-size: 0.78rem; flex: 0 0 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-vuoto { padding: calc(var(--s) * 6); text-align: center; font-size: 0.9rem; }
.palette-piede { display: flex; gap: calc(var(--s) * 4); padding: calc(var(--s) * 2) calc(var(--s) * 3.5); border-top: 1px solid var(--bordo); font-size: 0.75rem; }
.palette kbd, .palette-pulsante kbd { font-size: 0.72rem; padding: 0 4px; margin-right: 2px; background: var(--superficie); color: var(--testo-tenue); }
.palette-pulsante { color: var(--testo-tenue); }
@media (max-width: 600px) { .palette-pulsante kbd { display: none; } dialog.palette { margin-top: 8vh; } }

/* ——— sottosezioni ——— */
.sezioni { display: grid; gap: calc(var(--s) * 8); }
.sezione { display: grid; gap: calc(var(--s) * 2); }
.sezione-titolo { font-size: 0.95rem; display: flex; align-items: baseline; gap: calc(var(--s) * 2); }
.sezione-titolo .conteggio { font-family: var(--font); font-weight: 400; }
.tabella .sezione-riga th { background: var(--sfondo); font-weight: 600; color: var(--testo); padding-top: calc(var(--s) * 3); }
.tabella .sezione-riga:hover { background: var(--sfondo); }

/* ——— impostazioni: schede e interruttori (Tabs e Switch di shadcn/ui) ——— */
dialog.finestra-impostazioni { width: min(640px, calc(100vw - 32px)); }
.schede { display: grid; gap: calc(var(--s) * 4); }
.schede-barra { display: flex; gap: 2px; padding: 3px; background: var(--accento-tenue); border-radius: var(--raggio); overflow-x: auto; }
.scheda-linguetta { font: inherit; font-size: 0.86rem; font-weight: 500; color: var(--testo-tenue); background: transparent; border: 0; border-radius: calc(var(--raggio) * 0.7);
  padding: calc(var(--s) * 1.5) calc(var(--s) * 3); cursor: pointer; white-space: nowrap; flex: 1 0 auto; }
.scheda-linguetta[aria-selected="true"] { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-controlli, 0 1px 2px rgb(0 0 0 / 0.06)); }
.scheda-pannello { display: grid; gap: calc(var(--s) * 4); min-height: 14rem; align-content: start; }
.scheda-pannello:focus-visible { outline-offset: 4px; }
.riga-interruttore { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--s) * 4); padding: calc(var(--s) * 3) calc(var(--s) * 3.5);
  border: 1px solid var(--bordo); border-radius: var(--raggio); }
.interruttore-etichetta { font-weight: 500; font-size: 0.92rem; }
.interruttore { flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; border: 1px solid transparent; background: var(--bordo); padding: 0; cursor: pointer; position: relative;
  transition: background 0.15s; }
.interruttore[aria-checked="true"] { background: var(--accento); }
.interruttore .pomello { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--superficie); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.15s; }
.interruttore[aria-checked="true"] .pomello { transform: translateX(16px); background: var(--accento-testo); }
.interruttore:disabled { opacity: 0.5; cursor: default; }
.segmenti .btn[aria-checked="true"] { background: var(--superficie); box-shadow: var(--ombra-controlli, none); border-color: var(--bordo); }
.gruppo-semplice { display: grid; gap: calc(var(--s) * 2); }
@media (prefers-reduced-motion: reduce) { .interruttore, .interruttore .pomello { transition: none; } }

/* ——— scheletri di caricamento (Skeleton di shadcn/ui) ——— */
/* Il grigio di shadcn (accent) su bianco quasi sparisce: un 6% del testo lo rende visibile in ogni tema. */
.scheletro { background: color-mix(in oklab, var(--testo) 6%, var(--accento-tenue)); border-radius: calc(var(--raggio) * 0.7); animation: pulsa 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulsa { 50% { opacity: 0.5; } }
.scheletri { display: grid; gap: calc(var(--s) * 4); }
.sch-titolo { height: 2.1rem; }
.sch-campo { height: 2.9rem; border-radius: var(--raggio); }
.sch-sottotitolo { height: 1.15rem; }
.sch-riga { height: 0.8rem; }
.sch-anteprima { display: grid; gap: calc(var(--s) * 2.5); padding-top: calc(var(--s) * 3); border-top: 2px solid var(--accento-tenue); }
.sch-voci { display: grid; gap: calc(var(--s) * 5); }
.sch-voce { display: flex; gap: calc(var(--s) * 3); align-items: flex-start; }
.sch-voce-testo { flex: 1; display: grid; gap: calc(var(--s) * 2); }
.sch-pallino { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; }
.msg-attesa { display: grid; gap: calc(var(--s) * 2); min-width: min(16rem, 70vw); }
@media (prefers-reduced-motion: reduce) { .scheletro { animation: none; } }

/* ——— calendario ——— */
.calendario { display: grid; gap: calc(var(--s) * 3); }
.cal-testa { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--s) * 2); }
.cal-testa h2 { font-size: 1.05rem; }
.cal-testa h2::first-letter { text-transform: uppercase; } /* «Novembre 2026», ma «2 – 8 novembre 2026» */
.cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--bordo); gap: 1px; }
.cal-intestazione { background: var(--accento-tenue); font-size: 0.75rem; color: var(--testo-tenue); padding: var(--s) calc(var(--s) * 2); text-transform: capitalize; }
.cal-cella { background: var(--superficie); min-height: 6.2rem; padding: var(--s) calc(var(--s) * 1.5); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cella.fuori { background: var(--sfondo); }
.cal-cella.fuori .cal-numero { color: var(--fatto); }
.cal-cella.sopra { outline: 2px solid var(--anello-bordo, var(--accento)); outline-offset: -2px; }
.cal-numero { font-size: 0.75rem; color: var(--testo-tenue); align-self: flex-end; font-variant-numeric: tabular-nums; }
.cal-cella.oggi .cal-numero { background: var(--accento); color: var(--accento-testo); border-radius: 999px; padding: 0 6px; font-weight: 600; }
.cal-voce { font: inherit; font-size: 0.78rem; text-align: left; background: var(--accento-tenue); color: var(--testo); border: 0; border-radius: calc(var(--raggio) * 0.5); padding: 2px 6px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cal-voce:hover { filter: brightness(0.96); }
.cal-voce[data-stato="fatto"] { text-decoration: line-through; color: var(--testo-tenue); }
.cal-agenda { display: none; gap: calc(var(--s) * 4); }
.cal-agenda-giorno { display: grid; gap: var(--s); }
.cal-agenda-giorno h3 { font-size: 0.85rem; color: var(--testo-tenue); font-weight: 500; text-transform: capitalize; }
.cal-agenda-giorno.oggi h3 { color: var(--testo); font-weight: 600; }
.cal-agenda .cal-voce, .cal-senza .cal-voce { font-size: 0.9rem; padding: calc(var(--s) * 1.5) calc(var(--s) * 2.5); white-space: normal; }
.cal-senza { display: grid; gap: calc(var(--s) * 2); }
.cal-senza h3 { font-size: 0.85rem; color: var(--testo-tenue); font-weight: 500; }
@media (max-width: 600px) { .cal-griglia { display: none; } .cal-agenda { display: grid; } }
/* Settimana: sette colonne alte con le voci per intero; sul telefono i giorni in fila. */
.cal-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; background: var(--bordo); gap: 1px; }
.cal-giorno { background: var(--superficie); min-height: 16rem; padding: calc(var(--s) * 2) calc(var(--s) * 1.5); display: flex; flex-direction: column; gap: calc(var(--s) * 2); min-width: 0; }
.cal-giorno-testa { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; font-weight: 500; color: var(--testo-tenue); text-transform: capitalize; }
.cal-giorno.oggi .cal-numero { background: var(--accento); color: var(--accento-testo); border-radius: 999px; padding: 0 6px; font-weight: 600; }
.cal-giorno-voci { display: grid; gap: 4px; align-content: start; }
.cal-giorno .cal-voce { white-space: normal; overflow-wrap: anywhere; padding: calc(var(--s) * 1) calc(var(--s) * 2); font-size: 0.82rem; }
.cal-giorno.sopra { outline: 2px solid var(--anello-bordo, var(--accento)); outline-offset: -2px; }
.cal-testa .riga { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) {
  .cal-testa { flex-direction: column; align-items: stretch; }
  .cal-testa .riga { flex-wrap: nowrap; justify-content: flex-start; }
  .cal-testa .segmenti { margin-right: auto; }
  .cal-settimana { grid-template-columns: 1fr; }
  .cal-giorno { min-height: 0; padding: calc(var(--s) * 2.5) calc(var(--s) * 3); }
  .cal-giorno-testa { justify-content: flex-start; gap: calc(var(--s) * 2); font-size: 0.85rem; }
  .cal-giorno .cal-voce { font-size: 0.9rem; padding: calc(var(--s) * 1.5) calc(var(--s) * 2.5); }
  .cal-giorno-voci:empty::before { content: "—"; color: var(--fatto); font-size: 0.8rem; }
}

/* ——— trascinamento (trascina.js: mouse e tocco) ——— */
.maniglia { touch-action: none; -webkit-user-select: none; }
.scheda, .cal-voce { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.scheda.trascina, .cal-voce.trascina { opacity: 0.4; }
.in-trascinamento, .in-trascinamento * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.fantasma { position: fixed; left: 0; top: 0; z-index: 40; margin: 0; pointer-events: none; opacity: 0.94; list-style: none;
  background: var(--superficie); border-radius: var(--raggio); box-shadow: var(--ombra-finestra, 0 0 0 1px var(--bordo)); }
.fantasma.elemento { border: 1px solid var(--bordo); }
.fantasma .maniglia { opacity: 1; }

/* ——— icone (Lucide, scripts/icone.ts): a tratto, colore dal testo ——— */
.icona { width: 1.05em; height: 1.05em; flex: 0 0 auto; stroke-width: var(--tratto-icone, 1.75); }
.btn-s .icona { width: 15px; height: 15px; }
.chip .icona { width: 12px; height: 12px; }
.tabella .ordina { display: inline-flex; align-items: center; gap: 4px; }
.tabella .ordina .icona { width: 13px; height: 13px; }
.maniglia { display: inline-flex; }
.maniglia .icona { width: 16px; height: 16px; }
/* Sul telefono la testata e il selettore delle viste mostrano solo le icone; l'etichetta resta ai lettori di schermo. */
@media (max-width: 600px) {
  .testata .etichetta-btn, .segmenti .etichetta-btn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .testata .btn, .segmenti .btn { padding-inline: calc(var(--s) * 2); }
}

/* ——— eventi su più giorni: i pezzi di una voce si uniscono in una barra ——— */
.cal-durata { color: var(--testo-tenue); font-size: 0.9em; }
.cal-cella .cal-voce.inizio, .cal-giorno .cal-voce.inizio { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: calc(var(--s) * -1.5); }
.cal-cella .cal-voce.fine, .cal-giorno .cal-voce.fine { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: calc(var(--s) * -1.5); }
.cal-cella .cal-voce.mezzo, .cal-giorno .cal-voce.mezzo { border-radius: 0; margin-inline: calc(var(--s) * -1.5); }
.cal-cella .cal-voce.mezzo, .cal-cella .cal-voce.fine { color: var(--testo-tenue); }
.cal-cella .cal-voce:is(.inizio, .mezzo, .fine), .cal-giorno .cal-voce:is(.inizio, .mezzo, .fine) { max-width: none; }
.cal-giorno .cal-voce:is(.mezzo, .fine) { color: var(--testo-tenue); }
@media (max-width: 600px) { .cal-giorno .cal-voce:is(.inizio, .mezzo, .fine) { margin-inline: 0; border-radius: calc(var(--raggio) * 0.5); } }

/* ——— Impostazioni: IA collegate ——— */
.servizi { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bordo); border-radius: var(--raggio); }
.servizio { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: calc(var(--s) * 3); padding: calc(var(--s) * 2.5) calc(var(--s) * 3.5); }
.servizio + .servizio { border-top: 1px solid var(--bordo); }
.servizio-nome { font-weight: 500; }
.servizio-dettaglio { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.costo-oggi { display: flex; justify-content: space-between; gap: calc(var(--s) * 3); margin: 0; padding: 0 calc(var(--s) * 3.5); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* ——— accesso (pagina servita da src/lib/accesso.ts, senza script) ——— */
.pagina-accesso { justify-content: center; align-items: center; padding: 16px; }
.accesso { width: min(100%, 360px); display: grid; gap: calc(var(--s) * 6); background: var(--superficie); border: 1px solid var(--bordo); border-radius: calc(var(--raggio) * 1.4); padding: calc(var(--s) * 8) calc(var(--s) * 6); box-shadow: var(--ombra-finestra, none); }
.accesso h1 { font-size: 1.5rem; }
.accesso form { display: grid; gap: calc(var(--s) * 2.5); }
.accesso label { font-size: 0.9rem; font-weight: 500; }
.accesso .btn { justify-content: center; margin-top: calc(var(--s) * 2); }
.accesso .errore { color: var(--errore); font-size: 0.88rem; }