*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1117;
  --panel: #141820;
  --panel2: #1a1e2e;
  --border: #252d45;
  --text: #c8cfe0;
  --text-dim: #95a3bc; /* ≥ 6.5:1 on --bg for WCAG AA small text */
  --accent: #4a9eff;
  --accent2: #ffa726;
  --red: #ef5350;
  --green: #4caf50;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; overflow: hidden; }

/* Inline node-label editor: floats over the canvas on double-click. */
.node-label-edit {
  position: fixed; z-index: 200;
  transform: translateY(-50%);
  text-align: center;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 2px 6px; outline: none;
  font-family: var(--font);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ── Topbar ── */
#topbar {
  display: flex; align-items: center; gap: 16px; padding: 4px 16px;
  min-height: 48px; background: var(--panel); border-bottom: 1px solid var(--border);
  flex-shrink: 0; z-index: 10;
  /* Wrap clusters onto a second row on narrow windows. The page never scrolls
     (body is overflow:hidden), so anything pushed past the right edge would be
     unreachable, including File and Library. */
  flex-wrap: wrap; row-gap: 2px;
}

.logo {
  display: flex; align-items: center;
  margin-right: 4px; user-select: none; flex-shrink: 0;
  color: var(--accent);   /* drives the mark via currentColor; follows the scheme */
}
.logo-mark { display: block; }

.sim-controls { display: flex; align-items: center; gap: 10px; }
.file-controls { display: flex; gap: 6px; margin-left: auto; align-items: center; }

/* Functional clusters read as single units: shared pill background. */
.sim-cluster, .speed-cluster {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px;
}
.speed-cluster { padding: 3px 8px; gap: 6px; }
.speed-cluster input[type="range"] { width: 80px; }
#speed-label { font-family: monospace; font-size: 12px; color: var(--text-dim); min-width: 26px; }

/* Run is the primary verb of the app; running state is unmistakable. */
#btn-run { min-width: 76px; }
#btn-run.running {
  /* #2e7d32 on white = 5.2:1 — passes WCAG AA */
  background: #2e7d32; border-color: #2e7d32; color: #fff;
  animation: run-pulse 2s ease-in-out infinite;
}
@keyframes run-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.35); }
  50% { box-shadow: 0 0 0 5px rgba(76,175,80,0); }
}

/* Vertical separator between topbar groups. */
.tb-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }

#step-counter.tb-chip {
  font-family: monospace; font-size: 12px; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; min-width: 76px; text-align: center;
  white-space: nowrap; /* growing step numbers must widen the chip, not wrap inside it */
}

#sim-status {
  font-size: 12px; font-weight: 600; color: var(--green);
  white-space: nowrap;
}

/* ── Main layout ── */
#main { display: flex; flex: 1; overflow: hidden; }

/* ── Left palette ── */
#palette {
  width: 72px; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 8px 0;
  gap: 2px; flex-shrink: 0; overflow-y: auto;
  /* Always-visible thin scrollbar: on short windows half the toolbox sits below
     the fold, and macOS overlay scrollbars give no hint that it scrolls. */
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

/* Collapsible palette sections */
.palette-section { width: 100%; display: flex; flex-direction: column; align-items: center; }
.palette-section + .palette-section { border-top: 1px solid var(--border); }
.palette-header {
  width: 100%; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 7px 4px 3px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.palette-header:hover { color: var(--text); }
.palette-header::after {
  content: '\f0d7'; /* fa-caret-down */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 8px; opacity: 0.7;
}
.palette-header[aria-expanded="false"]::after { content: '\f0da'; /* fa-caret-right */ }
.palette-items {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; width: 100%; padding-bottom: 4px;
}
.palette-header[aria-expanded="false"] + .palette-items { display: none; }

[data-tool] {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 56px; padding: 7px 4px; border: 1px solid transparent;
  border-radius: 6px; background: none; color: var(--text); cursor: pointer;
  font-size: 10px; transition: all 0.15s;
}

[data-tool]:hover { background: var(--panel2); border-color: var(--border); }
[data-tool].active { background: rgba(74,158,255,0.15); border-color: var(--accent); color: var(--accent); }

.tool-icon {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}

.tool-icon svg { width: 26px; height: 26px; }
.tool-icon .fa-solid { font-size: 17px; }

.pal-kbd {
  display: inline-block; margin-left: 2px;
  font-family: monospace; font-size: 10px; line-height: 1;
  color: var(--text-dim); background: var(--panel2);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 3px; vertical-align: middle;
}

/* ── Canvas ── */
#canvas-wrap { flex: 1; position: relative; overflow: hidden; }
#canvas { width: 100%; height: 100%; display: block; touch-action: none; }
#canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Minimap overview (bottom-right of the canvas) */
#minimap {
  position: absolute; right: 12px; bottom: 12px;
  width: 200px; height: 140px; z-index: 6;
  background: rgba(10,12,18,0.85); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  overflow: hidden;
}
#minimap.hidden { display: none; }
#minimap-canvas { width: 100%; height: 100%; display: block; cursor: pointer; }

