/* Geometria v2.1.1 — trasformazioni geometriche */
.tr-heading-row,.tr-trans-heading{display:flex;justify-content:space-between;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:11px}
.tr-heading-row h3,.tr-trans-heading h3{color:#1e4266;font-size:1rem;margin:0}
.tr-heading-row label,.tr-trans-heading label,.tr-params label{display:grid;gap:5px;color:#516883;font-size:.82rem;font-weight:700;min-width:0}
.tr-heading-row select,.tr-trans-heading select,.tr-params input{font:inherit;border:1px solid #b9cadb;background:#fff;border-radius:8px;padding:8px 9px;color:#1d3e61;min-width:0;width:100%}
.tr-heading-row select{min-width:175px}.tr-trans-heading select{min-width:198px}
.tr-point-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.tr-point{border:1px solid #d9e4ef;border-radius:10px;min-width:0;padding:7px 10px 9px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tr-point legend{color:#1f4165;font-size:.84rem;font-weight:800;padding:0 4px}
.tr-point label{font-size:.8rem;font-weight:700;color:#546b84;display:grid;gap:4px}
.tr-point input{width:100%;min-width:0;font:inherit;color:#1c405e;border:1px solid #bed0e2;border-radius:7px;padding:7px 8px}
.tr-dot{width:9px;height:9px;display:inline-block;border-radius:50%;margin-right:5px}
.tr-trans-heading{padding-top:17px;border-top:1px solid #e6edf5;margin-top:15px}
.tr-params{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tr-params label{font-size:.79rem}
.tr-hint{margin:12px 0 0;padding:9px 10px;border-radius:8px;background:#eff5fc;color:#536d86;font-size:.82rem}
.tr-graph .tr-graph-info{border-left-color:#8e58b9}.tr-checkbox{display:flex;align-items:center;gap:9px;color:#214469;font-size:.9rem;cursor:pointer}
.tr-checkbox input{accent-color:#2465a8;width:17px;height:17px}
.tr-extras #tr-second-panel{margin-top:10px}
.tr-extras #tr-second-panel[hidden]{display:none}
.tr-name{color:#1f466d;margin:13px 0 5px;font-size:.98rem}
.tr-name:first-child{margin-top:0}
.tr-values td{font-weight:700}.tr-values th{width:46%}
.tr-note{background:#f1f6fc;color:#45617e;padding:10px 12px;border-radius:9px;font-size:.84rem;line-height:1.6}
#tr-plot .tr-original{fill:#347bb51b;stroke:#236ab5;stroke-width:3;vector-effect:non-scaling-stroke}
#tr-plot .tr-final{fill:#19957d15;stroke:#14967c;stroke-width:3.5;vector-effect:non-scaling-stroke}
#tr-plot .tr-intermediate{fill:#df92380d;stroke:#d98d35;stroke-width:2.6;stroke-dasharray:8 5;vector-effect:non-scaling-stroke}
#tr-plot .tr-axis-geom{stroke:#8959b5;stroke-width:2.6;stroke-dasharray:9 6;vector-effect:non-scaling-stroke}
#tr-plot .tr-center-helper{stroke:#8959b5;stroke-width:2;fill:none;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
#tr-plot .tr-connect{stroke:#a5b4c3;stroke-width:1.5;stroke-dasharray:5 6;vector-effect:non-scaling-stroke;fill:none}
#tr-plot .tr-connect-two{stroke:#cfaf8d;stroke-width:1.45;stroke-dasharray:5 6;vector-effect:non-scaling-stroke;fill:none}
#tr-plot .tr-vector{stroke:#9261b6;stroke-width:2.6;vector-effect:non-scaling-stroke}
#tr-plot .tr-label{font:800 16px system-ui,sans-serif;paint-order:stroke;stroke:#fff;stroke-width:4;stroke-linejoin:round}
#tr-plot .tr-marker{stroke:#fff;stroke-width:2.3;vector-effect:non-scaling-stroke}
#tr-plot .tr-hit{fill:transparent;cursor:grab;touch-action:none}
#tr-plot .tr-hit:active{cursor:grabbing}
#tr-steps .mathblock{max-width:100%;overflow-x:auto;overflow-y:hidden;padding:10px 9px;min-width:0;line-height:1.7}
#tr-steps .mathblock mjx-container{max-width:none!important;overflow:visible!important;display:inline-block!important;margin:0!important;vertical-align:middle}
#tr-steps .mathblock .MathJax{max-width:none}
@media(max-width:710px){.tr-point-grid{grid-template-columns:1fr 1fr}.tr-point{grid-template-columns:1fr 1fr;padding:7px}.tr-params{grid-template-columns:repeat(2,minmax(0,1fr))}.tr-heading-row select,.tr-trans-heading select{min-width:0;width:100%}.tr-heading-row label,.tr-trans-heading label{width:100%}.tr-graph .plot-frame svg{min-height:0}}
@media(max-width:420px){.tr-point-grid{grid-template-columns:1fr}.tr-params{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Non allargare la pagina su schermi stretti: le formule scorrono soltanto nel proprio riquadro. */
html,body{overflow-x:clip}

/* v2.1.1 - timeline e animazione con comandi accessibili */
.tr-animation{background:#f3f7fc;border:1px solid #dce7f2;border-radius:10px;padding:12px 13px;margin:12px 0 14px;display:grid;gap:10px;min-width:0}
.tr-animation-actions,.tr-animation-bottom{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.tr-animation-actions button{font-size:.84rem;min-height:35px;padding:7px 12px}
.tr-animation-actions button:disabled{opacity:.45;cursor:not-allowed}
.tr-animation-actions .tr-play{min-width:97px}
.tr-animation .tr-speed{margin-left:auto;font-size:.8rem;color:#365572;font-weight:700;display:flex;align-items:center;gap:6px}
.tr-animation .tr-speed select{border:1px solid #b8c9da;color:#1c436a;padding:6px 8px;border-radius:7px;background:#fff;font:inherit}
.tr-timeline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;color:#234c73;font-size:.84rem;font-weight:700}
.tr-timeline input{width:100%;accent-color:#21856c;cursor:pointer;min-width:0}
.tr-timeline output{font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
.tr-animation-bottom{font-size:.8rem;color:#4a6782;justify-content:space-between}
.tr-animation-bottom label{display:flex;gap:5px;align-items:center;cursor:pointer}
.tr-animation-bottom input{accent-color:#2465a8}
#tr-phase{font-weight:700;color:#235882}
.tr-live-coords{background:#fff;color:#2a5670;border-radius:7px;padding:8px 10px;margin:0;font-size:.79rem;line-height:1.55;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tr-animation-help{margin:0;font-size:.76rem;line-height:1.5;color:#62778d}
#tr-plot .tr-destination{fill:none;stroke:#61b2a0;stroke-width:1.7;stroke-dasharray:8 6;opacity:.65;vector-effect:non-scaling-stroke}
#tr-plot .tr-moving{fill:#16957c1f;stroke:#0c9779;stroke-width:4;vector-effect:non-scaling-stroke}
#tr-plot .tr-path{fill:none;stroke:#abc0d3;stroke-width:1.8;stroke-dasharray:3 5;opacity:.7;vector-effect:non-scaling-stroke}
#tr-plot .tr-path-progress{fill:none;stroke:#8c61b6;stroke-width:2.5;opacity:.95;vector-effect:non-scaling-stroke}
#tr-plot .tr-current-label{font-weight:900}
@media(max-width:460px){.tr-animation{padding:10px 9px}.tr-animation-actions{gap:6px}.tr-animation-actions button{padding:6px 7px;min-height:32px;font-size:.78rem}.tr-animation .tr-speed{margin-left:0}.tr-timeline{gap:6px;font-size:.77rem}.tr-animation-bottom{gap:6px}}

/* v2.1.2 — Layout a due colonne: parametri a sinistra, grafico e spiegazioni a destra.
   Le regole sono specifiche delle trasformazioni, senza modificare gli altri strumenti. */
.layout.tr-layout{grid-template-columns:minmax(0,345px) minmax(0,1fr);gap:18px;align-items:start}
.tr-sidebar,.tr-content{min-width:0;display:grid;gap:18px;align-content:start}
.tr-sidebar .panel{padding:18px 16px}
.tr-sidebar .tr-point-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tr-sidebar .tr-params{grid-template-columns:repeat(2,minmax(0,1fr))}
.tr-sidebar .tr-heading-row label,.tr-sidebar .tr-trans-heading label{width:100%}
.tr-sidebar .tr-heading-row select,.tr-sidebar .tr-trans-heading select{width:100%;min-width:0}
.tr-content .tr-graph{min-width:0}
.tr-content .tr-graph .plot-frame{margin:9px 0 12px}
.tr-content .tr-graph .checks{margin-top:12px}
@media(max-width:920px){
 .layout.tr-layout{grid-template-columns:minmax(0,1fr)}
 /* Su tablet e smartphone il grafico segue subito l'editor, prima di T2. */
 .tr-layout .tr-sidebar,.tr-layout .tr-content{display:contents}
 .tr-layout .trans-editor{order:1}
 .tr-layout .tr-graph{order:2}
 .tr-layout .trans-extras{order:3}
 .tr-layout section[aria-labelledby="tr-results-title"]{order:4}
 .tr-layout section[aria-labelledby="tr-construction-title"]{order:5}
 .tr-layout section[aria-labelledby="tr-steps-title"]{order:6}
 .tr-sidebar .panel{padding:21px 23px}
 .tr-sidebar .tr-params{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:710px){
 .tr-sidebar .panel{padding:16px}
 .tr-sidebar .tr-params{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){.tr-sidebar .tr-point-grid{grid-template-columns:1fr}}