/* Shared editor: keep gutter and source font metrics aligned. */
.editor-drop {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(251, 251, 253, 0.86);
  outline: 2px dashed var(--accent);
  outline-offset: -6px;
}
.is-file-drop > .editor-drop { display: flex; }
.editor-drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 26px;
  text-align: center;
  color: var(--accent);
}
.editor-drop-card svg {
  width: 26px;
  height: 26px;
}
.editor-drop-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.editor-drop-hint {
  font-size: 12px;
  color: var(--ink-dim);
}

.gutter {
  flex: none;
  min-width: calc(2ch + 20px);
  padding: 8px 8px 8px 12px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 21px;
  text-align: right;
  color: var(--ink-faint);
  background: var(--bg-white);
  user-select: none;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.gutter span { display: block; }
.gutter span.on { color: var(--ink); }
.gutter span.is-inspected {
  color: var(--accent);
  background: rgba(0, 113, 227, 0.1);
  border-radius: 3px;
}

.code-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
}
.code,
.code-highlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 21px;
  tab-size: 2;
  white-space: pre;
}
.code-highlight {
  min-width: 100%;
  color: var(--ink);
  pointer-events: none;
  user-select: none;
  overflow: visible;
  transform-origin: 0 0;
  z-index: 1;
}
.code-inspect-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 21px;
  pointer-events: none;
  background: rgba(0, 113, 227, 0.12);
  border-block: 1px solid rgba(0, 113, 227, 0.2);
  z-index: 0;
}
.code {
  color: var(--ink);
  caret-color: var(--ink);
  background: transparent;
  border: none;
  resize: none;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: absolute;
  z-index: 2;
}
.code-wrap.has-highlight .code { color: transparent; }
.code-wrap.has-highlight .code::selection {
  background: rgba(0, 113, 227, 0.18);
  color: transparent;
}
.code::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.code:focus { outline: none; }
.zpl-control { color: var(--zpl-control, #af52de); }
.zpl-command { color: var(--ide-command, var(--accent)); }
.zpl-number { color: var(--zpl-number, #bf5a00); }
.zpl-data { color: var(--zpl-data, #248a3d); }
.zpl-comment {
  color: var(--zpl-comment, var(--ink-faint));
  font-style: italic;
}
.zpl-symbol { color: var(--zpl-symbol, #8a6d00); }