/* Keyboard-focus visibility (accessibility) */
.btn:focus-visible, [data-tool]:focus-visible,
.prop-row input:focus-visible, .prop-row select:focus-visible,
.rail-btn:focus-visible, .menu-item:focus-visible, .palette-header:focus-visible,
.var-chip:focus-visible, .var-kind-tab:focus-visible, .conn-style-btn:focus-visible,
.wide-input:focus-visible, .var-wide-input:focus-visible, .var-name-input:focus-visible,
.var-range-num:focus-visible, .var-delete-btn:focus-visible,
.kb-link:focus-visible, .tl-chip:focus-visible, .props-help:focus-visible,
.branch-name:focus-visible, .note-textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* Respect the user's motion preference: collapse UI transitions/animations.
   (The renderer also skips the travelling-ball animation under this query.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Right props panel ── */
#props-panel {
  width: 280px; background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
}

#props-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.8px;
}

#props-content { flex: 1; overflow-y: auto; padding: 12px 16px; }

.props-empty { color: var(--text-dim); font-size: 12px; line-height: 1.5; margin-top: 8px; }

/* ── Far-right diagram rail ── */
#diagram-rail {
  width: 64px; background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 8px 0;
  gap: 2px; flex-shrink: 0; overflow-y: auto; z-index: 6;
}
.rail-title {
  font-size: 9px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.6px;
  padding: 2px 0 5px; white-space: nowrap;
}
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 56px; padding: 7px 4px; border: 1px solid transparent;
  border-radius: 6px; background: none; color: var(--text); cursor: pointer;
  font-size: 10px; transition: all 0.15s;
}
.rail-btn:hover { background: var(--panel2); border-color: var(--border); }
.rail-btn.active { background: rgba(74,158,255,0.15); border-color: var(--accent); color: var(--accent); }

.props-title {
  display: flex; align-items: center;
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

/* Typed selection header: kind overline + colored dot, then the name large. */
.props-title-block { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.props-title-block .props-title { margin: 0; padding: 0; border: none; font-size: 15px; }
.props-overline {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-dim); margin-bottom: 4px;
}
.props-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,255,255,0.12);
}

/* Labelled section header — the panel reads as an outline, not a wall. */
.props-sec {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-dim);
  margin: 18px 0 8px; padding-top: 10px; border-top: 1px solid var(--border);
}
.props-sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.props-info { color: var(--text-dim); font-size: 12px; margin-bottom: 12px; line-height: 1.45; }

.prop-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}

.prop-row label {
  flex: 0 0 90px; font-size: 11px; color: var(--text-dim);
  text-transform: capitalize;
}

.prop-row input, .prop-row select {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); padding: 4px 8px;
  font-size: 12px; font-family: var(--font);
  outline: none; transition: border-color 0.15s;
}

.prop-row input:focus, .prop-row select:focus {
  border-color: var(--accent);
}
.prop-row input:focus-visible, .prop-row select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.prop-row select option { background: var(--panel2); }

/* Invalid input (e.g. malformed number array / dice notation): red border,
   value is not committed until it parses. */
.prop-row input.invalid, .prop-row input.invalid:focus { border-color: #ef5350; }

/* ── Custom Variables Panel ────────────────────────────────────────────── */
.var-card {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 14px; overflow: hidden;
}

.var-card-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}

.var-name-input {
  flex: 1; background: transparent; border: none;
  border-bottom: 2px solid transparent; color: var(--text);
  font-size: 13px; font-weight: 600; padding: 1px 0; outline: none;
  transition: border-color 0.15s;
}
.var-name-input:focus { border-bottom-color: var(--accent); }

.var-delete-btn {
  padding: 1px 7px; flex-shrink: 0;
  color: var(--text-dim); font-size: 16px; line-height: 1;
}
.var-delete-btn:hover { color: var(--red); border-color: var(--red); }

