:root{--navy:#172d43;--ink:#233649;--muted:#73808a;--border:#dce2e7;--bg:#f4f6f7;--orange:#df642e;--teal:#008e9b;--pale:#eaf5f5;--white:#fff;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:14px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:#fff;color:var(--ink);border-radius:5px;padding:8px 12px;line-height:1.3}button:hover{background:#f2f5f7;border-color:#b5c0c9}button:disabled{opacity:.38;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #64bcca;outline-offset:2px}input,select{border:1px solid #d4dde3;border-radius:4px;padding:7px 9px;color:var(--ink);background:#fff;min-width:0}input[type=number]{font-family:var(--mono)}input[type=checkbox]{accent-color:var(--teal);vertical-align:middle;margin:0 4px 0 0}h1,h2,h3,p{margin:0}h1{font-size:20px;letter-spacing:-.5px;font-weight:650}h2{font-size:22px;letter-spacing:-.6px;font-weight:600}h3{font-size:13px;font-weight:650}.topbar{height:72px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 34px}.brand{display:flex;align-items:center;gap:12px}.brandmark{font-size:36px;color:#fa8c52;line-height:1}.course{border-left:1px solid #536172;margin-left:9px;padding-left:21px;font-size:10px;letter-spacing:1.7px;color:#c3cdd6;font-weight:600}.file-actions{display:flex;gap:4px}.quiet{border:0;background:transparent;color:#e0e7ed;font-size:12px}.quiet:hover{background:#294259}.primary{background:var(--orange);color:white;border-color:var(--orange);font-weight:600;padding:11px 17px;box-shadow:0 2px 3px #df642e14}.primary:hover{background:#c85626;border-color:#c85626}.primary span{margin-left:20px}.modelbar{display:flex;align-items:center;justify-content:space-between;padding:25px 0 22px;gap:20px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:var(--muted);display:block;margin-bottom:7px}.modeltitle{display:flex;align-items:center;gap:15px}.badge{border:1px solid #ccd6de;background:#eef2f5;font-size:9px;letter-spacing:1px;padding:4px 7px;border-radius:3px;color:#657887;font-weight:600}.model-actions{display:flex;gap:14px;align-items:center}.example-label{font-size:12px;color:var(--muted)}.model-actions select{width:205px;padding:10px 12px}.model-actions .primary{margin-left:5px}main{max-width:1680px;margin:auto;padding:0 34px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;align-items:start}.drawing-panel,.inspector,.data-panel{border:1px solid var(--border);border-radius:7px;background:white;box-shadow:0 2px 4px #16304803;overflow:hidden}.drawing-toolbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid var(--border);gap:12px}.segmented{display:flex;gap:3px}.segmented button{font-size:14px;padding:6px 10px;background:transparent;border-color:transparent}.segmented button span{font-size:12px;margin-left:5px}.segmented button.active{background:#edf2f6;color:#19394e;border-color:#dce4ea}.canvas-options{display:flex;align-items:center;gap:7px;font-size:11px}.canvas-options label{color:var(--muted);display:flex;align-items:center;gap:6px}.canvas-options select{font-size:11px;padding:5px}.icon-btn{font-size:12px;border-color:transparent;padding:5px 7px}.canvas-wrap{position:relative;overflow:hidden;background:#fcfdfd}canvas{width:100%;height:100%;display:block;touch-action:none}.canvas-label{position:absolute;top:18px;left:22px;font-family:var(--mono);font-size:10px;letter-spacing:.1px;color:#7c8a94;display:flex;align-items:center;gap:7px;pointer-events:none}.live-dot{height:5px;width:5px;border-radius:100%;background:#8da2ae}.axis-note{position:absolute;bottom:16px;right:20px;color:#8a97a0;font-family:var(--mono);font-size:10px;pointer-events:none}.drawing-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:42px;padding:10px 18px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}.legend{display:flex;gap:13px;white-space:nowrap;align-items:center}.legend span,.legend label{display:inline-flex;align-items:center;gap:4px}.line{width:19px;display:inline-block;height:0;border-top:2px solid var(--navy)}.line.deformed{border-color:var(--teal);border-top-style:dashed}#scale-note{font-family:var(--mono);font-size:9px}.inspector{grid-column:2;grid-row:1 / span 2;min-height:517px;padding:20px}.inspector-header{display:flex;justify-content:space-between;align-items:center}.inspector-header .eyebrow{margin:0}.text-button{background:none;border:0;color:var(--teal);font-size:11px;padding:2px 0}.text-button:hover{background:none;text-decoration:underline}.inspector h2{font-size:18px;margin:20px 0 7px}.inspector p{font-size:11px;color:var(--muted);line-height:1.8}.property-section{margin-top:21px;border-top:1px solid var(--border);padding-top:16px}.property-section h3{margin-bottom:12px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.field{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--muted)}.field input,.field select{width:100%;font-size:12px}.field.full{grid-column:1 / -1}.support-checks{display:flex;gap:15px;font-size:12px;margin-top:12px}.property-actions{display:flex;gap:8px;margin-top:20px}.property-actions button{font-size:11px}.danger{color:#b23e30}.conventions{border-top:1px solid var(--border);margin-top:24px;padding-top:16px}.conventions h3{font-size:11px;margin-bottom:7px}.conventions p{font-size:10px;line-height:1.9}.conventions p+p{margin-top:12px}.model-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:23px}.model-summary div{background:#f4f7f8;border:1px solid #e7ecef;padding:11px;border-radius:4px}.model-summary strong{font-family:var(--mono);font-size:22px;font-weight:500;display:block;margin-bottom:4px}.model-summary span{font-size:10px;color:var(--muted)}.tip{margin-top:21px;background:#f9f4ef;padding:12px;border-left:2px solid #e9b698;font-size:11px;line-height:1.7;color:#846850}.data-panel{min-width:0}.data-tabs{display:flex;align-items:center;gap:19px;border-bottom:1px solid var(--border);padding:0 19px;overflow-x:auto;white-space:nowrap}.data-tabs>button{font-size:12px;position:relative;padding:16px 0 14px;border:0;border-radius:0;background:transparent;color:#74828b}.data-tabs>button.active{color:var(--ink);font-weight:600}.data-tabs>button.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--orange)}.data-tabs span{background:#edf2f4;padding:2px 5px;margin-left:4px;font-size:9px;border-radius:3px;font-family:var(--mono)}.solve-status{margin-left:auto;color:#89969e;font-size:10px;display:flex;gap:5px;align-items:center}.solve-status.solved{color:#11857d}.solve-status.solved:before{content:"✓"}.data-content{padding:19px;min-height:218px;max-height:590px;overflow:auto}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:21px}.stat{border-right:1px solid var(--border)}.stat:last-child{border:0}.stat span{display:block;font-size:9px;letter-spacing:1px;color:var(--muted);margin-bottom:9px;font-weight:600}.stat strong{font-size:21px;font-weight:500;letter-spacing:-.5px;font-family:var(--mono)}.stat small{font-size:10px;font-weight:400;color:var(--muted);margin-left:5px}.stat .small-stat{font-family:inherit;font-size:16px;font-weight:500;letter-spacing:0}.subtabs{display:flex;gap:8px;margin-bottom:15px;flex-wrap:wrap}.subtabs button{padding:5px 9px;font-size:11px;border-color:transparent;background:#f2f5f7}.subtabs button.active{color:var(--teal);background:var(--pale)}.table-wrap{overflow:auto;width:100%}table{border-collapse:collapse;width:100%;font-size:11px;white-space:nowrap}th{text-align:right;background:#f6f8f9;color:#80909b;font-weight:500;padding:8px 10px;border-bottom:1px solid var(--border);font-size:10px}td{text-align:right;padding:9px 10px;border-bottom:1px solid #edf0f2;font-family:var(--mono);font-size:11px}th:first-child,td:first-child{text-align:left}tr:last-child td{border-bottom:0}td input{width:75px;padding:5px 6px;font-size:11px}td select{padding:5px 6px;font-size:11px;max-width:95px}td input[type=checkbox]{width:auto}td .wide-input{width:100px}.row-id{color:var(--teal);font-family:var(--mono);border:0;padding:1px;background:none}.table-controls{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:13px;font-size:10px;color:var(--muted)}.table-controls button{font-size:11px;padding:6px 10px}.caption{font-size:10px;line-height:1.8;color:var(--muted);margin-top:12px}.empty-state{padding:22px 0}.empty-state h3{font-size:15px;margin-bottom:9px}.empty-state p{color:var(--muted);font-size:12px;line-height:1.8}.alert{background:#fff3ed;border:1px solid #edc3ab;border-radius:6px;color:#994721;padding:13px 18px;font-size:12px;margin-bottom:17px;line-height:1.6}.alert[hidden]{display:none}.matrix-block{margin-top:17px}.matrix-block h3{font-size:12px;margin-bottom:9px}.matrix table{width:auto;min-width:100%}.matrix td,.matrix th{font-size:10px;padding:8px;font-family:var(--mono);min-width:62px}.matrix td.zero{color:#bdc6cd}.matrix td.nonzero{color:#255d66;background:#f4faf9}.matrix td.diag{background:#e6f4f2}.equation{font-family:var(--mono);background:#f3f7f8;padding:12px 15px;border-left:2px solid var(--teal);font-size:13px;margin:13px 0;overflow:auto}.method-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.method-title p{font-size:11px;color:var(--muted)}.method-title select{font-size:11px;max-width:190px}.warning{color:#9a6c25;font-size:11px;line-height:1.7;margin:8px 0}.page-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0 23px;font-size:9px;letter-spacing:.3px;color:#8d99a2}.page-footer>span:first-child{letter-spacing:1.8px}.page-footer .text-button{font-size:10px}dialog{border:1px solid var(--border);border-radius:9px;max-width:590px;width:90%;padding:25px;color:var(--ink);box-shadow:0 15px 70px #172d4330}dialog::backdrop{background:#172d4380}.dialog-header{display:flex;justify-content:space-between;align-items:center}.dialog-header button{border:0;font-size:25px;padding:0 5px}.dialog-header h2{font-size:22px}dialog ol{font-size:13px;line-height:1.9;padding-left:20px}dialog p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:12px}.result-note{margin-bottom:12px;color:var(--muted);font-size:11px;line-height:1.7}.diagram-controls{display:flex;gap:10px;align-items:center;font-size:11px;margin-bottom:10px}.diagram-controls select{font-size:11px}#force-diagram{display:block;width:100%;height:150px;background:#fbfcfc;border:1px solid #e6edf0;border-radius:4px}.force-values{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:8px}.density-note{color:var(--muted);font-size:10px;line-height:1.6} @media(min-width:1500px){.workspace{grid-template-columns:minmax(0,1fr) 310px}}@media(max-width:1100px){.course{display:none}.workspace{grid-template-columns:minmax(0,1fr) 255px;gap:12px}main{padding:0 22px}.topbar{padding:0 22px}.inspector{padding:16px}.drawing-toolbar{padding:0 10px}.segmented button{padding:6px}.canvas-options{gap:2px}.example-label{display:none}.drawing-footer{flex-wrap:wrap}.data-tabs{gap:14px}.solve-status{display:none}}@media(max-width:790px){main{padding:0 13px}.topbar{height:62px;padding:0 14px}.brand{gap:7px}h1{font-size:17px}.brandmark{font-size:29px}.file-actions{gap:0}.quiet{font-size:10px;padding:7px}.modelbar{padding:20px 0 17px;flex-wrap:wrap;gap:15px}.model-actions{width:100%;justify-content:space-between;gap:10px}.model-actions select{flex:1;width:auto;max-width:250px}.model-actions .primary{margin:0}.workspace{grid-template-columns:1fr;gap:13px}.inspector{grid-column:1;grid-row:3;min-height:0}.data-panel{grid-row:2}.drawing-toolbar{height:auto;min-height:54px;flex-wrap:wrap;gap:4px;padding:9px}.canvas-options select{max-width:65px}.drawing-footer{font-size:9px;padding:9px 11px}.legend{gap:8px}.data-tabs{padding:0 13px;gap:18px}.data-content{padding:15px}.stats{gap:10px}.stat strong{font-size:17px}.stat .small-stat{font-size:13px}.page-footer{font-size:8px}.page-footer>span:first-child{display:none}.property-section,.conventions{margin-top:15px}.model-summary{margin-top:15px}.inspector h2{margin-top:12px}.conventions p+p{margin-top:7px}}@media(prefers-reduced-motion:no-preference){button{transition:background .12s,border-color .12s}}
.motion-controls{display:flex;align-items:end;gap:15px;flex-wrap:wrap;margin:15px 0}.motion-controls .field:first-child{flex:1;min-width:180px}.motion-controls button{font-size:11px;height:33px;color:#9c601e;background:#fbf3e9;border-color:#e9d6bb}.motion-controls input[type=range]{width:135px;height:32px;padding:0;accent-color:#bc6c22}.motion-description{font-size:11px;line-height:1.8;margin:12px 0;color:#7c6a54}.model-type-field{margin-top:12px}

.line.motion{border-color:#bc6c22}
/* Minimal workspace: the canvas is primary; properties appear on selection. */
:root{--orange:#315e77;--bg:#fafbfc;--border:#e3e7eb}
.topbar{height:58px;background:#fff;color:var(--ink);border-bottom:1px solid var(--border)}
.brand h1{font-size:17px;font-weight:600;letter-spacing:-.3px}.quiet{color:#596975}.quiet:hover{background:#f1f4f6}
main{max-width:1540px}.modelbar{padding:20px 0 18px}.modeltitle h2{font-size:18px}.badge{border:0;background:transparent;color:#71828d;font-size:11px;letter-spacing:0;font-weight:400;padding:5px 6px}
.workspace{grid-template-columns:minmax(0,1fr);gap:14px}.workspace.has-inspector{grid-template-columns:minmax(0,1fr) 255px}.inspector[hidden]{display:none}.drawing-panel,.data-panel,.inspector{box-shadow:none;border-radius:5px}.drawing-toolbar{height:50px;padding:0 12px}.drawing-footer{min-height:35px;padding:8px 13px}.primary{box-shadow:none;padding:10px 15px}.primary:hover{background:#264c63;border-color:#264c63}.primary span{margin-left:13px}
.inspector{padding:17px;min-height:0}.inspector h2{font-size:16px;margin:17px 0 16px}.property-section{margin-top:17px;padding-top:14px}.conventions{margin-top:19px;padding-top:14px}.conventions summary{font-size:10px;color:var(--muted);cursor:pointer}.conventions p{margin-top:9px}
.stats{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border)}.stat{display:flex;align-items:baseline;gap:8px;border:0}.stat span{display:inline;font-size:10px;letter-spacing:0;margin:0;font-weight:400}.stat strong{font-size:13px;font-weight:500;letter-spacing:0}.stat .small-stat{font-size:12px}.stat small{font-size:9px}.stat .small-stat small{display:none}.data-content{min-height:155px;padding:16px}.data-tabs>button{padding:13px 0 12px}.data-tabs{gap:22px}.subtabs{margin-bottom:12px}.subtabs button{font-size:10px;padding:4px 8px;background:transparent}.page-footer{justify-content:space-between;padding:13px 0;font-size:9px}.page-footer>span:first-child{letter-spacing:0}
@media(max-width:790px){.workspace.has-inspector{grid-template-columns:1fr}.inspector{grid-column:1;grid-row:2}.workspace.has-inspector .data-panel{grid-row:3}.topbar{height:54px}.modelbar{padding:17px 0 14px}.stats{gap:10px 20px}.stat{gap:5px}.stat strong{font-size:12px}.page-footer>span:first-child{display:block}.drawing-toolbar{height:auto;min-height:50px}.model-actions select{max-width:220px}}
.view-choice select{font-size:10px;padding:3px 6px;border-color:#e3e7eb;max-width:145px}.legend .view-choice{gap:6px}.line.moment{border-color:#b37a34}.line.shear{border-color:#656cac}.line[hidden]{display:none}.legend input[hidden]{display:none}#scale-note{max-width:330px;white-space:normal;font-size:9px}
/* Default view: canvas, tools, Solve. Details are opt-in. */
.topbar{height:54px;padding:0 22px}.brand{gap:18px}.brand h1{font-size:14px;letter-spacing:0}.brand #model-name{font-size:12px;color:#89959d}.header-actions{display:flex;align-items:center;gap:15px}.header-actions .primary{padding:7px 12px;font-size:12px}.header-actions .quiet{padding:6px;font-size:11px}main{max-width:none;padding:12px 20px}.drawing-toolbar{height:42px;min-height:42px}.drawing-footer{height:30px;min-height:30px;padding:5px 12px;justify-content:flex-end}.drawing-footer #tool-hint,.canvas-label,.legend>span:first-child{display:none}.legend{gap:10px}.legend #overlay-line,.legend #overlay-label{display:none}.data-panel[hidden]{display:none}.workspace.details-open .data-content{max-height:290px}.file-menu{position:relative;font-size:11px;color:#596975}.file-menu summary{cursor:pointer;list-style:none;padding:6px}.file-menu summary::after{content:' ▾';font-size:9px}.file-menu-panel{position:absolute;z-index:10;top:32px;right:0;width:245px;background:#fff;border:1px solid var(--border);border-radius:5px;padding:9px;box-shadow:0 6px 25px #193b4917;display:flex;flex-direction:column;gap:3px}.file-menu-panel button{border:0;text-align:left;font-size:12px;padding:9px 10px}.file-menu-panel label{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted);padding:12px 10px;border-top:1px solid var(--border);margin-top:5px}.file-menu-panel select{font-size:11px;padding:7px;width:100%}.file-menu-panel #kind-badge{font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink);padding:9px 10px}.view-choice[hidden]{display:none}.canvas-options{font-size:10px}.axis-note{bottom:12px;right:15px}.segmented button{padding:5px 8px}.segmented button span{font-size:11px}.drawing-panel{border-color:#e7ebee}.alert{margin-top:0}.workspace.has-inspector{grid-template-columns:minmax(0,1fr) 245px}@media(max-width:790px){.topbar{padding:0 13px}.brand{gap:9px}.brand #model-name{display:none}.header-actions{gap:8px}main{padding:10px}.workspace.has-inspector{grid-template-columns:1fr}.drawing-toolbar{height:auto}.drawing-footer{height:auto;min-height:30px}#scale-note{max-width:180px}}
/* No page chrome or permanent guidance: one canvas and one tool strip. */
body>main{padding:12px}main{max-width:none}.drawing-toolbar{height:42px;padding:0 10px;gap:10px;justify-content:flex-start}.drawing-toolbar .canvas-options{margin-left:auto}.drawing-toolbar .header-actions{gap:12px}.drawing-toolbar .view-choice{font-size:11px;white-space:nowrap}.drawing-toolbar .view-choice select{font-size:11px;padding:5px 7px}.drawing-panel{border-radius:4px}.segmented{gap:0}.drawing-toolbar .header-actions .primary{font-size:12px;padding:6px 12px}.drawing-toolbar .header-actions .quiet{font-size:11px;padding:5px}.file-menu-panel{top:31px}.canvas-label{display:none}[hidden]{display:none!important}@media(max-width:900px){.drawing-toolbar{flex-wrap:wrap;height:auto;min-height:42px;padding:6px 8px}.drawing-toolbar .canvas-options{gap:2px}.drawing-toolbar .header-actions{margin-left:auto;gap:7px}}
/* Refined controls and quieter, more legible structural drawing. */
.drawing-toolbar{padding:0 12px;gap:14px}.segmented button{border-radius:4px;padding:5px 9px}.segmented button.active{background:#eaf3f5;border-color:#d5e6ea;color:#28576a}.canvas-wrap{background:#fdfefe}.inspector{border-color:#e1e8ec;background:#fff}.field input,.field select{border-color:#dbe4e9;border-radius:5px;padding:8px 9px}.property-section{border-color:#e9eef1}.data-tabs>button.active:after{background:#315e77}.matrix td.nonzero{background:#f1f8f8;color:#245e68}.matrix td.diag{background:#e4f1f1}.matrix td.zero{color:#becad1}.matrix th{background:#f5f8fa}.motion-controls button{border-radius:5px}.workspace.details-open .data-content{max-height:390px}@media(max-width:900px){.drawing-toolbar{gap:8px;padding:6px 8px}}
.case-picker summary{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.case-panel{width:260px;padding:14px;gap:10px}.case-panel>select{font-size:12px;padding:8px}.case-panel .field{padding:0;border:0;margin:0}.case-panel .case-actions{display:flex;gap:3px}.case-actions button{padding:7px 8px;font-size:11px}.overlay-choices{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:8px;font-size:11px}.overlay-choices>span{font-size:10px;color:var(--muted);margin-bottom:3px}.case-panel .overlay-choices label{display:flex;flex-direction:row;align-items:center;gap:7px;padding:0;border:0;margin:0;font-size:11px;color:var(--ink)}.case-dot{width:14px;height:2px;display:inline-block;vertical-align:middle;background:#008e9b}.case-color-0{background:#008e9b}.case-color-1{background:#ba7e37}.case-color-2{background:#7568af}.case-color-3{background:#457fa8}.case-color-4{background:#b65f7c}.case-color-5{background:#63844b}.case-color-6{background:#527888}.case-color-7{background:#9c765a}.case-color-8{background:#6e77b2}.case-color-9{background:#968346}.case-color-10{background:#4a9182}.case-color-11{background:#a85c51}.case-legend{position:absolute;left:20px;top:17px;display:flex;gap:18px;z-index:1;font-size:11px;color:#657984;pointer-events:none}.case-legend span{display:flex;align-items:center;gap:6px}.axial-loads{margin:12px 0;font-size:10px;color:var(--muted)}.axial-loads summary{cursor:pointer;margin-bottom:10px}.case-picker[open]{z-index:12}

/* Compact contextual controls; feedback appears only while drawing. */
.drawing-readout{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;padding:5px 8px;border:1px solid #d7e4e9;border-radius:4px;background:#ffffffed;color:#28576a;font:11px var(--mono);box-shadow:0 2px 6px #16304808}
.property-disclosure summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;gap:7px}
.property-disclosure summary:before{content:'▸';font-size:10px;color:var(--muted)}
.property-disclosure[open] summary:before{content:'▾'}
.property-disclosure[open] summary{margin-bottom:12px}
.property-disclosure summary:focus-visible{outline:2px solid #64bcca;outline-offset:4px}

/* Allocate the actual remaining viewport; toolbars and panels own their space. */
html,body{height:100%;margin:0}
body{height:100dvh;overflow:hidden}
body>main{height:100%;display:flex;flex-direction:column;min-height:0;box-sizing:border-box}
.alert{flex:none;max-height:22%;overflow:auto;margin:0 0 10px;padding:8px 12px}
.workspace{flex:1;min-height:0;grid-template-rows:minmax(0,1fr);gap:12px;align-items:stretch}
.workspace.details-open{grid-template-rows:minmax(0,1fr) minmax(0,38%)}
.drawing-panel{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.drawing-toolbar{flex:none;flex-wrap:wrap;height:auto;min-height:42px;padding:6px 10px;gap:8px 12px}
.workspace .canvas-wrap,.workspace.details-open .canvas-wrap,.workspace.has-inspector .canvas-wrap{flex:1;height:auto;min-height:0;overflow:hidden}
.workspace .inspector{grid-column:2;grid-row:1/-1;min-height:0;overflow:auto;overscroll-behavior:contain}
.workspace .data-panel{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.data-tabs{flex:none;min-height:43px;overflow-x:auto;gap:18px;white-space:nowrap}
.data-tabs>button{flex:none}
.workspace.details-open .data-content,.data-content{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
.file-menu-panel{max-height:65dvh;overflow:auto}
.error-targets{display:inline-flex;gap:6px;flex-wrap:wrap;margin-left:10px}
.error-targets button{font-size:11px;padding:3px 7px;color:#994721;border-color:#e6bba3;background:#fffaf7}
.playback-controls{display:flex;align-items:center;gap:6px}
.playback-controls button{font-size:11px;padding:5px 9px;min-width:49px;color:#28576a;background:#f3f8f9;border-color:#d7e4e9}
.playback-controls select{font-size:11px;padding:5px 6px;max-width:170px}
.support-palette-title{grid-column:1/-1;margin:0 0 3px;font-size:12px;font-weight:600;color:#596f7d}
.support-palette-title small{display:block;margin-top:4px;font-size:11px;font-weight:400;line-height:1.4;color:var(--muted)}
.support-palette button{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:48px;padding:8px;font-size:12px;line-height:1.35;text-align:left;touch-action:none;user-select:none;cursor:grab}
.support-palette button:active{cursor:grabbing}
.support-palette button[aria-pressed=true]{background:#eaf3f5;border-color:#64bcca}
.support-palette button[data-support=free]{grid-column:1/-1;justify-content:center;color:#9d5334}
.support-palette svg,.support-drag-preview svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.support-drag-preview{position:fixed;z-index:30;pointer-events:none;display:flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 9px;background:#ffffffed;border:1px solid #b7c9d3;border-radius:5px;color:#315e77;box-shadow:0 3px 10px #172d4318;font-size:12px}
.support-drag-preview.snapped{border:2px solid #26788a;background:#eff9fb}
/* Compact menus on every device; fixed palettes escape canvas clipping. */
.support-controls,.load-controls{position:relative;display:flex;align-items:center;flex:none;min-width:0}
#supports-toggle,#loads-toggle{display:flex;align-items:center;justify-content:center;gap:5px;min-width:56px;min-height:32px;padding:5px 8px;font-size:11px;border-color:var(--border);background:#fff}
#supports-toggle:hover,#loads-toggle:hover{background:#f2f5f7;border-color:#b5c0c9}
#supports-toggle[aria-expanded=true],#loads-toggle[aria-expanded=true]{background:#eaf3f5;border-color:#8ebbc8;color:#28576a}
.support-controls .support-palette,.load-controls .load-palette{display:none;position:fixed;z-index:30;width:min(310px,calc(100vw - 28px));max-height:min(65dvh,calc(var(--app-height,100dvh) - 24px));overflow:auto;overscroll-behavior:contain;padding:10px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:1px solid #d7e2e8;border-radius:7px;background:#fff;box-shadow:0 8px 24px #193b491c}
.support-controls.touch-supports-open .support-palette{display:grid}
.load-controls.loads-open .load-palette{display:grid}
.load-palette-title{grid-column:1/-1;margin:0 0 3px;font-size:12px;font-weight:600;color:#596f7d}
.load-palette-title small{display:block;margin-top:4px;font-size:11px;font-weight:400;line-height:1.4;color:var(--muted)}
.load-palette button{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-width:0;min-height:68px;padding:8px;font-size:12px;line-height:1.35;text-align:left;touch-action:none;user-select:none;cursor:grab}
.load-palette button:active{cursor:grabbing}
.load-palette button:disabled{cursor:default}
.load-palette button[aria-pressed=true]{background:#eaf3f5;border-color:#64bcca}
.load-palette button>span{display:grid;grid-template-rows:2.7em auto;min-width:0}
.load-palette button small{display:block;margin-top:3px;font-size:10px;line-height:1.35;color:#73808a}
.load-palette button[data-load=remove]{grid-column:1/-1;min-height:48px;justify-content:center;color:#9d5334}
.load-palette button[data-load=remove]>span{grid-template-rows:auto auto}
.load-palette svg,.load-drag-preview svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.load-palette svg{width:25px;height:25px}
.load-drag-preview{position:fixed;z-index:31;pointer-events:none;display:flex;align-items:center;gap:7px;max-width:calc(100vw - 20px);white-space:nowrap;padding:6px 9px;background:#ffffffed;border:1px solid #b7c9d3;border-radius:5px;color:#9d5334;box-shadow:0 3px 10px #172d4318;font-size:12px}
.load-drag-preview small{display:block;margin-top:2px;font-size:10px;color:#73808a}
.load-drag-preview.snapped{border:2px solid #26788a;background:#eff9fb}
.support-drag-preview,.load-drag-preview{max-width:calc(100vw - 20px);white-space:normal;overflow-wrap:anywhere}
.support-drag-preview>span,.load-drag-preview>span{min-width:0}
body.desktop-placement .support-palette button,body.desktop-placement .load-palette button,
body.desktop-placement .support-palette button:active,body.desktop-placement .load-palette button:active{cursor:pointer}
body.desktop-placement .support-palette button:disabled,body.desktop-placement .load-palette button:disabled{cursor:default}
body.desktop-placement .support-palette-title small{display:none}
body.desktop-placement .support-palette-title:after{content:'Click a preset, then a node';display:block;margin-top:4px;font-size:11px;font-weight:400;line-height:1.4;color:var(--muted)}
.analysis-summary{position:absolute;z-index:2;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:6px 9px;border:1px solid #dce7eb;border-radius:4px;background:#ffffffed;color:#3e5968;font-size:11px;pointer-events:none}
@media(max-width:790px){
 body>main{padding:8px}
 .workspace.has-inspector{grid-template-rows:minmax(0,1fr) minmax(0,32%)}
 .workspace.has-inspector.details-open{grid-template-rows:minmax(0,1fr) minmax(0,30%) minmax(0,28%)}
 .workspace .inspector{grid-column:1;grid-row:2}
 .workspace.has-inspector .data-panel{grid-row:3}
 .data-tabs{padding:0 12px;gap:16px}
}

/* Menus escape panel clipping; their fixed offsets are clamped to the viewport. */
.file-menu-panel{position:fixed;z-index:30}
.file-menu-panel .menu-link{display:flex;align-items:center;min-height:32px;padding:9px 10px;border-radius:5px;color:var(--ink);font-size:12px;line-height:1.3;text-decoration:none;touch-action:manipulation}
.file-menu-panel .menu-link:hover{background:#f2f5f7}
.file-menu-panel .menu-link:focus-visible{outline:3px solid #64bcca;outline-offset:2px}

.preset-choice{display:flex;align-items:center;gap:6px;font-size:10px;color:#596f7d;white-space:nowrap}
.preset-choice select{font-size:11px;max-width:210px;padding:5px 7px;min-width:0}
#example-select.examples-cue{border-color:#64bcca;background:#eef8fa;box-shadow:0 0 0 2px #64bcca2e}
@media(prefers-reduced-motion:no-preference){
 #example-select.examples-cue{animation:examples-cue 1.5s ease-in-out 2}
 @keyframes examples-cue{0%,100%{box-shadow:0 0 0 2px #64bcca18}50%{box-shadow:0 0 0 4px #64bcca55}}
}
.drawing-toolbar .header-actions #new-btn{min-height:32px;padding:5px 9px;font-size:11px}
.local-axis-note{font-size:10px;line-height:1.6;color:#526e7d;margin:8px 0}
@media(max-width:790px){.preset-choice{max-width:100%}.preset-choice select{max-width:190px}}

/* Touch workspace: keep tools reachable while the drawing owns the viewport. */
body{height:var(--app-height,100dvh)}
body>main{padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
#tool-pan{display:none}
.panel-close{flex:none;min-width:44px;min-height:44px;padding:8px;border-color:transparent;background:transparent;color:#596f7d;font-size:12px}
.panel-close:hover{background:#edf3f5;border-color:#dbe5ea}
#close-details{font-size:24px;line-height:1;margin:0 4px}
.data-panel-header{display:flex;align-items:center;flex:none;min-width:0;border-bottom:1px solid var(--border)}
.data-panel-header .data-tabs{flex:1;min-width:0;border-bottom:0}
.inspector-header{min-height:44px;gap:12px}
.touch-hint{position:absolute;z-index:2;top:12px;left:12px;max-width:calc(100% - 24px);padding:5px 8px;border:1px solid #e2eaee;border-radius:5px;background:#ffffffed;color:#6c808c;font-size:10px;line-height:1.4;pointer-events:none}
.touch-hint:not([hidden])~.case-legend{top:45px}
.placement-hint{position:absolute;z-index:3;top:12px;right:12px;max-width:min(480px,calc(100% - 24px));padding:6px 9px;border:1px solid #b8dce4;border-radius:5px;background:#eff8faf2;color:#28576a;font-size:11px;line-height:1.45;overflow-wrap:anywhere;pointer-events:none;box-shadow:0 2px 6px #16304808}
.touch-hint:not([hidden])~.placement-hint,.case-legend:not([hidden])~.placement-hint{top:45px}
.touch-hint:not([hidden])~.case-legend:not([hidden])~.placement-hint{top:78px}

/* Fine-pointer desktops share one compact control height. Touch keeps larger targets. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
 .toolbar-tools button,.preset-choice select,.canvas-options select,
 .canvas-options .icon-btn,.file-menu>summary,.header-actions>button{min-height:32px}
}

@media(any-pointer:coarse),(max-width:900px){
 body>main{padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
 button,summary,select,input:not([type=checkbox]):not([type=range]){min-height:44px}
 button,summary,select{min-width:44px}
 .toolbar-tools button,.preset-choice select,.canvas-options select,
 .canvas-options .icon-btn,.file-menu>summary,.header-actions>button{min-height:44px}
 input,select,textarea,.field input,.field select,td input,td select,
 .preset-choice select,.canvas-options select,.view-choice select,
 .drawing-toolbar .view-choice select,.playback-controls select,
 .case-panel>select,.file-menu-panel select,.method-title select,
 .diagram-controls select{font-size:16px}
 input[type=checkbox]{width:22px;height:22px;flex:none}
 .support-checks label,.case-panel .overlay-choices label,td:has(input[type=checkbox]){min-height:44px;min-width:44px}
 .support-checks label,.case-panel .overlay-choices label{display:flex;align-items:center;gap:6px}
 .touch-check{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer}
 .touch-check input[type=checkbox]{margin:0}
 button,summary{touch-action:manipulation}
 .drawing-toolbar{padding:8px;gap:8px;align-content:start;background:#fff}
 .segmented{gap:2px;padding:2px;border:1px solid #e0e8ec;border-radius:7px;background:#f6f9fa}
 .segmented button{padding:7px 9px;font-size:17px}
 .segmented button span{font-size:12px;margin-left:4px}
 #tool-pan{display:block}
 #supports-toggle,#loads-toggle{min-width:44px;min-height:44px;padding:8px 10px;font-size:12px;border-color:#d9e4e9;background:#f7fafb}
 .support-palette-title small{display:none}
 .support-palette-title:after{content:'Tap a preset, then a node';display:block;margin-top:4px;font-size:11px;font-weight:400;color:var(--muted)}
 .support-palette button{gap:8px;padding:8px 10px;cursor:pointer}
 .support-palette svg{width:29px;height:29px}
 .load-palette button{gap:8px;padding:8px 10px}
 .load-palette svg{width:29px;height:29px}
 .preset-choice{flex:0 1 205px;min-width:120px;font-size:0;gap:0}
 .preset-choice select{width:100%;max-width:none;padding:8px;min-width:0}
 .canvas-options{gap:4px;padding-left:4px}
 .canvas-options label{gap:5px;font-size:11px}
 .canvas-options select{padding:7px 4px;max-width:80px}
 .icon-btn{padding:8px;font-size:13px}
 .case-picker summary{min-width:72px;max-width:120px;padding:12px 7px;font-size:12px}
 .drawing-toolbar .header-actions{gap:5px}
 .drawing-toolbar .header-actions .quiet,.drawing-toolbar .header-actions .primary{min-height:44px;padding:9px 12px;font-size:12px}
 .drawing-toolbar .header-actions #new-btn{min-height:44px;padding:9px 12px;font-size:12px}
 .file-menu summary{display:flex;align-items:center;justify-content:center;padding:10px 9px;font-size:12px}
 .file-menu-panel{padding:10px;border-radius:9px;max-height:min(65dvh,calc(var(--app-height,100dvh) - 24px))}
 .file-menu-panel button,.file-menu-panel .menu-link,.file-menu-panel #kind-badge{min-height:44px;padding:10px;font-size:14px}
 .file-menu-panel label{font-size:12px}
 .case-panel{gap:10px}
 .case-panel .case-actions{gap:6px}
 .case-actions button{flex:1;padding:8px 5px;font-size:12px}
 .case-panel .overlay-choices label{padding:4px 0;font-size:13px}
 .drawing-toolbar .view-choice{display:flex;align-items:center;gap:6px;font-size:12px}
 .drawing-toolbar .view-choice select{max-width:180px;padding:8px}
 .playback-controls button{font-size:13px;padding:8px 11px}
 .playback-controls select{max-width:185px;padding:8px}
 .workspace{gap:8px}
 .workspace.has-inspector{grid-template-columns:minmax(0,1fr) 290px}
 .workspace.details-open{grid-template-rows:minmax(0,1fr) minmax(0,34%)}
 .workspace .inspector{padding:12px 16px;scroll-padding:12px;scrollbar-gutter:stable}
 .inspector-header{position:sticky;top:-12px;z-index:3;margin:0 -4px;padding:2px 4px;background:#fffffff5;border-bottom:1px solid #eef2f4}
 .inspector-header .eyebrow{font-size:10px}
 .inspector h2{font-size:18px;margin-top:14px}
 .inspector p,.field,.local-axis-note{font-size:12px}
 .field-grid{gap:12px}
 .property-section{margin-top:17px;padding-top:14px}
 .property-section h3,.property-disclosure summary{font-size:13px}
 .property-disclosure summary,.conventions summary,.axial-loads summary{display:flex;align-items:center;min-height:44px}
 .property-actions{flex-wrap:wrap;gap:8px}
 .property-actions button,.property-section button{font-size:13px;padding:9px 11px}
 .data-tabs{min-height:48px;padding:0 12px;gap:20px}
 .data-tabs>button{min-height:48px;padding:12px 0;font-size:12px}
 .data-content{padding:14px;scroll-padding:14px;scrollbar-gutter:stable}
 .subtabs{gap:6px}
 .subtabs button{padding:9px 11px;font-size:12px;border:1px solid #e3ebef;border-radius:6px}
 .table-controls{flex-wrap:wrap;gap:8px;font-size:11px}
 .table-controls button{font-size:13px;padding:9px 11px}
 td input{width:92px;padding:8px}
 td .wide-input{width:120px}
 td select{max-width:115px;padding:8px}
 td{padding:6px 8px}
 .row-id{padding:8px}
 .method-title,.diagram-controls{flex-wrap:wrap;gap:8px}
 .motion-controls button{height:auto;min-height:44px}
 .motion-controls input[type=range]{height:44px}
 .error-targets button{padding:8px 10px}
 .alert{font-size:13px}
}

/* Portrait tablets and phones use one scrollable sheet beneath the canvas. */
@media(max-width:900px){
 .workspace.has-inspector{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,36%)}
 .workspace.details-open{grid-template-rows:minmax(0,1fr) minmax(0,36%)}
 .workspace .inspector{grid-column:1;grid-row:2}
 .workspace .data-panel,.workspace.has-inspector .data-panel{grid-column:1;grid-row:2}
 .drawing-panel,.data-panel,.inspector{border-radius:8px}
 .workspace .inspector{padding:10px 16px}
 .inspector-header{top:-10px}
 .analysis-summary{left:10px;bottom:10px;font-size:10px;padding:6px 8px}
}

/* Three predictable tool rows keep every primary action visible on a phone. */
@media(max-width:599px){
 body>main{padding:calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left))}
 .drawing-toolbar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:6px}
 .toolbar-tools{grid-column:1/5;grid-row:1;display:flex;min-width:0;padding:0;gap:1px;border:0;background:#f6f9fa}
 .toolbar-tools button{flex:1;min-width:44px;min-height:44px;padding:3px 1px;font-size:16px;line-height:1.05}
 .toolbar-tools button span{display:block;font-size:10px;margin:3px 0 0;line-height:1.1}
 .drawing-toolbar .header-actions{display:contents}
 #new-btn{grid-column:5;grid-row:1;width:100%}
 #solve-btn{grid-column:6;grid-row:1;width:100%}
 .drawing-toolbar .header-actions #new-btn,.drawing-toolbar .header-actions #solve-btn{padding:8px 2px;font-size:11px}
 #solve-btn span{display:none}
 .preset-choice{grid-column:1/4;grid-row:2;width:100%;min-width:0;max-width:none}
 .preset-choice select{max-width:none;padding:8px 5px}
 .case-picker{grid-column:4;grid-row:2;min-width:0}
 .case-picker summary{min-width:44px;max-width:none;width:100%;padding:10px 0;font-size:11px}
 .case-picker summary::after{font-size:8px}
 .load-controls{grid-column:5;grid-row:2;min-width:0}
 .support-controls{grid-column:6;grid-row:2;min-width:0}
 #supports-toggle,#loads-toggle{width:100%;min-width:44px;min-height:44px;flex-direction:column;gap:1px;padding:4px 1px;font-size:10px;line-height:1.2}
 #supports-toggle>span,#loads-toggle>span{font-size:8px;line-height:1}
 .drawing-toolbar .canvas-options{grid-column:1/5;grid-row:3;min-width:0;justify-content:space-between;gap:2px;margin:0;padding:0}
 .canvas-options label{font-size:0;gap:0;width:56px;flex:none}
 .canvas-options select{width:56px;max-width:none;padding:7px 2px}
 .canvas-options .icon-btn{width:44px;min-width:44px;padding:8px 2px}
 #file-menu{grid-column:5;grid-row:3;min-width:0}
 #file-menu>summary{padding:10px 0;font-size:11px}
 #details-btn{grid-column:6;grid-row:3;width:100%;white-space:normal;line-height:1.15}
 .drawing-toolbar .header-actions #details-btn{padding:5px 1px;font-size:10px}
 .drawing-toolbar .view-choice{grid-column:1/5;grid-row:4;min-width:0}
 .drawing-toolbar .view-choice select{flex:1;max-width:none;min-width:0}
 .playback-controls{grid-column:5/7;grid-row:4;min-width:0;flex-wrap:wrap}
 .playback-controls select{width:100%;max-width:none}
 .playback-controls button{width:100%}
 .touch-hint{top:9px;left:9px;max-width:calc(100% - 18px);font-size:10px}
 .touch-hint:not([hidden])~.case-legend{top:42px;left:10px;gap:10px;flex-wrap:wrap}
 .workspace .inspector{padding:10px 14px}
 .data-tabs{gap:18px;padding:0 12px}
 #close-details{margin:0 2px}
 .data-content{padding:12px}
 .stats{gap:10px 18px}
 .stat{flex-wrap:wrap;gap:4px 7px}
 .field-grid{gap:10px}
}

@media(max-width:900px) and (max-height:650px){
 .workspace.has-inspector,.workspace.details-open{grid-template-rows:minmax(0,1fr) minmax(0,26%)}
 .workspace .inspector{padding-top:6px;padding-bottom:8px}
 .inspector-header{top:-6px}
}