/* Token del design system: l'unico punto con valori grezzi. Le regole sotto usano solo var(). */
:root {
  /* Marchio: gli stessi colori sono scritti nei file di app/static/img/slancio/ (scripts/disegna_logo.py) */
  --color-brand: #38383b;
  --color-brand-raised: #4b4b50;
  --color-brand-accent: #f86030;     /* solo decoro e punto del marchio: 3.73:1 su antracite */
  --color-on-brand: #e3e3e6;
  --color-on-brand-strong: #ffffff;

  /* Superfici e testo */
  --color-bg: #f4f4f3;
  --color-surface: #ffffff;
  --color-surface-sunken: #fafafa;
  --color-surface-column: #e9e9e7;
  --color-text: #232326;
  --color-text-muted: #62626a;
  --color-heading: #38383b;

  /* Bordi */
  --color-border: #8a8a8f;           /* bordo dei campi: 3.44:1 su bianco */
  --color-border-strong: #bfbfbc;
  --color-border-subtle: #dcdcda;

  /* Azione e collegamenti */
  --color-primary: #cc4513;          /* 4.74:1 col testo bianco */
  --color-primary-hover: #a23609;
  --color-on-primary: #ffffff;
  --color-link: #a23609;
  --color-link-hover: #cc4513;
  --color-highlight: #fde9e1;

  /* Stati: testo, fondo, bordo decorativo */
  --color-success: #2f6b4f;  --color-success-bg: #e6f0ea;  --color-success-border: #b9d6c5;
  --color-warning: #8a5e00;  --color-warning-bg: #fbf1d6;  --color-warning-border: #ead596;
  --color-danger:  #a23a2e;  --color-danger-bg:  #f8e4e0;  --color-danger-border:  #e6bdb6;
  --color-success-strong: #1f4c37;
  --color-warning-strong: #6a4800;
  --color-danger-strong: #7a2a21;

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --color-focus: #cc4513;            /* 4.74:1 su bianco */
  --color-focus-on-brand: #ffffff;   /* 11.7:1 sulla barra antracite */

  /* Tipografia: solo font di sistema */
  --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.87rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.13rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.6rem;
  --font-size-3xl: 1.8rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-code: 0.02em;
  --letter-spacing-stamp: 0.06em;

  /* Spaziature, passo 0.25rem */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2rem;    --space-8: 3rem;
  --space-px: 1px;
  --space-0-5: 2px;

  /* Forme */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 999px;
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-accent: 3px;
  --border-width-sheet: 5px;

  /* Ombre: solo sovrapposizioni */
  --shadow-overlay: 0 6px 18px rgb(40 40 44 / 0.16);
  --color-backdrop: rgb(35 35 38 / 0.45);   /* fondo dietro una finestra modale */

  /* Interazione */
  --opacity-disabled: 0.5;
  --opacity-dragging: 0.45;
  --target-min: 24px;
  --target-touch: 44px;
  --duration-fast: 120ms;

  /* Layout. I punti di rottura non si possono usare in @media: sono 600px e 980px. */
  --sidebar-width: 216px;
  --topbar-height: 56px;
  --content-max-width: 1280px;
  --public-max-width: 820px;
  --login-max-width: 380px;
  --board-column-min: 176px;
  --board-column-min-height: 9rem;
  --picker-max-height: 15rem;
  --textarea-min-height: 4.6rem;
  --meter-height: 0.75rem;
  --logo-sheet-height: 92px;
  --logo-login-width: 210px;
  --logo-brand-height: 26px;        /* marchio di Slancio nella barra */
  --redacted-w1: 9rem;
  --redacted-w2: 12rem;
  --redacted-w3: 7rem;
  --timeline-dot: 8px;
  --modal-max-width: 40rem;
  --feed-when-width: 10rem;   /* ci sta anche «scaduto il 17/10/2026» della pagina Oggi */
  --appt-time-width: 6.5rem;  /* «10:00 alle 11:00» */
  --month-cell-height: 4.5rem;
  --redacted-height: 0.95em;
  --redacted-offset: -0.1em;
  --check-size: 1.1rem;
  --stack-label-width: 8.5rem;   /* etichetta a sinistra nelle righe di una tabella impilata */
  --inline-input-basis: 14rem;
  --login-offset: 9vh;
  --font-size-code: 0.9em;
  --line-height-figure: 1.1;
  --z-overlay: 5;
  --z-skip-link: 10;
}
@media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; } }

