/* PERCHÉ? - stile dell'interfaccia web (chiaro e scuro, da 375 px in su). */
:root {
  color-scheme: light dark;
  --sfondo: #f3f4f7;
  --carta: #ffffff;
  --sopra: #f6f6fb;
  --bordo: #dee2e9;
  --bordo-forte: #c7ccd6;
  --testo: #1c2029;
  --tenue: #586070;
  --spento: #6f7685;
  --accento: #4f46e5;
  --accento-testo: #4338ca;
  --accento-chiaro: #eeedfe;
  --verde: #15803d;
  --verde-chiaro: #e4f6ea;
  --rosso: #b42020;
  --rosso-chiaro: #fcebeb;
  --ambra: #92400e;
  --ambra-chiaro: #fef3c7;
  --ombra: 0 1px 2px rgba(20, 24, 40, .06), 0 8px 24px rgba(20, 24, 40, .06);
  --ombra-forte: 0 24px 60px rgba(20, 24, 40, .25);
  --raggio: 14px;
  --carattere: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0f1117;
    --carta: #171a22;
    --sopra: #1d212b;
    --bordo: #2a2f3b;
    --bordo-forte: #3a404e;
    --testo: #e8eaf0;
    --tenue: #a5abb8;
    --spento: #8a91a1;
    --accento: #8f89ff;
    --accento-testo: #aaa5ff;
    --accento-chiaro: #24224a;
    --verde: #4ade80;
    --verde-chiaro: #10291a;
    --rosso: #fb8a8a;
    --rosso-chiaro: #351718;
    --ambra: #fcd34d;
    --ambra-chiaro: #33280b;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .25);
    --ombra-forte: 0 24px 60px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 16px/1.5 var(--carattere);
  min-height: 100vh;
}
button, input, select { font: inherit; color: inherit; }
kbd {
  font: 600 .75em var(--mono);
  border: 1px solid var(--bordo-forte);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 .35em;
  background: var(--carta);
}
:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }

.salta {
  position: absolute; left: 12px; top: -60px;
  background: var(--accento); color: var(--carta); padding: 8px 14px; border-radius: 8px; z-index: 50;
  text-decoration: none;
}
.salta:focus { top: 12px; }

/* ------------------------------------------------------------------ testata */
.testata {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px max(16px, calc((100% - 1180px) / 2 + 16px)) 14px;
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
}
.marchio { display: flex; align-items: center; gap: 14px; min-width: 0; }
.logo {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accento); color: #fff; font-weight: 800; font-size: 24px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accento) 35%, transparent);
}
.testata h1 { margin: 0; font-size: clamp(22px, 4vw, 28px); line-height: 1.15; letter-spacing: -.01em; }
.sottotitolo { margin: 2px 0 0; color: var(--tenue); font-size: 14px; }
.distintivo {
  flex: none; font-size: 13px; font-weight: 650; color: var(--accento-testo);
  background: var(--accento-chiaro); padding: 6px 14px; border-radius: 999px;
}

/* ------------------------------------------------------------------ schede dei domini */
.domini {
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  padding: 0 max(16px, calc((100% - 1180px) / 2 + 16px));
  overflow-x: auto;
}
.domini [role="tablist"] { display: flex; gap: 4px; }
.domini [role="tab"] {
  background: none; border: 0; padding: 12px 14px 10px; cursor: pointer;
  color: var(--tenue); font-weight: 600; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.domini [role="tab"]:hover { color: var(--testo); }
.domini [role="tab"][aria-selected="true"] { color: var(--accento-testo); border-bottom-color: var(--accento); }
.nuovo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--verde); background: var(--verde-chiaro); padding: 1px 6px; border-radius: 999px; margin-left: 4px;
}

/* ------------------------------------------------------------------ griglia */
.griglia {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 20px;
  max-width: 1180px; margin: 22px auto; padding: 0 16px;
  outline: none;
}
.carta {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: 18px 20px;
  min-width: 0;
}
.carta h2, .sezione h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.01em; }
.sezione + .sezione { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bordo); }

