/* acd.css: il sistema visivo comune di Studio e Strumenti ACD.
   Tre fonti, in quest'ordine di peso:
   - Apple (HIG, modo scuro): fondo nero, celle raggruppate su #1c1c1e, separatori
     che partono dal testo, testo nel font di sistema, barre traslucide, controlli
     segmentati, angoli continui come su Mac. Niente pillole.
   - Ferrari Luce: il quadrante a contagiri (acd.js) con la lancetta bianca dal
     bordo, le etichette piccole e spaziate, il nero OLED.
   - ACD: Poppins per titoli e numeri, l'arancione #F5A623 come unico colore
     d'azione (al posto del blu di Apple e del giallo Ferrari). */
:root{
  color-scheme:dark;
  /* fondi: sistema, raggruppato, sopra il raggruppato */
  --bg:#000; --card:#1c1c1e; --fill:#1c1c1e; --fill-2:#2c2c2e; --fill-3:#3a3a3c;
  /* testo: etichetta, secondaria, terziaria */
  --ink:#fff; --ink-2:rgba(235,235,245,.86); --muted:rgba(235,235,245,.6); --muted-2:rgba(235,235,245,.3);
  --line:rgba(84,84,88,.65); --on-ink:#000;
  --accent:#F5A623; --accent-hi:#ffb84a; --accent-soft:rgba(245,166,35,.16); --accent-ink:#F5A623;
  --verde:#30d158; --verde-soft:rgba(48,209,88,.16); --giallo:#ffd60a; --giallo-soft:rgba(255,214,10,.16);
  --rosso:#ff453a; --rosso-soft:rgba(255,69,58,.16);
  /* angoli: rettangoli arrotondati, mai pillole (le pillole restano solo ai tondi veri) */
  --r-tag:6px; --r-tile:8px; --r-field:10px; --r-btn:12px; --r-c:14px; --r-sheet:16px;
  --f-testo:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
  --f-titolo:Poppins,-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --safe-b:env(safe-area-inset-bottom,0px);
  --top:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scrollbar-color:var(--fill-3) transparent;scrollbar-width:thin}
body{font-family:var(--f-testo);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.41;letter-spacing:-.01em;min-height:100dvh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
::selection{background:var(--accent);color:#000}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--fill-3);border-radius:8px}::-webkit-scrollbar-track{background:transparent}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;border:0;background:none}
input,textarea{caret-color:var(--accent)}
:focus-visible{outline:3px solid rgba(245,166,35,.55);outline-offset:2px;border-radius:var(--r-tile)}
a{color:var(--accent);text-decoration:none}
[hidden]{display:none!important}
svg.i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.num,.tab-num{font-variant-numeric:tabular-nums}
.wrap{max-width:620px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.small{font-size:15px}

/* barra di navigazione: materiale traslucido, titolo piccolo che compare quando
   quello grande esce di vista, indietro con chevron e nome della pagina prima */
.barra-top{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.72);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);transition:box-shadow .25s}
.barra-top.scorso{box-shadow:0 .5px 0 var(--line)}
.barra-top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--top);gap:8px}
.barra-top .t-piccolo{text-align:center;font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:56vw;opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .3s var(--ease)}
.barra-top.scorso .t-piccolo{opacity:1;transform:none}
.indietro{display:inline-flex;align-items:center;gap:2px;height:44px;margin-left:-8px;padding-right:8px;color:var(--accent);font-size:17px;justify-self:start;transition:opacity .1s}
.indietro svg{width:26px;height:26px;stroke-width:2.2}
.indietro:active{opacity:.4}
.tondo{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--accent);transition:background .15s}
.tondo:active{background:var(--fill-2)}
.marchio{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-tile);background:var(--accent);font-family:var(--f-titolo);font-weight:700;font-size:11.5px;letter-spacing:-.01em;color:#000;justify-self:start;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.progresso{height:2px;background:transparent}
.progresso i{display:block;height:100%;width:0;background:var(--accent);transition:width .5s var(--ease)}

