/* ═══════════════════════════════════════════════════════════════
   DZE 3D Map Editor
   ---------------------------------------------------------------
   Uses the site's Family-A design tokens (the same names as the
   landing page and sqf-cleaner) so light/dark theming, the accent
   green and the nav all behave exactly as they do on every other
   tool. A handful of editor-only tokens are added on top.

   This page is a fixed-height application shell rather than the
   usual scrolling `main > .card` layout. The site footer is still
   present in the DOM for nav.js, but hidden here - a status bar is
   the right bottom edge for an editor, and its links live in Help.
   The long-form prose that would normally sit at the bottom of a
   tool page lives at /3d-editor/docs/ instead.
═══════════════════════════════════════════════════════════════ */

:root {
  --bg:          #0d0d0d;
  --bg-panel:    #111111;
  --bg-card:     #1c1c1c;
  --bg-card2:    #222222;
  --border:      #2a2a2a;
  --border-hi:   #3e5a28;
  --accent:      #4e8a2e;
  --accent-hi:   #62ae3a;
  --accent-dim:  #2e5018;
  --text:        #d0d0d0;
  --text-muted:  #5e5e5e;
  --text-hi:     #eaeaea;
  --danger:      #c0392b;
  --danger-hi:   #e74c3c;
  --warning:     #d68910;
  --radius:      6px;
  --shadow:      0 2px 12px rgba(0,0,0,.55);
  --font:        'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono:        'Consolas', 'Courier New', monospace;

  /* editor-only */
  --ed-toolbar-h: 42px;
  --ed-status-h:  26px;
  --ed-side-w:    268px;
  --ed-row-h:     26px;
  --ed-hover:     rgba(255,255,255,.05);
}

[data-theme="light"] {
  --bg:          #f5f5f4;
  --bg-panel:    #ececea;
  --bg-card:     #ffffff;
  --bg-card2:    #f0f0ee;
  --border:      #cccccc;
  --border-hi:   #5a9e30;
  --accent:      #3d7020;
  --accent-hi:   #2e5818;
  --accent-dim:  #cce4b0;
  --text:        #222222;
  --text-muted:  #666666;
  --text-hi:     #111111;
  --shadow:      0 2px 12px rgba(0,0,0,.10);
  --ed-hover:    rgba(0,0,0,.045);
}

* { box-sizing: border-box; }

/* The browser's own [hidden] rule is `display: none` from the UA stylesheet,
   which ANY class rule setting `display` will beat on specificity. Several
   elements here are `display: flex` and toggled with the hidden attribute -
   the loading overlay, the empty-scene message, the placement chip - so
   without this reset `el.hidden = true` sets the attribute and changes
   nothing on screen. That is exactly how the editor shipped stuck behind a
   permanently visible "Starting the 3D editor…" spinner.
   Keep this rule above everything that sets `display`. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body.ed-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The site footer is injected by nav.js; an editor uses a status bar. */
body.ed-page > .site-footer { display: none !important; }

/* ── shell ──────────────────────────────────────────────────── */

.ed-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── toolbar ────────────────────────────────────────────────── */

/* The toolbar WRAPS rather than scrolls. It used to be a single scrolling
   row, which silently pushed Export SQF and four other buttons off the
   right-hand edge with no scrollbar hint - the tool looked like it simply
   did not have those features. Wrapping costs a little vertical space on
   narrow screens and hides nothing. */
.ed-toolbar {
  min-height: var(--ed-toolbar-h);
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
}

.ed-tb-group { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.ed-tb-spacer { flex: 1 1 auto; min-width: 8px; }
.ed-tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex: 0 0 auto; }
.ed-tb-brand { gap: 6px; }
.ed-tb-icon { font-size: 16px; filter: drop-shadow(0 0 6px var(--accent)); }


