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

/* ── Vendored fonts (Graphite · Lime redesign) ─────────────────────────────
   Space Grotesk for UI text, JetBrains Mono for every numeric value. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../vendor/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../vendor/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../vendor/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #101114;            /* app chrome bg */
  --canvas: #0d0e11;        /* canvas + input backgrounds */
  --panel: #16181d;
  --panel2: #1d2027;        /* raised */
  --border: #2a2e38;
  --border-soft: #22252e;   /* row dividers */
  --text: #d5d8e0;
  --text-bright: #e8ebf2;   /* titles */
  --text-dim: #8a90a0;
  --text-faint: #6b7180;    /* section labels, hints */
  --accent: #b6e94d;        /* lime: selection, running, active tool, focus */
  --accent-ink: #14151a;    /* text on lime */
  --accent-tint: rgba(182, 233, 77, 0.12);
  --accent2: #ffa726;       /* resource flow orange */
  --red: #ef5350;
  --green: #4caf50;
  --font: 'Space Grotesk', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

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

/* Custom chevron on every select: no native-styled controls anywhere. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2210%22%20height=%226%22%3E%3Cpath%20d=%22M1%201l4%204%204-4%22%20fill=%22none%22%20stroke=%22%238a90a0%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px !important;
  cursor: pointer;
}

/* 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: 6px;
  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: 10px; padding: 4px 12px;
  min-height: 56px; 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; gap: 10px;
  margin-right: 2px; user-select: none; flex-shrink: 0;
  color: var(--accent);   /* drives the mark via currentColor */
}
.logo-mark { display: block; }
.logo-word {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text-bright); white-space: nowrap;
}

.sim-controls { display: flex; align-items: center; gap: 8px; }
.file-controls { display: flex; gap: 6px; align-items: center; }

/* Functional clusters read as single units: shared 40px pill background. */
.sim-cluster, .speed-cluster {
  display: flex; align-items: center; gap: 6px; height: 40px;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 9px; padding: 0 4px;
}
.sim-cluster .btn { border-radius: 6px; background: var(--panel); }
.speed-cluster { padding: 0 11px; gap: 9px; }
.speed-cluster input[type="range"] { width: 78px; }
.speed-icon { font-size: 12px; color: var(--text-dim); }
#speed-label { font-family: var(--mono); font-size: 12px; color: var(--text-dim); min-width: 26px; }

/* Run is the primary verb of the app: lime, dark ink, pulsing while running. */
#btn-run {
  min-width: 76px;
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
#btn-run:hover { background: #c4f266; border-color: #c4f266; color: var(--accent-ink); }
#btn-run.running {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  animation: run-pulse 2s ease-in-out infinite;
}
@keyframes run-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(182,233,77,0.35); }
  50% { box-shadow: 0 0 0 5px rgba(182,233,77,0); }
}

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

#step-counter.tb-chip {
  display: inline-flex; align-items: center; justify-content: center; height: 32px;
  font-family: var(--mono); font-size: 12px; color: var(--text-bright);
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 7px; padding: 0 12px; min-width: 76px; text-align: center;
  white-space: nowrap; /* growing step numbers must widen the chip, not wrap inside it */
}

#sim-status {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--accent);
  white-space: nowrap;
}
#sim-status:not(:empty)::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}

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

/* ── Left palette ── */
#palette {
  width: 82px; background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 10px 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. The
     thumb takes --text-faint, not --border, which is invisible on --panel. */
  scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent;
}

/* Edge fades that mark the items hidden past the fold. Shared by both vertical
   rails: the tool palette here and the Setup rail on the right, which clips
   Loops and Watch as soon as the timeline drawer opens. Both fades are sticky
   flex items pulled back by a negative margin, so they float over the strip
   without taking space, and app.js toggles each as the scroll position changes.
   The bottom one carries a caret because "there is more below" is the discovery
   that matters. */
