/* ShelterLab Mechanics — theme tokens Dark is the default. Toggle a `theme-light` class on to switch. Token names are semantic (bg, fg, accent) rather than colour-named so the light override only needs to redeclare values. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { /* ── Backgrounds ──────────────────────────────────────────────────── */ --bg: #0f0f1e; --bg-header: #0d0d20; --bg-panel: #12122a; --bg-panel-2: #1a1a30; --bg-panel-3: #1a1a38; --bg-input: #1e1e3a; --bg-input-deep: #0f0f20; --bg-input-focus: #15152a; --bg-row-hover: #1f1f33; --bg-row-selected: #252550; --bg-tab-active: #2a2a5a; --bg-btn-active: #2244aa; --bg-faint: #10102a; --bg-very-deep: #09091a; --bg-search: #1a1a2e; --bg-hover: #2a2a4a; --bg-telem-slot: #161635; --bg-thumb: #556677; --bg-toggle-on: #0d3320; --bg-running: #882200; --bg-cell-success: #1f3a25; --bg-cell-error: #4a2a2a; /* ── Borders ──────────────────────────────────────────────────────── */ --bd-faint: #1e1e3a; --bd-panel: #2a2a4a; --bd-input: #3a3a5a; --bd-input-hover: #4a4a8a; --bd-focus: #5577cc; --bd-focus-strong: #4466cc; --bd-overlay: #333358; --bd-hover: #4444aa; --bd-fp-top: #3344aa; --bd-running: #cc4400; --bd-info-soft: #335555; --bd-thumb-track: #5a5a8a; /* ── Foregrounds ──────────────────────────────────────────────────── */ --fg-strongest: #ffffff; --fg-strong: #eef; --fg: #dde; --fg-mid: #ccd; --fg-muted: #aab; --fg-muted-2: #99a; --fg-faint: #88a; --fg-fainter: #778; /* ── Accents ──────────────────────────────────────────────────────── */ --accent-link: #66aaff; --accent-link-hover: #99ccff; --accent-info-soft: #88ccff; --accent-info-status: #99ccee; --accent-info-help: #6688bb; --accent-info-help-h: #aaccee; --accent-good: #44aa66; --accent-good-strong: #44cc66; --accent-good-text: #88e0a0; --accent-good-text-h: #bbeebb; --accent-good-bg: #1a3a22; --accent-good-bd: #2a6a3a; --accent-warn: #cc9900; --accent-warn-fg: #1a1a30; --accent-warn-icon-fg:#2a2010; --accent-advisory: #555a72; --accent-bad-glow: rgba(255, 80, 80, 0.6); --accent-warn-hover: #e5b020; --accent-warn-bd: #6a4a00; --accent-warn-text: #ffaa88; --accent-warn-soft: #d8b840; --accent-bad: #cc4444; --accent-bad-strong: #e94560; --accent-bad-bg: #3a1a1a; --accent-bad-text: #ff8888; --accent-bad-bd: #553333; --accent-yellow: yellow; --accent-revised: #ffcc88; --accent-topic: #66aa88; --accent-keyword: #88aa88; --accent-slider: #4488cc; --accent-special-bg: #3a2a4a; --accent-special-bd: #665080; --accent-special-fg: #ccbbcc; --accent-info-bright: #88ddff; --accent-link-soft: #88aaff; --accent-telem-val: #b8d8ff; --accent-toggle-fg: #44ee66; /* ── Pills ────────────────────────────────────────────────────────── */ --pill-run-bg: #1e3868; --pill-run-bd: #3a5aaa; --pill-run-fg: #aaccff; --pill-run-hover-bg: #2a4888; --pill-stop-bg: #6a1a1a; --pill-stop-bd: #cc4422; --pill-stop-fg: #ffaaaa; /* ── Cockpit cards (saturated accents per role) ──────────────────── */ --ckpt-winch-bg: #2a1e00; --ckpt-winch-bd: #3a2e00; --ckpt-winch-fg: #cc9900; --ckpt-force-bg: #2a1400; --ckpt-force-bd: #3a2000; --ckpt-force-fg: #fa8050; --ckpt-wheel-bg: #001a2a; --ckpt-wheel-bd: #002a3a; --ckpt-wheel-fg: #44aadd; --ckpt-trails-bg: #1a002a; --ckpt-trails-bd: #2a003a; --ckpt-trails-fg: #c088dd; /* ── Shadows + scrims ────────────────────────────────────────────── */ --shadow-card: var(--shadow-card); --shadow-modal: rgba(0, 0, 0, 0.5); --shadow-deep: rgba(0, 0, 0, 0.6); --scrim: rgba(0, 0, 0, 0.6); --overlay-bg: var(--overlay-bg); --overlay-bg-strong: var(--overlay-bg-strong); } body.theme-light { --bg: #f6f7fa; --bg-header: #eaecf2; --bg-panel: #ffffff; --bg-panel-2: #f6f7fa; --bg-panel-3: #f0f2f6; --bg-input: #ffffff; --bg-input-deep: #fbfcfe; --bg-input-focus: #ffffff; --bg-row-hover: #eef1f5; --bg-row-selected: #dfe6f4; --bg-tab-active: #dfe6f4; --bg-btn-active: #3a5fbf; --bg-faint: #f1f3f7; --bg-very-deep: #edf0f5; --bg-search: #ffffff; --bg-hover: #e0e4ec; --bg-telem-slot: #eaecf2; --bg-thumb: #a8b0c0; --bg-toggle-on: #d4ecdd; --bg-running: #d04030; --bg-cell-success: #dff0e0; --bg-cell-error: #fde0e2; --bd-faint: #e8eaf0; --bd-panel: #d8dce4; --bd-input: #c2c8d2; --bd-input-hover: #a8b0bd; --bd-focus: #5077c8; --bd-focus-strong: #3a5fbf; --bd-overlay: #c2c8d2; --bd-hover: #5077c8; --bd-fp-top: #5077c8; --bd-running: #a02218; --bd-info-soft: #88b8d8; --bd-thumb-track: #a8b0bd; --fg-strongest: #0a0e16; --fg-strong: #1f2230; --fg: #2a2e3a; --fg-mid: #4a5060; --fg-muted: #6a7080; --fg-muted-2: #7a8090; --fg-faint: #8a90a0; --fg-fainter: #9aa0b0; --accent-link: #2553b8; --accent-link-hover: #1d439a; --accent-info-soft: #2553b8; --accent-info-status: #2553b8; --accent-info-help: #4060a0; --accent-info-help-h: #2553b8; --accent-good: #2a8a48; --accent-good-strong: #2aa050; --accent-good-text: #2a8a48; --accent-good-text-h: #1f6a36; --accent-good-bg: #dff0e0; --accent-good-bd: #8acaa0; --accent-warn: #b07a00; --accent-warn-fg: #ffffff; --accent-warn-icon-fg:#ffffff; --accent-advisory: #8a90a0; --accent-bad-glow: rgba(200, 56, 64, 0.45); --accent-warn-hover: #d49a18; --accent-warn-bd: #c0a040; --accent-warn-text: #b07a00; --accent-warn-soft: #a07000; --accent-bad: #c03840; --accent-bad-strong: #a82836; --accent-bad-bg: #fde0e2; --accent-bad-text: #a82836; --accent-bad-bd: #e0a8aa; --accent-yellow: #a87000; --accent-revised: #b87000; --accent-topic: #4a8a60; --accent-keyword: #6a8a6a; --accent-slider: #3a5fbf; --accent-special-bg: #efe2f4; --accent-special-bd: #b89cca; --accent-special-fg: #6a3a80; --accent-info-bright: #2070a0; --accent-link-soft: #2553b8; --accent-telem-val: #2553b8; --accent-toggle-fg: #2aa050; --pill-run-bg: #2553b8; --pill-run-bd: #3a5fbf; --pill-run-fg: #ffffff; --pill-run-hover-bg: #1d439a; --pill-stop-bg: #b03028; --pill-stop-bd: #a02218; --pill-stop-fg: #ffffff; --ckpt-winch-bg: #f5e8c0; --ckpt-winch-bd: #c8a866; --ckpt-winch-fg: #8a6600; --ckpt-force-bg: #f5dccc; --ckpt-force-bd: #c89878; --ckpt-force-fg: #b85020; --ckpt-wheel-bg: #cce0f0; --ckpt-wheel-bd: #88b8d8; --ckpt-wheel-fg: #2070a0; --ckpt-trails-bg: #e5d5f0; --ckpt-trails-bd: #b888c8; --ckpt-trails-fg: #8048b0; --shadow-card: rgba(60, 70, 90, 0.14); --shadow-modal: rgba(60, 70, 90, 0.18); --shadow-deep: rgba(60, 70, 90, 0.22); --scrim: rgba(30, 40, 60, 0.4); --overlay-bg: rgba(248, 250, 253, 0.85); --overlay-bg-strong: rgba(248, 250, 253, 0.92); } /* Suppress accidental text selection on click-drag inside UI chrome (toolbar, sidebar, panels, modals, telemetry strip, etc). Re-enabled below for the places where the user genuinely needs to copy or edit text. */ body { -webkit-user-select: none; user-select: none; } input, textarea, [contenteditable="true"], #dp-table, #dp-table *, .alert-modal-body, .modal input, .modal textarea { -webkit-user-select: text; user-select: text; } body { background: var(--bg); color: var(--fg-strong); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* ── Site header ──────────────────────────────────────────────────────────── */ #site-header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: var(--bg-header); border-bottom: 1px solid var(--bd-panel); flex-shrink: 0; font-size: 15px; font-weight: 600; color: var(--fg-mid); letter-spacing: 0.04em; } .site-header-title { flex: 1; text-align: center; } .site-header-accent { color: var(--accent-yellow); font-weight: 500; font-style: italic; letter-spacing: 0.06em; } #site-header-auth { display: flex; align-items: center; gap: 8px; min-width: 120px; justify-content: flex-end; } #auth-username { font-size: 12px; color: var(--fg-muted-2); } /* ── Toolbar ─────────────────────────────────────────────────────────────── */ #toolbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bg-panel); border-bottom: 1px solid var(--bd-panel); flex-shrink: 0; flex-wrap: wrap; } .toolbar-group { display: flex; align-items: center; gap: 4px; } .toolbar-sep { width: 1px; height: 24px; background: var(--bd-panel); margin: 0 4px; } .tool-btn, .ctrl-btn { background: var(--bg-input); border: 1px solid var(--bd-input); color: var(--fg); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .tool-btn:hover, .ctrl-btn:hover { background: var(--bg-hover); border-color: var(--bd-focus); } .ctrl-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: auto; } a.ctrl-btn { text-decoration: none; display: inline-flex; align-items: center; } .tool-btn.active { background: var(--bg-btn-active); border-color: var(--bd-focus-strong); color: var(--fg-strongest); } .ctrl-btn.active { background: var(--bg-btn-active); border-color: var(--bd-focus-strong); color: var(--fg-strongest); } .ctrl-btn.running { background: var(--bg-running); border-color: var(--bd-running); color: var(--fg-strongest); } /* Toggle switch (On/Off style) */ .sw-row { display:flex; align-items:center; padding:4px 12px; gap:10px; } .sw-name { font-size:12px; color:var(--fg-muted-2); flex:1; } .sw { position:relative; display:inline-block; width:38px; height:20px; flex-shrink:0; } .sw input { opacity:0; width:0; height:0; position:absolute; } .sw-track { position:absolute; inset:0; background:var(--bg-input); border:1px solid var(--bd-input); border-radius:10px; cursor:pointer; transition:background .2s, border-color .2s; } .sw-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px; background:var(--bg-thumb); border-radius:50%; transition:transform .2s, background .2s; } .sw input:checked ~ .sw-track { background:var(--bg-toggle-on); border-color:var(--accent-good); } .sw input:checked ~ .sw-thumb { transform:translateX(18px); background:var(--accent-toggle-fg); } .sw.sw-bistate .sw-track { background:var(--bg-toggle-on); border-color:var(--accent-good); } .sw.sw-bistate .sw-thumb { background:var(--accent-toggle-fg); } /* Zoom controls */ #zoom-label { font-size: 11px; color: var(--fg-muted); min-width: 40px; text-align: center; } /* Gravity */ #gravity-input { width: 52px; background: var(--bg-input); border: 1px solid var(--bd-input); color: var(--fg); border-radius: 4px; padding: 3px 6px; font-size: 12px; } /* Ground toggle */ .toggle-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--fg-mid); cursor: pointer; } #ground-toggle { accent-color: var(--accent-good); cursor: pointer; } /* ── Telemetry strip ─────────────────────────────────────────────────────── */ #telemetry { flex-shrink: 0; overflow-x: auto; overflow-y: hidden; } /* New slot-based strip. */ .telem-bar { display: flex; align-items: center; gap: 14px; padding: 5px 12px; background: var(--bg-faint); border-bottom: 1px solid var(--bd-faint); white-space: nowrap; min-width: max-content; font-size: 13px; } .telem-slot { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-telem-slot); border: 1px solid var(--bd-panel); border-radius: 4px; padding: 2px 4px; } .telem-pick { background: var(--bg-input-deep); color: var(--fg); border: 1px solid var(--bd-input); border-radius: 3px; font-size: 12px; padding: 3px 4px; max-width: 280px; } .telem-pick:focus { outline: 1px solid var(--bd-thumb-track); } .telem-val { color: var(--accent-telem-val); font-family: 'Courier New', monospace; font-size: 13px; min-width: 100px; font-weight: 600; } .telem-rm, .telem-add { background: var(--bg-panel-2); color: var(--fg-muted-2); border: 1px solid var(--bd-input); border-radius: 3px; font-size: 14px; line-height: 1; padding: 2px 8px; cursor: pointer; } .telem-rm:hover { color: var(--accent-bad-text); border-color: var(--accent-bad-bd); } .telem-add:hover { color: var(--accent-info-bright); border-color: var(--bd-info-soft); } /* Legacy classes kept so any in-flight references don't break visually. */ .telem-row { display: flex; align-items: center; gap: 20px; padding: 3px 12px; background: var(--bg-faint); border-bottom: 1px solid var(--bd-faint); font-family: 'Courier New', monospace; font-size: 11px; white-space: nowrap; min-width: max-content; } .telem-label { color: var(--fg-muted); min-width: 48px; font-weight: bold; } .telem-item { color: var(--fg-mid); white-space: nowrap; } .telem-key { color: var(--fg-muted-2); margin-right: 3px; } /* ── Force Profile Editor ─────────────────────────────────────────────────── */ #force-profile-editor { flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-header); border-top: 2px solid var(--bd-fp-top); } #fp-header { display: flex; align-items: center; gap: 10px; padding: 4px 12px; height: 30px; background: var(--bg-panel); border-bottom: 1px solid var(--bd-panel); flex-shrink: 0; } #fp-title { font-size: 12px; font-weight: 600; color: var(--accent-warn-text); white-space: nowrap; } #fp-hint { font-size: 11px; color: var(--fg-fainter); } #fp-canvas { display: block; width: 100%; height: 200px; cursor: crosshair; } /* ── Menu bar ─────────────────────────────────────────────────────────────── */ #menubar { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px; background: var(--bg-panel); border-bottom: 1px solid var(--bd-panel); flex-shrink: 0; position: relative; z-index: 50; } .menubar-left { display: flex; align-items: center; gap: 2px; } .menubar-steps { display: flex; align-items: center; gap: 4px; } .menubar-steps input[type="number"] { background: var(--bg-input); border: 1px solid var(--bd-input); color: var(--fg); border-radius: 4px; padding: 2px 4px; font-size: 12px; } .menu-btn { background: none; border: none; color: var(--fg-muted); padding: 5px 13px; cursor: pointer; font-size: 13px; border-radius: 4px; white-space: nowrap; transition: background 0.15s, color 0.15s; text-decoration: none; display: inline-flex; align-items: center; } .menu-btn:hover { background: var(--bg-input); color: var(--fg); } .menu-btn.active { background: var(--bg-btn-active); color: var(--fg-strongest); } .help-circle { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; border: 1.5px solid currentColor; border-radius: 50%; font-size: 0.78em; font-weight: bold; line-height: 1; flex-shrink: 0; } /* ── Dropdown panels ─────────────────────────────────────────────────────── */ /* ── Left panel (menus + cockpit) ─────────────────────────────────────────── */ #left-panel { position: fixed; left: 0; top: var(--panel-top, 60px); width: 280px; max-height: calc(100vh - var(--panel-top, 60px)); z-index: 150; background: var(--bg-panel-2); border-right: 1px solid var(--bd-input); box-shadow: 3px 0 16px var(--shadow-card); display: flex; flex-direction: column; } #left-panel-header { display: flex; align-items: center; padding: 6px 8px 6px 12px; border-bottom: 1px solid var(--bd-panel); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); flex-shrink: 0; } #left-panel-content { overflow-y: auto; flex: 1; } /* Give the last row in Settings room to breathe — without this padding the * bottom row butts up against the panel edge. Applies only to #settings-slot * (Model panel / Objects panel have their own layouts). */ #settings-slot { padding-bottom: 14px; } #objects-slot { /* display toggled to flex by JS when shown */ gap: 0; } .menu-panel-btn { display: block; width: calc(100% - 16px); margin: 3px 8px; text-align: left; } /* Settings panel heading */ #left-panel-content h3 { padding: 8px 12px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); border-bottom: 1px solid var(--bd-panel); margin: 0; } /* Objects two-column layout */ .obj-col { flex: 1; padding: 6px 0 8px; } .obj-col:first-child { border-right: 1px solid var(--bd-panel); } .obj-section-hdr { padding: 8px 12px 3px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); border-top: 1px solid var(--bd-panel); margin-top: 4px; } .obj-col .obj-section-hdr:first-child { border-top: none; margin-top: 0; } .obj-btn { display: block; width: calc(100% - 16px); margin: 2px 8px; text-align: left; font-size: 12px; } /* Drag-from-toolbar source elements: touch-action:none keeps iPadOS Safari from converting a slow drag into a scroll gesture (which would fire pointercancel and break our drag-to-place flow). */ [data-tool] { touch-action: none; } /* Inline-SVG icon container — sizes the SVG to match the button text height and makes it inherit the button's foreground color via stroke=currentColor. */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 14px; vertical-align: -2px; margin-right: 6px; } .btn-icon svg { width: 14px; height: 14px; display: block; flex-shrink: 0; } /* ── Loaded-model name overlay (top centre of canvas) ─────────────────────── */ #model-name-overlay { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--fg-mid); background: var(--overlay-bg); border: 1px solid var(--bd-overlay); border-radius: 14px; padding: 4px 14px; backdrop-filter: blur(6px); z-index: 10; pointer-events: none; user-select: none; letter-spacing: 0.02em; white-space: nowrap; } #model-name-overlay.revised { color: var(--accent-revised); } /* ── Pill overlay ─────────────────────────────────────────────────────────── */ #pill-overlay { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--overlay-bg-strong); border: 1px solid var(--bd-overlay); border-radius: 40px; padding: 8px 20px; backdrop-filter: blur(6px); z-index: 10; user-select: none; pointer-events: auto; } .pill-btn { border: none; cursor: pointer; border-radius: 24px; font-family: inherit; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .pill-run { background: var(--pill-run-bg); border: 1px solid var(--pill-run-bd); color: var(--pill-run-fg); padding: 8px 28px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; } .pill-run:hover { background: var(--pill-run-hover-bg); border-color: var(--bd-focus); } .pill-run.running { background: var(--pill-stop-bg); border-color: var(--pill-stop-bd); color: var(--pill-stop-fg); } .pill-reset { background: none; border: 1px solid var(--bd-panel); color: var(--fg-muted-2); padding: 6px 18px; font-size: 13px; } .pill-reset:hover { background: var(--bg-input); border-color: var(--bd-hover); color: var(--fg-muted); } .pill-reload { background: none; border: 1px solid var(--bd-panel); color: var(--fg-muted-2); padding: 6px 18px; font-size: 13px; } .pill-reload:hover:not(:disabled) { background: var(--bg-input); border-color: var(--bd-hover); color: var(--fg-muted); } .pill-btn:disabled { opacity: 0.35; cursor: not-allowed; } /* ── Floating properties panel ────────────────────────────────────────────── */ #prop-panel { position: fixed; top: 116px; right: 10px; width: 230px; background: var(--bg-panel); border: 1px solid var(--bd-panel); border-radius: 6px; box-shadow: 0 4px 18px var(--shadow-modal); z-index: 40; display: flex; flex-direction: column; max-height: calc(100vh - 128px); } #prop-panel-drag { padding: 6px 12px; background: var(--bg-panel-3); border-bottom: 1px solid var(--bd-panel); border-radius: 6px 6px 0 0; cursor: grab; display: flex; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); user-select: none; flex-shrink: 0; } #prop-panel-drag:active { cursor: grabbing; } #prop-panel-content { overflow-y: auto; flex: 1; } #prop-panel-content h3 { padding: 8px 12px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); border-bottom: 1px solid var(--bd-panel); } /* ── Cockpit floating panel ───────────────────────────────────────────────── */ #cockpit-panel { position: fixed; right: 10px; bottom: 28px; width: 220px; background: var(--bg-panel); border: 1px solid var(--bd-panel); border-radius: 6px; box-shadow: 0 4px 18px var(--shadow-modal); z-index: 40; display: flex; flex-direction: column; max-height: 60vh; } #cockpit-panel-drag { padding: 6px 12px; background: var(--bg-panel-3); border-bottom: 1px solid var(--bd-panel); border-radius: 6px 6px 0 0; cursor: grab; display: flex; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); user-select: none; flex-shrink: 0; } #cockpit-panel-drag:active { cursor: grabbing; } #cockpit-panel-content { overflow-y: auto; flex: 1; } /* ── Property slider ──────────────────────────────────────────────────────── */ .prop-slider-row { padding: 0 12px 5px; border-bottom: 1px solid var(--bd-faint); } .prop-slider-row input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--accent-slider); height: 4px; margin: 0; } /* ── Main area ────────────────────────────────────────────────────────────── */ #main { flex: 1; min-height: 0; position: relative; } /* ── Canvas wrap ──────────────────────────────────────────────────────────── */ #canvas-wrap { width: 100%; height: 100%; position: relative; overflow: hidden; cursor: default; } /* Cursor by tool */ #canvas-wrap.tool-select { cursor: default; } #canvas-wrap.tool-block { cursor: crosshair; } #canvas-wrap.tool-sphere { cursor: crosshair; } #canvas-wrap.tool-spring { cursor: crosshair; } #canvas-wrap.tool-anchor { cursor: crosshair; } #canvas-wrap.tool-duplicate { cursor: copy; } #canvas-wrap.tool-delete { cursor: not-allowed; } #canvas-wrap.tool-constraint { cursor: crosshair; } #canvas-wrap.tool-ruler { cursor: crosshair; } #canvas-wrap.tool-protractor { cursor: crosshair; } #sim-canvas { display: block; width: 100%; height: 100%; /* Disable default browser touch gestures (scroll, pinch-zoom) so our Pointer Events handlers see every pointer move on touch devices. */ touch-action: none; /* Disable iOS long-press callout / image-preview pill so our 500ms long-press timer can fire its own contextmenu instead. */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* ── Sidebar (legacy ref kept for prop-panel-content via JS) ──────────────── */ #no-selection { padding: 10px 12px; color: var(--fg-muted-2); font-size: 12px; font-style: italic; } #no-selection { padding: 10px 12px; color: var(--fg-muted-2); font-size: 12px; font-style: italic; } .prop-row { display: flex; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--bd-faint); gap: 6px; } /* ── Cockpit-exposure pin gutter ─────────────────────────────────────────── */ /* The pin button is created on every pinnable row but stays hidden in the normal view. Toggling "Edit cockpit exposure" adds the .cockpit-exposure-edit class on , which surfaces all of these. Pinned rows show a subtle inset accent at all times so authors can spot exposed fields at a glance. */ .prop-pin-btn { flex-shrink: 0; width: 16px; height: 16px; padding: 0; background: transparent; border: 1px solid var(--bd-input); border-radius: 2px; color: var(--fg-muted-2); cursor: pointer; font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center; } body.cockpit-exposure-edit .prop-pin-btn { display: inline-flex; } .prop-row.is-pinned, .sw-row.is-pinned { box-shadow: inset 2px 0 0 var(--accent-good); } .prop-row.is-pinned .prop-pin-btn, .sw-row.is-pinned .prop-pin-btn { background: var(--accent-good-bg); border-color: var(--accent-good); color: var(--accent-good-text); } .prop-row label { flex: 1; color: var(--fg-muted); font-size: 11px; } .prop-row input { width: 72px; background: var(--bg-input); border: 1px solid var(--bd-input); color: var(--fg-strong); border-radius: 3px; padding: 2px 5px; font-size: 11px; text-align: right; } .prop-row input:focus { outline: none; border-color: var(--bd-focus-strong); } .settings-help-trigger { margin-left: 6px; color: var(--accent-info-help); cursor: pointer; vertical-align: middle; user-select: none; } .settings-help-trigger:hover { color: var(--accent-info-help-h); } .help-tooltip { position: fixed; width: 260px; background: var(--bg-input-focus); border: 1px solid var(--bd-input); border-radius: 5px; box-shadow: 0 6px 22px var(--shadow-card); padding: 10px 12px; z-index: 200; font-size: 11.5px; line-height: 1.45; color: var(--fg-mid); } .help-tooltip-body { margin-bottom: 8px; } .help-tooltip-more { display: inline-block; color: var(--accent-info-help); text-decoration: none; font-size: 11px; } .help-tooltip-more:hover { color: var(--accent-info-help-h); } /* ── Status bar ───────────────────────────────────────────────────────────── */ /* ── Data panel link bar ─────────────────────────────────────────────────── */ #dp-link-bar { flex-shrink: 0; padding: 3px 10px; background: var(--bg-header); border-bottom: 1px solid var(--bd-faint); font-size: 11px; text-align: right; min-height: 1.6em; /* reserve a stable row whether the link is shown or not */ } #dp-open-link { color: var(--accent-link); text-decoration: none; letter-spacing: 0.02em; } #dp-open-link:hover { text-decoration: underline; color: var(--accent-link-hover); } /* ── Data Panel ──────────────────────────────────────────────────────────── */ /* Data panel rendered as a centered modal. The overlay (.modal-overlay) is shown by adding the .open class. The inner #data-panel sizes to ~85% of the viewport so multiple stacked graphs have room to breathe. */ #data-modal-overlay { z-index: 200; } #data-panel { display: flex; flex-direction: column; width: 85vw; height: 85vh; max-width: 1400px; background: var(--bg-header); border: 1px solid var(--bd-input); border-radius: 8px; box-shadow: 0 12px 36px var(--shadow-deep); overflow: hidden; } /* Stack of per-channel graph canvases. Each graph container gets equal share of the vertical space (1fr) and a small label header so the user can tell which channel is which without reading the y-axis. */ #dp-graphs-stack { display: flex; flex-direction: column; gap: 6px; padding: 6px; width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; } .dp-graph-cell { flex: 1 1 0; min-height: 140px; display: flex; flex-direction: column; background: var(--bg-very-deep); border: 1px solid var(--bd-faint); border-radius: 4px; overflow: hidden; } .dp-graph-cell-title { padding: 3px 8px; font-size: 11px; color: var(--fg-muted-2); background: var(--bg-panel); border-bottom: 1px solid var(--bd-faint); font-family: 'Courier New', monospace; flex-shrink: 0; } .dp-graph-cell canvas { flex: 1; display: block; width: 100%; height: 100%; } /* Multi-select channel rows show a check mark when selected. */ .dp-ch.selected::before { content: '✓ '; color: var(--accent-info-soft); } #dp-header { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--bg-panel); border-bottom: 1px solid var(--bd-panel); flex-shrink: 0; } #dp-title { flex: 1; font-size: 11px; color: var(--fg-muted-2); font-family: 'Courier New', monospace; } #dp-tabs { display: flex; gap: 4px; } .dp-tab { background: none; border: 1px solid var(--bd-panel); border-radius: 3px; color: var(--fg-faint); cursor: pointer; font-size: 11px; padding: 2px 10px; } .dp-tab:hover { border-color: var(--bd-input-hover); color: var(--fg-mid); } .dp-tab.active { background: var(--bg-tab-active); color: var(--fg-mid); border-color: var(--bd-input-hover); } #dp-body { display: flex; flex: 1; min-height: 0; } #dp-channels { width: 148px; min-width: 148px; overflow-y: auto; border-right: 1px solid var(--bd-faint); font-family: 'Courier New', monospace; font-size: 11px; } .dp-group { padding: 4px 8px 2px; color: var(--fg-faint); font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-panel); border-top: 1px solid var(--bd-faint); user-select: none; } .dp-ch { padding: 2px 8px 2px 18px; color: var(--fg-muted-2); cursor: pointer; white-space: nowrap; } .dp-ch:hover { background: var(--bg-panel-3); color: var(--fg-mid); } .dp-ch.selected { background: var(--bg-row-selected); color: var(--accent-info-soft); } #dp-content { flex: 1; min-width: 0; overflow: hidden; position: relative; } /* (legacy single-canvas dp-graph styling removed; replaced by per-channel .dp-graph-cell stack above.) */ #dp-table-wrap { width: 100%; height: 100%; overflow-y: auto; overflow-x: auto; } #dp-table { border-collapse: collapse; font-family: 'Courier New', monospace; font-size: 11px; white-space: nowrap; } #dp-table th { position: sticky; top: 0; background: var(--bg-panel); padding: 4px 14px; text-align: right; color: var(--fg-faint); border-bottom: 1px solid var(--bd-panel); border-right: 1px solid var(--bd-faint); font-size: 10px; } #dp-table th:first-child { text-align: left; } #dp-table td { padding: 1px 14px; color: var(--fg-muted); border-bottom: 1px solid var(--bd-faint); border-right: 1px solid var(--bd-faint); text-align: right; } #dp-table td:first-child { text-align: left; color: var(--fg-fainter); } #dp-table tbody tr:hover td { background: var(--bg-row-hover); } #statusbar { display: flex; align-items: center; justify-content: space-between; padding: 3px 10px; background: var(--bg-header); border-top: 1px solid var(--bd-faint); flex-shrink: 0; font-size: 11px; color: var(--fg-muted-2); } #status-msg { color: var(--accent-info-status); opacity: 0; transition: opacity 0.3s; } #status-msg.show { opacity: 1; } #alert-overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-panel-2); border: 1px solid var(--bd-input); border-radius: 8px; padding: 20px 24px; min-width: 280px; max-width: 480px; box-shadow: 0 8px 32px var(--shadow-deep); z-index: 200; } #alert-overlay.open { display: block; } #alert-msg { color: var(--fg); font-size: 14px; line-height: 1.5; margin: 0; word-break: break-word; } /* ── Copyright ────────────────────────────────────────────────────────────── */ #copyright { text-align: center; padding: 4px 10px; background: var(--bg-header); border-top: 1px solid var(--bd-faint); flex-shrink: 0; font-size: 11px; color: var(--fg-fainter); } /* ── Modals ───────────────────────────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--shadow-deep); z-index: 100; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--bg-panel-2); border: 1px solid var(--bd-input); border-radius: 8px; padding: 20px; min-width: 280px; max-width: 420px; box-shadow: 0 8px 32px var(--shadow-modal); } .modal h3 { margin-bottom: 12px; font-size: 14px; color: var(--fg); } .modal input[type="text"] { width: 100%; background: var(--bg-input-deep); border: 1px solid var(--bd-input); color: var(--fg-strong); border-radius: 4px; padding: 6px 10px; font-size: 13px; margin-bottom: 12px; } .modal-buttons { display: flex; gap: 8px; justify-content: flex-end; } .modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--fg-muted); font-size: 20px; cursor: pointer; } /* Parameter panels (property panel + settings panel) are locked while the simulation has a runtime snapshot — i.e. between Run and Reset. Prevents the Pause→Edit→Resume→Reset trap where an edit gets silently rolled back by Reset. Inputs render as disabled; the whole stack reads as muted. */ .params-locked { opacity: 0.6; } .params-locked input, .params-locked select, .params-locked button, .params-locked textarea, .params-locked label { cursor: not-allowed !important; } /* Center-screen warning alert. Same shell as .modal but accented amber. */ .alert-modal { background: var(--bg-panel-2); border: 1px solid var(--accent-warn-bd); border-left: 4px solid var(--accent-warn); border-radius: 8px; padding: 18px 20px; min-width: 320px; max-width: 480px; box-shadow: 0 12px 36px var(--shadow-deep); } .alert-modal-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ckpt-winch-fg); margin-bottom: 8px; } .alert-modal-body { color: var(--fg); font-size: 13px; line-height: 1.5; margin-bottom: 14px; white-space: pre-wrap; } .alert-modal-buttons { display: flex; justify-content: flex-end; gap: 8px; } .alert-modal-buttons button { background: var(--accent-warn); color: var(--accent-warn-fg); border: none; border-radius: 4px; padding: 6px 18px; font-size: 13px; font-weight: 600; cursor: pointer; } .alert-modal-buttons button:hover { background: var(--accent-warn-hover); } #model-list { max-height: 280px; overflow-y: auto; margin-top: 8px; } .model-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 4px; cursor: default; border-bottom: 1px solid var(--bd-panel); transition: background 0.12s; gap: 6px; } .model-item:hover { background: var(--bg-hover); } .model-name { flex: 1; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .model-name:hover { color: var(--accent-link); } .model-item-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .model-date { color: var(--fg-faint); font-size: 11px; } .model-topic { color: var(--accent-topic); font-size: 11px; padding: 0 8px 4px; flex-basis: 100%; } .model-btn { padding: 2px 6px; font-size: 11px; opacity: 0.35; transition: opacity 0.12s; } .model-item:hover .model-btn { opacity: 1; } /* ── Manage modal ────────────────────────────────────────────────────────── */ .manage-modal { position: relative; /* anchor for the close-X button */ min-width: 720px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; } /* Edit modal opens FROM the Manage modal — it must stack above it. */ #edit-modal { z-index: 110; } #manage-search, #load-search { width: 100%; padding: 6px 10px; background: var(--bg-search); border: 1px solid var(--bd-input); color: var(--fg); border-radius: 3px; font-size: 13px; margin-bottom: 8px; box-sizing: border-box; } #manage-search:focus, #load-search:focus { outline: none; border-color: var(--bd-focus); } #manage-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--bd-panel); border-radius: 3px; } #manage-table { width: 100%; border-collapse: collapse; font-size: 12px; } #manage-table thead th { position: sticky; top: 0; background: var(--bg-search); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--bd-input); color: var(--fg-muted); font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; } #manage-table thead th:hover { background: var(--bg-row-hover); color: var(--fg); } #manage-table thead th.sort-asc::after { content: ' ▲'; color: var(--fg-faint); font-size: 10px; } #manage-table thead th.sort-desc::after { content: ' ▼'; color: var(--fg-faint); font-size: 10px; } #manage-table tbody td { padding: 5px 10px; border-bottom: 1px solid var(--bd-faint); color: var(--fg-mid); vertical-align: middle; } #manage-table tbody tr:hover td { background: var(--bg-row-hover); } .manage-name { font-weight: 600; color: var(--fg); min-width: 140px; } .manage-topic { color: var(--accent-topic); min-width: 100px; } .manage-keywords { color: var(--accent-keyword); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .manage-modified { color: var(--fg-faint); white-space: nowrap; } .manage-actions { white-space: nowrap; text-align: right; } .manage-btn-cell { padding: 2px 7px; font-size: 11px; margin-left: 4px; } /* Inline-editable cells in the Manage table */ .manage-name[contenteditable="true"], .manage-topic[contenteditable="true"], .manage-keywords[contenteditable="true"] { cursor: text; outline: none; transition: background 0.18s, box-shadow 0.18s; } .manage-name[contenteditable="true"]:hover, .manage-topic[contenteditable="true"]:hover, .manage-keywords[contenteditable="true"]:hover { background: var(--bg-row-hover); box-shadow: inset 0 0 0 1px var(--bd-input); } .manage-name[contenteditable="true"]:focus, .manage-topic[contenteditable="true"]:focus, .manage-keywords[contenteditable="true"]:focus { background: var(--bg-input-focus); box-shadow: inset 0 0 0 1px var(--bd-focus); white-space: normal; /* allow keywords cell to wrap during editing */ overflow: visible; } .cell-flash-success { background: var(--bg-cell-success) !important; } .cell-flash-error { background: var(--bg-cell-error) !important; } /* ── Cockpit panel ────────────────────────────────────────────────────────── */ .ckpt-card { border: 1px solid var(--bd-panel); border-radius: 4px; margin: 6px 8px; overflow: hidden; } .ckpt-title { padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .ckpt-title.ckpt-winch { background: var(--ckpt-winch-bg); color: var(--ckpt-winch-fg); border-bottom: 1px solid var(--ckpt-winch-bd); } .ckpt-title.ckpt-force { background: var(--ckpt-force-bg); color: var(--ckpt-force-fg); border-bottom: 1px solid var(--ckpt-force-bd); } .ckpt-title.ckpt-wheel { background: var(--ckpt-wheel-bg); color: var(--ckpt-wheel-fg); border-bottom: 1px solid var(--ckpt-wheel-bd); } .ckpt-title.ckpt-trails { background: var(--ckpt-trails-bg); color: var(--ckpt-trails-fg); border-bottom: 1px solid var(--ckpt-trails-bd); } .ckpt-slider-row { padding: 0 10px 6px; } .ckpt-slider-row input[type="range"] { width: 100%; cursor: pointer; accent-color: var(--accent-slider); height: 4px; } /* ── Keyboard shortcut hint ───────────────────────────────────────────────── */ .hint { font-size: 10px; color: var(--fg-faint); padding: 6px 12px; border-top: 1px solid var(--bd-faint); margin-top: auto; line-height: 1.6; } /* ── Context menu ─────────────────────────────────────────────────────────── */ #ctx-menu { display: none; position: fixed; z-index: 200; background: var(--bg-panel-2); border: 1px solid var(--bd-input); border-radius: 6px; padding: 4px 0; min-width: 160px; box-shadow: 0 4px 16px var(--shadow-deep); font-size: 13px; color: var(--fg-strong); user-select: none; } #ctx-menu.open { display: block; } .ctx-item { padding: 7px 16px; cursor: pointer; white-space: nowrap; } .ctx-item:hover { background: var(--bg-hover); } .ctx-item.danger:hover { background: var(--accent-bad-bg); color: var(--accent-bad-text); } .ctx-item.muted { color: var(--fg-fainter); font-size: 11px; cursor: default; padding-top: 8px; } .ctx-item.muted:hover { background: transparent; } .ctx-sep { height: 1px; background: var(--bd-panel); margin: 3px 0; } /* ── Embed mode (embed.php) ───────────────────────────────────────────────── Hides construction tools, save/load, login UI and the property panel. Users see only canvas + step controls (run/pause/reset) + cockpit. */ body.embed-mode #site-header-auth, body.embed-mode #menubar .menubar-left, body.embed-mode #left-panel, body.embed-mode #toolbar, body.embed-mode #prop-panel, body.embed-mode #login-modal, body.embed-mode #save-modal, body.embed-mode #load-modal, body.embed-mode #manage-modal, body.embed-mode #edit-modal, body.embed-mode #force-profile-editor, body.embed-mode #reload-btn, body.embed-mode #copy-debug-btn { display: none !important; } body.embed-mode #site-header { justify-content: center; } body.embed-mode #cockpit-panel { display: flex !important; }