/* articoli */
.articoli { display: grid; gap: 2px; }
.art-testata, .articolo {
  display: grid; grid-template-columns: minmax(0, 1fr) 80px 128px 92px; align-items: center; gap: 10px;
}
.art-testata { font-size: 12px; color: var(--tenue); padding: 0 0 4px; }
.art-testata span:nth-child(2), .art-testata span:nth-child(4) { text-align: right; }
.art-testata span:nth-child(3) { text-align: center; }
.articolo { min-height: 44px; border-radius: 10px; padding: 0 6px; margin: 0 -6px; }
.articolo.cambiato, .campo.cambiato { animation: lampo 1.6s ease-out; }
@keyframes lampo { 0% { background: var(--accento-chiaro); } 100% { background: transparent; } }
.art-prezzo { text-align: right; color: var(--tenue); font-variant-numeric: tabular-nums; }
.art-importo { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.passi {
  display: inline-flex; align-items: stretch; justify-self: center;
  border: 1px solid var(--bordo-forte); border-radius: 10px; overflow: hidden; background: var(--carta);
}
.passi:focus-within { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-chiaro); }
.passo {
  border: 0; background: var(--sopra); width: 36px; min-height: 36px; cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--tenue);
}
.passo:hover { color: var(--accento-testo); background: var(--accento-chiaro); }
.passo:focus-visible { outline-offset: -3px; }
.num {
  border: 0; width: 46px; text-align: center; background: transparent; font-variant-numeric: tabular-nums; padding: 0;
}
.num.largo { width: 76px; }
.num:focus { outline: none; }
input[aria-invalid="true"] { color: var(--rosso); }

.campi { display: grid; gap: 12px; }
.campo {
  display: grid; grid-template-columns: 190px auto 1fr; align-items: center; gap: 10px;
  border-radius: 10px; padding: 2px 6px; margin: 0 -6px;
}
.campo label, .campo .etichetta { font-weight: 500; }
.campo label small { display: block; color: var(--tenue); font-size: 12px; font-weight: 400; }
.unita { color: var(--tenue); }
.testo {
  border: 1px solid var(--bordo-forte); border-radius: 10px; background: var(--carta);
  padding: 7px 10px; min-height: 38px;
}
.testo:focus { border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-chiaro); outline: none; }
.testo.maiuscole { text-transform: uppercase; }
.avviso { color: var(--rosso); font-size: 13px; }
.suggerimento { color: var(--tenue); font-size: 13px; }
.campo.sino { grid-template-columns: 1fr; }

