/* Bench — physics diagram tool styles. Extracted verbatim from the block that used to be duplicated inline (identical) in every sim that has the diagram tool. Link this in alongside konva.min.js + bench-diagram.js. */ :root{ --paper:#E7ECEC; --paper-line:#C9D3D2; --ink:#1E2A2E; --ink-soft:#55676B; --panel:#DCE3E2; --panel-border:#B9C4C2; --accent:#1F6F78; --accent-ink:#FFFFFF; --select:#D98F32; --danger:#B3462F; --surface:#F5F7F6; } #benchSourceApp, #benchSourceApp *, #benchRailHost, #benchRailHost *, #benchStageHost, #benchStageHost *{ box-sizing:border-box; } #benchSourceApp .mono{ font-family:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Consolas,monospace; font-variant-numeric:tabular-nums; } #benchSourceApp.app{ display:grid; grid-template-rows:auto 1fr; height:520px; background:var(--panel); } #benchSourceApp .topbar{ display:none; } #benchSourceApp .body-row{ display:grid; grid-template-columns:216px 1fr; min-height:0; height:100%; } #benchRailHost .rail, #benchSourceApp .rail{ display:flex; flex-direction:column; gap:18px; padding:10px 6px; overflow-y:auto; background:transparent; } .rail-group{ display:flex; flex-direction:column; gap:6px; } .rail-label{ font-family:ui-monospace,"SF Mono","Cascadia Code",monospace; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding:0 6px 2px; } .rail-row{ display:flex; flex-wrap:wrap; gap:6px; } .tool-btn{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--ink); cursor:pointer; transition:background-color .12s ease,color .12s ease,border-color .12s ease; } .tool-btn:hover{ background:var(--surface); } .tool-btn:focus-visible{ outline:2px solid var(--select); outline-offset:2px; } .tool-btn[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .tool-btn svg{ width:17px; height:17px; } #benchStageHost .stage, #benchSourceApp .stage{ position:relative; display:flex; flex-direction:column; min-height:0; background:var(--paper); height:100%; } #stageContainer{ flex:1; width:100%; height:100%; touch-action:none; overflow:hidden; } .empty-hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; text-align:center; padding:20px; z-index:1; } .empty-hint span{ font-size:13px; color:var(--ink-soft); max-width:280px; line-height:1.5; background:var(--paper); padding:4px 10px; border-radius:6px; } .text-input-overlay{ position:absolute; z-index:20; font:500 14px -apple-system,sans-serif; padding:3px 7px; border:1px solid var(--accent); border-radius:4px; background:var(--surface); color:var(--ink); min-width:80px; } .text-input-overlay:focus{ outline:none; } .statusbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 10px; background:var(--panel); border-top:1px solid var(--panel-border); font-size:11px; color:var(--ink-soft); } #toolHint{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #coordReadout{ flex-shrink:0; font-size:10px; } #benchRailHost{ background:var(--panel); border:1px solid var(--panel-border); border-radius:8px; max-height:340px; overflow-y:auto; } #benchStageHost{ position:absolute; inset:0; z-index:5; background:var(--paper); } .hint-panel{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); } .hint-panel.open{ display:flex; } .hint-card{ width:min(520px,92vw); max-height:82vh; overflow-y:auto; background:var(--surface); border:1px solid var(--panel-border); border-radius:10px; padding:18px 20px; box-shadow:0 12px 40px rgba(0,0,0,.25); font-family:-apple-system,BlinkMacSystemFont,sans-serif; } .hint-card h2{ margin:0 0 4px; font-size:15px; color:var(--ink); } .hint-card p.sub{ margin:0 0 14px; font-size:12px; color:var(--ink-soft); } .hint-card textarea{ width:100%; min-height:56px; resize:vertical; font:13px -apple-system,sans-serif; padding:8px; border-radius:6px; border:1px solid var(--panel-border); background:var(--paper); color:var(--ink); box-sizing:border-box; } .hint-card details{ margin-top:10px; font-size:11px; color:var(--ink-soft); } .hint-card details pre{ white-space:pre-wrap; font:11px ui-monospace,monospace; background:var(--paper); padding:8px; border-radius:6px; max-height:160px; overflow-y:auto; } .hint-actions{ display:flex; gap:8px; margin-top:12px; } .hint-actions button{ height:32px; padding:0 14px; border-radius:6px; font:600 12px -apple-system,sans-serif; cursor:pointer; } #btnGetHint{ background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); } #btnCloseHint{ background:transparent; color:var(--ink-soft); border:1px solid var(--panel-border); } #hintResult{ margin-top:14px; font-size:13px; line-height:1.55; color:var(--ink); white-space:pre-wrap; } #hintResult.loading{ color:var(--ink-soft); font-style:italic; } #hintResult.error{ color:var(--danger); }