* { box-sizing: border-box; }
html { font-size: 93.75%; } /* 15px col browser a 16px, ma rispetta la scelta dell'utente */
body { margin: 0; font-family: var(--font-family-sans); color: var(--color-text); background: var(--color-bg); line-height: var(--line-height-normal); }
a { color: var(--color-link); text-underline-offset: var(--space-0-5); }
a:hover { color: var(--color-link-hover); }
h1, h2, h3 { margin: 0; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); color: var(--color-heading); }
h1 { font-size: var(--font-size-2xl); letter-spacing: var(--letter-spacing-tight); }
h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }
p { margin: 0 0 var(--space-3); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-weight: var(--font-weight-semibold); color: var(--color-heading); padding: 0; margin-bottom: var(--space-3); font-size: var(--font-size-md); }
label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-heading); }
:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }

/* Utilità di testo */
.muted { color: var(--color-text-muted); }
.small { font-size: var(--font-size-sm); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.code { font-family: var(--font-family-mono); font-size: var(--font-size-code); letter-spacing: var(--letter-spacing-code); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline { display: inline; }

/* ===== Struttura della pagina ===== */
.skip-link { position: absolute; left: var(--space-2); top: var(--space-2); z-index: var(--z-skip-link); padding: var(--space-2) var(--space-4); background: var(--color-surface); color: var(--color-link); font-weight: var(--font-weight-semibold); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); transform: translateY(-300%); }
.skip-link:focus { transform: none; }
.shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--color-brand); color: var(--color-on-brand); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.sidebar :focus-visible { outline-color: var(--color-focus-on-brand); }
.sidebar__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sidebar__menu { display: flex; flex-direction: column; flex: 1; gap: var(--space-6); }
.sidebar__foot { margin-top: auto; font-size: var(--font-size-sm); padding: 0 var(--space-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.brand { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-on-brand-strong); text-decoration: none; letter-spacing: var(--letter-spacing-tight); padding: 0 calc(var(--space-3) + var(--border-width-accent)); } /* allineato al testo del menu */
.brand:hover { color: var(--color-on-brand-strong); }
.brand__logo { display: block; height: var(--logo-brand-height); width: auto; }
.nav { display: flex; flex-direction: column; gap: var(--space-0-5); }
.nav__link { display: flex; align-items: center; min-height: calc(var(--target-min) + var(--space-3)); color: var(--color-on-brand); text-decoration: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-md); border-left: var(--border-width-accent) solid transparent; }
.nav__link:hover { background: var(--color-brand-raised); color: var(--color-on-brand-strong); }
.sidebar__user { color: var(--color-on-brand); }   /* 10:1 su antracite, come le voci del menu */
.sidebar__user:hover, .sidebar__user[aria-current="page"] { color: var(--color-on-brand-strong); }
.nav__link[aria-current="page"] { background: var(--color-brand-raised); color: var(--color-on-brand-strong); border-left-color: var(--color-brand-accent); font-weight: var(--font-weight-semibold); }
.main { padding: var(--space-7) var(--space-7) var(--space-8); max-width: var(--content-max-width); width: 100%; min-width: 0; }
.main:focus { outline: none; }
.stack > * + * { margin-top: var(--space-5); }
.cols { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-5); align-items: start; }
.section { border-top: var(--border-width) solid var(--color-border-subtle); padding-top: var(--space-4); margin-top: var(--space-4); }
.subheading { font-size: var(--font-size-md); margin-bottom: var(--space-3); }