.segmenti {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: var(--sopra); border: 1px solid var(--bordo); border-radius: 12px; padding: 3px;
  grid-column: 2 / 4; justify-self: start;
}
.segmento { position: relative; }
.segmento input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmento span {
  display: block; padding: 6px 12px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--tenue);
}
.segmento input:checked + span { background: var(--carta); color: var(--accento-testo); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.segmento input:focus-visible + span { outline: 3px solid var(--accento); outline-offset: 1px; }

.interruttore { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; min-height: 40px; }
.interruttore input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cursore {
  width: 44px; height: 26px; border-radius: 999px; background: var(--bordo-forte); position: relative; flex: none;
  transition: background .15s;
}
.cursore::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
.interruttore input:checked + .cursore { background: var(--accento); }
.interruttore input:checked + .cursore::after { transform: translateX(18px); }
.interruttore input:focus-visible + .cursore { outline: 3px solid var(--accento); outline-offset: 2px; }

/* ------------------------------------------------------------------ riepilogo */
.riepilogo { align-self: start; position: sticky; top: 16px; }
.righe { display: grid; gap: 2px; margin: 0 -10px; }
.riga-importo {
  display: grid; grid-template-columns: 1fr auto 34px; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 6px 0 14px; border-radius: 10px; cursor: context-menu;
  position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.riga-importo:hover { background: var(--sopra); }
.riga-importo.selezionata { background: var(--accento-chiaro); }
.riga-importo.selezionata::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accento);
}
.ri-importo { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.riga-importo.grande { min-height: 60px; }
.riga-importo.grande .ri-nome { font-weight: 650; font-size: 18px; }
.riga-importo.grande .ri-importo { font-size: 24px; letter-spacing: -.01em; }
.chiedi {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bordo-forte); background: var(--carta);
  color: var(--accento-testo); font-weight: 800; cursor: pointer; padding: 0; line-height: 1;
}
.chiedi:hover, .riga-importo:focus-visible .chiedi { background: var(--accento); color: #fff; border-color: var(--accento); }
.separa { border: 0; border-top: 1px solid var(--bordo); margin: 6px 10px; }
.riga-importo.aggiornata .ri-importo { animation: lampo-testo 1.2s ease-out; }
@keyframes lampo-testo { 0% { color: var(--accento-testo); } 100% { color: inherit; } }

.consiglio {
  margin-top: 16px; background: var(--accento-chiaro); border-radius: 12px; padding: 12px 14px;
}
.consiglio p { margin: 0; font-size: 14px; }
.consiglio .forte { color: var(--accento-testo); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.mini-chiedi {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--accento-testo); font-weight: 800; font-size: 11px;
}
.regole { color: var(--tenue); font-size: 13px; margin: 14px 0 0; }

.piede-pagina { max-width: 1180px; margin: 0 auto 28px; padding: 0 16px; color: var(--tenue); font-size: 13px; }

/* ------------------------------------------------------------------ menu contestuale */
.menu {
  position: fixed; z-index: 40; min-width: 200px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; box-shadow: var(--ombra-forte);
  padding: 6px;
}
.menu button {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%;
  border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.menu button[data-azione="perche"] { font-weight: 700; }
.menu button:hover, .menu button:focus { background: var(--accento-chiaro); color: var(--accento-testo); outline: none; }
.menu hr { border: 0; border-top: 1px solid var(--bordo); margin: 4px 2px; }

/* ------------------------------------------------------------------ pannello «Perché?» */
dialog.pannello {
  width: min(1240px, calc(100vw - 32px)); height: min(880px, calc(100vh - 32px)); max-width: none; max-height: none;
  padding: 0; border: 1px solid var(--bordo); border-radius: 18px; overflow: hidden;
  background: var(--sfondo); color: var(--testo); box-shadow: var(--ombra-forte);
}
dialog.pannello[open] { display: flex; flex-direction: column; }
dialog.pannello::backdrop { background: rgba(15, 17, 30, .45); backdrop-filter: blur(3px); }
.p-testata {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  background: var(--carta); border-bottom: 1px solid var(--bordo);
  padding: 14px 18px 14px 26px; position: relative;
}
.p-testata::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accento); }
.p-titoli { min-width: 0; }
.sopra { font-size: 12px; font-weight: 750; letter-spacing: .08em; color: var(--accento-testo); }
.p-testata h2, .p-testata h1 { margin: 2px 0 2px; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.2; letter-spacing: -.015em; }
.p-testata .sotto { margin: 0; color: var(--tenue); font-size: 13px; }
.p-strumenti { display: flex; align-items: center; gap: 6px; flex: none; }
.bottone {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo);
  border-radius: 10px; padding: 7px 14px; min-height: 38px; cursor: pointer; font-weight: 600;
}
.bottone svg { fill: currentColor; }
.bottone:hover { border-color: var(--accento); color: var(--accento-testo); }
.bottone.tenue { font-size: 14px; }
.chiudi {
  width: 38px; height: 38px; border-radius: 10px; border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--tenue); cursor: pointer;
}
.chiudi:hover { background: var(--sopra); color: var(--testo); }

.p-corpo {
  flex: 1; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 20px; padding: 16px 20px 20px;
}
.p-sezione, .p-corpo h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.p-sezione h3 { margin: 0; font-size: 17px; }
.riga-sezione { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.p-sinistra .riga-sezione { margin-top: 18px; align-items: center; }
.nota, .p-corpo h2 small { color: var(--tenue); font-size: 13px; font-weight: 400; }
.carta-p, .pannello .carta {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 14px 16px;
}

.punti { list-style: none; margin: 0; padding: 0; counter-reset: punto; display: grid; gap: 12px; }
.punti li { counter-increment: punto; position: relative; padding-left: 36px; min-height: 24px; }
.punti li::before {
  content: counter(punto); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accento-chiaro); color: var(--accento-testo); font-size: 12px; font-weight: 750;
}

