/* Workspace — UI (WSP-37, restyle 2026-10-13). Un file, servito da /ui/stile.css. */
:root {
  color-scheme: light dark;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px;
  --r-out: 14px; --r-in: 10px; --r-sm: 6px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}
/* @fine-scala */
:root {
  --bg: #f4f6f7; --surface: #ffffff; --surface-2: #eaeef0; --lane: #e9edef;
  --line: #dde3e7; --ctrl: #77838e; --ctrl-hover: #5c6873; --text: #111a20; --muted: #53616c;
  --accent: #0e7657; --accent-ink: #ffffff; --accent-soft: #e0f2ea; --ring: rgba(14, 118, 87, 0.22);
  --danger: #b4332e; --danger-ink: #ffffff; --danger-soft: #fbeceb; --ring-danger: rgba(180, 51, 46, 0.2);
  --warn: #8f5a00; --warn-soft: #fdf1da;
  --sh: 0 1px 2px rgba(15, 50, 40, 0.05);
  --sh-2: 0 1px 2px rgba(15, 50, 40, 0.04), 0 4px 14px -10px rgba(10, 60, 45, 0.18);
  --sh-hover: 0 10px 24px -10px rgba(10, 60, 45, 0.3);
  --sh-bar: 0 -6px 16px -12px rgba(10, 60, 45, 0.35);
  --p-urgent: #c9302c; --p-high: #c4501b; --p-medium: #8f6a00; --p-low: #2f6fd6; --p-none: #6f7783;
  --s-backlog: #7a8590; --s-todo: #2f6fd6; --s-prog: #c48a00; --s-park: #7a8590; --s-rev: #7c3aed; --s-done: #1f8a4c; --s-canc: #9aa3ab;
  --t-task: #5d6572; --t-epic: #7c3aed; --t-bug: #d1242f;
  --e-low: #1f6b3a; --e-medium: #9a6a00; --e-high: #c8431a;
  --av-ink: #ffffff; --av-red: #c62828; --av-orange: #b45309; --av-green: #2e7d32; --av-teal: #00796b;
  --av-blue: #1d4ed8; --av-indigo: #4338ca; --av-purple: #7e22ce; --av-pink: #be185d; --av-neutro: #5d6572;
}
@media (prefers-color-scheme: dark) {
  :root {
  --bg: #0c1114; --surface: #151c20; --surface-2: #1e272c; --lane: #11171b;
  --line: #25313a; --ctrl: #66757f; --ctrl-hover: #8a98a2; --text: #e5ecf0; --muted: #9aa8b2;
  --accent: #3ecf9a; --accent-ink: #04261a; --accent-soft: #0f2e25; --ring: rgba(62, 207, 154, 0.28);
  --danger: #ff7b72; --danger-ink: #2a0b09; --danger-soft: #3a1c1a; --ring-danger: rgba(255, 123, 114, 0.25);
  --warn: #e3b341; --warn-soft: #33290f;
  --sh: none;
  --sh-2: 0 0 0 1px #1f2930;
  --sh-hover: 0 10px 24px -10px rgba(0, 0, 0, 0.75);
  --sh-bar: 0 -6px 16px -10px rgba(0, 0, 0, 0.7);
  --p-urgent: #ff6b6b; --p-high: #ff8a5c; --p-medium: #f0b429; --p-low: #6ea8ff; --p-none: #8a929e;
  --s-backlog: #7a8590; --s-todo: #6ea8ff; --s-prog: #f0b429; --s-park: #7a8590; --s-rev: #a78bfa; --s-done: #4ccf8a; --s-canc: #9aa3ab;
  --t-task: #9aa2ae; --t-epic: #a78bfa; --t-bug: #ff7b72;
  --e-low: #4ccf8a; --e-medium: #f0b429; --e-high: #ff8a5c;
  --av-ink: #ffffff; --av-red: #c62828; --av-orange: #b45309; --av-green: #2e7d32; --av-teal: #00796b;
  --av-blue: #3366ea; --av-indigo: #585ae0; --av-purple: #9444dc; --av-pink: #c72066; --av-neutro: #66707c;
}
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.shell.con-progetto { grid-template-columns: 15rem minmax(0, 1fr); }
.barra-alta { grid-column: 1 / -1; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--sp-3); height: 56px; padding: 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.laterale { align-self: start; background: var(--surface); border-right: 1px solid var(--line); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); position: sticky; top: 56px; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; }
.mono { font-family: var(--mono); }
.marchio { display: flex; align-items: center; gap: 10px; min-height: 34px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.marchio-segno { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.marchio-segno::before { content: "W"; }
.menu { display: none; margin-left: auto; }
.menu > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 14px; border: 1px solid var(--ctrl); border-radius: var(--r-in); cursor: pointer; list-style: none; font-weight: 600; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.menu[open] > summary::after { transform: rotate(-135deg); }
.voci-alte { display: flex; align-items: center; gap: 2px; }
.menu-alto { position: relative; }
.menu-account { margin-left: auto; }
.voce-alta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; }
.voce-alta:hover { background: var(--surface-2); color: var(--text); }
.voce-alta.corrente { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.menu-alto > summary::-webkit-details-marker { display: none; }
.menu-alto > summary::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.menu-alto[open] > summary::after { transform: rotate(-135deg); }
.nome-account { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pannello-progetti, .pannello-account { position: absolute; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); box-shadow: var(--sh-2); }
.pannello-progetti { left: 0; width: 26rem; max-width: calc(100vw - 2rem); }
.pannello-account { right: 0; min-width: 12rem; }
.pannello-account form { margin: 0; }
.pannello-account .voce-esci { width: 100%; justify-content: flex-start; min-height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--muted); font-weight: 500; }
.pannello-account .voce-esci:hover { color: var(--text); }
.cerca-progetti { width: 100%; height: 36px; margin-bottom: var(--sp-1); }
.righe-progetti { list-style: none; margin: 0; padding: 0; }
.riga-progetto a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.riga-progetto a:hover { background: var(--surface-2); }
.riga-progetto a[aria-current="true"] { background: var(--accent-soft); }
.chiave { display: block; max-width: 7rem; padding: 2px 6px; overflow: hidden; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.riga-progetto a[aria-current="true"] .chiave { background: var(--surface); }
.riga-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.riga-nome { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.riga-team { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nessun-progetto, .nessuna-corrispondenza { margin: 0; padding: 8px; color: var(--muted); }
.piede-progetti { display: flex; align-items: center; min-height: 36px; margin-top: var(--sp-1); padding: 0 8px; border-top: 1px solid var(--line); color: var(--text); font-weight: 500; text-decoration: none; }
.piede-progetti:hover { background: var(--surface-2); }
.piede-progetti[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.testa-progetto { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 10px; }
.voci ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.voci a { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; }
.voci a:hover { background: var(--surface-2); color: var(--text); }
.voci a.attiva { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.identita { font-size: 0.95rem; color: var(--muted); overflow-wrap: anywhere; }
a.identita { text-decoration: none; }
a.identita:hover { color: var(--text); text-decoration: underline; }
.contenuto { min-width: 0; width: 100%; max-width: clamp(1100px, 90%, 1800px); margin-inline: auto; padding: 24px 32px 40px; }
@media (max-width: 79.99rem) {
  .shell.con-progetto { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .laterale { padding: var(--sp-2); }
  .laterale .voce-testo, .laterale .riga-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .laterale .voci a { justify-content: center; width: 40px; height: 40px; margin-inline: auto; padding: 0; }
  .laterale .testa-progetto { justify-content: center; padding: 0; }
  .laterale .chiave { max-width: 40px; }
}
@media (min-width: 48.01rem) and (max-width: 63.99rem) {
  .barra-alta .marchio .voce-testo, .nome-account { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 48rem) {
  .shell { display: block; }
  .barra-alta { flex-wrap: wrap; align-content: flex-start; height: auto; min-height: 56px; max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
  .voci-alte, .menu-account { display: none; }
  .menu { display: block; }
  .menu[open] ~ .voci-alte { display: flex; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .menu[open] ~ .menu-account { display: block; flex: 1 0 100%; margin-left: 0; padding-bottom: var(--sp-2); }
  .menu-alto { position: static; }
  .menu-alto .pannello-progetti, .menu-account .pannello-account { position: static; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .voci-alte .voce-alta, .menu-account summary.voce-alta { height: auto; min-height: 44px; }
  .voci-alte .cerca-progetti { height: 44px; font-size: 16px; }
  .voci-alte .piede-progetti, .menu-account .pannello-account .voce-alta, .menu-account .voce-esci { min-height: 44px; }
  @supports selector(::details-content) {
    details.menu-alto::details-content { content-visibility: visible; }
    .menu-alto > summary { pointer-events: none; }
    .menu-alto > summary::after { display: none; }
  }
  .barra-alta .marchio { min-height: 44px; }
  .accesso a.marchio { min-height: 44px; }
  .laterale { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3); overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--line); }
  .laterale .voci ul { flex-direction: row; }
  .laterale .voce-testo { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .laterale .voci a { flex: none; width: auto; height: auto; min-height: 44px; margin: 0; padding: 0 12px; justify-content: flex-start; }
  .laterale .testa-progetto { flex: none; padding: 0 var(--sp-2); }
  .laterale .chiave { max-width: 7rem; }
  @supports (-webkit-line-clamp: 2) {
    .voci-alte .riga-nome { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; }
  }
  .contenuto { padding: 1rem; }
}
/* Accesso: una scheda centrata, nessuna shell. */
.accesso { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 20px; padding: 24px 16px; background: var(--bg); }
.accesso-motto { margin: 0; color: var(--muted); text-align: center; }
.scheda-accesso { width: 100%; max-width: 25rem; padding: 32px; display: grid; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-out); }
.scheda-larga { max-width: 40rem; }
.scheda-accesso h1 { margin: 0; }
.scheda-accesso .accesso-nota { color: var(--muted); margin: 0; }
.scheda-accesso form { display: block; }
.scheda-accesso .campo input { width: 100%; }
.scheda-accesso button { width: 100%; margin-top: 1rem; padding: 0.55rem 0.9rem; }
.scheda-accesso .campo + details { margin-top: var(--sp-4); }
.scheda-accesso details > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; cursor: pointer; list-style: none; color: var(--text); font-weight: 550; }
.scheda-accesso details > summary::-webkit-details-marker { display: none; }
.scheda-accesso details > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
.scheda-accesso details[open] > summary::before { transform: rotate(45deg); }
.scheda-accesso details > summary + .campo { margin-top: var(--sp-4); }
.azione-primaria { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; padding: 6px 16px; border: 1px solid var(--accent); border-radius: var(--r-in); background: var(--accent); color: var(--accent-ink); font-size: 0.875rem; font-weight: 600; line-height: 1.3; text-decoration: none; cursor: pointer; }
a.azione-primaria { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s ease, border-color 0.12s ease; }
a.azione-primaria:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--ring), var(--sh-hover); }
a.azione-primaria:active { transform: translateY(0); box-shadow: none; }
.accesso-alternativa { margin: 0; color: var(--muted); text-align: center; }
.accesso-alternativa a { display: inline-flex; align-items: center; min-height: 44px; }
.accesso-alternativa a:hover { text-decoration-thickness: 2px; }
.accesso-aiuto { font-size: 0.85rem; color: var(--muted); margin: 1rem 0 0; }
/* WSP-144: le pillole della lingua (accesso e «Entra in un team»): due pulsanti, nessuno script. */
.pillole-lingua { display: flex; gap: 8px; justify-content: center; }
.pillole-lingua form { display: flex; gap: 8px; margin: 0; }
.pillole-lingua button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin: 0; padding: 6px 16px; border: 1px solid var(--ctrl); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 550; }
.pillole-lingua button:hover:where(:not(:disabled)) { background: var(--surface-2); border-color: var(--ctrl-hover); transform: none; }
.pillole-lingua button:active:where(:not(:disabled)) { transform: none; }
.pillole-lingua button[aria-current="true"], .pillole-lingua button[aria-current="true"]:hover:where(:not(:disabled)) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.codice-errore { font-size: 0.875rem; color: var(--muted); margin: 0; }
.scheda-errore { margin: 48px auto; }
.benvenuto-velo { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 70%, transparent); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .benvenuto-velo { background: var(--bg); opacity: 0.7; }
}
.benvenuto { position: fixed; inset: 0; z-index: 41; margin: auto; width: min(28rem, calc(100% - 32px)); height: fit-content; padding: 32px; display: grid; gap: 20px; background: var(--surface); border-radius: var(--r-out); animation: entrata-benvenuto 0.2s cubic-bezier(.16,1,.3,1); }
.benvenuto h2, .benvenuto p { margin: 0; }
.benvenuto-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.benvenuto-azioni .azione-primaria { width: auto; }
@keyframes entrata-benvenuto { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 48rem) {
  .azione-primaria { min-height: 44px; }
  .scheda-accesso { padding: 24px; }
  .scheda-accesso details > summary { min-height: 44px; }
  .pillole-lingua button { min-height: 44px; }
  .benvenuto-azioni a { display: inline-flex; align-items: center; min-height: 44px; }
}
h1 { font-size: 1.5rem; letter-spacing: -0.02em; font-weight: 650; margin: 0.4rem 0 1rem; }
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-out);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
th { background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr { height: 44px; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
@supports not (color: color-mix(in srgb, red, blue)) {
  tbody tr:hover { background: var(--surface-2); }
}
.num { text-align: right; font-variant-numeric: tabular-nums; }
form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
main > form:not(.filtri) { display: block; max-width: 24rem; }
label { display: block; font-size: 0.9rem; margin-bottom: 0.2rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--ctrl); border-radius: var(--r-in); padding: 0.4rem 0.6rem;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover, select:hover, textarea:hover { border-color: var(--ctrl-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--ring-danger);
}
@media (max-width: 48rem) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px; }
}
button {
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; min-height: 36px; padding: 6px 16px; border-radius: var(--r-in);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s ease, border-color 0.12s ease;
}
button:hover:where(:not(:disabled)) { transform: translateY(-1px); }
button:active:where(:not(:disabled)) { transform: translateY(0); }
button:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-lg { min-height: 40px; }
.btn-sm { min-height: 30px; padding: 4px 12px; }
.btn-secondario, .btn-fantasma, .btn-pericolo, .btn-pericolo-pieno {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.12s ease, border-color 0.12s ease;
}
.btn-secondario { background: var(--surface); color: var(--text); border-color: var(--ctrl); }
.btn-secondario:hover { background: var(--surface); border-color: var(--ctrl-hover); transform: none; }
.btn-fantasma { background: transparent; color: var(--text); border-color: transparent; }
.btn-fantasma:hover { background: var(--surface-2); transform: none; }
.btn-pericolo { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn-pericolo:hover { background: var(--danger-soft); transform: none; }
.btn-pericolo-pieno { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); }
.btn-pericolo-pieno:hover { transform: none; }
@media (max-width: 48rem) {
  button, .btn-lg, .btn-sm, .btn-secondario, .btn-fantasma, .btn-pericolo, .btn-pericolo-pieno { min-height: 44px; }
}
.errore { color: var(--danger); }
code { background: var(--surface-2); padding: 0.05rem 0.3rem; border-radius: var(--r-sm); }
a { color: var(--accent); }
/* WSP-38 — elenco task: sezioni per stato, filtri, selettore progetti, riepilogo. */
.filtri { position: relative; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; margin: 1rem 0; }
.filtri > div { flex: 1 1 8.5rem; max-width: 16rem; min-width: 0; }
.filtri > div.ricerca { flex: 2 1 14rem; max-width: 24rem; }
.filtri > .chip-riga { flex: 1 1 auto; max-width: none; }
.filtri input:not([type="hidden"]), .filtri select { width: 100%; }
.filtri button { flex: none; }
.filtri .colonne-nascoste { flex: 1 1 100%; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.filtri .colonne-nascoste legend { font-size: 0.85rem; color: var(--muted); padding: 0; margin-bottom: 0.2rem; }
.filtri .casella { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
.filtri .casella input { width: auto; }
.chip-pannello .colonne-nascoste { flex-direction: column; }
.gruppo h2 { font-size: 1.05rem; margin: 1.4rem 0 0.5rem; }
/* WSP-100 (live-check D2/D3): una tabella larga scorre dentro il suo contenitore, la pagina no (a 390 px). */
.tabella-scorre { overflow-x: auto; max-width: 100%; }
details.gruppo > summary { cursor: pointer; }
details.gruppo > summary h2 { display: inline-flex; align-items: center; gap: var(--sp-2); }
.vuoto { color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0; }
.pri { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.pri svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pri-parola { color: var(--text); }
.pri-urgent { color: var(--p-urgent); } .pri-high { color: var(--p-high); } .pri-medium { color: var(--p-medium); } .pri-low { color: var(--p-low); } .pri-none { color: var(--p-none); }
.riepilogo { color: var(--muted); font-size: 0.85rem; margin: 1.2rem 0; }
/* WSP-39 — dettaglio task: meta, descrizione renderizzata, relazioni, commenti, activity. */
.percorso { font-size: 0.9rem; margin: 0.4rem 0; }
.percorso [aria-hidden="true"] { color: var(--muted); }
.chiave { color: var(--muted); font-weight: 600; margin-right: 0.4rem; }
.meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  background: var(--surface); border: 1px solid var(--line); padding: 0.7rem 1rem; margin: 0.8rem 0;
  border-radius: var(--r-in);
}
.meta > div { min-width: 7rem; }
.meta dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.meta dd { margin: 0.1rem 0 0; }
main section { background: var(--surface); border: 1px solid var(--line); padding: 0.4rem 1rem 0.9rem; margin: 0.8rem 0; border-radius: var(--r-in); }
section h2 { font-size: 1.05rem; }
.relazioni dl { margin: 0.4rem 0; }
.rel { display: flex; gap: 0.8rem; padding: 0.25rem 0; }
.rel dt { flex: 0 0 8rem; font-size: 0.9rem; color: var(--muted); padding-top: 0.15rem; }
.rel dd { margin: 0; }
.rel ul { list-style: none; margin: 0; padding: 0; }
.renderizzato { overflow-wrap: anywhere; }
.renderizzato pre {
  background: var(--surface-2); padding: 0.5rem 0.7rem; overflow-x: auto; border-radius: var(--r-sm);
}
.renderizzato pre code { background: none; padding: 0; }
.renderizzato input[type="checkbox"] { margin-right: 0.4rem; }
.renderizzato blockquote { margin: 0.5rem 0; padding: 0.1rem 0.9rem; border-left: 3px solid var(--line); color: var(--muted); }
details.sorgente { margin-top: 0.7rem; }
details.sorgente summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
details.sorgente pre {
  background: var(--surface-2); padding: 0.6rem 0.8rem; overflow-x: auto; white-space: pre-wrap;
}
.commento { border: 1px solid var(--line); background: var(--surface-2); padding: 0.5rem 0.9rem 0.7rem; margin: 0.6rem 0; border-radius: var(--r-sm); }
.commento header { font-size: 0.88rem; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; margin-bottom: 0.45rem; }
/* WSP-40 — scritture: form nel dettaglio, label attacca/stacca, conflitto, creazione. */
.azioni form, .nuovo-commento form, .etichette form.form-edit { display: block; margin: 0.7rem 0 1rem; }
.azioni .riga, .etichette .riga { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; margin: 0.5rem 0; }
.azioni select, .etichette select, .azioni input[type="text"], .nuovo-commento input[type="text"] {
  padding: 0.4rem 0.5rem; font: inherit; background: var(--surface); min-width: 9rem;
}
.azioni textarea, .nuovo-commento textarea, .conflitto textarea, form.form-edit textarea {
  width: 100%; min-height: 9rem; padding: 0.45rem 0.6rem; font: inherit;
  background: var(--surface); resize: vertical;
}
form.form-edit input[type="text"] { width: 100%; padding: 0.45rem 0.6rem; font: inherit; background: var(--surface); }
form.form-edit > div { margin: 0.4rem 0; }
form.form-edit .riga { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; }
.briciole { font-size: 0.88rem; color: var(--muted); margin: 0 0 0.6rem; }
.intestazione { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-4); align-items: end; margin: 0 0 var(--sp-5); }
.intestazione .briciole { grid-column: 1; font-size: 12.5px; color: var(--muted); margin: 0 0 var(--sp-2); }
.intestazione .briciole a { color: inherit; }
.intestazione .briciole > * + *::before { content: "\203A"; content: "\203A" / ""; margin: 0 var(--sp-2); }
.intestazione h1 { grid-column: 1; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin: 0; overflow-wrap: anywhere; }
.intestazione .sub { grid-column: 1; font-size: 13px; color: var(--muted); margin: var(--sp-1) 0 0; }
.intestazione .azioni { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); align-self: end; align-items: center; }
.intestazione .azione-primaria { width: auto; }
.intestazione .interruttore { margin: 0; }
@media (max-width: 48rem) {
  .intestazione h1 { font-size: 21px; }
  .intestazione { grid-template-columns: minmax(0, 1fr); }
  .intestazione .azioni { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: var(--sp-3); }
}
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo + .campo { margin-top: var(--sp-4); }
.campo label { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0; font-size: 13px; font-weight: 600; }
.campo .facoltativo { font-weight: 400; color: var(--muted); }
.campo-aiuto { margin: 0; font-size: 12.5px; color: var(--muted); }
.campo-errore { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 550; color: var(--danger); }
.campo-errore::before { content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); color: var(--danger-ink); font-size: 10px; font-weight: 700; line-height: 1; }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .campo select, .sel select { box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r-in); }
.campo textarea { box-sizing: border-box; width: 100%; min-height: 120px; padding: 8px 12px; border-radius: var(--r-in); resize: vertical; }
.campo ::placeholder { color: var(--muted); opacity: 1; }
.campo :disabled { opacity: 0.55; cursor: not-allowed; }
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"])[readonly], .campo textarea[readonly] { background: var(--bg); border-style: dashed; }
.sel { position: relative; display: block; }
.sel select { appearance: none; padding-right: 36px; }
.sel::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.pillole { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pillole legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.pillola { position: relative; display: inline-flex; margin: 0; font-size: 13px; }
.pillola input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pillola input:focus-visible { outline: none; }
.pillola span { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--ctrl); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 550; }
.pillola:hover span { border-color: var(--ctrl-hover); }
.pillola input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pillola input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.interruttore { display: inline-flex; margin: 0 0 var(--sp-3); border: 1px solid var(--ctrl); border-radius: var(--r-in); overflow: hidden; font-size: 13px; }
.interruttore a { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0 14px; background: var(--surface); color: var(--text); font-weight: 550; text-decoration: none; }
.interruttore a + a { border-left: 1px solid var(--ctrl); }
.interruttore a:hover { background: var(--surface-2); }
.interruttore a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.interruttore a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pillola input:disabled + span { opacity: 0.55; }
.pillole-larga .pillola { flex: 1 1 0; }
.pillole-larga .pillola span { width: 100%; }
.pillole-priorita { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pillole-priorita legend { grid-column: 1 / -1; }
.pillole-priorita .pillola span { flex-direction: column; min-height: 46px; padding: 0 4px; border-radius: var(--r-in); }
.pillole-numeri { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pillole-numeri legend { grid-column: 1 / -1; }
.pillole-numeri .pillola span { padding: 0; }
.casella-campo { position: relative; display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: 14px; }
.casella-campo input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.lab { --c: var(--muted); display: inline-flex; width: fit-content; font-size: 13px; }
.lab input { position: absolute; width: 16px; height: 16px; opacity: 0; }
.lab span { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 28px; border: 1px solid var(--ctrl); border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 500; }
.lab input:focus-visible { outline: none; }
.lab input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lab input:checked + span { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); background: color-mix(in srgb, var(--c, var(--muted)) 15%, var(--surface)); color: color-mix(in srgb, var(--c, var(--muted)) 35%, var(--text)); border: 1px solid color-mix(in srgb, var(--c, var(--muted)) 32%, var(--surface)); }
.lab input:checked + span::before { content: "✓"; font-weight: 700; }
@supports not (color: color-mix(in srgb, red, blue)) {
  .lab input:checked + span { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
}
.riepilogo-errori { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; margin: 0 0 var(--sp-4); padding: var(--sp-3) 14px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); border-radius: var(--r-in); background: var(--danger-soft); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .riepilogo-errori { border: 1px solid var(--danger); }
}
.riepilogo-errori::before { content: "!"; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: var(--danger-ink); font-size: 13px; font-weight: 700; line-height: 1; }
.riepilogo-errori p { margin: 0; font-weight: 650; color: var(--danger); }
.riepilogo-errori ul { grid-column: 2; margin: 0; padding: 0; list-style: none; }
.riepilogo-errori a { color: var(--text); }
@media (max-width: 48rem) {
  .riepilogo-errori a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 48rem) {
  .campo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .campo select, .sel select { height: 44px; font-size: 16px; }
  .campo textarea { font-size: 16px; }
  .pillola span { min-height: 38px; }
  .pillole-priorita .pillola span { min-height: 50px; }
  .casella-campo { min-height: 44px; }
}
.nota { color: var(--muted); font-size: 0.88rem; margin: 0.2rem 0 0.6rem; }
.label-lista { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.35rem; }
.label-lista li { display: flex; gap: 0.5rem; align-items: center; }
.label-lista form { display: inline; }
.label-lista button { min-height: 0; padding: 0.05rem 0.55rem; font-size: 0.8rem; border-color: var(--line); background: var(--surface); color: var(--text); }
.nuovo { margin: 0.6rem 0; }
/* WSP-42 — board kanban: colonne per stato, schede, spostamento per menu. */
.board { display: flex; gap: 0.75rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.8rem; }
.colonna {
  flex: 1 1 0; min-width: 10rem; background: var(--lane);
  border: 0; border-top: 3px solid var(--sc); border-radius: var(--r-out);
  padding: 0.5rem 0.6rem 0.7rem; margin: 0;
}
.colonna.sc-parked { border-top-style: dashed; }
.colonna > summary { list-style: none; cursor: pointer; }
.colonna > summary::-webkit-details-marker { display: none; }
.colonna h2 { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--muted); margin: 0.1rem 0 0.5rem; display: flex; align-items: center; gap: 6px; }
.colonna h2::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.colonna.sc-parked h2::before { background: transparent; box-shadow: inset 0 0 0 2px var(--sc); }
.colonna:not([open]) { flex: 0 0 2.75rem; min-width: 2.75rem; min-height: 16rem; padding-inline: 0.15rem; }
.colonna:not([open]) h2 { writing-mode: vertical-rl; }
.colonna-vuota { border: 1px dashed var(--ctrl); border-radius: var(--r-in); padding: var(--sp-4) var(--sp-3); text-align: center; }
.scheda { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); box-shadow: var(--sh); padding: 0.45rem 0.6rem 0.55rem; margin: 0 0 0.5rem; }
.scheda-testa { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2rem 0.4rem; font-size: 0.85rem; }
.scheda:hover { border-color: var(--ctrl); box-shadow: var(--sh-2); }
.scheda-id { font-family: var(--mono); font-weight: 600; white-space: nowrap; text-decoration: none; }
.scheda-testa .tipo { margin-right: 0; white-space: nowrap; }
.scheda-titolo { margin: 0.15rem 0 0.25rem; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.scheda-piede { margin: 0.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: center; font-size: 0.8rem; color: var(--muted); min-height: 1.1rem; }
.scheda-piede .assegnatario { margin-left: auto; }
.scheda .persona-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scheda .sposta { margin-top: 0.45rem; flex-wrap: nowrap; }
.scheda .sposta select { flex: 1 1 auto; min-width: 0; padding: 0.25rem 0.35rem; font: inherit; font-size: 0.85rem; background: var(--surface); }
.scheda .sposta button { min-height: 0; padding: 0.25rem 0.6rem; font-size: 0.85rem; }
/* Drag and drop (WSP-70): le classi le mette lo script, solo con puntatore preciso. */
.board.drag-attivo .scheda { cursor: grab; }
.board.drag-attivo .scheda .sposta { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.board.drag-attivo .scheda:hover .sposta, .board.drag-attivo .scheda:focus-within .sposta { position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.4rem; width: auto; height: auto; overflow: visible; clip: auto; margin: 0; background: var(--surface); }
.scheda.in-volo { opacity: 0.45; transform: scale(0.98); }
.colonna.non-valida { opacity: 0.45; }
.colonna.bersaglio { outline: 2px dashed var(--accent); outline-offset: -2px; }
.colonna.sopra { background: var(--surface-2); outline-style: solid; }
/* Trascinamento delle righe dell'elenco (spec 2026-10-15 §6): le classi le mette lo script, sulle sezioni gruppo. */
tr[draggable] { cursor: grab; }
tr.in-volo { opacity: 0.45; }
details.gruppo.non-valida { opacity: 0.45; }
details.gruppo.bersaglio { outline: 2px dashed var(--accent); outline-offset: -2px; }
details.gruppo.sopra { background: var(--surface-2); outline-style: solid; }
.bloccato { color: var(--danger); font-weight: 600; }
.tetto { font-size: 0.85rem; margin: 0.4rem 0 0.1rem; }
.conflitto th[scope="row"] { background: var(--surface-2); font-size: 0.85rem; white-space: nowrap; }
.conflitto td { vertical-align: top; }
.conflitto pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font-size: 0.88rem; max-width: 20rem; }
/* WSP-49 — le run: stato, racconto, coda, badge sul board. Mai colori dal dato: solo queste classi. */
.run-stato { display: inline-block; padding: 0 0.5rem; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 600; background: var(--surface-2); }
.run-in-corso { background: var(--surface-2); }
.run-bloccata { background: var(--warn-soft); }
.run-completata { background: var(--accent-soft); }
.run-fallita { background: var(--danger-soft); }
.badge-run { display: inline-block; padding: 0 0.4rem; border-radius: var(--r-sm); font-size: 0.75rem; font-weight: 600; background: var(--surface-2); }
.allarme { border: 1px solid var(--danger); color: var(--danger); background: var(--danger-soft); padding: 0.5rem 0.7rem; border-radius: var(--r-sm); }
.domanda, .evento-domanda { border-left: 4px solid var(--warn); }
.domanda { background: var(--warn-soft); padding: 0.4rem 0.8rem; margin: 0.8rem 0; }
.bolla .tipo { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.evento-errore { border-color: var(--danger); }
.evento-istruzione { border-left: 4px solid var(--accent); }
.troncato { font-size: 0.82rem; color: var(--danger); font-style: italic; margin: 0.2rem 0 0; }
.sospetta { color: var(--danger); font-weight: 600; }
/* WSP-63 — richieste di attenzione: indicatore nella shell, badge sulla scheda, avviso nel dettaglio. */
.attenzione { display: block; margin: 0.4rem 0; padding: 0.35rem 0.6rem; border: 1px solid var(--danger); border-radius: var(--r-sm); color: var(--danger); background: var(--danger-soft); font-weight: 600; text-decoration: none; }
.attenzione[hidden], .notifiche[hidden] { display: none; }
.notifiche { margin: 0.2rem 0; font-size: 0.85rem; }
.badge-attesa { color: var(--danger); background: var(--danger-soft); font-weight: 600; font-size: 0.8rem; padding: 0 0.35rem; border-radius: var(--r-sm); white-space: nowrap; }
.allarme-lieve { color: var(--danger); }
.attesa-lista { list-style: none; padding: 0; } .attesa-voce { border-left: 4px solid var(--warn); padding: 0.3rem 0.8rem; margin: 0.6rem 0; }
/* WSP-62 — la conversazione: bolle per ruolo, contenitore del racconto, compositore. */
[hidden] { display: none !important; }
.racconto { margin: 0.6rem 0; }
.bolla { border: 1px solid var(--line); border-radius: var(--r-in); padding: 0.4rem 0.7rem; margin: 0 0 0.5rem; max-width: 60rem; background: var(--surface); }
.bolla header { display: block; padding: 0; border: 0; background: none; font-size: 0.82rem; color: var(--muted); }
.bolla-umano { border-left: 4px solid var(--accent); margin-left: 2rem; }
.bolla-agente { margin-right: 2rem; }
.bolla-sistema { background: var(--surface-2); font-size: 0.9rem; }
.in-attesa { color: var(--warn); font-weight: 600; }
.esito-ok { color: var(--accent); }
.aggiornamento-sospeso { color: var(--danger); font-size: 0.88rem; }
/* WSP-62 Task 8 — visibile solo ai lettori di schermo: la regione aria-live dell'annuncio. */
.solo-lettori, .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* WSP-97 — avatar: disco colorato con icona bianca (SVG inline), e la coppia avatar + nome. */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--av-ink); flex: none; }
.avatar svg { width: 70%; height: 70%; }
.avatar-grande { width: 32px; height: 32px; }
.avatar-red { background: var(--av-red); }
.avatar-orange { background: var(--av-orange); }
.avatar-green { background: var(--av-green); }
.avatar-teal { background: var(--av-teal); }
.avatar-blue { background: var(--av-blue); }
.avatar-indigo { background: var(--av-indigo); }
.avatar-purple { background: var(--av-purple); }
.avatar-pink { background: var(--av-pink); }
.avatar-neutro { background: var(--av-neutro); }
.scelta-avatar fieldset { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; min-width: 0; margin: 0.6rem 0; padding: 0; border: 0; }
.scelta-avatar legend { padding: 0; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.scelta-avatar label { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.scelta-avatar .avatar { width: 2rem; height: 2rem; }
.scelta-avatar input[type="radio"]:checked + .avatar { outline: 3px solid var(--accent); outline-offset: 2px; }
.scelta-avatar input[type="radio"]:focus-visible { outline: none; }
.scelta-avatar input[type="radio"]:focus-visible + .avatar { outline: 3px solid var(--text); outline-offset: 2px; }
.anteprima-avatar { margin: 0.6rem 0; }
.persona, a.identita { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.persona-nome { min-width: 0; max-width: 28ch; overflow-wrap: break-word; }
/* WSP-97 (D5) — il bottone che apre il popup di una persona e il popup (popover nativo, nessun JavaScript). */
button.persona-apri { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; min-height: 0; transition: none; }
button.persona-apri:hover { transform: none; text-decoration: underline; }
button.persona-apri:active { transform: none; }
button.persona-apri:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[popover].persona-popup { box-sizing: border-box; width: max-content; max-width: min(22rem, calc(100vw - 2rem)); margin: auto; padding: 0.9rem 1rem; border: 1px solid var(--ctrl); border-radius: var(--r-in); background: var(--surface); color: var(--text); overflow-wrap: anywhere; }
[popover].persona-popup::backdrop { background: transparent; }
.persona-popup-testa { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; }
.persona-popup dl { margin: 0; }
.persona-popup dt { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.persona-popup dd { margin: 0 0 0.5rem; }
@supports not selector(:popover-open) { .persona-popup { display: none; } }
@media (max-width: 40rem) { .bolla-umano { margin-left: 0.4rem; } .bolla-agente { margin-right: 0.4rem; } }
.lift { position: relative; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--sh-hover); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.lift:hover { transform: translateY(-2px); }
.lift:hover::after, .lift:focus-visible::after { opacity: 1; }
.riquadro { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-out); box-shadow: var(--sh-2); padding: 20px 24px; margin: 0; }
.riquadro + .riquadro { margin-top: 16px; }
a.riquadro { display: block; color: inherit; text-decoration: none; }
.riquadro h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: 15px; font-weight: 650; }
.conteggio { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 550; line-height: 20px; }
.badge-stato { --sc: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.badge-stato::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.sc-backlog { --sc: var(--s-backlog); } .sc-todo { --sc: var(--s-todo); } .sc-in-progress { --sc: var(--s-prog); } .sc-parked { --sc: var(--s-park); }
.sc-in-review { --sc: var(--s-rev); } .sc-done { --sc: var(--s-done); } .sc-canceled { --sc: var(--s-canc); }
.pillola-neutra, .pillola-ok, .pillola-warn { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.pillola-neutra { background: var(--surface-2); color: var(--muted); }
.pillola-ok { background: var(--accent-soft); color: var(--accent); }
.pillola-warn { background: var(--warn-soft); color: var(--warn); }
.pila-avatar { display: inline-flex; align-items: center; }
.pila-avatar .avatar { box-shadow: 0 0 0 2px var(--surface); }
.pila-avatar .avatar + .avatar { margin-left: -6px; }
.pila-altri { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; margin-left: -6px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px var(--surface); }
.stato-vuoto { border: 1px dashed var(--ctrl); border-radius: var(--r-out); padding: 24px; }
.stato-vuoto h2, .stato-vuoto h3 { margin: 0 0 var(--sp-1); font-size: 15px; font-weight: 650; }
.stato-vuoto p { margin: 0; max-width: 60ch; color: var(--muted); }
.stato-vuoto p + * { margin-top: var(--sp-3); }
.gruppo-dettagli > summary { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; list-style: none; }
.gruppo-dettagli > summary::-webkit-details-marker { display: none; }
.gruppo-dettagli > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
.gruppo-dettagli[open] > summary::before { transform: rotate(45deg); }
.barra-azioni { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-5) -24px 0; padding: var(--sp-3) 24px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--sh-bar); }
.barra-azioni p { margin: 0; color: var(--muted); font-size: 12.5px; }
.barra-azioni-pulsanti { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.impostazioni { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 32px; align-items: start; }
.impostazioni-testo h2 { margin: 0 0 var(--sp-1); font-size: 15px; font-weight: 650; }
.impostazioni-testo p { margin: 0; color: var(--muted); font-size: 13px; }
.impostazioni .riquadro { padding: 0; }
.impostazioni-corpo { padding: 20px 24px; }
.impostazioni-piede { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) 24px; background: var(--bg); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-out) var(--r-out); }
.zona-pericolo { border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: var(--r-out); background: var(--surface); }
@supports not (color: color-mix(in srgb, red, blue)) {
  .zona-pericolo { border: 1px solid var(--danger); }
}
.zona-pericolo h2 { margin: 0; padding: 16px 24px; font-size: 15px; font-weight: 650; color: var(--danger); }
.zona-pericolo-riga { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 16px 24px; border-top: 1px solid var(--line); }
.zona-pericolo-riga p { margin: 0; color: var(--muted); }
@media (max-width: 48rem) {
  .gruppo-dettagli > summary { min-height: 44px; }
  .barra-azioni-pulsanti { width: 100%; margin-left: 0; }
  .barra-azioni button { flex: 1 1 100%; }
  .impostazioni { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .zona-pericolo-riga { flex-direction: column; align-items: stretch; }
}
/* WSP-145 — filtri come chip: il pannello si apre sotto la pillola; senza :has() il chip resta neutro. */
.chip-riga { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { position: relative; }
.chip > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--ctrl); border-radius: 999px; background: var(--surface); cursor: pointer; list-style: none; font-weight: 550; }
.chip > summary::-webkit-details-marker { display: none; }
.chip[open] > summary { border-color: var(--accent); }
.chip-pannello { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; min-width: 14rem; max-width: calc(100vw - 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); box-shadow: var(--sh); padding: var(--sp-3); }
.filtro:nth-last-child(-n+4) > .chip > .chip-pannello, .chip-riga > .chip:last-child > .chip-pannello { left: auto; right: 0; }
@supports selector(:has(*)) {
  .chip:has(input[type="checkbox"]:checked) > summary { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .chip:has(input[type="checkbox"]:checked) > summary::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
}
/* WSP-146 — barra dei filtri: chip a radio con la sua ×, Azzera, ricerca con lente. Il chip e' tratteggiato o pieno solo dentro l'@supports della pseudo-classe relazionale. */
.filtro { display: inline-flex; align-items: center; gap: 2px; }
.togli { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; border-radius: 999px; color: var(--muted); font-size: 1.1rem; line-height: 1; text-decoration: none; }
.togli:hover { color: var(--text); background: var(--surface-2); }
.togli[hidden], .azzera[hidden] { display: none; }
.azzera { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--sp-2); }
.chip-valore:not(:empty)::before { content: ": "; }
.ricerca { position: relative; }
.ricerca .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ricerca input[type="search"] { min-height: 34px; padding-left: 32px; }
.chip-pannello fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtri .voce { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 0; font-size: 0.9rem; cursor: pointer; }
.filtri .voce input { width: auto; }
.voce-numero { margin-left: auto; padding-left: var(--sp-3); color: var(--muted); font-variant-numeric: tabular-nums; }
@supports selector(:has(*)) {
  .filtro > .chip > summary { border-style: dashed; }
  .filtro > .chip .chip-nome::before { content: "+ "; }
  .filtro:not([data-filtro="label"]):not(:has(input[type="radio"][value=""]:checked)) > .chip > summary, .filtro:has(input[type="text"]:not(:placeholder-shown)) > .chip > summary { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
  .filtro:not([data-filtro="label"]):not(:has(input[type="radio"][value=""]:checked)) > .chip .chip-nome::before, .filtro:has(input[type="text"]:not(:placeholder-shown)) > .chip .chip-nome::before { content: none; }
  .filtro:has(input[type="text"]:not(:placeholder-shown)) > .chip > summary::after { content: none; }
  .filtro[data-filtro="label"]:not(:has(input[type="text"]:not(:placeholder-shown))) > .togli, .filtro:not([data-filtro="label"]):has(input[type="radio"][value=""]:checked) > .togli { display: none; }
}
/* WSP-146 — pallino di stato nelle voci dei filtri e opzione di vista (Mostra completati) resa come interruttore. */
.pallino { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.pallino.sc-parked { background: transparent; box-shadow: inset 0 0 0 2px var(--sc); }
.interruttore-vista { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 34px; font-size: 0.9rem; cursor: pointer; }
.filtri .interruttore-vista input[type="checkbox"] { appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--ctrl); cursor: pointer; }
.filtri .interruttore-vista input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); }
.filtri .interruttore-vista input[type="checkbox"]:checked { background: var(--accent); }
.filtri .interruttore-vista input[type="checkbox"]:checked::before { transform: translateX(14px); }
.filtri .interruttore-vista input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* WSP-146 — elenco: tabella a sei colonne allineate fra i gruppi, completati nascosti e stati vuoti. */
.tabella-task { table-layout: fixed; width: 100%; }
.tabella-task .c-id { width: 6rem; }
.tabella-task .c-priorita { width: 7rem; }
.tabella-task .c-stima { width: 8rem; }
.tabella-task .c-assegnatario { width: 8.5rem; }
.tabella-task .c-data { width: 7.5rem; }
.tabella-task td:nth-child(2) { overflow-wrap: anywhere; }
.tabella-task td:first-child a { font-family: var(--mono); font-weight: 600; white-space: nowrap; text-decoration: none; }
.tabella-task td:nth-child(2) > a { color: inherit; font-weight: 550; }
.tabella-task td:nth-child(5) button.persona-apri { max-width: 100%; }
.tabella-task td:nth-child(5) .persona-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabella-task td:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.tabella-task td.senza { color: var(--muted); }
@media not all and (max-width: 48rem) {
  @supports selector(:has(*)) {
    details.gruppo[open]:has(> .tabella-task):not(details.gruppo[open]:has(> .tabella-task) ~ details.gruppo) > .tabella-task > thead.solo-lettori { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }
  }
}
.etichette-riga { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin-top: 0.25rem; }
.gruppo.sc-parked .pallino { background: transparent; box-shadow: inset 0 0 0 2px var(--sc); }
.completati-nascosti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--ctrl); border-radius: var(--r-out); color: var(--muted); font-size: 0.9rem; }
.completati-nascosti details.gruppo { display: inline-block; }
.completati-nascosti details.gruppo > summary { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; padding: 0 var(--sp-2); list-style: none; }
.completati-nascosti details.gruppo > summary::-webkit-details-marker { display: none; }
.completati-nascosti details.gruppo > summary::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); }
.stato-vuoto .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.stato-vuoto .azione-primaria { width: auto; }
.home-sottotitolo { margin: 0 0 var(--sp-5); color: var(--muted); }
.home-sezione { margin: 0 0 var(--sp-6); }
.home-sezione-testa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); }
.home-sezione-testa h2 { margin: 0; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.home-sezione-link { margin-left: auto; font-size: 0.9rem; }
.prossimi-gruppo { margin: 0 0 var(--sp-3); }
.prossimi-gruppo h3 { margin: 0 0 var(--sp-1); font-size: 13px; font-weight: 650; color: var(--muted); }
.prossimi-elenco { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-out); background: var(--surface); overflow: hidden; }
.prossimi-elenco li + li { border-top: 1px solid var(--line); }
.prossimo { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 0 var(--sp-3); color: inherit; text-decoration: none; }
.prossimo:hover { background: var(--surface-2); }
.prossimo-id { flex: none; color: var(--muted); font-weight: 600; white-space: nowrap; }
.prossimo-titolo { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pillola-chiave { flex: none; display: inline-flex; align-items: center; min-width: max-content; min-height: 22px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.griglia-progetti { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.card-progetto { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-out); background: var(--surface); box-shadow: var(--sh-2); }
.card-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.card-progetto h3 { margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.card-numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.card-numeri li { display: flex; flex-direction: column; min-width: 0; }
.card-numeri strong { font-size: 20px; font-weight: 650; line-height: 1.2; }
.card-numeri span { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.card-barra { margin: 0; }
.card-fatti { margin: 0; color: var(--muted); font-size: 12px; }
.card-link { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: 0.9rem; }
.card-altri-team { margin: 0; color: var(--muted); font-size: 12px; }
@media (min-width: 48rem) {
  .griglia-progetti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  .griglia-progetti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .interruttore { display: none; }
  .interruttore-vista { min-height: 44px; }
  .board { display: block; overflow: visible; padding-bottom: 0; }
  .colonna, .colonna:not([open]) { flex: none; min-width: 0; min-height: 0; border-top: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; padding-inline: 0.6rem; }
  .colonna > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; }
  .colonna > summary h2 { margin: 0; }
  .colonna > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }
  .colonna[open] > summary::before { transform: rotate(45deg); }
  .colonna:not([open]) h2 { writing-mode: horizontal-tb; }
  .scheda { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; padding: 0.6rem 2.75rem 0.6rem 0; }
  .scheda:hover { box-shadow: none; border-color: var(--line); }
  .scheda-piede .assegnatario { position: absolute; top: 0.4rem; right: 0; margin: 0; }
  .scheda .sub-mini, .scheda .milestone { display: none; }
  .scheda .sposta { display: none; }
  .scheda-id, .tetto a { display: inline-flex; align-items: center; min-height: 44px; }
  .scheda-id { min-width: 44px; }
  #filtra-q { min-height: 44px; }
  .scheda button.persona-apri { min-height: 44px; min-width: 44px; }
  .chip { position: static; }
  .chip > summary { min-height: 44px; }
  .filtri > .chip-riga { flex-basis: 100%; }
  .chip[open] { flex: 1 1 100%; }
  @supports selector(:has(*)) {
    .filtro:has(> .chip[open]) { flex: 1 1 100%; }
  }
  .chip-pannello { position: static; margin-top: var(--sp-2); }
  .togli { min-width: 44px; min-height: 44px; }
  .azzera { min-height: 44px; }
  .ricerca input[type="search"] { min-height: 44px; }
  .filtri .voce, .filtri .casella { min-height: 44px; }
  .briciole a { display: inline-flex; align-items: center; min-height: 44px; }
  .tabella-task { border: 0; border-radius: 0; background: transparent; }
  .tabella-task, .tabella-task tbody { display: block; }
  .tabella-task colgroup, .tabella-task td:last-child, .tabella-task td.senza { display: none; }
  .tabella-task thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabella-task tbody tr { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: var(--sp-2); height: auto; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .tabella-task td { display: block; min-width: 0; padding: 0; border: 0; }
  .tabella-task td:nth-child(2) { display: contents; }
  .tabella-task td:first-child { grid-area: 1 / 1; }
  .tabella-task td:nth-child(2) > .tipo { grid-area: 1 / 2; margin: 0; }
  .tabella-task td:nth-child(3) { grid-area: 1 / 3; }
  .tabella-task td:nth-child(5) { grid-area: 1 / 4; justify-self: end; }
  .tabella-task td:nth-child(2) > a { grid-area: 2 / 1 / 3 / -1; display: flex; align-items: center; min-height: 44px; }
  .tabella-task .etichette-riga { grid-area: 3 / 1 / 4 / 4; margin-top: 0; }
  .tabella-task td:nth-child(4) { grid-area: 3 / 4; justify-self: end; }
  .tabella-task td:first-child a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .tabella-task button.persona-apri { min-height: 44px; min-width: 44px; }
  .tabella-task .pri-parola, .tabella-task .persona-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .completati-nascosti details.gruppo > summary { min-height: 44px; }
  .completati-nascosti a, .stato-vuoto .azioni a { display: inline-flex; align-items: center; min-height: 44px; }
  .prossimo, .home-sezione-link, .card-link a, .card-progetto h3 a { display: inline-flex; align-items: center; min-height: 44px; }
  .prossimo { display: flex; }
  .card-link a { min-width: 44px; }
}
/* WSP-60 — configurazione OmniRoute: campi a larghezza piena (nessuna larghezza fissa), esito ok, avviso. */
.omniroute-stato dl.meta { margin: 0.6rem 0; }
section form.form-edit input[type="password"] { width: 100%; padding: 0.45rem 0.6rem; font: inherit; background: var(--surface); }
/* Tipo e milestone (spec 2026-10-12). Label/tipo/milestone a tinta da un solo colore (spec 2026-10-14 §4). */
.etichetta, .tipo, .milestone {
  --c: var(--muted);
  display: inline-block; padding: 0 0.5rem; border-radius: 999px; margin-right: 0.25rem;
  font-size: 0.8rem; font-weight: 500; line-height: 1.5;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--c, var(--muted)) 15%, var(--surface));
  color: color-mix(in srgb, var(--c, var(--muted)) 35%, var(--text));
  border: 1px solid color-mix(in srgb, var(--c, var(--muted)) 32%, var(--surface));
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .etichetta, .tipo, .milestone { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
}
.tipo { border-radius: var(--r-sm); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 0 0.4rem; }
.tipo-task { --c: var(--t-task); } .tipo-epic { --c: var(--t-epic); } .tipo-bug { --c: var(--t-bug); }
.effort-low { --c: var(--e-low); } .effort-medium { --c: var(--e-medium); } .effort-high { --c: var(--e-high); }
.milestone { --c: var(--accent); }
.milestone::before { content: "⚑ "; }
.tipo-epic, .tipo-bug { border-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .lift:hover { transform: none; }
  button:hover:where(:not(:disabled)) { transform: none; }
  a.azione-primaria:hover { transform: none; }
  .benvenuto { transform: none; }
  .scheda.in-volo { transform: none; }
}
/* WSP-69 — roadmap: sezioni per milestone, sequenza di righe, gestione (Salva/Riapri) in un details. */
.roadmap-sezione { margin: 0 0 var(--sp-3); padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); box-shadow: var(--sh); }
.roadmap-sezione h3 { margin: 0 0 0.3rem; }
.roadmap-sezione h4 { margin: 0.7rem 0 0.2rem; font-size: 0.9rem; color: var(--muted); }
.roadmap-sezione ul { margin: 0; padding-left: 1.1rem; }
.roadmap-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; color: var(--muted); font-size: 0.9rem; }
.sequenza { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); }
.riga-ms { padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); box-shadow: var(--sh); }
.riga-ms.completata { background: var(--surface-2); }
.riga-ms.in-ritardo { border-color: var(--warn); }
.riga-ms-testa { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.riga-ms-testa h3 { margin: 0; }
.pos-ms { color: var(--muted); font-weight: 600; }
.badge-ms { font-size: 0.8rem; padding: 0.05rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); }
.badge-ms.completata { color: var(--accent); border-color: var(--accent); }
.segno-ritardo { font-size: 0.8rem; font-weight: 600; color: var(--warn); }
.ms-barra { width: 10rem; }
form.sposta-ms { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.riga-ms-testa[draggable] { cursor: grab; }
li.riga-ms.in-volo { opacity: 0.45; }
li.riga-ms.sopra { background: var(--surface-2); }
details.gestisci { margin-top: 0.7rem; }
details.gestisci summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
details.gestisci form { display: grid; gap: 0.4rem; margin-top: 0.5rem; max-width: 26rem; }
details.gestisci .azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* WSP-73 — guida agent: blocchi di codice che scorrono dentro la pagina, mai oltre. */
.guida { max-width: 62rem; }
.guida pre { background: var(--surface-2); padding: 0.6rem 0.8rem; overflow-x: auto; border-radius: var(--r-sm); }
.guida pre code { background: none; padding: 0; }
.guida pre.a-capo { white-space: pre-wrap; overflow-wrap: anywhere; }
.guida dt { font-weight: 600; margin-top: 0.6rem; }
.guida dd { margin: 0.1rem 0 0; }
.guida table { display: block; overflow-x: auto; }
/* WSP-92 — Account: solo token del tema, testo chiaro su fondo chiaro e scuro su scuro (AA nei due temi). */
.account form.form-edit { max-width: 32rem; }
.account-team { list-style: none; margin: 0.4rem 0; padding: 0; }
.account-team li { padding: 0.2rem 0; }
.chiave-mostrata, .chiave-mascherata { font-family: var(--mono); color: var(--text); background: var(--surface-2); }
/* Piu' specifico della regola generica degli input (0,3,1): il campo readonly ha fondo e bordo suoi, sempre da token. */
.account input.chiave-mostrata[readonly]:not([type="hidden"]) { width: 100%; font-family: var(--mono); color: var(--text); background: var(--surface-2); border: 1px solid var(--ctrl); }
.avviso-account { color: var(--text); background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--r-sm); padding: 0.5rem 0.7rem; }
.azioni-account { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
/* Team gestiti dalla UI (spec 2026-10-19 §8): colonna unica, righe a tre colonne, conferma dentro la riga. */
.team-pagina { max-width: 880px; }
.team-briciole { font-size: 0.85rem; color: var(--muted); margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.team-briciole a { color: var(--muted); }
.team-briciole span { overflow-wrap: anywhere; }
.team-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin: 0 0 1.4rem; }
.team-testa > div { min-width: 0; }
.team-testa h1 { margin: 0; overflow-wrap: anywhere; }
.team-testa p { color: var(--muted); margin: 0.15rem 0 0; }
.team-form-testa { flex: none; }
main section.team-sez { background: none; border: 0; padding: 0; margin: 0 0 1.6rem; border-radius: 0; }
.team-sez-testa { display: flex; justify-content: space-between; align-items: center; margin: 0 0 0.5rem; min-height: 1.9rem; }
.team-sez-testa h2 { margin: 0; font-size: 1.05rem; }
.team-pannello { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-in); overflow: hidden; }
.team-riga { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.75rem 1rem; }
.team-riga.team-membro { grid-template-columns: minmax(0, 1fr) auto; }
.team-pannello > * + * { border-top: 1px solid var(--line); }
.team-testo { min-width: 0; overflow-wrap: anywhere; }
.team-testo small { display: block; color: var(--muted); font-size: 0.85rem; }
.team-nome { font-weight: 600; color: var(--text); }
a.team-nome { text-decoration: none; }
.team-voce .team-nome { font-size: 1rem; }
a.team-nome:hover { text-decoration: underline; }
.team-chiave { font-weight: 700; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.team-avatar { width: 2rem; height: 2rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; overflow: hidden; }
.team-azioni { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; justify-content: flex-end; }
.team-ruolo { font-size: 0.78rem; font-weight: 600; padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.team-ruolo.team-proprietario { color: var(--accent); }
.team-chip { font-size: 0.78rem; padding: 0 0.5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.team-link { font-size: 0.88rem; white-space: nowrap; }
.team-link-pericolo { font-size: 0.88rem; color: var(--danger); white-space: nowrap; }
button.team-pericolo { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
button.team-secondario { background: var(--surface); color: var(--text); border-color: var(--ctrl); }
.team-conferma { padding: 0.9rem 1rem 1rem; background: var(--surface-2); display: grid; gap: 0.6rem; }
.team-conferma p { margin: 0; max-width: 62ch; overflow-wrap: anywhere; }
.team-form-azioni { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: end; }
.team-campo { display: grid; gap: 0.2rem; flex: 0 1 16rem; min-width: 0; }
.team-campo input { width: 100%; }
.team-annulla { color: var(--accent); font-size: 0.9rem; }
.team-aggiungi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--surface-2); margin: 0; }
.team-aggiungi select { min-width: 0; width: 100%; }
.team-aggiungi.team-vuoto { display: block; }
.team-altri { margin: 0; padding: 0.5rem 1rem; color: var(--muted); font-size: 0.85rem; }
.team-vuoto { margin: 0; padding: 0.75rem 1rem; color: var(--muted); font-size: 0.9rem; }
.team-aiuto { color: var(--muted); font-size: 0.85rem; margin: 0.5rem 0.1rem 0; max-width: 70ch; }
.team-pagina > .team-aiuto { margin: 0.5rem 0.1rem 1.4rem; }
.team-info { display: block; padding: 0.6rem 0.9rem; border-radius: var(--r-in); background: var(--accent-soft); color: var(--text); margin: 0 0 1.4rem; }
.team-form { display: grid; gap: 0.5rem; max-width: 26rem; margin: 0.5rem 0 0; }
.team-form input:not([type="hidden"]) { width: 100%; }
.team-form button { justify-self: start; }
details.team-nuovo { margin: 0 0 0.6rem; }
details.team-nuovo summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 47.5rem) {
  .team-testa { flex-direction: column; }
  .team-riga { grid-template-columns: 44px minmax(0, 1fr); }
  .team-riga.team-membro { grid-template-columns: minmax(0, 1fr); }
  .team-riga .team-azioni { grid-column: 2; justify-content: flex-start; }
  .team-riga.team-membro .team-azioni { grid-column: 1; }
  .team-aggiungi { grid-template-columns: minmax(0, 1fr); }
}
/* Epiche (spec 2026-10-20 §4-§6): barra a tre segmenti larga per classi q-<n> (mai style=, la CSP lo
   vieta), schede, gruppi. Desktop: descrizione a sinistra, alta quanto le due schede di destra
   (contain: size), col testo che scorre dentro; sotto 48rem una colonna: Avanzamento, Proprieta', Descrizione. */
.ep-barra { display: flex; gap: 3px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ep-barra-grande { height: 6px; margin: 0.8rem 0 0.6rem; }
.ep-seg { display: block; flex: 0 1 0%; min-width: 0; border-radius: 999px; }
.q-0 { flex-basis: 0%; }
.q-1 { flex-basis: 1%; }
.q-2 { flex-basis: 2%; }
.q-3 { flex-basis: 3%; }
.q-4 { flex-basis: 4%; }
.q-5 { flex-basis: 5%; }
.q-6 { flex-basis: 6%; }
.q-7 { flex-basis: 7%; }
.q-8 { flex-basis: 8%; }
.q-9 { flex-basis: 9%; }
.q-10 { flex-basis: 10%; }
.q-11 { flex-basis: 11%; }
.q-12 { flex-basis: 12%; }
.q-13 { flex-basis: 13%; }
.q-14 { flex-basis: 14%; }
.q-15 { flex-basis: 15%; }
.q-16 { flex-basis: 16%; }
.q-17 { flex-basis: 17%; }
.q-18 { flex-basis: 18%; }
.q-19 { flex-basis: 19%; }
.q-20 { flex-basis: 20%; }
.q-21 { flex-basis: 21%; }
.q-22 { flex-basis: 22%; }
.q-23 { flex-basis: 23%; }
.q-24 { flex-basis: 24%; }
.q-25 { flex-basis: 25%; }
.q-26 { flex-basis: 26%; }
.q-27 { flex-basis: 27%; }
.q-28 { flex-basis: 28%; }
.q-29 { flex-basis: 29%; }
.q-30 { flex-basis: 30%; }
.q-31 { flex-basis: 31%; }
.q-32 { flex-basis: 32%; }
.q-33 { flex-basis: 33%; }
.q-34 { flex-basis: 34%; }
.q-35 { flex-basis: 35%; }
.q-36 { flex-basis: 36%; }
.q-37 { flex-basis: 37%; }
.q-38 { flex-basis: 38%; }
.q-39 { flex-basis: 39%; }
.q-40 { flex-basis: 40%; }
.q-41 { flex-basis: 41%; }
.q-42 { flex-basis: 42%; }
.q-43 { flex-basis: 43%; }
.q-44 { flex-basis: 44%; }
.q-45 { flex-basis: 45%; }
.q-46 { flex-basis: 46%; }
.q-47 { flex-basis: 47%; }
.q-48 { flex-basis: 48%; }
.q-49 { flex-basis: 49%; }
.q-50 { flex-basis: 50%; }
.q-51 { flex-basis: 51%; }
.q-52 { flex-basis: 52%; }
.q-53 { flex-basis: 53%; }
.q-54 { flex-basis: 54%; }
.q-55 { flex-basis: 55%; }
.q-56 { flex-basis: 56%; }
.q-57 { flex-basis: 57%; }
.q-58 { flex-basis: 58%; }
.q-59 { flex-basis: 59%; }
.q-60 { flex-basis: 60%; }
.q-61 { flex-basis: 61%; }
.q-62 { flex-basis: 62%; }
.q-63 { flex-basis: 63%; }
.q-64 { flex-basis: 64%; }
.q-65 { flex-basis: 65%; }
.q-66 { flex-basis: 66%; }
.q-67 { flex-basis: 67%; }
.q-68 { flex-basis: 68%; }
.q-69 { flex-basis: 69%; }
.q-70 { flex-basis: 70%; }
.q-71 { flex-basis: 71%; }
.q-72 { flex-basis: 72%; }
.q-73 { flex-basis: 73%; }
.q-74 { flex-basis: 74%; }
.q-75 { flex-basis: 75%; }
.q-76 { flex-basis: 76%; }
.q-77 { flex-basis: 77%; }
.q-78 { flex-basis: 78%; }
.q-79 { flex-basis: 79%; }
.q-80 { flex-basis: 80%; }
.q-81 { flex-basis: 81%; }
.q-82 { flex-basis: 82%; }
.q-83 { flex-basis: 83%; }
.q-84 { flex-basis: 84%; }
.q-85 { flex-basis: 85%; }
.q-86 { flex-basis: 86%; }
.q-87 { flex-basis: 87%; }
.q-88 { flex-basis: 88%; }
.q-89 { flex-basis: 89%; }
.q-90 { flex-basis: 90%; }
.q-91 { flex-basis: 91%; }
.q-92 { flex-basis: 92%; }
.q-93 { flex-basis: 93%; }
.q-94 { flex-basis: 94%; }
.q-95 { flex-basis: 95%; }
.q-96 { flex-basis: 96%; }
.q-97 { flex-basis: 97%; }
.q-98 { flex-basis: 98%; }
.q-99 { flex-basis: 99%; }
.q-100 { flex-basis: 100%; }
.ep-seg.q-0 { display: none; }
.ep-fatti { background: var(--s-done); } .ep-corso { background: var(--s-prog); } .ep-resto { background: var(--s-todo); }
.ep-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.88rem; color: var(--muted); }
.ep-legenda li { display: inline-flex; align-items: center; gap: 0.4rem; }
.ep-punto { width: 0.7rem; height: 0.7rem; border-radius: 3px; display: inline-block; }
.ep-cima { display: grid; gap: 1rem; align-items: stretch; margin-top: 0.9rem; grid-template-columns: minmax(0, 1.7fr) minmax(19rem, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "desc avanz" "desc prop"; }
main section.ep-scheda { margin: 0; padding: 0.9rem 1.2rem 1rem; box-shadow: var(--sh); min-width: 0; }
.ep-scheda h2 { margin: 0 0 0.4rem; }
.ep-avanzamento { grid-area: avanz; }
.ep-proprieta { grid-area: prop; display: flex; flex-direction: column; }
.ep-descrizione { grid-area: desc; display: flex; flex-direction: column; contain: size; min-height: 26rem; }
.ep-scorre { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-wrap: anywhere; padding-right: 0.5rem; }
.ep-descrizione details.modifica { margin-top: 0.7rem; }
.ep-descrizione details.modifica summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.ep-avanzamento-testa { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.ep-percento { font-size: 2rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ep-prossimo { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 0.92rem; overflow-wrap: anywhere; }
.ep-etichetta { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.15rem; }
.ep-form-prop { display: block; }
.ep-righe { margin: 0.2rem 0 0.6rem; }
.ep-riga { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.ep-righe > .ep-riga:first-child { border-top: 0; }
.ep-riga dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ep-riga dt label { margin: 0; font-size: inherit; }
.ep-riga dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ep-riga select, .ep-riga input[type="text"] { width: 100%; min-width: 0; }
.ep-sola-lettura dd { font-size: 0.92rem; color: var(--muted); }
.ep-attacca { margin-top: 0.4rem; flex-wrap: nowrap; gap: 0.4rem; }
.ep-attacca select { flex: 1 1 auto; }
button.ep-tenue { background: var(--surface); color: var(--text); border-color: var(--ctrl); font-weight: 500; min-height: 0; padding: 0.2rem 0.65rem; font-size: 0.85rem; }
main section.ep-aggiungi { margin: 1rem 0; }
.ep-cerca { flex-wrap: nowrap; gap: 0.5rem; max-width: 34rem; margin: 0.2rem 0 0.4rem; }
.ep-cerca input[type="search"] { flex: 1 1 auto; min-width: 0; }
.ep-risultati { list-style: none; margin: 0; padding: 0; }
.ep-risultati li { display: grid; grid-template-columns: 5.5rem 7rem minmax(10rem, 1fr) auto auto; gap: 0.8rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.ep-titolo-r, .ep-titolo-t { overflow-wrap: anywhere; }
.ep-k { font-weight: 600; white-space: nowrap; }
.ep-altrove { font-size: 0.85rem; color: var(--warn); background: var(--warn-soft); border-radius: var(--r-sm); padding: 0 0.45rem; white-space: nowrap; }
.ep-libero, .ep-stato { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.ep-azione { display: block; }
main section.ep-task { background: none; border: 0; padding: 0; margin: 1rem 0 0; }
details.ep-gruppo { margin: 1.4rem 0 0; }
details.ep-gruppo > summary { cursor: pointer; margin-bottom: 0.45rem; }
details.ep-gruppo > summary h2 { display: inline-block; margin: 0; font-size: 1.05rem; }
.ep-conto { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.ep-tab td { vertical-align: middle; }
.ep-tab td.ep-k { width: 6rem; }
.ep-tab td.ep-az { text-align: right; white-space: nowrap; width: 1%; }
.ep-az form { display: inline; }
.ep-elenco-testa { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ep-elenco-testa h1 { margin: 0.4rem 0; min-width: 0; overflow-wrap: anywhere; }
.ep-filtro { flex-wrap: nowrap; }
.ep-casella { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; color: var(--muted); }
details.ep-nuova { margin: 0 0 1rem; }
details.ep-nuova summary { cursor: pointer; color: var(--accent); font-weight: 600; }
details.ep-nuova form { max-width: 32rem; }
.ep-cella { min-width: 0; }
.ep-avanz { width: 16rem; }
.ep-titolo { font-weight: 600; overflow-wrap: anywhere; }
.ep-titolo a { text-decoration: none; }
.ep-sotto { font-size: 0.85rem; color: var(--muted); margin-top: 0.1rem; }
.ep-mini { display: flex; align-items: center; gap: 0.7rem; min-width: 12rem; }
.ep-mini .ep-barra { flex: 1 1 auto; }
.ep-n { font-variant-numeric: tabular-nums; font-size: 0.88rem; white-space: nowrap; }
.ep-prossimo-cella { overflow-wrap: anywhere; }
.ep-vuota .ep-n { color: var(--muted); }
/* Core attivita (spec 2026-10-22): la barra dei subtask, i punti e l'effort in elenco e nel board (barra.ts). */
.sub-avanz { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; }
.sub-mini { display: inline-flex; align-items: center; gap: 0.5rem; }
.sub-mini .ep-barra { flex: 0 0 4.5rem; width: 4.5rem; }
.punti { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.prontezza-si, .prontezza-no { display: inline-block; padding: 0 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; vertical-align: middle; }
.prontezza-si { color: var(--accent); background: var(--accent-soft); }
.prontezza-no { color: var(--warn); background: var(--warn-soft); }
.avviso-prontezza { color: var(--text); background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--r-sm); padding: 0.5rem 0.7rem; }
.sub-lista { list-style: none; margin: 0.4rem 0 0.8rem; padding: 0; }
.sub-lista li { padding: 0.3rem 0; overflow-wrap: anywhere; }
.sub-stato { font-size: 0.8rem; color: var(--muted); margin: 0 0.3rem; }
.sub-bloccato { font-size: 0.85rem; color: var(--danger); }
.subtask h3 { font-size: 0.95rem; margin: 0.8rem 0 0.2rem; }
.scheda-piede .sub-avanz { flex: 1 1 100%; }
.scheda-piede .sub-mini { flex: 1 1 auto; }
.scheda-piede .sub-mini .ep-barra { flex: 1 1 auto; width: auto; min-width: 3rem; }
@media (max-width: 64rem) {
  .ep-cima { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "avanz" "prop" "desc"; }
  .ep-descrizione { contain: none; min-height: 0; }
  .ep-scorre { flex: none; max-height: 24rem; }
  .ep-risultati li { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "k st" "tit tit" "dove dove" "btn btn"; gap: 0.15rem 0.6rem; padding: 0.7rem 0; }
  .ep-risultati .ep-k { grid-area: k; }
  .ep-risultati .ep-titolo-r { grid-area: tit; }
  .ep-risultati .ep-stato { grid-area: st; justify-self: start; }
  .ep-risultati .ep-libero, .ep-risultati .ep-altrove { grid-area: dove; justify-self: start; }
  .ep-risultati .ep-azione { grid-area: btn; justify-self: start; margin-top: 0.35rem; }
}
@media (max-width: 48rem) {
  .ep-riga { grid-template-columns: 6.2rem minmax(0, 1fr); }
  main section.ep-scheda { padding: 0.8rem 0.9rem 0.9rem; }
  .ep-tab thead { display: none; }
  .ep-tab tr { height: auto; }
  .ep-tab, .ep-tab tbody, .ep-tab tr, .ep-tab td { display: block; }
  .ep-tab td, .ep-tab td.ep-k, .ep-tab td.ep-az { padding: 0; border: 0; width: auto; text-align: left; }
  .ep-tab-task tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "k pri az" "tit tit tit" "ass ass ass"; gap: 0.25rem 0.7rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); align-items: center; }
  .ep-tab-task td.ep-k { grid-area: k; }
  .ep-tab-task td.ep-titolo-t { grid-area: tit; }
  .ep-tab-task td.ep-pri { grid-area: pri; }
  .ep-tab-task td.ep-ass { grid-area: ass; font-size: 0.88rem; }
  .ep-tab-task td.ep-az { grid-area: az; }
  .ep-tab-elenco tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; padding: 0.8rem 0.85rem; border-bottom: 1px solid var(--line); }
  .ep-tab tr:last-child { border-bottom: 0; }
  .ep-mini { min-width: 0; }
}