/*
 * taska — override del design system Otix (dopo tokens.css e components.css).
 * Solo i token che l'app ridefinisce; tutto il resto viene da tokens.css.
 *
 * --brand-dark, --brand-soft, --brand-ink, --brand-text… non si scrivono qui: tokens.css li ricava
 * da --brand con color-mix, quindi seguono il corallo da soli (--brand-dark = #F06A6A × 0.82 = #C55757).
 * --on-brand bianco anche se sul corallo regge circa 3:1: decisione esplicita del proprietario.
 */
:root {
  --brand: #F06A6A;
  --on-brand: #fff;
}

/*
 * ── Pagine fuori perimetro (hub) ────────────────────────────────────────
 * L'hub (views/theme001/hub/*) include lo stesso partials/head.php e quindi riceve il DS, ma è
 * fuori dal restyle: deve restare com'era. components.css porta anche regole sui TAG nudi
 * (body a 14px, input alti 46px, label a blocco, titoli…) che sul suo markup Tailwind
 * cambierebbero più del carattere. Qui le si annulla con `revert-layer` (si torna al preflight
 * Tailwind) SOLO sulle pagine che non sono di taska: le pagine di taska hanno tutte una radice
 * riconoscibile — la SPA #main, le pagine di accesso #auth-view, le pagine di errore #error-view.
 * Lo scope è in `:where()` (specificità 0): ogni selettore pesa come la regola per tag del DS che
 * annulla, quindi perde contro qualunque classe.
 */