.var-kind-tabs {
  display: flex; gap: 4px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.var-kind-tab {
  flex: 1; padding: 4px 2px; border: 1px solid var(--border);
  border-radius: 4px; background: none; color: var(--text-dim);
  font-size: 11px; cursor: pointer; transition: all 0.15s; text-align: center;
}
.var-kind-tab:hover { color: var(--text); background: var(--bg); }
.var-kind-tab.active {
  background: rgba(74,158,255,0.15); border-color: var(--accent); color: var(--accent);
}

.var-body { padding: 12px; border-bottom: 1px solid var(--border); }

.var-field-label, .field-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 6px;
}
.field-label { margin-top: 2px; }
/* Field label with a trailing inline control (e.g. a "?" guide link). */
.field-label-row { display: flex; align-items: center; }

.var-wide-input, .wide-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); padding: 7px 10px;
  font-size: 12px; outline: none; transition: border-color 0.15s;
  font-family: var(--font);
}
.var-wide-input:focus, .wide-input:focus { border-color: var(--accent); }
.var-wide-input.invalid, .var-wide-input.invalid:focus { border-color: var(--red); }
.wide-input { margin-bottom: 12px; }
select.wide-input option { background: var(--panel2); }

.var-range-row { display: flex; align-items: center; gap: 8px; }
.var-range-num {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); padding: 7px 10px;
  font-size: 12px; outline: none; transition: border-color 0.15s;
}
.var-range-num:focus { border-color: var(--accent); }
.var-range-num.invalid, .var-range-num.invalid:focus { border-color: var(--red); }
.var-range-sep { color: var(--text-dim); font-size: 15px; flex-shrink: 0; }

.var-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; flex-wrap: wrap;
}
.var-chip-group { display: flex; gap: 3px; }
.var-chip {
  padding: 3px 9px; border: 1px solid var(--border);
  border-radius: 10px; background: none; color: var(--text-dim);
  font-size: 11px; cursor: pointer; transition: all 0.15s;
}
.var-chip:hover { color: var(--text); border-color: var(--text-dim); }
.var-chip.active {
  background: rgba(74,158,255,0.15); border-color: var(--accent); color: var(--accent);
}

/* State-connection role picker (properties panel) */
.role-chips { flex-wrap: wrap; margin-bottom: 12px; }
.role-chips .var-chip { flex: 1 1 45%; padding: 5px 8px; }

.var-value-display {
  margin-left: auto; font-family: monospace; font-size: 15px;
  font-weight: 700; color: var(--accent); white-space: nowrap;
}

.var-add-btn { width: 100%; margin-top: 2px; margin-bottom: 10px; }

/* Legacy compat — kept for any stray references */
.randvar-card { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin-bottom: 10px; }
.randvar-value { font-size: 11px; font-family: monospace; color: var(--accent); }

/* ── Simulation panel (nothing selected) ───────────────────────────────── */
.sim-desc { resize: vertical; min-height: 56px; line-height: 1.45; }

.sim-thumb {
  width: 100%; border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; background: var(--bg); margin-bottom: 8px;
}
.sim-thumb img { display: block; width: 100%; }
.sim-thumb.empty {
  display: flex; align-items: center; justify-content: center;
  height: 90px; color: var(--text-dim); font-size: 11px;
  border-style: dashed;
}
.sim-thumb-actions { display: flex; gap: 6px; margin-bottom: 12px; }
.sim-thumb-actions .btn { flex: 1; }

.sim-bg-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.sim-bg-row input[type="color"] {
  flex: 1; height: 30px; padding: 2px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px; cursor: pointer;
}

.sim-meta {
  border: 1px solid var(--border); border-radius: 6px;
  background: rgba(255,255,255,0.02); overflow: hidden; margin-bottom: 12px;
}
.sim-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; font-size: 11px;
}
.sim-meta-row + .sim-meta-row { border-top: 1px solid var(--border); }
.sim-meta-row span { color: var(--text-dim); }
.sim-meta-row b { font-weight: 600; font-family: monospace; font-size: 11px; }

.chart-section { margin-top: 16px; }
.chart-label { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.sparkline { border-radius: 4px; display: block; width: 100%; }

/* ── Buttons ── */
.btn {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--panel2); color: var(--text); cursor: pointer;
  font-size: 12px; font-family: var(--font);
  transition: all 0.15s; white-space: nowrap;
}

