/* ============================================
   Sezioni Dinamiche PWA — Stili componenti
   Estratto dai mockup AIdocs/temp/temp-mockup-sezioni-*-mobile.html
   Token (--color-*, --radius-*, --glow-*) ereditati da variables.css
   Light mode gestito globalmente da html.light-mode
   ============================================ */

/* Root container del tab — popolato dal controller via SezDinController.init() */
.sez-din-root {
    height: 95dvh;          /* 5% di margine in fondo: la console non resta incollata al bordo schermo */
    display: flex;
    flex-direction: column;
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-family);
    overflow: hidden;
    min-height: 600px;
}
/* Mobile con capsula di navigazione (inc/frame.css): la pagina occupa lo spazio fra il bordo alto
   e l'isola, così la console in fondo resta visibile; il corpo scorre all'interno (.sd-page__body) */
@media (max-width: 768px) {
    .sez-din-root {
        height: calc(100dvh - var(--spacing-xs) - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom, 0px));
        min-height: 0;
    }
    body.demo-on .sez-din-root {
        height: calc(100dvh - var(--spacing-xs) - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom, 0px));
    }
    .sez-din-root .sd-page { min-height: 0; }
}

.sez-din-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: 40px;
}

/* ============================================
   PAGE — pagina app (lista sezioni / vista lista)
   ============================================ */

.sd-page {
    flex: 1;
    background: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 600px;
}

/* App header: back/hamburger + titolo + actions */
.sd-app-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 12px;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.sd-app-header__btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms ease;
}

.sd-app-header__btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.sd-app-header__title {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

.sd-app-header__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sd-page__body {
    flex: 1;
    overflow-y: auto;
    background: var(--color-bg-primary);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.sd-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 40px 28px;
    text-align: center;
    min-height: 320px;
}

.sd-empty__lead {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.35;
    max-width: 320px;
    margin: 0;
}

.sd-empty__pitch {
    max-width: 360px;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-empty__pitch p { margin: 0; }
.sd-empty__pitch strong { color: var(--color-text-primary); }

.sd-empty__cta-line {
    text-align: center;
    color: var(--color-accent-primary);
    font-weight: 600;
    margin-top: 6px !important;
}

/* Elenco nomi sezioni "in preparazione" (caso 2, dentro il pitch) */
.sd-prep-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sd-prep-list li { color: var(--color-text-primary); font-weight: 600; }

/* Banner "in preparazione" sopra lista/vista (casi 4 e 6) */
.sd-prep-banner {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}
.sd-prep-banner strong { color: var(--color-text-primary); }

/* ============================================
   LISTA SEZIONI (N>1)
   ============================================ */

.sd-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 200ms ease;
    color: var(--color-text-primary);
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.sd-card:hover {
    border-color: var(--color-accent-primary);
    background: var(--color-bg-tertiary);
}

.sd-card--rotta {
    cursor: default;
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}

.sd-card__icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(162, 122, 186, 0.12);
    color: var(--color-accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-card__body {
    flex: 1;
    min-width: 0;
}

.sd-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.sd-card__meta {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.sd-card__arrow {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ============================================
   VISTA LISTA SEZIONE
   ============================================ */

.sd-sez-header {
    padding: 14px 16px 10px;
    background: var(--color-bg-primary);
    flex-shrink: 0;
}

.sd-sez-header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}

.sd-sez-header__title {
    flex: 1;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.sd-sez-header__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.sd-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 180ms ease;
    font-family: inherit;
    padding: 0;
}

.sd-icon-btn:hover {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: white;
}

.sd-icon-btn--add {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: white;
}

.sd-icon-btn--add:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* Limite maxBlocks/maxCards raggiunto: bottone visibile ma inerte */
.sd-icon-btn:disabled,
.sd-icon-btn--add:disabled {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    opacity: 0.45;
    cursor: not-allowed;
}

.sd-icon-btn:disabled:hover,
.sd-icon-btn--add:disabled:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

.sd-sez-header__sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    margin: 0;
}

/* Badge stato pubblicazione (3 varianti mutuamente esclusive) */
.sd-pubbl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 200ms ease;
    line-height: 1;
}

.sd-pubbl--cta {
    background: var(--color-accent-primary);
    color: white;
    box-shadow: var(--glow-purple);
}
.sd-pubbl--cta:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
}

.sd-pubbl--pending {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    cursor: default;
}

.sd-pubbl--done {
    background: rgba(74, 222, 128, 0.12);
    color: var(--color-success);
    border-color: rgba(74, 222, 128, 0.35);
}
.sd-pubbl--done:hover {
    background: rgba(74, 222, 128, 0.2);
}

.sd-pubbl__spinner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: sd-spin 700ms linear infinite;
}

@keyframes sd-spin {
    to { transform: rotate(360deg); }
}

/* Lista blocchi/card */
.sd-cnt {
    padding: 4px 0 16px;
}

.sd-blk {
    margin-top: 8px;
}

.sd-blk__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.sd-blk__title {
    flex: 1;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text-primary);
    min-width: 0;
}

.sd-blk__actions {
    display: flex;
    gap: 4px;
}

.sd-icon-btn--mini {
    width: 34px;
    height: 34px;
}

/* Drag handle per riordino SortableJS — sx delle righe blocco e card */
.sd-drag-handle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: grab;
    padding: 4px 2px;
    border-radius: var(--radius-sm);
    transition: color 180ms ease, background 180ms ease;
    touch-action: none;  /* impedisce scroll del browser durante drag su touch */
    user-select: none;
}

.sd-drag-handle:hover {
    color: var(--color-accent-primary);
    background: rgba(162, 122, 186, 0.08);
}

.sd-drag-handle:active {
    cursor: grabbing;
}

/* Stati Sortable durante il drag */
.sd-sortable-ghost {
    opacity: 0.4;
    background: var(--color-bg-tertiary);
}

.sd-sortable-chosen {
    background: rgba(162, 122, 186, 0.06);
}

/* Annulla reset.css `svg { max-width: 100%; height: auto }` per i bottoni icona,
   cosi' gli attributi width/height inline degli SVG vengono rispettati */
.sd-icon-btn svg,
.sd-app-header__btn svg,
.sd-modal__back svg,
.sd-bottom-sheet__close svg {
    max-width: none;
    height: auto;
}

/* Card row — display only, click su icona penna */
.sd-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px 11px 28px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.sd-card-row__body {
    flex: 1;
    min-width: 0;
}

.sd-card-row__primary {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-card-row__refs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.sd-card-row__refs strong {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.sd-card-row__refs-sep {
    color: var(--color-border);
}

.sd-card-row--flat {
    padding-left: 16px;
}

/* --- Record cancellati (soft-delete, P-delta=2): restano in elenco fino alla pubblicazione,
   quindi devono distinguersi a colpo d'occhio da quelli vivi. --- */
.sd-del-mark {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--color-error);
}

.sd-card-row--del .sd-card-row__primary,
.sd-card-row--del .sd-card-row__refs,
.sd-blk--del .sd-blk__title {
    text-decoration: line-through;
    text-decoration-color: var(--color-error);
    color: var(--color-text-muted);
}

.sd-card-row--del,
.sd-blk--del .sd-blk__row {
    opacity: 0.65;
}

.sd-del-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    font-size: 0.8rem;
    font-weight: 600;
}

/* Blocco dei campi sulla card cancellata: <fieldset disabled> disattiva tutti i controlli
   contenuti senza toccare la resa dei singoli campi. Va riportato al layout del body. */
.sd-modal__fs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    opacity: 0.6;
}

/* Bottone "Aggiungi blocco" full-width sotto la lista (deviazione dalla spec, vedi commento controller) */
.sd-add-blocco {
    margin: 16px 16px 0;
    width: calc(100% - 32px);
    padding: 12px 18px;
    background: transparent;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-accent-primary);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 180ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sd-add-blocco:hover {
    border-color: var(--color-accent-primary);
    background: rgba(162, 122, 186, 0.08);
}

/* Limite maxBlocks raggiunto: bottone visibile ma inerte */
.sd-add-blocco:disabled,
.sd-add-blocco:disabled:hover {
    color: var(--color-text-muted);
    border-color: var(--color-border);
    background: transparent;
    opacity: 0.45;
    cursor: not-allowed;
}

/* Empty body sezione (0 blocchi/card) */
.sd-cnt-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ============================================
   MODAL FULL-SCREEN (editor sezione/blocco/card)
   ============================================ */

.sd-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--color-bg-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sd-modal__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--color-bg-secondary);
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
}

.sd-modal__back {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 200ms ease;
    padding: 0;
}

.sd-modal__back:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.sd-modal__title-block {
    flex: 1;
    min-width: 0;
}

