:root {
  font-family: system-ui, sans-serif;
  color: #292720;
  background: #ded6c5;
}

* { box-sizing: border-box; }
html, body { min-width: 100%; min-height: 100%; margin: 0; }
button, input, select, textarea { font: inherit; }

.editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 100vh;
}

.preview-column { padding: 24px; }
.preview-column header { max-width: 980px; margin: 0 auto 16px; }
.eyebrow { margin: 0 0 4px; color: #6b6253; font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
h1 { margin: 0; font-size: 1.55rem; }
.preview-column header p:last-child { margin: 6px 0 0; color: #625a4c; font-size: .86rem; }

.map-preview {
  position: relative;
  max-width: 980px;
  margin: auto;
  overflow: hidden;
  background: #e8e2d3;
  border: 1px solid #a79c87;
  box-shadow: 0 8px 28px rgb(46 38 25 / 18%);
}
.map-preview svg { display: block; width: 100%; height: auto; touch-action: none; }
.override-item { cursor: grab; }
.override-item:active { cursor: grabbing; }
.override-item.is-selected > :not(.leader-under) { filter: drop-shadow(0 0 4px #e6492d); }
.machine-status { max-width: 980px; margin: 10px auto 0; padding: 8px 10px; color: #236043; background: #edf7ef; border-radius: 5px; font-size: .8rem; }
.machine-status[data-kind="error"] { color: #992b23; background: #ffebe7; }

.control-panel {
  padding: 22px;
  background: #f8f4eb;
  border-left: 1px solid #c5baa6;
  box-shadow: -3px 0 18px rgb(50 42 28 / 10%);
}
.control-panel section { padding: 0 0 19px; margin-bottom: 19px; border-bottom: 1px solid #d9d0bf; }
.control-panel h2 { margin: 0 0 10px; font-size: 1rem; }
.control-panel label { display: block; margin: 9px 0 4px; color: #655c4d; font-size: .76rem; font-weight: 700; }
.control-panel input, .control-panel select, .control-panel textarea {
  width: 100%; padding: 8px; color: #292720; background: #fff; border: 1px solid #b9ae99; border-radius: 4px;
}
.control-panel textarea { resize: vertical; }
button { width: 100%; margin-top: 9px; padding: 9px 11px; color: #fff; background: #234e78; border: 0; border-radius: 5px; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button.secondary { color: #234e78; background: #e0e9ef; }
.history-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.annotation-list { display: grid; gap: 6px; }
.annotation-button { margin: 0; padding: 8px; color: #2d2922; text-align: left; background: #fff; border: 1px solid #cec3af; }
.annotation-button[aria-pressed="true"] { color: #fff; background: #315d83; border-color: #315d83; }
.annotation-button small { display: block; margin-top: 2px; opacity: .75; }
.diff-list { display: grid; gap: 7px; font-size: .78rem; }
.diff-card { padding: 8px; background: #fff; border-left: 3px solid #d26b31; }
.diff-card p { margin: 2px 0; overflow-wrap: anywhere; }
#editor-status { display: block; margin-top: 10px; color: #655c4d; font: .72rem/1.45 ui-monospace, monospace; }

@media (max-width: 850px) {
  .editor-shell { grid-template-columns: 1fr; }
  .control-panel { border-top: 1px solid #c5baa6; border-left: 0; }
}