.btn:hover { border-color: var(--accent); color: var(--accent); }
/* #1565c0 on white = 6.0:1, #1254a8 = 7.2:1 — both pass WCAG AA */
.btn.btn-primary { background: #1565c0; border-color: #1565c0; color: #fff; }
.btn.btn-primary:hover { background: #1254a8; border-color: #1254a8; }
.btn.active { border-color: var(--accent); color: var(--accent); background: rgba(74,158,255,0.12); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn:disabled:hover { border-color: var(--border); color: var(--text); background: var(--panel2); }
.btn.btn-danger { border-color: var(--red); color: var(--red); }
.btn.btn-danger:hover { background: rgba(239,83,80,0.1); }

/* ── Dropdown menus (File, …) ── */
.menu { position: relative; display: inline-flex; }
.menu-popup {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px;
  padding: 5px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 7px; box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 1px; z-index: 60;
}
.menu-popup.hidden { display: none; }
.menu-popup.align-left { left: 0; right: auto; }
.menu-item {
  text-align: left; background: none; border: none; color: var(--text);
  padding: 7px 12px; border-radius: 5px; font-size: 12px; font-family: var(--font);
  cursor: pointer; white-space: nowrap;
}
.menu-item:hover { background: rgba(74,158,255,0.14); color: var(--accent); }
.menu-sep { height: 1px; background: var(--border); margin: 4px 8px; }
/* Toggleable menu items show a leading check when active (e.g. timeline on). */
.menu-item-toggle::before {
  content: '\f00c'; /* fa-check */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  display: inline-block; width: 14px; visibility: hidden;
}
.menu-item-toggle.active::before { visibility: visible; }
.menu-item-toggle.active { color: var(--accent); }

/* ── Right-click context menu ── */
.ctx-menu {
  position: fixed; z-index: 200; min-width: 184px;
  padding: 5px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 7px; box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 1px;
}
.ctx-menu.hidden { display: none; }
.ctx-menu .menu-item { display: flex; align-items: center; gap: 9px; }
.ctx-menu .menu-item > i { width: 14px; text-align: center; color: var(--text-dim); }
.ctx-menu .menu-item:hover > i { color: var(--accent); }
.ctx-menu .menu-item .ctx-shortcut {
  margin-left: auto; padding-left: 20px; font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.ctx-menu .menu-item.ctx-danger:hover { background: rgba(239,83,80,0.15); color: var(--red); }
.ctx-menu .menu-item.ctx-danger:hover > i { color: var(--red); }
.ctx-menu .menu-item[disabled] { opacity: 0.4; cursor: default; }
.ctx-menu .menu-item[disabled]:hover { background: none; color: var(--text); }
.ctx-menu .menu-item[disabled]:hover > i { color: var(--text-dim); }

/* ── Node SVG styles ── */
.node { user-select: none; }
/* ── Connection SVG styles ── */
.conn { cursor: pointer; }
.conn.selected .conn-path { filter: drop-shadow(0 0 3px rgba(255,255,255,0.6)); }
.conn-cp-handle { opacity: 0.6; transition: opacity 0.12s; }
.conn-cp-handle:hover { opacity: 1; }

/* Corner resize handles on selected groups / notes / charts. */
.resize-handle { opacity: 0.85; transition: opacity 0.12s; }
.resize-handle:hover { opacity: 1; }

/* ── Connection style selector (in properties panel) ── */
.conn-style-group { display: flex; gap: 3px; }
.conn-style-btn {
  flex: 1; padding: 4px 0; font-size: 15px; line-height: 1;
  background: var(--panel2); border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer; border-radius: 4px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.conn-style-btn:hover:not(.active) { background: var(--border); color: var(--text); }
.conn-style-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

input[type="range"] {
  width: 80px; accent-color: var(--accent); cursor: pointer;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--panel); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Props extras ── */
.props-sep { height: 1px; background: var(--border); margin: 10px 0; }
.props-info { color: var(--text-dim); font-size: 12px; margin-bottom: 12px; line-height: 1.45; }
.prop-inline-warn { font-size: 11px; color: #ffa726; margin-bottom: 8px; line-height: 1.4; }

.reg-value {
  font-size: 24px; font-weight: 700; text-align: center; color: var(--accent);
  padding: 10px 0 6px; font-family: monospace;
}

.cond-details { padding-left: 8px; margin-bottom: 6px; }
.cond-details select { width: 60px; flex: none; }
.cond-details input[type="number"] { width: 70px; flex: none; }

.prop-row input[type="checkbox"] {
  flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer;
}

.reg-value.drain-stat { color: var(--red); }

/* ── Node SVG text ── */
/* Labels get a canvas-colored halo (paint-order trick) so they stay readable
   when a connection or grid line passes underneath. */
.n-count { fill: #fff; font-size: 13px; font-weight: 700; font-family: monospace; }
.n-label, .n-badge, .grp-label {
  paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round;
}
.n-label { fill: var(--text); font-size: 11px; font-family: var(--font); }
.n-badge { fill: var(--text-dim); font-size: 11px; font-family: var(--font); }

/* ── Node states ── */
.node.selected .ns { filter: url(#glow); }
.node.firing .ns { animation: fire 0.25s ease-out; }
@keyframes fire {
  0%   { opacity: 1; }
  40%  { opacity: 0.4; filter: brightness(2.5); }
  100% { opacity: 1; }
}

/* ── Connection label pills ── */
.conn-label { fill: var(--text); }
.conn-label-g { transition: opacity 0.1s; }
.conn-label-g:hover .conn-label-bg { filter: brightness(1.25); }
.conn-label-bg { cursor: grab; }

/* Tooltip */
[title] { position: relative; }

/* ── Analysis controls ── */
.analysis-controls {
  display: flex; gap: 6px; margin-left: 8px; align-items: center;
  border-left: 1px solid var(--border); padding-left: 14px;
}

/* Zoom cluster (− / level / + / Fit) — same pill treatment as sim controls. */
.zoom-cluster {
  display: flex; gap: 4px; align-items: center;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px;
}
.zoom-btn {
  min-width: 28px; padding: 5px 0; text-align: center;
  font-size: 15px; font-weight: 600; line-height: 1;
}
.zoom-level {
  min-width: 50px; text-align: center; font-family: monospace;
  font-variant-numeric: tabular-nums;
}

/* ── Timeline panel ── */
#timeline {
  height: 200px; flex-shrink: 0; background: var(--panel);
  border-top: 1px solid var(--border); display: flex; flex-direction: column;
}
#timeline.hidden { display: none; }
#tl-resize {
  height: 5px; cursor: ns-resize; flex-shrink: 0;
  background: transparent; transition: background 0.15s;
}
#tl-resize:hover { background: var(--accent); }
.timeline-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; font-size: 11px; color: var(--text-dim);
  border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 28px;
}
.timeline-title { flex-shrink: 0; }
/* The legend's flex:1 right-aligns the trailing controls (compare + close). */
.timeline-head .btn { padding: 2px 8px; font-size: 11px; }
.tl-compare-info {
  flex-shrink: 0; font-size: 11px; color: var(--accent);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#tl-compare-clear { flex-shrink: 0; }
#tl-compare-info.hidden, #tl-compare-clear.hidden { display: none; }
.tl-scale {
  flex-shrink: 0; font-size: 11px; padding: 1px 4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-dim); cursor: pointer;
}
.tl-scale:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-legend {
  display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0;
}
.tl-chip {
  padding: 1px 7px; border-radius: 10px; font-size: 11px; cursor: pointer;
  border: 1px solid var(--chip-color, #4a9eff);
  color: var(--chip-color, #4a9eff); background: transparent;
  transition: opacity 0.15s, background 0.15s;
  white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis;
}
.tl-chip:hover { background: color-mix(in srgb, var(--chip-color, #4a9eff) 15%, transparent); }
/* solid muted colors instead of opacity — opacity 0.35 gave ~1.9:1 contrast (fails AA) */
.tl-chip-off { color: var(--text-dim); border-color: var(--border); text-decoration: line-through; }
.tl-branch-chip { border-style: dashed; --chip-color: #95a3bc; }
/* Bulk show/hide-all action: an accent-tinted chip, distinct from the
   node-colored series chips and never struck through. */
.tl-chip-all { --chip-color: var(--accent); font-weight: 600; flex-shrink: 0; margin-right: 2px; }
#timeline-canvas { flex: 1; width: 100%; min-height: 0; cursor: crosshair; }

/* History scrubber (timeline footer) */
#tl-scrub {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-top: 1px solid var(--border); flex-shrink: 0;
}
#tl-scrub .btn { padding: 2px 9px; font-size: 11px; }
#tl-range { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
#tl-range:disabled { cursor: default; opacity: 0.5; }
#tl-scrub-label { flex-shrink: 0; min-width: 92px; text-align: center; }
/* Subtle cue that the canvas is showing a past frame, not the live state. */
#canvas.scrubbing { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Scenario branches panel ── */
.branch-action-btn { width: 100%; margin-bottom: 10px; }
.branch-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.branch-name {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); padding: 3px 7px; font-size: 12px;
}
.branch-name:focus { border-color: var(--accent); outline: none; }
.branch-step { font-size: 11px; color: var(--text); white-space: nowrap; }
.branch-mini-btn { padding: 3px 7px; font-size: 11px; }

/* ── Monte Carlo modal ── */
#mc-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#mc-overlay.hidden { display: none; }
#mc-modal {
  width: 580px; max-width: 92vw; max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.mc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 13px;
}
.mc-head .btn { padding: 2px 8px; }

/* Shared settings band — Runs / Steps / Seed feed every analysis below. */
.mc-settings {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}

/* One analysis per section: a titled header with its run button on the right,
   then that analysis's own controls. Consistent dividers between every band. */
.mc-section { padding: 10px 16px 12px; border-bottom: 1px solid var(--border); }
.mc-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mc-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-dim);
}
.mc-section-head .btn { white-space: nowrap; }
.mc-section-desc { font-size: 11px; color: var(--text-dim); margin: 6px 0 0; line-height: 1.45; }
.mc-section-row {
  display: flex; gap: 10px 12px; align-items: center; flex-wrap: wrap; margin-top: 8px;
}
.mc-section-hint { font-size: 11px; color: var(--text-dim); }

/* Compact inputs/selects shared by the settings band and every section row. */
.mc-settings label, .mc-section-row label {
  font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; align-items: center;
}
.mc-settings input, .mc-section-row input {
  width: 60px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); padding: 4px 6px;
}
#mc-seed { width: 92px; }
.mc-section-row select {
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); padding: 4px 6px; max-width: 150px;
}
.mc-actions { margin: 12px 0 4px; }

/* Cancel button shown alongside batch progress. */
.mc-cancel-btn { padding: 2px 10px; margin-left: 8px; font-size: 11px; }

/* Library save rows reuse .mc-controls — kept for them. */
.mc-controls { display: flex; gap: 12px; align-items: center; padding: 12px 16px; }
.mc-controls label { font-size: 12px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; }

/* ── Sensitivity heatmap ── */
.sens-top { font-size: 12px; color: var(--text); margin: 0 0 8px; }
.sens-top b { color: var(--accent); }
.sens-legend {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-dim); margin: 2px 0 10px; flex-wrap: wrap;
}
.sens-legend .sens-grad {
  width: 120px; height: 10px; border-radius: 2px; border: 1px solid var(--border);
  background: linear-gradient(to right,
    rgba(239,83,80,0.82), rgba(255,255,255,0.04), rgba(76,175,80,0.82));
}
#mc-results table.sens-table th { text-align: center; white-space: nowrap; }
#mc-results table.sens-table td { text-align: center; }
#mc-results table.sens-table th:first-child,
#mc-results table.sens-table td:first-child { text-align: left; }
.sens-cell { font-variant-numeric: tabular-nums; }
.sens-na { color: var(--text-dim); }

/* ── Help / shortcuts modal ── */
#help-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#help-overlay.hidden { display: none; }
#help-modal {
  width: 640px; max-width: 92vw; max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.help-body { display: flex; gap: 24px; padding: 14px 18px 18px; }
.help-col { flex: 1; min-width: 0; }
.help-col h3 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-dim); margin: 14px 0 8px;
}
.help-col h3:first-child { margin-top: 0; }
.help-col dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; }
.help-col dt { font-size: 11px; color: var(--text); white-space: nowrap; }
.help-col dd { font-size: 11px; color: var(--text-dim); margin: 0; }
.help-col kbd {
  font-family: monospace; font-size: 10px; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 4px;
}
.help-footer { padding: 12px 18px 16px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--border); }

