.drawing-area .diagnostics { max-height: 180px; overflow: auto; }
.diagnostic p { margin: 6px 0; font-size: 12px; }
.diagnostic button { margin: 5px 8px 0 0; padding: 6px 10px; min-height: 34px; }
.diagnostic.blocking { background: #fff1ed; border-left: 3px solid #c54128; color: #842b1c; }
.diagnostic-overlay { stroke: #df7c00; stroke-width: 8; fill: #ffca4d40; opacity: .7; }
.diagnostic-overlay circle { stroke-width: 3; }
.section-builder { width: min(620px,94vw); max-width: 94vw; max-height: 92vh; overflow-y: auto; padding: 24px; color: #233450; background: #fff; }
.section-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.section-builder label,.learning-guide label { display: flex; flex-direction: column; gap: 6px; }
.section-builder input,.section-builder select,.learning-guide select { min-width: 0; width: 100%; padding: 8px; border: 1px solid #9eafc5; border-radius: 5px; color: #233450; background: #fff; }
.section-builder button,.learning-guide button { min-height: 38px; padding: 7px 10px; margin: 4px 5px 4px 0; }
.section-builder fieldset { margin: 16px 0; max-height: 140px; overflow: auto; }
.section-builder fieldset label { flex-direction: row-reverse; justify-content: end; align-items: center; margin: 7px 0; }
.section-builder input[type=checkbox] { width: auto; }
.section-builder [hidden] { display: none; }
.section-preview svg { display: block; width: 220px; max-width: 100%; height: 150px; margin: 10px auto; font-size: 12px; }
.section-builder pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.learning-guide { position: fixed; z-index: 40; right: 16px; bottom: 16px; width: min(350px,calc(100vw - 32px)); max-height: 45vh; overflow: auto; padding: 16px; border: 1px solid #b5c8e4; border-radius: 12px; background: #fff; color: #233450; box-shadow: 0 8px 32px #142e4f33; font: 13px/1.5 Inter,"Segoe UI",sans-serif; }
.learning-guide[hidden] { display: none; }
.learning-guide h3 { margin: 8px 0; }
.guide-progress { margin: 8px 0; color: #45638d; }
.guide-highlight { outline: 3px solid #dc8800!important; outline-offset: 3px; }
.guide-actions { display: flex; flex-wrap: wrap; }
@media(max-width:590px) { .section-builder { padding: 14px; } .section-fields { grid-template-columns: 1fr; } .learning-guide { max-height: 34vh; } }
@media print { .learning-guide,.section-builder { display: none!important; } }

/* Keep dimensions, formulas and apply/close controls together on a laptop. */
@media(min-width:700px){
 .section-builder{width:min(720px,94vw);padding:14px;font-size:12px;}
 .section-builder h2{margin:0 0 10px;font-size:18px;}
 .section-builder form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:6px 12px;}
 .section-builder form> *{grid-column:1/-1;min-width:0;margin:0;}
 .section-builder form>.section-fields{grid-column:1;grid-row:1;gap:8px;}
 .section-builder form>.section-preview{grid-column:2;grid-row:1;align-self:center;}
 .section-builder .section-preview svg{height:116px;margin:0 auto;}
 .section-builder label{font-size:12px;gap:3px;}
 .section-builder input,.section-builder select{padding:5px;min-height:30px;font-size:12px;}
 .section-builder input[type=checkbox]{min-height:0;}
 .section-builder button{min-height:30px;padding:5px 8px;margin:0;font-size:12px;}
 .section-builder pre{font-size:11px;line-height:1.45;padding:8px;}
 .section-builder p{font-size:12px;line-height:1.4;}
 .section-builder p:empty{display:none;}
 .section-builder fieldset{margin:0;max-height:84px;padding:4px 8px;}
 .section-builder fieldset label{margin:4px 0;}
 .section-selection-controls,.section-footer{display:flex;gap:6px;justify-content:flex-end;}
}

.section-builder{max-height:calc(100dvh - 32px);overflow:auto;font-size:14px}
.section-builder .section-footer{position:sticky;bottom:-14px;padding:10px 0;background:#fff;border-top:1px solid #dce6f3;z-index:2;flex-wrap:wrap}
.section-equations{background:#f3f7fd;border-radius:8px;padding:8px 12px}
.section-equations .math-equation{margin:4px 0;padding:2px}
.section-equations p{margin:4px 0}
.learning-guide{top:70px;bottom:auto;max-height:calc(100dvh - 100px);overflow:auto}
.learning-guide .guide-actions{position:sticky;bottom:-16px;background:#fff;padding-top:8px;border-top:1px solid #dce6f3;display:flex;flex-wrap:wrap;gap:4px}
@media(max-width:590px){.learning-guide{top:76px;max-height:calc(100dvh - 110px)}.section-builder .section-fields{grid-template-columns:1fr}.section-builder label,.section-builder input,.section-builder p{font-size:14px}}