/* content-edit.css — UI edit del contenuto (M6). */

body.is-content-editing .page-wrap { position: relative; }
/* disattiva gli altri layer sopra la pagina in modifica */
body.is-content-editing .annot-layer,
body.is-content-editing .fields-layer,
body.is-content-editing .link-layer { pointer-events: none !important; }

/* Host overlay: copre il page-wrap; il canvas mostra il render LIVE del motore
   (sopra il canvas pdf.js), il box-layer cattura le interazioni. */
.cedit-host { position: absolute; inset: 0; z-index: 45; }
.cedit-canvas { position: absolute; left: 0; top: 0; display: block; }
.cedit-boxes { position: absolute; inset: 0; }

/* riquadri oggetto selezionabili (immagini, tracciati, fondini, bordi di tabella)
   ⚠️ INVISIBILI A RIPOSO, e sta sotto il testo (z-index). Prima era il contrario: questi
   avevano il bordo blu SEMPRE acceso e i blocchi di testo erano trasparenti → su una
   pagina reale si vedevano 144 riquadri blu, tutti su elementi grafici, e NESSUNO sul
   testo, mentre la guida invita a «cliccare un riquadro per riscriverne il testo».
   L'evidenza indicava esattamente ciò che non si può modificare. */
.cedit-box {
    position: absolute;
    z-index: 1;
    border: 1px solid transparent;
    box-sizing: border-box;
    cursor: move;
    transition: border-color .1s ease, background .1s ease;
}
.cedit-box:hover { border-color: var(--accent, #2563eb); background: rgba(37, 99, 235, .08); }
.cedit-box.is-selected {
    z-index: 3;                      /* chi è selezionato sta davanti: le sue maniglie sono raggiungibili */
    border: 1.5px solid var(--accent, #2563eb);
    background: rgba(37, 99, 235, .12);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
/* TESTO: affordance chiara di editabilità (doppio-click per riscrivere). */
.cedit-box[data-type="1"] { border-style: solid; cursor: text; }
.cedit-box[data-type="1"]:hover {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, .10);
    box-shadow: inset 0 0 0 1px var(--accent, #2563eb);
}
/* piccolo badge "matita" in alto a destra del box testo in hover/selezione */
.cedit-box[data-type="1"]:hover::after,
.cedit-box[data-type="1"].is-selected::after {
    content: "✎";
    position: absolute; top: -9px; right: -9px;
    width: 18px; height: 18px; line-height: 18px; text-align: center;
    font-size: 12px; color: #fff; background: var(--accent, #2563eb);
    border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none;
}
.cedit-box[data-type="3"] { border-style: dashed; }     /* immagine */

/* maniglie di resize (immagine selezionata) */
.cedit-handle {
    position: absolute; width: 12px; height: 12px; z-index: 6;
    background: #fff; border: 1.5px solid var(--accent, #2563eb); border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.3); touch-action: none;
}
.cedit-handle--nw { left: -7px; top: -7px; cursor: nwse-resize; }
.cedit-handle--ne { right: -7px; top: -7px; cursor: nesw-resize; }
.cedit-handle--sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.cedit-handle--se { right: -7px; bottom: -7px; cursor: nwse-resize; }

/* cursore "aggiungi testo" */
body.cedit-adding .cedit-boxes { cursor: text; }
body.cedit-adding .cedit-box { pointer-events: none; }

/* modalità "Riscrivi paragrafo": riquadri di blocco cliccabili */
.cedit-para {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    /* ⚠️ SOPRA i riquadri grafici (z-index): fondini e bordi di tabella stavano davanti e
       RUBAVANO IL CLICK — misurato: 616 blocchi di testo su 1109, il 55,5%, avevano il
       centro coperto e cliccandoli si selezionava un'immagine invece di aprire l'editor.
       ⚠️ E APPENA VISIBILE A RIPOSO, non più trasparente. Il timore era giusto (i riquadri
       sempre accesi di Acrobat 2024 riempiono di tratteggi una pagina fitta), ma la cura
       era peggiore del male: nascondendo il testo restavano in vista solo i riquadri
       grafici, cioè le uniche cose NON modificabili. Qui il contorno è tenue quanto basta
       a dire «di qui si può», e si accende sotto il puntatore. */
    border: 1.5px dashed rgba(37, 99, 235, .22);
    border-radius: 4px;
    cursor: text;
    transition: border-color .12s ease, background-color .12s ease;
}
.cedit-para:hover,
.cedit-para.is-selected {
    border-color: var(--accent, #2563eb);
    background: rgba(37, 99, 235, .12);
}
/* durante il trascinamento il riquadro segue il mouse: si sposta solo l'ANTEPRIMA,
   il documento viene toccato una volta sola al rilascio */
.cedit-para.is-dragging { background: rgba(37, 99, 235, .2); cursor: grabbing; }
.cedit-para.is-dragging .cedit-para__tag { opacity: 0; }
/* ETICHETTA = maniglia di SPOSTAMENTO (il corpo del blocco è area del cursore).
   ⚠️ ANCORATA SOPRA il blocco (`bottom:100%`), MAI sopra il testo: se scendesse nel corpo
   ruberebbe il click destinato a posare il caret — misurato su blocchi bassi (una riga ~11px)
   dove un'etichetta a `top:-11px` copriva il centro del blocco e il click non posava il caret. */
/* ⚠️ `pointer-events` LEGATO alla visibilità (hover/selezione), non sempre attivo. Le pillole
   stanno SOPRA il proprio blocco (nel bianco fra un blocco e quello sovrastante); se restassero
   cliccabili anche INVISIBILI (a riposo) ruberebbero il click al blocco di sopra quando i blocchi
   sono bassi (~11px) e impilati stretti — misurato. A riposo `pointer-events:none` → il click
   passa al testo sotto; diventano vive solo quando il blocco è sotto il puntatore o selezionato. */
.cedit-para__tag {
    position: absolute; bottom: 100%; left: 6px; margin-bottom: 2px;
    font: 600 10px/1.5 system-ui, sans-serif; letter-spacing: .02em;
    padding: 1px 6px; border-radius: 6px;
    background: var(--accent, #2563eb); color: #fff;
    opacity: 0; transition: opacity .12s ease;
    pointer-events: none; cursor: move; touch-action: none; user-select: none;
}
.cedit-para:hover .cedit-para__tag,
.cedit-para.is-selected .cedit-para__tag { opacity: 1; pointer-events: auto; }
/* RIPIEGO «riscrivi blocco»: piccolo pulsante accanto all'etichetta, anch'esso SOPRA il blocco. */
.cedit-para__rewrite {
    position: absolute; bottom: 100%; left: 58px; margin-bottom: 2px;
    width: 20px; height: 16px; padding: 0; line-height: 14px;
    font-size: 11px; text-align: center;
    border: 0; border-radius: 6px;
    background: var(--accent, #2563eb); color: #fff;
    opacity: 0; transition: opacity .12s ease;
    pointer-events: none; cursor: pointer;
}
.cedit-para:hover .cedit-para__rewrite,
.cedit-para.is-selected .cedit-para__rewrite { opacity: 1; pointer-events: auto; }
.cedit-para__rewrite:hover { filter: brightness(1.12); }

/* Maniglia di LARGHEZZA sul bordo destro del paragrafo: trascinandola il testo si
   ri-impagina nei nuovi confini (il corpo del carattere non cambia). Compare al passaggio
   del mouse per non aggiungere rumore visivo su pagine fitte. */
.cedit-para__grip {
    position: absolute;
    top: 0;
    right: -4px;
    width: 9px;
    height: 100%;
    cursor: ew-resize;
    opacity: 0;
    transition: opacity .12s ease;
}
.cedit-para__grip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    width: 3px;
    height: 26px;
    max-height: 100%;
    transform: translateY(-50%);
    border-radius: 2px;
    background: var(--accent, #2563eb);
}
.cedit-para:hover .cedit-para__grip,
.cedit-para__grip:hover { opacity: 1; }

/* ⚠️ COL DITO LA MANIGLIA ERA UNA TRAPPOLA INVISIBILE. Resta `opacity: 0` a
   riposo ma conserva `pointer-events: auto`: su desktop l'hover la rivela prima
   che tu la afferri, col tocco l'hover NON ESISTE, quindi è una striscia
   invisibile larga 9px che intercetta il gesto. Su un blocco largo 60px è il 15%
   del bersaglio, e su blocchi alti 6-7px ci si finisce sopra continuamente:
   misurato, 1 tocco su 6 partiva come ri-impaginazione invece di posare il
   cursore. È lo stesso difetto C1 di `9a12282` (le pillole che rubavano il
   click), che allora fu corretto sulle pillole ma non qui.
   Sul puntatore GROSSOLANO la maniglia diventa inerte finché il blocco non è
   SELEZIONATO: primo tocco = scrivo, secondo gesto = ri-impagino. Su mouse non
   cambia nulla (nessuna regola desktop toccata). */
@media (pointer: coarse) {
    .cedit-para__grip { pointer-events: none; }
    .cedit-para.is-selected .cedit-para__grip { opacity: 1; pointer-events: auto; }
}

/* editor inline di modifica/aggiunta testo (textarea multiriga auto-crescente) */
.cedit-textinput {
    position: absolute;
    z-index: 10;
    font: 14px/1.25 system-ui, sans-serif;
    padding: 2px 5px;
    border: 1.5px solid var(--accent, #2563eb);
    border-radius: 4px;
    background: #fff;
    color: #111;
    box-shadow: var(--e2, 0 2px 8px rgba(0,0,0,.15));
    resize: none; overflow: hidden; white-space: pre-wrap;
    max-width: 90%;
}
.cedit-textinput--new { border-style: dashed; }
/* editor di BLOCCO (riscrivi paragrafo): multiriga, va a capo da solo */
.cedit-textinput--block { white-space: pre-wrap; overflow: auto; max-width: 96%; }

/* GUIDA all'ingresso: come modificare il testo (auto-nascosta). */
.cedit-guide {
    position: fixed; left: 50%; top: 72px; transform: translate(-50%, -8px);
    z-index: 4002; display: flex; align-items: center; gap: 8px;
    max-width: min(92vw, 760px);
    padding: 9px 12px 9px 16px;
    background: var(--panel, #fff); color: var(--text, #1a1d21);
    border: 1px solid var(--accent-weak-border, #bcd4fb); border-left: 3px solid var(--accent, #2563eb);
    border-radius: 10px; box-shadow: var(--e3, 0 12px 32px rgba(16,24,40,.16));
    font-size: 12.5px; opacity: 0; transition: opacity .18s ease, transform .18s ease;
}
.cedit-guide.is-open { opacity: 1; transform: translate(-50%, 0); }
.cedit-guide__step { color: var(--text-secondary, #616872); }
.cedit-guide__step b { color: var(--text, #1a1d21); font-weight: 600; }
.cedit-guide__dot { color: var(--border, #dcdfe4); }
.cedit-guide__close {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--text-secondary, #616872); padding: 0 2px; margin-left: 4px;
}
.cedit-guide__close:hover { color: var(--text, #1a1d21); }
/* Su telefono la guida diventava una CARTA in mezzo al documento: misurata al
   12,7% dello schermo a 390px e al 18,6% a 360px, copriva 6 blocchi su 6 e — il
   danno vero — RUBAVA IL TOCCO a 3 su 6 (elementFromPoint al centro del blocco
   restituiva la guida). È lo stesso schema del difetto C1 di `9a12282`: un
   sovrapposto che intercetta i gesti destinati a ciò che sta sotto.
   Cura: `pointer-events: none` sul pannello (la ✕ resta toccabile) → non può più
   rubare un gesto nemmeno finché è visibile; e va SOTTO la barra strumenti,
   a tutta larghezza, invece che al centro del foglio. */
/* ⚠️ ANCHE L'ALTEZZA, NON SOLO LA LARGHEZZA: un telefono coricato è LARGO e BASSO
   (844×390), quindi una soglia sulla sola larghezza lo tratta da desktop. */
@media (max-width: 640px), (max-height: 500px), (pointer: coarse) {
    /* Il documento le fa POSTO invece di finirci sotto: `pointer-events: none`
       aveva tolto il furto dei gesti, ma restavano 2 blocchi su 6 nascosti per i
       9s prima dell'auto-chiusura. L'ingombro lo misura showGuide() sulla guida
       VERA (il testo va a capo diversamente a ogni larghezza) e la transizione fa
       sì che alla chiusura il documento si richiuda invece di scattare.
       Su desktop non si applica: lì la striscia sta nel margine e lo spazio abbonda. */
    body.cedit-guide-open .viewer {
        padding-top: var(--cedit-guide-pad, 0px);
    }
    .viewer { transition: padding-top .18s ease; }

    .cedit-guide {
        left: 8px; right: 8px; max-width: none;
        /* l'offset lo misura showGuide() sulla barra VERA: la sua altezza cambia
           con la modalità (riga contestuale) e con la larghezza. Un numero cablato
           qui è esattamente ciò che ha rotto la barra modalità — vedi M2. */
        top: var(--cedit-guide-top, 60px);
        transform: translateY(-8px);
        flex-wrap: wrap; gap: 2px 6px;
        font-size: 12px; line-height: 1.35; padding: 8px 10px;
        pointer-events: none;
    }
    .cedit-guide.is-open { transform: translateY(0); }
    .cedit-guide__dot { display: none; }
    .cedit-guide__step { flex: 1 0 100%; }
    .cedit-guide__close {
        pointer-events: auto;
        position: absolute; top: 0; right: 0;
        min-width: 44px; min-height: 44px;   /* bersaglio del dito */
    }
}


/* barra azioni (in basso, come le altre) */
.cedit-bar {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 4001; display: none; align-items: center; gap: 8px;
    padding: 9px 14px;
    background: var(--panel, #fff); color: var(--text, #1a1d21);
    border: 1px solid var(--border, #dcdfe4); border-radius: 12px;
    box-shadow: var(--e3, 0 12px 32px rgba(16,24,40,.16));
}
.cedit-bar.is-open { display: flex; }
.cedit-bar__title { font-size: 13px; font-weight: 600; color: var(--text-secondary, #616872); margin-right: 4px; }
.cedit-bar__sep { width: 1px; height: 22px; background: var(--border, #dcdfe4); margin: 0 2px; }

.cedit-btn {
    appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    padding: 7px 12px; border-radius: 9px;
    border: 1px solid var(--border, #dcdfe4);
    background: var(--control-bg, #f0f2f5); color: var(--text, #1a1d21);
}
.cedit-btn:hover { background: var(--control-bg-hover, #e6e9ee); }
.cedit-btn:disabled { opacity: .5; cursor: not-allowed; }
.cedit-btn.is-active { background: var(--accent-weak, #eaf1fe); border-color: var(--accent, #2563eb); color: var(--accent-text, #2563eb); }
.cedit-btn--primary { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.cedit-btn--primary:hover:not(:disabled) { background: var(--accent-hover, #1d4ed8); }

/* gruppo formato testo (Font / Dimensione / G / C / Colore) */
.cedit-fmt { display: inline-flex; align-items: center; gap: 5px; }
.cedit-sel, .cedit-num {
    appearance: none; font: inherit; font-size: 13px; font-weight: 600;
    height: 32px; padding: 0 6px; border-radius: 8px;
    border: 1px solid var(--border, #dcdfe4);
    background: var(--control-bg, #f0f2f5); color: var(--text, #1a1d21);
}
.cedit-num { width: 52px; text-align: center; padding: 0 4px; }
.cedit-sel:disabled, .cedit-num:disabled { opacity: .45; cursor: not-allowed; }
.cedit-btn--icon { width: 34px; padding: 7px 0; text-align: center; }
.cedit-btn--icon b { font-weight: 800; }
.cedit-btn--icon i { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.cedit-color {
    appearance: none; -webkit-appearance: none; width: 34px; height: 32px;
    padding: 2px; border: 1px solid var(--border, #dcdfe4); border-radius: 8px;
    background: var(--control-bg, #f0f2f5); cursor: pointer;
}
.cedit-color::-webkit-color-swatch-wrapper { padding: 0; }
.cedit-color::-webkit-color-swatch { border: none; border-radius: 4px; }

/* I due contenitori sono inerti su desktop: la barra resta la riga piatta di
   sempre (nessuna regola desktop li nomina). Servono solo alla media query qui
   sotto. */
.cedit-bar__scroll, .cedit-bar__actions { display: contents; }

/* Su telefono la barra andava a capo su 3-4 righe: misurata 164px = 18,6% dello
   schermo a 390px e 206px = 29,5% a 360px, con 11 controlli su 11 sotto il
   bersaglio minimo del dito (32-34px contro 44). Le due cose tirano in direzioni
   opposte — controlli più grandi, barra più bassa — e si conciliano in un modo
   solo: UNA riga, con ciò che eccede che SCORRE.
   ⚠️ Non si usa `position: sticky` per tenere ferme le azioni: è esattamente il
   meccanismo che rendeva intoccabili le modalità nell'header (vedi M2 in app.css).
   Qui la striscia scorrevole e l'isola delle azioni sono due riquadri affiancati:
   niente si sovrappone per costruzione. */
/* ⚠️ LA SOGLIA ERA SOLO `max-width: 480px` E LASCIAVA SCOPERTI DUE CASI VERI,
   misurati: a 667×360 (telefono coricato) la barra restava quella desktop —
   larga 856px su uno schermo da 667, alta 90px, con 8 controlli su 11 sotto il
   bersaglio del dito; e a 844×390 idem. Il vincolo non è la larghezza ma «sto
   usando un dito su uno schermo piccolo O basso». */
@media (max-width: 767px), (max-height: 500px), (pointer: coarse) {
    .cedit-bar {
        left: 8px; right: 8px; transform: none; bottom: 8px;
        flex-wrap: nowrap; gap: 6px; padding: 8px;
    }
    .cedit-bar__title { display: none; }        /* decorazione: lo schermo serve altrove */

    .cedit-bar__scroll {
        display: flex; align-items: center; gap: 6px;
        flex: 1 1 0; min-width: 0;
        overflow-x: auto; overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cedit-bar__scroll::-webkit-scrollbar { display: none; }
    /* il controllo tagliato dal bordo deve leggersi come «c'è dell'altro, scorri»
       e non come un difetto di resa (la maschera non tocca il hit-testing) */
    .cedit-bar__scroll {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    }
    .cedit-bar__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

    /* bersaglio del dito: 44px sul lato che conta */
    .cedit-bar .cedit-btn, .cedit-bar .cedit-sel, .cedit-bar .cedit-num { min-height: 44px; }
    .cedit-bar .cedit-btn { flex: 0 0 auto; }
    .cedit-bar .cedit-btn--icon { width: 44px; padding: 0; }
    .cedit-bar .cedit-color { width: 44px; height: 44px; }
    .cedit-bar .cedit-num { width: 58px; }
}

/* ═══ CURSORE (strada B, passo 2b): caret vero sopra la pagina renderizzata ═══ */
.cedit-caret {
    position: absolute;
    width: 2px;
    background: #111;
    z-index: 8;
    pointer-events: none;
    box-shadow: 0 0 0 .5px rgba(255, 255, 255, .6);   /* leggibile anche sopra testo scuro */
}
.cedit-caret.is-blink { animation: cedit-caret-blink 1.06s steps(1) infinite; }
@keyframes cedit-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* input nascosto che tiene il focus e cattura i tasti (fuori vista) */
.cedit-caret-input {
    position: absolute; left: -9999px; top: 0; width: 1px; height: 1px;
    opacity: 0; border: 0; padding: 0; resize: none; overflow: hidden;
}
/* il cursore è il default: nel corpo del blocco il puntatore è a I-beam. Etichetta (sposta),
   pulsante ▤ (riscrivi) e maniglia destra (ri-impagina) restano visibili all'hover/selezione. */
body.cedit-caret-mode .cedit-boxes { cursor: text; }
/* selezione del testo col cursore (2c/2d): un rettangolo translucido per ogni riga */
.cedit-sel-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.cedit-sel-rect { position: absolute; background: rgba(37, 99, 235, .28); border-radius: 1px; }

/* ═══ SOSTITUZIONE FONT: chip d'offerta + pannello con anteprima ═══ */
/* chip sopra il blocco bloccato da glifi mancanti */
.cedit-fontsub-chip {
    position: absolute; z-index: 9;
    font: 600 11px/1.4 system-ui, sans-serif;
    padding: 3px 9px; border: 0; border-radius: 7px;
    background: var(--accent, #2563eb); color: #fff; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap;
}
.cedit-fontsub-chip:hover { filter: brightness(1.1); }
/* pannello (modale leggero, centrato) */
.cedit-fontsub {
    position: fixed; z-index: 4100; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(680px, 94vw); max-height: 88vh; overflow: auto;
    background: var(--surface, #fff); color: var(--text, #111);
    border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,.35);
    padding: 16px 18px; font: 14px/1.4 system-ui, sans-serif;
}
.cedit-fontsub__head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.cedit-fontsub__x { border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: inherit; opacity: .7; }
.cedit-fontsub__x:hover { opacity: 1; }
.cedit-fontsub__why { margin: 8px 0 12px; color: var(--text-muted, #444); }
.cedit-fontsub__body { display: grid; grid-template-columns: 210px 1fr; gap: 14px; align-items: start; }
/* ⚠️ La lista scorre PER CONTO SUO. Le famiglie sono passate da 5 a 13 (aggiunte
   dalla misura): con la sola `overflow: auto` del pannello, tredici voci da ~50px
   spingevano l'ANTEPRIMA sotto la piega su un telefono — e l'anteprima è ciò che
   rende onesta l'offerta, non un ornamento. I candidati sono ordinati per scarto,
   quindi i migliori restano in vista e la coda si raggiunge scorrendo. */
.cedit-fontsub__list {
    list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
    max-height: min(34vh, 260px); overflow-y: auto;
}
.cedit-fontsub__opt {
    padding: 8px 10px; border: 1.5px solid var(--border, #d9dee6); border-radius: 8px; cursor: pointer;
    display: flex; flex-direction: column; gap: 1px; transition: border-color .1s, background .1s;
}
.cedit-fontsub__opt:hover { border-color: var(--accent, #2563eb); }
.cedit-fontsub__opt.is-active { border-color: var(--accent, #2563eb); background: rgba(37,99,235,.10); }
.cedit-fontsub__opt b { font-size: 14px; }
.cedit-fontsub__hint { font-size: 11px; color: var(--text-muted, #667); }
.cedit-fontsub__scarto { font-size: 11px; font-weight: 600; color: var(--accent, #2563eb); }
.cedit-fontsub__preview { display: flex; flex-direction: column; gap: 10px; }
.cedit-fontsub__col { display: flex; flex-direction: column; gap: 4px; }
.cedit-fontsub__col > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted, #778); }
.cedit-fontsub__img {
    min-height: 40px; border: 1px solid var(--border, #e3e7ee); border-radius: 6px; background: #fff;
    padding: 6px; display: flex; align-items: center; overflow: auto;
}
.cedit-fontsub__img img { max-width: 100%; height: auto; display: block; }
.cedit-fontsub__load { color: var(--text-muted, #99a); }
.cedit-fontsub__restano { margin: 10px 0 0; min-height: 1em; font-size: 12.5px; }
.cedit-fontsub__restano.is-warn { color: #b45309; font-weight: 600; }
.cedit-fontsub__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (prefers-color-scheme: dark) {
    .cedit-fontsub { background: #1f2430; color: #eef; }
    .cedit-fontsub__img { background: #fff; }
    .cedit-fontsub__opt { border-color: #3a4150; }
}

/* ⚠️ SCHERMO BASSO MA LARGO (≥768px): lì le modalità NON sono una riga in alto,
   sono il RAIL VERTICALE a sinistra di adobe-theme.css. Guida e barra formato a
   tutta larghezza ci finivano SOPRA — visto nella RESA, non nei numeri: la guida
   copriva «Vista» e la barra l'ultima voce, e il probe non se ne accorgeva perché
   misurava le modalità PRIMA di entrare nell'editor (ora le rimisura dopo).
   ⚠️ Questo blocco deve stare IN CODA AL FILE: la media query compatta più sopra
   dichiara `left: 8px` e a pari specificità vince l'ultima. Ci sono cascato una
   volta — la barra continuava a coprire il rail.
   ⚠️ La condizione è «il rail C'È E il trattamento compatto è attivo»: se si
   scrivesse solo `(min-width: 768px)` si sposterebbe anche la barra CENTRATA del
   desktop col mouse, che di `left: 8px` non ne ha mai avuto bisogno. Da qui i due
   rami — schermo basso, oppure tocco. */
@media (min-width: 768px) and (max-height: 500px),
       (min-width: 768px) and (pointer: coarse) {
    .cedit-guide { left: calc(var(--rail-w, 68px) + 8px); }
    .cedit-bar { left: calc(var(--rail-w, 68px) + 8px); }
}