.ed-project-name {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 240px;
  background: var(--bg-card); color: var(--text-hi);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 8px; font: inherit; font-weight: 600; cursor: pointer;
}
.ed-project-name:hover { border-color: var(--border-hi); }
.ed-project-name > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ed-caret { color: var(--text-muted); font-size: 10px; }
.ed-dirty { color: var(--warning); font-size: 10px; line-height: 1; }

.ed-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ed-btn:hover:not(:disabled) { background: var(--bg-card2); border-color: var(--border-hi); color: var(--text-hi); }
.ed-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 1px; }
.ed-btn:disabled { opacity: .38; cursor: default; }
.ed-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ed-btn-primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }
.ed-btn-danger { background: transparent; border-color: var(--danger); color: var(--danger-hi); }
.ed-btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.ed-btn-sm { padding: 3px 7px; font-size: 11px; }
.ed-toggle.is-on { background: var(--accent-dim); border-color: var(--border-hi); color: var(--accent-hi); }
[data-theme="light"] .ed-toggle.is-on { color: var(--accent-hi); }

.ed-field { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.ed-select, .ed-input {
  background: var(--bg-card2); color: var(--text-hi);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 3px 6px; font: inherit; font-size: 12px;
}
.ed-select:focus, .ed-input:focus { outline: none; border-color: var(--accent-hi); }
.ed-input::placeholder { color: var(--text-muted); }
.ed-grow { width: 100%; }

/* ── body / panels ──────────────────────────────────────────── */

.ed-body { flex: 1; min-height: 0; display: flex; }

.ed-side {
  width: var(--ed-side-w);
  flex: 0 0 auto;
  min-width: 0;
  background: var(--bg-panel);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ed-side-left { border-right: 1px solid var(--border); }
.ed-side-right { border-left: 1px solid var(--border); }
.ed-side.is-collapsed { width: 0 !important; border-width: 0; }

.ed-tabs {
  display: flex; align-items: stretch; gap: 0;
  height: 28px; flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.ed-tab {
  flex: 1 1 auto;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-muted); font: inherit; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; padding: 0 6px;
}
.ed-tab:hover { color: var(--text); }
.ed-tab.is-on { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
.ed-tab-static { display: flex; align-items: center; justify-content: center; cursor: default; }
.ed-collapse {
  flex: 0 0 24px; background: none; border: none; border-left: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: 13px;
}
.ed-collapse:hover { color: var(--accent-hi); background: var(--ed-hover); }
.ed-collapse-r { border-left: none; border-right: 1px solid var(--border); }

.ed-tabpane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.ed-tabpane.is-on { display: flex; }

.ed-search-row { padding: 6px 6px 0; flex: 0 0 auto; display: flex; gap: 4px; }
.ed-search-row .ed-input { width: 100%; }
.ed-row-btns { padding-top: 4px; }
.ed-lib-hint { padding: 6px 8px 4px; font-size: 10.5px; color: var(--text-muted); line-height: 1.35; }
.ed-lib-foot {
  flex: 0 0 auto; padding: 4px 8px; font-size: 10.5px; color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.ed-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 4px 6px; }
.ed-list::-webkit-scrollbar { width: 9px; }
.ed-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.ed-list::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ── library rows ───────────────────────────────────────────── */

.ed-obj {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 5px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
}
.ed-obj:hover { background: var(--ed-hover); }
.ed-obj.is-active { background: var(--accent-dim); border-color: var(--border-hi); }
/* A mode you are currently in has to look different from a button you can press. */
.ed-btn.is-active { background: var(--accent-dim); border-color: var(--border-hi); color: var(--fg); }
.ed-obj-swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.ed-obj-main { flex: 1; min-width: 0; }
.ed-obj-cn {
  font-family: var(--mono); font-size: 11.5px; color: var(--text-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.ed-obj-dn {
  font-size: 10.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.ed-obj-fav {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 12px; padding: 0 2px; line-height: 1;
}
.ed-obj-fav:hover { color: var(--accent-hi); }
.ed-obj-fav.is-on { color: var(--accent-hi); }
.ed-obj-badge {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; color: var(--accent-hi);
  background: var(--accent-dim); border-radius: 3px; padding: 0 4px;
}
/* Classnames that came from the user's own archives rather than the shipped
   catalog - a different colour so a mod's objects are identifiable at a
   glance without reading every row. */
.ed-obj-badge.is-mod { color: #d8a657; background: rgba(216, 166, 87, .16); }

/* ── scene tree ─────────────────────────────────────────────── */

.ed-tree .ed-node {
  display: flex; align-items: center; gap: 4px;
  height: var(--ed-row-h); padding: 0 4px; border-radius: 4px; cursor: pointer;
  border: 1px solid transparent;
}
.ed-tree .ed-node:hover { background: var(--ed-hover); }
.ed-tree .ed-node.is-sel { background: var(--accent-dim); border-color: var(--border-hi); }
.ed-node-twisty {
  flex: 0 0 12px; background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 9px; padding: 0; line-height: 1;
}
.ed-node-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px;
}
.ed-node-group .ed-node-label { font-weight: 700; color: var(--text-hi); }
.ed-node-obj .ed-node-label { font-family: var(--mono); font-size: 11px; }
.ed-node-count { flex: 0 0 auto; font-size: 10px; color: var(--text-muted); }
.ed-node-btn {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 11px; padding: 0 2px; line-height: 1; opacity: .55;
}
.ed-node:hover .ed-node-btn { opacity: 1; }
.ed-node-btn.is-on { opacity: 1; color: var(--accent-hi); }
.ed-node-btn:hover { color: var(--text-hi); }
.ed-node.is-hidden .ed-node-label { opacity: .45; font-style: italic; }
.ed-node.is-locked .ed-node-label { opacity: .6; }
.ed-node-del:hover:not(:disabled) { color: var(--danger, #d05a4a); }
.ed-node-btn:disabled { opacity: .2; cursor: default; }

/* ── viewport ───────────────────────────────────────────────── */

.ed-viewport {
  flex: 1; min-width: 0; position: relative;
  background: var(--bg);
  overflow: hidden;
}
.ed-canvas { display: block; width: 100%; height: 100%; }

.ed-viewport-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  padding: 8px; display: flex; flex-direction: column; align-items: center;
}
.ed-placement-chip {
  /* The chip carries a real button now, so it has to take clicks. The
     overlay around it stays pass-through. */
  pointer-events: all;
  background: var(--bg-card); border: 1px solid var(--accent-hi);
  border-radius: 999px; padding: 4px 6px 4px 12px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--accent-hi);
  animation: ed-chip-in .18s ease-out;
}
@keyframes ed-chip-in { from { opacity: 0; transform: translateY(-6px); } }
.ed-chip-tag {
  font-family: var(--font); font-size: 9px; font-weight: 800; letter-spacing: .08em;
  background: var(--accent-dim); color: var(--accent-hi);
  border-radius: 3px; padding: 1px 5px;
}
.ed-chip-hint { font-family: var(--font); color: var(--text-muted); font-size: 10.5px; }
.ed-chip-stop {
  font-family: var(--font); font-size: 10.5px; cursor: pointer;
  background: var(--accent-dim); color: var(--text-hi);
  border: 1px solid var(--border-hi); border-radius: 999px; padding: 2px 9px;
}
.ed-chip-stop:hover { border-color: var(--accent-hi); color: var(--accent-hi); }

/* Path tool bar - floats over the viewport while drawing a spline. */
.ed-path-bar {
  pointer-events: all;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border-hi);
  border-radius: var(--radius); padding: 5px 10px; box-shadow: var(--shadow);
  max-width: calc(100% - 16px);
}
.ed-path-title { font-family: var(--mono); font-size: 11.5px; color: var(--accent-hi); font-weight: 700; }
.ed-path-num { width: 62px; padding: 2px 5px; font-size: 11.5px; }
.ed-path-bar .ed-field { gap: 3px; }
.ed-path-stat { font-size: 11px; color: var(--text-muted); font-family: var(--mono); min-width: 150px; }

.ed-marquee {
  position: absolute; z-index: 4; pointer-events: none;
  border: 1px solid var(--accent-hi);
  background: rgba(98,174,58,.14);
  border-radius: 2px;
}

/* Links.
   This page deliberately does NOT load the site's root stylesheet (see the
   comment in index.html), so it never inherited the site-wide
   `a { color: var(--accent-hi) }`. Every anchor in the editor - the help
   dialog, the assets dialog, the empty scene - was therefore rendering in
   the browser's default link blue, which is unreadable on a #121212
   background. */
a { color: var(--accent-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--accent-hi); }
a:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.ed-empty, .ed-loading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 24px; pointer-events: none;
}
/* The panel ignores clicks so you can place objects through it - but a link
   inside it has to be clickable, or it is decoration pretending to be a
   link. */
.ed-empty a { pointer-events: auto; text-decoration: underline; }
.ed-empty h2 { margin: 0; font-size: 17px; color: var(--text-hi); }
.ed-empty p { margin: 0; color: var(--text-muted); max-width: 380px; font-size: 12.5px; }
.ed-empty-sub { opacity: .85; }
.ed-empty-icon { font-size: 40px; opacity: .5; }
.ed-loading { background: var(--bg); pointer-events: all; }
.ed-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent-hi);
  animation: ed-spin .8s linear infinite;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ed-spinner { animation-duration: 3s; } }

/* ── splitters ──────────────────────────────────────────────── */

.ed-splitter {
  flex: 0 0 4px; cursor: col-resize; background: transparent;
  position: relative; z-index: 5;
}
.ed-splitter:hover, .ed-splitter.is-dragging { background: var(--accent-dim); }
.ed-splitter:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }

/* ── inspector ──────────────────────────────────────────────── */

.ed-inspector-empty { padding: 16px 12px; color: var(--text); }
.ed-inspector-empty p { margin: 0 0 4px; font-size: 12.5px; }
.ed-muted { color: var(--text-muted); }
.ed-tiny { font-size: 11px; }

#pane-inspector { overflow-y: auto; }
#inspector-body { padding: 8px 10px 20px; }

.ed-insp-sec { margin-bottom: 12px; }
.ed-insp-hdr {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin: 0 0 5px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.ed-insp-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ed-insp-row > label { flex: 0 0 52px; font-size: 11px; color: var(--text-muted); }
.ed-insp-row .ed-input, .ed-insp-row .ed-select { flex: 1; min-width: 0; }
.ed-num { font-family: var(--mono); text-align: right; }
/* Link to the setup walkthrough. A link rather than an embedded player:
   an iframe would load YouTube's scripts and cookies onto a page whose
   whole promise is that nothing leaves the user's computer. */
.ed-video-callout {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-hi);
  border-radius: var(--radius); padding: 9px 11px; margin: 8px 0 12px;
  color: var(--text-hi);
}
.ed-video-callout:hover { border-color: var(--accent-hi); }
.ed-video-play {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent-hi);
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.ed-video-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ed-video-text strong { font-size: 12.5px; }
.ed-video-ext { flex: 0 0 auto; font-size: 10.5px; color: var(--text-muted); }

/* Folder headings inside the archive-scan list. A 400-file scan is only
   readable once the files are gathered under where they came from. */
.ed-scan-folder {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-card); border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px; color: var(--text-hi);
  padding: 3px 2px; margin-top: 4px;
}
.ed-scan-folder > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-report-row strong { font-family: var(--mono); color: var(--text-hi); }