/* Pagine fuori dalla struttura: accesso e dossier pubblico */
.center { max-width: var(--login-max-width); margin: var(--login-offset) auto; padding: 0 var(--space-4); }
.center .brand { color: var(--color-heading); display: block; margin-bottom: var(--space-6); padding: 0; font-size: var(--font-size-3xl); }
.center .brand__logo { width: var(--logo-login-width); height: auto; margin: 0 auto; }
/* Logo dell'agenzia sotto il marchio del prodotto, più piccolo: chi usa Slancio, non Slancio. */
.login-logo { display: block; max-width: var(--logo-login-width); max-height: var(--logo-sheet-height); width: auto; height: auto; margin: calc(-1 * var(--space-3)) auto var(--space-6); }
/* Secondo fattore: il segreto da copiare a mano e i codici di recupero, leggibili e senza tagli a metà gruppo. */
.steps-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.steps-list > li + li { margin-top: var(--space-2); }
.secret-key { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); word-spacing: var(--space-2); overflow-wrap: anywhere; background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
.recovery-codes { list-style: none; margin: 0 0 var(--space-4); padding: var(--space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); background: var(--color-bg); border-radius: var(--radius-md); }
.public { max-width: var(--public-max-width); margin: 0 auto; padding: var(--space-7) var(--space-5) var(--space-8); }

/* ===== Componenti (macro in _macros.html) ===== */

/* Intestazione di pagina */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-header__text { min-width: 0; }
.page-header__back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target-min); margin-bottom: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); text-decoration: none; }
.page-header__back:hover { color: var(--color-link); text-decoration: underline; }
.page-header__sub { color: var(--color-text-muted); margin-top: var(--space-1); }
.page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Pannello */
.panel { background: var(--color-surface); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.panel__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Pulsanti */
.btn--primary, .btn--secondary, .btn--danger, .btn--link {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--target-min); padding: var(--space-2) var(--space-4);
  font: inherit; font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); text-align: center;
  border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-heading); cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.btn--secondary:hover, .btn--danger:hover { border-color: var(--color-heading); color: var(--color-heading); }
.btn--secondary:active { background: var(--color-bg); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover, .btn--primary:active { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--danger { color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger:hover, .btn--danger:active { color: var(--color-danger-strong); border-color: var(--color-danger-strong); background: var(--color-danger-bg); }
.btn--link { padding: 0; border: 0; background: none; color: inherit; font-weight: var(--font-weight-regular); text-decoration: underline; text-underline-offset: var(--space-0-5); }
.btn--link:hover { color: inherit; text-decoration-thickness: var(--border-width-thick); }
.btn--small { padding: var(--space-1) var(--space-3); font-size: var(--font-size-sm); min-height: calc(var(--target-min) + var(--space-2)); }
.btn--primary[disabled], .btn--secondary[disabled], .btn--danger[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; }
.btn--primary[disabled]:hover { background: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary[disabled]:hover { border-color: var(--color-border); }
.btn--primary[hidden], .btn--secondary[hidden], .btn--danger[hidden], .btn--link[hidden] { display: none; }
[aria-busy="true"] { cursor: progress; }

/* Campi */
.field { margin-bottom: var(--space-4); }
.field__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin-bottom: var(--space-1); }
.field__hint { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.field__note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.field__error { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-danger); margin-top: var(--space-1); }
.field__row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.field__row > .input { flex: 1 1 var(--inline-input-basis); width: auto; min-width: 0; }
.input { display: block; width: 100%; min-height: calc(var(--target-min) + var(--space-3)); font: inherit; color: inherit; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.input:hover { border-color: var(--color-heading); }
.input:focus { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }
.input::placeholder { color: var(--color-text-muted); opacity: 1; }
.input[readonly] { background: var(--color-surface-sunken); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input[type="file"] { padding: var(--space-2); }
.input--multiline { min-height: var(--textarea-min-height); resize: vertical; }
.input--copy { font-family: var(--font-family-mono); font-size: var(--font-size-sm); background: var(--color-surface-sunken); }
.field--uncertain .input { border-color: var(--color-warning); background: var(--color-warning-bg); }
.field--inline { margin: 0; }
.field--inline .input--select { width: auto; }
.field--check { align-self: end; }
.field--check .check { min-height: calc(var(--target-min) + var(--space-3)); align-items: center; }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: var(--font-weight-regular); font-size: var(--font-size-md); color: var(--color-text); cursor: pointer; }
.check input, .choice input { accent-color: var(--color-primary); width: var(--check-size); height: var(--check-size); flex: none; margin: var(--space-1) 0 0; }
.field--check .check input { margin-top: 0; }
.choice { display: flex; gap: var(--space-3); align-items: flex-start; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface); font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-text); cursor: pointer; }
.choice + .choice { margin-top: var(--space-2); }
.choice:hover { border-color: var(--color-heading); }
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-highlight); }
.choices { margin-bottom: var(--space-4); }
.repeat { border-left: var(--border-width-accent) solid var(--color-border-subtle); padding: var(--space-1) 0 0 var(--space-4); margin-bottom: var(--space-4); }
.fieldset--uncertain .repeat { border-left-color: var(--color-warning); }