/* ── Knowledge base / concept guide ── */
#kb-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#kb-overlay.hidden { display: none; }
#kb-modal {
  width: 880px; max-width: 94vw; height: 600px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.kb-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-dim);
}
.kb-search input {
  flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 7px 10px; font-size: 13px; font-family: var(--font);
}
.kb-search input:focus { outline: none; border-color: var(--accent); }
.kb-body { display: flex; flex: 1; min-height: 0; }
.kb-nav {
  width: 244px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border); padding: 8px;
}
.kb-cat {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-dim); margin: 12px 8px 4px;
}
.kb-cat:first-child { margin-top: 4px; }
.kb-link {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); padding: 6px 10px; border-radius: 5px; font-size: 12px;
  cursor: pointer; font-family: var(--font);
}
.kb-link:hover { background: rgba(74,158,255,0.14); color: var(--accent); }
.kb-link.active { background: rgba(74,158,255,0.2); color: var(--accent); font-weight: 600; }
.kb-noresults { color: var(--text-dim); font-size: 12px; padding: 10px; }
.kb-article { flex: 1; overflow-y: auto; padding: 20px 24px; }
.kb-article:focus:not(:focus-visible) { outline: none; }
.kb-article .kb-cat-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-dim); margin-bottom: 6px;
}
.kb-article h2 { font-size: 18px; margin: 0 0 12px; color: var(--text); }
.kb-article p { font-size: 13px; line-height: 1.65; color: var(--text); margin: 0; }