.sd-modal__kicker {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-modal__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.sd-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-modal__body > * {
    flex-shrink: 0;
}

.sd-modal__footer {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-modal__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    background: var(--color-accent-primary);
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 200ms ease;
    box-shadow: var(--glow-purple);
}

.sd-modal__cta:hover {
    background: var(--color-accent-hover);
    transform: translateY(-1px);
}

/* tema chiaro: il viola brand è troppo chiaro per testo bianco su fondo chiaro → viola più scuro */
html.light-mode .sd-modal__cta { background: #6e4a87; box-shadow: none; }
html.light-mode .sd-modal__cta:hover { background: #5d3d74; }

.sd-modal__cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.sd-modal__delete {
    background: none;
    border: none;
    padding: 6px 0;
    color: var(--color-text-muted);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.15);
    text-underline-offset: 3px;
    transition: color 200ms ease;
    align-self: center;
}

.sd-modal__delete:hover {
    color: var(--color-error);
    text-decoration-color: currentColor;
}

html.light-mode .sd-modal__delete {
    text-decoration-color: rgba(0, 0, 0, 0.15);
}

/* icona del cestino: solo nella capsula (sotto); su desktop «Elimina» resta il link testuale */
.sd-modal__delete svg { display: none; }

/* ============================================
   Variante B (Federico 06/11/2026) — mobile: Salva sopra la capsula, come il Nuovo ticket (inc/ticket.css)
   A editor aperto il piede è un pannello in vetro con base, larghezza e vetro della capsula (inc/frame.css):
   cresce in altezza dalla capsula (il bordo superiore sale), poi compaiono «Salva» e, quando c'è, il
   cestino. Le icone della capsula restano e funzionano: toccarne una chiude l'editor (sezDinCloseEditors).
   Il piede esce dalla finestra ed è figlio di body (sezDinMountFtr): la finestra (1050) fa livello a sé.
   Livelli: finestra 1050 < pannello 1051 < capsula 1052 (trasparente: il pannello le fa da corpo) <
   conferme 1060 < toast. Stato = :has(> .sd-modal), nessuna classe da togliere
   ============================================ */
@keyframes sd-cin { from { opacity: 0; transform: translateY(4px); } }
@keyframes sd-pnl { from { height: calc(2.75rem + 14px); } }

@media (max-width: 768px) {
    body:has(> .sd-modal) .frame-tabbar,
    body:has(> .sd-modal__footer) .frame-tabbar {   /* anche durante la chiusura (sd-ftr--cls) */
        z-index: 1052;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    body:has(> .sd-modal) .frame-tabbar::before,
    body:has(> .sd-modal) .frame-tabbar::after,
    body:has(> .sd-modal__footer) .frame-tabbar::before,
    body:has(> .sd-modal__footer) .frame-tabbar::after { opacity: 0; }
    /* pannello: bordo 1 + 6 + Salva 2.5rem + 6 + capsula (2.75rem + 14px) */
    body > .sd-modal__footer {
        position: fixed;
        left: 20px;
        right: 20px;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        max-width: 414px;
        height: calc(5.25rem + 27px);
        margin: 0 auto;
        z-index: 1051;
        box-sizing: border-box;
        padding: 6px 6px 0;
        flex-direction: row;
        align-items: flex-start;
        gap: 0.5rem;
        background: linear-gradient(180deg, rgba(30, 30, 40, 0.8) 0%, rgba(14, 14, 20, 0.9) 100%);
        -webkit-backdrop-filter: blur(20px) saturate(170%);
        backdrop-filter: blur(20px) saturate(170%);
        border: 1px solid transparent;
        border-radius: 1.8rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 36px -10px rgba(0, 0, 0, 0.8), 0 0 28px -14px rgba(162, 122, 186, 0.6);
        animation: sd-pnl 0.5s cubic-bezier(0.65, 0, 0.35, 1) backwards;
    }
    /* bordo di luce e filo luminoso in alto, come la capsula: salgono col bordo */
    body > .sd-modal__footer::before {
        content: '';
        position: absolute;
        inset: -1px;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(110deg, rgba(162, 122, 186, 0.6), rgba(255, 255, 255, 0.08) 35%, rgba(255, 255, 255, 0.05) 65%, rgba(105, 180, 228, 0.55));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
    }
    body > .sd-modal__footer::after {
        content: '';
        position: absolute;
        top: -1px;
        left: 20%;
        right: 20%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
        pointer-events: none;
    }
    html.light-mode body > .sd-modal__footer {
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 12px 28px -10px rgba(40, 20, 70, 0.22), 0 0 24px -14px rgba(162, 122, 186, 0.5);
    }
    html.light-mode body > .sd-modal__footer::before {
        background: linear-gradient(110deg, rgba(162, 122, 186, 0.5), rgba(0, 0, 0, 0.06) 35%, rgba(0, 0, 0, 0.05) 65%, rgba(105, 180, 228, 0.5));
    }
    html.light-mode body > .sd-modal__footer::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent); }
    body.demo-on > .sd-modal__footer { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    /* garanzia: senza finestra il piede non resta a galla */
    body:not(:has(> .sd-modal)) > .sd-modal__footer:not(.sd-ftr--cls) { display: none; }
    body > .sd-modal__footer > * { animation: sd-cin 0.3s ease-in-out 0.42s backwards; }
    /* Salva più leggero: alto 2.5rem, peso 600, bagliore tenue */
    body > .sd-modal__footer .sd-modal__cta {
        flex: 1;
        height: 2.5rem;
        padding: 0 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        border-radius: var(--radius-full);
        background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
        box-shadow: 0 0.35rem 1rem -0.45rem rgba(162, 122, 186, 0.7);
    }
    body > .sd-modal__footer .sd-modal__cta:hover { transform: none; }
    html.light-mode body > .sd-modal__footer .sd-modal__cta,
    html.light-mode body > .sd-modal__footer .sd-modal__cta:hover {
        background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    }
    /* Elimina: cestino in un cerchio a contorno accanto a Salva; rosso al tocco */
    body > .sd-modal__footer .sd-modal__delete {
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--hm-brd);
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.03);
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }
    body > .sd-modal__footer .sd-modal__delete svg { display: block; }
    body > .sd-modal__footer .sd-modal__delete-t { display: none; }
    body > .sd-modal__footer .sd-modal__delete:hover,
    body > .sd-modal__footer .sd-modal__delete:active {
        color: var(--color-error);
        border-color: rgba(239, 68, 68, 0.45);
        background: rgba(239, 68, 68, 0.08);
    }
    /* l'ultimo campo non finisce sotto il pannello: in fondo al corpo un elemento vuoto alto quanto
       pannello + distacco + safe-area. Elemento e non padding-bottom: Safari su iPhone non conta il
       padding in fondo a un contenitore flex che scorre (traccia 06/11/2026, Eventi: scrollH = client
       con «Link del modulo di iscrizione» sotto il pannello). Si somma a gap e padding del corpo (≈ 38px) */
    body:has(> .sd-modal__footer) .sd-modal__body::after {
        content: '';
        flex: 0 0 auto;
        height: calc(5.25rem + 27px + 18px + env(safe-area-inset-bottom, 0px));
        pointer-events: none;
    }
    body.demo-on:has(> .sd-modal__footer) .sd-modal__body::after {
        height: calc(5.25rem + 27px + 64px + env(safe-area-inset-bottom, 0px));
    }
    @media (prefers-reduced-motion: reduce) {
        body > .sd-modal__footer,
        body > .sd-modal__footer > * { animation: none; }
    }
}

/* ============================================
   FORM FIELDS
   ============================================ */

.sd-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sd-field__label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.sd-field__required {
    color: var(--color-error);
    font-weight: 700;
}

.sd-field__input,
.sd-field__textarea {
    width: 100%;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.92rem;
    padding: 12px 14px;
    transition: border-color 180ms ease, box-shadow 180ms ease;
    -webkit-appearance: none;
    line-height: 1.4;
}

.sd-field__input {
    height: 46px;
}

.sd-field__textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.sd-field__input::placeholder,
.sd-field__textarea::placeholder {
    color: var(--color-text-muted);
}

.sd-field__input:focus,
.sd-field__textarea:focus {
    outline: none;
    border-color: var(--color-input-border-focus);
    box-shadow: 0 0 0 3px rgba(162, 122, 186, 0.12);
}

.sd-field__helper {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.sd-field__counter {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    margin-top: -3px;
}

.sd-field--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

.sd-field--inline .sd-field__label {
    flex: 1;
}

.sd-toggle {
    position: relative;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

.sd-toggle__input {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.sd-toggle__slider {
    position: absolute;
    inset: 0;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: background 200ms ease;
}

.sd-toggle__slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--color-text-muted);
    border-radius: 50%;
    transition: transform 200ms ease, background 200ms ease;
}

.sd-toggle__input:checked + .sd-toggle__slider {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

.sd-toggle__input:checked + .sd-toggle__slider::before {
    transform: translateX(18px);
    background: white;
}

html.light-mode .sd-toggle__input:not(:checked) + .sd-toggle__slider::before {
    background: #999;
}

/* Schema info azzurro */
.sd-schema-info {
    background: rgba(105, 180, 228, 0.06);
    border: 1px solid rgba(105, 180, 228, 0.2);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.sd-schema-info svg {
    flex-shrink: 0;
    color: var(--color-accent-secondary);
    margin-top: 1px;
}

/* ============================================
   IMAGE WIDGET (campo image dello schemaCampi)
   ============================================ */

.sd-image-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-image-preview {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    overflow: hidden;
}

.sd-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sd-image-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sd-image-btn {
    padding: 8px 14px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
}

.sd-image-btn:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.sd-image-btn--del:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}

/* ============================================
   BOTTOM SHEET (Help)
   ============================================ */

.sd-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: sd-fade-in 200ms ease;
}

@keyframes sd-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sd-bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
    border-top: 1px solid var(--color-border);
    animation: sd-sheet-up 250ms ease;
}

@keyframes sd-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.sd-bottom-sheet__handle {
    width: 36px;
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-full);
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.sd-bottom-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 8px;
    flex-shrink: 0;
}

