/* PDFEditabile — App shell (Fase 0)
   Layout stile Acrobat: toolbar + sidebar + viewer. Light/Dark theme. */

/* ==========================================================================
   TOKEN TEMA — chrome theme-aware al 100%
   La chrome (toolbar/header/controlli) NON usa più colori hardcoded: tutto
   passa dai token qui sotto, che virano tra chiaro e scuro.
   Base = tema CHIARO   → :root  e  :root[data-theme="light"]
   Override = tema SCURO → :root[data-theme="dark"] (+ fallback @media)
   initTheme() imposta SEMPRE data-theme (light|dark): il blocco @media in
   fondo è solo una rete di sicurezza se l'attributo mancasse.
   ========================================================================== */
:root,
:root[data-theme="light"] {
    /* Accento: cobalto grave (fiducia/pro), meno neon del vecchio #2b6cff */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-active: #1e40af;
    --accent-text: #2563eb;            /* accento come testo/bordo su superfici chiare */
    --accent-weak: #eaf1fe;            /* fondo tenue: tool attivo, selezione, dropzone hover */
    --accent-weak-border: #c7dbfd;
    --accent-ring: rgba(37,99,235,.35);/* focus ring */

    /* Superfici — la TELA è più scura dei pannelli, così la pagina bianca stacca */
    --bg: #f5f6f8;
    --viewer-bg: #e9ebee;
    --panel: #ffffff;   --surface: #ffffff;
    --panel-2: #eef0f3; --surface-2: #eef0f3;
    --surface-3: #e4e7ec;

    /* Bordi */
    --border: #dcdfe4;
    --border-strong: #c3c8d0;

    /* Testo */
    --text: #1a1d21;
    --text-secondary: #616872;  --text-dim: #616872;   /* alias legacy */
    --text-disabled: #9aa1ab;
    --text-on-accent: #ffffff;

    /* Chrome toolbar / header */
    --toolbar-bg: #ffffff;
    --toolbar-fg: #1a1d21;
    --toolbar-border: #e6e8ec;

    /* Controlli toolbar (.btn / input / select) */
    --control-bg: #f0f2f5;
    --control-bg-hover: #e6e9ee;
    --control-bg-active: #dde1e7;
    --control-border: #d3d8de;
    --control-fg: #1a1d21;
    --control-placeholder: #5f6874;  /* a11y: >=4.5:1 su --control-bg (era #8a929c ~2.8:1) */
    --control-active-bg: var(--accent-weak);
    --control-active-border: var(--accent);

    /* Segmented control (switcher modalità) */
    --mode-track-bg: #e9ebef;
    --mode-active-bg: #ffffff;
    --mode-active-fg: #1a1d21;

    /* Semantici */
    --success: #15803d; --success-bg: #e8f6ee;
    --warning: #b45309; --warning-bg: #fdf1e3;
    --danger:  #dc2626; --danger-bg:  #fdeaea; --danger-hover: #b91c1c;
    --info: var(--accent);

    /* Elevazione (theme-aware) */
    --e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
    --e2: 0 2px 8px rgba(16,24,40,.10), 0 1px 3px rgba(16,24,40,.06);
    --e3: 0 12px 32px rgba(16,24,40,.16), 0 4px 12px rgba(16,24,40,.10);
    --shadow-page: 0 1px 3px rgba(16,24,40,.10), 0 8px 24px rgba(16,24,40,.08);
    --shadow: var(--shadow-page);   /* alias legacy */

    /* Forma */
    --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
    --radius: var(--r-md);          /* alias legacy */

    /* Spaziatura (base 4px) */
    --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px;
    --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;

    /* Tipografia */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-micro: 11px; --lh-micro: 1.3;
    --fs-xs: 12px;    --lh-xs: 1.35;
    --fs-sm: 13px;    --lh-sm: 1.4;
    --fs-base: 14px;  --lh-base: 1.5;
    --fs-md: 16px;    --lh-md: 1.3;
    --fs-lg: 20px;    --lh-lg: 1.25;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

    /* Dimensioni */
    --control-h: 32px;
    --toolbar-h: 48px;
    --sidebar-w: 236px;
}