/* Context "?" in the properties selection header — opens the guide article. */
.props-help {
  margin-left: auto; background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.props-help:hover { color: var(--accent); background: rgba(74,158,255,0.14); }

/* ── Interactive tour (coach-marks) ── */
/* The container doesn't capture clicks, so the user can still operate the
   highlighted control beneath the spotlight; only the coach card is interactive. */
#tour { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
#tour.hidden { display: none; }
#tour-spotlight {
  position: fixed; border-radius: 8px;
  /* The giant spread box-shadow dims everything except the cut-out. */
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.58);
  border: 2px solid var(--accent);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
  pointer-events: none;
}
#tour-spotlight.off { box-shadow: 0 0 0 9999px rgba(0,0,0,0.58); border-color: transparent; }
#tour-coach {
  position: fixed; pointer-events: auto;
  width: 290px; max-width: 92vw;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px;
  padding: 14px 16px; box-shadow: 0 10px 36px rgba(0,0,0,0.55);
}
#tour-coach .tour-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
#tour-coach p { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0; }
#tour-coach p b { color: var(--text); }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.tour-actions .btn { padding: 4px 12px; font-size: 12px; }
.tour-actions .hidden { display: none; }

/* ── Guard / destructive-action confirmation modal ── */
#guard-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 120;
}
#guard-overlay.hidden { display: none; }
#guard-modal {
  width: 400px; max-width: 92vw;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
}
.guard-body { padding: 16px 20px 8px; }
.guard-body p { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0; }
.guard-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 16px; border-top: 1px solid var(--border);
}
/* Guard confirm button: solid filled danger style (scoped to avoid specificity conflict with .btn.btn-danger ghost style) */
#guard-confirm { background: #c0392b; color: #fff; border-color: #c0392b; }
#guard-confirm:hover { background: #a93226; border-color: #a93226; }

