/* ui/builder/builder.css — Mission Builder overlay (GODMODE → BUILDER) + Spawn Manager.
 * Same mission-control console language as the Mission Builder Artifact
 * (tools/mission-builder/mission-builder.html) and the Test Range picker: #0a0f1a base,
 * amber #f2c350 primary accent, cyan #33ddff data accent, red #ff5533 danger, ui-monospace
 * labels with wide letter-spacing. Reuses fx.css vocabulary (fx-panel/fx-corners) where the
 * chrome fits. Prefixes: .bld-* (builder + map editor), .sm-* (spawn manager). */

/* ── Shared tokens ─────────────────────────────────────────────────────────── */
.bld-overlay, .sm-overlay {
  --bld-bg: #0a0f1a;
  --bld-panel: #101827;
  --bld-panel2: #0c1320;
  --bld-line: #223148;
  --bld-line-hi: #33455f;
  --bld-ink: #e8edf7;
  --bld-dim: #7b8aa5;
  --bld-faint: #4a5a75;
  --bld-amber: #f2c350;
  --bld-cyan: #33ddff;
  --bld-red: #ff5533;
  --bld-green: #57d98b;
  --bld-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

/* ── Overlay root ──────────────────────────────────────────────────────────── */
.bld-overlay {
  position: fixed; inset: 0; z-index: 1300;
  background: var(--bld-bg);
  color: var(--bld-ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.bld-overlay.bld-open { pointer-events: auto; }
.bld-overlay * { box-sizing: border-box; }

.bld-lbl {
  font-family: var(--bld-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bld-dim);
}
.bld-faint { color: var(--bld-faint); }
.bld-hint {
  font-family: var(--bld-mono); font-size: 9px; letter-spacing: 0.05em;
  color: var(--bld-faint); line-height: 1.6;
}
.bld-hint.bld-warn { color: var(--bld-amber); }
.bld-spacer { flex: 1; }

/* Header bar (landing + editor share the shape) */
.bld-head {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px; flex: 0 0 auto;
  border-bottom: 1px solid var(--bld-line);
  background: var(--bld-panel2);
}
.bld-brand { font-family: var(--bld-mono); font-size: 12px; letter-spacing: 0.22em; white-space: nowrap; }
.bld-brand b { color: var(--bld-amber); font-weight: 400; }

.bld-hbtn {
  font-family: var(--bld-mono); font-size: 10.5px; letter-spacing: 0.14em; cursor: pointer;
  padding: 7px 12px;
  color: var(--bld-ink); background: var(--bld-panel); border: 1px solid var(--bld-line-hi);
}
.bld-hbtn:hover { border-color: var(--bld-amber); }
.bld-hbtn.bld-primary { color: #081018; background: var(--bld-amber); border-color: var(--bld-amber); }
.bld-hbtn.bld-danger { color: var(--bld-red); }
.bld-hbtn.bld-focused, .bld-tile.bld-focused { outline: 1px solid var(--bld-amber); outline-offset: 1px; }
.bld-mini {
  font-family: var(--bld-mono); font-size: 12px; cursor: pointer; padding: 4px 8px;
  color: var(--bld-ink); background: var(--bld-panel2); border: 1px solid var(--bld-line-hi);
}
.bld-mini:hover { border-color: var(--bld-amber); }

.bld-toast {
  font-family: var(--bld-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--bld-green); opacity: 0; transition: opacity 180ms;
}
.bld-toast.bld-toast-on { opacity: 1; }
.bld-toast.bld-toast-err { color: var(--bld-red); }
.bld-paddot { width: 8px; height: 8px; border-radius: 50%; background: var(--bld-faint); flex: 0 0 auto; }
.bld-paddot.bld-paddot-on { background: var(--bld-green); box-shadow: 0 0 6px var(--bld-green); }

/* ── Landing — tiles + drawer ──────────────────────────────────────────────── */
.bld-landing { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bld-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 22px 22px 8px; flex: 0 0 auto;
}
.bld-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 26px 22px; cursor: pointer; text-align: left;
  color: var(--bld-ink); background: var(--bld-panel);
  border: 1px solid var(--bld-line-hi);
  transition: border-color 120ms, background 120ms;
}
.bld-tile:hover { border-color: var(--bld-amber); background: rgba(242, 195, 80, 0.05); }
.bld-tile-label {
  font-family: var(--bld-mono); font-size: 17px; letter-spacing: 0.18em; color: var(--bld-amber);
}
.bld-tile-sub {
  font-family: var(--bld-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bld-dim);
}

.bld-drawer {
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 8px 22px 22px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bld-panel2); border: 1px solid var(--bld-line);
}
.bld-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--bld-line); }
.bld-drawer-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bld-panel); border: 1px solid var(--bld-line);
}
.bld-drawer-row:hover { border-color: var(--bld-line-hi); }
.bld-drawer-name {
  flex: 1; font-family: var(--bld-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--bld-cyan);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bld-drawer-meta { font-family: var(--bld-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--bld-faint); white-space: nowrap; }

/* ── Editor layout ─────────────────────────────────────────────────────────── */
.bld-editor { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bld-name {
  font-family: var(--bld-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--bld-cyan);
  background: none; border: 0; border-bottom: 1px dashed var(--bld-line-hi);
  padding: 4px 2px; width: 200px;
}
.bld-name:focus { outline: none; border-bottom-color: var(--bld-cyan); }

.bld-main {
  display: grid; grid-template-columns: 208px 1fr 300px;
  flex: 1; min-height: 0;
}
.bld-aside, .bld-inspector {
  background: var(--bld-panel); overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.bld-aside { border-right: 1px solid var(--bld-line); }
.bld-inspector { border-left: 1px solid var(--bld-line); }
/* Editor controls docked at the top of the right column (moved off the left palette
 * column so the editor fits one screen); the dynamic selection view sits below. */
.bld-ctrls, .bld-inspector-body { display: flex; flex-direction: column; gap: 14px; }
.bld-ctrls { padding-bottom: 14px; border-bottom: 1px solid var(--bld-line); }
.bld-sect { display: flex; flex-direction: column; gap: 6px; }
.bld-sect > .bld-lbl { padding-bottom: 2px; border-bottom: 1px solid var(--bld-line); }

/* Palette */
.bld-pal { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bld-palbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: grab;
  padding: 7px 4px;
  background: var(--bld-panel2); border: 1px solid var(--bld-line); user-select: none;
}
.bld-palbtn:hover { border-color: var(--bld-line-hi); }
.bld-palbtn.bld-armed { border-color: var(--bld-amber); background: rgba(242, 195, 80, 0.08); }
.bld-palbtn .bld-glyph { font-size: 15px; line-height: 1; }
.bld-palbtn .bld-palt {
  font-family: var(--bld-mono); font-size: 8.5px; letter-spacing: 0.08em;
  color: var(--bld-dim); text-transform: uppercase; text-align: center;
}

/* Stepper rows (working floor / floor height) */
.bld-steprow { display: grid; grid-template-columns: 28px 1fr 28px; gap: 5px; align-items: stretch; }
.bld-stepval {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--bld-mono); font-size: 11px; color: var(--bld-amber);
  border: 1px solid var(--bld-line); background: var(--bld-panel2);
  font-variant-numeric: tabular-nums;
}
.bld-radios { display: flex; gap: 4px; }
.bld-radios button {
  flex: 1; font-family: var(--bld-mono); font-size: 9px; letter-spacing: 0.08em;
  padding: 5px 2px; cursor: pointer;
  color: var(--bld-dim); background: var(--bld-panel2); border: 1px solid var(--bld-line);
}
.bld-radios button.bld-on { color: var(--bld-amber); border-color: var(--bld-amber); }

/* Canvas */
.bld-cwrap { position: relative; background: var(--bld-bg); min-height: 0; min-width: 0; }
.bld-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.bld-cvhud { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.bld-cvhud button {
  font-family: var(--bld-mono); font-size: 12px; width: 28px; height: 28px; cursor: pointer;
  color: var(--bld-ink); background: rgba(16, 24, 39, 0.85); border: 1px solid var(--bld-line-hi);
}
.bld-cvhud button:hover { border-color: var(--bld-amber); }
.bld-coords {
  position: absolute; left: 10px; top: 10px; pointer-events: none;
  font-family: var(--bld-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--bld-faint);
}
.bld-help {
  position: absolute; left: 10px; bottom: 10px; pointer-events: none;
  font-family: var(--bld-mono); font-size: 9.5px; line-height: 1.7; letter-spacing: 0.06em;
  color: var(--bld-faint);
  background: rgba(10, 15, 26, 0.8); border: 1px solid var(--bld-line); padding: 6px 9px;
}
.bld-help b { color: var(--bld-dim); font-weight: 400; }

/* Inspector fields */
.bld-fields { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.bld-field { display: flex; align-items: center; gap: 5px; }
.bld-field .bld-field-lbl {
  font-family: var(--bld-mono); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bld-dim);
}
.bld-field input, .bld-field select {
  width: 56px; padding: 3px 4px; font-family: var(--bld-mono); font-size: 11px; text-align: right;
  color: var(--bld-ink); background: var(--bld-panel2); border: 1px solid var(--bld-line);
  font-variant-numeric: tabular-nums;
}
.bld-field input.bld-wide { width: 100%; text-align: left; }
.bld-field.bld-grow { flex: 1 1 100%; }
.bld-field.bld-stepped input { width: 40px; }
.bld-field.bld-stepped .bld-mini { padding: 2px 5px; font-size: 11px; }
.bld-overlay input:focus, .bld-overlay select:focus, .bld-overlay textarea:focus,
.bld-overlay button:focus-visible { outline: 1px solid var(--bld-amber); }
.bld-notes {
  font-family: var(--bld-mono); font-size: 10.5px; color: var(--bld-ink); line-height: 1.5;
  background: var(--bld-panel2); border: 1px solid var(--bld-line);
  padding: 6px; resize: vertical; min-height: 56px;
}
.bld-btnrow { display: flex; flex-wrap: wrap; gap: 5px; }

/* Palette info card — fixed, hover/focus only */
.bld-palcard {
  position: fixed; z-index: 1360; width: 230px; pointer-events: none;
  background: var(--bld-panel); border: 1px solid var(--bld-amber); padding: 10px;
  display: none; flex-direction: column; gap: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.bld-palcard.bld-pc-show { display: flex; }
.bld-palcard .bld-pc-head {
  font-family: var(--bld-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--bld-ink); text-transform: uppercase;
}
.bld-palcard .bld-pc-desc { font-size: 11px; line-height: 1.45; color: var(--bld-dim); }
.bld-palcard img { width: 100%; display: block; border: 1px solid var(--bld-line); }
.bld-palcard .bld-pc-pending {
  font-family: var(--bld-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--bld-faint);
  border: 1px dashed var(--bld-line-hi); padding: 18px 6px; text-align: center;
}

/* IO overlay (export/import) — shared shape with the Artifact's #ioOverlay */
.bld-io-overlay, .sm-io-overlay {
  position: fixed; inset: 0; z-index: 1380;
  display: none; align-items: center; justify-content: center;
  background: rgba(5, 8, 14, 0.8);
}
.bld-io-overlay.bld-io-open, .sm-io-overlay.sm-io-open { display: flex; }
.bld-io-box, .sm-io-box {
  width: min(640px, 92vw); max-height: 84vh;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bld-panel, #101827); border: 1px solid var(--bld-amber, #f2c350); padding: 16px;
}
.bld-io-text, .sm-io-text {
  flex: 1; min-height: 260px; white-space: pre;
  font-family: var(--bld-mono, monospace); font-size: 10.5px; line-height: 1.5;
  color: var(--bld-ink, #e8edf7); background: var(--bld-panel2, #0c1320);
  border: 1px solid var(--bld-line, #223148); padding: 6px; resize: vertical;
}

/* ── Spawn Manager ─────────────────────────────────────────────────────────── */
.sm-overlay {
  position: fixed; inset: 0; z-index: 1340;
  display: none; align-items: stretch; justify-content: stretch;
  background: var(--bld-bg, #0a0f1a);
  color: var(--bld-ink, #e8edf7);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  pointer-events: none;
}
.sm-overlay.sm-open { display: flex; pointer-events: auto; }
.sm-overlay * { box-sizing: border-box; }

.sm-frame {
  flex: 1 1 auto; display: grid; grid-template-rows: auto 1fr auto;
  margin: 14px; padding: 14px 18px; gap: 12px; min-height: 0;
  position: relative;
}
.sm-lbl {
  font-family: var(--bld-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bld-dim);
}
.sm-head { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--bld-line); }
.sm-title {
  margin: 0; font-family: var(--bld-mono); font-size: 15px; letter-spacing: 0.2em; color: var(--bld-amber);
  font-weight: 400;
}
.sm-tabs { display: flex; gap: 6px; }
.sm-tab {
  font-family: var(--bld-mono); font-size: 10.5px; letter-spacing: 0.14em; cursor: pointer;
  padding: 7px 14px;
  color: var(--bld-dim); background: var(--bld-panel2); border: 1px solid var(--bld-line);
}
.sm-tab.sm-tab-on { color: var(--bld-amber); border-color: var(--bld-amber); background: rgba(242, 195, 80, 0.08); }
.sm-back-btn { margin-left: auto; }

.sm-btn {
  font-family: var(--bld-mono); font-size: 10.5px; letter-spacing: 0.14em; cursor: pointer;
  padding: 7px 12px;
  color: var(--bld-ink); background: var(--bld-panel); border: 1px solid var(--bld-line-hi);
}
.sm-btn:hover { border-color: var(--bld-amber); }
.sm-btn-primary { color: #081018; background: var(--bld-amber); border-color: var(--bld-amber); }
.sm-btn-danger { color: var(--bld-red); }
.sm-btn-danger.sm-clear-armed { background: rgba(255, 85, 51, 0.15); border-color: var(--bld-red); }
.sm-mini {
  font-family: var(--bld-mono); font-size: 12px; cursor: pointer; padding: 3px 8px;
  color: var(--bld-ink); background: var(--bld-panel2); border: 1px solid var(--bld-line-hi);
}
.sm-mini:hover { border-color: var(--bld-amber); }
.sm-mini-danger { color: var(--bld-red); }

.sm-body {
  display: grid; grid-template-columns: 240px 1fr 240px; gap: 14px; min-height: 0;
}
.sm-picker, .sm-editor, .sm-side {
  overflow-y: auto; min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bld-panel2); border: 1px solid var(--bld-line); padding: 10px;
}
/* Editor column: map pane docked above the form editor (mission-ai-roles-spec §3 WS-D). */
.sm-editor-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.sm-editor-col .sm-editor { flex: 1 1 auto; }
.sm-picker-hdr {
  font-family: var(--bld-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bld-faint);
  padding-bottom: 4px; border-bottom: 1px solid var(--bld-line);
}
.sm-picker-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
  font-family: var(--bld-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--bld-ink); background: var(--bld-panel); border: 1px solid var(--bld-line);
  padding: 8px 10px;
}
.sm-picker-row:hover { border-color: var(--bld-line-hi); }
.sm-picker-row.sm-picker-on { border-color: var(--bld-amber); color: var(--bld-amber); background: rgba(242, 195, 80, 0.06); }
.sm-picker-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-edited {
  font-family: var(--bld-mono); font-size: 8.5px; letter-spacing: 0.14em;
  color: var(--bld-cyan); border: 1px solid rgba(51, 221, 255, 0.5); padding: 1px 5px;
  flex: 0 0 auto;
}

/* Eligible-cluster indicator (enemy-formations-spec §9.7) — "does this beat
   build a tower?". Amber = yes, dim = under MIN_CLUSTER and staying vanilla. */
.sm-tower {
  font-family: var(--bld-mono); font-size: 8.5px; letter-spacing: 0.14em;
  color: var(--bld-amber); border: 1px solid rgba(242, 195, 80, 0.55);
  background: rgba(242, 195, 80, 0.08); padding: 1px 5px; flex: 0 0 auto;
  cursor: help;
}
.sm-tower.sm-tower-off {
  color: var(--bld-dim); border-color: var(--bld-line); background: none;
}

.sm-editor-hdr { padding-bottom: 4px; border-bottom: 1px solid var(--bld-line); }
.sm-desc { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--bld-dim); }
.sm-beat-list { display: flex; flex-direction: column; gap: 6px; }
.sm-beat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 7px 8px;
  background: var(--bld-panel); border: 1px solid var(--bld-line);
}
.sm-field { display: flex; align-items: center; gap: 4px; }
.sm-field-lbl {
  font-family: var(--bld-mono); font-size: 8.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bld-faint);
}
.sm-field input, .sm-field select {
  width: 52px; padding: 3px 4px; font-family: var(--bld-mono); font-size: 11px; text-align: right;
  color: var(--bld-ink); background: var(--bld-panel2); border: 1px solid var(--bld-line);
  font-variant-numeric: tabular-nums;
}
.sm-field select { width: auto; text-align: left; }
.sm-field.sm-field-text input { width: 130px; text-align: left; }
.sm-overlay input:focus, .sm-overlay select:focus, .sm-overlay textarea:focus,
.sm-overlay button:focus-visible { outline: 1px solid var(--bld-amber); }

.sm-phase {
  display: flex; flex-direction: column; gap: 7px;
  padding: 9px 10px;
  background: var(--bld-panel); border: 1px solid var(--bld-line);
}
.sm-phase-hdr { display: flex; align-items: baseline; gap: 8px; }
.sm-phase-type {
  font-family: var(--bld-mono); font-size: 9px; letter-spacing: 0.16em;
  color: var(--bld-amber); border: 1px solid rgba(242, 195, 80, 0.4); padding: 1px 6px;
}
.sm-phase-name { font-family: var(--bld-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bld-cyan); }
.sm-sub-hdr {
  font-family: var(--bld-mono); font-size: 8.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bld-faint);
}
.sm-fields { display: flex; flex-wrap: wrap; gap: 5px 12px; }
.sm-readonly { font-family: var(--bld-mono); font-size: 9.5px; color: var(--bld-faint); letter-spacing: 0.05em; }
.sm-btnrow { display: flex; flex-wrap: wrap; gap: 6px; }

.sm-notes {
  font-family: var(--bld-mono); font-size: 10.5px; color: var(--bld-ink); line-height: 1.5;
  background: var(--bld-panel); border: 1px solid var(--bld-line);
  padding: 6px; resize: vertical; min-height: 90px;
}
.sm-clear-btn { margin-top: auto; }

.sm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 6px; border-top: 1px solid var(--bld-line);
}
.sm-hint { font-family: var(--bld-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--bld-faint); }
.sm-toast {
  font-family: var(--bld-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--bld-green); opacity: 0; transition: opacity 180ms;
}
.sm-toast.sm-toast-on { opacity: 1; }

/* ── Spawn Map pane (ui/builder/spawn-map.js) — docked above the editor column ────────── */
.sm-map {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bld-panel2); border: 1px solid var(--bld-line);
  padding: 8px; flex: 0 0 auto;
}
.sm-map-head { display: flex; align-items: center; gap: 8px; }
.sm-map-title {
  font-family: var(--bld-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bld-faint); flex: 1;
}
.sm-map-collapse { margin-left: auto; }
.sm-map-canvas-wrap {
  width: 100%; height: 220px; min-height: 0;
  background: var(--bld-panel); border: 1px solid var(--bld-line);
}
.sm-map.sm-map-collapsed .sm-map-canvas-wrap,
.sm-map.sm-map-collapsed .sm-map-legend { display: none; }
/* Reset the global `canvas { position:fixed; inset:0; z-index:0 }` rule (styles.css) — without
   this the map canvas fills the viewport and paints over the whole Spawn Manager. */