.interruttore-vista { display: inline-flex; background: var(--sopra); border: 1px solid var(--bordo); border-radius: 10px; padding: 3px; }
.interruttore-vista button { border: 0; background: none; padding: 4px 12px; border-radius: 7px; font-size: 13px; font-weight: 650; color: var(--tenue); cursor: pointer; }
.interruttore-vista button[aria-selected="true"] { background: var(--carta); color: var(--accento-testo); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.struttura { overflow: auto; max-height: 520px; }
.legenda { color: var(--tenue); font-size: 12.5px; margin: 6px 2px 0; }
.legenda .chip { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 10px; vertical-align: -1px; }

/* albero */
.albero, .albero ul { list-style: none; margin: 0; padding: 0; }
.albero ul { padding-left: 18px; border-left: 1px dashed var(--bordo-forte); margin-left: 7px; }
.albero li { margin: 2px 0; }
.albero summary { cursor: pointer; list-style: none; }
.albero summary::-webkit-details-marker { display: none; }
.albero summary::before {
  content: "▾"; display: inline-block; width: 14px; color: var(--spento); font-size: 12px; transition: transform .1s;
}
.albero details:not([open]) > summary::before { transform: rotate(-90deg); }
.albero li > .nodo { padding-left: 14px; display: inline-block; }
.nodo { font: 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.ramo.regola > details > summary .nodo, .ramo.regola > .nodo { color: var(--accento-testo); font-weight: 650; }
.ramo.condizione-si > details > summary .nodo, .ramo.condizione-si > .nodo { color: var(--verde); }
.ramo.condizione-no > details > summary .nodo, .ramo.condizione-no > .nodo { color: var(--rosso); }
.ramo.ipotesi > details > summary .nodo, .ramo.ipotesi > .nodo { color: var(--ambra); font-weight: 650; }
.ramo.costante > .nodo, .ramo.rinvio > .nodo, .ramo.rinvio > details > summary .nodo { color: var(--tenue); }
.ramo.non-scelto > .nodo, .ramo.non-scelto > details > summary .nodo { color: var(--spento); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--spento) 50%, transparent); }
.ramo.ingresso > .nodo { color: var(--testo); font-weight: 600; }

/* grafo */
.grafo-svg { display: block; max-width: none; font-family: var(--carattere); }
.g-nodo rect { fill: var(--carta); stroke: var(--bordo-forte); stroke-width: 1.2; }
.g-nodo.ingresso rect { fill: var(--sopra); }
.g-nodo.regola rect { stroke: var(--accento); }
.g-nodo.tabella rect { stroke: var(--verde); }
.g-nodo.ipotesi rect { stroke: var(--ambra); fill: var(--ambra-chiaro); }
.g-nodo.radice rect { fill: var(--accento-chiaro); stroke: var(--accento); stroke-width: 2; }
.g-nodo.spento { opacity: .55; }
.g-nodo.spento rect { stroke-dasharray: 4 3; }
.g-titolo { font-size: 13px; font-weight: 650; fill: var(--testo); }
.g-sotto { font-size: 12px; fill: var(--tenue); }
.arco { fill: none; stroke: var(--bordo-forte); stroke-width: 1.6; }
.arco.condizione { stroke: var(--verde); }
.arco.scelto { stroke: var(--accento); }
.arco.spento, .arco.non-scelto { stroke: var(--spento); stroke-dasharray: 5 4; opacity: .7; }
.punta { fill: var(--accento); }
.punta.spenta { fill: var(--spento); }