.sd-bottom-sheet__title-block {
    flex: 1;
    min-width: 0;
}

.sd-bottom-sheet__kicker {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-accent-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
}

.sd-bottom-sheet__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.sd-bottom-sheet__close {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.sd-bottom-sheet__body {
    padding: 14px 18px 24px;
    overflow-y: auto;
    font-size: 0.88rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.sd-bottom-sheet__body p { margin-bottom: 10px; }
.sd-bottom-sheet__body p:last-child { margin-bottom: 0; }
.sd-bottom-sheet__body strong { color: var(--color-text-primary); }

/* ============================================
   MODAL CENTRALE (conferma elimina)
   ============================================ */

.sd-modal-center {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: sd-fade-in 200ms ease;
}

.sd-modal-center__card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    max-width: 320px;
    width: 100%;
    padding: 22px 20px 18px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    animation: sd-pop-in 200ms ease;
}

@keyframes sd-pop-in {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.sd-modal-center__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-error);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.sd-modal-center__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0 0 6px;
}

.sd-modal-center__desc {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0 0 18px;
}

.sd-modal-center__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-modal-center__btn {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 200ms ease;
}

.sd-modal-center__btn--danger {
    background: var(--color-error);
    color: white;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
}

.sd-modal-center__btn--danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.sd-modal-center__btn--cancel {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.sd-modal-center__btn--cancel:hover {
    background: var(--color-bg-tertiary);
}

/* ============================================
   HOME DI STATO del sito — schermata d'ingresso del tab
   Card di stato (col link al sito online) + schede informative + azioni.
   ============================================ */

/* testata: titolo + dominio a sinistra, hamburger a destra */
.sd-home-head { flex: 1; min-width: 0; }
.sd-home-head__title {
    font-size: 1.3rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.2;
    color: var(--color-text-primary);
}
.sd-home-head__sub {
    margin-top: 2px; font-size: 0.8rem; color: var(--color-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- card di stato --- */
.sd-home-state {
    border-radius: var(--radius-lg);
    padding: 16px;
    border: 1px solid var(--color-border);
    background: linear-gradient(150deg, rgba(162, 122, 186, 0.14), transparent 60%), var(--color-bg-secondary);
}
.sd-home-state--ok      { background: linear-gradient(150deg, rgba(74, 222, 128, 0.13), transparent 60%),  var(--color-bg-secondary); border-color: rgba(74, 222, 128, 0.35); }
.sd-home-state--dirty   { background: linear-gradient(150deg, rgba(251, 191, 36, 0.14), transparent 60%),  var(--color-bg-secondary); border-color: rgba(251, 191, 36, 0.38); }
.sd-home-state--work    { background: linear-gradient(150deg, rgba(105, 180, 228, 0.14), transparent 60%), var(--color-bg-secondary); border-color: rgba(105, 180, 228, 0.38); }
.sd-home-state--preview { background: linear-gradient(150deg, rgba(162, 122, 186, 0.18), transparent 60%), var(--color-bg-secondary); border-color: rgba(162, 122, 186, 0.45); }
.sd-home-state--err     { background: linear-gradient(150deg, rgba(239, 68, 68, 0.15), transparent 60%),   var(--color-bg-secondary); border-color: rgba(239, 68, 68, 0.42); }

.sd-home-state__top { display: flex; align-items: flex-start; gap: 11px; }

.sd-home-dot {
    width: 11px; height: 11px; border-radius: 50%;
    flex-shrink: 0; margin-top: 6px;
    background: var(--color-text-muted);
}
.sd-home-dot--ok      { background: var(--color-success);          color: var(--color-success); }
.sd-home-dot--dirty   { background: var(--color-warning);          color: var(--color-warning); }
.sd-home-dot--work    { background: var(--color-accent-secondary); color: var(--color-accent-secondary); }
.sd-home-dot--preview { background: var(--color-accent-primary);   color: var(--color-accent-primary); }
.sd-home-dot--err     { background: var(--color-error);            color: var(--color-error); }
.sd-home-dot.is-spin  { animation: sd-home-pulse 1.4s ease-in-out infinite; }

@keyframes sd-home-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

.sd-home-state__title { font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--color-text-primary); }
.sd-home-state__desc  { margin-top: 5px; font-size: 0.85rem; line-height: 1.5; color: var(--color-text-secondary); }
.sd-home-state__note {
    margin-top: 13px; padding: 9px 11px;
    border-radius: var(--radius-md);
    background: var(--color-bg-tertiary);
    font-size: 0.76rem; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 7px;
}

/* accesso al sito online: sempre disponibile, in ogni stato */
.sd-home-state__foot {
    margin-top: 14px; padding-top: 13px;
    border-top: 1px solid var(--color-border);
    display: flex; justify-content: flex-end;
}
.sd-home-live {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 13px; border-radius: var(--radius-md);
    font-size: 0.8rem; font-weight: 700; text-decoration: none;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.4);
    color: var(--color-success);
    transition: all 180ms ease;
}
.sd-home-live:hover { background: rgba(74, 222, 128, 0.2); }
.sd-home-live__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- schede informative: ognuna porta con sé le proprie azioni --- */
.sd-facts { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }

.sd-fact {
    position: relative; overflow: hidden;
    padding: 13px 14px 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
}
.sd-fact::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--color-text-muted);
}
.sd-fact--mod::before  { background: var(--color-warning); }
.sd-fact--prev::before { background: var(--color-accent-secondary); }
.sd-fact--prev { border-color: rgba(105, 180, 228, 0.28); }
.sd-fact--off::before  { background: var(--color-divider); }
.sd-fact--off { opacity: 0.72; }

.sd-fact__head { display: flex; align-items: center; gap: 9px; }
.sd-fact__ico {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-tertiary); color: var(--color-text-secondary);
}
.sd-fact--mod  .sd-fact__ico { background: rgba(251, 191, 36, 0.15);  color: var(--color-warning); }
.sd-fact--prev .sd-fact__ico { background: rgba(105, 180, 228, 0.15); color: var(--color-accent-secondary); }

.sd-fact__lbl {
    font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--color-text-muted);
}
.sd-fact__chip {
    margin-left: auto; flex-shrink: 0;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
    padding: 3px 8px; border-radius: 999px;
    background: var(--color-bg-tertiary); color: var(--color-text-secondary);
}
.sd-fact__val {
    margin-top: 7px; padding-left: 39px;
    font-size: 0.9rem; font-weight: 600; line-height: 1.35;
    color: var(--color-text-primary);
}
.sd-fact__val--muted { font-weight: 500; color: var(--color-text-secondary); }
.sd-fact__val strong { color: var(--color-text-primary); }
.sd-fact__val em { font-style: normal; color: var(--color-text-muted); font-weight: 500; }