.sm-map-canvas {
  position: relative; inset: auto; z-index: auto;
  width: 100%; height: 100%; display: block; cursor: crosshair;
}
.sm-map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sm-map-legend-item {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--bld-mono); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bld-dim);
}
.sm-map-legend-swatch { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

/* ── Shared tooltip — every field label + map marker gets data-tip (spec §3 WS-D item 2) ── */
.sm-tip {
  position: fixed; z-index: 1500; max-width: 260px;
  font-family: var(--bld-mono); font-size: 10px; line-height: 1.5; letter-spacing: 0.02em;
  color: var(--bld-ink); background: var(--bld-panel2); border: 1px solid var(--bld-amber);
  padding: 6px 9px; pointer-events: none;
  opacity: 0; transform: translateY(2px); transition: opacity 120ms, transform 120ms;
}
.sm-tip.sm-tip-on { opacity: 1; transform: translateY(0); }
[data-tip] { cursor: help; }

/* ── Narrow viewports — collapse the 3-column grids ────────────────────────── */
@media (max-width: 900px) {
  .bld-main { grid-template-columns: 170px 1fr; grid-template-rows: 1fr auto; }
  .bld-inspector { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--bld-line); max-height: 34vh; }
  .bld-tiles { grid-template-columns: 1fr; }
  .sm-body { grid-template-columns: 200px 1fr; }
  .sm-side { grid-column: 1 / -1; max-height: 30vh; }
}

/* ── Run chip — collapsible in-run dev panel for blockout playtests (builder.js). ──
   Lives outside .bld-overlay (shown while the overlay is hidden during a run), so it
   carries its own palette values rather than the overlay-scoped vars. */
.bld-runchip {
  position: fixed; top: 52px; right: 12px; z-index: 60;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  background: rgba(16, 24, 39, 0.92); border: 1px solid #33455f;
  min-width: 0; color: #e8edf7; font-size: 11px; letter-spacing: 1px;
}
.bld-runchip-head {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: #f2c350; font: inherit;
  padding: 6px 10px; letter-spacing: 2px;
}
.bld-runchip-body { padding: 0 10px 8px; display: flex; flex-direction: column; gap: 6px; }
.bld-runchip.bld-collapsed .bld-runchip-body { display: none; }
.bld-runchip-note { color: #7b8aa5; }
.bld-runchip-btn {
  cursor: pointer; font: inherit; color: #0a0f1a; background: #f2c350;
  border: 0; padding: 6px 10px; font-weight: 700; letter-spacing: 1px;
}
.bld-runchip-btn:hover { filter: brightness(1.1); }