#palette::before, #palette::after,
#diagram-rail::before, #diagram-rail::after {
  content: ''; position: sticky; z-index: 2; flex: none; align-self: stretch;
  width: 100%; height: 26px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
}
#palette::before, #diagram-rail::before {
  top: -10px; margin-bottom: -26px; order: -1;
  background: linear-gradient(var(--panel) 30%, transparent);
}
#palette::after, #diagram-rail::after {
  content: '\f107'; /* fa-angle-down */
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
  color: var(--text-faint);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px;
  bottom: -10px; margin-top: -26px;
  background: linear-gradient(transparent, var(--panel) 65%);
}
#palette.scrolled-down::before, #palette.can-scroll::after,
#diagram-rail.scrolled-down::before, #diagram-rail.can-scroll::after { opacity: 1; }

/* 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-faint); font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 8px 4px 6px;
  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: 4px; width: 100%; padding-bottom: 10px;
}
.palette-header[aria-expanded="false"] + .palette-items { display: none; }

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

[data-tool]:hover { background: var(--panel2); border-color: var(--border); }
[data-tool].active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }

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

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

.pal-kbd {
  display: inline-block; margin-left: 2px;
  font-family: var(--mono); 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: 14px; bottom: 14px;
  width: 190px; height: 120px; z-index: 6;
  background: rgba(13,14,17,0.9); border: 1px solid var(--border);
  border-radius: 8px; 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, .lib-tab: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: 300px; background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0;
}

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

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

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

/* ── Far-right diagram rail ── */
#diagram-rail {
  width: 70px; background: var(--panel); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; padding: 10px 0;
  gap: 2px; flex-shrink: 0; overflow-y: auto; z-index: 6;
  scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent;
}
.rail-title {
  font-size: 9px; font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 2px 0 8px; white-space: nowrap;
}
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 62px; padding: 9px 4px; border: 1px solid transparent;
  border-radius: 8px; background: none; color: var(--text-dim); cursor: pointer;
  font-size: 9.5px; font-family: var(--font); transition: all 0.15s;
}
.rail-btn:hover { background: var(--panel2); border-color: var(--border); color: var(--text); }
.rail-btn.active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }

.props-title {
  display: flex; align-items: center;
  font-size: 18px; font-weight: 600; color: var(--text-bright);
  margin-bottom: 14px; padding-bottom: 10px; 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: 12px; border-bottom: 1px solid var(--border); }
.props-title-block .props-title { margin: 0; padding: 0; border: none; font-size: 18px; }
.props-overline {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 6px;
}
.props-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255,255,255,0.15);
}

/* Labelled section header: the panel reads as an outline, not a wall. */
.props-sec {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint);
  margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.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; }

/* Fields read as label-over-input columns (4a); rows that pair a label with a
   small inline control (checkboxes, condition builders) stay horizontal. */
.prop-row {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin-bottom: 10px;
}

/* No text-transform: the label strings are already written in the sentence case
   the rest of the UI uses. Capitalizing them here title-cased every word, which
   turned "Amount (live)" into "Amount (Live)" (the guide names it the other way)
   and read the inline condition lead as "Stop When Value" mid-sentence. */
.prop-row > label {
  flex: none; font-size: 11px; color: var(--text-dim);
}
.prop-row > label:empty { display: none; }
.prop-row:has(> input[type="checkbox"]),
.cond-details .prop-row {
  flex-direction: row; align-items: center; gap: 8px;
}
.prop-row:has(> input[type="checkbox"]) > label { flex: 1; }
.cond-details .prop-row > label { flex: 0 0 auto; }

.prop-row input, .prop-row select {
  flex: 1; min-width: 0; width: 100%; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-bright); padding: 6px 10px;
  font-size: 13px; font-family: var(--font);
  outline: none; transition: border-color 0.15s;
}
.prop-row input[type="number"] { font-family: var(--mono); font-size: 12px; }

.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: var(--red); }

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

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

.var-name-input {
  flex: 1; background: transparent; border: none;
  border-bottom: 2px solid transparent; color: var(--text-bright);
  font-size: 13px; font-weight: 600; padding: 1px 0; outline: none;
  font-family: var(--font);
  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-soft);
}
.var-kind-tab {
  flex: 1; padding: 4px 2px; border: 1px solid var(--border);
  border-radius: 5px; background: none; color: var(--text-dim);
  font-size: 11px; font-family: var(--font); cursor: pointer; transition: all 0.15s; text-align: center;
}
.var-kind-tab:hover { color: var(--text); background: var(--panel2); }
.var-kind-tab.active {
  background: var(--accent-tint); border-color: var(--accent); color: var(--accent);
}

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

