/* editor.css — dark theme matching the SVG style */

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

:root {
  --bg:        #1a1a2e;
  --panel:     #12122a;
  --surface:   #0d0d1f;
  --border:    #333355;
  --accent:    #5555aa;
  --accent2:   #7777cc;
  --text:      #ccccdd;
  --text-dim:  #8888bb;
  --green:     #2ecc71;
  --amber:     #f39c12;
  --red:       #e74c3c;
  --font:      'Segoe UI', system-ui, sans-serif;
  --mono:      'Consolas', 'Courier New', monospace;
  --sidebar-w: 290px;
  --inspector-w: 300px;
  --toolbar-h: 42px;
  --status-h:  26px;
}

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

/* ── Toolbar ────────────────────────────────────────────────────────────────── */

#toolbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--toolbar-h);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  z-index: 100;
}

.tb-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tb-center { flex: 1; text-align: center; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */

#main {
  position: fixed;
  top: var(--toolbar-h);
  bottom: var(--status-h);
  left: 0; right: 0;
  display: flex;
  overflow: hidden;
}

#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}

#preview-area {
  flex: 1;
  min-width: 0;
  overflow: auto;
  position: relative;
  background: var(--bg);
  display: flex;
  padding: 16px;
}

/* `margin: auto` rather than justify/align-content: on a map bigger than the
   viewport, centring via the flex container puts the overflow past the scroll
   origin where it can't be reached.  Auto margins centre and still leave the
   whole map scrollable. */
#svg-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
  margin: auto;
}

#svg-content svg {
  display: block;
}

#overlay {
  position: absolute;
  top: 0; left: 0;
}

#loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26,26,46,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-dim);
  z-index: 10;
}

/* ── Right panel: Inspector + pinned validation ─────────────────────────────── */

#right-panel {
  width: var(--inspector-w);
  min-width: var(--inspector-w);
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#inspector {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

#inspector-empty {
  padding: 14px 12px;
}

#validation-pinned {
  flex-shrink: 0;
  max-height: 40%;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

/* Full-canvas mode (Tab): hide both side panels */
body.full-canvas #sidebar,
body.full-canvas #right-panel { display: none; }

/* ── Corner chips: legend-style blocks in the unused canvas corners ─────────── */

#corner-chips {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* only the chips themselves are clickable */
  z-index: 5;
}

.corner-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 190px;
}
/* Sub-stack inside one corner (bottom-left holds call profiles + escalation). */
.corner-block > .chip-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: inherit;
}
.corner-block > .chip-group:empty { display: none; }

/* The server SVG draws a 45px title bar at the top; at the bottom it draws a
   legend strip that WRAPS to extra 22px rows plus an optional 26px info bar,
   so the bottom chrome height is per-map.  editor.js measures it off the
   rendered SVG into --chrome-bottom (see syncChromeMetrics); the fallback here
   is the 42+26 minimum. */
#corner-chips { --chrome-bottom: 68px; }

.corner-block.corner-tl { top: 52px; left: 8px; align-items: flex-start; }
.corner-block.corner-tr { top: 52px; right: 8px; align-items: flex-end; }
.corner-block.corner-bl {
  bottom: calc(var(--chrome-bottom) + 10px); left: 8px; align-items: flex-start;
}
.corner-block.corner-br {
  bottom: calc(var(--chrome-bottom) + 10px); right: 8px; align-items: flex-end;
}

.def-chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 10px;
  background: rgba(13,13,31,0.88);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.def-chip:hover:not(:disabled) { background: var(--panel); border-color: var(--accent2); }
.def-chip.active {
  border-color: var(--accent2);
  outline: 1px solid var(--accent2);
  background: var(--panel);
}
.chip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
/* text-overflow is inert on a flex container, so the ellipsis has to live on
   the shrinkable child — otherwise a long sub-label hard-cuts mid-word. */