/* Griglia dei form: 12 colonne */
.form-grid { display: grid; gap: 0 var(--space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
/* Campi con note sotto di altezza diversa: si allineano in alto, altrimenti gli input scendono a gradini. */
.form-grid--top { align-items: start; }
/* Le colonne dipendono dalla larghezza del contenitore (pagina o pannello), non da quella della finestra. */
.main, .panel { container: form / inline-size; }
@container form (max-width: 720px) {
  .form-grid > .span-2, .form-grid > .span-3, .form-grid > .span-4 { grid-column: span 6; }
  .form-grid > .span-5, .form-grid > .span-6, .form-grid > .span-8, .form-grid > .span-12 { grid-column: span 12; }
}
@container form (max-width: 480px) {
  .form-grid > * { grid-column: 1 / -1; }
}
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
.form-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-2); }

/* Fila di controlli in linea: ricerca, cambio di stato, pulsanti di copia */
.toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.toolbar .field--inline:has(input[type="search"]) { flex: 1 1 var(--inline-input-basis); }

/* Scelta del comune */
.picker__control { position: relative; }
.picker__list { position: absolute; z-index: var(--z-overlay); left: 0; right: 0; top: 100%; background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); margin: var(--space-0-5) 0 0; padding: 0; list-style: none; max-height: var(--picker-max-height); overflow-y: auto; box-shadow: var(--shadow-overlay); }
.picker__list li { padding: var(--space-2) var(--space-3); min-height: var(--target-min); cursor: pointer; }
.picker__list li[aria-selected="true"], .picker__list li:hover { background: var(--color-highlight); }
.picker__status { font-size: var(--font-size-sm); color: var(--color-success); }

/* Tabelle */
.table-wrap { overflow-x: auto; container: table / inline-size; }
.table { border-collapse: collapse; width: 100%; }
.table th { text-align: left; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); color: var(--color-text-muted); padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border-strong); white-space: nowrap; }
.table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--color-border-subtle); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table th.is-right, .table td.is-right { text-align: right; }
.table td.code { white-space: nowrap; }

/* Coppie etichetta e valore */
.kv { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.kv dt { color: var(--color-text-muted); }
.kv dd { margin: 0; }
.kv .kv__text { white-space: pre-line; overflow-wrap: anywhere; }

/* Etichette di stato */
.tag { display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); padding: 0 var(--space-2); border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); white-space: nowrap; }
.tag--neutral { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text-muted); }
.tag--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success); }
.tag--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.tag--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.tag--strong { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-brand-strong); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; margin: 0; list-style: none; }

/* Avvisi */
.alert { padding: var(--space-3) var(--space-4); border: var(--border-width) solid; border-left-width: var(--border-width-accent); border-radius: var(--radius-md); }
.alert:not(:last-child) { margin-bottom: var(--space-4); }
.alert--info { background: var(--color-surface-sunken); border-color: var(--color-border-subtle); border-left-color: var(--color-brand-accent); }
.alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); border-left-color: var(--color-success); color: var(--color-success-strong); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); border-left-color: var(--color-warning); color: var(--color-warning-strong); }
.alert--danger { background: var(--color-danger-bg); border-color: var(--color-danger-border); border-left-color: var(--color-danger); color: var(--color-danger-strong); }
.alert a { color: inherit; font-weight: var(--font-weight-semibold); }
.warnlist { margin: 0; padding-left: var(--space-5); }
.warnlist li { margin-bottom: var(--space-1); }