:root[data-theme="dark"] {
    /* Fill accento resta #2563eb (bianco sopra = AA a prescindere); come TESTO si alza */
    --accent: #2563eb;
    --accent-hover: #3b7bf0;
    --accent-active: #1d4ed8;
    --accent-text: #7aa6ff;
    --accent-weak: rgba(122,166,255,.14);
    --accent-weak-border: rgba(122,166,255,.30);
    --accent-ring: rgba(122,166,255,.45);

    /* Tela la più scura; chrome ELEVATA (più chiara del bg) */
    --bg: #14171a;
    --viewer-bg: #0e1114;
    --panel: #1c2024;   --surface: #1c2024;
    --panel-2: #23282d; --surface-2: #23282d;
    --surface-3: #2b3138;

    --border: #2b3138;
    --border-strong: #3a424b;

    --text: #e6e8eb;
    --text-secondary: #9aa2ad; --text-dim: #9aa2ad;
    --text-disabled: #6b7480;
    --text-on-accent: #ffffff;

    --toolbar-bg: #1a1e22;
    --toolbar-fg: #e6e8eb;
    --toolbar-border: #2b3138;

    --control-bg: rgba(255,255,255,.06);
    --control-bg-hover: rgba(255,255,255,.11);
    --control-bg-active: rgba(255,255,255,.16);
    --control-border: rgba(255,255,255,.13);
    --control-fg: #e6e8eb;
    --control-placeholder: rgba(230,232,235,.5);
    --control-active-bg: var(--accent-weak);
    --control-active-border: var(--accent-text);

    --mode-track-bg: rgba(255,255,255,.05);
    --mode-active-bg: rgba(255,255,255,.13);
    --mode-active-fg: #ffffff;

    --success: #4ade80; --success-bg: rgba(74,222,128,.12);
    --warning: #fbbf24; --warning-bg: rgba(251,191,36,.12);
    --danger:  #f87171; --danger-bg:  rgba(248,113,113,.12); --danger-hover: #ef4444;
    --info: var(--accent-text);

    --e1: 0 1px 2px rgba(0,0,0,.4),  inset 0 1px 0 rgba(255,255,255,.03);
    --e2: 0 2px 10px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --e3: 0 16px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
    --shadow-page: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
    --shadow: var(--shadow-page);
}

/* Rete di sicurezza: sistema in dark e data-theme assente → tokens scuri.
   (initTheme() imposta sempre data-theme, quindi normalmente non serve.) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent: #2563eb; --accent-hover: #3b7bf0; --accent-active: #1d4ed8;
        --accent-text: #7aa6ff; --accent-weak: rgba(122,166,255,.14);
        --accent-weak-border: rgba(122,166,255,.30); --accent-ring: rgba(122,166,255,.45);
        --bg: #14171a; --viewer-bg: #0e1114;
        --panel: #1c2024; --surface: #1c2024; --panel-2: #23282d; --surface-2: #23282d; --surface-3: #2b3138;
        --border: #2b3138; --border-strong: #3a424b;
        --text: #e6e8eb; --text-secondary: #9aa2ad; --text-dim: #9aa2ad;
        --text-disabled: #6b7480; --text-on-accent: #ffffff;
        --toolbar-bg: #1a1e22; --toolbar-fg: #e6e8eb; --toolbar-border: #2b3138;
        --control-bg: rgba(255,255,255,.06); --control-bg-hover: rgba(255,255,255,.11);
        --control-bg-active: rgba(255,255,255,.16); --control-border: rgba(255,255,255,.13);
        --control-fg: #e6e8eb; --control-placeholder: rgba(230,232,235,.5);
        --control-active-bg: var(--accent-weak); --control-active-border: var(--accent-text);
        --mode-track-bg: rgba(255,255,255,.05); --mode-active-bg: rgba(255,255,255,.13); --mode-active-fg: #ffffff;
        --success: #4ade80; --success-bg: rgba(74,222,128,.12);
        --warning: #fbbf24; --warning-bg: rgba(251,191,36,.12);
        --danger: #f87171; --danger-bg: rgba(248,113,113,.12); --danger-hover: #ef4444; --info: var(--accent-text);
        --e1: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
        --e2: 0 2px 10px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
        --e3: 0 16px 40px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
        --shadow-page: 0 1px 3px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4); --shadow: var(--shadow-page);
    }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Toolbar ---------- */
/* Shell a due righe: riga primaria (sempre) + riga contestuale (per modalità).
   È theme-aware via token: chiara in tema chiaro, scura in tema scuro. */
