/* StratMac schematic editor — dark theme, mirrors site conventions.
 * bg #0f172a · panels #1e293b · borders #334155 · text #e2e8f0
 * accent #f59e0b · muted #64748b
 */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background:#0f172a; color:#e2e8f0; overflow:hidden;
}
.toolbar {
  height:52px; display:flex; align-items:center; gap:0.75rem;
  padding:0 1rem; background:#1e293b; border-bottom:1px solid #334155;
  position:relative; z-index:10; flex-wrap:wrap;
}
.toolbar .brand { font-weight:700; font-size:1rem; color:#f59e0b; white-space:nowrap; }
.toolbar .sep { width:1px; height:24px; background:#334155; }
.toolbar input[type=text] {
  width:220px; background:#0f172a; border:1px solid #334155; border-radius:6px;
  color:#e2e8f0; padding:0.3rem 0.6rem; font-size:0.85rem; outline:none;
}
.toolbar input[type=text]:focus { border-color:#f59e0b; }
.toolbar button {
  background:#1e3a8a; color:#e2e8f0; border:1px solid #334155; border-radius:6px;
  padding:0.35rem 0.75rem; font-size:0.8rem; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.toolbar button:hover { background:#28418f; }
.toolbar button.primary { background:#f59e0b; color:#0f172a; font-weight:700; border-color:#f59e0b; }
.toolbar button.primary:hover { background:#fbbf24; }
.toolbar button.danger { background:#7f1d1d; border-color:#b91c1c; color:#fecaca; }
.toolbar button.danger:hover { background:#991b1b; }
.toolbar button.active { background:#34d399; color:#0f172a; border-color:#34d399; text-shadow:none; }
.toolbar button.active:hover { background:#6ee7b7; }
.toolbar .status { margin-left:auto; font-size:0.75rem; color:#64748b; }
/* Status toast: pinned bottom-right so flashes are ALWAYS visible even when
   the toolbar overflows (Mike 2026-08-28: "the Load button does nothing" —
   it flashed a hint off-screen). */
#status { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
  background: #0f172a; border: 1px solid #334155; color: #f59e0b;
  padding: 0.5rem 0.9rem; border-radius: 8px; font-size: 0.85rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); margin-left: 0; }

.workspace { display:flex; height:calc(100vh - 52px); }

/* palette sidebar */
.palette {
  width:210px; background:#1e293b; border-right:1px solid #334155;
  overflow-y:auto; padding:0.75rem;
}
.palette h3 { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; margin:0.5rem 0 0.25rem; }
.palette h3:first-child { margin-top:0; }
.palette .device {
  background:#0f172a; border:1px solid #334155; border-left:3px solid #64748b;
  border-radius:6px; padding:0.4rem 0.6rem; margin:0.25rem 0; cursor:grab;
  font-size:0.82rem; display:flex; align-items:center; justify-content:space-between;
}
.palette .device:hover { border-color:#f59e0b; }
.palette .device .hint { font-size:0.62rem; color:#64748b; }
.palette .note { margin-top:0.75rem; font-size:0.66rem; color:#64748b; line-height:1.5; border-top:1px solid #334155; padding-top:0.5rem; }

/* canvas */
.canvas { flex:1; position:relative; min-width:0; min-height:0; }
/* Scrollable canvas viewport. `#paper` sits on a fixed-size canvas (CANVAS_W x
 * CANVAS_H, defined in editor.js) so schematics larger than the viewport
 * scroll — giving operators room to move/add blocks and blank space to work
 * in. The scroller is position:relative so absolute-positioned scope overlays
 * (which use paper-local coords) anchor to it and scroll with the content. */
.canvas-scroll {
  position:relative; height:100%; width:100%; min-width:0; min-height:0;
  overflow:auto; background:#0f172a;
}
/* Dark-mode scrollbars (Mike 2026-08-20): the editor canvas is dark (#0f172a),
 * so default OS scrollbars read as a bright intrusive strip. Style them to the
 * theme — muted slate thumb over the canvas track, slightly lighter on hover. */
.canvas-scroll::-webkit-scrollbar { width:12px; height:12px; }
.canvas-scroll::-webkit-scrollbar-track { background:#0f172a; }
.canvas-scroll::-webkit-scrollbar-thumb {
  background:#334155; border:2px solid #0f172a; border-radius:6px;
}
.canvas-scroll::-webkit-scrollbar-thumb:hover { background:#475569; }
.canvas-scroll::-webkit-scrollbar-corner { background:#0f172a; }
.canvas-scroll { scrollbar-width:thin; scrollbar-color:#334155 #0f172a; } /* Firefox */
/* Dark-mode scrollbars on the SIDE panels too (Mike 2026-08-20: extend to the
 * left palette/menu area; the right inspector gets it for consistency). Track
 * matches each panel's own background; thumb = same muted slate as the canvas. */
.palette::-webkit-scrollbar, .inspector::-webkit-scrollbar { width:10px; }
.palette::-webkit-scrollbar-track { background:#0f172a; }
.inspector::-webkit-scrollbar-track { background:#1e293b; }
.palette::-webkit-scrollbar-thumb, .inspector::-webkit-scrollbar-thumb {
  background:#334155; border:2px solid transparent; border-radius:5px;
  background-clip:padding-box;
}
.palette::-webkit-scrollbar-thumb:hover, .inspector::-webkit-scrollbar-thumb:hover { background:#475569; }
.palette::-webkit-scrollbar-corner, .inspector::-webkit-scrollbar-corner { background:#0f172a; }
.palette { scrollbar-width:thin; scrollbar-color:#334155 #0f172a; }
.inspector { scrollbar-width:thin; scrollbar-color:#334155 #1e293b; }
/* JointJS sets #paper to position:relative inline and sizes to its content;
 * we give it a definite canvas size (JS keeps #paper sized to its host). */
#paper { position:relative; background:#0f172a; }
#paper .joint-cell { cursor:pointer; }
#paper .joint-link line, #paper .joint-link path { cursor:pointer; }

/* right inspector */
.inspector {
  width:230px; background:#1e293b; border-left:1px solid #334155;
  padding:0.75rem; overflow-y:auto; font-size:0.8rem;
}
.inspector h3 { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:#64748b; margin-bottom:0.5rem; }
.inspector .k { color:#64748b; font-size:0.7rem; }
.inspector .v { color:#e2e8f0; word-break:break-word; }
.inspector .row { margin-bottom:0.4rem; }
.inspector .hint { font-size:0.66rem; color:#64748b; line-height:1.5; }
.inspector ul { list-style:none; padding-left:0.25rem; }
.inspector li { font-size:0.72rem; color:#94a3b8; padding:0.1rem 0; }

/* port pins drawn by JointJS use our fill colors; ensure labels legible */
.joint-port-label { pointer-events:none; }

/* Window (range) control block: dual-thumb start→end slider (Mike 2026-08-17).
 * Both inputs are overlapping absolute tracks with pointer-events:none so the
 * transparent track never swallows the drag; the ::-slider-thumb pseudo-element
 * of EACH is re-enabled, so the START and END thumbs are both independently
 * draggable. The two thumbs sit at start vs end values and don't overlap, so
 * neither is masked by the other (the older code disabled END with
 * pointer-events:none on the element — the bug that fixed the end date). */
.ctl-range-thumb { -webkit-appearance:none; appearance:none; background:transparent; }
.ctl-range-thumb::after { content:none; }
/* Paint a track bar BEHIND the two date-window thumbs (Mike 2026-08-17: "we are
 * no longer painting the bar behind the date window buttons as we're doing with
 * the playback speed slider"). The bar itself is painted on the .range-track DOM
 * container (scope.js). These CSS rules keep the original thumb geometry/drag
 * intact (do NOT add margin shifts here: they broke the START-thumb hit test in
 * WebKit — the value-stays-0 regression of 2026-08-17) and keep the webkit
 * shadow-track from re-painting an extra appearance over it. */
.ctl-range-thumb { -webkit-appearance:none; appearance:none; background:transparent;
  /* Match the playback-speed slider's thumb VISUALS (Mike 2026-08-18): the date
     thumbs were small green circles sitting on the bar's bottom edge. To render
     the custom thumb CENTERED on the 6px bar like the native speed thumb, the
     transparent input must fill the full 18px track height — with the webkit
     thumb bottom-aligned inside it, a 16px thumb lands exactly centred on the
     bar (measured delta 0 vs the track centre). A negative margin-top here was
     found to break the START-thumb drag (2026-08-17), so centre via HEIGHT, not
     a thumb margin. */ height:18px; }
.ctl-range-thumb::after { content:none; }
.ctl-range-thumb::-webkit-slider-runnable-track { -webkit-appearance:none; }
/* 16px circle with a light ring = native accent-color thumb outline; START stays
   emerald, END is now RED (stop) so the two window thumbs read as go/finish. */
.ctl-range-thumb::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; pointer-events:auto; cursor:ew-resize;
  background:#34d399; border:2px solid #e2e8f0; margin-top:0;
}
.ctl-range-thumb:first-child::-webkit-slider-thumb { background:#34d399; } /* START */
.ctl-range-thumb:last-child::-webkit-slider-thumb  { background:#ef4444; } /* END = red */
.ctl-range-thumb::-moz-range-thumb {
  pointer-events:auto; cursor:ew-resize;
  background:#34d399; border:2px solid #e2e8f0;
}
.ctl-range-thumb:first-child::-moz-range-thumb { background:#34d399; }
.ctl-range-thumb:last-child::-moz-range-thumb  { background:#ef4444; }
.ctl-range-thumb::-moz-range-track { background:transparent; }

/* Playback-speed slider (Mike 2026-08-18): give its thumb the same polished
   amber+white-ring look as the window thumbs, RESTYLED custom per-request.
   The gray rounded BAR is NOT painted on the webkit ::-slider-runnable-track
   (WebKit does not honor a track background once the thumb has
   -webkit-appearance:none) — the speed control paints its bar on a real .range-bar
   DOM div (scope.js), exactly like the window control, so it matches. */
.ctl-speed { -webkit-appearance:none; appearance:none; height:18px;
  /* CRITICAL: the native <input type=range> element paints a light, full-height
     slab behind the thumb unless its own background is transparent — that slab
     is what Mike sees as the "way too fat" speed bar. .ctl-range-thumb already
     set background:transparent; .ctl-speed must match or the two controls drift.
     (Again avoid a negative thumb margin-top — it breaks WebKit drag/hit.) */
  background:transparent;
}
.ctl-speed::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; pointer-events:auto; cursor:pointer;
  background:#f59e0b; border:2px solid #e2e8f0; margin-top:-3px;
}
.ctl-speed::-webkit-slider-runnable-track {
  -webkit-appearance:none; height:10px; border-radius:999px;
  background:#3c3b39; border:1px solid #6c6f78; box-sizing:border-box;
}
.ctl-speed::-moz-range-thumb { pointer-events:auto; cursor:pointer; background:#f59e0b; border:2px solid #e2e8f0; }
.ctl-speed::-moz-range-track { height:10px; border-radius:999px; background:#3c3b39; border:1px solid #6c6f78; box-sizing:border-box; }

/* Date-scrub slider (Mike 2026-08-21): the bottom pan/scroll bar's thumb now
   matches the Speed/Window control knobs — an amber 16px circle with a 2px
   WHITE RING (`#e2e8f0`), dead-centred on the painted 6px bar. WebKit ignores a
   track background once -webkit-appearance:none; so, like the speed slider,
   the base input has a transparent background (no white-slab), the webkit thumb
   is a self-centred circle (height, not a margin offset — margins broke drags
   on 2026-08-17), and the gray rounded bar is painted on the surrounding box's
   real DOM (scope.js draws a .date-bar child) instead of the shadow-track.
   Firefox thumb+track reuse the same amber/white-ring + gray rounded bar. */
.date-scrub { -webkit-appearance:none; appearance:none; background:transparent; height:16px; }
.date-scrub::after { content:none; }
.date-scrub::-webkit-slider-runnable-track { -webkit-appearance:none; }
.date-scrub::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; pointer-events:auto; cursor:ew-resize;
  background:#f59e0b; border:2px solid #e2e8f0; margin-top:0;
}
.date-scrub::-moz-range-thumb {
  pointer-events:auto; cursor:ew-resize; background:#f59e0b;
  border:2px solid #e2e8f0; width:14px; height:14px;
}
.date-scrub::-moz-range-track { height:6px; border-radius:999px; background:#3c3b39; border:1px solid #6c6f78; box-sizing:border-box; }

/* Painted gray bar behind the window thumbs AND (now) the speed thumb — the
   one place a real DOM bar works in WebKit (the shadow-track background is
   ignored under -webkit-appearance:none). Rounded ends + a light outline give
   the polished track look Mike wants on both controls. */
.range-bar {
  position:absolute; left:4px; right:4px; top:4px; height:10px;
  border-radius:999px; background:#3c3b39; pointer-events:none;
  border:1px solid #6c6f78; box-sizing:border-box;
}

/* Date-bar: the 6px gray rounded bar behind the date-scrub thumb, painted on
   the real DOM (WebKit ignores the shadow-track background under
   -webkit-appearance:none). Left/right get a small air edge so the amber knob
   doesn't hug the corners; vertically centred in the 16px input hit-area. */
.date-bar {
  position:absolute; left:4px; right:4px; top:5px; height:6px;
  border-radius:999px; background:#3c3b39; pointer-events:none;
  border:1px solid #6c6f78; box-sizing:border-box;
}

/* Per-signal y-scale slider in the scoreboard (Mike 2026-08-22): a NATIVE range
   input's `accent-color` tints the WHOLE slider (track + thumb) in the feed's
   color, giving every signal's lane a different-colored background. We instead
   paint a fixed DARK track (same #3c3b39 as every other control slider) and move
   the feed's color onto the THUMB only via a --lane-color CSS variable — so all
   lanes share one dark-mode track "regardless of color" and stay identifiable by
   their colored knob. Mirrors the .ctl-speed thumb/track split for WebKit+Firefox. */
.lane-scale { -webkit-appearance:none; appearance:none; height:12px; background:transparent; }
.lane-scale::-webkit-slider-runnable-track { -webkit-appearance:none; height:8px; border-radius:999px; background:#3c3b39; border:1px solid #6c6f78; box-sizing:border-box; }
.lane-scale::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%; pointer-events:auto; cursor:ew-resize; background:var(--lane-color,#f59e0b); border:1px solid #e2e8f0; margin-top:-3px; }
.lane-scale::-moz-range-thumb { width:10px; height:10px; border-radius:50%; pointer-events:auto; cursor:ew-resize; background:var(--lane-color,#f59e0b); border:1px solid #e2e8f0; }
.lane-scale::-moz-range-track { height:8px; border-radius:999px; background:#3c3b39; border:1px solid #6c6f78; box-sizing:border-box; }

/* Rect-select rubber-band box (Mike 2026-08-17: "rect-select to move a group
 * of objects together"). Drawn in paper-canvas space (sibling of .re-handle)
 * while the user drags a selection rectangle on blank paper. */
#rect-select-box { position:absolute; z-index:12; pointer-events:none;
  border:1px dashed #38bdf8; background:rgba(56,189,248,.15); display:none;
  border-radius:2px; }



/* hierarchy issues pane + bound-I/O banner (Mike 2026-08-27) */
.hierarchy-pane{position:fixed;left:12px;bottom:12px;max-width:560px;max-height:40vh;overflow:auto;
  background:#0b0f17;border:1px solid #f59e0b66;border-radius:8px;z-index:900;padding:8px 10px;
  font-size:12px;color:#e2e8f0;box-shadow:0 6px 24px #000a;}
.hierarchy-title{font-weight:700;color:#f59e0b;margin-bottom:6px;}
.hierarchy-title a{color:#7dd3fc;margin-left:8px;font-weight:400;}
.hier-error{color:#fca5a5;margin:2px 0;}
.hier-warning{color:#fcd34d;margin:2px 0;}
.bound-io-banner{position:fixed;top:52px;right:12px;max-width:520px;background:#0b0f17;
  border:1px solid #a78bfa66;border-radius:8px;z-index:900;padding:6px 10px;font-size:12px;
  color:#c4b5fd;box-shadow:0 4px 16px #000a;}