/* v2.2 — Geometria nello spazio: grafico ruotabile e risultati leggibili. */
.g3-layout .work-col,.g3-layout .result-col{min-width:0}
.g3-topic{display:grid;gap:6px;font-size:.91rem;color:#365b7d;font-weight:760;margin:0 0 16px}
.g3-topic select{width:100%;padding:11px 12px;border:1px solid #afc4da;border-radius:9px;color:#163c65;background:#f8fbff;font-size:1rem;font-weight:650}
.g3-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.g3-vector{min-width:0;border:1px solid #d7e3ef;border-radius:10px;padding:8px 10px 11px;margin:0;background:#fcfdff}
.g3-vector legend{font-size:.84rem;color:#214d78;font-weight:800;padding:0 5px}
.g3-components{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.g3-components label{display:grid;gap:5px;color:#5a6c80;font-size:.78rem;font-weight:700}
.g3-components input{min-width:0;width:100%;border:1px solid #b6c9db;border-radius:7px;padding:8px 6px;color:#153658;background:white;font-size:.96rem}
.g3-components input:invalid{border-color:#b76455}
.g3-mode-help{background:#f0f6fd;border-radius:8px;color:#466582;font-size:.84rem;padding:9px 11px;margin:13px 0 0;line-height:1.6}
.g3-camera-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.g3-view-presets,.g3-zoom{display:flex;gap:6px;flex-wrap:wrap}
.g3-camera-controls button{border:1px solid #cad9e9;background:#f0f6fd;border-radius:8px;color:#1d5387;font-weight:750;font-size:.83rem;padding:8px 10px}
.g3-camera-controls button:hover,.g3-camera-controls button[aria-pressed="true"]{background:#215f9f;color:#fff;border-color:#215f9f}
.g3-zoom button{min-width:35px}
.g3-checks{margin:12px 0 6px}
.g3-description{border-left-color:#3477b6;margin:10px 0 12px}
.g3-canvas-wrap{background:#fff;border:1px solid #dae4ef;border-radius:13px;overflow:hidden;position:relative}
#g3-canvas{display:block;width:100%;height:auto;aspect-ratio:960/650;touch-action:none;cursor:grab;outline-offset:-4px}
#g3-canvas:active{cursor:grabbing}
#g3-canvas:focus-visible{outline:3px solid #4d93db}
.g3-legend{padding-top:4px}
.g3-instruction-text p{color:#425e78;font-size:.89rem;line-height:1.7;margin:8px 0}
.g3-instruction-text b{color:#21486c}
.g3-instruction-text ul{padding-left:18px;color:#425e78;font-size:.89rem}
.g3-instruction-text li{margin:7px 0}
.g3-instruction-text code{background:#eaf2fc;padding:1px 4px;border-radius:4px}
.g3-results-col{display:grid;grid-template-columns:1fr}
.g3-result-table{width:100%;border-collapse:collapse;font-size:.88rem}
.g3-result-table th,.g3-result-table td{padding:8px 4px;border-bottom:1px solid #e7edf5;vertical-align:top}
.g3-result-table th{text-align:left;color:#51677f;font-weight:600;width:55%}
.g3-result-table td{font-weight:700;color:#153f6a;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.g3-result-table .g3-section th{padding-top:15px;color:#163e69;font-size:.99rem;font-weight:850}
.g3-result-table .g3-section:first-child th{padding-top:0}
.g3-status{padding:9px 11px;margin:12px 0 4px;border:1px solid #d5e3f1;border-radius:9px;background:#f2f7fd;font-size:.86rem;color:#315777}
.g3-warning{background:#fff6ee;border-color:#efcdad;color:#874b25}
.g3-step{padding:11px 0;border-bottom:1px solid #e7eef6}
.g3-step:first-child{padding-top:0}
.g3-step:last-child{border:0}
.g3-step h3{font-size:.98rem;color:#1d4a79;margin:2px 0 6px}
.g3-step p{font-size:.84rem;color:#5a7085;line-height:1.6;margin:5px 0}
.g3-math{padding:9px 10px;margin:7px 0;background:#f4f7fd;border-radius:8px;color:#173e66;font-size:.89rem;max-width:100%;overflow-x:auto;overflow-y:hidden}
.g3-math mjx-container{margin:0!important;text-align:left!important;max-width:100%}
.g3-theory{margin-top:18px}
@media(max-width:1090px){.g3-results-col{grid-template-columns:repeat(2,minmax(0,1fr))}.g3-results-col .panel{min-width:0}}
@media(max-width:750px){.g3-fields{grid-template-columns:1fr 1fr}.g3-results-col{grid-template-columns:1fr}}
@media(max-width:470px){.g3-fields{grid-template-columns:1fr}.g3-components input{padding:8px 9px}.g3-camera-controls button{padding:7px 8px;font-size:.78rem}.g3-view-presets{gap:4px}.g3-zoom{gap:4px}}
/* Percorso leggibile anche su telefoni molto stretti (320 px). */
.breadcrumb{flex-wrap:wrap;row-gap:3px}


/* v2.2.1 — layout personalizzato: input nel menu a sinistra, grafico 3D a destra,
   spiegazioni, risultati e calcoli sotto il grafico. */
.layout.g3-split-layout{grid-template-columns:minmax(0,345px) minmax(0,1fr);gap:18px;align-items:start}
.g3-split-layout>.g3-sidebar,.g3-split-layout>.g3-content{min-width:0;display:grid;gap:18px;align-content:start}
.g3-split-layout .g3-sidebar>.panel{min-width:0;padding:18px 16px}
.g3-split-layout .g3-fields{grid-template-columns:minmax(0,1fr);gap:10px}
.g3-split-layout .g3-vector{min-width:0}
.g3-split-layout .g3-components{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.g3-split-layout .g3-components label{min-width:0}
.g3-split-layout .g3-components input{min-width:0}
.g3-split-layout .g3-sidebar .examples{gap:7px}
.g3-split-layout .g3-content>.panel{min-width:0}
.g3-split-layout .g3-graph{scroll-margin-top:55px}
.g3-split-layout .g3-graph .checks{display:flex;flex-wrap:wrap;gap:10px 13px}
.g3-split-layout .g3-content .g3-math{overflow-x:auto;overflow-y:hidden}
@media(max-width:920px){
 .layout.g3-split-layout{grid-template-columns:minmax(0,1fr)}
 .g3-split-layout .g3-sidebar>.panel{padding:21px 23px}
 .g3-split-layout .g3-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media(max-width:710px){
 .g3-split-layout .g3-sidebar>.panel{padding:16px}
 .g3-split-layout .g3-fields{grid-template-columns:1fr}
}
@media(max-width:350px){
 .g3-split-layout .g3-components{gap:4px}
 .g3-split-layout .g3-components input{padding:7px 4px;font-size:.88rem}
}

/* v2.3 — filtri di costruzione, senza alterare il layout personalizzato. */
.g3-highlight-control{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#315677;font-weight:750;font-size:.84rem;margin:9px 0 8px}
.g3-highlight-control select{min-width:190px;max-width:100%;padding:8px 11px;border:1px solid #c8d9ec;border-radius:8px;background:#f2f7fd;color:#154879;font:inherit;font-weight:650}
.g3-checks label{white-space:normal}
.g3-description span{display:block}
@media(max-width:520px){.g3-highlight-control{display:grid;gap:5px}.g3-highlight-control select{width:100%}}