.sd-fact__actions {
    margin-top: 12px; padding-top: 11px;
    border-top: 1px solid var(--color-divider);
    display: flex; gap: 7px;
}
.sd-fact__btn {
    flex: 1; padding: 8px 11px; border-radius: var(--radius-md);
    font-family: inherit; font-size: 0.78rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: all 180ms ease;
}
.sd-fact__btn:hover { color: var(--color-text-primary); border-color: var(--color-accent-primary); }
/* azione distruttiva dentro la scheda (scarto delle bozze) */
.sd-fact__btn--warn { color: #f19a9a; border-color: rgba(239, 68, 68, 0.35); }
.sd-fact__btn--warn:hover { background: rgba(239, 68, 68, 0.12); color: #ffc9c9; border-color: rgba(239, 68, 68, 0.6); }
html.light-mode .sd-fact__btn--warn { color: #b91c1c; }
html.light-mode .sd-fact__btn--warn:hover { color: #7f1d1d; }

/* --- azioni principali: una a tutta larghezza, al massimo una coppia affiancata --- */
.sd-home-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.sd-home-row { display: flex; gap: 9px; }
.sd-home-row .sd-home-btn { flex: 1; font-size: 0.85rem; padding: 12px 10px; }

.sd-home-btn {
    width: 100%; padding: 14px 16px; border-radius: var(--radius-md);
    font-family: inherit; font-size: 0.92rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    border: 1px solid transparent; transition: all 200ms ease;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sd-home-btn--primary { background: var(--color-accent-primary); color: #fff; box-shadow: var(--glow-purple); }
.sd-home-btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
/* tema chiaro: il viola brand è troppo chiaro per testo bianco su fondo chiaro → viola più scuro */
html.light-mode .sd-home-btn--primary { background: #6e4a87; box-shadow: none; }
html.light-mode .sd-home-btn--primary:hover { background: #5d3d74; }
.sd-home-btn--publish { background: var(--color-success); color: #06240f; }
.sd-home-btn--publish:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sd-home-btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.sd-home-btn--ghost:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }

/* riga di aiuto in testa all'elenco delle sezioni */
.sd-list-hint {
    font-size: 0.78rem; line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}
.sd-list-hint strong { color: var(--color-text-secondary); }

/* ============================================
   OBSOLETO — CONSOLE PUBBLICAZIONE in calce all'Elenco.
   Sostituita dalla home di stato qui sopra; nessun selettore .sd-pub* è più
   emesso da sez-din-controller.js. Da eliminare dopo il rilascio.
   ============================================ */

.sd-pub {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-pub__status { display: flex; align-items: flex-start; gap: 10px; }

.sd-pub__dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; margin-top: 4px;
    background: var(--color-text-muted);
}
.sd-pub__dot--ok      { background: var(--color-success);          color: var(--color-success); }
.sd-pub__dot--dirty   { background: var(--color-warning);          color: var(--color-warning); }
.sd-pub__dot--work    { background: var(--color-accent-primary);   color: var(--color-accent-primary); }
.sd-pub__dot--preview { background: var(--color-accent-secondary); color: var(--color-accent-secondary); }
.sd-pub__dot--err     { background: var(--color-error);            color: var(--color-error); }
.sd-pub__dot.sd-pub__spin {
    background: none;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: sd-spin 700ms linear infinite;
}

.sd-pub__txt { flex: 1; min-width: 0; }
.sd-pub__state { font-size: 0.78rem; font-weight: 700; line-height: 1.2; }
.sd-pub__state--ok      { color: var(--color-success); }
.sd-pub__state--dirty   { color: var(--color-warning); }
.sd-pub__state--work    { color: var(--color-accent-primary); }
.sd-pub__state--preview { color: var(--color-accent-secondary); }
.sd-pub__state--err     { color: var(--color-error); }
.sd-pub__desc { font-size: 0.78rem; color: var(--color-text-secondary); line-height: 1.4; margin-top: 2px; }

.sd-pub__open {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 10px 14px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 0.82rem;
    background: transparent; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text-primary);
    transition: all 180ms ease;
}
.sd-pub__open:hover { border-color: var(--color-accent-secondary); color: var(--color-accent-secondary); }
.sd-pub__chev { transition: transform 200ms ease; color: var(--color-text-muted); }
.sd-pub__open.is-open .sd-pub__chev { transform: rotate(90deg); }

.sd-pub__links { display: none; flex-direction: column; gap: 6px; }
.sd-pub__links.is-open { display: flex; }
.sd-pub__link {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    background: var(--color-bg-tertiary); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text-secondary);
    text-decoration: none; font-size: 0.8rem; transition: all 150ms ease;
}
.sd-pub__link:hover { color: var(--color-text-primary); border-color: var(--color-accent-secondary); }
.sd-pub__link--off { color: var(--color-text-muted); font-style: italic; pointer-events: none; }
.sd-pub__link--off:hover { color: var(--color-text-muted); border-color: var(--color-border); }
.sd-pub__link b { color: var(--color-text-primary); font-weight: 600; }
.sd-pub__tag {
    margin-left: auto; font-size: 0.64rem; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 700;
}

.sd-pub__actions { display: flex; gap: 8px; }
.sd-pub__actions:empty { display: none; }
.sd-pub-btn {
    flex: 1; padding: 12px 14px; border-radius: var(--radius-md);
    font-family: inherit; font-size: 0.86rem; font-weight: 700;
    cursor: pointer; border: 1px solid transparent; transition: all 200ms ease;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sd-pub-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sd-pub-btn--primary { background: var(--color-accent-primary); color: #fff; box-shadow: var(--glow-purple); }
.sd-pub-btn--primary:hover { background: var(--color-accent-hover); transform: translateY(-1px); }
/* tema chiaro: il viola brand è troppo chiaro per testo bianco su fondo chiaro → viola più scuro */
html.light-mode .sd-pub-btn--primary { background: #6e4a87; box-shadow: none; }
html.light-mode .sd-pub-btn--primary:hover { background: #5d3d74; }
.sd-pub-btn--publish { background: var(--color-success); color: #06240f; }
.sd-pub-btn--publish:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sd-pub-btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.sd-pub-btn--ghost:hover { color: var(--color-text-primary); background: var(--color-bg-tertiary); }

.sd-pub__note { font-size: 0.72rem; color: var(--color-text-muted); text-align: center; font-style: italic; }

/* lock editing (solo UI): Elenco non cliccabile negli stati di lavorazione */
.sd-list.is-locked { opacity: 0.5; pointer-events: none; filter: grayscale(0.3); }

/* conferma Recupera: variante warning dell'icona del modale centrale + bottone accent */
.sd-modal-center__icon--warn {
    background: rgba(251, 191, 36, 0.12);
    color: var(--color-warning);
    border-color: rgba(251, 191, 36, 0.25);
}
.sd-modal-center__btn--accent { background: var(--color-accent-primary); color: #fff; }
html.light-mode .sd-modal-center__btn--accent { background: #6e4a87; }
.sd-modal-center__btn--accent:hover { background: var(--color-accent-hover); transform: translateY(-1px); }

/* ============================================================
   REVISIONE GRAFICA 06/11/2026 — Sezioni allineate al resto dell'app
   (CSS/client.css «Revisione grafica», inc/ticket.css Nuovo ticket; linee guida:
   fileSCAMBIO Appunto-site14-SezDinGrafica-001 §1-2).
   Blocco additivo: vince sulle regole sopra per ordine, a parità di peso.
   - lastra (--hm-*) con filo di luce al posto dei grigi pieni; un solo livello di superficie
   - pulsanti icona in vetro tenue, viola al passaggio; colore pieno (gradiente) solo sul primario
   - campi «pieni» come il Nuovo ticket; stati come puntino luminoso
   - transizioni ease-in-out, tolte con prefers-reduced-motion
   ============================================================ */
.sez-din-root {
    --sd-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --sd-fbg: rgba(255, 255, 255, 0.03);       /* fondo campo */
    --sd-fbf: rgba(255, 255, 255, 0.055);      /* fondo campo al focus */
    --sd-ln:  rgba(255, 255, 255, 0.07);       /* linea sfumata fra le righe */
    --sd-glass: linear-gradient(180deg, rgba(30, 30, 40, 0.86) 0%, rgba(14, 14, 20, 0.94) 100%);
}
.sd-modal, .sd-bottom-sheet, .sd-modal-center, body > .sd-modal__footer {
    --sd-ease: cubic-bezier(0.65, 0, 0.35, 1);
    --sd-fbg: rgba(255, 255, 255, 0.03);
    --sd-fbf: rgba(255, 255, 255, 0.055);
    --sd-ln:  rgba(255, 255, 255, 0.07);
    --sd-glass: linear-gradient(180deg, rgba(30, 30, 40, 0.86) 0%, rgba(14, 14, 20, 0.94) 100%);
}
html.light-mode .sez-din-root,
html.light-mode .sd-modal,
html.light-mode .sd-bottom-sheet,
html.light-mode .sd-modal-center {
    --sd-fbg: rgba(0, 0, 0, 0.025);
    --sd-fbf: #ffffff;
    --sd-ln:  rgba(0, 0, 0, 0.07);
    --sd-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(250, 250, 252, 0.97));
}

/* --- Intestazioni: niente bordo, titolo grande come le altre pagine --- */
.sd-app-header { border-bottom: none; padding: 14px 16px 6px; }
.sd-app-header__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.sd-sez-header { padding: 6px 16px 14px; }
.sd-sez-header__title { font-size: 1.15rem; }

/* pulsanti icona: vetro tenue, cerchio; viola al passaggio */
.sd-app-header__btn,
.sd-modal__back,
.sd-bottom-sheet__close,
.sd-icon-btn {
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hm-brd);
    color: var(--color-text-secondary);
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.sd-app-header__btn:hover,
.sd-modal__back:hover,
.sd-bottom-sheet__close:hover,
.sd-icon-btn:hover {
    color: var(--color-accent-hover);
    background: rgba(162, 122, 186, 0.08);
    border-color: var(--hm-brh);
}
html.light-mode .sd-app-header__btn,
html.light-mode .sd-modal__back,
html.light-mode .sd-bottom-sheet__close,
html.light-mode .sd-icon-btn { background: rgba(0, 0, 0, 0.025); }
html.light-mode .sd-app-header__btn:hover,
html.light-mode .sd-modal__back:hover,
html.light-mode .sd-bottom-sheet__close:hover,
html.light-mode .sd-icon-btn:hover { color: var(--color-accent-primary); }
/* «+»: il primario, a gradiente */
.sd-icon-btn--add {
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    border-color: transparent;
    box-shadow: 0 0.35rem 1rem -0.45rem rgba(162, 122, 186, 0.75);
}
.sd-icon-btn--add:hover,
html.light-mode .sd-icon-btn--add,
html.light-mode .sd-icon-btn--add:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    border-color: transparent;
}
.sd-icon-btn--add:hover { box-shadow: 0 0.4rem 1.2rem -0.4rem rgba(162, 122, 186, 0.95); }
.sd-icon-btn:disabled,
.sd-icon-btn--add:disabled,
.sd-icon-btn:disabled:hover,
.sd-icon-btn--add:disabled:hover {
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hm-brd);
    box-shadow: none;
    opacity: 0.45;
}
/* nelle righe: penna senza riquadro, discreta */
.sd-icon-btn--mini:not(.sd-icon-btn--add) {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
}
.sd-icon-btn--mini:not(.sd-icon-btn--add):hover {
    color: var(--color-accent-hover);
    background: rgba(162, 122, 186, 0.08);
    border-color: var(--hm-brh);
}
.sd-icon-btn--mini.sd-icon-btn--add { width: 30px; height: 30px; }

/* --- Riga d'aiuto e banner «in preparazione» --- */
.sd-list-hint { margin: 2px 16px 4px; }
.sd-prep-banner {
    margin: 0 12px 14px;
    background: rgba(162, 122, 186, 0.06);
    border: 1px solid var(--hm-brd);
    border-left: 1px solid var(--hm-brd);
    border-radius: var(--radius-lg);
}

/* --- Lastra: elenco delle sezioni, blocchi, lista piatta --- */
.sd-card,
.sd-blk,
.sd-cnt > .sd-flat {
    position: relative;
    background: var(--hm-gls), var(--hm-bg);
    border: 1px solid var(--hm-brd);
    border-radius: var(--radius-xl);
    box-shadow: var(--hm-sh);
}
.sd-card::before,
.sd-blk::before,
.sd-cnt > .sd-flat::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: var(--hm-lit);
    pointer-events: none;
}

/* elenco delle sezioni */
.sd-list { gap: 0.75rem; padding: 12px 12px 16px; }
.sd-card {
    padding: 0.95rem 0.9rem 0.95rem 1rem;
    transition: border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.sd-card:hover { background: var(--hm-gls), var(--hm-bg); border-color: var(--hm-brd); }   /* su touch il passaggio resta acceso: niente viola */
.sd-card__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-lg);
    color: var(--color-accent-hover);
    background: linear-gradient(135deg, rgba(162, 122, 186, 0.22), rgba(105, 180, 228, 0.14));
    box-shadow: inset 0 0 0 1px rgba(162, 122, 186, 0.22);
}
html.light-mode .sd-card__icon { color: var(--color-accent-primary); }
.sd-card__meta { color: var(--color-text-muted); }
.sd-card__arrow { transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; }
@media (hover: hover) {
    .sd-card:hover { border-color: var(--hm-brh); transform: translateY(-1px); }
    .sd-card:hover .sd-card__arrow { color: var(--color-accent-hover); transform: translateX(3px); }
}
.sd-card:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; }
/* non disponibile: attenuata, tessera tratteggiata */
.sd-card--rotta { opacity: 0.55; filter: none; box-shadow: none; }
.sd-card--rotta::before { display: none; }
.sd-card--rotta .sd-card__icon {
    color: var(--color-text-muted);
    background: transparent;
    box-shadow: none;
    border: 1px dashed var(--hm-brd);
}

/* blocchi: il blocco è una lastra, titolo piccolo in alto, elementi come righe della lastra */
.sd-cnt { padding: 0 12px 16px; }
.sd-blk { margin-top: 0.75rem; }
.sd-blk:first-child { margin-top: 0; }
.sd-blk__row {
    padding: 0.7rem 0.6rem 0.45rem 0.55rem;
    background: transparent;
    border-top: none;
    border-bottom: none;
}
.sd-blk__title {
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-secondary);
}
.sd-blk__actions { gap: 2px; align-items: center; }
.sd-blk .sd-card-list { min-height: 0.5rem; }   /* vuota resta un punto d'arrivo del trascinamento */

/* lista piatta (sezioni senza blocchi): una sola lastra */
.sd-cnt > .sd-flat { padding: 0.25rem 0; }

/* righe: trasparenti, separate da linee sfumate ai lati */
.sd-card-row {
    position: relative;
    padding: 0.7rem 0.6rem 0.7rem 0.55rem;
    background: transparent;
    border-bottom: none;
}
.sd-card-row--flat { padding-left: 0.55rem; }
.sd-blk .sd-card-row::before,
.sd-card-row + .sd-card-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sd-ln) 15%, var(--sd-ln) 85%, transparent);
    pointer-events: none;
}
.sd-card-row__primary { font-size: 0.92rem; font-weight: 600; }
.sd-card-row__refs { color: var(--color-text-muted); }
.sd-card-row__refs-sep { color: var(--color-text-muted); opacity: 0.6; }
/* maniglia di trascinamento discreta */
.sd-drag-handle { color: var(--color-text-muted); opacity: 0.55; transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.sd-drag-handle:hover { opacity: 1; background: transparent; color: var(--color-accent-hover); }
.sd-sortable-ghost { opacity: 0.4; background: rgba(162, 122, 186, 0.08); border-radius: var(--radius-lg); }
.sd-sortable-chosen { background: rgba(162, 122, 186, 0.06); border-radius: var(--radius-lg); }

/* eliminati: barrati e attenuati, puntino rosso al posto del cestino */
.sd-del-mark svg { display: none; }
.sd-del-mark::before {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    margin: 0 0.15rem;
    border-radius: 50%;
    background: var(--color-error);
    box-shadow: 0 0 0.5rem rgba(239, 68, 68, 0.8);
}
.sd-del-banner {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.06);
    border-radius: var(--radius-lg);
}
.sd-del-banner svg { display: none; }
.sd-del-banner::before {
    content: '';
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-error);
    box-shadow: 0 0 0.5rem rgba(239, 68, 68, 0.8);
}

/* «Aggiungi blocco»: tratteggio tenue, «+» in cerchietto a gradiente */
.sd-add-blocco {
    margin: 0.75rem 0 0;
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px dashed var(--hm-brd);
    border-radius: var(--radius-xl);
    color: var(--color-text-secondary);
    font-weight: 600;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.sd-add-blocco svg {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.2rem;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 0.3rem 0.8rem -0.35rem rgba(162, 122, 186, 0.9);
}
.sd-add-blocco:hover { color: var(--color-text-primary); border-color: var(--hm-brh); background: rgba(162, 122, 186, 0.05); }
.sd-add-blocco:disabled svg { background: var(--hm-brd); box-shadow: none; }
.sd-cnt-empty { padding: 2.5rem 1.5rem 1.5rem; }

/* --- Editor: fondo --hm-bg, intestazione senza bordo, campi «pieni» --- */
.sd-modal { background: var(--hm-bg); }
.sd-modal__header { background: transparent; border-bottom: none; padding: 14px 16px 4px; }
.sd-modal__kicker {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: var(--color-text-muted);
}
.sd-modal__title { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.sd-modal__body { gap: 1.1rem; padding: 14px 16px 18px; }

/* desktop (piede nella finestra): primario a gradiente, secondario a contorno, testo normale */
.sd-modal__footer {
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    background: transparent;
    border-top: 1px solid var(--hm-brd);
}
.sd-modal__cta {
    width: auto;
    min-width: 9rem;
    padding: 0.7rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 0.35rem 1rem -0.45rem rgba(162, 122, 186, 0.7);
}
.sd-modal__cta:hover,
html.light-mode .sd-modal__cta,
html.light-mode .sd-modal__cta:hover {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
}
html.light-mode .sd-modal__cta { box-shadow: 0 0.35rem 1rem -0.45rem rgba(162, 122, 186, 0.7); }
.sd-modal__cta:hover { transform: none; box-shadow: 0 0.4rem 1.2rem -0.4rem rgba(162, 122, 186, 0.95); }
.sd-modal__delete {
    margin-right: auto;
    padding: 0.6rem 1.1rem;
    align-self: auto;
    color: #f19a9a;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.sd-modal__delete:hover { color: #ffc9c9; background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.6); }
html.light-mode .sd-modal__delete { color: #b91c1c; }
html.light-mode .sd-modal__delete:hover { color: #7f1d1d; }

/* campi: etichette piccole maiuscole, campo pieno con bordo sottile, al focus viola con alone */
.sd-field { gap: 0.45rem; }
.sd-field__label {
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
/* obbligatorio: anello viola al posto dell'asterisco (prima dell'etichetta, come nel Nuovo ticket) */
.sd-field__label:has(.sd-field__required)::before {
    content: '';
    flex-shrink: 0;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--color-accent-primary), 0 0 0.4rem rgba(162, 122, 186, 0.55);
}
.sd-field__label:has(.sd-field__required) .sd-field__required { display: none; }
.sd-field--inline .sd-field__label { text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; color: var(--color-text-primary); }
.sd-field--inline .sd-field__label::before { display: none; }
.sd-field__input,
.sd-field__textarea {
    min-height: 2.75rem;
    padding: 0.7rem 0.9rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--sd-fbg);
    border: 1px solid var(--hm-brd);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.sd-field__input { height: auto; }
.sd-field__input:hover,
.sd-field__textarea:hover { border-color: rgba(162, 122, 186, 0.35); }
.sd-field__input:focus,
.sd-field__textarea:focus {
    background-color: var(--sd-fbf);
    border-color: rgba(162, 122, 186, 0.75);
    box-shadow: 0 0 0 3px rgba(162, 122, 186, 0.16), 0 0 1.25rem -0.4rem rgba(162, 122, 186, 0.55);
}
.sd-field--inline { padding: 0.7rem 0.9rem; background: var(--sd-fbg); border: 1px solid var(--hm-brd); border-radius: var(--radius-lg); }

/* interruttore: binario trasparente, pallino a gradiente quando è acceso */
.sd-toggle__slider {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hm-brd);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.sd-toggle__slider::before { transition: transform 0.3s var(--sd-ease), background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; }
.sd-toggle__input:checked + .sd-toggle__slider {
    background: rgba(162, 122, 186, 0.12);
    border-color: rgba(162, 122, 186, 0.6);
}
.sd-toggle__input:checked + .sd-toggle__slider::before {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 0 0.6rem rgba(162, 122, 186, 0.85);
}
.sd-toggle__input:focus-visible + .sd-toggle__slider { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; }

/* immagine e PDF: anteprima come lastra, pulsanti a contorno */
.sd-image-preview {
    background: var(--hm-gls), var(--sd-fbg);
    border: 1px solid var(--hm-brd);
    border-radius: var(--radius-lg);
}
.sd-image-btn {
    padding: 0.55rem 1.05rem;
    background: transparent;
    border: 1px solid var(--hm-brd);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.sd-image-btn:hover { color: var(--color-text-primary); border-color: var(--hm-brh); background: rgba(162, 122, 186, 0.06); }
.sd-image-btn--del:hover { color: var(--color-error); border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.06); }
.sd-schema-info { border-radius: var(--radius-lg); }

/* --- Conferme: stessa posizione, lastra in vetro con filo di luce --- */
.sd-overlay { background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sd-modal-center__card {
    position: relative;
    background: var(--sd-glass);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--hm-brd);
    border-radius: 1.5rem;
    box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.8), 0 0 2rem -1rem rgba(162, 122, 186, 0.45);
    animation: sd-pop-in 0.3s var(--sd-ease);
}
.sd-modal-center__card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--hm-lit);
    pointer-events: none;
}
html.light-mode .sd-modal-center__card { box-shadow: 0 1.5rem 3rem -1rem rgba(40, 20, 70, 0.3); }
.sd-modal-center__btn {
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.sd-modal-center__btn--danger {
    background: transparent;
    color: #f19a9a;
    border: 1px solid rgba(239, 68, 68, 0.5);
    box-shadow: none;
}
.sd-modal-center__btn--danger:hover { background: rgba(239, 68, 68, 0.12); color: #ffc9c9; transform: none; }
html.light-mode .sd-modal-center__btn--danger { color: #b91c1c; }
html.light-mode .sd-modal-center__btn--danger:hover { color: #7f1d1d; }
.sd-modal-center__btn--cancel { border-color: transparent; color: var(--color-text-secondary); }
.sd-modal-center__btn--cancel:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); }
.sd-modal-center__btn--accent,
.sd-modal-center__btn--accent:hover,
html.light-mode .sd-modal-center__btn--accent {
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    transform: none;
}

/* --- Aiuto: foglio in vetro come la finestra «Installa l'app» --- */
.sd-bottom-sheet {
    background: var(--sd-glass);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid var(--hm-brd);
    border-bottom: none;
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -1rem 2.5rem -1rem rgba(0, 0, 0, 0.7), 0 0 2rem -1rem rgba(162, 122, 186, 0.4);
    animation: sd-sheet-up 0.4s var(--sd-ease);
}
.sd-bottom-sheet::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: var(--hm-lit);
    pointer-events: none;
}
.sd-bottom-sheet__handle { background: var(--hm-brd); }
.sd-bottom-sheet__kicker { color: var(--color-text-muted); letter-spacing: 0.14em; }
.sd-bottom-sheet__body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* --- Home di stato: lastra, stato come puntino luminoso grande, alone nel colore dello stato --- */
.sd-page__body:has(> .sd-home-state) { padding: 0 12px 16px; }
.sd-page__body:has(> .sd-home-state) > .sd-prep-banner { margin: 0 0 14px; }
.sd-home-state {
    --sd-st: 162, 122, 186;
    position: relative;
    padding: 1.1rem 1rem 1rem;
    border: 1px solid var(--hm-brd);
    border-radius: var(--radius-xl);
    box-shadow: var(--hm-sh);
    background: radial-gradient(70% 90% at 0% 0%, rgba(var(--sd-st), 0.16), transparent 70%), var(--hm-gls), var(--hm-bg);
}
.sd-home-state::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: var(--hm-lit);
    pointer-events: none;
}
.sd-home-state--ok      { --sd-st: 74, 222, 128;   border-color: var(--hm-brd); background: radial-gradient(70% 90% at 0% 0%, rgba(var(--sd-st), 0.14), transparent 70%), var(--hm-gls), var(--hm-bg); }
.sd-home-state--dirty   { --sd-st: 251, 191, 36;   border-color: var(--hm-brd); background: radial-gradient(70% 90% at 0% 0%, rgba(var(--sd-st), 0.14), transparent 70%), var(--hm-gls), var(--hm-bg); }
.sd-home-state--work    { --sd-st: 105, 180, 228;  border-color: var(--hm-brd); background: radial-gradient(70% 90% at 0% 0%, rgba(var(--sd-st), 0.14), transparent 70%), var(--hm-gls), var(--hm-bg); }
.sd-home-state--preview { --sd-st: 162, 122, 186;  border-color: var(--hm-brd); background: radial-gradient(70% 90% at 0% 0%, rgba(var(--sd-st), 0.18), transparent 70%), var(--hm-gls), var(--hm-bg); }
.sd-home-state--err     { --sd-st: 239, 68, 68;    border-color: var(--hm-brd); background: radial-gradient(70% 90% at 0% 0%, rgba(var(--sd-st), 0.15), transparent 70%), var(--hm-gls), var(--hm-bg); }
.sd-home-dot {
    width: 0.8rem;
    height: 0.8rem;
    margin-top: 0.3rem;
    box-shadow: 0 0 0 0.25rem rgba(var(--sd-st, 162, 122, 186), 0.14), 0 0 0.9rem currentColor;
}
.sd-home-state__title { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.sd-home-state__note { background: var(--sd-fbg); border: 1px solid var(--hm-brd); border-radius: var(--radius-lg); }
.sd-home-state__foot {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--sd-ln) 15%, var(--sd-ln) 85%, transparent) 1;
}
.sd-home-live {
    border-radius: var(--radius-full);
    background: transparent;
    border-color: rgba(74, 222, 128, 0.4);
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.sd-home-live:hover { background: rgba(74, 222, 128, 0.08); }
.sd-home-live__dot { box-shadow: 0 0 0.45rem currentColor; }

/* schede informative: lastre più piccole, niente barra laterale; etichetta come puntino + parola */
.sd-facts { gap: 0.6rem; margin-top: 0.75rem; }
.sd-fact {
    padding: 0.85rem 0.9rem 0.9rem;
    background: var(--hm-gls), var(--hm-bg);
    border: 1px solid var(--hm-brd);
    border-radius: var(--radius-lg);
    box-shadow: var(--hm-sh);
}
.sd-fact::before { display: none; }
.sd-fact--prev { border-color: var(--hm-brd); }
.sd-fact__ico { border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.04); }
.sd-fact__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    background: none;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sd-fact__chip::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
}
.sd-fact--mod .sd-fact__chip { color: var(--color-warning); }
.sd-fact--mod .sd-fact__chip::before { box-shadow: 0 0 0.45rem currentColor; }
.sd-fact--prev .sd-fact__chip { color: var(--color-accent-secondary); }
.sd-fact__actions {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--sd-ln) 15%, var(--sd-ln) 85%, transparent) 1;
}
.sd-fact__btn {
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid var(--hm-brd);
    font-weight: 600;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.sd-fact__btn:hover { color: var(--color-text-primary); border-color: var(--hm-brh); background: rgba(162, 122, 186, 0.06); }
.sd-fact__btn--warn { color: #f19a9a; border-color: rgba(239, 68, 68, 0.35); }
.sd-fact__btn--warn:hover { background: rgba(239, 68, 68, 0.1); color: #ffc9c9; border-color: rgba(239, 68, 68, 0.6); }
html.light-mode .sd-fact__btn--warn { color: #b91c1c; }
html.light-mode .sd-fact__btn--warn:hover { color: #7f1d1d; }

/* azioni: primaria a gradiente, Pubblica verde, secondarie a contorno */
.sd-home-actions { gap: 0.6rem; margin-top: 0.9rem; }
.sd-home-btn {
    padding: 0.8rem 1.1rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.sd-home-btn--primary,
.sd-home-btn--primary:hover,
html.light-mode .sd-home-btn--primary,
html.light-mode .sd-home-btn--primary:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 0.35rem 1rem -0.45rem rgba(162, 122, 186, 0.75);
    transform: none;
}
.sd-home-btn--publish {
    background: linear-gradient(135deg, #4ade80, #2dd4bf);
    box-shadow: 0 0.35rem 1rem -0.45rem rgba(74, 222, 128, 0.7);
}
.sd-home-btn--publish:hover { transform: none; }
.sd-home-btn--ghost { border-color: var(--hm-brd); }
.sd-home-btn--ghost:hover { background: rgba(162, 122, 186, 0.06); border-color: var(--hm-brh); }

@media (prefers-reduced-motion: reduce) {
    .sd-card,
    .sd-card__arrow,
    .sd-modal-center__card,
    .sd-bottom-sheet { transition: none; animation: none; }
    .sd-card:hover { transform: none; }
}

/* «Salva» spento finché manca un campo obbligatorio (sezDinReqSync, sez-din-controller.js): resta
   all'opacità del suo stato, con una transizione morbida, senza lampi. Peso (0,2,1) e posizione in fondo:
   vince sulle regole del primario sopra, mobile compreso */
body .sd-modal__cta { transition: opacity 0.35s ease-in-out, filter 0.35s ease-in-out, box-shadow 0.35s ease-in-out; }
body .sd-modal__cta[aria-disabled="true"] {
    opacity: 0.4;
    filter: saturate(0.4);
    box-shadow: none;
    cursor: not-allowed;
}

/* Campi che seguono il contenuto (sezDinGrow, sez-din-controller.js): niente maniglia, niente barra,
   l'altezza la dà il testo. Una riga: alto quanto gli altri campi (2.75rem) e va a capo se serve;
   testo lungo: da 3 righe in su. Stesso fondo, bordo e focus dei campi pieni sopra */
.sd-field__input--wrap,
.sd-field__textarea {
    display: block;
    resize: none;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.sd-field__input--wrap { min-height: calc(1.5em + 1.4rem + 2px); }
.sd-field__textarea   { min-height: calc(4.5em + 1.4rem + 2px); }

/* ============================================================
   Righe degli elementi e comandi — 06/11/2026 (Federico: pulsanti e maniglie troppo piccoli)
   Bersagli da almeno 44 punti (2.5rem = 45px a base 18px), indicazione di Apple per il tocco.
   La riga intera apre l'elemento (sez-din-controller.js, sezDinRenderCardRow); la maniglia resta
   l'unico punto da cui si trascina. Al tocco e durante il trascinamento: filo di luce a sinistra
   (::after; ::before è la linea fra le righe)
   ============================================================ */
.sd-card-row {
    min-height: 3.75rem;
    gap: 0.3rem;
    padding: 0.3rem 0.45rem 0.3rem 0.2rem;
    transition: background-color 0.3s ease-in-out;
}
.sd-card-row--flat { padding-left: 0.2rem; }
.sd-card-row::after {
    content: '';
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: 0 0 0.6rem rgba(162, 122, 186, 0.8);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
.sd-card-row:active,
.sd-card-row.sd-sortable-chosen { background: linear-gradient(90deg, rgba(162, 122, 186, 0.09), transparent 70%); }
.sd-card-row:active::after,
.sd-card-row.sd-sortable-chosen::after { opacity: 1; }
@media (hover: hover) {
    .sd-card-row:hover { background: linear-gradient(90deg, rgba(162, 122, 186, 0.05), transparent 70%); }
}
/* trascinamento: il posto d'arrivo è un riquadro tratteggiato tenue */
.sd-card-row.sd-sortable-ghost {
    opacity: 0.5;
    background: rgba(162, 122, 186, 0.06);
    outline: 1px dashed var(--hm-brh);
    outline-offset: -3px;
    border-radius: var(--radius-lg);
}

/* testo: area di tocco ampia, titolo fino a due righe invece del troncamento */
.sd-card-row__body {
    cursor: pointer;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.4rem 0.25rem;
    -webkit-tap-highlight-color: transparent;
}
.sd-card-row__primary {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-card-row__refs { margin-top: 0.2rem; font-size: 0.75rem; }

/* maniglia: tutta l'altezza della riga, 2.5rem di larghezza; puntini più grandi */
.sd-drag-handle {
    align-self: stretch;
    width: 2.5rem;
    min-height: 2.75rem;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    opacity: 0.75;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.sd-drag-handle svg { width: 1.35rem; height: 1.35rem; max-width: none; }
.sd-drag-handle:active,
.sd-sortable-chosen > .sd-drag-handle,
.sd-sortable-chosen > .sd-blk__row > .sd-drag-handle {
    opacity: 1;
    color: var(--color-accent-hover);
    background: rgba(162, 122, 186, 0.1);
}

/* penna e «+» nelle righe: cerchi da 2.75rem; la penna in vetro tenue, visibile ma discreta */
.sd-card-row .sd-icon-btn--mini,
.sd-blk__row .sd-icon-btn--mini {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
}
.sd-card-row .sd-icon-btn--mini:not(.sd-icon-btn--add),
.sd-blk__row .sd-icon-btn--mini:not(.sd-icon-btn--add) {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--hm-brd);
    color: var(--color-text-secondary);
}
html.light-mode .sd-card-row .sd-icon-btn--mini:not(.sd-icon-btn--add),
html.light-mode .sd-blk__row .sd-icon-btn--mini:not(.sd-icon-btn--add) { background: rgba(0, 0, 0, 0.025); }
.sd-card-row .sd-icon-btn--mini:not(.sd-icon-btn--add):hover,
.sd-blk__row .sd-icon-btn--mini:not(.sd-icon-btn--add):hover,
.sd-card-row .sd-icon-btn--mini:not(.sd-icon-btn--add):active,
.sd-blk__row .sd-icon-btn--mini:not(.sd-icon-btn--add):active {
    color: var(--color-accent-hover);
    background: rgba(162, 122, 186, 0.1);
    border-color: var(--hm-brh);
}
.sd-card-row .sd-icon-btn svg,
.sd-blk__row .sd-icon-btn svg { width: 1.2rem; height: 1.2rem; }

/* righe dei blocchi: stessa altezza minima delle righe elemento */
.sd-blk__row { min-height: 3.5rem; gap: 0.3rem; padding: 0.35rem 0.45rem 0.25rem 0.2rem; }
.sd-blk__actions { gap: 0.35rem; }

/* intestazioni: pulsanti icona da 2.6rem (aiuto, modifica, «+», indietro) */
.sd-sez-header__actions { gap: 0.5rem; }
.sd-sez-header__actions .sd-icon-btn,
.sd-app-header__btn,
.sd-modal__back { width: 2.6rem; height: 2.6rem; }
.sd-sez-header__actions .sd-icon-btn svg { width: 1.25rem; height: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    .sd-card-row,
    .sd-card-row::after,
    .sd-drag-handle { transition: none; }
}

/* ============================================================
   Chiusura del pannello «Salva» — 06/11/2026 (mobile, sezDinCloseModal): come il Nuovo ticket,
   prima spariscono i pulsanti (0,28 s), poi il bordo scende fino alla capsula (0,4 s dopo 0,22 s);
   il pannello ha lo stesso vetro della capsula, quindi quando si toglie lo scambio non si vede
   ============================================================ */
@media (max-width: 768px) {
    body > .sd-modal__footer.sd-ftr--cls {
        height: calc(2.75rem + 14px);
        pointer-events: none;
        transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0.22s;
    }
    /* 0,28 s (prima 0,16 s, come il Nuovo ticket: troppo breve, sembrava istantanea — Federico 06/11/2026) */
    body > .sd-modal__footer.sd-ftr--cls > * {
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.28s ease-in-out, transform 0.28s ease-in-out;
    }
    @media (prefers-reduced-motion: reduce) {
        body > .sd-modal__footer.sd-ftr--cls,
        body > .sd-modal__footer.sd-ftr--cls > * { transition: none; }
    }
}

/* ============================================================
   Spazio verticale delle Sezioni — 06/11/2026 (solo CSS, stessi elementi)
   1. Mobile: le Sezioni scorrono con la pagina come il resto dell'app. Prima la pagina aveva un'altezza
      fissa fino sopra la capsula e scorreva dentro .sd-page__body (per la vecchia console in fondo, oggi
      non più disegnata): sotto la capsula restava una fascia nera e il contenuto si tagliava netto.
      Ora il contenuto passa sotto la capsula e il velo di frame.css lo sfuma; lo spazio in fondo è il
      padding di .frame-corpo (frame.css). Desktop invariato.
   2. Vista sezione: le due intestazioni («‹ Sezioni» e «Home-Testi» con i pulsanti) diventano una riga
      sola: freccia | «SEZIONI» piccolo, titolo, conteggio | pulsanti. Griglia sulla pagina; le due
      intestazioni sono display: contents (i loro elementi entrano nella griglia)
   3. Elenco e home: intestazioni più compatte
   ============================================================ */
@media (max-width: 768px) {
    .sez-din-root,
    body.demo-on .sez-din-root {
        height: auto;
        min-height: 0;
        overflow: visible;
    }
    .sez-din-root .sd-page { overflow: visible; min-height: 0; }
    .sez-din-root .sd-page__body { overflow: visible; }
}

.sd-page:has(> .sd-sez-header) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
        "back kick act"
        "titl titl titl"
        "sub  sub  sub"
        "body body body";
    column-gap: 0.75rem;
    align-items: center;
    padding-top: 12px;
}
/* barra in alto: freccia | «SEZIONI» | pulsanti; sotto il titolo a tutta larghezza, poi il conteggio */
.sd-page:has(> .sd-sez-header) > .sd-app-header,
.sd-page:has(> .sd-sez-header) > .sd-sez-header,
.sd-page:has(> .sd-sez-header) .sd-sez-header__top { display: contents; }
.sd-page:has(> .sd-sez-header) .sd-app-header__btn { grid-area: back; margin-left: 16px; }
.sd-page:has(> .sd-sez-header) .sd-app-header__actions:empty { display: none; }
.sd-page:has(> .sd-sez-header) .sd-app-header__title {
    grid-area: kick;
    padding: 0;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.sd-page:has(> .sd-sez-header) .sd-sez-header__actions { grid-area: act; margin-right: 16px; }
.sd-page:has(> .sd-sez-header) .sd-sez-header__title {
    grid-area: titl;
    margin: 0.85rem 16px 0;
    font-size: 1.45rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.sd-page:has(> .sd-sez-header) .sd-sez-header__sub { grid-area: sub; margin: 0.3rem 16px 0; }
.sd-page:has(> .sd-sez-header) > .sd-page__body { grid-area: body; align-self: stretch; margin-top: 14px; }

/* elenco delle sezioni e home: intestazione compatta, aiuto attaccato al titolo */
.sd-app-header { padding: 12px 16px 4px; }
.sd-list-hint { margin: 0 16px 2px; font-size: 0.76rem; }
.sd-list { padding-top: 10px; }
.sd-home-head__sub { margin-top: 1px; }
.sd-page__body:has(> .sd-home-state) { padding-top: 8px; }
.sd-home-state__note { margin-top: 0.75rem; }
.sd-home-state__foot { margin-top: 0.75rem; padding-top: 0.7rem; }

/* Voci singole: si aprono toccando la riga (sezDinRenderCardRow), quindi niente penna né freccina
   (Federico 06/11/2026). Maniglia di trascinamento a sinistra. La penna resta sui blocchi (.sd-blk__row) */
.sd-card-row .sd-icon-btn--mini { display: none; }
.sd-card-row,
.sd-card-row--flat { padding-left: 0.2rem; padding-right: 0.75rem; }
.sd-card-row > .sd-card-row__body { padding-right: 0.25rem; }

/* Editor aperto (06/11/2026): la pagina dietro non scorre. Prima il gesto sull'editor che non aveva niente da
   scorrere passava alla lista dietro (traccia SD: scrollY 0 → 866 con il corpo dell'editor fermo): la lista si
   spostava senza vederla e il primo tocco sulla freccia fermava solo l'inerzia. Il corpo dell'editor, se
   lungo, scorre al suo interno senza passare il gesto alla pagina */
html:has(body > .sd-modal),
body:has(> .sd-modal) { overflow: hidden; }
.sd-modal,
.sd-modal__body { overscroll-behavior: contain; }

/* Pulsanti e maniglie: via di mezzo fra le misure iniziali e quelle ingrandite (Federico 06/11/2026)
   — pulsanti icona dell'intestazione e frecce indietro: 36px → 2.6rem → 2.3rem (≈ 41px)
   — penna e «+» nelle righe dei blocchi: 30–34px → 2.75rem → 2.35rem (≈ 42px)
   — maniglia di trascinamento: larga 2.5rem → 2.1rem, puntini 1.35rem → 1.15rem */
.sd-sez-header__actions .sd-icon-btn,
.sd-page:has(> .sd-sez-header) .sd-sez-header__actions .sd-icon-btn,
.sd-app-header__btn,
.sd-modal__back { width: 2.3rem; height: 2.3rem; }
.sd-sez-header__actions { gap: 0.4rem; }
.sd-sez-header__actions .sd-icon-btn svg { width: 1.1rem; height: 1.1rem; }
.sd-card-row .sd-icon-btn--mini,
.sd-blk__row .sd-icon-btn--mini { width: 2.35rem; height: 2.35rem; }
.sd-card-row .sd-icon-btn svg,
.sd-blk__row .sd-icon-btn svg { width: 1.05rem; height: 1.05rem; }
.sd-blk__actions { gap: 0.3rem; }
.sd-drag-handle { width: 2.1rem; }
.sd-drag-handle svg { width: 1.15rem; height: 1.15rem; }

/* ============================================================
   Blocchi e aggiunta — 06/11/2026 (Federico: penna e «+» per blocco poco sensati)
   - Intestazione del blocco (.sd-blk__head, tocco = editor del blocco, niente penna): il titolo è il titolo
     vero (normale, grassetto, max 2 righe), sotto il conteggio attenuato. Le voci scendono di un livello.
   - «＋ Aggiungi …» (.sd-add-row): riga in fondo al blocco o alla lista piatta, viola tenue, al posto del
     «+» a gradiente; con il tetto raggiunto (maxCards) resta visibile e spenta.
   - Maniglie: più marcata quella del blocco, più tenue quella delle voci.
   - Sezioni senza blocchi: lista e riga «Aggiungi» nella stessa lastra (.sd-flat).
   ============================================================ */
.sd-blk__row { align-items: center; padding-top: 0.55rem; padding-bottom: 0.5rem; }
.sd-blk__head {
    flex: 1;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.3rem 0.4rem 0.3rem 0.1rem;
    cursor: pointer;
    border-radius: var(--radius-lg);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease-in-out;
}
.sd-blk__head:active { background: rgba(162, 122, 186, 0.07); }
@media (hover: hover) {
    .sd-blk__head:hover { background: rgba(162, 122, 186, 0.05); }
}
.sd-blk__title {
    font-size: 1rem;
    font-weight: var(--font-weight-bold, 700);
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--color-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sd-blk__cnt {
    margin-top: 0.15rem;
    font-size: 0.74rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
/* voci dentro un blocco: un livello sotto il titolo del blocco */
.sd-blk .sd-card-row { min-height: 3.1rem; }
.sd-blk .sd-card-row__primary { font-size: 0.88rem; font-weight: 500; color: var(--color-text-secondary); }
/* maniglie: blocco più marcata, voci più tenui */
.sd-blk__row > .sd-drag-handle { opacity: 0.9; color: var(--color-text-secondary); }
.sd-card-row > .sd-drag-handle { opacity: 0.5; }

/* riga «＋ Aggiungi …» */
.sd-add-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.9rem;
    padding: 0.55rem 0.75rem 0.6rem 0.65rem;
    background: transparent;
    border: none;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    color: var(--color-accent-hover);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
html.light-mode .sd-add-row { color: var(--color-accent-primary); }
.sd-add-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sd-ln) 15%, var(--sd-ln) 85%, transparent);
    pointer-events: none;
}
.sd-add-row__ico {
    width: 1.45rem;
    height: 1.45rem;
    margin-left: 0.3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(162, 122, 186, 0.45);
    background: rgba(162, 122, 186, 0.08);
}
.sd-add-row__ico svg { width: 0.85rem; height: 0.85rem; max-width: none; }
.sd-add-row:active { background: rgba(162, 122, 186, 0.08); }
@media (hover: hover) {
    .sd-add-row:hover { background: rgba(162, 122, 186, 0.05); }
}
.sd-add-row:disabled { color: var(--color-text-muted); opacity: 0.5; cursor: not-allowed; background: transparent; }
.sd-add-row:disabled .sd-add-row__ico { border-color: var(--hm-brd); background: transparent; }
.sd-add-row:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: -2px; }

/* lista piatta: la lastra (.sd-flat) contiene righe e «Aggiungi»; senza voci, il testo vuoto sta dentro */
.sd-flat > .sd-cnt-empty { padding: 1.5rem 1rem 1rem; }
.sd-flat > .sd-card-list { padding: 0; }

@media (prefers-reduced-motion: reduce) {
    .sd-blk__head,
    .sd-add-row { transition: none; }
}
/* il titolo del blocco aveva flex: 1 (riga orizzontale): in colonna lo allungherebbe in altezza */
.sd-blk__head .sd-blk__title { flex: none; min-width: 0; }

/* ============================================================
   Home «Il tuo sito» compatta — 06/11/2026 (Federico: prime due schede più strette in verticale)
   Solo CSS, stessi elementi:
   - titolo e dominio attaccati (niente margini del titolo h1)
   - scheda di stato: testi più piccoli, «Vedi il sito online» pillola piccola sotto la descrizione,
     senza la riga di separazione
   - schede informative con UNA azione (es. «Annulla le modifiche»): l'azione sta sulla riga della data,
     a destra; con due azioni (Versione precedente) restano sotto, più compatte e senza separatore
   ============================================================ */
.sd-home-head__title { margin: 0; line-height: 1.15; }
.sd-home-head__sub { margin-top: 0.15rem; }

.sd-home-state { padding: 0.85rem 0.9rem 0.85rem; }
.sd-home-state__top { gap: 0.65rem; }
.sd-home-dot { width: 0.7rem; height: 0.7rem; margin-top: 0.32rem; }
.sd-home-state__title { font-size: 1rem; line-height: 1.3; }
.sd-home-state__desc { margin-top: 0.2rem; font-size: 0.8rem; line-height: 1.45; }
.sd-home-state__note { margin-top: 0.6rem; padding: 0.45rem 0.65rem; }
/* «Vedi il sito online»: allineato al testo (puntino + distacco), niente riga sopra */
.sd-home-state__foot {
    margin-top: 0.6rem;
    padding: 0 0 0 calc(0.7rem + 0.65rem);
    border-top: none;
    border-image: none;
    justify-content: flex-start;
}
.sd-home-live { padding: 0.35rem 0.8rem; font-size: 0.76rem; gap: 0.4rem; }
.sd-home-live svg { width: 0.8rem; height: 0.8rem; }

.sd-facts { gap: 0.5rem; margin-top: 0.6rem; }
.sd-fact { padding: 0.7rem 0.8rem 0.75rem; }
.sd-fact__ico { width: 1.6rem; height: 1.6rem; }
.sd-fact__ico svg { width: 0.85rem; height: 0.85rem; }
.sd-fact__lbl { font-size: 0.64rem; }
.sd-fact__val { margin-top: 0.3rem; padding-left: calc(1.6rem + 9px); font-size: 0.84rem; }
.sd-fact__actions { margin-top: 0.6rem; padding-top: 0; border-top: none; border-image: none; gap: 0.5rem; }
.sd-fact__btn { padding: 0.45rem 0.8rem; font-size: 0.74rem; }
.sd-fact__btn svg { width: 0.85rem; height: 0.85rem; }
/* una sola azione: sulla riga della data, a destra */
.sd-fact:has(> .sd-fact__actions > :only-child) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head head" "val act";
    align-items: center;
    column-gap: 0.6rem;
}
.sd-fact:has(> .sd-fact__actions > :only-child) > .sd-fact__head { grid-area: head; }
.sd-fact:has(> .sd-fact__actions > :only-child) > .sd-fact__val { grid-area: val; }
.sd-fact:has(> .sd-fact__actions > :only-child) > .sd-fact__actions { grid-area: act; margin-top: 0.3rem; }
.sd-fact:has(> .sd-fact__actions > :only-child) .sd-fact__btn { flex: none; white-space: nowrap; }

.sd-home-actions { margin-top: 0.75rem; gap: 0.5rem; }