/* Riepilogo degli errori di un form */
.error-summary:focus { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.error-summary__title { margin-bottom: var(--space-2); }
.error-summary__list { margin: 0; padding-left: var(--space-5); }
.error-summary__list li + li { margin-top: var(--space-1); }
.field--invalid .check { color: var(--color-danger-strong); }

/* Navigazione dentro una sezione */
.subnav { margin-bottom: var(--space-6); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.subnav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); list-style: none; margin: 0; padding: 0; }
.subnav__link { display: flex; align-items: center; min-height: calc(var(--target-min) + var(--space-3)); padding: var(--space-1) var(--space-3); color: var(--color-text); text-decoration: none; border-bottom: var(--border-width-accent) solid transparent; border-radius: var(--radius-md) var(--radius-md) 0 0; }
.subnav__link:hover { background: var(--color-surface); color: var(--color-heading); border-bottom-color: var(--color-border-strong); }
.subnav__link[aria-current="page"] { color: var(--color-heading); font-weight: var(--font-weight-semibold); border-bottom-color: var(--color-primary); background: var(--color-surface); }

/* Scelta tra viste della stessa pagina */
.segmented { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.segmented__label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.segmented__option { display: inline-flex; align-items: center; min-height: calc(var(--target-min) + var(--space-2)); padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-sm); text-decoration: none; }
.segmented__option:hover { border-color: var(--color-heading); color: var(--color-heading); }
.segmented__option[aria-current="true"] { border-color: var(--color-primary); background: var(--color-highlight); color: var(--color-heading); font-weight: var(--font-weight-semibold); }

/* Contenuto che si apre e si chiude */
.disclosure__summary { cursor: pointer; padding: var(--space-2) 0; font-weight: var(--font-weight-semibold); color: var(--color-heading); border-radius: var(--radius-sm); }
.disclosure__summary:hover { color: var(--color-link); }
.disclosure__body { padding-top: var(--space-3); }

/* Anteprima del logo dell'agenzia */
.logo-preview { display: block; max-height: var(--logo-sheet-height); width: auto; max-width: 100%; margin-bottom: var(--space-3); }

/* Finestra modale */
.modal { border: 0; padding: 0; border-radius: var(--radius-lg); width: min(var(--modal-max-width), calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-4)); max-height: calc(100dvh - 2 * var(--space-4)); overscroll-behavior: contain; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay); }
.modal::backdrop { background: var(--color-backdrop); }
.modal__head { position: sticky; top: 0; z-index: var(--z-overlay); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border-bottom: var(--border-width) solid var(--color-border-subtle); }
.modal__title { font-size: var(--font-size-lg); }
.modal__body { padding: var(--space-5); }

