/* I calcolatori di calc/ sul sistema "Cockpit" (DESIGN.md, DEC-130). Token e base in
   _shared/cockpit-token.css; il campo delle cifre ha le stesse regole di lite/app.css (.cifra, .voce.chip),
   copiate qui perche' app.css porta con se' il guscio dell'app. Niente testo sotto i 15px. */

body{font-size:16px;line-height:1.6}
a{color:var(--acc)}
h1,h2,h3,p{margin:0}
.pagina{max-width:1040px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 64px max(16px,env(safe-area-inset-left,0px))}

/* testata */
.testata{display:flex;align-items:center;gap:10px;min-height:64px;border-bottom:1px solid var(--rule)}
.marchio{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:700;font-size:17px}
.marchio img{width:20px;height:26px}
.testata nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.testata nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:var(--r-s);color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500}
.testata nav a:hover{color:var(--ink)}
.tasto{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--rule-2);border-radius:var(--r-s);background:transparent;color:var(--ink-2);cursor:pointer}
.tasto:hover{color:var(--ink);border-color:var(--rule-3)}

/* apertura */
.briciole{margin-top:22px;font-size:15px;color:var(--ink-3)}
.briciole ol{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.briciole li+li::before{content:"›";margin-right:6px;color:var(--ink-3)}
.briciole a{color:var(--ink-2);text-decoration:none}
.briciole a:hover{text-decoration:underline}
h1{margin-top:10px;font-size:clamp(30px,6vw,42px);line-height:1.1;letter-spacing:-.02em;font-weight:700;color:var(--ink);max-width:22ch}
.lead{margin-top:12px;max-width:62ch;color:var(--ink-2);font-size:17px}
h2{font-size:clamp(22px,4.5vw,26px);line-height:1.2;letter-spacing:-.015em;font-weight:700;color:var(--ink)}
h3{font-size:17px;line-height:1.35;font-weight:700;color:var(--ink)}

/* calcolatore: dati a sinistra, esito a destra (sul telefono uno sotto l'altro) */
.calc{margin-top:28px;display:grid;gap:20px;align-items:start}
@media (min-width:900px){.calc{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.esito{position:sticky;top:20px}}
.dati,.esito{border:1px solid var(--rule);border-radius:var(--r);background:var(--plate);padding:clamp(16px,3vw,24px)}
.dati{display:grid;gap:22px}
.esito{display:grid;gap:14px}
.lab{display:block;font-weight:500;font-size:15px;line-height:1.35;color:var(--ink-2)}
.nota{font-size:15px;line-height:1.5;color:var(--ink-3)}
.campo{display:grid;gap:8px}
.coppia{display:grid;gap:22px}
@media (min-width:560px){.coppia{grid-template-columns:1fr 1fr}}

/* il campo delle cifre (come lite/app.css) */
.cifra{display:flex;align-items:stretch;height:56px;border:1px solid var(--rule-2);border-radius:var(--r-s);background:var(--plate-2);overflow:hidden;transition:border-color var(--t)}
.cifra:focus-within{border-color:var(--acc)}
.cifra-tasto{flex:none;width:52px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cifra-tasto:first-child{border-right:1px solid var(--rule-2)}
.cifra-tasto:last-child{border-left:1px solid var(--rule-2)}
.cifra-tasto:hover{background:var(--plate)}
.cifra-tasto:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.cifra-in{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:19px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.cifra-in:focus{outline:none}
.cifra-in::placeholder{color:var(--ink-3);font-weight:500}
.campo-cifra{display:grid;gap:8px}
.cifra-passo{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.voce{display:flex;justify-content:center;align-items:center;gap:2px;min-height:48px;padding:8px 14px;border:1px solid var(--rule-2);border-radius:var(--r-s);background:var(--plate);color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums;transition:border-color var(--t),background var(--t)}
.voce:hover{border-color:var(--rule-3)}
.voce[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-tint)}
.voce:disabled{opacity:.45;cursor:not-allowed}

/* scelte a segmenti (radio veri) e select */
.scelta{margin:0;padding:0;border:0;display:grid;gap:8px;min-width:0}
.scelta legend{padding:0;margin-bottom:8px}
.segmenti{display:flex;flex-wrap:wrap;gap:8px}
.segmenti label{position:relative;display:inline-flex}
.segmenti input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.segmenti span{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid var(--rule-2);border-radius:var(--r-s);background:var(--plate);color:var(--ink);font-weight:600;font-size:15px}
.segmenti input:checked+span{border-color:var(--acc);background:var(--acc-tint)}
.segmenti input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
select{width:100%;min-height:56px;padding:0 14px;border:1px solid var(--rule-2);border-radius:var(--r-s);background:var(--plate-2);color:var(--ink);font:inherit;font-size:17px;font-weight:600}
select:focus{outline:none;border-color:var(--acc)}
.spunta{display:flex;gap:12px;align-items:center;min-height:48px;font-size:15px;color:var(--ink-2);cursor:pointer}
.spunta input{width:22px;height:22px;accent-color:var(--acc);flex:none}
.spec{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* esito */
.esito-cima{display:grid;gap:4px}
.esito-cima .lab{color:var(--ink-3)}
.grande{font-size:clamp(40px,9vw,56px);line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--acc);font-variant-numeric:tabular-nums}
.grande small{font-size:19px;font-weight:600;color:var(--ink-2);letter-spacing:0;margin-left:6px}
.frase{font-size:16px;color:var(--ink)}
.righe{margin:0;border-top:1px solid var(--rule)}
.righe div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.righe dt{color:var(--ink-2)}
.righe dd{margin:0;color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.righe .forte dd{color:var(--acc)}
.avviso{padding:12px 14px;border:1px solid var(--warn);border-radius:var(--r-s);background:var(--warn-tint);color:var(--ink);font-size:15px}
.avviso.limite{border-color:var(--broken);background:var(--broken-tint)}
.vuoto{color:var(--ink-2);font-size:15px}
.onesta{font-size:15px;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:12px}

/* spiegazione, FAQ, invito */
.spiega,.faq,.invito,.altri{margin-top:56px;max-width:70ch}
.spiega{display:grid;gap:14px;color:var(--ink-2)}
.spiega h2{margin-top:18px;color:var(--ink)}
.spiega h2:first-child{margin-top:0}
.spiega strong{color:var(--ink)}
.spiega ul{margin:0;padding-left:20px;display:grid;gap:6px}
.tavola{width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-s)}
.tavola table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.tavola th,.tavola td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--rule);white-space:nowrap}
.tavola th{color:var(--ink);font-weight:600;background:var(--plate)}
.tavola td{color:var(--ink-2)}
.tavola tr:last-child td{border-bottom:0}
.faq h2{margin-bottom:12px}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:56px;padding:10px 0;cursor:pointer;color:var(--ink);font-weight:600;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:22px;font-weight:500;color:var(--ink-3)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 16px;color:var(--ink-2)}
.invito{max-width:none;display:grid;gap:14px;padding:clamp(18px,3vw,28px);border:1px solid var(--rule-2);border-radius:var(--r);background:var(--plate)}
.invito p{color:var(--ink-2);max-width:62ch}
.azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:var(--r-s);border:1px solid var(--acc);background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:700;font-size:16px;text-decoration:none}
.btn.secondo{background:transparent;color:var(--acc)}
.btn:hover{filter:brightness(1.06)}
@media (max-width:520px){.azioni .btn{width:100%}}
.altri h2{font-size:19px;margin-bottom:10px}
.altri ul,.elenco{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.altri a,.elenco a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border:1px solid var(--rule-2);border-radius:var(--r-s);color:var(--ink);text-decoration:none;font-weight:600}
.altri a:hover,.elenco a:hover{border-color:var(--acc)}
.elenco a{flex-direction:column;align-items:flex-start;padding:16px 18px;gap:4px}
.elenco a span{font-weight:500;color:var(--ink-2);font-size:15px}
.elenco{margin-top:28px;max-width:70ch}
footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 16px}
footer a{color:var(--ink-2)}

/* la barretta del risultato, solo sul telefono e solo finche' il risultato non si vede */
.mini{display:none}
@media (max-width:899px){
  .mini{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 18px;border:1px solid var(--acc);border-radius:var(--r);background:var(--plate);color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;box-shadow:0 8px 24px var(--ombra);transition:opacity var(--t),transform var(--t)}
  .mini b{color:var(--acc)}
  .mini[data-via="true"],.mini[hidden]{opacity:0;transform:translateY(12px);pointer-events:none}
  .mini[hidden]{display:none}
  .pagina{padding-bottom:96px}
}