/* schede dei controfattuali */
.schede { display: grid; gap: 10px; align-content: start; }
.scheda {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px 14px;
  transition: border-color .12s, background .12s, transform .12s;
}
.scheda.applicabile { cursor: pointer; }
.scheda.applicabile:hover { border-color: var(--accento); background: color-mix(in srgb, var(--accento-chiaro) 55%, var(--carta)); }
.scheda.applicabile:active { transform: scale(.995); }
.scheda.ipotesi { cursor: help; }
.icona {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
}
.scheda.meglio .icona { background: var(--verde-chiaro); fill: var(--verde); }
.scheda.peggio .icona { background: var(--rosso-chiaro); fill: var(--rosso); }
.corpo { min-width: 0; }
.scheda h3 { margin: 0 0 4px; font-size: 15.5px; line-height: 1.35; }
.esito { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pillola { font-weight: 750; padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scheda.meglio .pillola { background: var(--verde-chiaro); color: var(--verde); }
.scheda.peggio .pillola { background: var(--rosso-chiaro); color: var(--rosso); }
.dettagli { margin: 6px 0 0; color: var(--tenue); font-size: 13px; }
.effetto { margin: 6px 0 0; font-size: 13.5px; }
.effetto .eff-nome { color: var(--tenue); }
.effetto .eff-diff { font-weight: 700; margin-left: 4px; }
.effetto.meglio .eff-diff { color: var(--verde); }
.effetto.peggio .eff-diff { color: var(--rosso); }
.effetto.pari .eff-diff { color: var(--tenue); font-weight: 500; }
.barra { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--tenue); }
.barra-nome { max-width: 110px; line-height: 1.25; overflow-wrap: break-word; }
.barra-binari { display: grid; gap: 3px; }
.binario { height: 6px; background: var(--sopra); border-radius: 3px; overflow: hidden; }
.pieno { display: block; height: 100%; border-radius: 3px; }
.pieno.prima { background: var(--bordo-forte); }
.pieno.dopo.meglio { background: var(--verde); }
.pieno.dopo.peggio { background: var(--rosso); }
.barra-valori { display: grid; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.1; font-size: 11.5px; }
.azione {
  display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--accento-testo);
}
.azione::after { content: " →"; }
.etichetta-ipotesi {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--ambra); background: var(--ambra-chiaro);
  padding: 2px 10px; border-radius: 999px;
}
.in-peggio { margin: 8px 2px 0; color: var(--tenue); font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.vuoto { color: var(--tenue); }

.p-piede {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 22px;
  border-top: 1px solid var(--bordo); background: var(--sfondo);
}
.p-piede p { margin: 0; flex: 1; color: var(--tenue); font-size: 14px; }
.collegamento { border: 0; background: none; color: var(--accento-testo); font-weight: 700; cursor: pointer; text-decoration: underline; padding: 6px; }

.avviso-volante {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--testo); color: var(--carta); padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 60;
  transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px);
}
.avviso-volante.visibile { opacity: 1; transform: translate(-50%, 0); }

/* schermata statica (autotest) */
.pannello.statico { background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 18px; overflow: hidden; }
.pannello.statico .p-corpo { overflow: visible; }

/* ------------------------------------------------------------------ schermi stretti */
@media (max-width: 900px) {
  .griglia { grid-template-columns: 1fr; }
  .riepilogo { position: static; }
  .p-corpo { display: flex; flex-direction: column; }
  .p-corpo > *, .p-sinistra > * { flex-shrink: 0; }
  .p-sinistra { display: contents; }
  .p-sinistra > * { order: 3; }
  .p-sinistra > :nth-child(1), .p-sinistra > :nth-child(2) { order: 1; }
  .p-sinistra > .riga-sezione { margin-top: 0; }
  .p-destra { order: 2; }
  .struttura { max-height: none; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .testata { padding-top: 14px; padding-bottom: 12px; }
  .distintivo { display: none; }
  /* a 375 px le tre schede (con «nuovo») devono stare tutte nello schermo, senza tagli */
  .domini { padding: 0 12px; }
  .domini [role="tab"] { padding: 12px 6px 10px; }
  .carta { padding: 14px; }
  .art-testata { display: none; }
  .articolo {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome passi" "prezzo importo";
    row-gap: 0; padding-top: 6px; padding-bottom: 6px;
  }
  .art-nome { grid-area: nome; }
  .art-prezzo { grid-area: prezzo; text-align: left; font-size: 13px; }
  .art-prezzo::after { content: " cad."; }
  .articolo .passi { grid-area: passi; }
  .art-importo { grid-area: importo; font-size: 14px; }
  .campo { grid-template-columns: 1fr auto; }
  .campo > .unita { display: none; }
  .campo .avviso, .campo .suggerimento { grid-column: 1 / -1; }
  .segmenti { grid-column: 1 / -1; }
  dialog.pannello { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .p-testata { padding: 12px 12px 12px 20px; flex-wrap: wrap; }
  .p-strumenti { width: 100%; justify-content: flex-start; }
  .p-strumenti .chiudi { margin-left: auto; position: absolute; top: 8px; right: 8px; }
  .p-titoli { padding-right: 40px; }
  .p-corpo { padding: 12px; gap: 14px; }
  .p-piede { flex-wrap: wrap; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .p-piede p { flex-basis: 100%; }
  .p-piede .bottone { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}