/* Buttons that belong to the section above them - "Drop to ground" under
   Position, "Align to terrain" under Rotation. Kept out of the Actions
   block on purpose: they edit the numbers they sit beneath. */
/* Raw model numbers, for comparing a drawn height against the game. */
.ed-debug-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 8px;
  font-size: 10.5px; line-height: 1.4;
}
.ed-debug-k { color: var(--text-muted); white-space: nowrap; }
.ed-debug-v { font-family: var(--mono); color: var(--text-hi); word-break: break-all; }

.ed-btn-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.ed-btn-row .ed-btn { flex: 1 1 auto; }
.ed-xyz { display: grid; grid-template-columns: 14px 1fr; gap: 4px 6px; align-items: center; }
.ed-xyz-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-align: center; }
.ed-ax-x { color: #d1503a; } .ed-ax-y { color: #63b84e; } .ed-ax-z { color: #5588dd; }
.ed-copy-btn {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-muted); cursor: pointer; font-size: 10px; padding: 1px 5px;
}
.ed-copy-btn:hover { color: var(--accent-hi); border-color: var(--border-hi); }
.ed-textarea {
  width: 100%; min-height: 54px; resize: vertical;
  background: var(--bg-card2); color: var(--text-hi);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 6px; font-family: var(--mono); font-size: 11.5px;
}
.ed-textarea:focus { outline: none; border-color: var(--accent-hi); }
.ed-classname-box {
  font-family: var(--mono); font-size: 12px; color: var(--accent-hi);
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 5px 7px; word-break: break-all;
}
.ed-warn-inline {
  font-size: 10.5px; color: var(--warning); margin-top: 3px;
}
.ed-multi-note {
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 8px; margin-bottom: 10px; font-size: 11.5px;
}

