/* simulation-builder.css — shared Builder + Playback styling.
 * Scoped under .mw-play (playback panel) and .mw-build (builder dock) plus
 * .mw-canvas-overlay (tool surface). Must never affect the simulation scene.
 */

/* ---------- Playback panel (compact, draggable, viewport-constrained) --- */
.mw-play{
  position:fixed;right:12px;bottom:12px;z-index:2147483000;width:380px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);overflow:auto;background:#0e1620;color:#e8eef4;
  border:1px solid #2a3a4a;border-radius:10px;font:12px/1.45 -apple-system,"Segoe UI",sans-serif;
  box-shadow:0 12px 40px rgba(0,0,0,.45);display:none;padding:10px 12px;
}
.mw-play.is-visible{display:block}
.mw-play__head{display:flex;align-items:center;gap:8px;cursor:move;user-select:none}
.mw-play__head strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-play__head [data-interaction-label]{color:#8fd0a0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-play__head button{margin-left:auto}
.mw-play button{background:#1b2836;color:#e8eef4;border:1px solid #33475c;border-radius:6px;
  font-size:11px;padding:3px 8px;cursor:pointer}
.mw-play button.is-active{background:#2f6fed;border-color:#2f6fed}
.mw-play [data-time]{color:#9fb2c5;margin:4px 0}
.mw-play [data-scrub]{width:100%;accent-color:#2f6fed;touch-action:none}
.mw-play .mw-controls{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.mw-play pre{background:#0a1119;border:1px solid #22303f;border-radius:6px;padding:6px 8px;
  white-space:pre-wrap;word-break:break-word;font:10.5px/1.5 ui-monospace,Menlo,monospace;
  color:#c9d6e2;max-height:220px;overflow:auto}
.mw-play .mw-sec{border-top:1px solid #22303f;margin-top:6px}
.mw-play .mw-sec h4{margin:6px 0 2px;font-size:11px;cursor:pointer;color:#9fc0e8}
.mw-play .mw-sec h4::before{content:'▾ '}
.mw-play .mw-sec.is-collapsed h4::before{content:'▸ '}
.mw-play .mw-sec.is-collapsed .mw-body{display:none}
.mw-play label{display:flex;align-items:center;gap:6px;margin:4px 0;color:#9fb2c5}
.mw-play select,.mw-play input[type=number]{background:#0a1119;color:#e8eef4;border:1px solid #33475c;border-radius:6px;font-size:11px}
.mw-camera-options{border:1px solid #2f6fed;border-radius:8px;background:#101b29;padding:7px 8px;margin:7px 0}
.mw-camera-head{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.mw-camera-head strong{color:#d8e8ff;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.mw-camera-head span{color:#8fa8c0;font-size:10px}
.mw-camera-fields{display:grid;grid-template-columns:88px 1fr;gap:4px 7px;align-items:center}
.mw-camera-fields>label{display:contents}
.mw-camera-fields>label>span{font-size:10.5px;color:#b7caDC}
.mw-camera-row{display:flex;gap:5px;align-items:center;min-width:0}
.mw-camera-row input[type=number]{width:64px;padding:2px 4px}
.mw-camera-row input[type=range]{flex:1;min-width:70px;accent-color:#2f6fed}
.mw-camera-row button{padding:2px 6px}
.mw-camera-compare{font:10px/1.45 ui-monospace,Menlo,monospace;color:#9fb2c5;margin-top:5px;overflow-wrap:anywhere}
.mw-advanced{border-top:1px solid #22303f;margin-top:7px}
.mw-advanced>summary{cursor:pointer;color:#9fc0e8;font-size:11px;padding:6px 0;user-select:none}
.mw-advanced:not([open])>:not(summary){display:none}
.mw-advanced__body{padding-bottom:2px}

/* ---------- Builder dock (bottom dock, collapsible, canvas clear) ------- */
/* Spliced 2026-09-05: per-panel collapse + 1a layout (design handoff).
 * Playback panel + canvas overlay rules above/below are unchanged.
 * Every JS-consumed hook keeps its name and meaning. */
.mw-build{
  position:fixed;left:0;right:0;bottom:0;z-index:2147483000;background:#101820;color:#e8eef4;
  border-top:2px solid #2f6fed;font:12px/1.45 -apple-system,"Segoe UI",sans-serif;
  max-height:62vh;display:flex;flex-direction:column;
}
.mw-build.is-collapsed .mw-build__cols,
.mw-build.is-collapsed .mw-transport,
.mw-build.is-collapsed [data-bscrub],
.mw-build.is-collapsed .mw-errors,
.mw-build.is-collapsed .mw-note{display:none}
.mw-build:empty{display:none}
.mw-build__timeline{padding:6px 12px 8px;overflow:auto;display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%;box-sizing:border-box}
/* Row 1: canvas tools left, "Editing x · y" context, view toggles right. */
.mw-build__row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0;min-width:0;max-width:100%}
.mw-tools,.mw-io{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0;max-width:100%}
.mw-tools--view{margin-left:auto;gap:8px}
/* Logical clusters inside row 1: Viewport (Guide/Safe frame) vs Dock. */
.mw-viewgroup{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-width:0;
  border:1px solid #22303f;border-radius:6px;padding:3px 6px;background:#0a1119}
.mw-grouplabel{font-size:9.5px;color:#8fa8c0;text-transform:uppercase;letter-spacing:.06em;
  margin-right:2px;white-space:nowrap}
.mw-editing{color:#8fa8c0;font-size:11px}
.mw-editing b{color:#e8eef4}
/* Transport strip: jumps + play as one segmented group, clock, speeds,
 * undo/redo, save-state pushed to the far edge. */
.mw-transport{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;background:#0a1119;
  border:1px solid #22303f;border-radius:6px;padding:5px 8px;min-width:0;max-width:100%;box-sizing:border-box}
.mw-transport button{white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mw-seg{display:flex;gap:2px;flex-wrap:wrap;min-width:0;max-width:100%;align-items:center}
/* Step navigation: the wide cluster that used to clip "Next Step" outside
 * the card. It grows, wraps internally, and its members shrink instead of
 * pushing siblings past the container boundary. */
.mw-stepsnav{flex:1 1 240px}
.mw-stepsnav select{flex:1 1 120px;min-width:0;max-width:220px}
.mw-stepsnav button{flex:0 1 auto}
.mw-history{flex:0 1 auto}
.mw-seg button{border-radius:0}
.mw-seg button:first-child{border-radius:6px 0 0 6px}
.mw-seg button:last-child{border-radius:0 6px 6px 0}
.mw-transport [data-bplay]{background:#2f6fed;border-color:#2f6fed;color:#fff;font-weight:600;padding:3px 12px}
.mw-transport [data-btime]{font:600 13px/1 ui-monospace,Menlo,monospace;min-width:118px;text-align:center}
.mw-transport [data-btime] i{font-style:normal;font-weight:400;color:#8fa8c0}
.mw-transport [data-savestate]{margin-left:auto;font:10.5px ui-monospace,Menlo,monospace;color:#8fa8c0}
.mw-validation{font:600 10.5px ui-monospace,Menlo,monospace}
.mw-validation.is-ok{color:#8fd0a0}
.mw-validation.is-bad{color:#ff9d9d}
.mw-transport .mw-vr{width:1px;height:18px;background:#22303f;flex:0 0 auto;align-self:center}
.mw-build button{background:#1b2836;color:#e8eef4;border:1px solid #33475c;border-radius:6px;
  font-size:11px;padding:3px 8px;cursor:pointer;text-transform:capitalize}
.mw-build button:disabled{opacity:.4;cursor:default}
.mw-build button.is-active{background:#2f6fed;border-color:#2f6fed}
.mw-build button.mw-primary{font-weight:600}
.mw-build button.mw-danger{color:#ff9d9d;border-color:#5a2a2a;margin-left:auto}
.mw-build [data-bscrub]{width:100%;accent-color:#2f6fed;touch-action:none;margin:0}
/* Columns: Snapshots (library) | Steps (timeline) | Status stack. */
.mw-build__cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;overflow:auto;align-items:start}
.mw-col{min-width:0;display:flex;flex-direction:column}

/* ---------- Per-panel collapse (mirrors the debug-panel .mw-sec pattern) --
 * <div class="mw-panel" data-panel="snapshots"><h4 data-collapse>…</h4>
 *   <div class="mw-body">…</div></div>
 * is-collapsed hides .mw-body only; header (with summary) stays visible. */
.mw-panel{min-width:0}
.mw-build h4{display:flex;align-items:center;gap:6px;margin:0;padding:6px 0 4px;font-size:11px;
  color:#9fc0e8;text-transform:uppercase;letter-spacing:.06em;border-top:1px solid #22303f}
.mw-build h4[data-collapse]{cursor:pointer;user-select:none}
.mw-build h4[data-collapse]::before{content:'▾';width:10px;color:#8fa8c0}
.mw-panel.is-collapsed h4[data-collapse]::before{content:'▸'}
.mw-panel.is-collapsed .mw-body{display:none}
.mw-panel__sum{margin-left:auto;font-size:10px;color:#8fa8c0;text-transform:none;letter-spacing:0;font-weight:400}
.mw-panel__sum.is-ok{color:#8fd0a0}
.mw-panel__sum.is-bad{color:#ff9d9d}
.mw-body{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}
/* Lists + rows: unchanged semantics. */
.mw-build .mw-list{max-height:150px;overflow:auto;border:1px solid #22303f;border-radius:6px}
.mw-clip,.mw-frame,.mw-marker{display:flex;gap:6px;align-items:baseline;padding:3px 8px;cursor:pointer;border-bottom:1px solid #1a2430;min-width:0}
.mw-clip.is-active{background:#1d2f45;box-shadow:inset 3px 0 0 #2f6fed}
.mw-frame.is-time{background:#1d2f45;box-shadow:inset 3px 0 0 #8fd0a0}
.mw-clip.is-sel,.mw-frame.is-sel,.mw-marker.is-sel{outline:1px solid #2f6fed;outline-offset:-1px}
.mw-clip.is-sel .mw-clip-label,.mw-frame.is-sel .mw-frame-name{font-weight:600}
.mw-frame.is-hidden{display:none}
.mw-clip.is-used{box-shadow:inset 3px 0 0 #ffd98a}
.mw-clip.is-used.is-active{box-shadow:inset 3px 0 0 #2f6fed,inset 6px 0 0 #ffd98a}
.mw-clip-kind{color:#8fa8c0;font-size:10px;min-width:38px}
.mw-clip-id{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:10.5px}
.mw-clip-label{flex:1;color:#8fa8c0;font-size:10px;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-clip.is-sel .mw-clip-id{font-weight:600}
/* Semantic step controls: selector + Previous/Next/Start/End in one segment,
 * boundary readout line in the step editor, live step line in debug. */
.mw-steps{align-items:center}
.mw-steps select{max-width:220px}
.mw-stepread{font:10.5px ui-monospace,Menlo,monospace;color:#9fb2c5;margin:2px 0 6px;overflow-wrap:anywhere}
.mw-bounds{font:10.5px ui-monospace,Menlo,monospace;color:#8fa8c0;overflow-wrap:anywhere}
.mw-clip-time,.mw-frame-use{color:#8fa8c0;font-size:10px;font-family:ui-monospace,Menlo,monospace}
.mw-frame-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-frame{flex-wrap:wrap}
.mw-frame-intent{flex:1 1 100%;min-width:0;color:#8fa8c0;font-size:10px;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-frame-cam{color:#8fa8c0;font-size:10px;font-family:ui-monospace,Menlo,monospace}
.mw-rowbtns{display:flex;flex-wrap:wrap;gap:4px;margin:0}
.mw-rowbtns .mw-push{margin-left:auto}

/* Editors: framed box, "Editing <name>" head, cue, then label | control rows.
 * Number + slider for one channel share a row (same inputs, same hooks). */
.mw-clipedit,.mw-frameedit{border:1px solid #22303f;border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.mw-editor__head{display:flex;align-items:baseline;gap:8px;font-size:11px}
.mw-editor__head span{color:#8fa8c0}
.mw-editor__head .mw-anchorrow{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-atplayhead{margin-left:auto;font:10.5px ui-monospace,Menlo,monospace;color:#8fa8c0;background:none;border:0;padding:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-fields{display:grid;grid-template-columns:72px 1fr;gap:3px 8px;align-items:center}
.mw-build label{display:contents;font-size:10px;color:#9fb2c5}
.mw-build label>span{font-size:10px;color:#9fb2c5}
.mw-camrow{display:flex;gap:6px;align-items:center;min-width:0}
.mw-camrow input[type=number]{width:64px}
.mw-camrow input[type=range]{flex:1}
.mw-build select,.mw-build input{background:#0a1119;color:#e8eef4;border:1px solid #33475c;border-radius:6px;font-size:11px;padding:2px 4px;max-width:100%;min-width:0}
.mw-build input[type=range]{width:100%;max-width:100%;accent-color:#2f6fed;padding:2px 0;border:0;background:none}
.mw-adv{grid-column:1/-1;min-width:0}
.mw-adv summary{cursor:pointer;color:#9fc0e8;font-size:10.5px;margin:2px 0}
.mw-adv .mw-fields{margin-top:4px}
.mw-builder-advanced{grid-column:1/-1;border:1px solid #22303f;border-radius:6px;padding:0 8px;margin-top:0}
.mw-builder-advanced>summary{text-transform:uppercase;letter-spacing:.05em}
.mw-advanced-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}
.mw-meta{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;min-width:0}
.mw-meta label{display:flex;flex-direction:column}

/* Amber cues: one voice. Same three nodes, louder: amber left bar, warm
 * field, action button filled amber and right-aligned. Never hidden. */
.mw-diverge,.mw-offhead,.mw-impact{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#ffd98a;
  background:#161307;border:1px solid #6b5518;border-left:3px solid #ffd98a;border-radius:6px;padding:4px 8px;margin:0}
.mw-diverge>span,.mw-offhead>span,.mw-impact>span{flex:1;white-space:pre-wrap;word-break:break-word}
.mw-diverge[hidden],.mw-offhead[hidden]{display:none}
.mw-diverge button[data-edit-active],.mw-offhead button[data-show-me]{background:#ffd98a;color:#161307;border-color:#ffd98a;font-weight:600;white-space:nowrap;padding:2px 8px}
/* Frame-preview chip: same cue row shape in a cool tone — an active mode,
 * not a warning. Names the previewed snapshot and the parked playhead. */
.mw-framereview{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#bcd7ff;
  background:#0e1a2e;border:1px solid #2c4d80;border-left:3px solid #7fb3ff;border-radius:6px;padding:4px 8px;margin:0}
.mw-framereview>span{flex:1;white-space:pre-wrap;word-break:break-word}
.mw-framereview[hidden]{display:none}
.mw-framereview button[data-preview-exit]{background:#7fb3ff;color:#0e1a2e;border-color:#7fb3ff;font-weight:600;white-space:nowrap;padding:2px 8px}
/* F1 live-resolve notice + F3 staleness badge. livenote is informational
 * (quiet); stale joins the amber warning family with its re-sync action. */
.mw-livenote{font-size:10.5px;color:#9fb3c8;background:#10161d;border:1px solid #2a3644;border-radius:6px;padding:4px 8px;margin:0 0 6px}
.mw-stale{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#ffd98a;
  background:#161307;border:1px solid #6b5518;border-left:3px solid #ffd98a;border-radius:6px;padding:4px 8px;margin:6px 0 0}
.mw-stale>span{flex:1;white-space:pre-wrap;word-break:break-word}
.mw-stale[hidden]{display:none}
.mw-stale button[data-frame-resync]{background:#ffd98a;color:#161307;border-color:#ffd98a;font-weight:600;white-space:nowrap;padding:2px 8px}
.mw-minimap{position:absolute;background:rgba(10,16,24,.85);border:1px solid #2c4d80;border-radius:6px;pointer-events:none;z-index:6;overflow:hidden}
.mw-minimap>span{position:absolute;top:2px;left:5px;font:600 9px/1.5 Inter,sans-serif;color:#bcd7ff;white-space:nowrap;z-index:1}
.mw-minimap-view{position:absolute;border:1.5px solid #7fb3ff;background:rgba(127,179,255,.14)}
.mw-impact button[data-use-jump]{background:transparent;color:#ffd98a;border:1px solid #6b5518;border-radius:4px;font-size:10.5px;padding:0 5px;text-decoration:underline;text-transform:none}

.mw-inspect{white-space:pre-wrap;font:10.5px/1.5 ui-monospace,Menlo,monospace;color:#c9d6e2;
  background:#0a1119;border:1px solid #22303f;border-radius:6px;padding:6px 8px;max-height:170px;overflow:auto}
.mw-guide{font-size:11px;color:#c9d6e2;background:#0a1119;border:1px solid #22303f;border-radius:6px;padding:8px 12px;margin:0;max-height:180px;overflow:auto}
.mw-guide ol{margin:4px 0 0;padding-left:18px}
.mw-guide li{margin:2px 0}
.mw-guide code{font-size:10.5px;color:#9fc0e8}
.mw-errors{color:#ff9d9d;font-size:11px;margin-top:2px}
.mw-note{color:#ffd98a;font-size:11px;margin-top:0}

/* ---------- Side dock (unchanged geometry) ------------------------------ */
.mw-build.is-side{left:auto;top:0;right:0;bottom:0;width:420px;max-width:92vw;max-height:none;border-top:none;border-left:2px solid #2f6fed}
.mw-build.is-side .mw-build__timeline{flex:1;min-height:0;overflow:auto}
.mw-build.is-side .mw-build__cols{grid-template-columns:1fr;overflow:visible}
.mw-build.is-side .mw-list{max-height:220px}
.mw-build.is-side .mw-inspect{max-height:220px}
.mw-build.is-side .mw-transport{white-space:nowrap}
.mw-build.is-side .mw-transport [data-btime]{margin-left:auto;min-width:0}
/* Side: speeds + undo/redo + save state wrap onto a second transport row. */
.mw-build.is-side .mw-transport .mw-seg:nth-of-type(2){flex-basis:auto}
.mw-build.is-side .mw-transport .mw-vr{display:none}
.mw-build.is-side .mw-transport [data-savestate]{overflow:hidden;text-overflow:ellipsis}
.mw-build.is-side .mw-fields{grid-template-columns:52px 1fr}
.mw-build.is-side .mw-camrow input[type=number]{width:56px}

/* ---------- Canvas overlay (tool surface + anchor bounds) --------------- */
.mw-canvas-overlay{position:absolute;inset:0;z-index:50;touch-action:none;cursor:crosshair}
.mw-anchor-box{position:absolute;border:2px solid #2f6fed;background:rgba(47,111,237,.08);pointer-events:none}

/* ---------- Narrow (frozen below 900px, as before) ---------------------- */
@media (max-width:900px){
  .mw-build__cols{grid-template-columns:1fr}
  .mw-advanced-grid{grid-template-columns:1fr}
  .mw-build{max-height:60vh}
  .mw-play{width:calc(100vw - 24px)}
  .mw-build.is-side{left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;max-height:60vh;border-top:2px solid #2f6fed;border-left:none}
  .mw-build.is-side .mw-list{max-height:150px}
  .mw-build.is-side .mw-inspect{max-height:170px}
  .mw-transport [data-savestate]{flex:1 1 100%;margin-left:0}
}
@media (max-width:480px){
  .mw-fields{grid-template-columns:1fr}
  .mw-camera-fields{grid-template-columns:1fr}
  .mw-meta{grid-template-columns:1fr}
  .mw-atplayhead{display:none}
  .mw-tools--view{margin-left:0}
}