/* StructCalc workspace */
body[data-page="editor"] {
  --lab-ink: #10203c;
  --lab-muted: #596784;
  --lab-paper: #edf2f9;
  --lab-panel: #fff;
  --lab-line: #dfe7f2;
  --lab-orange: #0058ef;
  --lab-orange-dark: #0045c8;
  --lab-mint: #f3f7fd;
  --lab-blue: #075bff;
  background: var(--lab-paper);
  color: var(--lab-ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
body[data-page="editor"] #conteudo { padding: 0; margin: 0; max-width: none; }
body[data-page="editor"] .skip-link { position: absolute; top: -100px; left: 0; z-index: 50; }
body[data-page="editor"] .skip-link:focus { top: 0; }
body[data-page="editor"] button { cursor: pointer; }
.lab { --left-width: 210px; --right-width: 380px; display: grid; grid-template-rows: 52px minmax(0,1fr); height: 100vh; min-height: 0; background: #f7f9fd; }
.lab-header { height: 52px; min-height: 52px; gap: 0; padding: 0 22px 0 30px; background: linear-gradient(105deg,#17243a,#1e2e4a); border: 0; box-shadow: 0 2px 8px #0b183329; }
.lab-brand { gap: 9px; min-width: 199px; color: #fff; }
.lab-brand svg { width: 31px; height: 31px; }
.lab-brand strong { color: #fff; font: 700 22px/1 Inter,"Segoe UI",sans-serif; letter-spacing: -.5px; }
.main-navigation { display: flex; align-items: center; gap: 9px; min-width: 0; padding-left: 29px; border-left: 1px solid #a6b3cb80; }
.main-navigation button,.main-navigation a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; color: #bfcbdd; border: 0; border-radius: 18px; background: transparent; font-size: 13px; text-decoration: none; white-space: nowrap; }
.main-navigation button:hover,.main-navigation a:hover,.main-navigation .is-current { background: #ffffff1a; color: #fff; }
.main-navigation .is-current { font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: 13px; margin-left: auto; white-space: nowrap; color: #f5f7ff; font-size: 12px; }
.header-actions .theme-toggle { padding: 0; width: 35px; min-height: 30px; border: 0; background: transparent; color: #e4ecff; font-size: 24px; }
  body[data-page="editor"] .header-actions .unit-chip { padding: 8px 12px; border: 1px solid #ffffff32; border-radius: 18px; background: #ffffff12; color: #fff; cursor: pointer; font: inherit; }
.profile-link { color: #fff; text-decoration: none; }
.lab-shell { position: relative; display: grid; grid-template-columns: var(--left-width) minmax(360px,1fr) var(--right-width); height: 100%; min-height: 0; }
.toolbox { min-width: 0; padding: 8px 12px 16px; border-right: 1px solid var(--lab-line); background: #fff; }
.toolbox-head { display: none; }
.side-tabs { position: sticky; top: -8px; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; margin: -8px -5px 15px; background: #f4f7fc; border: 1px solid #e5ebf4; border-radius: 9px; }
.side-tabs button { min-height: 43px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #455371; font-size: 12px; }
.side-tabs button[aria-selected="true"] { color: #0058ef; border-bottom-color: #0058ef; background: #fff; }
.tool-group { padding: 8px 0 10px; border-top: 0; }
.tool-group + .tool-group { border-top: 1px solid var(--lab-line); }
.tool-group h2,.view-checks h2 { margin: 6px 7px 10px; color: #101f39; font: 700 12px/1.3 Inter,"Segoe UI",sans-serif; letter-spacing: 0; text-transform: none; }
.tool-button { min-height: 40px; gap: 22px; padding: 6px 10px; border-radius: 7px; color: #41506d; font-size: 12px; font-weight: 500; }
.tool-button > span { font-size: 12px; }
.tool-button > span { display: flex; }
.tool-button small { display: none; }
.tool-icon { width: 26px; height: 26px; stroke: #182947; stroke-width: 1.6; }
.tool-button.is-active,.tool-button[aria-pressed="true"] { color: #0058ef; background: #eaf2ff; box-shadow: none; }
.tool-button.is-active .tool-icon { stroke: #0058ef; }
.tool-button:hover { background: #f0f5fd; }
.tool-submenu { margin: 2px 5px 7px; padding: 9px; border: 1px solid #d9e5f5; border-radius: 7px; background: #f5f9ff; }
.tool-submenu > span { display: block; margin-bottom: 5px; color: #263d60; font-size: 11px; font-weight: 700; }
.tool-submenu select { width: 100%; min-height: 33px; padding: 4px 7px; border: 1px solid #c5d5ec; border-radius: 5px; background: #fff; font-size: 12px; }
.tool-danger { margin-top: 0; }
.toolbox .inspector { display: none; flex: 1; border: 0; background: #fff; overflow: visible; }
.toolbox.show-properties > .tool-group,.toolbox.show-properties > .tool-danger,.toolbox.show-properties > .view-checks { display: none; }
.toolbox.show-properties .inspector { display: flex; }
.inspector-head { min-height: 60px; padding: 8px; }
.inspector-head span { color: #0058ef; }
.inspector .properties-panel { padding: 10px 6px; }
.view-checks { margin: 15px 5px 0; padding-top: 12px; border-top: 1px solid var(--lab-line); }
.view-checks h2 { margin-left: 0; }
.view-checks label { display: flex; align-items: center; gap: 9px; min-height: 30px; color: #53617b; font-size: 12px; }
.view-checks input { width: 16px; height: 16px; min-height: 16px; margin: 0; accent-color: #0058ef; }
.drawing-area { min-width: 0; min-height: 0; display: flex; flex-direction: column; height: 100%; background: #f8faff; overflow-y: auto; scrollbar-gutter: stable; }
  .project-tabs { display: flex; align-items: end; height: 39px; flex: 0 0 39px; border-bottom: 1px solid var(--lab-line); background: #f4f7fc; position: relative; }
  .project-tab-list { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .project-tab { flex: 0 0 auto; max-width: 185px; height: 34px; padding: 0 16px; border: 0; border-right: 1px solid var(--lab-line); border-radius: 8px 8px 0 0; background: #eaf0f9; color: #314361; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
  .project-tab:hover { background: #dfe9f9; }
  .project-tab-menu,.project-tab-context { z-index: 20; min-width: 165px; padding: 5px; border: 1px solid #dce4f0; border-radius: 9px; background: #fff; box-shadow: 0 12px 30px #14244325; }
  .project-tab-menu { position: absolute; left: 4px; top: 38px; }
  .project-tab-context { position: fixed; }
  .project-tab-menu[hidden],.project-tab-context[hidden] { display: none; }
  .project-tab-menu button,.project-tab-context button { display: block; width: 100%; padding: 8px 11px; border: 0; border-radius: 5px; background: transparent; color: #182b48; text-align: left; cursor: pointer; }
  .project-tab-menu button:hover,.project-tab-context button:hover { background: #edf4ff; }
  .unit-dialog { width: min(400px,calc(100vw - 32px)); max-height: 85vh; padding: 20px; border: 1px solid #dbe4f0; border-radius: 14px; box-shadow: 0 25px 70px #14244345; color: #152541; }
  .unit-dialog::backdrop { background: #10233d88; }
  .unit-form { display: grid; gap: 10px; }
  .unit-form h2,.unit-form h3 { margin: 0; }
  .unit-form h2 { font-size: 18px; }.unit-form h3 { font-size: 13px; margin-top: 7px; }
  .unit-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .unit-presets button,.unit-actions button { min-height: 33px; padding: 6px 10px; border: 1px solid #d6e0ed; border-radius: 7px; background: #f7faff; color: #132641; cursor: pointer; }
  .unit-form label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
  .unit-form select { min-width: 130px; min-height: 31px; padding: 4px; border: 1px solid #d6e0ed; border-radius: 6px; background: #fff; color: #132641; }
  .unit-actions { display: flex; gap: 6px; margin-top: 8px; }.unit-actions button:first-child { margin-right: auto; }.unit-actions .primary { background: #005bef; color: #fff; }
.project-tabs { order: 0; }
.project-tabs .project-identity { flex: none; display: flex; align-items: center; gap: 7px; height: 34px; max-width: 280px; padding: 0 14px; border-right: 1px solid var(--lab-line); border-radius: 8px 8px 0 0; background: #fff; }
.project-tabs .title-input { width: 205px; min-height: 25px; padding: 0; color: #101f39; font: 700 13px Inter,"Segoe UI",sans-serif; }
.project-tabs .save-state { display: none; }
.project-tabs .new-project { align-self: center; width: 35px; min-height: 32px; margin: 0 5px; border: 0; background: transparent; color: #203250; font-size: 23px; }
.learning-path { display: none; }
.canvas-toolbar { flex: 0 0 auto; flex-wrap: wrap; min-height: 53px; gap: 6px; padding: 7px 13px; background: #fff; }
.canvas-toolbar { order: 1; }
.canvas-toolbar h1 { display: none; }
.canvas-toolbar .history-actions { gap: 5px; margin-right: 4px; }
.canvas-toolbar .history-actions button,.canvas-toolbar .view-actions button,.canvas-toolbar .file-actions button,.canvas-toolbar .zoom-button { min-height: 34px; border: 1px solid #e3e9f3; border-radius: 6px; background: #fff; color: #233752; }
.canvas-toolbar .history-actions button { width: 34px; }
.canvas-toolbar .zoom-button { flex-shrink: 0; width: 34px; padding: 0; font-size: 20px; }
.canvas-toolbar .model-presets { display: none; }
.canvas-toolbar .view-actions { border-left: 0; padding-left: 0; }
.canvas-toolbar .view-actions label { display: none; }
.canvas-toolbar .solve-button { order: 10; margin-left: auto; min-height: 34px!important; padding: 5px 16px!important; border-radius: 6px!important; background: #0057ed!important; box-shadow: none; }
.canvas-toolbar .solve-button span { font-size: 13px; }
.canvas-toolbar .solve-button span::after { content: none; }
.canvas-toolbar .solve-button kbd { display: none; }
.canvas-toolbar .toolbar-files { order: 11; }
.canvas-toolbar .toolbar-files button { display: none; }
.canvas-toolbar .toolbar-files [data-save] { display: inline-block; }
.canvas-stage { min-height: 240px; flex: 1 1 0; background: #fff; }
.canvas-stage { order: 2; }
.canvas-stage svg { min-height: 0; color: #0a5afa; }
.canvas-stage .grid-plane { color: #4a8efa; }
.axes path { stroke-opacity: .08; }
/* Drawing dimensions come exclusively from drawing_constants.js (CSS pixels). */
:is(#structure-canvas,.report-structure) .structural-element { stroke: #192842; stroke-width: var(--drawing-bar-width); stroke-linecap: round; }
:is(#structure-canvas,.report-structure) .structural-element.trelica { stroke-width: var(--drawing-truss-width); }
:is(#structure-canvas,.report-structure) .structural-element.active { stroke: #075bff; }
:is(#structure-canvas,.report-structure) .structural-node { fill: #152846; stroke: #152846; stroke-width: var(--drawing-node-width); }
:is(#structure-canvas,.report-structure) .structural-node.active { fill: #075bff; stroke: #b6d1ff; }
:is(#structure-canvas,.report-structure) .support-symbol { fill: #fff; stroke: #14233f; stroke-width: var(--drawing-symbol-width); stroke-linejoin: round; }
:is(#structure-canvas,.report-structure) .support-symbol.active { stroke: #075bff; }
:is(#structure-canvas,.report-structure) .hinge { fill: #fff; stroke: #14233f; stroke-width: var(--drawing-symbol-width); }
:is(#structure-canvas,.report-structure) .load-arrow, :is(#structure-canvas,.report-structure) .moment-symbol { fill: none; stroke: #b91c1c; stroke-width: var(--drawing-symbol-width); stroke-linecap: butt; }
:is(#structure-canvas,.report-structure) .load-arrow.distributed, :is(#structure-canvas,.report-structure) .load-distribution-top { fill: none; stroke: #005be8; stroke-width: var(--drawing-symbol-width); }
:is(#structure-canvas,.report-structure) .load-head { fill: #b91c1c; stroke: none; }
:is(#structure-canvas,.report-structure) .load-head.distributed { fill: #005be8; }
:is(#structure-canvas,.report-structure) .load-arrow.active, :is(#structure-canvas,.report-structure) .moment-symbol.active { stroke: #075bff; }
:is(#structure-canvas,.report-structure) .load-head.active { fill: #075bff; stroke: none; }
:is(#structure-canvas,.report-structure) text { font-family: var(--drawing-font-family)!important; font-size: var(--drawing-load-font)!important; font-weight: var(--drawing-font-weight)!important; paint-order: stroke; stroke: #fff; stroke-width: var(--drawing-text-halo); stroke-linejoin: round; }
:is(#structure-canvas,.report-structure) .node-label { fill: #14233f!important; font-size: var(--drawing-node-font)!important; }
:is(#structure-canvas,.report-structure) .load-label { fill: #b91c1c!important; }
:is(#structure-canvas,.report-structure) .load-label.distributed { fill: #005be8!important; }
:is(#structure-canvas,.report-structure) .dimension-label, :is(#structure-canvas,.report-structure) .preview-label { fill: #46566e!important; font-size: var(--drawing-dimension-font)!important; }
:is(#structure-canvas,.report-structure) .dimension-stroke, :is(#structure-canvas,.report-structure) .dimension-tick { fill: none; stroke: #46566e; stroke-width: var(--drawing-line-width); }
:is(#structure-canvas,.report-structure) .axes path, :is(#structure-canvas,.report-structure) defs path { stroke-width: var(--drawing-line-width); }
:is(#structure-canvas,.report-structure) .label-leader, :is(#structure-canvas,.report-structure) .application-leader { stroke: #68778c; stroke-width: var(--drawing-line-width); }
:is(#structure-canvas,.report-structure) .preview-element { stroke: #3c8ac8; stroke-width: var(--drawing-symbol-width); stroke-dasharray: var(--drawing-preview-dash) var(--drawing-preview-gap); }
:is(#structure-canvas,.report-structure) .reaction-label { fill: #0058ef!important; }
:is(#structure-canvas,.report-structure) .measure-line { stroke: #0058ef; stroke-width: var(--drawing-symbol-width); stroke-dasharray: var(--drawing-measure-dash) var(--drawing-measure-gap); }
:is(#structure-canvas,.report-structure) .measure-label { fill: #0058ef!important; }
body.hide-structure-labels .node-label { display: none; }
.canvas-tip { display: none; }
.canvas-welcome { width: min(86%, 410px); border-color: #dce7f5; background: #ffffffed; }
.canvas-welcome h2 { font-family: Inter,"Segoe UI",sans-serif; font-size: 21px; }
.canvas-welcome .button-start { background: #0058ef; border-color: #0058ef; }
.status-bar { flex: 0 0 27px; min-height: 27px; background: #fff; }
.status-bar { order: 3; }
.vertical-resize { flex: 0 0 6px; height: 6px; cursor: row-resize; background: #e9eef7; border-top: 1px solid #dce6f2; }
.vertical-resize { order: 4; }
.drawing-area > .results-panel { flex: 0 0 var(--results-height, 43%); min-height: 0; max-height: none; margin: 0; border: 0; background: #fff; overflow: hidden; }
.drawing-area > .results-panel { order: 5; }
.drawing-area > .results-panel > summary { display: none; }
.drawing-area .results-content { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: 9px 9px 0; }
.result-tabs,.solution-tabs { display: flex; gap: 0; flex: 0 0 auto; background: #f2f5fa; border-radius: 7px; overflow-x: auto; }
.result-tabs button,.solution-tabs button { min-height: 34px; flex: 1; padding: 5px 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; background: transparent; color: #3b4b68; font-size: 12px; white-space: nowrap; }
.result-tabs button[aria-selected="true"],.solution-tabs button[aria-selected="true"] { background: #fff; border-bottom-color: #0058ef; color: #0058ef; font-weight: 700; }
.drawing-area .results-head { display: none; }
.drawing-area .diagnostics { flex: 0 0 auto; margin: 0; }
.drawing-area .diagnostics .calculation-empty { display: none; }
.drawing-area .diagnostic.ok { display: none; }
.drawing-area .result-view { flex: 1 1 0; height: 0; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 12px 8px 20px; }
.result-view .result-grid { grid-template-columns: 1fr; }
.result-view .result-card { border: 1px solid var(--lab-line); border-radius: 8px; background: #fff; }
.result-view .result-card h3 { color: #152642; font: 700 14px Inter,"Segoe UI",sans-serif; }
.result-view .result-card th,.result-view .result-card td { text-align: left; }
.chart-card { margin: 0 0 11px; padding: 4px 10px 8px; border: 1px solid #eef2f8; border-radius: 8px; background: #fff; }
.chart-card h3 { margin: 4px 0 1px; color: #0e1d38; font-size: 13px; }
/* --chart-height comes from the panel (layoutCharts); 130 px only where nothing sets it. */
.chart-card svg { width: 100%; height: var(--chart-height, 130px); }
.result-view[data-chart-columns] { display: grid; grid-template-columns: repeat(var(--chart-columns), minmax(0, 1fr)); column-gap: 8px; align-content: start; }
.result-view[data-chart-columns] > :not(.chart-card) { grid-column: 1 / -1; }
.chart-card svg text { font: 12px Inter,"Segoe UI",sans-serif; }
.chart-guide { display: none; stroke: #8396b6; stroke-width: 1; stroke-dasharray: 4 3; }
.chart-hover { display: none; fill: #243957; font-size: 11px!important; }
.chart-card svg.is-hovered .chart-guide,.chart-card svg.is-hovered .chart-hover { display: block; }
.diagram-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 8px 10px; border: 1px solid #dbe5f2; border-radius: 7px; background: #f5f8fd; color: #53627b; font-size: 12px; }
.diagram-controls button { min-height: 32px; padding: 5px 10px; border: 1px solid #c9d8ee; border-radius: 6px; background: #fff; color: #1d4f9a; font-size: 12px; }
.waiting-result { display: grid; place-content: center; min-height: 175px; padding: 25px; text-align: center; color: #60708b; }
.waiting-result h3 { margin: 4px 0; color: #1d3151; font-size: 15px; }
.waiting-result p { max-width: 360px; margin: 0; font-size: 12px; line-height: 1.5; }
.waiting-icon { color: #0058ef; font-size: 30px; }
.result-intro { color: #253a59; font-weight: 700; }
.solution-panel { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0 9px; border-left: 1px solid var(--lab-line); background: #fff; overflow: hidden; }
.solution-title { margin: 0; flex: 0 0 39px; display: flex; align-items: center; padding: 0 8px; color: #0e1f3c; font-size: 14px; }
.solution-tabs { min-height: 34px; }
.solution-view { flex: 1 1 0; height: 0; min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 13px 8px; }
.solution-view h3 { margin: 4px 0 14px; font-size: 14px; }
.solution-step { position: relative; margin-left: 12px; padding: 1px 0 12px 26px; border-left: 1px solid #dbe5f2; }
.solution-step > summary { display: flex; align-items: center; gap: 12px; min-height: 32px; cursor: pointer; list-style: none; color: #12233d; font-size: 13px; }
.solution-step > summary::-webkit-details-marker { display: none; }
.step-number { position: absolute; left: -15px; display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #005be8; color: #fff; font-size: 13px; font-weight: 700; }
.step-body { color: #53627b; font-size: 12px; line-height: 1.45; }
.step-description { margin: 3px 0 9px; }
.equation-line,.equation-result { margin: 3px 0; padding: 7px 9px; border-radius: 5px; background: #f3f6fa; color: #1b2c4a; font: 13px/1.4 Cambria,Georgia,serif; white-space: pre-wrap; overflow-x: auto; overflow-y: hidden; }
.equation-result { background: #edf4ff; color: #0058ef; font-weight: 700; }
.why-detail { margin-top: 8px; }
.why-detail summary { color: #0058ef; cursor: pointer; }
.solution-extra { border-top: 1px solid #e4ebf5; }
.solution-extra > summary { padding: 12px 10px; color: #152947; cursor: pointer; font-size: 12px; font-weight: 700; }
.solution-extra pre,.derivation-step pre { margin: 0 5px 12px; padding: 10px; border-radius: 6px; background: #f4f7fb; color: #263957; font: 12px/1.5 Cambria,Georgia,serif; white-space: pre-wrap; }
.derivation-step { padding: 3px 10px; }
.derivation-step summary { cursor: pointer; color: #2c4469; font-size: 12px; }
.overview-row,.metric-row,.reaction-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 10px; border-bottom: 1px solid #e8edf5; font-size: 12px; }
.overview-row span,.metric-row span { color: #60708a; }
.reaction-row { display: grid; grid-template-columns: 1fr 1fr; }
.reaction-row strong { grid-column: 1/-1; }
.final-expressions { flex: 0 0 auto; margin: 5px 5px 9px; padding: 12px; border: 1px solid #d0e2ff; border-radius: 7px; background: #f1f7ff; }
.final-expressions h3 { margin: 0 0 8px; color: #0058ef; font-size: 13px; }
.final-expressions p { max-height: 90px; margin: 0; overflow: auto; white-space: pre-wrap; color: #263858; font: 13px/1.45 Cambria,Georgia,serif; }
.solution-footer { display: flex; flex: 0 0 52px; gap: 5px; align-items: center; padding: 5px 3px; border-top: 1px solid var(--lab-line); }
.solution-footer button { flex: 1; min-height: 35px; padding: 5px; border: 1px solid #dbe4f0; border-radius: 6px; background: #fff; color: #1e304d; font-size: 11px; }

/* Desktop results stay in normal page flow so every diagram is reachable with page scroll. */
body[data-page="editor"] { overflow: auto; }
.lab { height: auto; min-height: 100vh; grid-template-rows: 52px auto; }
.lab-shell { height: auto; min-height: calc(100vh - 52px); }
.drawing-area { height: auto; overflow: visible; }
.canvas-stage { flex: 0 0 clamp(300px, 38vh, 420px); min-height: 300px; }
.drawing-area > .results-panel { flex: 0 0 auto; }
.drawing-area .results-content { height: auto; }
.drawing-area .result-view { flex: 0 0 auto; height: auto; max-height: none; overflow: visible; }
.solution-panel { height: auto; }
.solution-view { flex: 0 0 auto; height: auto; max-height: none; overflow: visible; }
.resize-handle { position: absolute; z-index: 4; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
.resize-left { left: calc(var(--left-width) - 4px); }
.resize-right { right: calc(var(--right-width) - 4px); }
#about-structcalc { padding: 22px; color: #142744; font-family: Inter,"Segoe UI",sans-serif; }
#about-structcalc h2 { margin-top: 0; }
body.structcalc-dark[data-page="editor"] { --lab-ink: #e5ecfa; --lab-muted: #a7b6cf; --lab-line: #35445e; background: #0e1829; color: #e5ecfa; }
body.structcalc-dark .toolbox,body.structcalc-dark .drawing-area,body.structcalc-dark .canvas-stage,body.structcalc-dark .solution-panel,body.structcalc-dark .drawing-area > .results-panel { background: #16243a; }
.method-choice { display:flex; flex-direction:column; flex-shrink:0; gap:3px; font-size:11px; min-width:min-content; }
.method-choice select { max-width:180px; font:inherit; padding:5px; }
.method-choice[hidden] { display:none; }
.structure-view-controls { order:1; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--lab-line); font-size:11px; }
.structure-view-controls label { display:flex; align-items:center; gap:5px; }
.structure-view-controls input[type="number"] { width:78px; }
.structure-view-controls select,.structure-view-controls input,.structure-view-controls button { font:inherit; min-height:30px; }
.structure-view-controls output { flex-basis:100%; color:var(--lab-muted,#52627b); }
.show-analysis .structural-element { opacity:.45; }
.show-analysis .load-arrow,.show-analysis .load-label { opacity:.4; }
.analysis-overlay .deformation-overlay { stroke:#16864b; stroke-width:var(--drawing-symbol-width); }
.analysis-overlay .deformation-node { fill:#16864b; stroke:white; stroke-width:1; }
.analysis-overlay .overlay-label { font-size:var(--drawing-node-font); paint-order:stroke; stroke:white; stroke-width:var(--drawing-text-halo); stroke-linejoin:round; }
.query-dialog { width:min(760px,calc(100vw - 24px)); max-height:88vh; overflow:auto; padding:24px; border:1px solid #dbe4f0; border-radius:12px; }
.query-dialog::backdrop { background:#10233d88; }
.query-dialog form { display:flex; flex-direction:column; gap:12px; }
.query-dialog label { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.query-dialog label[hidden] { display:none; }
.query-dialog input,.query-dialog select,.query-dialog button { min-height:38px; }
.query-dialog pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
@media print { .structure-view-controls button,.structure-view-controls label { display:none; } }
.solution-step pre { white-space:pre-wrap; overflow-wrap:anywhere; }
body.structcalc-dark .project-tabs,body.structcalc-dark .canvas-toolbar,body.structcalc-dark .side-tabs,body.structcalc-dark .result-tabs,body.structcalc-dark .solution-tabs { background: #1d2d47; }
body.structcalc-dark .project-tabs .project-identity,body.structcalc-dark .result-tabs button[aria-selected="true"],body.structcalc-dark .solution-tabs button[aria-selected="true"],body.structcalc-dark .side-tabs button[aria-selected="true"] { background: #243651; }
body.structcalc-dark .project-tabs .title-input,body.structcalc-dark .solution-title,body.structcalc-dark .solution-step > summary,body.structcalc-dark .chart-card h3,body.structcalc-dark .tool-group h2 { color: #eaf0ff; }
body.structcalc-dark .chart-card,body.structcalc-dark .final-expressions,body.structcalc-dark .equation-line { background: #20314c; }
@media (max-width: 1200px) { .lab { --left-width: 220px; --right-width: 355px; } .main-navigation { gap: 0; padding-left: 12px; } .main-navigation button,.main-navigation a { padding: 5px 8px; } .lab-brand { min-width: 175px; } .tool-button { gap: 9px; } .canvas-toolbar .toolbar-files { display: none; } }
@media (max-width: 900px) { body[data-page="editor"] { overflow: auto; } .lab { height: auto; min-height: 100vh; grid-template-rows: 52px auto; } .lab-header { padding: 0 10px; } .main-navigation a:nth-child(2),.main-navigation a:nth-child(4),.main-navigation a:nth-child(5),.unit-chip { display: none; } .lab-shell { display: grid; grid-template-columns: 180px minmax(0,1fr); height: auto; } .toolbox { grid-column: 1; grid-row: 1; } .drawing-area { grid-column: 2; grid-row: 1; min-height: 740px; height: auto; overflow-y: visible; } .canvas-stage { min-height: 360px; } .solution-panel { grid-column: 1/-1; grid-row: 2; min-height: 520px; height: 520px; } .resize-handle { display: none; } }
@media (max-width: 590px) { .lab-brand { min-width: 31px; } .lab-brand strong { display: none; } .main-navigation { border-left: 0; padding-left: 4px; } .main-navigation button,.main-navigation a { font-size: 11px; } .header-actions { gap: 0; } .header-actions .theme-toggle { display: none; } .profile-link { width: 24px; overflow: hidden; font-size: 0; } .profile-link::before { content: "◉"; font-size: 18px; } .lab-shell { grid-template-columns: 1fr; } .toolbox { grid-column: 1; grid-row: 1; display: flex; flex-direction: row; gap: 6px; padding: 5px; overflow-x: auto; } .toolbox .tool-group,.toolbox.show-properties > .tool-group { display: flex; flex: 0 0 auto; gap: 4px; padding: 0; border: 0; } .toolbox .tool-group h2,.side-tabs,.view-checks,.toolbox > .tool-danger { display: none; } .tool-button { width: 43px; min-height: 40px; justify-content: center; padding: 5px; } .tool-button > span { display: none; } .drawing-area { grid-column: 1; grid-row: 2; min-height: 700px; } .lab-shell > .inspector { grid-column: 1; grid-row: 3; display: flex; min-height: 260px; border-top: 1px solid var(--lab-line); border-left: 0; } .lab-shell > .inspector .properties-panel { min-height: 180px; } .solution-panel { grid-row: 4; } .canvas-toolbar { gap: 3px; padding: 5px; } .canvas-toolbar .view-actions { display: none; } .canvas-toolbar .solve-button { padding: 5px 8px!important; } .result-tabs button,.solution-tabs button { font-size: 10px; padding: 5px 6px; } }

/* Compact workspace; long results remain in page flow. */
.lab { width: 100%; }
.lab-header { position: sticky; top: 0; }
.canvas-toolbar { overflow: visible; gap: 5px; padding: 6px 8px; }
.canvas-toolbar .history-actions { gap: 2px; margin-right: 0; }
.canvas-toolbar .method-choice { flex-direction: row; align-items: center; }
.canvas-toolbar .method-choice select { min-width: 110px; max-width: 145px; }
.canvas-toolbar .solve-button { order: 0; margin-left: auto; }
.canvas-toolbar .toolbar-files { order: 0; }
.workspace-utilities { position: relative; margin: 0; }
.workspace-utilities > summary { padding: 8px 10px; border: 1px solid var(--lab-line); border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--lab-ink); }
.workspace-utilities-content { position: absolute; top: 100%; right: 0; z-index: 15; min-width: 220px; display: grid; gap: 6px; padding: 10px; background: var(--lab-panel); border: 1px solid var(--lab-line); border-radius: 8px; box-shadow: 0 8px 24px #10203c26; }
.workspace-utilities-content button { width: 100%; text-align: left; }
body.structcalc-dark .workspace-utilities-content,body.structcalc-dark .diagram-controls select { background: #20314c; color: #eaf0ff; }
.structure-view-controls { gap: 5px; padding: 5px 8px; }
.structure-view-controls output { font-size: 10px; }
.diagram-controls { flex-wrap: wrap; }
.diagram-controls label { display: flex; align-items: center; gap: 6px; }
.diagram-controls select { min-height: 34px; max-width: 190px; padding: 4px 6px; border: 1px solid var(--lab-line); border-radius: 5px; background: #fff; color: #233450; }
.diagram-controls-state { flex: 1; }
.solution-panel { align-self: start; }
.solution-footer { flex-wrap: wrap; }
.solution-footer button { min-width: 0; }
.solution-view .unit-convention-note { margin: 6px 0 12px; font-size: 12px; }
.solution-step > summary::after { content: "＋"; margin-left: auto; color: #005be8; }
.solution-step[open] > summary::after { content: "−"; }
@media (min-width: 901px) {
  .toolbox { position: sticky; top: 52px; align-self: start; max-height: calc(100vh - 52px); overflow-x: hidden; }
  .tool-group { padding: 4px 0; }
  .tool-group h2 { margin: 4px 6px 5px; }
  .tool-button { min-height: 32px; gap: 10px; padding: 4px 8px; }
  .tool-icon { width: 21px; height: 21px; }
  .side-tabs { margin-bottom: 6px; }
  .view-checks { margin-top: 8px; padding-top: 6px; }
  .vertical-resize { display: none; }
}
@media (max-width: 900px) {
  .solution-panel { height: auto; min-height: 0; }
  .drawing-area { min-height: 0; }
  .canvas-stage { min-height: 300px; }
  .diagram-controls-state { flex-basis: 100%; }
}
@media print { .workspace-utilities { display: none; } .lab-header,.toolbox { position: static; } }

/* Revision: one workspace for drawing, data and explanation. */
.lab [hidden] { display: none !important; }
.tool-group > summary { padding: 6px; cursor: pointer; font-size: 13px; font-weight: 700; }
.tool-group { padding: 3px 0; }
.tool-group .tool-button { font-size: 12px; }
.view-segments { display: flex; flex-wrap: wrap; gap: 3px; }
.view-segments button { padding: 5px 8px; border: 1px solid var(--lab-line); border-radius: 5px; min-height: 32px; font-size: 12px; }
.view-segments button[aria-pressed="true"] { color: #fff; background: #0058ef; }
.structure-view-select { display: none !important; }
.visual-settings,.symbol-legend { position: relative; margin-left: auto; }
.visual-settings > summary,.symbol-legend > summary { padding: 6px; cursor: pointer; font-size: 12px; }
.visual-settings .view-checks,.symbol-legend > p { position: absolute; right: 0; z-index: 16; width: 260px; margin: 0; padding: 12px; border: 1px solid var(--lab-line); border-radius: 7px; background: var(--lab-panel); box-shadow: 0 8px 24px #10203c26; }
.visual-settings .view-checks { display: grid; gap: 8px; }
.calculation-state { font-size: 12px; color: #334866; padding: 4px 6px; }
.calculation-state[data-state="stale"],.calculation-state[data-state="error"] { color: #9a3412; background: #fff2e8; border-radius: 4px; }
.calculation-state[data-state="solved"] { color: #166534; }
.solution-tabs { grid-template-columns: 1fr 1fr; }
.result-tabs { grid-template-columns: repeat(3,1fr); }
.result-view table { font-variant-numeric: tabular-nums; }
.result-view td:not(:first-child),.result-view th:not(:first-child) { text-align: right; }
.result-view td,.result-view th { font-size: 12px; }
.status-bar { font: 12px/1.4 Inter,"Segoe UI",sans-serif; font-variant-numeric: tabular-nums; color: #334866; }
.structure-view-controls output { font-size: 12px; }
.overview-reaction,.rigidity-detail p,.resolution-roadmap { font-size: 12px; line-height: 1.5; }
.rigidity-detail > summary,.resolution-roadmap > summary,.effort-functions > summary { cursor: pointer; padding: 5px 0; }
.resolution-roadmap button { display: block; width: 100%; text-align: left; margin: 3px 0; }
.effort-functions p { overflow-wrap: anywhere; }
.canvas-stage { flex-basis: clamp(240px,30vh,330px); min-height: 240px; }
.drawing-area > .results-panel { margin: 0; padding: 8px 10px; }
.drawing-area .results-content { padding: 0; }
.result-tabs { margin-bottom: 8px; }
.diagram-controls { padding: 5px 8px; }
.reaction-label { fill: #15803d; paint-order: stroke; stroke: white; stroke-width: 4px; stroke-linejoin: round; }
.canvas-toolbar button:not(:disabled) { opacity: 1; }
.canvas-toolbar button:disabled { opacity: .45; }
.lab button:focus-visible,.lab summary:focus-visible { outline: 3px solid #0058ef; outline-offset: 2px; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; cursor: pointer; padding: 8px; border-radius: 50%; background: #ffffff20; font-size: 12px; }
.account-content { position: absolute; right: 0; top: 100%; width: 260px; display: grid; gap: 12px; z-index: 30; padding: 16px; background: var(--lab-panel); color: var(--lab-ink); border: 1px solid var(--lab-line); border-radius: 8px; white-space: normal; }
.account-content a { color: var(--lab-ink); }
.menu-navigation { display: none; }
.account-quota { font-size: 12px; line-height: 1.5; }
.functions-content { font: 13px/1.5 Cambria,Georgia,serif; }
.solution-view .result-intro { font-size: 12px; font-weight: 400; line-height: 1.5; }
.export-menu { padding: 8px; border-top: 1px solid var(--lab-line); }
.export-menu > summary { cursor: pointer; font-size: 13px; }
.export-content { display: grid; gap: 6px; padding-top: 8px; }
.account-quota { max-width: 175px; }
.zoom-level { font-size: 12px; font-variant-numeric: tabular-nums; }
.grid-note { font-size: 12px; margin-left: auto; }
.vertical-resize { display: block; flex: 0 0 6px; height: 6px; cursor: row-resize; background: #dce6f4; }
.status-bar { flex-direction: row; flex-wrap: wrap; flex-basis: auto; }
.status-bar [data-status] { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 590px) { .status-bar .grid-note { white-space: normal; flex-basis: 100%; } }
@media (max-width: 900px) { .header-actions .account-quota { max-width: 115px; font-size: 11px; } }
@media (max-width: 590px) { .header-actions .account-quota { display: none; } }
body.structcalc-dark { --lab-panel: #20314c; }
body.structcalc-dark .calculation-state,body.structcalc-dark .status-bar { color: #d6e1f5; }
@media (min-width: 901px) { .solution-panel { position: sticky; top: 52px; max-height: calc(100vh - 52px); overflow-y: auto; } }
@media (max-width: 590px) { .tool-group > summary { display: none; } .toolbox details.tool-group:not([open]) > :not(summary) { display: flex; } .view-segments button { padding: 5px; } .canvas-stage { flex-basis: 260px; } }
@media print { .solution-panel { position: static; max-height: none; overflow: visible; } }
.canvas-stage { min-height:360px; flex-basis:360px; }
.canvas-toolbar { gap:4px; padding:6px 8px; }
.canvas-toolbar .calculation-state { flex-basis:auto; margin-left:0; font-size:11px; padding:2px; }
.canvas-toolbar .solve-button.is-resolved { background:var(--lab-panel)!important; color:var(--lab-ink)!important; border:1px solid var(--lab-line); }
.structure-view-controls { gap:4px; padding:5px 8px; }
.structure-view-controls .view-segments { flex:0 1 auto; }
.structure-view-controls label { white-space:nowrap; }
.structure-view-controls input[type=checkbox] { width:14px; height:14px; min-height:14px; appearance:auto; }
.structure-view-controls input[type=number] { width:55px; }
.structure-view-controls input[type=number] { min-height:28px; height:28px; padding:3px; }
.diagram-unit { font-size:11px; color:var(--lab-muted); }
.structure-view-controls .internal-auto-action { display:none!important; }
.visual-settings,.symbol-legend,.scale-info { position:relative; margin:0; flex:none; }
.visual-settings>summary,.symbol-legend>summary,.scale-info>summary { padding:5px; font-size:11px; cursor:pointer; }
.scale-info>output { position:absolute; top:100%; right:0; z-index:15; width:260px; padding:10px; background:var(--lab-panel); border:1px solid var(--lab-line); box-shadow:0 4px 12px #10203c22; }
.rigidity-member { margin:8px 0; padding-bottom:8px; border-bottom:1px solid var(--lab-line); overflow-wrap:anywhere; }
.rigidity-member p { margin:4px 0; }
.count-explanation { margin:10px 0; font-size:12px; }
.count-formula { overflow-x:auto; max-width:100%; }
.count-formula .katex { font-size:1em; }
.project-tabs .title-input { min-width:0; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.main-navigation button { font-weight:400; }
.result-point-label { stroke-width:5px!important; }
.result-label-leader { opacity:.55; }
.moment-sign-sketch { font:11px monospace; white-space:pre-wrap; }
.solve-status { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; order:10; margin-left:auto; }
.solve-status .solve-button { margin-left:0; order:0; }
.solve-status .calculation-state { white-space:nowrap; }
.settings-popover { position:absolute; right:0; top:100%; z-index:20; width:280px; padding:12px; background:var(--lab-panel); border:1px solid var(--lab-line); box-shadow:0 4px 14px #10203c22; }
.visual-settings .view-checks,.scale-info>output { position:static!important; width:auto!important; box-shadow:none!important; border:0!important; padding:0!important; }
.scale-info { margin-top:10px; }
.scale-info h3 { font-size:12px; }
.symbol-legend>h3 { display:none; }
.symbol-legend[open] { padding:0; }
.symbol-legend>pre { position:absolute; top:100%; right:0; background:var(--lab-panel); padding:12px; width:280px; z-index:21; border:1px solid var(--lab-line); }
.show-analysis .load-label { opacity:1; }
#structure-canvas.show-analysis .structural-element { opacity:1; stroke:#192842; }
.status-bar [data-coordinates] { font:inherit!important; font-variant-numeric:tabular-nums; }
.registered-data { font-size:12px; margin:8px 0; }
.rigidity-member button { white-space:normal; text-align:left; margin:4px 0; font-size:12px; }
.canvas-legend { font-size:11px; paint-order:stroke; stroke:white; stroke-width:4px; fill:#10203c; }
.final-expressions { margin:10px 0; }
.legend-popover { position:absolute; top:100%; right:0; z-index:20; padding:12px; width:280px; background:var(--lab-panel); border:1px solid var(--lab-line); box-shadow:0 4px 14px #10203c22; }
.legend-popover h3 { font-size:12px; margin-top:0; }
.legend-popover p,.legend-popover pre { position:static; width:auto; font-size:12px; }
@media (max-width:590px) { .canvas-stage { min-height:360px; flex-basis:360px; } .structure-view-controls .view-segments { flex-basis:100%; } }
.project-identity.has-unsaved::before{content:"•";color:#c77b00;flex:none;font-size:18px}

@media (max-width:1600px) { .canvas-toolbar .toolbar-files { display:none; } }
.result-view > .result-intro { font-size:12px; font-weight:400; line-height:1.4; margin:6px 0; }
.save-indicator { font:11px Inter,"Segoe UI",sans-serif; white-space:nowrap; color:#166534; }
.reaction-toggle { font-size:11px; }
.solution-view h3,.solution-view details>summary,.final-expressions h3 { font-size:13px; font-weight:700; color:var(--lab-ink); }
.rigidity-member>strong { font-size:12px; font-weight:600; }
.final-expressions { border:0; background:transparent; padding:0; }
.solution-view table { width:100%; font-size:11px; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.solution-view th,.solution-view td { padding:5px 2px; text-align:left; border-bottom:1px solid var(--lab-line); }
.chart-inline-title { font-size:12px; fill:#10203c; }
.is-hovered .chart-inline-title { display:none; }
.structure-view-controls>details>summary { list-style:none; }
.structure-view-controls>details>summary::-webkit-details-marker { display:none; }
@media (min-width:901px) {
 body[data-page=editor] { overflow:hidden; }
 .lab { height:100dvh; min-height:0; grid-template-rows:52px minmax(0,1fr); }
 .lab-shell { height:100%; min-height:0; }
 .drawing-area { height:100%; overflow:hidden; scrollbar-gutter:auto; }
 .canvas-stage { flex-grow:0; flex-shrink:0; min-height:0; }
 .drawing-area>.results-panel { flex-grow:0; flex-shrink:0; min-height:0; height:auto; overflow:auto; padding:4px 8px; }
 .results-content { position:relative; }
 .result-tabs { width:210px; height:30px; margin:0 0 4px; }
 .result-tabs button { font-size:10px; min-height:28px; padding:4px; }
 .diagram-controls { position:absolute; top:var(--result-tabs-top, 0px); left:216px; right:0; height:30px; padding:0; gap:4px; margin:0; flex-wrap:nowrap; font-size:10px; }
 .diagram-controls-state { display:none; }
 .diagram-controls label { font-size:0; }
 .diagram-controls select { font-size:10px; min-height:26px; padding:2px; max-width:135px; }
 .diagram-controls button { font-size:10px; min-height:26px; padding:3px; }
 .chart-card { padding:2px 4px; margin:0 0 4px; border-radius:4px; }
 .chart-card>h3 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .chart-card svg { width:100%; height:var(--chart-height,110px); min-height:110px; display:block; }
 .canvas-toolbar { min-height:38px; padding:3px 6px; gap:3px; }
 .structure-view-controls { min-height:32px; padding:3px 6px; }
 .status-bar { min-height:20px; flex-basis:20px; }
 .solution-panel { top:0; max-height:none; height:100%; overflow:auto; }
}

@media(min-width:901px){.lab-shell{height:auto;}.drawing-area .result-view{padding:0 4px 2px;}.formal-count{font-size:12px;margin:6px 0;}}

@media(min-width:901px){.drawing-area{min-height:0;}.lab-shell{grid-template-rows:minmax(0,1fr);}}

@media(min-width:901px){body[data-page="editor"] main.drawing-area{min-height:0;}}

.legend-popover{max-height:min(520px,calc(100dvh - 185px));overflow:auto;border-radius:7px;}
.legend-popover .workspace-utilities>summary{display:none;}
.legend-popover .workspace-utilities-content{position:static;min-width:0;padding:0 0 10px;border:0;box-shadow:none;grid-template-columns:1fr 1fr;}
.legend-popover .workspace-utilities-content button{font-size:11px;padding:6px;min-height:30px;}

/* Review v5: explicit controls and result annotation hierarchy. */
.workspace-status{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:11px;}
.workspace-status .save-indicator,.workspace-status .calculation-state{color:#166534;font-size:11px;}
.workspace-status [data-state="pending"],.workspace-status [data-state="stale"],.workspace-status [data-state="calculating"]{color:#92400e;}
.workspace-status [data-state="error"]{color:#b91c1c;}
.status-divider{color:#64748b;}
.visual-settings>summary,.symbol-legend>summary{border:1px solid #cbd5e1;border-radius:5px;background:var(--lab-panel);min-height:28px;display:flex;align-items:center;justify-content:center;}
.visual-settings>summary:hover,.symbol-legend>summary:hover{border-color:#0058ef;background:#edf4ff;}
.visual-settings>summary:focus-visible,.symbol-legend>summary:focus-visible{outline:2px solid #0058ef;outline-offset:2px;}
.fractional-equations{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--lab-muted);margin:5px 0;}
.chart-axis-tick{font-size:10px;fill:#334155;}
.chart-node-name{font-size:10px;fill:#10203c;font-weight:600;}
.chart-convention{font-size:9px;fill:#475569;}
.canvas-cursor-tooltip{font-family:Inter,"Segoe UI",sans-serif;}
.reaction-force,.reaction-moment{vector-effect:non-scaling-stroke;}
@media(min-width:901px){.chart-card svg{height:var(--chart-height,140px);min-height:140px;}.diagram-controls label{font-size:10px;white-space:nowrap;}.diagram-controls select{max-width:125px;}.result-tabs{width:200px;}.diagram-controls{left:205px;}.workspace-status .save-indicator{margin:0;}.solve-status{margin-left:auto;}.overview-row strong{max-width:72%;}}

.fractional-equations input[type="checkbox"]{width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important;max-width:14px;padding:0!important;margin:0!important;flex:0 0 14px;}
.fractional-equations{justify-content:flex-start;flex-wrap:nowrap;text-align:left;}

body.structcalc-dark .workspace-status [data-state="saved"],body.structcalc-dark .workspace-status [data-state="solved"]{color:#86efac;}
body.structcalc-dark .workspace-status [data-state="pending"],body.structcalc-dark .workspace-status [data-state="stale"],body.structcalc-dark .workspace-status [data-state="calculating"]{color:#fde68a;}
body.structcalc-dark .workspace-status [data-state="error"]{color:#fca5a5;}

.structure-view-controls{flex:0 0 auto;height:auto;}
.settings-popover>label{display:flex;align-items:center;gap:6px;margin:10px 0;}
@media(min-width:901px) and (max-width:1300px){.canvas-toolbar .method-choice{font-size:0;}.canvas-toolbar .method-choice select{font-size:11px;min-width:110px;max-width:125px;}.canvas-toolbar .history-actions button,.canvas-toolbar .zoom-button{width:28px;}.workspace-status{font-size:10px;}.workspace-status .save-indicator,.workspace-status .calculation-state{font-size:10px;}.canvas-toolbar .solve-button{padding:5px 8px!important;}}

/* Review v6: readable free body, controlled layers and always available output. */
#structure-canvas[data-load-visibility="normal"] :is(.load-arrow,.load-label,.moment-symbol,.load-distribution-top){opacity:1;}
#structure-canvas[data-load-visibility="attenuated"] :is(.load-arrow,.load-label,.moment-symbol,.load-distribution-top){opacity:.22;}
#structure-canvas[data-load-visibility="hidden"] :is(.load-arrow,.load-label,.moment-symbol,.load-distribution-top){visibility:hidden;}
#structure-canvas.reaction-view [data-drawing-role^="support"]{opacity:.25;}
.reaction-overlay .reaction-force,.reaction-overlay .reaction-moment{cursor:help;}
.diagram-segments{display:flex;gap:0;white-space:nowrap;}
.diagram-segments button{min-width:28px;border-radius:0;}
.diagram-segments button:first-child{border-radius:5px 0 0 5px;}
.diagram-segments button:last-child{border-radius:0 5px 5px 0;}
.diagram-segments button[aria-pressed="true"]{background:#0058ef;color:white;}
.fractional-equations:has(input:disabled){opacity:.65;cursor:help;}
.load-visibility-control{display:flex;gap:8px;align-items:center;}
@media(min-width:901px){
 .solution-panel{overflow:hidden;}
 .solution-view{flex:1 1 0;height:0;min-height:0;overflow:auto;}
 .solution-footer{position:relative;flex:0 0 auto;margin-top:auto;background:var(--lab-panel);z-index:5;min-height:48px;}
 .solution-footer .export-menu{position:relative;}
 .chart-card svg{min-height:0;height:var(--chart-height,150px);}
 .diagram-controls label{font-size:0;}
 .diagram-controls label select{max-width:65px;}
}
@media print{.solution-panel,.solution-view{height:auto;overflow:visible;}.solution-footer{display:none;}}

.solution-footer .export-menu{padding:0;border:0;flex:0 0 auto;}
.solution-footer .export-menu>summary{border:1px solid #dbe4f0;border-radius:6px;font-size:11px;min-height:35px;padding:7px 5px;}
.solution-footer .export-content{position:absolute;bottom:100%;right:0;min-width:160px;padding:8px;display:grid;gap:6px;border:1px solid var(--lab-line);background:var(--lab-panel);box-shadow:0 4px 15px #10203c22;}
.solution-footer .export-menu:not([open]) .export-content{display:none;}

/* Review v7: associated labels, unclipped axes and didactic landmarks. */
#structure-canvas .reaction-label{fill:#15803d!important;}
.reaction-summary{position:absolute;top:24px;left:8px;right:8px;z-index:2;padding:3px 5px;font-size:11px;line-height:16px;color:#166534;background:#ffffffed;border-radius:4px;pointer-events:none;}
.deformation-extreme{fill:#15803d;stroke:white;stroke-width:2;}
#structure-canvas[data-load-visibility="attenuated"] .load-label{opacity:1;}
#structure-canvas.reaction-view [data-drawing-role^="support"]{opacity:.5;}
.chart-notable{font-size:10px!important;fill:#334155;paint-order:stroke;stroke:white;stroke-width:3px;stroke-linejoin:round;}
.chart-axis-tick{font-size:10px!important;}
.chart-inline-title{font-size:11px!important;}
.other-quantities{position:relative;}
.other-quantities>summary{font-size:10px;border:1px solid #dbe4f0;border-radius:5px;min-height:26px;padding:4px;cursor:pointer;white-space:nowrap;list-style:none;}
.other-quantity-options{position:absolute;bottom:100%;right:0;min-width:135px;padding:6px;display:grid;gap:5px;z-index:5;background:var(--lab-panel);border:1px solid var(--lab-line);box-shadow:0 3px 12px #10203c22;}
.other-quantities:not([open]) .other-quantity-options{display:none;}
.solution-footer button{white-space:nowrap;}
.solution-footer .export-menu>summary{list-style:none;}
.solution-footer .export-menu>summary::-webkit-details-marker{display:none;}
.solution-footer .export-menu>summary::before{content:'▲ ';font-size:9px;}
@media(min-width:901px){.drawing-area>.results-panel{padding-bottom:14px;}.result-tabs{width:130px;}.diagram-controls{left:137px;}}
body.structcalc-dark .reaction-summary{background:#16243af0;color:#86efac;}
body.structcalc-dark .chart-notable{fill:#eaf0ff;stroke:#20314c;}

/* Review v8: readable controls, concise results and compact settings. */
.canvas-toolbar .method-choice{font-size:11px;flex-shrink:0;gap:5px;}
.canvas-toolbar .method-choice select{width:115px;min-width:115px;max-width:115px;text-overflow:ellipsis;}
.workspace-status,.workspace-status .save-indicator,.workspace-status .calculation-state{font-size:12px;}
.other-quantities>summary{color:#10203c;background:#fff;border-color:#9aacc5;font-weight:600;}
.other-quantities>summary:hover{background:#edf4ff;}
.reaction-summary{font-size:12px;line-height:18px;}
.reaction-summary.below-zero{top:48px;}
.zero-result-summary{position:absolute;top:24px;left:8px;right:8px;z-index:2;padding:3px 5px;font-size:12px;line-height:18px;color:#6d28d9;background:#ffffffed;border-radius:4px;pointer-events:none;}
.settings-popover{width:330px;right:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6px 12px;padding:10px;max-height:calc(100dvh - 190px);overflow:auto;}
.settings-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;}
.settings-heading .settings-close{min-height:24px;width:24px;padding:0;font-size:18px;}
.settings-popover section h3{font-size:12px;margin:4px 0 8px;}
.settings-popover section>label{display:flex;align-items:center;gap:5px;margin:8px 0;font-size:12px;}
.settings-popover .load-visibility-control{flex-wrap:wrap;}
.settings-popover .load-visibility-control select{width:100%;min-height:28px;}
.settings-popover .scale-info{margin:8px 0;font-size:11px;line-height:1.45;}
.settings-popover .scale-info h3{display:none;}
.settings-popover [data-structure-scale]{width:64px;min-height:28px;}
.structure-view-controls{position:relative;}
.structure-view-controls .visual-settings{position:static;}
.settings-popover{right:8px;}
.settings-popover section{min-width:0;}
.settings-popover .scale-info{grid-column:1/-1;}
.settings-popover section>label{white-space:normal;}
.model-summary{font-size:12px;line-height:1.45;padding:4px 0 6px;border-bottom:1px solid var(--lab-line);}
.model-summary p{margin:3px 0;}
.solution-footer::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:14px;background:linear-gradient(transparent,var(--lab-panel));pointer-events:none;}
.rigidity-exact{font-size:12px;color:#166534;}
body.structcalc-dark .zero-result-summary{background:#16243af0;color:#c4b5fd;}
body.structcalc-dark .other-quantities>summary{background:#20314c;color:#eaf0ff;}
body.structcalc-dark .rigidity-exact{color:#86efac;}
@media(max-width:600px){.settings-popover{width:min(330px,calc(100vw - 24px));}}

/* Revision v10: visible saving and quota, neutral inspector palette. */
.canvas-toolbar [data-save]{display:inline-flex;flex:0 0 auto;padding:7px 10px}
.workspace-status{flex-wrap:wrap;gap:4px 8px}
.workspace-status .account-quota{position:static;color:var(--lab-muted);font-size:11px;white-space:normal;line-height:1.3}
.inspector-head strong{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.4}
.inspector .model-tree{background:#f3f7fd;flex:0 0 auto}
.inspector .property-info,.inspector .rigidity-note,.properties-empty{background:#f3f7fd;color:#405673;border-color:#dce6f3}
.example-dialog{background:#fff;color:#132641}
.example-dialog button,.example-dialog section{background:#f3f7fd;border-color:#dce6f3;color:#132641}
.workspace-utilities{flex:0 0 auto}
.workspace-utilities>summary{background:#fff;font-size:11px;padding:7px}
.workspace-utilities[open] .workspace-utilities-content{z-index:40;right:auto;left:0}
.calculation-prose{font:13px/1.6 Inter,"Segoe UI",sans-serif;color:var(--lab-ink);overflow-wrap:anywhere}
.calculation-prose p{margin:5px 0}
.calculation-figure img{display:block;width:100%;height:auto;min-height:120px;object-fit:contain}
.diagnostic.neutral{background:#f3f7fd;color:#405673;border-color:#dce6f3}
@media(max-width:590px){.workspace-status .account-quota{max-width:180px}.workspace-utilities-content{max-width:calc(100vw - 28px)}.canvas-toolbar [data-save]{font-size:11px}}

.workspace-status .account-quota{display:block;max-width:none;overflow:visible;width:100%}
.example-dialog button{display:grid;gap:5px;text-align:left}.example-dialog button small{display:block;line-height:1.5;font-weight:400}

.workspace-quota{display:block;flex:0 0 auto;padding:4px 10px;border-top:1px solid var(--lab-line);background:#f3f7fd;color:#405673;font:11px/1.4 Inter,"Segoe UI",sans-serif;white-space:normal}
.inspector{background:#fff}.inspector .rigidity-context{background:#f3f7fd;color:#405673}

.step-navigation{display:grid;grid-template-columns:32px 1fr 32px;gap:8px;align-items:center;padding:8px 0;position:sticky;top:0;background:var(--lab-panel);z-index:2}.step-navigation select{grid-column:1/-1;width:100%;min-width:0;font-size:12px;padding:8px}.step-navigation output{text-align:center;font-size:12px}.step-navigation button{min-height:30px}.solution-step[hidden]{display:none!important}

.figure-zoom{font:12px Inter,"Segoe UI",sans-serif;color:#0055ff;border:1px solid #dce6f3;border-radius:6px;background:#fff;padding:7px 12px}.figure-dialog{width:min(1100px,96vw);max-height:92dvh;overflow:auto;padding:16px}.figure-dialog img{display:block;width:100%;min-width:680px;height:auto}.figure-dialog button{position:sticky;left:0;top:0;padding:8px 14px;z-index:2}@media print{.figure-zoom,.figure-dialog{display:none!important}}

/* Revision v11: transient starter, readable status, consistent tools and tabs. */
.canvas-welcome{pointer-events:none}.canvas-welcome button{pointer-events:auto}
.canvas-stage:focus-within{box-shadow:none}.canvas-stage:has(#structure-canvas:focus-visible){box-shadow:inset 0 0 0 2px #0058ef}
.tool-button:disabled{opacity:.4;cursor:not-allowed}.tool-danger.is-active,.tool-danger[aria-pressed="true"]{background:#fff0ef!important;color:#a52727!important}.tool-danger.is-active .tool-icon{color:inherit}
.project-tab{font:700 13px Inter,"Segoe UI",sans-serif}
.status-bar{min-height:36px;flex:0 0 auto;padding:7px 12px;line-height:1.5}.status-bar [data-status]{padding-bottom:2px}
@media(min-width:1200px){.canvas-toolbar{flex-wrap:nowrap}.canvas-toolbar .workspace-status{flex:0 1 auto;min-width:0}.workspace-status .save-indicator{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-toolbar button{white-space:nowrap}.canvas-toolbar .calculation-state{white-space:nowrap}}
.export-menu>summary[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

.project-identity[data-modified="true"]::after{content:"(modificado)";font:600 11px Inter,Arial,sans-serif;color:#62718a;margin-right:8px;white-space:nowrap}
.results-panel:has(.waiting-result){overflow:hidden}

.drawing-area{container-type:inline-size}
@container(max-width:950px){.canvas-toolbar .workspace-status .save-indicator,.canvas-toolbar .workspace-status .status-divider{display:none}.canvas-toolbar .workspace-status{flex-wrap:nowrap}.canvas-toolbar .workspace-status .calculation-state{font-size:11px}.canvas-toolbar button{padding-left:6px;padding-right:6px}}
@container(max-width:720px){.canvas-toolbar .method-choice{font-size:0}.canvas-toolbar .method-choice select{font-size:11px;width:110px;min-width:110px}.canvas-toolbar .zoom-button,.canvas-toolbar .history-actions button{width:27px;min-width:27px}.canvas-toolbar .workspace-status .calculation-state{font-size:10px}}

@container(max-width:950px){.canvas-toolbar .method-choice{font-size:0}.canvas-toolbar .method-choice select{font-size:11px}}

/* Canvas first: until a calculation runs, results and solution take no space. */
#editor-app[data-results="none"] .drawing-area > .results-panel,
#editor-app[data-results="none"] .vertical-resize,
#editor-app[data-results="none"] .structure-view-controls,
#editor-app[data-results="none"] .solution-panel,
#editor-app[data-results="none"] .resize-right { display: none; }
#editor-app[data-results="none"] .canvas-stage { flex: 1 1 auto; min-height: 360px; }
@media (min-width: 901px) {
  #editor-app[data-results="none"] .lab-shell { grid-template-columns: var(--left-width) minmax(0, 1fr); }
}

/* Welcome card: temporary help that never outgrows or blocks the canvas. */
.canvas-welcome { max-height: calc(100% - 24px); overflow: auto; padding: 22px 26px 16px; }
.canvas-welcome .starter-close { position: absolute; top: 2px; right: 2px; width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #5b6b85; font-size: 22px; line-height: 1; }
.canvas-welcome .starter-close:hover { color: #0058ef; }
@media (pointer: coarse) { .canvas-welcome [data-key-hint] { display: none; } }

/* Charts are drawn 1:1 in pixels now; text no longer gets stretched. */
.chart-axis-tick,.chart-notable{font-size:11px!important;}

/* ===== Laboratório · layout de referência 1440×900 =====
   Menu 196 px · Solução 372 px · barras de 48/36/36 px · painel inferior 250 px (180–480). */
:root { --lab-accent: #1f5fd1; --lab-border: #d9dee7; --lab-divider: #eef1f5; --lab-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }

/* Floating history and zoom on the canvas (all widths). */
.canvas-controls { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--lab-border); border-radius: 8px; background: #fffffff2; box-shadow: 0 2px 8px #10203c14; }
.canvas-controls .history-actions { display: flex; gap: 2px; margin: 0 4px 0 0; padding-right: 4px; border-right: 1px solid var(--lab-divider); }
.canvas-controls button { width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #1d2b44; font-size: 16px; line-height: 1; touch-action: manipulation; }
.canvas-controls button:hover:not(:disabled) { background: #eef3fc; }
.canvas-controls button:disabled { opacity: .35; }
.canvas-controls .zoom-level { min-width: 44px; text-align: center; font: 12px/1 var(--lab-mono); font-variant-numeric: tabular-nums; color: #334155; }
body.structcalc-dark .canvas-controls { background: #1d2d47f2; border-color: #33476a; }
body.structcalc-dark .canvas-controls button { color: #eaf0ff; }

/* Tables tab: three cards side by side, each as wide as its content. */
.result-cards { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; overflow-x: auto; }
.result-card-table { flex-shrink: 0; border: 1px solid var(--lab-border); border-radius: 8px; padding: 10px 12px; background: #fff; }
.result-card-table h3 { margin: 0 0 6px; font: 700 11px/1.3 Inter, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #334155; }
.result-card-table .t { width: auto; border-collapse: collapse; font-size: 12.5px; }
.result-card-table .t th { padding: 5px 10px; font-size: 11px; font-weight: 600; color: #4a5568; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--lab-border); }
.result-card-table .t td { padding: 5px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--lab-divider); font-family: var(--lab-mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.result-card-table .t th:first-child, .result-card-table .t td:first-child { text-align: left; font-weight: 600; font-family: Inter, "Segoe UI", sans-serif; }
.result-card-table .t td:last-child:not(:first-child) { font-family: Inter, "Segoe UI", sans-serif; }
.result-card-table .t tr:last-child td { border-bottom: 0; }
.result-card-table .sum-row td { border-top: 1px solid var(--lab-border); font-weight: 600; }
.result-card-table .cell-empty { color: #94a3b8; }
.more-tables { margin: 4px 2px 8px; }
.more-tables > summary { cursor: pointer; padding: 6px 0; color: #4a5568; font-size: 12px; font-weight: 600; }
body.structcalc-dark .result-card-table { background: #16243a; border-color: #33476a; }
body.structcalc-dark .result-card-table h3, body.structcalc-dark .result-card-table .t th { color: #c9d6ee; }

/* Solution overview: compact alert. */
.compact-alert { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 6px 5px 10px; border: 1px solid #f3d28b; border-radius: 6px; background: #fff7e6; color: #7a4b00; font-size: 12px; line-height: 1.3; }
.compact-alert span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-alert button { min-height: 24px; padding: 2px 10px; border: 1px solid #e8b65a; border-radius: 6px; background: #fff; color: #7a4b00; font-size: 12px; font-weight: 600; }
.solution-toggle, .solution-close { display: none; }

@media (min-width: 901px) {
  #editor-app.lab { --left-width: 196px; --right-width: 372px; grid-template-rows: 48px minmax(0, 1fr); font-size: 12.5px; }
  #editor-app .lab-header { height: 48px; min-height: 48px; }
  #editor-app .main-navigation button, #editor-app .main-navigation a { min-height: 30px; padding: 5px 13px; font-size: 13px; }

  /* Left menu. */
  #editor-app .toolbox { padding-left: 6px; padding-right: 6px; }
  #editor-app .side-tabs button { min-height: 34px; font-size: 12.5px; }
  #editor-app .tool-group { padding: 6px 0; }
  #editor-app .tool-group > summary { margin: 4px 6px 4px; font: 700 11px/1.3 Inter, "Segoe UI", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
  #editor-app .tool-button { min-height: 32px; height: 32px; gap: 10px; padding: 0 8px; border-radius: 6px; font-size: 13px; }
  #editor-app .tool-button > span { font-size: 13px; }
  #editor-app .tool-button .tool-icon { width: 16px; height: 16px; flex: 0 0 16px; }
  #editor-app .tool-button.is-active, #editor-app .tool-button[aria-pressed="true"] { background: #eef3fc; color: var(--lab-accent); }
  #editor-app .tool-button.is-active .tool-icon { stroke: var(--lab-accent); }
  #editor-app .tool-button[data-tool="excluir"]:not(:disabled) { color: #c0262d; }
  #editor-app .tool-button[data-tool="excluir"]:not(:disabled) .tool-icon { stroke: #c0262d; }

  /* Project bar (36 px): tabs left, actions right. */
  #editor-app .project-tabs { height: 36px; flex: 0 0 36px; align-items: center; gap: 4px; padding: 0 6px 0 0; }
  #editor-app .project-tab-list { flex: 0 1 auto; min-width: 90px; align-self: end; }
  #editor-app .project-tabs .project-identity { height: 32px; }
  #editor-app .project-tabs .title-input { width: auto; min-width: 60px; max-width: 220px; field-sizing: content; }
  #editor-app .project-tabs .new-project { width: 28px; min-height: 28px; margin: 0 2px; font-size: 20px; }
  #editor-app .project-tabs > .canvas-toolbar { order: 0; flex: 0 1 auto; flex-wrap: nowrap; min-height: 0; height: 36px; margin-left: auto; padding: 0; gap: 6px; border: 0; background: transparent; overflow: visible; }
  #editor-app .project-tabs > .canvas-toolbar button, #editor-app .project-tabs > .canvas-toolbar select, #editor-app .project-tabs > .canvas-toolbar summary { min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; font-size: 12.5px; border-radius: 6px; }
  #editor-app .project-tabs .method-choice select { min-width: 96px; max-width: 120px; }
  #editor-app .project-tabs .workspace-status .save-indicator, #editor-app .project-tabs .workspace-status .status-divider { display: none; }
  #editor-app .project-tabs .solve-button { min-height: 28px!important; height: 28px; padding: 0 14px!important; background: var(--lab-accent)!important; }
  #editor-app .solve-status:has(.calculation-state[data-state="solved"]) .solve-button { background: #1b2740!important; color: #fff; }
  #editor-app .calculation-state[data-state="solved"] { color: #15803d; font-weight: 600; }

  /* View bar (36 px). */
  #editor-app .structure-view-controls { height: 36px; min-height: 36px; flex-wrap: nowrap; gap: 6px; padding: 0 8px; overflow-x: auto; overflow-y: hidden; }
  #editor-app .structure-view-controls button, #editor-app .structure-view-controls summary { min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; }
  #editor-app .view-segments button { min-height: 28px; height: 28px; font-size: 12.5px; }
  #editor-app .structure-view-controls label { white-space: nowrap; font-size: 12.5px; }

  /* Canvas, status and the resize handle. */
  #editor-app .status-bar { flex: 0 0 28px; min-height: 28px; height: 28px; padding-top: 0; padding-bottom: 0; align-items: center; }
  #editor-app .vertical-resize { flex: 0 0 6px; height: 6px; min-height: 6px; cursor: row-resize; background: var(--lab-divider); }
  #editor-app .vertical-resize:hover, #editor-app .vertical-resize:focus-visible { background: #c7d3e6; }

  /* Bottom panel: 34 px tabs, units and precision on the right. */
  #editor-app .results-content { position: relative; }
  #editor-app .result-tabs { height: 34px; }
  #editor-app .result-tabs button { min-height: 32px; font-size: 12px; }
  #editor-app .result-units { position: absolute; top: var(--result-tabs-top, 0px); right: 4px; height: 34px; display: flex; align-items: center; color: #4a5568; font: 11px var(--lab-mono); white-space: nowrap; pointer-events: none; }
  #editor-app .diagram-controls { right: 150px; }

  /* Solution panel (372 px). */
  #editor-app .solution-title { flex: 0 0 40px; padding: 0 6px; font: 700 14px Inter, "Segoe UI", sans-serif; }
  #editor-app .solution-tabs { flex: 0 0 auto; min-height: 0; padding: 3px; gap: 3px; border-radius: 8px; background: #f1f4f8; }
  #editor-app .solution-tabs button { min-height: 28px; border: 0; border-radius: 6px; font-size: 12.5px; }
  #editor-app .solution-tabs button[aria-selected="true"] { background: #fff; color: #10203c; box-shadow: 0 1px 3px #10203c24; }
  #editor-app .solution-view { padding: 12px 14px; }
  #editor-app .solution-view > * + * { margin-top: 12px; }
  #editor-app .solution-view h3 { margin: 0 0 6px; font-size: 13px; }
  #editor-app .model-summary p { margin: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #editor-app .solution-view table { width: 100%; }
  #editor-app .solution-view table td, #editor-app .solution-view table th { font-size: 12.5px; }
  #editor-app .solution-view .katex { font-size: 14.5px; }
  #editor-app .solution-footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; flex: 0 0 auto; min-height: 0; padding: 8px 6px; }
  #editor-app .solution-footer > button, #editor-app .solution-footer .export-menu > summary { width: 100%; min-height: 28px; height: 28px; padding: 0 4px; font-size: 12px; display: flex; align-items: center; justify-content: center; }
}

@media (min-width: 1280px) and (max-width: 1439px) { #editor-app.lab { --right-width: 340px; } }

/* Below 1280 px: the left menu shows icons only (56 px); properties open as an overlay. */
/* Abaixo de 1280 px o menu da esquerda fica mais estreito, mas mantém os nomes das ferramentas:
   só os ícones confundiam quem ainda não conhece o editor. */
@media (min-width: 901px) and (max-width: 1279px) {
  #editor-app.lab { --left-width: 180px; --right-width: 320px; }
  #editor-app .toolbox { padding-left: 4px; padding-right: 4px; overflow-x: hidden; }
  #editor-app .side-tabs button { padding: 0 4px; font-size: 12px; }
  #editor-app .resize-left { display: none; }
}

/* Below 1100 px: the solution becomes a drawer over the canvas (the left menu keeps its labels). */
@media (min-width: 901px) and (max-width: 1099px) {
  #editor-app .lab-shell { grid-template-columns: var(--left-width) minmax(0, 1fr) 0; }
  #editor-app .solution-panel { position: fixed; top: 48px; right: 0; bottom: 0; z-index: 30; width: 340px; height: auto; max-height: none; align-self: auto; transform: translateX(100%); transition: transform .2s ease; box-shadow: -8px 0 24px #10203c2e; }
  #editor-app.solution-open .solution-panel { transform: none; }
  #editor-app .resize-right { display: none; }
  /* Result or failure diagnostics: either way the drawer has something to show. */
  #editor-app:not([data-results="none"]) .solution-toggle { display: inline-flex; align-items: center; }
  #editor-app .solution-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 28px; margin-left: auto; padding: 0; border: 0; background: transparent; font-size: 20px; }
  #editor-app .solution-title { display: flex; align-items: center; }
}
@media (min-width: 901px) { #editor-app .project-tabs .solve-button, #editor-app .project-tabs .solve-button span { color: #fff!important; } }

/* Phones and narrow windows: the project row wraps its actions below the tabs. */
@media (max-width: 900px) {
  #editor-app .project-tabs { height: auto; flex: 0 0 auto; flex-wrap: wrap; align-items: center; }
  #editor-app .project-tab-list { flex: 1 1 0; min-width: 0; }
  #editor-app .project-tabs > .canvas-toolbar { flex: 1 1 100%; order: 5; min-width: 0; }
  #editor-app .result-units { display: none; }
}

/* Frame charts drawn on the structure: same card as the linear chart, plus zoom and pan. */
.structure-chart { position: relative; }
.structure-chart svg { cursor: crosshair; touch-action: none; user-select: none; }
.structure-chart svg:active { cursor: grabbing; }
.structure-chart .structure-hover { display: block; }
.structure-chart .chart-reset { position: absolute; top: 4px; right: 6px; width: 24px; min-width: 24px; height: 22px; min-height: 22px; padding: 0; border: 1px solid var(--lab-border, #d9dee7); border-radius: 5px; background: #fff; color: #1d2b44; font-size: 13px; line-height: 1; }

/* Functions panel: x global / x local switch, one equation per line. */
.functions-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: 7px; background: #f1f4f8; }
.segmented button { min-height: 26px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: #334155; font-size: 12px; }
.segmented button[aria-pressed="true"] { background: #fff; color: #10203c; font-weight: 600; box-shadow: 0 1px 3px #10203c24; }
.functions-note, .functions-range { margin: 2px 0 4px; color: #56637a; font-size: 11.5px; }
.functions-range { font-weight: 600; color: #334155; }
.effort-line { margin: 2px 0; overflow-x: auto; overflow-y: hidden; }
body.structcalc-dark .segmented { background: #1d2d47; }
body.structcalc-dark .segmented button[aria-pressed="true"] { background: #16243a; color: #eaf0ff; }

/* Functions panel uses the interface font; KaTeX keeps its own for the math. */
.functions-content { font: 12.5px/1.5 Inter, "Segoe UI", sans-serif; }
.functions-content .effort-functions > summary { font-weight: 600; color: #10203c; }

/* Project tabs take the free space and end in an ellipsis instead of being cut. */
@media (min-width: 901px) {
  #editor-app .project-tab-list { flex: 1 1 auto; min-width: 0; }
  #editor-app .project-tabs > .canvas-toolbar { flex: 0 0 auto; }
  #editor-app .project-tab { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 901px) {
  #editor-app .project-tab-list { min-width: 160px; }
  #editor-app .project-tabs .title-input { max-width: 200px; text-overflow: ellipsis; }
}
@media (min-width: 901px) and (max-width: 1439px) {
  #editor-app .project-tabs .workspace-utilities > summary { font-size: 0; width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  #editor-app .project-tabs .workspace-utilities > summary::before { content: "⋯"; font-size: 18px; line-height: 1; }
  #editor-app .project-tabs .title-input { max-width: 150px; }
}

/* Fundamental structure picker. */
.fundamental-picker { margin: 12px 0; padding: 10px; border: 1px solid var(--lab-border, #d9dee7); border-radius: 8px; background: #fbfcfe; }
.fundamental-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.fundamental-head h3 { margin: 0 !important; }
.fundamental-hint { margin: 6px 0 8px; color: #56637a; font-size: 12px; }
.fundamental-filter { margin: 0 0 8px; }
.fundamental-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fundamental-card { display: grid; gap: 3px; min-height: 0; padding: 6px 8px 8px; border: 1px solid var(--lab-border, #d9dee7); border-radius: 8px; background: #fff; color: #10203c; text-align: left; font: 12px/1.35 Inter, "Segoe UI", sans-serif; cursor: pointer; }
.fundamental-card:hover { border-color: #9db5e3; }
.fundamental-card[aria-pressed="true"] { border-color: var(--lab-accent, #1f5fd1); box-shadow: 0 0 0 2px #1f5fd133; }
.fundamental-card svg { width: 100%; height: 64px; }
.fundamental-card strong { font-weight: 600; font-size: 12px; }
.fundamental-result { color: #56637a; font-size: 11.5px; }
.fundamental-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.fundamental-tags .tag { padding: 1px 6px; border-radius: 9px; font-size: 10.5px; font-weight: 600; }
.tag.recommended { background: #e7efff; color: #1f5fd1; }
.tag.table-ok { background: #e8f5ec; color: #15803d; }
.tag.table-no { background: #f3f4f6; color: #6b7280; }
.fundamental-apply { width: 100%; min-height: 32px; margin-top: 8px; border: 0; border-radius: 6px; background: var(--lab-accent, #1f5fd1); color: #fff; font-weight: 600; }
.segmented button:disabled { opacity: .45; cursor: not-allowed; }
body.structcalc-dark .fundamental-picker, body.structcalc-dark .fundamental-card { background: #16243a; border-color: #33476a; color: #eaf0ff; }

/* Picker: one summary line; when open, compact rows with the sketch on the left. */
.fundamental-picker { padding: 0; }
.fundamental-picker > .fundamental-summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; font-size: 12px; line-height: 1.35; }
.fundamental-picker > .fundamental-summary::-webkit-details-marker { display: none; }
.fundamental-current { flex: 1; min-width: 0; color: #334155; }
.fundamental-current strong { color: #10203c; }
.fundamental-change { flex: 0 0 auto; padding: 3px 9px; border: 1px solid var(--lab-border, #d9dee7); border-radius: 6px; background: #fff; color: var(--lab-accent, #1f5fd1); font-weight: 600; }
.fundamental-picker[open] .fundamental-change { visibility: hidden; }
.fundamental-picker[open] { padding-bottom: 10px; }
.fundamental-picker > :not(summary) { margin-left: 10px; margin-right: 10px; }
.fundamental-head { justify-content: flex-start; margin-top: 2px; }
.fundamental-label { font-size: 12px; color: #56637a; }
.fundamental-grid { grid-template-columns: 1fr; gap: 6px; }
.fundamental-card { grid-template-columns: 96px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 6px 8px; }
.fundamental-card svg { grid-row: 1 / span 3; width: 96px; height: 44px; }
.fundamental-tags { margin-top: 0; }

/* Canvas layers by view: results never compete with load labels or dimensions. */
#structure-canvas[data-load-visibility="attenuated"] .load-label { visibility: hidden; }
#structure-canvas[data-load-visibility="attenuated"] :is(.load-arrow,.moment-symbol,.load-distribution-top) { opacity: .25; }
#structure-canvas:is([data-view-mode="N"],[data-view-mode="V"],[data-view-mode="M"],[data-view-mode="deformation"],[data-view-mode="reactions"]):not([data-dims="on"]) [data-dimensions] { display: none; }

/* Reactions summary: a small chip that opens on demand, never a line across the drawing. */
.reaction-summary { left: auto; right: 8px; top: 8px; max-width: min(70%, 520px); padding: 0; background: transparent; pointer-events: auto; }
.reaction-summary > summary { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 9px; border: 1px solid #bbe5c8; border-radius: 12px; background: #f0faf3f2; color: #166534; font-size: 11.5px; font-weight: 600; cursor: pointer; list-style: none; }
.reaction-summary > summary::-webkit-details-marker { display: none; }
.reaction-summary > summary::after { content: "▸"; font-size: 10px; }
.reaction-summary[open] > summary::after { content: "▾"; }
.reaction-summary { display: flex; flex-direction: column; align-items: flex-end; }
.reaction-summary > div { margin-top: 4px; padding: 5px 8px; border: 1px solid #bbe5c8; border-radius: 6px; background: #fffffff5; color: #166534; font-size: 12px; line-height: 1.45; text-align: right; }
.reaction-summary.below-zero { top: 8px; }
body.structcalc-dark .reaction-summary > summary, body.structcalc-dark .reaction-summary > div { background: #16243af0; border-color: #2f5a3d; color: #86efac; }
#structure-canvas:is([data-view-mode="N"],[data-view-mode="V"],[data-view-mode="M"],[data-view-mode="deformation"],[data-view-mode="reactions"]):not([data-dims="on"]) .label-leader { display: none; }

/* Step drawings and the color link between equation terms and the drawing. */
.step-figure-wrap { margin: 6px 0 8px; padding: 4px; border: 1px solid var(--lab-border, #d9dee7); border-radius: 8px; background: #fbfcfe; }
.step-figure { display: block; width: 100%; height: auto; }
.step-figure-label { font: 10.5px Inter, "Segoe UI", sans-serif; fill: #56637a; }
.step-bar { stroke: #1f2937; stroke-width: 2.2; stroke-linecap: round; }
.step-support { stroke: #1f2937; stroke-width: 1.4; fill: none; }
.step-support.thin { stroke-width: 1; }
.step-support.fill { fill: #fff; }
.step-load { stroke: #1f5fd1; stroke-width: 1.3; opacity: .75; }
.step-diagram { fill-opacity: .14; stroke: none; }
.step-diagram-line { fill: none; stroke-width: 1.8; }
.role-real { fill: #d14b34; stroke: #d14b34; }
.step-diagram.role-unit, .step-diagram-line.role-unit { fill: #7c3aed; stroke: #7c3aed; }
.step-diagram-line.role-real, .step-diagram-line.role-unit { fill: none; }
.step-arrow { stroke-width: 2; }
.step-arrow line, .step-arrow path[fill="none"] { fill: none; stroke: currentColor; stroke-width: 2; }
.step-arrow path:not([fill]) { fill: currentColor; stroke: none; }
.step-arrow.role-unit { color: #7c3aed; } .step-arrow.role-redundant { color: #c2410c; } .step-arrow.role-reaction { color: #15803d; }
.step-arrow-label { font: 600 10.5px Inter, "Segoe UI", sans-serif; fill: currentColor; stroke: none; }
.step-range { stroke: #f59e0b; stroke-width: 7; stroke-opacity: .35; stroke-linecap: round; }
.step-cut-zone { fill: #1f5fd1; fill-opacity: .06; }
.step-cut-line { stroke: #1f5fd1; stroke-width: 1.4; stroke-dasharray: 4 3; }
.step-figure .is-linked { filter: drop-shadow(0 0 3px currentColor); }
.step-figure .step-diagram.is-linked { fill-opacity: .32; }
.step-figure .step-diagram-line.is-linked { stroke-width: 3; }
.katex .linkable { cursor: help; border-radius: 3px; transition: background .12s; }
.katex .linkable.is-linked { background: #fff3c4; }
body.structcalc-dark .step-figure-wrap { background: #16243a; border-color: #33476a; }
body.structcalc-dark .step-bar, body.structcalc-dark .step-support { stroke: #dbe4f3; }
body.structcalc-dark .step-support.fill { fill: #16243a; }
.step-arrow.role-internal { color: #334155; }

/* Pro: closed steps, banner and the explanation dialog. */
.locked-step { position: relative; margin: 6px 0; padding: 10px; border: 1px dashed #c7d3e6; border-radius: 8px; background: #fbfcfe; }
.locked-lines { display: grid; gap: 6px; margin-bottom: 8px; filter: blur(2px); opacity: .7; }
.locked-lines span { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #dbe4f3, #eef2f8); }
.locked-lines span:nth-child(2) { width: 85%; } .locked-lines span:nth-child(3) { width: 65%; } .locked-lines span:nth-child(4) { width: 75%; }
.locked-note { margin: 0 0 8px; color: #56637a; font-size: 12px; }
.locked-cta { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: #1b2740; color: #fff; font-weight: 600; font-size: 12.5px; }
.locked-banner { display: grid; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #c7d3e6; border-radius: 8px; background: #f5f8fd; font-size: 12.5px; color: #334155; }
.locked-banner strong { color: #10203c; }
.locked-banner .locked-cta { justify-self: start; margin-top: 4px; }
.pro-dialog { width: min(92vw, 420px); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 24px 70px #0b183340; }
.pro-dialog form { padding: 22px 22px 18px; }
.pro-dialog .pro-kicker { margin: 0 0 4px; color: #1f5fd1; font: 700 11px/1.3 Inter, "Segoe UI", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.pro-dialog .pro-title { margin: 0 0 12px; font: 600 17px/1.35 Inter, "Segoe UI", sans-serif; color: #10203c; }
.pro-dialog ul { margin: 0 0 16px; padding-left: 18px; color: #334155; font-size: 13px; line-height: 1.6; }
.pro-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pro-actions .secondary { min-height: 36px; padding: 0 14px; border: 1px solid #d9dee7; border-radius: 8px; background: #fff; }
.pro-actions .primary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 8px; background: #1f5fd1; color: #fff; font-weight: 600; text-decoration: none; }
.pro-dialog::backdrop { background: #0b18334d; }
.step-figure .step-value { font: 600 9px Inter, "Segoe UI", sans-serif; fill: #1b2c4a; paint-order: stroke; stroke: #fbfcfe; stroke-width: 3px; stroke-linejoin: round; }
body.structcalc-dark .step-figure .step-value { fill: #e8eef9; stroke: #16243a; }
.step-figure .step-hinge { fill: #fff; stroke: #17243a; stroke-width: 1.6; }
.step-figure .step-load-head { fill: currentColor; stroke: none; }
.step-figure g.step-load { color: #d14b34; stroke: #d14b34; stroke-width: 1.4; }
body.structcalc-dark .step-figure .step-hinge { fill: #16243a; stroke: #e8eef9; }
.kb-table { margin: 6px 0 10px; border: 1px solid var(--lab-border, #d9dee7); border-radius: 8px; background: #fbfcfe; }
.kb-table > summary { cursor: pointer; padding: 8px 10px; font: 600 12.5px Inter, "Segoe UI", sans-serif; color: #24324a; }
.kb-scroll { overflow: auto; max-height: 520px; padding: 0 8px 4px; -webkit-overflow-scrolling: touch; }
.kb-grid { border-collapse: separate; border-spacing: 0; min-width: 980px; width: 100%; font: 11.5px Inter, "Segoe UI", sans-serif; color: #24324a; }
.kb-grid th, .kb-grid td { border-right: 1px solid #e1e6ee; border-bottom: 1px solid #e1e6ee; padding: 6px; text-align: center; vertical-align: middle; }
.kb-grid thead th { position: sticky; top: 0; z-index: 2; background: #f1f4f9; font-weight: 600; font-size: 10.5px; color: #4a5872; }
.kb-grid th[scope=row] { position: sticky; left: 0; z-index: 1; background: #f1f4f9; font-weight: 600; font-size: 10.5px; color: #4a5872; text-align: left; width: 150px; }
.kb-grid thead th.kb-corner { left: 0; z-index: 3; font-size: 10px; color: #7a879c; }
.kb-grid th span { display: block; line-height: 1.25; }
.kb-index { display: block; font-size: 9.5px; font-weight: 700; color: #8a6420; letter-spacing: .03em; text-transform: uppercase; }
.kb-shape { display: block; width: 46px; height: 25px; margin: 2px auto; overflow: visible; }
.kb-grid th[scope=row] .kb-shape { margin: 2px 0; }
.kb-shape .kb-fill { fill: #dbe7fb; stroke: #2f6fdc; stroke-width: 1.2; }
.kb-shape .kb-axis { stroke: #17243a; stroke-width: 1.6; }
.kb-formula { white-space: nowrap; font-size: 12px; }
.kb-formula .katex { font-size: 1.02em; }
.kb-empty { color: #b0b9c8; }
.kb-cell-note { display: block; font-size: 9.5px; color: #7a879c; }
.kb-grid td.is-used { background: #fff3d6; box-shadow: inset 0 0 0 2px #e19a1d; }
.kb-tag { display: block; margin-bottom: 2px; font-size: 10px; color: #a35f00; letter-spacing: .02em; }
.kb-note { margin: 4px 10px 8px; font: 11px/1.45 Inter, "Segoe UI", sans-serif; color: #5b6880; }
body.structcalc-dark .kb-table { background: #13203a; border-color: #2c3b57; }
body.structcalc-dark .kb-table > summary, body.structcalc-dark .kb-grid, body.structcalc-dark .kb-dialog { color: #dfe7f6; }
body.structcalc-dark .kb-grid thead th, body.structcalc-dark .kb-grid th[scope=row] { background: #1a2945; color: #b6c4dc; }
body.structcalc-dark .kb-grid th, body.structcalc-dark .kb-grid td { border-color: #2c3b57; }
body.structcalc-dark .kb-shape .kb-fill { fill: #24406e; stroke: #7fa8f0; }
body.structcalc-dark .kb-shape .kb-axis { stroke: #e5ecfa; }
body.structcalc-dark .kb-index { color: #f0b24a; }
body.structcalc-dark .kb-grid td.is-used { background: #4a3812; box-shadow: inset 0 0 0 2px #f0b24a; }
body.structcalc-dark .kb-tag { color: #ffc861; }
body.structcalc-dark .kb-note { color: #a7b6cf; }
.kb-used { display: grid; gap: 8px; padding: 0 10px 8px; }
.kb-used-item { border: 1px solid #f0d49c; background: #fffaf0; border-radius: 7px; padding: 8px; min-width: 0; }
.kb-used-head { display: flex; align-items: baseline; gap: 8px; font: 600 11.5px Inter, "Segoe UI", sans-serif; color: #24324a; }
.kb-used-head .kb-tag { display: inline; margin: 0; }
.kb-used-shapes { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.kb-used-shapes > div { flex: 1; min-width: 0; text-align: center; }
.kb-used-shapes small { display: block; font: 10.5px/1.3 Inter, "Segoe UI", sans-serif; color: #4a5872; }
.kb-times { font-size: 14px; color: #7a879c; }
.kb-used-item .kb-formula { display: block; overflow-x: auto; text-align: center; padding: 2px 0; }
.kb-open { margin: 0 10px 10px; width: calc(100% - 20px); }
.kb-dialog { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 24px 80px #0005; background: #fbfcfe; }
.kb-dialog::backdrop { background: #0f182999; }
.kb-dialog-head { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e1e6ee; font: 13px Inter, "Segoe UI", sans-serif; color: #24324a; }
.kb-dialog-used { flex: 1; color: #a35f00; font-weight: 600; font-size: 12px; }
.kb-dialog .kb-scroll { max-height: calc(100vh - 150px); padding: 8px 12px; }
body.structcalc-dark .kb-used-item { background: #2a2414; border-color: #6b5320; }
body.structcalc-dark .kb-used-head, body.structcalc-dark .kb-used-shapes small { color: #dfe7f6; }
body.structcalc-dark .kb-dialog, body.structcalc-dark .kb-dialog-head { background: #13203a; color: #dfe7f6; border-color: #2c3b57; }


/* Valor da carga: barra acima do desenho com Força, Momento ou Distribuída ativos. */
.load-value-bar { order:1; flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:6px 12px; border-bottom:1px solid var(--lab-line); background:var(--lab-mint); font-size:12px; }
.load-value-bar[hidden] { display:none; }
.load-value-bar .load-bar-title { font-size:12px; color:var(--lab-ink); }
.load-value-bar label { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.load-value-bar label[hidden] { display:none; }
.load-value-bar input,.load-value-bar select { font:inherit; min-height:32px; padding:3px 7px; border:1px solid var(--lab-line); border-radius:5px; }
.load-value-bar input { width:76px; text-align:right; }
.load-value-bar input[type=checkbox] { width:auto; min-height:0; margin:0; }
.load-value-bar input[aria-invalid] { border-color:#e19a1d; outline:2px solid #e19a1d55; }
.load-value-bar em { font-style:normal; color:var(--lab-muted); }
.load-value-bar .view-segments button { min-width:34px; font-size:15px; line-height:1; }
.load-value-bar output { flex:1 1 180px; min-width:0; color:var(--lab-muted); font-size:11px; }
body.structcalc-dark .load-value-bar { background:#1d2d47; }
body.structcalc-dark .load-value-bar :is(input,select) { background:#20314c; color:#eaf0ff; }
@media (max-width:590px) {
  .load-value-bar { gap:6px 8px; padding:5px 8px; }
  .load-value-bar .load-bar-title,.load-value-bar output { display:none; }
  .load-value-bar input { width:58px; min-height:36px; }
  .load-value-bar .view-segments { flex-wrap:nowrap; }
  .load-value-bar .view-segments button { min-height:36px; min-width:36px; padding:5px; }
  .load-value-bar[data-load-tool="distribuida"] .view-segments { order:1; }
  .load-value-bar[data-load-tool="distribuida"] [data-load-field] { order:2; }
}
#editor-app.is-mobile .load-value-bar { flex:none; }

/* ===== Layout sem sobreposição =====
   Nada pode alargar a página nem passar por baixo de outro bloco: a grade externa tem uma
   coluna que encolhe, e na barra do projeto quem cede espaço são as abas. A barra não quebra
   linha: mudar de altura redimensiona o desenho e reenquadra a estrutura a cada mudança de estado. */
#editor-app.lab { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) {
  /* As abas cedem espaço (terminam em reticências); a barra de ações nunca passa por baixo da Solução. */
  #editor-app .project-tab-list { flex: 1 1 0; min-width: 72px; }
  #editor-app .project-tabs > .canvas-toolbar { flex: 0 0 auto; max-width: calc(100% - 110px); }
  #editor-app .project-tabs .calculation-state { white-space: nowrap; }
  #editor-app .project-tabs .new-project { height: 28px; padding: 0; line-height: 1; }
  /* Com muitas abas, elas encolhem (reticências) antes de rolar; a faixa não mostra barra de rolagem. */
  #editor-app .project-tab-list { scrollbar-width: none; }
  #editor-app .project-tab-list::-webkit-scrollbar { display: none; }
  /* Abas e aba ativa com a mesma altura (32 px), alinhadas na base da faixa de 36 px: sem a altura
     mínima de toque (44 px) dos botões, que empurrava as abas para baixo do cabeçalho. */
  #editor-app .project-tab-item { position: relative; display: flex; flex: 0 1 auto; min-width: 118px; align-self: end; }
  #editor-app .project-tab { flex: 1 1 auto; min-width: 0; height: 32px; min-height: 32px; }
  #editor-app .project-tab-item:has(.project-tab-close) .project-tab { padding-right: 28px; }
  #editor-app .project-tabs .project-identity { height: 32px; }
  #editor-app .project-tabs .project-identity { flex: 0 1 auto; min-width: 136px; }
  #editor-app .project-tabs .title-input { min-width: 0; }
  /* O menu da esquerda ocupa a altura toda da tela, e não só a do conteúdo. */
  #editor-app .toolbox { height: calc(100vh - 48px); max-height: none; overflow-y: auto; }
}
/* × de fechar em cada aba (aparece com duas ou mais abas abertas). */
#editor-app .project-tab-close { flex: none; width: 20px; height: 20px; min-height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #5b6b85; font-size: 15px; line-height: 1; cursor: pointer; }
#editor-app .project-tab-close:hover { background: #dbe5f5; color: #10203c; }
#editor-app .project-tab-item .project-tab-close { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
#editor-app.is-mobile .project-tab-item, #editor-app.is-mobile .project-tab-close { display: none; }
body.structcalc-dark #editor-app .project-tab-close { color: #a7b6cf; }
body.structcalc-dark #editor-app .project-tab-close:hover { background: #2a3d5c; color: #fff; }
/* De 901 a 1199 px o cabeçalho mostra só o símbolo da marca, para caber navegação e conta. */
@media (min-width: 901px) and (max-width: 1199px) {
  #editor-app .lab-brand { min-width: 0; }
  #editor-app .lab-brand strong { display: none; }
  #editor-app .main-navigation { padding-left: 12px; }
  #editor-app .main-navigation button, #editor-app .main-navigation a { padding: 5px 9px; }
}
/* Com o painel Solução na tela, "Abrir resolução" já está nele: o botão repetido da barra sai. */
@media (min-width: 1100px) { #editor-app .project-tabs .view-resolution { display: none !important; } }
/* O aviso rápido ("Análise concluída.") fica acima dos botões Copiar/PDF/Link e da barra de ferramentas do celular. */
body[data-page="editor"] .toast { bottom: 64px; }
body:has(#editor-app.is-mobile) .toast { bottom: calc(var(--mobile-bar, 60px) + 52px); }
/* Botões do painel de diagramas numa linha só. */
#editor-app .diagram-controls button { white-space: nowrap; }
/* O resumo do modelo quebra a linha em vez de cortar o método. */
#editor-app .model-summary p { white-space: normal; }

/* Área Docente: "Criar exercício" ao lado de "Salvar", só para professor (editor-docente.js). */
.canvas-toolbar [data-create-exercise]:not([hidden]){display:inline-flex;flex:0 0 auto;padding:7px 10px}