/* ── status bar ─────────────────────────────────────────────── */

.ed-status {
  height: var(--ed-status-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--bg-panel); border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--text-muted);
  overflow: hidden; white-space: nowrap;
}
.ed-stat-spacer { flex: 1; }
.ed-stat-sep { width: 1px; height: 12px; background: var(--border); }
.ed-stat { overflow: hidden; text-overflow: ellipsis; }
#stat-selection { color: var(--text); }
#stat-save.is-dirty { color: var(--warning); }
#stat-save.is-saved { color: var(--accent-hi); }

/* ── modals ─────────────────────────────────────────────────── */

.ed-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
[data-theme="light"] .ed-modal-overlay { background: rgba(0,0,0,.35); }
.ed-modal-overlay[hidden] { display: none; }
.ed-modal {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow);
  width: min(680px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
}
.ed-modal.is-wide { width: min(940px, 96vw); }
.ed-modal-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.ed-modal-title { margin: 0; font-size: 15px; color: var(--text-hi); }
.ed-modal-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.ed-modal-close:hover { color: var(--danger-hi); background: var(--ed-hover); }
.ed-modal-body { padding: 14px; overflow-y: auto; flex: 1; min-height: 0; font-size: 13px; }
.ed-modal-body h3 { margin: 14px 0 6px; font-size: 13px; color: var(--text-hi); }
.ed-modal-body h3:first-child { margin-top: 0; }
.ed-modal-body p { margin: 0 0 8px; }
.ed-modal-foot {
  padding: 10px 14px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.ed-modal-foot .ed-spacer { flex: 1; }

.ed-form-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ed-form-row > label { flex: 0 0 130px; font-size: 12px; color: var(--text-muted); }
.ed-form-row .ed-input, .ed-form-row .ed-select { flex: 1; }
.ed-form-row.is-check > label { flex: 1; }
.ed-hint { font-size: 11.5px; color: var(--text-muted); margin: -4px 0 10px 138px; }

.ed-code {
  width: 100%; min-height: 260px; resize: vertical;
  background: var(--bg-card2); color: var(--text-hi);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.45;
  white-space: pre; overflow: auto;
}
.ed-code:focus { outline: none; border-color: var(--accent-hi); }

.ed-drop {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 18px; text-align: center; color: var(--text-muted);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.ed-drop:hover, .ed-drop.is-over { border-color: var(--accent-hi); background: var(--accent-dim); color: var(--text-hi); }

.ed-proj-list { display: flex; flex-direction: column; gap: 5px; }
.ed-proj {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card2); cursor: pointer;
}
.ed-proj:hover { border-color: var(--border-hi); }
.ed-proj.is-current { border-color: var(--accent-hi); }
.ed-proj-main { flex: 1; min-width: 0; }
.ed-proj-name { font-weight: 600; color: var(--text-hi); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-proj-meta { font-size: 11px; color: var(--text-muted); }
.ed-proj-acts { display: flex; gap: 4px; flex: 0 0 auto; }

.ed-report { max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.ed-report-row {
  display: flex; gap: 8px; padding: 4px 8px; font-family: var(--mono); font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.ed-report-row:last-child { border-bottom: none; }
.ed-report-line { flex: 0 0 52px; color: var(--text-muted); }
.ed-report-text { flex: 1; min-width: 0; word-break: break-word; color: var(--text); }

.ed-callout {
  border-left: 3px solid var(--accent); background: var(--bg-card2);
  padding: 8px 10px; border-radius: 0 var(--radius) var(--radius) 0; margin: 0 0 10px;
  font-size: 12px;
}
.ed-callout.is-warn { border-left-color: var(--warning); }
.ed-callout.is-danger { border-left-color: var(--danger); }

.ed-kbd-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; }
kbd {
  font-family: var(--mono); font-size: 11px; background: var(--bg-card2);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 5px; color: var(--text-hi); white-space: nowrap;
}

/* ── toasts ─────────────────────────────────────────────────── */

.ed-toasts {
  position: fixed; right: 14px; bottom: 38px; z-index: 1100;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  pointer-events: none;
}
.ed-toast {
  background: var(--bg-card); border: 1px solid var(--border); border-left-width: 3px;
  border-left-color: var(--accent); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px 12px; max-width: 380px;
  font-size: 12.5px; color: var(--text-hi); pointer-events: all;
  animation: ed-toast-in .16s ease-out;
}
.ed-toast.is-error { border-left-color: var(--danger); }
.ed-toast.is-warn { border-left-color: var(--warning); }
@keyframes ed-toast-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ed-toast { animation: none; } }

/* ── unsupported / mobile ───────────────────────────────────── */

.ed-unsupported {
  display: none;
  position: fixed; inset: 0; z-index: 2000;
  background: var(--bg); padding: 24px;
  align-items: center; justify-content: center; text-align: center;
}
.ed-unsupported.is-shown { display: flex; }
.ed-unsupported-box { max-width: 480px; }
.ed-unsupported-icon { font-size: 46px; margin-bottom: 8px; }
.ed-unsupported h1 { font-size: 22px; color: var(--text-hi); margin: 0 0 10px; }
.ed-unsupported p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.ed-unsupported .ed-btn { margin: 0 3px; padding: 8px 14px; font-size: 13px; }
.ed-unsupported a { text-decoration: none; }

/* Below 900px the three-column editor stops being usable at all. */
@media (max-width: 899px), (max-height: 460px) {
  .ed-shell { display: none; }
  .ed-unsupported { display: flex; }
}

/* Narrow-but-usable desktops lose some breathing room instead of the panels. */
@media (max-width: 1180px) {
  :root { --ed-side-w: 232px; }
  .ed-btn { padding: 4px 7px; }
}

/* Below ~1600px the toolbar cannot fit every label on one row. Drop the
   words from the buttons whose icon is unambiguous and whose tooltip
   explains them, so the row stays single before resorting to wrapping.
   The action buttons on the right keep their labels - "Export SQF" is the
   whole point of the tool and must never be a mystery glyph. */
@media (max-width: 1599px) {
  .ed-lbl { display: none; }
  .ed-tb-spacer { min-width: 4px; }
  .ed-tb-sep { margin: 0 2px; }
}