.toolbar {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--toolbar-bg);
    color: var(--toolbar-fg);
    border-bottom: 1px solid var(--toolbar-border);
    box-shadow: var(--e1);          /* stacco dalla tela (prima piatta) */
    z-index: 30;
    user-select: none;
}
/* Cifre allineate: niente "salto" quando cambiano numero pagina/zoom/risultati. */
.pager, .zoom, .zoom-select, .search__count, .thumb__num, #page-input, #page-count {
    font-variant-numeric: tabular-nums;
}
/* Ogni riga è una striscia flessibile: va a capo per non sforare in orizzontale
   (senza wrap l'overflow spingeva l'app fuori schermo). */
.toolbar__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 4px;
    padding: 4px 10px;
    min-height: var(--toolbar-h);
}
/* Riga contestuale: separata da un bordo tenue theme-aware. */
.toolbar__row--contextual {
    border-top: 1px solid var(--toolbar-border);
    min-height: 44px;
}
/* I blocchi per-modalità non creano box propri: i loro gruppi restano in linea. */
.toolbar__mode { display: contents; }

/* Difesa in profondità: il workspace non deve scorrere in orizzontale
   (il viewer sì, per lo zoom alto). */
.workspace { overflow-x: hidden; }
/* I gruppi vanno a capo internamente: su smartphone stretti (<~460px) un singolo
   gruppo poteva restare più largo del viewport e sforare a destra. */
.toolbar__group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.toolbar__group--brand { gap: 8px; margin-right: 4px; }
.toolbar__spacer { flex: 1 1 auto; }
.brand { font-size: 15px; letter-spacing: .2px; }
.brand strong { color: var(--accent); }

/* ---------- B2 · Riga primaria a 3 fasce (grid start/centro/end) ----------
   Sostituisce i due .toolbar__spacer elastici (fonte del "balla" su viewport
   intermedi con flex-wrap). Colonne laterali simmetriche minmax(0,1fr) → la
   fascia centrale (mode-switch) resta centrata a prescindere dalla larghezza
   dei lati; min-width:0 fa wrappare i controlli DENTRO la fascia invece di
   allargare la colonna e scentrare. Su mobile le fasce si dissolvono
   (display:contents nel @media 767px) e torna la riga scrollabile. Tutti i
   colori restano ereditati (contenitori trasparenti) → OK light e dark. */
.toolbar__row--primary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}
.toolbar__zone {
    display: flex;
    align-items: center;
    gap: 6px 4px;
    flex-wrap: wrap;
    min-width: 0;
}
.toolbar__zone--start  { justify-content: flex-start; }
.toolbar__zone--center { justify-content: center; }
.toolbar__zone--end    { justify-content: flex-end; }