/* ── Welcome / getting-started modal ── */
#welcome-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 110;
}
#welcome-overlay.hidden { display: none; }
#welcome-modal {
  width: 640px; max-width: 92vw; max-height: 88vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
}
.welcome-body { padding: 16px 20px 4px; }
.welcome-lede { font-size: 14px; line-height: 1.5; color: var(--text); margin-bottom: 16px; }
.welcome-cols { display: flex; gap: 28px; }
.welcome-col { flex: 1; min-width: 0; }
.welcome-col h3 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; color: var(--text-dim); margin: 0 0 10px;
}
.welcome-col ol { margin: 0; padding-left: 18px; }
.welcome-col ol li { font-size: 12px; line-height: 1.6; color: var(--text); margin-bottom: 6px; }
.welcome-note { font-size: 11px; color: var(--text-dim); margin-top: 10px; line-height: 1.5; }
.welcome-col dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 0; }
.welcome-col dt { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.welcome-col dd { font-size: 12px; color: var(--text-dim); margin: 0; }
.welcome-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 20px; border-top: 1px solid var(--border); margin-top: 12px;
}

/* Formula field helper: available variables + the state-connection tip */
.formula-hint { font-size: 11px; color: var(--text-dim); margin: -4px 0 8px; line-height: 1.6; }
.formula-hint code {
  font-family: monospace; font-size: 11px; color: var(--text);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 3px;
  padding: 0 4px; margin-right: 2px;
}
.formula-tip { color: var(--accent2); }
.formula-hint-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
}
.formula-hint-link:hover { color: var(--text); }
.mc-controls input { width: 70px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); padding: 4px 6px; }
#mc-results { padding: 0 16px 16px; }
#mc-results .mc-summary { font-size: 12px; color: var(--text); margin: 6px 0 10px; }
.mc-stale-badge { font-size: 11px; color: #ffa726; margin: 0 0 8px; padding: 4px 8px; background: rgba(255,167,38,0.1); border-radius: 4px; border-left: 2px solid #ffa726; }
#mc-results table { width: 100%; border-collapse: collapse; font-size: 12px; }
#mc-results th, #mc-results td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--border); }
#mc-results th:first-child, #mc-results td:first-child { text-align: left; }
#mc-results th { color: var(--text-dim); font-weight: 600; }
#mc-results td.swatch-cell { text-align: left; }
.mc-empty { color: var(--text-dim); font-size: 12px; padding: 8px 0; }

/* Per-node distribution histogram in the Monte Carlo results table. */
.mc-hist-cell { min-width: 96px; }
.mc-hist {
  display: flex; align-items: flex-end; gap: 1px;
  height: 22px; width: 90px;
  border-bottom: 1px solid var(--border);
}
.mc-bar {
  flex: 1; min-height: 0; background: var(--accent); opacity: 0.75;
  border-radius: 1px 1px 0 0;
}
.mc-bar:hover { opacity: 1; }

/* Chart visualization-style picker (chart properties panel). */
.chart-type-chips { margin-bottom: 12px; flex-wrap: wrap; }
.chart-type-chips .var-chip { flex: 1 1 45%; padding: 5px 8px; }
.chart-type-chips .var-chip span { font-family: monospace; margin-right: 2px; }

/* ── Library modal ── */
#lib-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
#lib-overlay.hidden { display: none; }
#lib-modal {
  width: 500px; max-width: 92vw; max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
#lib-list, #lib-templates { padding: 0 16px; }
/* The save-name input shares .mc-controls styling but should fill the row,
   not inherit the Monte Carlo modal's tiny 70px number-input width. */
#lib-name { flex: 1; width: auto; min-width: 0; }
.lib-section { padding: 4px 0 12px; }
.lib-section + .lib-section { border-top: 1px solid var(--border); }
.lib-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-dim); padding: 12px 16px 2px;
  display: flex; align-items: center; justify-content: space-between;
}
.lib-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border); gap: 10px;
}
.lib-row:last-child { border-bottom: none; }
.lib-info { flex: 1; min-width: 0; font-size: 12px; }
.lib-info b { display: block; }
.lib-date { color: var(--text-dim); font-size: 11px; }
.lib-desc { display: block; color: var(--text-dim); font-size: 11px; margin-top: 1px; }