.def-chip .chip-sub {
  color: var(--text-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.def-chip img { width: 14px; height: 14px; flex: none; }
.def-chip.chip-title {
  background: transparent;
  border: none;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 9px;
  cursor: default;
  padding: 0 2px;
}

/* Flash a card / cell the user was just sent to */
@keyframes chip-flash {
  0%   { background: rgba(119,119,204,0.45); }
  100% { background: rgba(119,119,204,0.0); }
}
.flash { animation: chip-flash 1s ease-out; }

@keyframes cell-flash {
  0%, 60% { fill: rgba(119,119,204,0.55); }
  100%    { fill: rgba(119,119,204,0.0); }
}
.overlay-cell.flash-cell, .overlay-ext-cell.flash-cell {
  animation: cell-flash 1.2s ease-out;
}

/* ── Status bar ─────────────────────────────────────────────────────────────── */

#statusbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--status-h);
  background: var(--panel);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

/* Live "under the cursor" readout — always leftmost */
#status-hover {
  font-family: var(--mono);
  color: var(--text);
  flex-shrink: 0;
  min-width: 180px;
}
#status-hint {
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Transient messages — rightmost */
#status-msg {
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

button {
  background: var(--accent);
  color: var(--text);
  border: 1px solid var(--accent2);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font);
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--accent2); }
button:disabled { opacity: 0.4; cursor: default; }
button.danger { background: #4a1515; border-color: var(--red); }
button.danger:hover:not(:disabled) { background: #7a2020; }
button.secondary { background: var(--surface); border-color: var(--border); }
button.secondary:hover:not(:disabled) { background: var(--panel); }
button.small { padding: 2px 7px; font-size: 11px; float: right; margin-top: -2px; }

select, input[type="text"], input[type="number"] {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font);
  width: 100%;
  outline: none;
}
select:focus, input:focus { border-color: var(--accent2); }
input[type="checkbox"] { width: auto; accent-color: var(--accent2); cursor: pointer; }

/* toolbar select / inputs */
#toolbar select, #toolbar input {
  width: auto;
  padding: 3px 24px 3px 8px;
  max-width: 220px;
}

/* ── Sidebar sections ───────────────────────────────────────────────────────── */

.section {
  border-bottom: 1px solid var(--border);
}

.section-header {
  padding: 7px 10px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.section-header:hover { color: var(--text); }
.toggle-icon { font-size: 10px; }

.section-body {
  padding: 8px 10px;
}
.section-body.collapsed { display: none; }

/* ── Parameter grid ─────────────────────────────────────────────────────────── */

.param-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 5px 8px;
  align-items: center;
}
.param-grid label {
  color: var(--text-dim);
  font-size: 11px;
  text-align: right;
}
.param-grid span.mono {
  font-family: var(--mono);
  font-size: 11px;
}

/* ── Tool buttons ───────────────────────────────────────────────────────────── */

#tool-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.tool-btn {
  flex: 1;
  padding: 5px 4px;
  font-size: 11px;
  background: var(--panel);
  border-color: var(--border);
}
.tool-btn.active {
  background: var(--accent);
  border-color: var(--accent2);
  color: white;
}
.tool-btn.erase-active {
  background: #4a1515;
  border-color: var(--red);
}

.hint {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  min-height: 14px;
}

/* ── Brush palette ──────────────────────────────────────────────────────────── */

.palette-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin: 8px 0 4px;
}
.palette-group-label:first-child { margin-top: 0; }

.palette-group:first-child .palette-group-label { margin-top: 0; }
.palette-group-label.pg-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.palette-group-label.pg-toggle:hover { color: var(--text); }
.pg-icon { font-size: 9px; }
.palette-group-body.collapsed { display: none; }

.palette-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 2px;
}