/* Cronologia delle attività */
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item { display: grid; grid-template-columns: var(--feed-when-width) minmax(0, 1fr); gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.feed__item:first-child { padding-top: 0; }
.feed__item:last-child { border-bottom: 0; padding-bottom: 0; }
.feed__when { font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.feed__body { min-width: 0; }
.feed__body p { margin: 0; }
.feed__title { font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.feed__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.feed__meta .code { white-space: nowrap; }
.feed__body .feed__text { margin-top: var(--space-1); white-space: pre-line; overflow-wrap: anywhere; }
.feed__item--masked .feed__title { color: var(--color-text-muted); }
.feed__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; max-width: 70ch; }
.feed__versions { margin: 0; padding-left: var(--space-5); white-space: pre-line; }

/* Agenda: un elenco per giorno; con 900 px di pagina la settimana in sette colonne (sotto, nelle larghezze). */
.agenda { display: grid; gap: var(--space-3); }
.agenda__day { min-width: 0; background: var(--color-surface); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.agenda__day.is-today { border-color: var(--color-primary); }
.agenda__date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--font-size-md); }
.appts { list-style: none; margin: 0; padding: 0; }
.appt { display: grid; grid-template-columns: var(--appt-time-width) minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
.appt:first-child { padding-top: 0; }
.appt:last-child { border-bottom: 0; padding-bottom: 0; }
.appt__time { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.appt__end { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.appt__body { min-width: 0; }
.appt__body p { margin: 0; }
.appt__title { font-weight: var(--font-weight-semibold); color: var(--color-heading); overflow-wrap: anywhere; }
.appt__title .code { font-weight: var(--font-weight-regular); white-space: nowrap; }
.appt__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.appt__body .appt__text { margin-top: var(--space-1); white-space: pre-line; overflow-wrap: anywhere; }
.appt--masked .appt__title, .appt--cancelled .appt__title { color: var(--color-text-muted); }
.month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.month th { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-align: left; }
.month td { height: var(--month-cell-height); padding: 0; border: var(--border-width) solid var(--color-border-subtle); background: var(--color-surface); vertical-align: top; }
.month td.is-outside { background: var(--color-surface-sunken); }
.month td.is-today { box-shadow: inset 0 0 0 var(--border-width-thick) var(--color-primary); }
.month__day { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-1) var(--space-2); color: var(--color-text); text-decoration: none; }
.month__day:hover { background: var(--color-highlight); color: var(--color-heading); }
.month__number { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.is-outside .month__number { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }
.month__count { align-self: flex-start; min-width: var(--target-min); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-on-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-align: center; }

/* Prossimo passo in testa alla sezione Attività */
.next-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-4); }
.next-step__text { font-weight: var(--font-weight-semibold); color: var(--color-heading); overflow-wrap: anywhere; }

/* Stato vuoto */
.empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.empty__heading { font-weight: var(--font-weight-semibold); color: var(--color-heading); margin-bottom: var(--space-1); }
.empty__action { margin-top: var(--space-3); }

/* Barre di misura (ui.meter, ui.bar_table). `appearance: none` serve a WebKit, che altrimenti ignora gli pseudo elementi. */
.meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 6rem; height: var(--meter-height); border: 0; border-radius: var(--radius-sm); background: var(--color-border-subtle); }
.meter::-webkit-meter-bar { background: var(--color-border-subtle); border: 0; border-radius: var(--radius-sm); height: var(--meter-height); }
.meter::-webkit-meter-optimum-value { background: var(--color-success); border-radius: var(--radius-sm); }
.meter::-webkit-meter-suboptimum-value { background: var(--color-warning); border-radius: var(--radius-sm); }
.meter::-webkit-meter-even-less-good-value { background: var(--color-danger); border-radius: var(--radius-sm); }
.meter::-moz-meter-bar { background: var(--color-success); border-radius: var(--radius-sm); }
.meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--color-warning); }
.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-danger); }
.meter--plain::-webkit-meter-optimum-value, .meter--plain::-webkit-meter-suboptimum-value, .meter--plain::-webkit-meter-even-less-good-value { background: var(--color-brand); }
.meter--plain::-moz-meter-bar, .meter--plain:-moz-meter-sub-optimum::-moz-meter-bar, .meter--plain:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--color-brand); }
.table--bars .bar-cell { width: 40%; vertical-align: middle; }

/* ===== Componenti di una sola pagina, anche loro solo con token ===== */

/* Numeri in evidenza della pagina Oggi */
.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.figure { background: var(--color-surface); border: var(--border-width) solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); text-decoration: none; color: inherit; display: block; }
.figure:hover { border-color: var(--color-heading); color: inherit; }
.figure strong { display: block; font-size: var(--font-size-3xl); line-height: var(--line-height-figure); color: var(--color-heading); font-variant-numeric: tabular-nums; }