/* ── Artificial-player rule box ── */
.ai-rule {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 8px 2px; margin-bottom: 8px; background: var(--panel2);
}
.ai-rule .prop-row label { flex: 0 0 70px; }

/* ── Toast ── */
#app-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  background: var(--panel2); color: var(--text); border: 1px solid var(--accent);
  border-radius: 6px; padding: 8px 16px; font-size: 12px; z-index: 200;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4); opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
#app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Sticky note textarea (props panel) ── */
.note-textarea {
  flex: 1; min-height: 70px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); padding: 4px 8px; font-size: 12px;
  font-family: var(--font); resize: vertical; outline: none;
  transition: border-color 0.15s;
}
.note-textarea:focus { border-color: var(--accent); }

/* ── Group / note / chart canvas elements ── */
.group-container { cursor: pointer; }
.sticky-note { cursor: pointer; }
.chart-elem { cursor: pointer; }

/* ── Per-type resource readouts ── */
.type-readout { margin-bottom: 8px; }
.type-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.type-swatch {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 2px;
  border: 1px solid var(--border);
}
.type-name {
  flex: 1; font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.type-count { font-family: monospace; font-size: 12px; color: var(--accent); }

/* Live queue metrics readout (throughput / waiting time / peak line). */
.queue-metrics { margin-top: 6px; }
.queue-stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 2px 0; font-size: 12px;
}
.queue-stat-label { color: var(--text-dim); }
.queue-stat-val { font-family: monospace; color: var(--text); }

/* ── Embed mode (clean, shareable view) ── */
body.embed #palette,
body.embed #props-panel,
body.embed #diagram-rail,
body.embed .file-controls,
body.embed .analysis-controls { display: none; }