/* ---------- Switcher modalità (segmented control) ---------- */
/* Binario e segmenti sono theme-aware: chiari su chrome chiara, scuri su scura. */
.mode-switch {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--mode-track-bg); border-radius: 8px;
}
.mode-switch__btn {
    height: 28px; padding: 0 12px;
    border: none; border-radius: 6px;
    background: transparent; color: var(--toolbar-fg);
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.mode-switch__btn.is-active {
    background: var(--mode-active-bg); color: var(--mode-active-fg);
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.mode-switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    background: transparent; color: inherit;
    border: 1px solid transparent; border-radius: 6px;
    font-size: 16px; line-height: 1; cursor: pointer;
}
.icon-btn:hover { background: var(--control-bg-hover); }
.icon-btn svg { width: 20px; height: 20px; }

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px;
    background: var(--control-bg); color: var(--control-fg);
    border: 1px solid var(--control-border); border-radius: 6px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn:hover { background: var(--control-bg-hover); }
.btn svg { width: 18px; height: 18px; }
/* --accent-solid, non --accent: qui sopra ci sta del testo BIANCO, e l'accento del
   tema scuro (#2680eb) dava 3,91:1 — sotto il 4,5:1 richiesto. Scurire --accent
   avrebbe però peggiorato i link, che sullo stesso token poggiano ma su fondo scuro:
   serve un token separato per le sole superfici piene. */
.btn--primary { background: var(--accent-solid, var(--accent)); border-color: var(--accent-solid, var(--accent)); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
/* Azione guida della riga contestuale: UN solo "lead" per modalità, in accent
   tenue — evidente ma senza competere col primario blu pieno (Salva).
   Riusa i token accent-weak → regge chiaro e scuro automaticamente. */
.btn--lead { background: var(--accent-weak); border-color: var(--accent-weak-border); color: var(--accent-text); }
.btn--lead:hover { background: var(--accent-weak); border-color: var(--accent); }
.btn--lead.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.pager { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.pager input, .search input, .zoom {
    color: var(--control-fg);
}
.pager input {
    width: 46px; height: 30px; text-align: center;
    background: var(--control-bg); border: 1px solid var(--control-border);
    border-radius: 5px; font-size: 13px;
}
.zoom { min-width: 46px; text-align: center; font-size: 13px; }

/* Selettore livello di zoom (Adatta larghezza/pagina, reale, percentuali). */
.zoom-select {
    height: 30px; padding: 0 6px; max-width: 150px;
    background: var(--control-bg); color: var(--control-fg);
    border: 1px solid var(--control-border); border-radius: 5px;
    font-size: 13px; cursor: pointer;
    /* Il menu a tendina nativo segue il tema (override scuro più sotto). */
    color-scheme: light;
}
.zoom-select:hover { background: var(--control-bg-hover); }
.zoom-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
:root[data-theme="dark"] .zoom-select { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .zoom-select { color-scheme: dark; }
}

.search { display: inline-flex; align-items: center; gap: 2px; }
.search input {
    width: 180px; height: 32px; padding: 0 10px;
    background: var(--control-bg); border: 1px solid var(--control-border);
    border-radius: 6px; font-size: 13px;
}
.search input::placeholder { color: var(--control-placeholder); }
.search__count { font-size: 12px; color: var(--text-dim); min-width: 44px; text-align: center; }

/* ---------- Workspace ---------- */
.workspace { flex: 1 1 auto; display: flex; min-height: 0; }

.sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: var(--panel); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; min-height: 0;
    transition: margin-left .18s ease;
}
.sidebar.is-collapsed { margin-left: calc(-1 * var(--sidebar-w)); }
.sidebar__tabs { display: flex; border-bottom: 1px solid var(--border); }
.sidebar__tab {
    flex: 1 1 0; min-width: 0; height: 40px; padding: 0 2px;
    background: transparent; border: none;
    color: var(--text-dim); font-size: 11px; font-weight: 600; cursor: pointer;
    letter-spacing: -.2px;
    border-bottom: 2px solid transparent;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
.sidebar__panel { display: none; flex: 1; overflow-y: auto; padding: 10px; }
.sidebar__panel.is-active { display: block; }

.thumb {
    display: block; width: 100%; margin: 0 0 10px; cursor: pointer;
    border: 2px solid transparent; border-radius: 4px; background: var(--panel-2);
    position: relative;
}
.thumb.is-active { border-color: var(--accent); }
.thumb canvas { display: block; width: 100%; border-radius: 2px; }
.thumb__num {
    position: absolute; bottom: 4px; right: 4px;
    font-size: 11px; padding: 1px 6px; border-radius: 4px;
    background: rgba(0,0,0,.6); color: #fff;
}

.outline-item { display: block; width: 100%; text-align: left; background: none; border: none;
    color: var(--text); padding: 6px 8px; font-size: 13px; cursor: pointer; border-radius: 5px; }
.outline-item:hover { background: var(--panel-2); }

/* ---------- Viewer ---------- */
.viewer {
    flex: 1 1 auto; overflow: auto; background: var(--viewer-bg);
    position: relative; outline: none;
}
.pages { padding: 24px 0 60px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.page-wrap { position: relative; box-shadow: var(--shadow); background: #fff; }
.page-wrap canvas { display: block; }
.page-wrap .textLayer {
    position: absolute; inset: 0; overflow: hidden; line-height: 1;
    opacity: 1; mix-blend-mode: multiply;
}
.page-wrap .textLayer span { position: absolute; color: transparent; white-space: pre; cursor: text; transform-origin: 0 0; }
.page-wrap .textLayer ::selection { background: rgba(43,108,255,.35); }
.page-wrap .textLayer .highlight { background: rgba(255,214,0,.45); border-radius: 2px; }
.page-wrap .textLayer .highlight.current { background: rgba(255,145,0,.6); }

/* ---------- Dropzone (empty state) ---------- */
.dropzone {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.dropzone.is-dragover .dropzone__inner { border-color: var(--accent); background: rgba(43,108,255,.08); }
.dropzone__inner {
    text-align: center; color: var(--text-dim); border: 2px dashed var(--border);
    border-radius: 14px; padding: 48px 56px; max-width: 460px;
}
.dropzone__icon { width: 56px; height: 56px; margin-bottom: 12px; color: var(--text-dim); }
.dropzone h2 { font-size: 20px; margin: 0 0 6px; font-weight: 700; color: var(--text); }
.dropzone p { margin: 0; color: var(--text-dim); font-size: 14px; }
.link { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* ---------- A11y: contenuto per soli screen reader + skip-link ---------- */
/* Nasconde visivamente ma resta nel flusso per lettori di schermo (pattern standard). */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
/* Skip-link: fuori vista finché non riceve focus, poi scende in alto a sinistra.
   Theme-aware via token (accento + testo-su-accento), regge chiaro e scuro. */
.skip-link {
    position: fixed; top: 8px; left: 8px; z-index: 100;
    transform: translateY(-160%);
    background: var(--accent); color: var(--text-on-accent);
    padding: 8px 14px; border-radius: var(--r-sm);
    font-size: 13px; font-weight: 600; text-decoration: none;
    box-shadow: var(--e2);
    transition: transform var(--dur, 150ms) var(--ease, ease);
}
.skip-link:focus, .skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--toolbar-bg); outline-offset: 2px;
}

/* ---------- Overlay / spinner ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.overlay__box { background: var(--panel); color: var(--text); padding: 20px 28px; border-radius: var(--radius); display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow); }
.spinner { width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--panel); color: var(--text); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; max-width: 340px; animation: slide-in .2s ease; }
.toast--error { border-left-color: var(--danger); }
.toast--success { border-left-color: #16a34a; }
@keyframes slide-in { from { transform: translateX(20px); opacity: 0; } }

[hidden] { display: none !important; }

/* ---------- Controlli proprietà annotazione (spessore/opacità/riempimento) ---------- */
.annot-ctl-sep {
    width: 1px; align-self: stretch; margin: 4px 2px;
    background: var(--toolbar-border);
}
.annot-ctl {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--toolbar-fg);
}
.annot-ctl > svg { width: 18px; height: 18px; opacity: .7; flex: 0 0 auto; }
.annot-select {
    height: 28px; padding: 0 4px; border-radius: 6px;
    border: 1px solid var(--control-border, var(--toolbar-border));
    background: var(--control-bg, transparent); color: var(--toolbar-fg);
    font-size: 12px; cursor: pointer;
}
.annot-range { width: 72px; accent-color: var(--accent); cursor: pointer; }
#annot-fill-on { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.annot-color[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------- Design Fase A · Step 2: focus, motion, stati, touch ---------- */
:root {
    --dur-fast: 90ms; --dur: 150ms; --dur-slow: 240ms;
    --ease: cubic-bezier(.2,.6,.3,1);
}

/* Transizioni + feedback tattile su bottoni (prima: nessuna). */
.btn, .icon-btn, .mode-switch__btn, .annot-tool, .sidebar__tab {
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn:active, .icon-btn:active, .annot-tool:active { transform: scale(.97); }

/* Focus ring UNICO accent (doppio anello) su tutti i controlli interattivi.
   Sostituisce gli outline sparsi; box-shadow separa il ring anche su fondo pieno. */
.btn:focus-visible,
.icon-btn:focus-visible,
.mode-switch__btn:focus-visible,
.annot-tool:focus-visible,
.sidebar__tab:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--toolbar-bg), 0 0 0 4px var(--accent-ring);
    border-radius: var(--r-sm);
}

/* Tool annotazione ATTIVO: icona in accent (prima: attivo ≈ hover, specie in dark). */
.annot-tool.is-active {
    background: var(--accent-weak);
    border-color: var(--accent-weak-border);
    color: var(--accent-text);
}

/* Target touch ≥44px + niente zoom iOS al focus (input ≥16px) su dispositivi touch.
   ⚠️ La regola DICEVA «≥44px» e ne dava 40: il commento era giusto, il valore no.
   Misurato su tablet (dove il tocco c'è ma nessuna soglia di dimensione scatta):
   16 pulsanti su 20 della barra strumenti sotto il bersaglio. Il criterio non è
   quanto è grande lo schermo — è che a usarlo sia un DITO. */
@media (pointer: coarse) {
    .btn, .icon-btn, .mode-switch__btn, .annot-tool { min-height: 44px; }
    .icon-btn { min-width: 44px; }
    input, select, textarea { font-size: 16px; }
}

/* Rispetta la preferenza di movimento ridotto (prima: assente). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Design Fase A · Step 5: divisori hairline tra gruppi logici della riga
   contestuale (Moduli/Pagine avevano gruppi appiccicati senza separazione). */
.toolbar__mode > .toolbar__group + .toolbar__group {
    margin-left: var(--sp-4);
    padding-left: var(--sp-4);
    border-left: 1px solid var(--toolbar-border);
}

/* ---------- Responsive ---------- */
/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║ MAPPA DELLE SOGLIE — leggere questa prima di aggiungerne una nuova.      ║
   ╚══════════════════════════════════════════════════════════════════════════╝
   Ci sono DUE domande diverse, e vanno tenute separate perché rispondono a due
   cose diverse. Confonderle è ciò che ha lasciato scoperto il tablet.

   1. «QUANTO SPAZIO HO?» → soglie di DIMENSIONE, decidono il LAYOUT:
      · (max-width: 767px)                     telefono: le modalità su una riga
                                               propria a tutta larghezza, riga 1
                                               come striscia scorrevole
      · (max-height: 500px)                    schermo BASSO (telefono coricato):
                                               la riga primaria non va mai a capo
      · (max-height:500) and (max-width:767)   basso E stretto: modalità in riga
      · (min-width: 768px)                     c'è il RAIL verticale (adobe-theme):
                                               guida e barra devono scansarlo
      · (max-width: 360px)                     rifinitura tipografica

   2. «CHI LO STA USANDO?» → soglia di PUNTATORE, decide il BERSAGLIO:
      · (pointer: coarse)                      un DITO: 44px minimo, barra formato
                                               compatta, maniglia inerte finché il
                                               blocco non è selezionato

   ⚠️ IL TABLET IN VERTICALE È LA PROVA CHE SERVONO ENTRAMBE: sopra i 768px e
   alto, nessuna soglia di dimensione scattava, quindi prendeva le regole desktop
   pur essendo un dispositivo a tocco — barra formato larga 856px su un viewport
   da 768 (fuori schermo), 8 controlli su 11 e 16 pulsanti su 20 sotto il
   bersaglio. Una soglia di dimensione NON può indovinare se c'è un dito.

   ⚠️ E ATTENZIONE ALL'ORDINE, non solo alla specificità: dentro lo stesso file
   vince l'ultima regola a pari specificità (il blocco che scansa il rail sta in
   coda a content-edit.css apposta), e fra file vince quello caricato dopo —
   adobe-theme.css viene per ultimo e ha già ucciso in silenzio la regola che
   nascondeva il brand su mobile. Nel dubbio, alzare la specificità di proposito
   e dire perché. */

/* Tablet: sidebar in overlay sopra il viewer, campo ricerca più stretto. */
@media (max-width: 820px) {
    .sidebar { position: absolute; z-index: 25; height: calc(100% - var(--toolbar-h)); box-shadow: var(--shadow); }
    .toolbar__group--search .search input { width: 120px; }
}

/* Smartphone (<768px): documento sempre prioritario.
   - Toolbar a UNA riga scorrevole in orizzontale (mai a capo → non riempie lo schermo).
   - Sidebar come drawer off-canvas con backdrop. */
@media (max-width: 767px) {
    /* ⚠️ La specificità conta: adobe-theme.css carica DOPO questo file e dichiara
       `.brand { display: inline-flex }`. A pari specificità (0,1,0) vinceva l'ultimo
       → questa regola era MORTA e il brand si mangiava 179px della risorsa più
       scarsa che c'è. `.toolbar .brand` (0,2,0) la riporta in vita. */
    .toolbar .brand { display: none; }

    .toolbar__row {
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .toolbar__group, .mode-switch { flex: 0 0 auto; }
    .toolbar__spacer { display: none; }        /* niente spazi elastici nello scroll */
    .toolbar__group--search .search input { width: 120px; }

    /* ═══ M2 · LO SWITCHER MODALITÀ HA UNA RIGA SUA ═══════════════════════════
       Il modello precedente (M1) teneva tutto in UNA riga scorrevole larga 1545px
       con il gruppo Salva `sticky` ancorato a destra. MISURATO col hit-test
       (elementFromPoint al centro di ogni pulsante): a 390px solo 2 modalità su 5
       ricevevano il tocco, a 360px NESSUNA — Salva ci stava sopra e «Pagine»
       finiva addirittura oltre il viewport (x=410). Non era una taratura da
       correggere: l'aritmetica «i 4 bottoni entrano» dei commenti M1 è nata con 4
       modalità e si è rotta quando è arrivata «Testo» (5ª, commit 8365b72).
       Nessun numero regge un contenuto che cresce, quindi si toglie il numero:
       - riga 1 = fascia sinistra come STRISCIA SCORREVOLE (pager/zoom/ricerca) +
         firma + Salva in posizione NORMALE (niente sticky → niente sovrapposizioni:
         lo scroll è confinato dentro la fascia, Salva non può scorrere via);
       - riga 2 = le modalità a tutta larghezza, un segmento per pulsante.
       Costa ~46px di altezza, che la barra formato compattata restituisce. */
    .toolbar__row--primary {
        display: flex; position: relative;
        flex-wrap: wrap; overflow: visible;     /* la riga non scorre più: scorre la fascia */
        row-gap: 4px;
    }
    .toolbar__zone--start {
        display: flex; align-items: center; gap: 6px 4px;
        flex: 1 1 0; min-width: 0; order: 1;
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .toolbar__zone--start::-webkit-scrollbar { display: none; }
    /* stesso motivo della striscia della barra formato: il bordo sfuma, così il
       controllo tagliato dice «scorri» invece di sembrare rotto */
    .toolbar__zone--start {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
    }
    .toolbar__zone--end { display: contents; }
    .toolbar__group--sign { order: 2; }
    /* Solo icona: la striscia respira e non taglia le etichette a metà parola.
       «Apri» resta scopribile — la dropzone dello stato vuoto dice «Trascina qui
       un PDF · oppure scegli un file», che è l'ingresso vero per chi arriva. */
    .toolbar__group--sign #btn-sign span,
    #btn-open span { display: none; }
    .toolbar__group--save { order: 3; position: static; box-shadow: none; }
    .toolbar__group--save #btn-theme { display: none; }       /* il tema segue prefers-color-scheme */

    /* Riga 2: le modalità, a tutta larghezza. `flex: 1 0 100%` forza l'a-capo
       qualunque cosa ci sia in riga 1 — nessun calcolo di larghezze da tenere
       aggiornato quando si aggiungerà la 6ª modalità. */
    .toolbar__zone--center { display: flex; flex: 1 0 100%; order: 9; }
    .mode-switch { width: 100%; }
    .mode-switch__btn {
        flex: 1 1 0; min-width: 0; padding: 0 6px;
        min-height: 44px;                       /* bersaglio del dito (HIG/Material) */
    }

    /* Drawer off-canvas: scorre con transform (l'override margin-left evita
       conflitti con la regola desktop .is-collapsed{margin-left:-w}). */
    .sidebar {
        position: fixed; top: auto; left: 0; z-index: 40;
        height: calc(100% - var(--toolbar-h)); width: min(84vw, var(--sidebar-w));
        flex-basis: auto; margin-left: 0;
        transform: translateX(0); transition: transform .2s ease;
        box-shadow: var(--shadow);
    }
    .sidebar.is-collapsed { transform: translateX(-100%); margin-left: 0; }

    /* Backdrop: [hidden] di default (regola globale), appare solo su mobile. */
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.4); }
}

/* ═══ M3 · SCHERMI BASSI (il telefono coricato) ═══════════════════════════════
   MISURATO a 844×390 e 667×360. Le soglie erano tutte sulla LARGHEZZA, ma un
   telefono coricato è LARGO e BASSO: a 844px valevano le regole desktop e la
   riga primaria andava a capo su TRE righe — 186px di barra su uno schermo alto
   390, cioè il 48% dello spazio, con 113px lasciati al documento (71% di cromo
   contando la barra formato). Qui il vincolo non è la larghezza, è l'altezza:
   ogni riga in più costa il 13% del documento.
   Cura: sugli schermi bassi la riga primaria NON va mai a capo — scorre. */
/* ⚠️ VALE ANCHE PER IL TABLET IN VERTICALE, che è la fascia che nessuna soglia
   copriva: sopra i 768px e alto, prendeva le regole desktop pur essendo un
   dispositivo a tocco — barra strumenti a 187px perché la riga andava a capo.
   Da qui il secondo ramo `(pointer: coarse) and (min-width: 768px)`: sotto i 768
   ci pensa già il blocco mobile. */
@media (max-height: 500px), (pointer: coarse) and (min-width: 768px) {
    .toolbar .brand { display: none; }
    /* ⚠️ Sopra i 768px la riga primaria è una GRID (fasce start/centro/end): un
       `flex-wrap` lì dentro è INERTE — ci sono cascato, la barra restava alta
       171px. Va riportata a flex perché la fascia possa davvero restringersi e
       scorrere. E non basta: i singoli GRUPPI andavano a capo al loro interno
       (zoom 127×162, pager 65×118 misurati) → anche loro nowrap. */
    .toolbar__row--primary { display: flex; flex-wrap: nowrap; }
    .toolbar__group { flex-wrap: nowrap; flex: 0 0 auto; }
    .toolbar__zone--start {
        display: flex; align-items: center; gap: 6px 4px;
        flex: 1 1 0; min-width: 0;
        flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
    }
    .toolbar__zone--start::-webkit-scrollbar { display: none; }
    #btn-open span, .toolbar__group--sign #btn-sign span { display: none; }
}

/* Basso E stretto (667×360): le modalità tornano IN RIGA invece di prendersene
   una tutta loro — su uno schermo alto 360px quella riga è il 14%, e in
   orizzontale la larghezza per starci in riga c'è (5 segmenti ≈ 355px + Salva
   137px stanno in 667). Sopra i 768px NON si tocca: lì comanda il rail verticale
   di adobe-theme.css, che di altezza non ne costa affatto — ed è la scelta
   giusta proprio su uno schermo basso. La condizione è esplicita invece di
   affidarsi all'ordine di caricamento dei fogli: è così che era morta la regola
   del brand. */
/* Sul rail (schermo basso ma largo) i segmenti misuravano 43px: appena sotto il
   bersaglio del dito. ⚠️ Serve `.mode-switch .mode-switch__btn` (0,2,0) perché
   adobe-theme.css carica DOPO e dichiara `min-height: 0` sul rail a pari
   specificità — è la stessa trappola che aveva ucciso la regola del brand. */
@media (max-height: 500px) and (min-width: 768px),
       (pointer: coarse) and (min-width: 768px) {
    .mode-switch .mode-switch__btn { min-height: 44px; }
}

@media (max-height: 500px) and (max-width: 767px) {
    .toolbar__zone--center { display: contents; }
    .mode-switch { width: auto; flex: 0 0 auto; order: 2; }
    .mode-switch__btn { flex: 0 0 auto; padding: 0 8px; }
    .toolbar__group--sign { order: 3; }
    .toolbar__group--save { order: 4; }
}

/* Telefoni piccolissimi (≤360px, es. iPhone SE 1ª gen / Fold chiuso). Da M2 lo
   switcher ha una riga sua e i segmenti si dividono la larghezza in parti uguali
   (flex: 1 1 0), quindi non c'è più niente da far «entrare» accanto a Salva: qui
   resta solo la rifinitura tipografica perché a 320px cinque etichette in 64px
   l'una vanno strette. L'altezza NON si tocca: è il bersaglio del dito. */
@media (max-width: 360px) {
    .mode-switch { padding: 2px; gap: 1px; }
    .mode-switch__btn { padding: 0 2px; font-size: 11px; }
}

/* Onda0: CTA secondaria "crea PDF da immagini" nella dropzone */
.dropzone__alt { font-size: 13px; color: var(--text-secondary, #616872); margin-top: 6px; }

/* Sigillo di riservatezza. È l'argomento che nessun concorrente può copiare — tutti
   caricano i file su un server e possono solo promettere di cancellarli — quindi
   merita peso visivo, non una subordinata in grigio. */
.dropzone__privacy {
    max-width: 46ch;
    margin: 14px auto 0;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
    color: var(--text-secondary, #616872);
    background: var(--surface-2, rgba(127, 127, 127, .07));
    border: 1px solid var(--border, rgba(127, 127, 127, .28));
    border-radius: var(--r-md, 6px);
}
.dropzone__privacy strong { color: var(--text, inherit); }
.dropzone__note { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.dropzone__verify {
    max-width: 46ch;
    margin: 10px auto 0;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    text-align: left;
    color: var(--text-secondary, #616872);
    border-left: 3px solid var(--accent);
    background: var(--surface-2, rgba(127, 127, 127, .05));
    border-radius: 0 var(--r-sm, 4px) var(--r-sm, 4px) 0;
}
.dropzone__verify p + p { margin-top: 8px; }
.dropzone__verify kbd {
    font: 600 11px/1 ui-monospace, monospace;
    padding: 2px 5px;
    border: 1px solid var(--border, rgba(127, 127, 127, .4));
    border-radius: 3px;
}