/* ══════════════════════════════════════════════════════════════════════════
Flipping Club — AREA SCHEDA OPERAZIONE (nuovo design, PR 5-8, un file solo)
══════════════════════════════════════════════════════════════════════════
Spec docs/superpowers/specs/2026-09-17-nuovo-design-design.md §4.5, §6.1-6.2.
design-05 (cornice): i tre modali #opModal, #genModal, #ddModal (.modal-*),
testata della scheda, fasi a chip (.wiz-step), selettore di fase da telefono
(.wiz-sel), barra Stato e azioni, riepilogo delle completate, barra dei
pulsanti, dialoghi dei gate, modale date DD, risorse Drive ed Email scritte
da opmodal.js, modale di conflitto. design-06/07/08 aggiungono qui il
contenuto dei passi.
Regole (tests/area-opmodal.test.js):
- solo token: niente hex, niente rgba, niente !important, niente
font-family, niente rem;
- forma e misure di .modal-overlay, .modal e .modal-body SOLO dentro
@media screen: la Decisione si stampa dal modale (@media print di
css/stampa.css, con !important) e un max-height o un flex la troncherebbero;
- ogni :hover dentro @media (hover:hover); ogni @media con larghezza
comincia con "screen and" (la pagina A4 è larga 741 px);
- si carica dopo area-pipeline.css e prima di area-shell.css, che resta
l'ULTIMO foglio: i selettori con transition/animation di questo file
stanno anche nel blocco "Riduci movimento" in coda ad area-shell.css;
- da telefono i bottoni della cornice dentro #opModalBody ricevono
#opModalBody button a (1,0,1) (in testa a questo foglio, era in mobile.css):
dove serve un allineamento diverso, la regola qui porta il prefisso #opModalBody.
══════════════════════════════════════════════════════════════════════════ */
/* ── Da telefono: le regole della scheda che erano in css/mobile.css (cancellato nella PR 15,
Task 3) ──
In testa al foglio, prima di ogni regola dell'area: mobile.css si caricava prima di
area-opmodal.css, quindi a pari peso le regole dell'area qui sotto vincono come prima.
- Fasi (.wiz-step): solo la larghezza minima a 44 px. L'altezza resta 32 px da telefono
(la regola di .wiz-step più giù, a pari peso, la teneva a 32 anche prima): domanda aperta
a Fede nella PR 15. Con un dito (hover:none) le fasi sono a 44 px.
- Bottoni, label con il file, date e select generati nel JS del corpo della scheda: si
raggiungono per struttura. La regola con :has() sta da sola: un browser che non lo
conosce scarta solo quella.
- Varianti ai lavori: una colonna, campi a tutta larghezza, rata alta 44 px. Le radici
(#cantVariantiRoot, #cantRoot) servono a battere le regole dell'area a pari peso.
- «Aggiungi un impianto» delle Foto sottotraccia (.cchiu-altro>summary) a 44 px.
- Checklist: la casella sta in label.op-cl-check, 44×44; i margini negativi tengono la riga
alta 44 (44 - 2×5 = 34 px dentro la riga, che ha 4 px di padding e 1 px di bordo sopra e
sotto) e a sinistra recuperano gli 8 px di padding della riga. Il 📎 del file caricato e
la cartella Drive in testa a Checklist e Segnalazione a 44 px; gli altri link dentro il
testo restano esclusi. */
@media screen and (max-width:768px){
.wiz-step{min-width:44px}
#opModalBody button{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
#opModalBody label:has(input[type=file]){min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
#opModalBody input[type=date]{min-height:44px;min-width:44px}
#opModalBody select{min-height:44px;min-width:44px}
#cantVariantiRoot .cvar-riga-dettaglio{grid-template-columns:minmax(0,1fr)}
#cantVariantiRoot .cvar-data input,#cantVariantiRoot .cvar-modulo .cchiu-campo input,
#cantVariantiRoot .cvar-modulo .cchiu-campo select,#cantVariantiRoot .cvar-modulo .cchiu-campo textarea,
#cantVariantiRoot .cvar-decisione .cchiu-campo select,#cantVariantiRoot .cvar-decisione textarea,#cantVariantiRoot .cvar-azione textarea{max-width:none}
#cantRoot .cvar-rata{min-height:44px;padding:7.6px 11.4px;font-size:12.35px}
#opModalBody .cchiu-altro>summary{min-height:44px;padding:12.35px 0;box-sizing:border-box}
#opModalBody .op-cl-check{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;flex:none;margin:-5px 0 -5px -8px}
#opModalBody .op-cl-voce a.op-cl-link,#opModalBody .op-box.op-riga>a.op-link{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* ── I tre modali: velo, foglio, barra in alto, corpo ── */
@keyframes fcSheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media screen{
.modal-overlay{inset:0;align-items:flex-start;padding:var(--sp-6) var(--sp-5);overflow-y:auto}
.modal{display:flex;flex-direction:column;width:100%;max-width:960px;max-height:calc(100vh - 2 * var(--sp-6));max-height:calc(100dvh - 2 * var(--sp-6));overflow:hidden;border:.5px solid var(--fc-sep);animation:fcSheetIn .22s ease}
.modal-body{flex:1 1 auto;min-height:0;padding:var(--sp-5);overflow-y:auto;overscroll-behavior:contain}
#genModal .modal{max-width:720px}
#ddModal .modal{max-width:560px}
}
.modal-top{flex:none;gap:var(--sp-3);min-height:56px;padding:var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);border-bottom:.5px solid var(--fc-sep);background:var(--fc-card)}
.modal-title{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--sp-2);row-gap:2px;flex:1 1 auto;min-width:0;font-size:17px;line-height:22px;color:var(--fc-label)}
.modal-title em{font-style:italic;color:var(--fc-label)}
.modal-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border-radius:50%;font-size:15px;line-height:1}
.modal-close:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
@media (hover:hover){.modal-close:hover{background:var(--fc-rail)}}
@media (hover:none){.modal-close{width:44px;height:44px}}
@media screen and (min-width:769px){
.modal-overlay{left:var(--sidebar-w)}
}
@media screen and (max-width:768px){
.modal-overlay{left:0;padding:0;align-items:stretch;overflow:hidden;overscroll-behavior:contain}
.modal{max-width:none;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0}
#genModal .modal,#ddModal .modal{max-width:none}
.modal-top{padding:calc(var(--sp-2) + var(--fc-safe-top)) var(--sp-2) var(--sp-2) var(--sp-4)}
.modal-body{padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--fc-safe-bottom))}
}
/* ── Posizione, fasi a chip, selettore di fase da telefono (design-05) ──
.wiz-step resta la classe delle voci (JS e test la usano), cambia l'aspetto:
pillola. Da scrivania vanno a capo, nessuna si nasconde (decisione C1 del
30/07); da telefono, bandiera spenta, una riga che scorre; bandiera accesa,
il selettore .wiz-sel (il markup c'è sempre, è il CSS a scegliere). */
.op-wiz-pos{margin-bottom:var(--sp-2);font-size:12px;line-height:16px;color:var(--fc-label2)}
.op-wiz-pos b{font-weight:600;color:var(--fc-label)}
.wizard-nav{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.wiz-step{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 var(--sp-3);border:.5px solid transparent;border-radius:var(--r-pill);background:var(--fc-fill);color:var(--fc-label);font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s}
.wiz-step.done{background:var(--fc-accent-soft);color:var(--fc-accent)}
.wiz-step.future{border-color:var(--fc-sep);background:var(--fc-card);color:var(--fc-label2)}
.wiz-step.active{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.wiz-step:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
@media (hover:hover){.wiz-step:not(.active):hover{background:var(--fc-accent-soft);color:var(--fc-accent)}}
@media (hover:none){.wiz-step{min-height:44px}}
.wiz-sel,.wiz-sel-list{display:none}
@media screen and (max-width:768px){
/* Da bordo a bordo: il corpo ha 16 px ai lati (Task 2), e senza il margine negativo il testo
che scorre passava sotto, accanto alla riga fissa (review della rev. 1, M9). Lo sticky si
ferma dentro il padding del corpo: top negativo pari al padding (12 px), o il testo scorre
in una fascia fra la barra in alto e i chip (smoke a 390). */
.wizard-nav:not(.fasi){position:sticky;top:calc(-1 * var(--sp-3));z-index:1;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--sp-4);scrollbar-width:none;margin:0 calc(-1 * var(--sp-4)) var(--sp-3);padding:var(--sp-1) var(--sp-4) var(--sp-2);background:var(--fc-card)}
.wizard-nav:not(.fasi)::-webkit-scrollbar{display:none}
.wizard-nav:not(.fasi) .wiz-step{flex:none;scroll-snap-align:start}
.wizard-nav.fasi{display:none}
.wiz-sel{display:flex;align-items:stretch;position:sticky;top:calc(-1 * var(--sp-3));z-index:2;margin-bottom:var(--sp-3);overflow:hidden;border:.5px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card)}
.wiz-sel-arrow{flex:0 0 44px;border:0;background:var(--fc-card);color:var(--fc-label2);font-size:20px;line-height:1;cursor:pointer}
.wiz-sel-arrow:first-child{border-right:.5px solid var(--fc-sep)}
.wiz-sel-arrow:last-child{border-left:.5px solid var(--fc-sep)}
/* Freccia disabilitata: --fc-label3 (2,21:1) è ammesso, un controllo disabilitato è esente da WCAG 1.4.3 (M6). */
.wiz-sel-arrow:disabled{color:var(--fc-label3);cursor:default}
.wiz-sel-cur{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:var(--sp-2) var(--sp-3);border:0;background:var(--fc-accent-fill);color:var(--fc-on-accent);cursor:pointer}
.wiz-sel-cur .n{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.wiz-sel-cur .l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700}
.wiz-sel-list{display:block;margin:calc(-1 * var(--sp-2)) 0 var(--sp-3);overflow:hidden;border:.5px solid var(--fc-sep);border-radius:var(--r);background:var(--fc-card)}
.wiz-sel-voce{display:flex;align-items:center;gap:var(--sp-2);width:100%;min-height:44px;padding:var(--sp-2) var(--sp-3);border:0;border-bottom:.5px solid var(--fc-sep);background:var(--fc-card);color:var(--fc-label);font-size:15px;text-align:left;cursor:pointer}
/* #opModalBody button (1,0,1) in testa al foglio le centrava: il prefisso (1,1,0) le rimette a sinistra. */
#opModalBody .wiz-sel-voce{display:flex;justify-content:flex-start}
.wiz-sel-voce:last-child{border-bottom:0}
.wiz-sel-voce .mark{display:flex;align-items:center;justify-content:center;flex:0 0 20px;height:20px;border:1.5px solid var(--fc-sep);border-radius:50%;color:var(--fc-label2);font-size:11px}
.wiz-sel-voce.done .mark{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-accent)}
.wiz-sel-voce.active{background:var(--fc-accent-fill);color:var(--fc-on-accent);font-weight:700}
.wiz-sel-voce.active .mark{border-color:var(--fc-on-accent);color:var(--fc-on-accent)}
.wiz-sel-voce.future{color:var(--fc-label2)}
.wiz-sel-voce.future .mark{border-style:dashed}
}
/* ── Testata della scheda: codice, indirizzo, stato, presenza (design-05) ── */
.op-title-id{font-size:13px;line-height:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fc-label2)}
.modal-title .addr{min-width:0;overflow-wrap:anywhere;font-size:17px;line-height:22px;color:var(--fc-label)}
.op-title-st{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:22px;font-weight:600;color:var(--fc-label)}
.op-title-st .status-dot{margin:0}
.op-title-storico{font-size:11px;font-weight:700;letter-spacing:.06em}
.op-presence{flex:0 1 auto;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px var(--sp-2);border-radius:var(--r-pill);background:var(--fc-warn-soft);color:var(--fc-warn);font-size:12px;font-weight:600}
/* Vuoto resta nell'albero dell'accessibilità ma non si vede e non occupa spazio: con hidden
(display:none) la regione aria-live non esisteva e lo screen reader non leggeva il testo
che arrivava insieme alla comparsa. Assoluto: fuori dal gap della barra in alto. */
.op-presence:empty{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
/* ── Barra Stato e azioni (#opStatusBar): tendina, risorse, Storico, PDF, Elimina ── */
.op-statusbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.op-stato-lbl{font-size:12px;font-weight:600;color:var(--fc-label2)}
.op-stato-sel{min-height:36px;padding:0 var(--sp-3);border:.5px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px}
.op-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-left:auto}
.op-risorse{display:inline-flex;gap:var(--sp-1)}
.op-risorsa{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;min-width:36px;padding:0;border:.5px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);font-size:15px;line-height:1;cursor:pointer}
.op-risorsa.is-open{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-label);box-shadow:inset 0 0 0 1px var(--fc-accent)}
.op-risorsa:focus-visible{outline:2px solid var(--fc-accent);outline-offset:2px}
.op-pdf{position:relative;display:inline-block}
.op-pdf>summary{list-style:none;cursor:pointer}
.op-pdf>summary::-webkit-details-marker{display:none}
.op-pdf-menu{position:absolute;right:0;z-index:50;min-width:160px;margin-top:2px;overflow:hidden;border:.5px solid var(--fc-sep);border-radius:var(--rs);background:var(--fc-card);box-shadow:var(--fc-shadow)}
/* Il prefisso batte #opModalBody button (1,0,1) in testa al foglio, che le centrava. */
#opModalBody .op-pdf-voce{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:36px;padding:var(--sp-2) var(--sp-3);border:0;background:var(--fc-card);color:var(--fc-label);font:inherit;font-size:13px;text-align:left;cursor:pointer}
@media (hover:hover){
.op-risorsa:hover{border-color:var(--fc-accent);background:var(--fc-accent-soft);color:var(--fc-label)}
#opModalBody .op-pdf-voce:hover{background:var(--fc-fill)}
}
@media (hover:none){
.op-risorsa{width:44px;height:44px;min-width:44px}
.op-stato-sel{min-height:44px}
/* Il prefisso sopra batte anche i 44 px di #opModalBody button (in testa al foglio): al tocco si rimettono qui. */
#opModalBody .op-pdf-voce{min-height:44px}
}
@media screen and (max-width:768px){
/* A 390 px tendina, tre icone e tre bottoni non stanno su una riga: le azioni vanno sotto, a tutta larghezza. */
.op-azioni{width:100%;margin-left:0;justify-content:flex-start}
}
/* ── Corpo della scheda: sblocco di una completata, BP in caricamento, barra dei pulsanti (design-05) ──
.fc-modal-actions la usano anche le barre dei passi (opmodal-steps, -finance,
-gestione) con uno style="display:flex;gap:.5rem;margin-top:1rem" che se ne
va nelle PR 6-8: fino ad allora l'inline vince su gap e margine, il resto è qui. */
.op-unlock{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);padding:var(--sp-2) var(--sp-3);border:.5px solid var(--fc-warn-fill);border-radius:var(--rs);background:var(--fc-warn-soft);color:var(--fc-label)}
.op-unlock-ico{flex:none;font-size:18px}
.op-unlock-txt{flex:1;min-width:0}
.op-unlock-t{font-size:13px;font-weight:700;color:var(--fc-warn)}
.op-unlock-s{font-size:12px;color:var(--fc-label)}
.op-bp-loading{padding:var(--sp-6);text-align:center;font-size:13px;color:var(--fc-label2)}
.op-bp-err{color:var(--fc-danger)}
.fc-modal-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
/* Le barre dei passi hanno già style="flex:1" sul verde: identico fino alle PR 6-8 (M11).
Verde pieno su --fc-accent-fill: in chiaro uguale a .btn-green (era in style.css, #1B5E20),
in scuro #2E7D32 con bianco (5,13:1) al posto di bianco su #81C784 (1,98:1) (I4). */
.fc-modal-actions .btn-green,.drv-tools .btn-green,.drv-empty .btn-green{background:var(--fc-accent-fill);color:var(--fc-on-accent)}
.fc-modal-actions .btn-green{flex:1 1 auto;width:auto} /* width:auto contro il width:100% di .btn-green (base.css, era in style.css), o la base auto è tutta la riga; base auto, non 0: se l'etichetta non ci sta va a capo intera; con flex:1 (base 0) a 375 px "Avanti → Ricerca Mercato" finiva schiacciato in 57 px (smoke PR 6a) */
@media screen and (max-width:768px){
/* Fissa in fondo al corpo, sopra la safe-area (era mobile.css blocco 6). Scarto negativo pari al
padding in fondo al corpo: con bottom:0 il testo scorreva sotto la barra (smoke a 390). */
.modal-body .fc-modal-actions{position:sticky;bottom:calc(-1 * (var(--sp-3) + var(--fc-safe-bottom)));z-index:2;padding:var(--sp-2) 0 calc(var(--sp-2) + var(--fc-safe-bottom));border-top:.5px solid var(--fc-sep);background:var(--fc-card)}
}
/* ── Riepilogo di un'operazione completata (vista storico, design-05) ──
.stats-row/.stat-card/.stat-val/.stat-lbl sono di base.css (pezzi comuni, design-13a):
qui, solo dentro .op-storico, il bordo e l'ombra di .stat-card e i colori di .stat-val
(dalla 13a l'ombra coincide con base.css, nessuna; il bordo no: qui .5px, in base.css 1px).
.op-sto-card batte .card di base.css per ordine. La tabella ridefinisce thead/th/td di base.css. */
.op-sto-banner{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:.5px solid var(--fc-accent);border-radius:var(--rs);background:var(--fc-accent-soft);color:var(--fc-accent);font-size:13px;font-weight:600}
.op-sto-ico{flex:none;font-size:18px}
.unlock-bar{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-2) 0 var(--sp-4);padding:var(--sp-2) var(--sp-3);border:.5px solid var(--fc-accent);border-radius:var(--rs);background:var(--fc-card);color:var(--fc-label);cursor:pointer}
.unlock-bar-t{font-size:13px;font-weight:700;color:var(--fc-accent)}
.unlock-bar-s{font-size:12px;color:var(--fc-label2)}
@media (hover:hover){.unlock-bar:hover{background:var(--fc-bg)}}
.op-storico .stats-row{margin-bottom:var(--sp-3)}
.op-storico .stat-card{border:.5px solid var(--fc-sep);box-shadow:none}
.op-storico .stat-val{color:var(--fc-label)}
.op-storico .stat-val.is-pos{color:var(--fc-ok)}
.op-storico .stat-val.is-zero{color:var(--fc-label2)}
.op-storico .op-sto-city{font-size:15px}
.op-sto-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.op-sto-card{padding:var(--sp-3) var(--sp-4);border:.5px solid var(--fc-sep);background:var(--fc-card);color:var(--fc-label);box-shadow:none}
.op-sto-unita{margin-bottom:var(--sp-3)}
.op-sto-lbl{margin-bottom:var(--sp-2);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fc-label2)}
.op-sto-addr{font-size:15px;font-weight:600}
.op-sto-sub{margin-top:2px;font-size:13px;color:var(--fc-label2)}
.op-sto-maps{display:inline-flex;align-items:center;gap:4px;margin-top:var(--sp-2);font-size:13px;font-weight:600;color:var(--fc-accent);text-decoration:none}
.op-sto-row{margin-bottom:2px;font-size:13px}
.op-sto-st{display:inline-flex;align-items:center;gap:6px;margin-top:var(--sp-2);font-size:13px;font-weight:600}
.op-sto-st .status-dot{margin:0}
.op-sto-scroll{overflow-x:auto}
.op-sto-table{width:100%;border-collapse:collapse;font-size:13px}
.op-sto-table thead{background:none}
.op-sto-table th{padding:var(--sp-2);border-bottom:.5px solid var(--fc-sep);color:var(--fc-label2);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:left;white-space:nowrap}
.op-sto-table tbody tr,.occ-table tbody tr{border-bottom:0} /* tbody tr di base.css: 1 px che vince sul filetto della cella */
.op-sto-table td{padding:var(--sp-2);border-bottom:.5px solid var(--fc-sep);color:var(--fc-label);font-size:13px}
.op-sto-table tfoot td{border-top:2px solid var(--fc-sep);border-bottom:0}
.op-sto-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.op-sto-table .is-b{font-weight:700}
.op-sto-table .is-muted{color:var(--fc-label2)}
.op-sto-table .op-sto-tot{font-weight:800;color:var(--fc-accent)}
.op-sto-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:12px;color:var(--fc-label2)}
.op-sto-foot .is-b{font-weight:600}
@media screen and (max-width:768px){.op-sto-grid{grid-template-columns:1fr}}
/* ── Dialoghi dei gate e dello scarto (fcConfirm con corpo HTML, design-05) ──
Il dialogo è di base.css (.fc-confirm-*); qui solo il corpo. Le