/* Referenti nella scheda azienda */
.contact + .contact { margin-top: var(--space-2); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.aspect + .aspect { margin-top: var(--space-2); }
.aspect__reason { color: var(--color-text-muted); margin-top: var(--space-0-5); }

/* Bacheca del mandato */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--board-column-min), 1fr); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.board-column { background: var(--color-surface-column); border-radius: var(--radius-lg); padding: var(--space-2); min-height: var(--board-column-min-height); border: var(--border-width-thick) solid transparent; }
.board-column.is-over { border-color: var(--color-brand-accent); background: var(--color-highlight); }
.board-column__head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-heading); margin-bottom: var(--space-2); }
.board-card { background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-left: var(--border-width-accent) solid var(--color-brand); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); cursor: grab; font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.board-card.is-dragging { opacity: var(--opacity-dragging); }
.board-card a { font-weight: var(--font-weight-semibold); text-decoration: none; color: var(--color-heading); }
.board-card a:hover { text-decoration: underline; }
.board-help { margin: var(--space-2) 0 0; }
.board-msg { margin-top: var(--space-2); }
.board-msg:empty { display: none; }
@media (pointer: coarse) { .board-card { cursor: auto; } }

/* Storia della candidatura */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: var(--border-width-thick) solid var(--color-border-strong); position: relative; }
.timeline li::before { content: ""; position: absolute; left: calc(var(--timeline-dot) / -2 - var(--space-px)); top: var(--space-4); width: var(--timeline-dot); height: var(--timeline-dot); border-radius: var(--radius-full); background: var(--color-brand-accent); }

/* Il foglio del dossier: quello che vede l'azienda */
.sheet { background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); border-top: var(--border-width-sheet) solid var(--color-brand); border-radius: var(--radius-sm); padding: var(--space-6); position: relative; }
.sheet-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; border-bottom: var(--border-width) solid var(--color-border-subtle); padding-bottom: var(--space-4); margin-bottom: var(--space-4); }
.sheet-logo { height: var(--logo-sheet-height); width: auto; max-width: 100%; display: block; margin-bottom: var(--space-1); }
.sheet-agency { font-weight: var(--font-weight-bold); color: var(--color-heading); font-size: var(--font-size-lg); }
.stamp { font-family: var(--font-family-mono); border: var(--border-width-thick) solid var(--color-brand-accent); color: var(--color-primary-hover); padding: var(--space-1) var(--space-3); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-stamp); border-radius: var(--radius-sm); white-space: nowrap; }
.sheet h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--font-size-md); color: var(--color-heading); border-bottom: var(--border-width) solid var(--color-border-subtle); padding-bottom: var(--space-1); }
.sheet .title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-heading); line-height: var(--line-height-tight); }
.identity { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: var(--space-4) 0 0; }
.identity dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.identity dd { margin: 0; }
.redacted { display: inline-block; max-width: 100%; background: var(--color-brand); border-radius: var(--radius-sm); height: var(--redacted-height); vertical-align: var(--redacted-offset); }
.redacted.w1 { width: var(--redacted-w1); } .redacted.w2 { width: var(--redacted-w2); } .redacted.w3 { width: var(--redacted-w3); }
.exp { margin-bottom: var(--space-4); }
.exp-top { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.exp-role { font-weight: var(--font-weight-semibold); }
.sheet-foot { border-top: var(--border-width) solid var(--color-border-subtle); margin-top: var(--space-5); padding-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ===== Larghezze ===== */
@media (min-width: 980px) {
  /* La barra resta ferma mentre il contenuto scorre; il fondo scuro copre comunque tutta l'altezza. */
  .shell { background: linear-gradient(to right, var(--color-brand) var(--sidebar-width), var(--color-bg) var(--sidebar-width)); }
  [data-menu-toggle] { display: none; }
}

/* La settimana a sette colonne dipende dallo spazio della pagina, non dalla finestra: con la barra laterale e un
   pannello accanto la stessa finestra può lasciare meno spazio. */
@container form (min-width: 900px) {
  .agenda--week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); }
  .agenda--week .agenda__day { padding: var(--space-3) var(--space-2); }
  .agenda--week .agenda__date { font-size: var(--font-size-sm); }
  .agenda--week .appt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Nella settimana a colonne: ora, tipo, codice e azienda; luogo, referente e organizzatore nella vista del giorno. */
  .agenda--week .appt__end, .agenda--week .appt__text, .agenda--week .appt__details { display: none; }
}