/* titoli: Poppins con tracking negativo che cresce con la misura */
.titolo{font-family:var(--f-titolo);font-size:clamp(32px,8.6vw,38px);line-height:1.12;letter-spacing:-.025em;font-weight:700;text-wrap:balance;padding-top:6px}
.sotto{margin-top:8px;color:var(--muted);font-size:17px;max-width:42ch;text-wrap:pretty}
.sez{margin-top:34px}
.sez > h2,.h2{font-family:var(--f-titolo);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:0 0 8px 2px}

/* celle raggruppate, come nelle Impostazioni: un blocco #1c1c1e con gli angoli
   continui, separatori sottili che partono dal testo, icona in una tessera */
.righe{list-style:none;background:var(--card);border-radius:var(--r-c);overflow:hidden}
.riga{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding-left:16px;text-align:left;color:var(--ink);transition:background .1s}
.riga:active{background:var(--fill-2)}
.riga .ico{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-tile);background:var(--accent);color:#000;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.riga .ico svg{width:20px;height:20px;stroke-width:2}
.riga .t{flex:1;min-width:0;display:flex;align-items:center;gap:10px;align-self:stretch;padding:12px 14px 12px 0;box-shadow:inset 0 -.5px 0 var(--line)}
.righe li:last-child .riga .t{box-shadow:none}
.riga .t > span{flex:1;min-width:0}
.riga b{display:block;font-weight:400;font-size:17px;line-height:1.3}
.riga small{display:block;font-size:14.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.riga .chev{color:var(--muted-2);width:18px;height:18px;stroke-width:2.4}
.riga .val{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

/* pulsanti: rettangoli con angoli continui, come su Mac e iPhone. Il colore
   d'azione e' uno solo, l'arancione; il grigio per la seconda scelta. Rispondono
   alla pressione subito, non al rilascio. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:var(--r-btn);font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap;text-decoration:none;transition:transform .1s ease-out,filter .1s,background .15s,opacity .15s}
.btn:active{transform:scale(.97);filter:brightness(.88)}
.btn svg{width:20px;height:20px;stroke-width:2}
.btn-acc,.btn-ink{background:var(--accent);color:#000;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.btn-fill{background:var(--fill-2);color:var(--ink)}
.btn-tinta{background:var(--accent-soft);color:var(--accent)}
.btn[disabled]{opacity:.35;pointer-events:none}
.largo{width:100%}
.link{font-size:17px;color:var(--accent);min-height:44px;display:inline-flex;align-items:center;gap:4px;text-decoration:none;transition:opacity .1s}
.link:active{opacity:.4}
.link svg{width:20px;height:20px;stroke-width:2.2}

/* l'azione fissa in basso: il contenuto sfuma sotto, niente linea dura */
.cta-fissa{position:sticky;bottom:0;z-index:10;margin:24px -20px 0;padding:20px 20px calc(14px + var(--safe-b));background:linear-gradient(to top,#000 62%,rgba(0,0,0,0))}

/* campi */
.campo{display:grid;gap:7px;margin-top:22px}
.campo > label{font-size:15px;font-weight:500;color:var(--ink-2);padding-left:2px}
.campo .aiuto{font-size:13.5px;color:var(--muted);margin-top:-3px;padding-left:2px}
.campo input,.campo select,.campo textarea{width:100%;min-height:48px;border-radius:var(--r-field);border:0;background:var(--card);padding:0 14px;font-size:17px;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s,background .15s}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(235,235,245,.45)}
.campo textarea{padding:13px 14px;min-height:104px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;background:var(--fill-2);box-shadow:0 0 0 3.5px rgba(245,166,35,.5)}
.campo input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.55}
.campo .conv{position:relative}
.campo .conv input{padding-right:42px}
.campo .conv i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);pointer-events:none}
.campo.err input,.campo.err select{box-shadow:0 0 0 2px var(--rosso)}
.due{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* scelte: tessere rettangolari (piu' risposte o testi lunghi) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:9px 14px;border-radius:var(--r-tile);background:var(--card);font-size:16px;line-height:1.3;text-align:left;transition:background .1s,color .1s,transform .1s}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--accent);color:#000}
/* ...e il controllo segmentato di Apple per due o tre scelte corte */
.chips.segmenti{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:2px;border-radius:9px;background:var(--fill-2)}
.segmenti .chip{min-height:40px;padding:6px 10px;border-radius:7px;background:none;text-align:center;font-size:15px;font-weight:500;position:relative}
.segmenti .chip:not(:first-child)::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:1px;background:var(--fill-3)}
.segmenti .chip[aria-pressed="true"]{background:#636366;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.segmenti .chip[aria-pressed="true"]::before,.segmenti .chip[aria-pressed="true"] + .chip::before{opacity:0}
/* ...e l'elenco con spunta (come Impostazioni) per una scelta tra testi lunghi */
.chips.elenco{display:block;background:var(--card);border-radius:var(--r-c);overflow:hidden}
.elenco .chip{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 0 0 16px;border-radius:0;background:none;font-size:17px;position:relative}
.elenco .chip span{flex:1;padding:13px 0}
.elenco .chip:not(:last-child)::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:.5px;background:var(--line)}
.elenco .chip:active{transform:none;background:var(--fill-2)}
.elenco .chip[aria-pressed="true"]{background:none;color:var(--ink)}
.elenco .spunta{flex:none;width:22px;margin-right:16px;color:var(--accent);opacity:0;transform:scale(.6);transition:opacity .15s,transform .25s var(--ease)}
.elenco .spunta svg{width:22px;height:22px;stroke-width:2.6}
.elenco .chip[aria-pressed="true"] .spunta{opacity:1;transform:none}
.campo.err .chips{border-radius:var(--r-field);box-shadow:0 0 0 2px var(--rosso)}
.errore{margin-top:18px;padding:12px 14px;border-radius:var(--r-field);background:var(--rosso-soft);color:#ff6961;font-size:15px}
.nota-in{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:var(--muted)}
.nota-in svg{width:17px;height:17px;margin-top:1px}

/* etichetta del cruscotto Ferrari Luce: piccola, maiuscola, spaziata */
.etichetta{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}

/* il contagiri (disegnato da acd.js) */
.cg{display:inline-grid;justify-items:center;gap:8px}
.cg .faccia{position:relative;width:var(--d,180px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,#141414 0%,#000 72%);box-shadow:0 0 0 .5px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -24px rgba(0,0,0,.9)}
.cg svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cg .tacche{stroke:rgba(255,255,255,.28);stroke-width:.8}
.cg .traccia{fill:none;stroke:rgba(255,255,255,.1)}
.cg .zona{fill:none;stroke:var(--rosso)}
.cg .arco{fill:none;transition:stroke-dashoffset 1.1s var(--ease)}
.cg .lancetta{stroke:#fff;stroke-linecap:round;transform-origin:50px 50px;transition:transform 1.1s var(--ease)}
.cg .centro{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.cg .centro b{font-family:var(--f-titolo);font-weight:600;font-size:calc(var(--d,180px) * .24);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cg .centro small{font-size:13px;color:var(--muted);margin-top:6px;max-width:calc(var(--d,180px) * .55);line-height:1.3}
.cg .sotto-cg{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center;max-width:30ch}

/* angoli continui come su Mac, dove il browser li sa fare (Chrome 139+):
   con la curva "squircle" il raggio va allungato per avere lo stesso ingombro */
@supports (corner-shape:squircle){
  .btn,.righe,.chip,.campo input,.campo select,.campo textarea,.marchio,.riga .ico,.errore,.chips.segmenti,.segmenti .chip{corner-shape:squircle}
  .btn{border-radius:22px}.righe{border-radius:26px}.campo input,.campo select,.campo textarea,.errore{border-radius:18px}
  .chip{border-radius:14px}.chips.elenco{corner-shape:squircle;border-radius:26px}.elenco .chip{border-radius:0}.marchio,.riga .ico{border-radius:14px}.chips.segmenti{border-radius:16px}.segmenti .chip{border-radius:13px}
}

@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.entra{animation:entra .45s var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.barra-top{background:#000;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-contrast:more){:root{--line:#8e8e93;--muted:rgba(235,235,245,.8)}.righe,.campo input{box-shadow:0 0 0 1px #8e8e93}}