.var-field-label, .field-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint); 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%; height: 32px; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-bright); padding: 6px 10px;
  font-size: 12px; outline: none; transition: border-color 0.15s;
  font-family: var(--font);
}
.var-card .var-wide-input, .var-card .wide-input { background: var(--panel); }
.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; height: 32px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-bright); padding: 6px 10px;
  font-size: 12px; font-family: var(--mono); 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; font-family: var(--font); cursor: pointer; transition: all 0.15s;
}
.var-chip:hover { color: var(--text); border-color: var(--text-dim); }
.var-chip.active {
  background: var(--accent-tint); border-color: var(--accent); color: var(--accent);
}

/* Mode chip rows (rate modes, routing) — one focused choice per row. */
.chip-row { display: flex; gap: 4px; margin-bottom: 12px; }
.chip-row .var-chip { flex: 1; padding: 5px 4px; border-radius: 5px; text-align: center; }

/* 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: var(--mono); font-size: 15px;
  font-weight: 600; color: var(--accent); white-space: nowrap;
}

/* Dashed lime add-button per the design's "+ Add …" pattern. */
.var-add-btn {
  width: 100%; height: 32px; margin-top: 2px; margin-bottom: 10px;
  border: 1px dashed var(--accent); border-radius: 7px;
  background: rgba(182,233,77,0.08); color: var(--accent);
}
.var-add-btn:hover { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }

/* Legacy compat — kept for any stray references */
.randvar-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 10px; }
.randvar-value { font-size: 11px; font-family: var(--mono); 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: 8px;
  overflow: hidden; background: var(--canvas); 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(--canvas);
  border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}

.sim-meta {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--canvas); 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-soft); }
.sim-meta-row span { color: var(--text-dim); }
.sim-meta-row b { font-weight: 600; font-family: var(--mono); font-size: 11px; color: var(--text-bright); }

.chart-section { margin-top: 16px; }
.chart-label { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.sparkline { border-radius: 6px; display: block; width: 100%; }
/* Collapsed until the run has two points to join (see Sparkline.update). */
.sparkline.hidden { display: none; }

/* Hero readout card (props panel): big mono value on a canvas-dark card. */
.hero-card {
  text-align: center; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; margin-bottom: 16px;
}
.hero-card-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 2px;
}
.hero-card-value {
  font-family: var(--mono); font-size: 34px; font-weight: 600;
  color: var(--accent); line-height: 1;
}
.hero-card-sub { font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.hero-card .sparkline { margin-top: 8px; }

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

.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.btn-primary:hover { background: #c4f266; border-color: #c4f266; color: var(--accent-ink); }
.btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.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: 200px;
  padding: 5px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 10px; 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: 6px; font-size: 12px; font-family: var(--font);
  cursor: pointer; white-space: nowrap;
}
.menu-item:hover { background: var(--accent-tint); color: var(--accent); }
.menu-sep { height: 1px; background: var(--border-soft); 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: 200px;
  padding: 5px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 1px;
  /* Never taller than the window. The touch overflow menu carries everything
     the collapsed topbar hides, which is more than a landscape phone can show:
     at 667x375 it ran 702px tall and left ten items past the bottom edge, with
     html/body unable to scroll and the JS clamp pinned at the top. Bounded, it
     scrolls itself instead. dvh where supported, so a browser's own retracting
     toolbar does not push the last item out of reach again. */
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent;
}
.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-family: var(--mono);
}
.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; }
/* Selected connection: soft lime underglow beneath the lime line. */
.conn.selected .conn-path { filter: drop-shadow(0 0 8px rgba(182,233,77,0.45)); }
.conn-cp-handle { opacity: 0.6; transition: opacity 0.12s; }
.conn-cp-handle:hover { opacity: 1; }

/* Flow animation: dash-march on connections that carried resources this step. */
@keyframes flow-dash { to { stroke-dashoffset: -11; } }
.conn.flowing .conn-path { animation: flow-dash 0.7s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .conn.flowing .conn-path { animation: none; }
}