/* Telefono e tablet: barra in alto con il pulsante Menu */
@media (max-width: 979px) {
  .shell { grid-template-columns: 1fr; align-content: start; }  /* la barra resta alta quanto serve anche su pagine corte */
  .sidebar { position: static; height: auto; padding: 0; gap: 0; }
  .sidebar__bar { min-height: var(--topbar-height); padding: var(--space-2) var(--space-4); }
  .sidebar__menu { padding: var(--space-2) var(--space-4) var(--space-4); gap: var(--space-4); border-top: var(--border-width) solid var(--color-brand-raised); }
  .sidebar.is-collapsed .sidebar__menu { display: none; }
  .sidebar__foot { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 var(--space-3); }
  .sidebar__foot .btn--link { min-height: var(--target-touch); }
  .brand { padding: 0; }
  .nav__link { min-height: var(--target-touch); }
  .main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .cols { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telefono */
@media (max-width: 599px) {
  .row--extra { display: none; }
  .main { padding: var(--space-4) var(--space-4) var(--space-7); }
  .page-header { margin-bottom: var(--space-5); }
  .page-header__actions, .toolbar { width: 100%; }
  .page-header__actions > .btn--primary { order: -1; }   /* l'azione principale prima di ricerca e filtri */
  .panel { padding: var(--space-4); }
  .btn--primary, .btn--secondary, .btn--danger { min-height: var(--target-touch); }
  .subnav__link { min-height: var(--target-touch); }
  .segmented__option { min-height: var(--target-touch); }
  .disclosure__summary { padding: var(--space-3) 0; }
  .input { min-height: var(--target-touch); }
  .form-actions > .btn--primary, .form-actions > .btn--secondary, .form-actions > .btn--danger { flex: 1 1 100%; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .feed__item { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .appt { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .modal__head, .modal__body { padding-left: var(--space-4); padding-right: var(--space-4); }
  .kv dt { margin-top: var(--space-2); }
  .public { padding: var(--space-4) var(--space-3) var(--space-7); }
  .sheet { padding: var(--space-4); }
  .sheet-head { flex-direction: column; }
  .sheet-logo { height: auto; max-height: var(--logo-sheet-height); }
}

/* Tabelle che diventano liste quando il loro spazio è stretto: a telefono, ma anche in una colonna di metà pagina. */
@container table (max-width: 600px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border-subtle); }
  .table--stack tr:first-child { padding-top: 0; }
  .table--stack tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .table--stack td, .table--stack td.is-right, .table--stack td.code { border: 0; padding: var(--space-0-5) 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .table--stack td:first-child { padding-bottom: var(--space-1); }
  .table--stack td:first-child > a { font-weight: var(--font-weight-semibold); }
  /* Etichetta e valore sulla stessa riga: l'etichetta pende a sinistra, il valore non le scorre sotto. */
  .table--stack td[data-label] { display: flow-root; padding-left: var(--stack-label-width); }
  .table--stack td[data-label]::before { content: attr(data-label); box-sizing: border-box; float: left; width: var(--stack-label-width); margin-left: calc(-1 * var(--stack-label-width)); padding-right: var(--space-3); font-family: var(--font-family-sans); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); letter-spacing: normal; line-height: inherit; color: var(--color-text-muted); }
  .table--stack td:empty { display: none; }
  /* La cella con l'azione della riga non ha etichetta: il pulsante prende tutta la riga, a portata di pollice. */
  .table--stack td[data-label]:has(> .btn--primary, > .btn--secondary, > .btn--danger, > form) { padding: var(--space-2) 0 0; }
  .table--stack td[data-label]:has(> .btn--primary, > .btn--secondary, > .btn--danger, > form)::before { content: none; }
  .table--stack td .btn--primary, .table--stack td .btn--secondary { width: 100%; }
}

@media print {
  .sidebar, .skip-link { display: none; }
  .shell { display: block; background: none; }
  body { background: var(--color-surface); }
}