@layer components {
  body:where(:not(:has(#main, #auth-view, #error-view))) { font-size: revert-layer; line-height: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) button:disabled { opacity: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) h1,
  :where(body:not(:has(#main, #auth-view, #error-view))) h2 { font-size: revert-layer; line-height: revert-layer; letter-spacing: revert-layer; font-weight: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) h3 { font-size: revert-layer; font-weight: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) small { font-size: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) strong { font-weight: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) label,
  :where(body:not(:has(#main, #auth-view, #error-view))) legend { font-size: revert-layer; font-weight: revert-layer; color: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) label { display: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) label input,
  :where(body:not(:has(#main, #auth-view, #error-view))) label select,
  :where(body:not(:has(#main, #auth-view, #error-view))) label textarea { margin-top: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) input:not([type=checkbox]):not([type=radio]),
  :where(body:not(:has(#main, #auth-view, #error-view))) select,
  :where(body:not(:has(#main, #auth-view, #error-view))) textarea {
    display: revert-layer; width: revert-layer; border: revert-layer; background: revert-layer;
    border-radius: revert-layer; padding: revert-layer; outline: revert-layer; color: revert-layer;
    min-height: revert-layer; font-size: revert-layer; transition: revert-layer;
  }
  :where(body:not(:has(#main, #auth-view, #error-view))) input::placeholder,
  :where(body:not(:has(#main, #auth-view, #error-view))) textarea::placeholder { color: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) input:focus,
  :where(body:not(:has(#main, #auth-view, #error-view))) select:focus,
  :where(body:not(:has(#main, #auth-view, #error-view))) textarea:focus { border-color: revert-layer; box-shadow: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) input[type=checkbox],
  :where(body:not(:has(#main, #auth-view, #error-view))) input[type=radio] { accent-color: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) label small,
  :where(body:not(:has(#main, #auth-view, #error-view))) fieldset small { display: revert-layer; color: revert-layer; font-size: revert-layer; font-weight: revert-layer; margin-top: revert-layer }
  :where(body:not(:has(#main, #auth-view, #error-view))) dialog {
    border: revert-layer; border-radius: revert-layer; padding: revert-layer; width: revert-layer;
    max-height: revert-layer; overflow-y: revert-layer; color: revert-layer; background: revert-layer; box-shadow: revert-layer;
  }
}

/*
 * ── Shell: sidebar, drawer, topbar mobile (Task 9) ──────────────────────
 * Componenti DS: .sidebar.offcanvas, .nav-item(.active), .nav-section, .nav-group, .nav-toggle,
 * .nav-sub, .nav-logo, .sidebar-backdrop, .mobile-topbar. Qui solo ciò che in taska è diverso.
 *
 * Breakpoint: taska tiene il SUO (lg, 1024px), non il 720px del DS. Sotto lg la sidebar è il
 * drawer a scomparsa di sempre (openNav/closeNav); sopra è una colonna del body flex. Le regole
 * offcanvas/backdrop/topbar del DS (scritte per ≤720) sono ripetute qui per 721–1023 con gli
 * stessi valori; a ≤720 valgono sia quelle del DS sia queste, identiche.
 * Larghezza: quella del DS (252px da 1100, 210px tra 1024 e 1099, min(300px, 86vw) nel drawer).
 */
@layer components {
  /* Stato attivo come offix: fondo slate, testo ink, 600 (non il rosa brand della base DS). */
  .sidebar .nav-item.active { background: var(--slate-100); color: var(--ink); font-weight: var(--weight-semibold) }

  /* Albero clienti → bacheche: è l'unica parte che scorre, il resto della sidebar resta fermo. */
  .sidebar-tree { display: flex; flex-direction: column; gap: 2px }
  #sidebar-projects { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px var(--space-12) }
  /* Nomi lunghi: un'ellissi, mai fuori dalla riga (anche nelle bacheche e nei gruppi). */
  .sidebar .nav-item > span:not([id]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  /* Il chevron del cliente porta anche il numero di bacheche quando è chiuso: si allarga. */
  .sidebar .nav-toggle { width: auto; min-width: 32px; gap: 2px; padding: 0 var(--space-6) }
  /* Intestazione di un gruppo di clienti: più piccola e in grigio, come un'etichetta. */
  .sidebar .nav-group-head { width: 100%; min-height: var(--control-h-sm); padding: var(--space-6) var(--space-12); gap: var(--space-8); font-size: var(--text-12); font-weight: var(--weight-semibold); text-align: left }
  .sidebar button.nav-item { width: 100%; text-align: left }

  /* Logo chiaro reso visibile sul bianco (isLightLogo in spa.php). Fondo e bordo di .nav-logo
     verrebbero invertiti anche loro (quadrato nero): spariscono solo per questi loghi. */
  .invert-on-light { filter: invert(1) }
  .nav-logo.invert-on-light { background: transparent; border-color: transparent }

  /* Da lg: colonna del layout flex del body, alta quanto il viewport (il DS la vuole fixed). */
  @media (min-width: 1024px) {
    .sidebar.offcanvas { position: relative; top: auto; bottom: auto; height: 100%; flex-shrink: 0 }
  }

  /* Sotto lg: drawer a scomparsa + topbar mobile, stessi valori del DS a ≤720. */
  @media (max-width: 1023px) {
    .sidebar.offcanvas { position: fixed; top: 0; bottom: 0; left: calc(min(300px, 86vw) * -1 - 1px); width: min(300px, 86vw); height: 100dvh; display: flex; flex-direction: column; padding: var(--space-24) var(--space-16) var(--space-18); overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); border-bottom: 0; z-index: var(--z-offcanvas); visibility: hidden; transition: left var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow) }
    .sidebar.offcanvas.open { left: 0; visibility: visible; box-shadow: var(--shadow-dialog); transition: left var(--dur-slow) var(--ease-out) }
    .sidebar.offcanvas nav { flex-direction: column; gap: var(--space-4); overflow: visible; padding-bottom: 0 }
    .sidebar.offcanvas .nav-label { display: block }
    .sidebar.offcanvas .nav-item { white-space: normal; min-height: var(--control-h); padding: var(--space-10) var(--space-12); gap: var(--space-12) }
    .sidebar.offcanvas .nav-item .icon { width: 18px; height: 18px }
    .sidebar.offcanvas .nav-sub .nav-item { min-height: var(--icon-btn) }
    .sidebar.offcanvas .nav-group-head { min-height: var(--icon-btn) }
    .sidebar.offcanvas .nav-toggle { min-width: var(--icon-btn); height: var(--icon-btn) }
    .sidebar-backdrop.visible { display: block; position: fixed; inset: 0; z-index: var(--z-offcanvas-backdrop); background: var(--backdrop); animation: otx-backdrop-enter var(--dur) ease-out both }
    .mobile-topbar { position: sticky; top: 0; z-index: var(--z-sidebar); display: flex; align-items: center; gap: var(--space-4); height: 56px; padding: 0 var(--space-8); background: var(--surface); border-bottom: 1px solid var(--line) }
    .mobile-topbar .icon-btn { position: relative; width: 44px; height: 44px; border-color: transparent }
    .mobile-topbar .icon-btn:hover { background: var(--slate-100) }
    .mobile-topbar-title { flex: 1; min-width: 0; padding-left: var(--space-4); font-size: var(--text-16); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  }
  @media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .sidebar.offcanvas, .sidebar.offcanvas.open { transition: none }
    .sidebar-backdrop.visible { animation: none }
  }
}

/*
 * ── Bacheca: kanban e lista (Task 10) ───────────────────────────────────
 * Componenti DS: .kanban*, .table, .tag, .badge, .count, .avatar-stack, .pagination,
 * .dropdown/.popover, .segmented, .check/.checkbox. Qui solo ciò che in taska è diverso.
 */
@layer components {
  /* Scorre la bacheca intera (#board, in orizzontale e in verticale), come prima del DS: le
     colonne crescono con le card invece di scorrere ognuna per conto suo. Il drag & drop
     (autoscroll su #board e #main) conta su questo. */
  #board.kanban { padding-bottom: var(--space-24) }
  #board.kanban .kanban-column { max-height: none }
  #board.kanban .kanban-list { overflow: visible }
  /* Su mobile taska scorre le colonne liberamente, come prima del DS: niente snap orizzontale
     (il DS lo accende a ≤720px). Serve anche al drag & drop, che autoscrolla #board a 14px per frame. */
  #board.kanban { scroll-snap-type: none }
  #board.kanban .kanban-column { scroll-snap-align: none }
  /* Riga dei metadati della card: con molti dati (contatori a 3 cifre, 4+ assegnatari) va a capo
     invece di uscire dalla colonna da 304px. La pila di avatar resta allineata a destra. */
  #board .kanban-card-meta { flex-wrap: wrap; row-gap: var(--space-6) }
  /* Vista lista: le righe hanno altezza fissa (LIST_CELL_H, 3rem). Due righe di tag DS con
     l'interlinea piena (1.6) ne superano di poco l'altezza e l'ultima verrebbe tagliata. */
  #board .table .tag { line-height: var(--leading-snug) }
  /* Righe dati = righe di riempimento (h-[4.5rem], 72px, spa.php): senza, l'ultima pagina è più corta e la tabella salta. */
  #board .table td { padding-block: 12px }
  /* Select di «Vista e filtri» (ordinamento, task per colonna): alti 40px (h-10) come prima, non i
     46px dei campi nudi del DS. Il dropdown sta in #main, fuori da #board. */
  #board-tools select { min-height: 0; padding-top: 0; padding-bottom: 0 }
}

/*
 * ── Pannello task e pannello sotto-attività (Task 11) ───────────────────
 * Componenti DS: .dialog.large (.dialog-header/-body/-footer/-grid), .drawer-section, .context-box,
 * .md-field/.md-toolbar/.md-btn/.md-editor, .comment-list, .line-list/.line-item, .group-title,
 * .dropzone, .dropdown/.menu, .checkbox/.check/.check-list, .progress, .info-banner, .btn.
 * I campi (input/select/textarea) sono quelli nudi del DS.
 */
@layer components {
  /* Il pannello sotto-attività è più stretto del task (una colonna sola), come prima. */
  #subtask-modal.dialog.large { width: min(672px, calc(100% - 32px)) }
  /* Due colonne da md (768px) come prima del DS, che le accende solo da 1100px. */
  @media (min-width: 768px) and (max-width: 1099px) {
    #task-modal .dialog-grid { grid-template-columns: minmax(0, 1fr) 300px }
  }
  /* Colonne impilate: la laterale si separa dalla principale come una sezione dall'altra. */
  @media (max-width: 767px) {
    #task-modal .dialog-grid > div + div { border-top: 1px solid var(--line-soft); padding-top: var(--space-24) }
  }

  /* Titolo del pannello: va a capo anche su una parola lunga senza spazi. Cliccabile = rinomina. */
  .dialog-header .panel-title { overflow-wrap: anywhere }
  .dialog-header .panel-title.editable { margin: -2px 0 -2px -6px; padding: 2px 6px; border-radius: var(--radius-8); cursor: text; transition: background var(--dur-fast) }
  .dialog-header .panel-title.editable:hover { background: var(--slate-100) }
  /* Rinomina: stesso corpo del titolo, bordo scuro (si deve vedere che si sta rinominando). */
  .dialog-header input.panel-title-input,
  .dialog-header input.panel-title-input:focus {
    display: block; width: calc(100% + 6px); min-height: 0; margin: -4px 0 -4px -6px; padding: 0 4px;
    font-size: var(--text-25); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-title);
    border: 2px solid var(--ink); border-radius: var(--radius-8); box-shadow: none
  }
  /* Il task da cui viene la sotto-attività resta a 16px come prima (il DS ne mette 15): è il contesto
     che serve per capire la voce, in evidenza (test_client_work). */
  #subtask-modal .context-box > button { font-size: var(--text-16) }
  /* Avvisi in testata (nessun assegnatario, archiviato, bloccato): compatti, sotto il titolo. */
  .dialog-header .info-banner { margin: var(--space-12) 0 0; padding: var(--space-10) var(--space-14); gap: var(--space-10); font-size: var(--text-14) }
  .dialog-header .info-banner > .icon { flex-shrink: 0 }
  .dialog-header .dialog-actions { margin-top: var(--space-14) }

  /* Selettore colore dei tag: stessa altezza dei campi accanto. */
  :is(#task-modal, #subtask-modal) input.tag-color-input { width: 48px; min-height: 0; height: auto; align-self: stretch; padding: 4px; flex-shrink: 0; cursor: pointer }

  @media (max-width: 720px) {
    #subtask-modal.dialog.large { width: calc(100% - 24px) }
    /* Voce di checklist stretta: i contatori (commenti, allegati, figlie) vanno sotto il titolo
       invece di schiacciarlo a una lettera. */
    .subtask-row > button { flex-wrap: wrap; row-gap: 2px }
    .subtask-row > button > .line-item-main { flex: 1 1 100% }
    /* Titolo a 19px (il DS ne mette 21): su un telefono un titolo lungo si mangerebbe il pannello,
       che sotto la testata ferma ha il corpo che scorre. */
    :is(#task-modal, #subtask-modal) .dialog-header h2.panel-title { font-size: var(--text-19) }
    .dialog-header input.panel-title-input, .dialog-header input.panel-title-input:focus { font-size: var(--text-19) }
  }
}

/*
 * ── Dialog, form, toast, centro notifiche (Task 12) ─────────────────────
 * Componenti DS: dialog/.dialog (+ .large), .modal-header, .modal-subtitle, .modal-actions,
 * .dialog-header/-body/-footer, .btn (.primary .secondary .danger .small), .icon-btn, .tabs/.tab,
 * .check/.checkbox, .form-error, .field-hint, .code-box, .toast (.error .visible).
 * Il dialog di conferma (#app-modal) è il `.dialog` del DS così com'è (540px).
 */
@layer components {
  /* Animazione d'apertura del DS: la regola generale del DS sul movimento ridotto copre `dialog`
     ma non il suo ::backdrop (che non è un figlio: `*` non lo raggiunge). */
  @media (prefers-reduced-motion: reduce) {
    dialog[open], dialog[open]::backdrop { animation: none }
  }

  /* Larghezze di prima: form 672px (max-w-2xl), guida 1024px, notifiche 896px, scadenze 768px.
     Solo sopra i 720px: sotto vale il dialog quasi a tutto schermo del DS. */
  @media (min-width: 721px) {
    #app-form.dialog { width: min(672px, calc(100% - 32px)) }
    #app-help.dialog.large { width: min(1024px, calc(100% - 32px)) }
    #notif-modal.dialog.large { width: min(896px, calc(100% - 32px)) }
    #home-due-modal.dialog.large { width: min(768px, calc(100% - 32px)) }
    /* Dialog grandi alti quasi quanto la finestra, anche con poco contenuto (prima su Safari
       sembravano piccoli). Il corpo (.dialog-body, flex: 1) prende lo spazio in più. */
    dialog.dialog.large { min-height: 90dvh }
  }
  /* Righe di scelta persona (.check con avatar, nome e @nickname): l'avatar resta tondo, non si
     allarga come lo span di testo del DS (`.check > span { flex: 1 }`). */
  #app-form .check > span:not(:last-child) { flex: none }
  /* Intestazione del dialog form con il bottone «indietro» (icon picker): titolo in mezzo. */
  #app-form .modal-header h2 { flex: 1; min-width: 0; overflow-wrap: anywhere }

  /* ── Centro notifiche ── */
  .notif-toolbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding: var(--space-12) 28px; border-bottom: 1px solid var(--line) }
  .notif-filter-group { display: flex; align-items: center; gap: var(--space-10); min-width: 0 }
  .notif-toolbar .tabs { min-width: 0 }
  #notif-modal .notif-list { display: block; list-style: none; margin: 0; padding: 0; min-height: 16rem }
  .notif-row { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-14) 28px; border-bottom: 1px solid var(--line-soft); transition: background var(--dur-fast) }
  .notif-row:last-child { border-bottom: 0 }
  .notif-row.unread { background: var(--brand-wash) }
  .notif-row.has-link:hover { background: var(--slate-50) }
  .notif-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-round) }
  .notif-main { flex: 1; min-width: 0; padding-top: var(--space-2) }
  .notif-main.is-link { cursor: pointer; border-radius: var(--radius-7) }
  .notif-main.is-link:hover .notif-message { text-decoration: underline }
  .notif-message { font-size: var(--text-14); line-height: var(--leading-snug); color: var(--ink-2); overflow-wrap: anywhere }
  .notif-row.unread .notif-message { font-weight: var(--weight-semibold); color: var(--ink) }
  .notif-time { margin-top: var(--space-4); font-size: var(--text-12); color: var(--muted) }
  .notif-actions { flex-shrink: 0; display: flex; align-items: center; gap: 2px }
  .notif-actions .icon-btn.small.flagged { color: var(--status-pending-fg) }
  .notif-dot { width: 8px; height: 8px; margin-left: var(--space-4); border-radius: var(--radius-round) }
  .notif-row.unread .notif-dot { background: var(--danger-solid) }
  .notif-empty { padding: var(--space-48) 28px; text-align: center; font-size: var(--text-14); color: var(--muted) }
  .notif-empty.error { color: var(--status-danger-fg) }
  @media (max-width: 720px) {
    /* Le schede prendono la riga intera (.tabs a 100% del DS): «Tutte lette» va sotto, non le copre. */
    .notif-toolbar { padding-inline: var(--space-20); flex-wrap: wrap; row-gap: var(--space-10) }
    .notif-filter-group { width: 100% }
    .notif-row { padding-inline: var(--space-20); gap: var(--space-10) }
    .notif-empty { padding-inline: var(--space-20) }
  }

  /* ── Toast delle notifiche nuove (polling): pila in alto a destra, sopra il drawer mobile ── */
  .notif-toast-stack { position: fixed; top: var(--space-12); left: var(--space-12); right: var(--space-12); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-8) }
  @media (min-width: 640px) {
    .notif-toast-stack { top: var(--space-20); left: auto; right: var(--space-20); width: 320px }
  }
  .notif-toast { display: flex; align-items: flex-start; gap: var(--space-12); padding: var(--space-12) var(--space-16); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius-12); box-shadow: var(--shadow-raised); cursor: pointer; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) }
}

/*
 * ── Pagina Team: Team + Richieste in una pagina (Task 13a) ──────────────
 * Layout .rq-split di offix (app.css, blocco «Requests»): schede di stato e ricerca in alto,
 * elenco delle persone a sinistra, dettaglio della persona selezionata a destra.
 * Componenti DS: .panel, .tab, .badge, .avatar, .btn, .empty-state, .search-box, .info-banner.
 * I colori di offix sono tradotti nei token DS; riga selezionata su --brand-wash.
 * Mobile (sotto lg, il breakpoint di taska): elenco a tutta larghezza; toccata una persona il
 * dettaglio prende il posto dell'elenco, con «Indietro» (.rq-back) per tornarci.
 */
@layer components {
  .team-handoff { margin-bottom: var(--space-20) }
  .team-handoff > .icon { flex-shrink: 0 }

  .rq-split { display: flex; flex-direction: column; min-width: 0 }
  .rq-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: var(--space-16) var(--space-20); border-bottom: 1px solid var(--line) }
  .rq-statuses { display: flex; gap: var(--space-4); overflow-x: auto; min-width: 0; max-width: 100%; padding: 2px }
  .rq-status.tab { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--text-14); padding: var(--space-8) 13px }
  .rq-status.tab span { font-size: var(--text-12); font-weight: var(--weight-semibold); min-width: 22px; padding: 1px 7px; border-radius: var(--radius-round); background: var(--slate-100); color: var(--muted); text-align: center }
  .rq-status.tab.selected span { background: var(--surface); color: var(--slate-800) }
  .rq-status.tab.has-pending span { background: var(--status-pending-bg); color: var(--status-pending-fg) }
  .rq-search.search-box { width: 250px; max-width: 100% }
  /* La ricerca sta in una <label class="search-box">: senza, «label input» del DS le darebbe 8px sopra. */
  .rq-search input { width: 100%; margin-top: 0 }

  .rq-body { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); min-height: 520px }
  .rq-list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0 }
  .rq-results { flex: 1 }
  .rq-results > .empty-state { padding: 60px 25px }
  .rq-item { width: 100%; display: flex; align-items: center; gap: 13px; text-align: left; padding: 13px var(--space-20); border-bottom: 1px solid var(--line-soft); transition: background var(--dur-fast) }
  .rq-item:hover { background: var(--slate-50) }
  .rq-item.selected { background: var(--brand-wash) }
  .rq-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px }
  .rq-item-lead { flex-shrink: 0; display: inline-flex }
  .rq-item-lead .avatar { width: 38px; height: 38px; font-size: var(--text-12) }
  .rq-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
  .rq-item-main strong { font-size: var(--text-15); font-weight: var(--weight-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .rq-item-main small { font-size: var(--text-13); color: var(--muted); overflow-wrap: anywhere }
  .rq-item-badges { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4) }
  .rq-item .badge, .rq-facts .badge { font-size: var(--text-12); padding: 2px var(--space-8) }
  .rq-item .badge .icon, .rq-facts .badge .icon { width: 12px; height: 12px }
  .rq-you { font-weight: var(--weight-regular); color: var(--muted) }
  .rq-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); font-size: var(--text-13); color: var(--muted); padding: var(--space-12) var(--space-20); border-top: 1px solid var(--line) }

  .rq-pane { padding: 28px 32px; min-width: 0 }
  .rq-pane > * { max-width: 620px }
  .rq-back { display: none }
  .rq-pane-head { display: flex; align-items: center; gap: var(--space-16) }
  .rq-pane-head h2 { font-size: var(--text-25); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-title); color: var(--ink); overflow-wrap: anywhere }
  .rq-pane-head p { font-size: var(--text-14); color: var(--muted); margin-top: var(--space-4); overflow-wrap: anywhere }
  .rq-pane-empty { height: 100%; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-12); color: var(--muted); text-align: center; font-size: var(--text-14) }
  .rq-pane-empty .icon { width: 28px; height: 28px; color: var(--slate-500) }
  .rq-facts { margin: var(--space-24) 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-10) var(--space-24); font-size: var(--text-14) }
  .rq-facts > div { display: contents }
  .rq-facts dt { color: var(--muted) }
  .rq-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) }
  .rq-review { margin-top: var(--space-24); padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-13); display: flex; flex-direction: column; gap: 14px }
  .rq-review h3 { font-size: var(--text-16); font-weight: var(--weight-semibold); color: var(--ink) }
  .rq-role { margin-top: var(--space-24); max-width: 320px }
  .rq-actions { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-24) }
  .rq-review .rq-actions { margin-top: 0 }
  .rq-review .rq-actions .btn { min-width: 130px }

  @media (max-width: 1100px) {
    .rq-body { grid-template-columns: minmax(290px, 340px) minmax(0, 1fr) }
    .rq-pane { padding: var(--space-24) }
  }
  @media (max-width: 1023px) {
    .rq-body { display: block; min-height: 0 }
    .rq-list { border-right: 0 }
    .rq-pane { display: none }
    .rq-item.selected { background: none }
    .rq-item.selected:hover { background: var(--slate-50) }
    .rq-split.has-selection .rq-toolbar, .rq-split.has-selection .rq-list { display: none }
    .rq-split.has-selection .rq-pane { display: block }
    .rq-back { display: inline-flex; padding: 0; margin-bottom: var(--space-16) }
    /* teamSelect() riporta in cima al riquadro: sotto la topbar mobile (56px, sticky), non dietro. */
    .rq-split { scroll-margin-top: 72px }
  }
  @media (max-width: 720px) {
    .rq-toolbar { padding: 14px; flex-direction: column; align-items: stretch }
    .rq-statuses { margin: 0 -2px }
    .rq-search.search-box { width: 100% }
    .rq-item { padding: 15px var(--space-16); min-height: 76px }
    .rq-footer { padding: 14px var(--space-16); flex-wrap: wrap }
    .rq-pane { padding: var(--space-20) var(--space-16) }
    .rq-pane-head h2 { font-size: 21px }
    .rq-pane-head .avatar.large { width: 56px; height: 56px; font-size: var(--text-19) }
    .rq-facts { grid-template-columns: minmax(0, 1fr); gap: 2px }
    .rq-facts dd { margin-bottom: var(--space-10) }
    .rq-role { max-width: none }
    .rq-actions .btn { flex: 1 1 auto }
  }
}

/*
 * ── Pagine (Task 13): Home, cliente, Incontri, Dashboard, Archivio, Attività, Preferenze, profilo ──
 * Componenti DS: .page-heading/.heading-actions, .hero, .panel/.section-heading, .row/.row-main/
 * .row-symbol, .stat, .card, .tabs/.tab, .filter-chip, .empty-state, .list-toolbar/.list-footer,
 * .progress, .count, .badge, .chip, .check/.checkbox, .segmented, .search-box; pannello incontro =
 * .dialog.large come il pannello task. Il contenitore di ogni pagina porta `.ds-page` e un id.
 * Qui solo ciò che il DS non ha: la riga densa (elenchi lunghi: scadenze, diario, incontri), le card
 * di clienti e bacheche, le griglie delle statistiche, il filtro del diario.
 */
@layer components {
  .ds-page .page-heading h1 { overflow-wrap: anywhere }
  .ds-page .page-heading .eyebrow a { color: inherit }

  /* Intestazione di una sezione fuori da un riquadro (I tuoi progetti, Note). */
  .home-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-16); flex-wrap: wrap; margin-bottom: var(--space-16) }
  .home-section-head h2 { font-size: var(--text-19) }
  .home-client-search.search-box { width: 260px; max-width: 100% }
  /* La ricerca sta in una <label class="search-box">: senza, «label input» del DS le darebbe 8px sopra. */
  .home-client-search input { width: 100%; margin-top: 0 }

  /* Statistiche: una riga di card che va a capo da sola; `.four` = quattro (due sotto sm). */
  .stat-grid { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) }
  .stat-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stat-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  @media (min-width: 1024px) { .stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
  .ds-page .stat { min-height: 0 }
  .stat-value.alert { color: var(--status-danger-fg) }

  /* Riga densa: gli elenchi di taska sono lunghi (scadenze, diario fino a 300 righe), la riga
     da 90px del DS ne mostrerebbe poche. Resta su una riga anche su mobile: la data a destra. */
  .row-list { list-style: none; margin: 0; padding: 0 }
  .row.dense { min-height: 0; padding: var(--space-14) var(--space-24); gap: var(--space-12); flex-wrap: nowrap }
  .row.dense .row-main strong { font-size: var(--text-14) }
  .row.is-link { cursor: pointer }
  .row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px }
  .row-main.wrap strong { overflow-wrap: anywhere }
  .row-symbol.round { width: 32px; height: 32px; border-radius: var(--radius-round) }
  .row-symbol.round .icon { width: var(--icon-sm); height: var(--icon-sm) }
  .row-symbol.ok { background: var(--status-ok-bg); color: var(--status-ok-fg) }
  .row-symbol.info { background: var(--status-info-bg); color: var(--status-info-fg) }
  .row-mark { display: inline-flex; vertical-align: -3px; margin-right: var(--space-4); color: var(--muted) }
  .row-value { flex-shrink: 0; min-width: 32px; text-align: right; font-size: var(--text-15); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums }
  .row-value.wide { min-width: 72px }
  .row-group-title { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-24) var(--space-6); border-top: 1px solid var(--line-soft); font-size: var(--text-13); font-weight: var(--weight-semibold); color: var(--slate-600) }
  @media (max-width: 720px) {
    .row.dense { padding: var(--space-14) var(--space-16) }
    .row-group-title { padding-inline: var(--space-16) }
  }

  /* ── Home: card dei clienti (copertina, logo che sporge, nome, descrizione) ── */
  .card.client-card { padding: 0; min-height: 0 }
  .client-card-cover { height: 80px; background-color: var(--slate-100); border-bottom: 1px solid var(--line-soft) }
  .client-card-body { display: flex; flex-direction: column; gap: var(--space-4); padding: 0 var(--space-20) var(--space-20); min-width: 0 }
  .client-card-logo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -22px 0 var(--space-8); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-10); background: var(--surface); color: var(--brand-text) }
  .client-card-logo img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4) }
  .client-card-logo .icon { width: 18px; height: 18px }
  .client-card h3 { font-size: var(--text-16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .client-card-desc, .board-card-desc { font-size: var(--text-13); color: var(--muted); line-height: var(--leading); min-height: 3.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere }
  .client-card-meta { font-size: var(--text-12); color: var(--muted) }

  /* ── Cliente: intestazione, card delle bacheche, riordino, note ── */
  .hero-text { flex: 1 1 320px; min-width: 0 }
  .hero-body h1 > span:not(:last-child) { flex-shrink: 0 }
  .card.board-card { min-height: 0; padding: var(--space-20); gap: var(--space-8) }
  .board-card-head { display: flex; align-items: center; gap: var(--space-10); min-width: 0 }
  .board-card-head h3 { flex: 1; min-width: 0; font-size: var(--text-16); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .board-card-logo { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--surface) }
  .board-card-symbol { display: inline-flex; flex-shrink: 0; color: var(--brand-text) }
  .board-card-symbol .icon { width: 28px; height: 28px }
  .board-card .progress { margin-top: auto }
  .board-card .progress-label { margin-top: 0 }
  .card.board-card.is-muted { pointer-events: none; opacity: .5 }
  .board-reorder-card { cursor: grab; outline: 2px dashed var(--line-strong); outline-offset: 2px }
  .board-reorder-card.drop-target { outline: 2px solid var(--brand) }
  .board-handle { display: inline-flex; flex-shrink: 0; border-radius: var(--radius-7); color: var(--slate-500); cursor: grab }
  .board-handle:hover { color: var(--ink) }
  .board-reorder-bar { flex-wrap: wrap; margin-bottom: var(--space-16); padding: var(--space-14) var(--space-18); font-size: var(--text-14) }
  .client-archived-hint { margin-top: var(--space-16); font-size: var(--text-14); color: var(--muted) }
  .client-archived-hint .text-btn { padding: 0 }
  .client-notes { margin-top: var(--space-40) }
  .client-notes > summary { padding: 0; list-style: none }
  .card.note-card { gap: var(--space-8); padding: var(--space-20) }
  .note-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8) }
  .note-card-head h3 { min-width: 0; overflow-wrap: anywhere }
  .note-card-meta { font-size: var(--text-12); color: var(--muted) }

  /* ── Incontri: righe dell'elenco e pannello dell'incontro ── */
  .meeting-meta { display: flex; align-items: center; gap: var(--space-10); flex-shrink: 0 }
  .meeting-people { display: inline-flex; align-items: center; gap: var(--space-6) }
  .meeting-stat { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-12); color: var(--muted); font-variant-numeric: tabular-nums }
  .meeting-stat .icon { width: 14px; height: 14px }
  @media (max-width: 720px) {
    .meeting-row.row.dense { flex-wrap: wrap; row-gap: var(--space-8) }
    .meeting-meta { width: 100%; padding-left: 50px; flex-wrap: wrap }
  }
  #meeting-modal.dialog.large { width: min(1152px, calc(100% - 32px)) }
  .meeting-head-main { flex: 1 1 0% }
  .meeting-player { padding: 0 var(--space-8) var(--space-8) 34px }
  @media (min-width: 768px) and (max-width: 1099px) {
    #meeting-modal .dialog-grid { grid-template-columns: minmax(0, 1fr) 300px }
  }
  @media (max-width: 767px) {
    #meeting-modal .dialog-grid > div + div { border-top: 1px solid var(--line-soft); padding-top: var(--space-24) }
  }
  @media (max-width: 720px) {
    #meeting-modal.dialog.large { width: calc(100% - 24px) }
    #meeting-modal .dialog-header h2.panel-title { font-size: var(--text-19) }
    /* Stato, Elimina e Chiudi su una riga loro sopra il titolo: in riga col titolo lo
       ridurrebbero a una colonna di poche lettere. */
    #meeting-modal .dialog-header { flex-wrap: wrap; row-gap: var(--space-12) }
    #meeting-modal .meeting-head-main { flex: 1 1 100%; order: 1 }
    #meeting-modal .meeting-head-actions { margin-left: auto }
  }

  /* ── Archivio: schede nella barra del riquadro, una riga per voce ── */
  #archive-view .list-toolbar { padding: var(--space-14) var(--space-24); border-bottom: 1px solid var(--line) }
  .archive-tab { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--text-14) }
  .archive-tab.selected .count { background: var(--surface) }
  .archive-row:first-child { border-top: 0 }
  .archive-row .row-main small { margin-top: 2px }
  .archive-title { display: block; font-size: var(--text-15); font-weight: var(--weight-semibold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .archive-title:hover { color: var(--brand-text); text-decoration: underline }
  .archive-title.wrap { white-space: normal; overflow-wrap: anywhere }
  .row-main small.archive-warn { color: var(--status-pending-fg) }
  .archive-actions { display: flex; align-items: center; gap: var(--space-8); flex-shrink: 0 }
  @media (max-width: 720px) {
    #archive-view .list-toolbar { padding: var(--space-12) var(--space-16) }
    .archive-actions { width: 100%; padding-left: 52px }
  }

  /* ── Attività: barra dei filtri (scorciatoie + campi data compatti) e giorni ── */
  .activity-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-12) var(--space-24) }
  .activity-filter label { font-size: var(--text-13) }
  #activity-filter input, #activity-filter select { width: auto; min-width: 150px; min-height: 40px; margin-top: var(--space-6); padding: var(--space-8) var(--space-12); font-size: var(--text-14) }
  @media (max-width: 720px) {
    #activity-filter input, #activity-filter select { font-size: var(--text-16) }
  }
  .activity-day { margin-bottom: var(--space-8); font-size: var(--text-13); font-weight: var(--weight-semibold); color: var(--slate-600) }

  /* ── Preferenze e profilo ── */
  .settings-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: 0 var(--space-24) var(--space-24) }
  .settings-body > label, .settings-body > div { align-self: stretch }
  .settings-body > div:last-child:has(> .btn:only-child) { align-self: flex-start }
  .settings-profile { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24) }
  @media (min-width: 640px) { .settings-profile { flex-direction: row; align-items: flex-start } }
  .settings-name { font-size: var(--text-19); font-weight: var(--weight-semibold); overflow-wrap: anywhere }
  .settings-handle { font-weight: var(--weight-medium); color: var(--brand-text); overflow-wrap: anywhere }
  .profile-name { overflow-wrap: anywhere }
  .settings-label { display: block; margin-bottom: var(--space-8); font-size: var(--text-14); font-weight: var(--weight-medium); color: var(--ink-2) }
  /* Il campo colore sta in una <label>: le regole del DS per i campi (min-height 46px, «label input»
     con 8px sopra) lo allungherebbero a 32×46 e la pastiglia a 64px. Qui torna un tondo da 32px. */
  .priority-swatch input.color-dot { width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0 }
  .priority-swatch { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-14) var(--space-4) var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--slate-100); font-size: var(--text-13); font-weight: var(--weight-medium); color: var(--ink) }
  @media (max-width: 720px) {
    .settings-body { padding: 0 var(--space-20) var(--space-20) }
    .settings-profile { padding: var(--space-20) }
    .profile-name { font-size: 31px; letter-spacing: -1.1px }
  }
}

/*
 * ── Pagine di accesso, configurazione guidata, pagine di errore (Task 14) ──
 * Accesso: login, registrazione, reset e cambio password, attesa di approvazione, invito admin
 * (handoff), setup/* — guscio partials/auth-head.php + auth-foot.php, radice #auth-view.
 * Errori: errors/_shell.php, radice #error-view (stessi file DS, nessuna query, niente Tailwind).
 * Componenti DS: .btn (.primary .secondary .full), .text-btn, .icon-btn.small, campi nudi con
 * label sopra, .field-hint, .info-banner (.warn), .dropzone, .spinner, .check/.checkbox,
 * .checkbox-label, dialog .dialog con .modal-header/.modal-subtitle/.modal-actions, .panel, .muted.
 * Impianto come il login di offix (.login-layout): pannello brand chiaro a sinistra da lg (il
 * breakpoint di taska), colonna del modulo a destra; sotto lg una colonna sola col marchio compatto.
 * Qui solo ciò che il DS non copre.
 */
@layer components {
  #auth-view { min-height: 100svh; background: var(--surface-alt); color: var(--ink) }
  #auth-view h1 { overflow-wrap: anywhere }

  /* ── Pannello brand (da lg) e marchio ── */
  .auth-brand { min-width: 0; padding: var(--space-48) var(--space-48) var(--space-32); background: var(--brand-soft-2); border-right: 1px solid var(--line) }
  .auth-brand-link { display: flex; align-items: center; gap: var(--space-10); min-width: 0; max-width: 100%; color: var(--ink); font-size: var(--text-16); font-weight: var(--weight-semibold); letter-spacing: -.2px }
  .auth-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .auth-brand-compact { margin-bottom: var(--space-32) }
  /* Quadrato con l'iniziale: tinta brand chiara (come l'icona del workspace di offix), così la
     lettera regge 4.5:1 con qualunque --brand. */
  .auth-mark, .err-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--brand-line); border-radius: var(--radius-8); background: var(--brand-soft); color: var(--brand-text); font-size: var(--text-16); font-weight: var(--weight-bold); line-height: 1 }
  .auth-brand-claim { max-width: 24rem; font-size: var(--text-33); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); color: var(--ink) }
  .auth-brand-foot { font-size: var(--text-12); color: var(--slate-600) }

  /* ── Colonna del modulo ── */
  .auth-subtitle { margin-top: var(--space-10); font-size: var(--text-14); color: var(--muted) }
  .auth-body { margin-top: var(--space-28) }
  .auth-lead { margin-bottom: var(--space-20); font-size: var(--text-15); overflow-wrap: anywhere }
  .auth-lead + .auth-secondary { margin-top: var(--space-4) }
  .auth-email { color: var(--ink) }

  /* Avvisi (flash dei controller) e note in riga: .info-banner compatto, colori di stato del DS. */
  .auth-alert, .auth-banner { align-items: flex-start; gap: var(--space-10); padding: var(--space-14) var(--space-16); overflow-wrap: anywhere }
  .auth-alert { margin: 0 0 var(--space-16) }
  .auth-banner { margin: var(--space-20) 0 0 }
  .auth-banner + .auth-lead { margin-top: var(--space-20) }
  .auth-alert > .icon, .auth-banner > .icon { margin-top: 1px }
  .auth-alert-error { border-color: color-mix(in srgb, var(--status-danger-fg) 24%, var(--surface)); background: var(--status-danger-bg); color: var(--status-danger-fg) }
  .auth-alert-success { border-color: color-mix(in srgb, var(--status-ok-fg) 24%, var(--surface)); background: var(--status-ok-bg); color: var(--status-ok-fg) }

  /* ── Campi: label sopra (DS), 20px fra un campo e l'altro ── */
  :is(.auth-field, .auth-note, .auth-row, .auth-otp, .auth-drop-field, .auth-current-file) + :is(.auth-field, .auth-row, .auth-otp, .auth-drop-field) { margin-top: var(--space-20) }
  .modal-subtitle + .auth-field { margin-top: var(--space-20) }
  .auth-field > label, .auth-drop-label { margin-bottom: var(--space-8) }
  .auth-note { margin-top: var(--space-8) }
  /* Nome e cognome affiancati da sm in su; sotto restano impilati (due campi da 160px non si compilano). */
  .auth-row { display: grid; gap: var(--space-20) var(--space-18) }
  .auth-row > .auth-field { margin-top: 0 }
  @media (min-width: 640px) { .auth-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } }

  .auth-control { position: relative }
  /* Nickname: pastiglia @ dentro il bordo del campo. */
  .auth-prefix { position: absolute; top: 1px; bottom: 1px; left: 1px; display: inline-flex; align-items: center; padding: 0 var(--space-12); border-right: 1px solid var(--line-strong); border-radius: 7px 0 0 7px; background: var(--slate-100); color: var(--slate-700); pointer-events: none }
  #auth-view .auth-control-prefixed input { padding-left: 50px }
  /* Mostra/nascondi: .icon-btn.small dentro il campo, a destra. */
  #auth-view .auth-control-password input { padding-right: 48px }
  .auth-eye { position: absolute; top: 50%; right: var(--space-6); transform: translateY(-50%) }
  /* OTP: cifre distanziate e più grandi, è il campo su cui si sbaglia di più. */
  #auth-view .auth-otp input { font-family: var(--font-mono); font-size: var(--text-19); letter-spacing: .45em }

  /* Ricordami | Password dimenticata? */
  .auth-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-12); margin-top: var(--space-14) }
  .auth-check { flex: none }

  /* ── Campo file: .dropzone del DS; `is-over` è lo stato di trascinamento che mette auth-foot ── */
  .auth-drop-field { position: relative }
  /* Input ritagliato (.sr-only): la regola dei campi nudi del DS (display, larghezza 100%, 46px,
     padding) è più specifica di .sr-only e lo rigonfierebbe a tutta larghezza. */
  #auth-view input.auth-drop-input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
  .dropzone.is-over { border-color: var(--brand); border-style: solid; background: var(--brand-wash) }
  .auth-drop-title, .auth-drop-hint { overflow-wrap: anywhere }
  .auth-drop-picked { display: flex; align-items: center; gap: var(--space-10); margin-top: var(--space-8); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--surface); font-size: var(--text-14) }
  .auth-drop-picked img { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-5); background: var(--slate-100); object-fit: contain }
  .auth-drop-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .auth-drop-size { flex: none; font-size: var(--text-12); color: var(--muted) }
  .auth-drop-picked.is-bad { border-color: color-mix(in srgb, var(--status-danger-fg) 24%, var(--surface)); background: var(--status-danger-bg) }
  .auth-drop-picked.is-bad :is(.auth-drop-name, .auth-drop-size) { color: var(--status-danger-fg) }
  /* Logo e icona già caricati (passo Team). */
  .auth-current-file { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-12) }
  .auth-current-file img { flex-shrink: 0; border: 1px solid var(--line); border-radius: var(--radius-8); background: var(--surface) }

  /* ── Bottoni e link ── */
  .auth-submit { margin-top: var(--space-28) }
  .auth-secondary { margin-top: var(--space-12) }
  .auth-foot-note { margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--line); color: var(--muted); overflow-wrap: anywhere }
  :is(.auth-foot-note, .auth-inline-actions) .text-btn { padding: 0 }
  .text-btn.auth-link-muted { color: var(--muted) }
  .text-btn.auth-link-muted:hover { color: var(--ink) }
  /* Reinvia il codice | Usa un'altra email */
  .auth-inline-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-16); margin-top: var(--space-16) }

  /* ── Dialog «password dimenticata»: padding sul form, non sul <dialog> (il click sul
     <dialog> stesso è il click fuori che lo chiude, auth-foot.php) ── */
  /* margin: auto = centrato: il preflight di Tailwind azzera il margine dei <dialog> (la SPA lo
     rimette in spa.php e app-nav.php, il guscio auth lo faceva nel suo <style> tolto). */
  #auth-view dialog { margin: auto }
  #forgot-modal { padding: 0 }
  #forgot-modal > form { padding: 30px }

  /* ── Configurazione guidata: fila dei passi, sempre su una riga (scorre senza barra) ── */
  .setup-steps { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-32); padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; font-size: var(--text-13) }
  .setup-steps::-webkit-scrollbar { display: none }
  .setup-steps li { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-8) }
  .setup-step { display: flex; align-items: center; gap: var(--space-8); color: var(--muted) }
  .setup-dot { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-round); background: var(--surface); color: var(--muted); font-size: var(--text-12); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums }
  .setup-step.done .setup-dot { border-color: var(--slate-300); background: var(--slate-200); color: var(--slate-700) }
  .setup-step.current { color: var(--ink); font-weight: var(--weight-semibold) }
  .setup-step.current .setup-dot { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-text) }
  a.setup-step:hover { color: var(--ink) }
  a.setup-step:hover .setup-dot { border-color: var(--slate-500) }
  .setup-sep { width: 20px; height: 1px; flex-shrink: 0; background: var(--line-strong) }
  /* Funzionalità: .checkbox-label del DS in griglia. */
  .auth-features { gap: var(--space-10) }
  .auth-features .checkbox-label { align-items: flex-start; margin-top: 0; cursor: pointer; transition: background var(--dur-fast) }
  .auth-features .checkbox-label:hover { background: var(--slate-50) }
  .auth-features .checkbox-label input { margin-top: 2px }
  .auth-feature-name { display: block; color: var(--ink) }

  @media (max-width: 720px) {
    #auth-view h1 { font-size: 31px; letter-spacing: -1.1px }
    .auth-brand-compact { margin-bottom: var(--space-24) }
    #forgot-modal > form { padding: var(--space-24) }
  }

  /* ── Pagine di errore (#error-view): una .panel centrata ── */
  body:has(> #error-view) { min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: var(--space-40) var(--space-20) }
  #error-view { width: 100%; max-width: 34rem; padding: 36px 32px 32px; overflow: visible }
  .err-brand { display: inline-flex; align-items: center; gap: var(--space-10); max-width: 100%; color: var(--ink); font-size: var(--text-16); font-weight: var(--weight-semibold); letter-spacing: -.2px }
  .err-brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .err-code { margin-top: var(--space-24); font-size: var(--text-46); line-height: 1; font-weight: var(--weight-display); letter-spacing: -1px; color: var(--tone); font-variant-numeric: tabular-nums }
  #error-view .err-title { margin-top: var(--space-12); font-size: var(--text-25); letter-spacing: var(--tracking-title); overflow-wrap: anywhere }
  .err-text { margin-top: var(--space-10); color: var(--muted) }
  /* Indirizzo richiesto (404): monospazio, va a capo ovunque. Sempre escapato: arriva dall'utente. */
  .err-path { margin-top: var(--space-18); padding: var(--space-8) var(--space-12); border-radius: var(--radius-8); background: var(--slate-100); color: var(--slate-700); font-family: var(--font-mono); font-size: var(--text-13); overflow-wrap: anywhere }
  .err-actions { display: flex; flex-wrap: wrap; gap: var(--space-10); margin-top: var(--space-28) }
  @media (max-width: 480px) {
    #error-view { padding: 28px 20px 24px }
    .err-code { font-size: 42px }
    .err-actions .btn { flex: 1 1 100% }
  }
}