/* 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: 5px;
  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: var(--accent-ink); 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-soft); 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: var(--accent2); margin-bottom: 8px; line-height: 1.4; }

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

.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: 600; font-family: var(--mono); }
.n-label, .n-badge, .grp-label {
  paint-order: stroke; stroke: var(--canvas); stroke-width: 3px; stroke-linejoin: round;
}
.n-label { fill: var(--text); font-size: 12px; font-family: var(--font); }
.node.selected .n-label { font-weight: 600; fill: var(--text-bright); }
.n-badge { fill: var(--text-dim); font-size: 11px; font-family: var(--font); }
/* In-node glyphs (∞ × % ƒx …) always render in mono. */
.n-glyph { font-family: var(--mono); pointer-events: none; }
.n-caption { fill: var(--text-dim); font-size: 9px; font-family: var(--mono); }

/* ── Node states ── */
.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; }
}
/* Expanding ring emitted on each firing (18e). */
.fire-ring { animation: fire-ring 0.25s ease-out forwards; }
@keyframes fire-ring {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* ── Connection label pills ── */
.conn-label { fill: var(--text-bright); font-family: var(--mono); }
.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: auto; align-items: center;
}

/* Zoom cluster (− / level / + / Fit): same pill treatment as sim controls. */
.zoom-cluster {
  display: flex; gap: 3px; align-items: center;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 7px; padding: 3px;
}
.zoom-cluster .btn { min-height: 24px; }
.zoom-btn {
  min-width: 28px; padding: 3px 0; text-align: center;
  font-size: 13px; font-weight: 600; line-height: 1;
  background: transparent; border-color: transparent;
}
.zoom-level {
  min-width: 48px; text-align: center; font-family: var(--mono); font-size: 12px;
  background: transparent; border-color: transparent;
}

/* ── 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: 10px;
  padding: 7px 14px; font-size: 11px; color: var(--text-dim);
  border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 28px;
}
.timeline-title { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-bright); }
/* The legend's flex:1 right-aligns the trailing controls (compare + close). */
.timeline-head .btn { padding: 2px 8px; min-height: 24px; font-size: 11px; }
.tl-compare-info {
  flex-shrink: 0; font-size: 11px; color: var(--accent);
  white-space: nowrap; font-family: var(--mono);
}
#tl-compare-clear { flex-shrink: 0; }
#tl-compare-info.hidden, #tl-compare-clear.hidden, #tl-live.hidden { display: none; }
.tl-scale {
  flex-shrink: 0; font-size: 11px; padding: 4px 8px;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 5px;
  color: var(--text-dim); cursor: pointer; font-family: var(--font);
}
.tl-scale:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Cap the legend at two chip rows and scroll it beyond that. A 29-node diagram
   wrapped to three rows, and because the head and the scrubber never shrink,
   every row it grew came straight out of the plot: the chart collapsed to 68px
   inside the fixed-height drawer. Better the legend scrolls than the chart. */
