/* Geometria v1.7 - Studio della circonferenza */
.circle-editor,.circle-extras{position:relative}
.circle-mode{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:3px 0 15px}
.circle-mode label{font-size:.87rem;font-weight:750;color:#34536f}
.circle-mode select{border:1px solid #afc4dc;border-radius:9px;background:#fff;padding:9px 11px;color:#1e456b;max-width:100%;font-size:.89rem;flex:1 1 290px}
.circle-field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.circle-field-grid label,.field-with-label{display:block;color:#49627d;font-size:.84rem;font-weight:700;min-width:0}
.circle-field-grid input,.field-with-label input{display:block;width:100%;margin-top:6px;border:1px solid #b8cadb;border-radius:8px;padding:9px 11px;color:#193a5b;background:white;font-size:1rem;min-width:0}
.circle-extra-section{border-top:1px solid #e4eaf3;padding:15px 0 13px;display:grid;gap:12px}
.circle-extra-section:first-of-type{border-top:none;padding-top:0}
.circle-toggle{display:flex;align-items:center;gap:9px;color:#183e68;font-size:.90rem;cursor:pointer}
.circle-toggle input{accent-color:#235eaa;width:17px;height:17px;flex:none}
.circle-extras .small-label{line-height:1.5}
.circle-small-hint{margin:5px 0 0}
.circle-extras input:disabled{background:#f1f5fa;opacity:.7}
#circle-error:not(:empty){margin-top:12px;background:#fff3f0;border:1px solid #ecc2b7;padding:10px;border-radius:8px}
#circle-info{border-left-color:#2c6fad;margin-top:13px;line-height:1.55}
#circle-info em{font-weight:normal;color:#45647f}
.circle-result-head{color:#153e68;font-size:1rem;font-weight:800;margin:15px 0 4px}
.circle-result-head:first-child{margin-top:0}
.circle-value{word-break:break-word}
.plot-frame svg .circle-main{stroke:#2166ae;stroke-width:2.9;fill:rgba(33,102,174,.045);vector-effect:non-scaling-stroke}
.plot-frame svg .circle-second{stroke:#da793f;stroke-width:2.5;fill:rgba(218,121,63,.045);vector-effect:non-scaling-stroke}
.plot-frame svg .circle-line{stroke:#16816c;stroke-width:2.7;fill:none;vector-effect:non-scaling-stroke}
.plot-frame svg .circle-tangent{stroke:#9360ab;stroke-width:2.15;stroke-dasharray:8 5;fill:none;vector-effect:non-scaling-stroke}
.plot-frame svg .circle-helper{stroke:#b7c5d3;stroke-width:1.9;stroke-dasharray:5 6;fill:none;vector-effect:non-scaling-stroke}
.plot-frame svg .circle-handle{stroke:#fff;stroke-width:3;cursor:grab;vector-effect:non-scaling-stroke}
.plot-frame svg .circle-handle-hit{fill:transparent;cursor:grab;touch-action:none}
.plot-frame svg .circle-label{font:700 17px system-ui,sans-serif;stroke:white;stroke-width:4;paint-order:stroke;stroke-linejoin:round}
.plot-frame svg .circle-small-label{font:750 14px system-ui,sans-serif;stroke:white;stroke-width:4;paint-order:stroke;stroke-linejoin:round}
.plot-frame svg .circle-anno{font:600 12px system-ui,sans-serif;stroke:white;stroke-width:3;paint-order:stroke}
@media(max-width:500px){.circle-field-grid{gap:7px}.circle-field-grid input{padding:8px 6px}.circle-field-grid label{font-size:.75rem}.circle-mode select{flex-basis:100%}.circle-editor .examples{gap:4px 9px}}
/* Su schermi stretti il contenitore non deve allargare la pagina: le formule
   molto lunghe mantengono il proprio scorrimento orizzontale interno. */
@media(max-width:710px){
 .page{overflow-x:clip}
 #circle-steps .mathblock{max-width:100%;overflow-x:auto}
 #circle-steps mjx-container{max-width:100%;overflow-x:auto!important;overflow-y:hidden}
}

/* v1.7: dopo i dati della circonferenza compare subito il grafico;
   le costruzioni facoltative sono raggruppate nel pannello successivo. */
.circle-editor{margin-bottom:0}
.circle-editor .examples{margin-top:11px;padding-top:10px}
.graph-panel{border-color:#c3d8ed;box-shadow:0 5px 24px rgba(28,89,143,.065)}
.circle-extras{background:#fcfdff}
.circle-extras .panel-heading{margin-bottom:10px}
@media(max-width:710px){
 .circle-editor .examples{gap:4px 8px}
 .graph-panel .help{line-height:1.45}
}

.graph-panel{scroll-margin-top:52px}

/* v1.8: MathJax non deve introdurre una seconda scrollbar verticale. */
#circle-steps .mathblock{overflow-x:auto;overflow-y:hidden;line-height:1.85;padding:13px 10px;max-width:100%}
#circle-steps .mathblock mjx-container{display:inline-block!important;overflow:visible!important;max-width:none!important;margin:0!important;vertical-align:middle}