/* Generic swatch */
.palette-swatch {
  padding: 4px 6px;
  font-size: 10px;
  background: var(--panel);
  border-color: var(--border);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 44px;
  flex: 0 0 auto;
}
.palette-swatch:hover:not(:disabled) { background: var(--accent); border-color: var(--accent2); }
.palette-swatch.active {
  background: var(--accent);
  border-color: var(--accent2);
  outline: 2px solid var(--accent2);
  outline-offset: 1px;
}

/* Wall swatches */
.palette-swatch.wall-solid     { border-left: 3px solid #ccccdd; }
.palette-swatch.wall-dest      { border-left: 3px solid var(--amber); }
.palette-swatch.wall-open      { border-left: 3px solid var(--green); }
.palette-swatch.wall-sheer     { border-left: 3px solid #8fb8d8; }
.palette-swatch.wall-solid.active  { background: rgba(200,200,221,0.15); }
.palette-swatch.wall-dest.active   { background: rgba(243,156,18,0.15); }
.palette-swatch.wall-open.active   { background: rgba(46,204,113,0.15); }
.palette-swatch.wall-sheer.active  { background: rgba(143,184,216,0.15); }

/* Turret palette icons */
.palette-swatch.turret-swatch {
  min-width: 52px;
  min-height: 52px;
  justify-content: center;
}
.palette-swatch.turret-swatch img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: 0.8;
}
.palette-swatch.turret-swatch .swatch-label {
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.2;
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-swatch.turret-swatch.active img { opacity: 1; }

/* ── Turret info box ────────────────────────────────────────────────────────── */

.turret-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0 2px 0;
  font-size: 10px;
}
.turret-info:empty { display: none; }
.turret-info .ti-cat {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.turret-info .ti-detail {
  color: var(--text-dim);
  padding: 1px 5px;
  background: var(--panel);
  border-radius: 3px;
}
.turret-info .ti-badge {
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.turret-info .ti-badge.aura { background: rgba(26,188,156,0.20); color: #1abc9c; }

/* ── Turret list ────────────────────────────────────────────────────────────── */

.turret-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}
.turret-item:hover { background: var(--panel); }
.turret-item.selected { background: var(--accent); }
.turret-item .ti-pos {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-dim);
  min-width: 48px;
}
.turret-item .ti-label {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 4px;
  border-radius: 3px;
  font-size: 11px;
  gap: 4px;
}
.list-item:hover { background: var(--panel); }
.list-item button { padding: 1px 5px; font-size: 10px; }

/* Entry states */
.entry-open   { color: var(--green); }
.entry-dest   { color: var(--amber); }
.entry-closed { color: var(--text-dim); }

/* ── Dialog ─────────────────────────────────────────────────────────────────── */

dialog {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  min-width: 300px;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog h3 { margin-bottom: 14px; font-size: 14px; }

.dlg-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Scaling hint ───────────────────────────────────────────────────────────── */

#scaling-hint {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border-left: 2px solid var(--border);
  border-radius: 2px;
  line-height: 1.5;
}

/* ── Alarm authoring (ALARMS.md §9) ─────────────────────────────────────────── */

/* Nested card idiom for call profiles → slots → packages and ladder rungs. */
.alarm-card {
  margin: 4px 0;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(255,255,255,0.02);
}
.alarm-card .alarm-card { background: rgba(255,255,255,0.03); }
.alarm-card-head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}
.alarm-card-head .alarm-card-title {
  flex: 1;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.alarm-card-head input[type="text"] { flex: 1; min-width: 0; }
.alarm-note {
  font-size: 10px;
  color: var(--text-dim);
  margin: 2px 0 4px;
}
.alarm-disabled { opacity: 0.45; pointer-events: none; }

/* ── SVG overlay: cells ─────────────────────────────────────────────────────── */

.overlay-cell {
  fill: transparent;
  stroke: none;
  cursor: crosshair;
  transition: fill 0.05s;
}
.overlay-cell:hover { fill: rgba(100,120,255,0.20); }
.overlay-cell.has-turret         { }
.overlay-cell.has-turret:hover   { fill: rgba(255,200,80,0.20); }
.overlay-cell.has-zone           { fill: rgba(231,76,60,0.10); }
.overlay-cell.has-zone:hover     { fill: rgba(231,76,60,0.25); }
.overlay-cell.has-zone-selected  { fill: rgba(231,76,60,0.25); }
.overlay-cell.has-zone-selected:hover { fill: rgba(231,76,60,0.45); }
.overlay-cell.has-zone-orphan    { fill: rgba(136,136,136,0.15); }
.overlay-cell.has-zone-orphan:hover { fill: rgba(136,136,136,0.30); }

/* Interactable occupancy (caches gold, TDE hardware steel) */
.overlay-cell.has-cache               { fill: rgba(212,160,23,0.14); }
.overlay-cell.has-cache:hover         { fill: rgba(212,160,23,0.30); }
.overlay-cell.has-interactable        { fill: rgba(170,180,192,0.14); }
.overlay-cell.has-interactable:hover  { fill: rgba(170,180,192,0.30); }

/* Miniboss occupancy (ALARMS.md) — Grid orange.  A miniboss may share its cell
   with a turret or an interactable, so this stacks on top of their tints. */
.overlay-cell.has-miniboss            { stroke: rgba(230,126,34,0.85); stroke-width: 2; }
.overlay-cell.has-miniboss:hover      { fill: rgba(230,126,34,0.30); }
.overlay-cell.has-vent                { stroke: rgba(38,198,185,0.85); stroke-width: 2; stroke-dasharray: 4 2; }
.overlay-cell.has-vent:hover          { fill: rgba(38,198,185,0.25); }

/* Currently selected element's cell (map ↔ Inspector correlation) */
.overlay-cell.is-selected,
.overlay-ext-cell.is-selected {
  stroke: var(--accent2);
  stroke-width: 2.5;
  fill: rgba(119,119,204,0.18);
}

/* Caller → profile link arrows (toggled from the profiles corner block) */
.alarm-link-arrow {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 5,4;
  opacity: 0.75;
  pointer-events: none;
}

/* Ghost preview cell (paint mode hover) */
.overlay-ghost-cell {
  fill: rgba(100,180,255,0.35);
  stroke: rgba(100,180,255,0.7);
  stroke-width: 1.5;
  pointer-events: none;
}
.overlay-ghost-move {
  fill: rgba(255,200,80,0.40);
  stroke: rgba(255,200,80,0.9);
  stroke-width: 1.5;
  pointer-events: none;
}
.overlay-erase-preview {
  fill: rgba(231,76,60,0.25);
  stroke: rgba(231,76,60,0.7);
  stroke-width: 1.5;
  pointer-events: none;
}

/* ── SVG overlay: outer sectors ─────────────────────────────────────────────── */

.overlay-outer-sector {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}
.overlay-outer-sector.entry-open   { fill: rgba(46,204,113,0.12); }
.overlay-outer-sector.entry-dest   { fill: rgba(243,156,18,0.12); }
.overlay-outer-sector:hover        { fill: rgba(46,204,113,0.25) !important; }

/* ── SVG overlay: external corridor cells (Kith spawn points) ───────────────── */

.overlay-ext-cell {
  fill: transparent;
  stroke: rgba(46,204,113,0);   /* invisible until corridor-mode */
  stroke-width: 1;
  stroke-dasharray: 4,3;
  pointer-events: none;          /* disabled outside paint/erase/move */
  cursor: crosshair;
}
/* corridor mode (spawn paint, erase, or move): show faint dashed cells, enable hits */
.corridor-mode .overlay-ext-cell {
  pointer-events: fill;
  stroke: rgba(46,204,113,0.22);
}
.corridor-mode .overlay-ext-cell:hover { fill: rgba(46,204,113,0.18); }
.overlay-ext-cell.has-spawn             { fill: rgba(46,204,113,0.10); }
.corridor-mode .overlay-ext-cell.has-spawn { fill: rgba(46,204,113,0.25); }
.overlay-ext-cell.has-character             { fill: rgba(195,155,211,0.14); }
.corridor-mode .overlay-ext-cell.has-character { fill: rgba(195,155,211,0.32); }

/* ── Character panel: team rows ─────────────────────────────────────────────── */

.team-row {
  border: 1px solid var(--border, #333355);
  border-radius: 4px;
  padding: 4px;
  margin-top: 4px;
}
.team-row .team-head {
  display: flex;
  gap: 4px;
  align-items: center;
}
.team-row .team-head input[type="text"] { flex: 1; min-width: 0; }
.team-unit-row {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 3px;
}
.team-unit-row img { width: 16px; height: 16px; flex: none; }
.team-unit-row select { flex: 1; min-width: 0; }
.team-unit-row input[type="number"] { width: 48px; flex: none; }
.team-pop { font-size: 10px; color: var(--text-dim); margin-top: 3px; }
.char-list-teams { display: flex; gap: 6px; align-items: center; }
.char-list-teams img { width: 13px; height: 13px; vertical-align: -2px; }
.ability-check { display: inline-flex; align-items: center; gap: 3px; margin: 2px 8px 2px 0; font-size: 11px; }
.ability-check img { width: 14px; height: 14px; }

/* ── SVG overlay: wall edges ────────────────────────────────────────────────── */

.overlay-edge {
  fill: none;
  stroke: transparent;
  stroke-width: 8;         /* fat invisible stroke for easy hit-testing */
  stroke-linecap: round;
  cursor: pointer;
  pointer-events: none;    /* disabled by default; enabled in wall-brush mode */
}
/* wall mode: show visible highlight on edges, enable pointer events */
.wall-mode .overlay-edge {
  pointer-events: stroke;
}
.overlay-edge.wall-solid       { stroke: rgba(200,200,221,0.0); }
.overlay-edge.wall-destructible { stroke: rgba(243,156,18,0.0); }
.overlay-edge.wall-open        { stroke: rgba(46,204,113,0.0); }
.overlay-edge.wall-sheer       { stroke: rgba(143,184,216,0.0); }
.wall-mode .overlay-edge.wall-solid       { stroke: rgba(200,200,221,0.25); }
.wall-mode .overlay-edge.wall-destructible { stroke: rgba(243,156,18,0.35); }
.wall-mode .overlay-edge.wall-open        { stroke: rgba(46,204,113,0.20); }
.wall-mode .overlay-edge.wall-sheer       { stroke: rgba(143,184,216,0.35); }
.wall-mode .overlay-edge:hover { stroke-opacity: 0.8 !important; stroke-width: 10; }

/* Blast doors and the derived Interdictor field are informational — visible
   in every mode, not just wall-mode (declared after the wall-* rules so the
   equal-specificity tie breaks toward these). */
.overlay-edge.has-door          { stroke: rgba(170,180,192,0.55); }
.overlay-edge.interdictor-field { stroke: rgba(143,184,216,0.30); }
.overlay-edge.has-door.interdictor-field { stroke: rgba(170,180,192,0.55); }

/* ── Validation panel ───────────────────────────────────────────────────────── */

.validation-item {
  font-size: 11px;
  padding: 3px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  line-height: 1.35;
}
.validation-error   { color: var(--red);   background: rgba(231,76,60,0.08); }
.validation-warning { color: var(--amber); background: rgba(243,156,18,0.08); }

/* Messages with a parsable cell reference jump to that cell on click */
.validation-item.validation-link { cursor: pointer; }
.validation-item.validation-link:hover { text-decoration: underline; }

/* Ghost edge during wall painting */
.overlay-ghost-edge {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  pointer-events: none;
  opacity: 0.7;
}