.tl-legend {
  display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0;
  max-height: 48px; overflow-y: auto; align-content: flex-start;
  scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent;
}
.tl-chip {
  padding: 2px 10px; border-radius: 11px; font-size: 11px; cursor: pointer;
  border: 1px solid var(--chip-color, #4a9eff);
  color: var(--chip-color, #4a9eff); background: transparent;
  font-family: var(--font);
  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: #8a90a0; }
/* 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; }
/* min-height keeps the plot readable when the head or the scrubber grow; the
   drawer is resizable, so it can always be dragged taller. */
#timeline-canvas { flex: 1; width: 100%; min-height: 90px; cursor: crosshair; }

/* History scrubber (timeline footer) */
#tl-scrub {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}
#tl-scrub .btn { padding: 2px 9px; min-height: 24px; 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;
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  background: none; border: none; padding: 0;
}
/* While scrubbing, the position label flips amber so "not live" is unmissable. */
#tl-scrub.scrubbing #tl-scrub-label { color: #ffd27a; }
#tl-live { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
#tl-live:disabled { border-color: var(--border); background: var(--panel2); color: var(--text); }
/* 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(--canvas); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); padding: 3px 7px; font-size: 12px;
  font-family: var(--font);
}
.branch-name:focus { border-color: var(--accent); outline: none; }
.branch-step { font-size: 11px; color: var(--text); white-space: nowrap; font-family: var(--mono); }
.branch-mini-btn { padding: 3px 7px; min-height: 24px; font-size: 11px; }

/* ── Modal shell (shared) ── */
#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: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.mc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 15px; color: var(--text-bright);
}
.mc-head > span > i { color: var(--accent); margin-right: 4px; }
.mc-head .btn { padding: 2px 8px; min-height: 28px; min-width: 28px; }

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

/* 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 18px 12px; border-bottom: 1px solid var(--border-soft); }
.mc-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mc-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint);
}
.mc-section-head .btn { white-space: nowrap; }
/* Secondary run actions (sweep, sensitivity) read as lime outline buttons. */
#mc-sweep-run, #mc-sens-run {
  background: transparent; border-color: var(--accent); color: var(--accent); font-weight: 600;
}
#mc-sweep-run:hover, #mc-sens-run:hover { background: var(--accent-tint); }
.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; height: 32px; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-bright); padding: 4px 6px; font-family: var(--mono); font-size: 12px;
}
#mc-seed { width: 92px; }
.mc-section-row select {
  height: 32px; background: var(--canvas); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-bright); padding: 4px 6px; max-width: 150px; font-family: var(--font);
}
.mc-actions { margin: 12px 0 4px; }

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

/* Batch progress: mono count + slim lime bar + red-outline Cancel. */
.mc-progress { padding-bottom: 4px; }
.mc-progress .mc-prog-text { font-family: var(--mono); color: var(--text); }
.mc-progress-bar { height: 6px; border-radius: 3px; background: var(--border-soft); overflow: hidden; margin-top: 6px; }
.mc-progress-bar > div { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.15s; }

/* Library save rows reuse .mc-controls — kept for them. */
.mc-controls { display: flex; gap: 12px; align-items: center; padding: 12px 18px; }
.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-family: var(--mono); }
.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: 14px;
  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: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint); 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: var(--mono); 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: 14px;
  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(--canvas); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-bright); 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: 230px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border); padding: 8px;
}
.kb-cat {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint); 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: 6px; font-size: 12px;
  cursor: pointer; font-family: var(--font);
}
.kb-link:hover { background: var(--accent-tint); color: var(--accent); }
.kb-link.active { background: var(--accent-tint); 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: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 6px;
}
.kb-article h2 { font-size: 19px; margin: 0 0 12px; color: var(--text-bright); }
.kb-article p { font-size: 13px; line-height: 1.7; 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-faint);
  cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.props-help:hover { color: var(--accent); background: var(--accent-tint); }

/* ── 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; }
/* Click-through card, live buttons. The coach is placed beside its target, so
   when the target is a palette tool it lands on the canvas just right of the
   strip, which is exactly where a first diagram goes. Taking the pointer there
   swallowed the drag the step was asking for, and since these steps advance by
   watching for the edit and show no Next, the tour stranded with only "Skip
   tour" left. */
#tour-coach {
  position: fixed; pointer-events: none;
  width: 290px; max-width: 92vw;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 10px 36px rgba(0,0,0,0.55);
}
#tour-coach .tour-count {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; 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-bright); }
.tour-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.tour-actions .btn { padding: 4px 12px; font-size: 12px; pointer-events: auto; }
.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: 360px; max-width: 92vw;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
}
#guard-title i { color: #ffd27a; }
.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: 14px;
  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-lede b { color: var(--text-bright); }
.welcome-cols { display: flex; gap: 28px; }
.welcome-col { flex: 1; min-width: 0; }
.welcome-col h3 {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-faint); margin: 0 0 10px;
}
/* The 3-step loop as numbered lime mono tiles. */
.welcome-col ol { margin: 0; padding: 0; list-style: none; counter-reset: wstep; }
.welcome-col ol li {
  font-size: 12px; line-height: 1.6; color: var(--text); margin-bottom: 10px;
  position: relative; padding-left: 34px; counter-increment: wstep; min-height: 24px;
}
.welcome-col ol li::before {
  content: counter(wstep);
  position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--mono); font-weight: 600; font-size: 12px;
}
.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; }
/* Wraps: the three buttons need about 468px, so on a phone the row overflowed
   to the left and pushed the primary "Take a quick tour" clean off screen. At
   320px the second button went with it. This is the first screen a new user
   sees, so nothing in it may sit outside the modal. */
.welcome-actions {
  display: flex; flex-wrap: wrap; 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: var(--mono); 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; height: 32px; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text-bright); padding: 4px 8px; font-family: var(--font); }
#mc-results { padding: 0 18px 16px; }
#mc-results .mc-summary { font-size: 12px; color: var(--text); margin: 6px 0 10px; }
.mc-stale-badge { font-size: 11px; color: var(--accent2); margin: 0 0 8px; padding: 4px 8px; background: rgba(255,167,38,0.1); border-radius: 4px; border-left: 2px solid var(--accent2); }
#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-soft); }
#mc-results td { font-family: var(--mono); }
#mc-results th:first-child, #mc-results td:first-child { text-align: left; font-family: var(--font); }
#mc-results th { color: var(--text-dim); font-weight: 600; font-family: var(--font); }
#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: var(--mono); margin-right: 2px; }

/* ── Library modal (tabbed: Your diagrams / Components / Templates) ── */
#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: 520px; max-width: 92vw; max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.lib-tabs {
  display: flex; gap: 4px; padding: 0 18px;
  border-bottom: 1px solid var(--border);
}
.lib-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); font-size: 13px; font-family: var(--font);
  padding: 10px 12px; cursor: pointer; white-space: nowrap;
}
.lib-tab:hover { color: var(--text); }
.lib-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.lib-tab .lib-tab-count { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-left: 5px; }
.lib-tab.active .lib-tab-count { color: var(--accent); }
.lib-pane.hidden { display: none; }
#lib-list, #lib-templates, #lib-components { padding: 0 18px; }
/* 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, #comp-name { flex: 1; width: auto; min-width: 0; }
.lib-section { padding: 4px 0 12px; }
.lib-section-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--text-faint); padding: 12px 18px 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-soft); gap: 10px;
}
.lib-row:last-child { border-bottom: none; }
.lib-thumb {
  width: 44px; height: 30px; flex-shrink: 0;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 5px;
  overflow: hidden;
}
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-info { flex: 1; min-width: 0; font-size: 12px; }
.lib-info b { display: block; color: var(--text-bright); }
.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: 8px;
  padding: 8px 8px 2px; margin-bottom: 8px; background: var(--canvas);
}
.ai-rule .prop-row label { flex: 0 0 70px; }

/* ── Recovery banner (16h): amber notice after an autosave restore ── */
.recovery-banner {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 8;
  background: var(--panel); border: 1px solid #ffd27a; border-radius: 10px;
  padding: 8px 14px; font-size: 12px; color: var(--text);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4); white-space: nowrap;
  transition: opacity 1s;
}
.recovery-banner > i { color: #ffd27a; }
.recovery-banner .btn { padding: 3px 10px; min-height: 26px; font-size: 12px; }
.recovery-banner.fade { opacity: 0; }

/* ── 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: 17px; padding: 8px 18px; 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(--canvas);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 6px 10px; 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: 9px; margin-bottom: 7px; }
.type-swatch {
  flex: 0 0 11px; width: 11px; height: 11px; border-radius: 3px;
  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: var(--mono); font-size: 12px; color: var(--accent); }

/* Gate output weight cards (18a): slider + mono value + computed share. */
.gate-out-card {
  background: var(--canvas); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; margin-bottom: 8px;
}
.gate-out-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gate-out-name {
  font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gate-out-pct { font-family: var(--mono); font-size: 12px; color: var(--accent); flex-shrink: 0; }
.gate-out-row { display: flex; align-items: center; gap: 10px; }
.gate-out-row input[type="range"] { flex: 1; width: auto; accent-color: #ba68c8; }
.gate-out-num {
  width: 52px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text-bright); padding: 4px 6px;
  font-size: 12px; font-family: var(--mono); text-align: center; outline: none;
}
.gate-out-num:focus { border-color: var(--accent); }
.gate-out-formula { font-family: var(--mono); font-size: 11px; color: #8fe08f; }

/* Converter consumes → emits pair card (18b). */
.conv-pair {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px; margin-bottom: 10px;
}
.conv-pair-cell { text-align: center; }
.conv-pair-num {
  width: 52px; height: 38px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-bright); font-size: 17px;
  font-family: var(--mono); text-align: center; outline: none;
}
.conv-pair-num:focus { border-color: var(--accent); }
.conv-pair-ro {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
}
.conv-pair-label { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.conv-pair-arrow { color: var(--text-faint); font-size: 13px; }

/* Delay in-flight batch rows (18d): units + maturing progress + release step. */
.delay-batch {
  background: var(--canvas); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 6px;
}
.delay-batch-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 6px;
}
.delay-batch-units { font-family: var(--mono); font-size: 12px; color: var(--text-bright); }
.delay-batch-release { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
.delay-batch-bar { height: 5px; border-radius: 3px; background: var(--border-soft); overflow: hidden; }
.delay-batch-bar > div { height: 100%; background: #26c6da; border-radius: 3px; }

/* Activator live status card (16b): green while allowing, red while blocking. */
.act-status {
  border: 1px solid var(--green); border-radius: 8px; background: rgba(76,175,80,0.08);
  color: var(--green); font-size: 12px; padding: 8px 11px; margin-bottom: 10px;
}
.act-status.blocking { border-color: var(--red); background: rgba(239,83,80,0.08); color: var(--red); }
.act-status:empty { display: none; }

/* Role glyphs on the state-connection role chips keep their fixed colors. */
.role-chips .var-chip:nth-child(2) .role-glyph { color: #ffd27a; }
.role-chips .var-chip:nth-child(3) .role-glyph { color: #8fe08f; }
.role-chips .var-chip:nth-child(4) .role-glyph { color: #7cc7ff; }
.role-glyph { font-family: var(--mono); }

/* Selectable mode cards (14a Time panel): the active card wears lime. */
.mode-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--canvas); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; margin-bottom: 8px; font-family: var(--font);
  transition: border-color 0.15s, background 0.15s;
}
.mode-card:hover { border-color: var(--text-dim); }
.mode-card.active { border-color: var(--accent); background: var(--accent-tint); }
.mode-card-title { font-size: 13px; font-weight: 600; color: var(--text-bright); margin-bottom: 3px; }
.mode-card.active .mode-card-title { color: var(--accent); }
.mode-card-desc { font-size: 11px; color: var(--text-dim); line-height: 1.45; }

/* Watch panel rows (10c): mono name, tiny sparkline, mono lime value. */
.watch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--border-soft);
}
.watch-row:last-child { border-bottom: none; }
.watch-name {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.watch-spark { flex-shrink: 0; display: block; }
.watch-val { flex-shrink: 0; font-family: var(--mono); font-size: 12px; color: var(--accent); }

/* Live queue metrics readout (18c): a canvas-dark card of mono stats. */
.queue-metrics {
  margin-top: 6px; background: var(--canvas); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 11px;
}
.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: var(--mono); color: var(--text); }

/* ── Touch layout (17a/b) ─────────────────────────────────────────────────
   Under 768px the shell reorganises: a collapsed topbar (logo, 44px Run,
   step chip, ☰ overflow), the palette as a bottom bar of 52px tiles, the
   props panel as a bottom sheet sliding over the canvas, and a floating
   status pill. Desktop is untouched. */
.mobile-only { display: none; }

@media (max-width: 768px) {
  .mobile-only { display: inline-flex; align-items: center; justify-content: center; }

  /* Collapsed topbar: logo mark, Run, Step, step chip, ☰. */
  #topbar { gap: 8px; min-height: 56px; padding: 4px 10px; flex-wrap: nowrap; }
  .logo-word { display: none; }
  .speed-cluster, .analysis-controls, .file-controls, #btn-reset { display: none; }
  .sim-cluster { height: 52px; border-radius: 10px; }
  #btn-run { min-height: 44px; min-width: 88px; font-size: 14px; }
  #btn-step { min-height: 44px; }
  #step-counter.tb-chip { height: 44px; border-radius: 9px; }
  #btn-mobile-menu { width: 44px; min-height: 44px; margin-left: auto; flex-shrink: 0; }

  /* Status becomes a floating pill over the canvas (17a). */
  #sim-status {
    position: fixed; top: 68px; left: 12px; z-index: 15;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 15px; padding: 5px 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }
  #sim-status:empty { display: none; }

  /* Canvas on top, palette as a horizontally scrolling bottom bar. */
  #main { flex-direction: column; }
  #canvas-wrap { order: 1; }
  #diagram-rail { display: none; }
  #props-panel { order: 3; }
  #palette {
    order: 2; position: relative; width: 100%; flex-shrink: 0;
    flex-direction: row; align-items: center; gap: 4px;
    overflow-x: auto; overflow-y: hidden;
    border-right: none; border-top: 1px solid var(--border);
    padding: 16px 10px 10px;
    scrollbar-width: none;
  }
  /* The strip runs horizontally here, so the vertical edge fades do not apply:
     ::before reverts to the drag-handle pill and ::after is dropped entirely. */
  #palette::before {
    content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: var(--border);
    margin: 0; order: 0; opacity: 1;
  }
  #palette::after { display: none; }
  .palette-section { width: auto; flex-direction: row; align-items: center; flex-shrink: 0; }
  .palette-section + .palette-section { border-top: none; border-left: 1px solid var(--border-soft); }
  .palette-header { display: none; }
  .palette-items, .palette-header[aria-expanded="false"] + .palette-items {
    display: flex; flex-direction: row; gap: 6px; padding: 0 8px; width: auto;
  }
  [data-tool] { width: 52px; min-height: 52px; padding: 6px 2px; border-radius: 12px; }
  [data-section="tools"] [data-tool], [data-section="connect"] [data-tool] { width: 56px; min-height: 56px; }
  .pal-kbd { display: none; }

  /* Props panel becomes a bottom sheet sliding over the canvas (17b). The
     body.props-open class is set whenever there is a selection or an active
     rail feature to show. */
  #props-panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 58vh;
    border-left: none; border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0; z-index: 30;
    transform: translateY(105%); transition: transform 0.25s ease;
    box-shadow: 0 -12px 40px rgba(0,0,0,0.5); padding-top: 12px;
  }
  body.props-open #props-panel { transform: translateY(0); }
  #props-panel::before {
    content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: var(--border);
  }
  /* The sheet sits over the tool strip, and the only way out used to be
     guessing that a tap on bare canvas dismisses it. Give it a real close
     target so the palette is always one tap away. */
  #props-close {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    width: 40px; min-height: 40px; padding: 0;
  }
  #props-content { padding-top: 8px; }
  /* Touch targets inside the sheet. */
  #props-panel .btn { min-height: 44px; }
  #props-panel .prop-row input, #props-panel .prop-row select,
  #props-panel .wide-input, #props-panel .var-wide-input { min-height: 42px; }

  /* The timeline gives the canvas room back on small screens. */
  #timeline { height: 150px; }
}

/* Small phones (iPhone SE class). The touch topbar does not wrap, so at 320px
   the row wanted 359px and pushed the ☰ off the right edge, leaving 15px of a
   44px target. html/body do not scroll, so that put Library, File, Help, the
   Setup panels and everything else behind the menu out of reach entirely.
   Buy the width back from the Run button and the step chip, both of which stay
   perfectly legible smaller, rather than dropping a control. */
@media (max-width: 380px) {
  #topbar { gap: 6px; padding: 4px 8px; }
  #btn-run { min-width: 64px; }
  #step-counter.tb-chip { min-width: 0; padding: 0 8px; }
}

/* Coarse pointers get 44px-class touch targets even above the breakpoint. */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  [data-tool], .rail-btn { min-height: 52px; }
}

/* ── 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; }
body.embed #topbar { min-height: 44px; }
.embed-open {
  margin-left: auto; font-size: 11px; color: var(--text-faint); white-space: nowrap;
}
.embed-open a { color: var(--text-dim); text-decoration: none; }
.embed-open a:hover { color: var(--accent); }