/* Shared editor styles for index-v2 and index-pres. Hosts customize via
 * CSS variables (typically set on .editor-wrap or its container):
 *
 *   --editor-font-size          default 14px
 *   --editor-line-height        default 1.6
 *   --editor-gutter-pad         default 12px 6px 12px 10px
 *   --editor-textarea-pad-left  default 4px
 *   --editor-gutter-fg          default rgba(0,0,0,0.35)
 *   --editor-gutter-bg          default transparent
 *   --editor-gutter-border      default rgba(0,0,0,0.2)
 *
 * Structural rules (flex layout, gutter alignment, right border, monospace
 * font, no-wrap textarea) live here so both hosts stay in sync. */

.editor-wrap { display: flex; align-items: stretch; position: relative; }
.editor-wrap .editor-textarea {
  flex: 1 1 auto;
  width: auto;
  padding-left: var(--editor-textarea-pad-left, 8px);
  font-family: monospace;
  font-size: var(--editor-font-size, 14px);
  line-height: var(--editor-line-height, 1.6);
  tab-size: 2;
  white-space: pre;
}
.editor-wrap .editor-textarea.editor-frozen {
  background: var(--editor-frozen-bg, rgba(0,0,0,0.04));
  cursor: not-allowed;
}
.editor-gutter {
  flex: 0 0 auto;
  user-select: none;
  text-align: right;
  padding: var(--editor-gutter-pad, 12px 6px 12px 10px);
  font-family: monospace;
  font-size: var(--editor-font-size, 14px);
  line-height: var(--editor-line-height, 1.6);
  color: var(--editor-gutter-fg, rgba(0,0,0,0.35));
  background: var(--editor-gutter-bg, transparent);
  overflow: hidden;
  white-space: pre;
  border-right: 1px solid var(--editor-gutter-border, rgba(0,0,0,0.2));
}
.editor-gutter > div { min-width: 2ch; }

/* Autocomplete overlay (plans/v2-editor-autocomplete.md). Text uses the same
 * teal as the db-view predicate color (--syn-pred). */
.editor-autocomplete {
  position: absolute;
  z-index: 30;
  font-family: monospace;
  font-size: var(--editor-font-size, 14px);
  line-height: 1.4;
  color: var(--syn-pred, #007a5a);
  /* Default through the host's theme palette so the box follows light/dark
   * automatically; the literal is only a last resort if no palette is set. */
  background: var(--editor-autocomplete-bg, var(--bg-2, #1e1e1e));
  border: 1px solid var(--editor-autocomplete-border, var(--border, rgba(78, 201, 176, 0.5)));
  border-radius: 4px;
  padding: 2px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  white-space: pre;
  pointer-events: none;
}
.editor-autocomplete-item { padding: 1px 8px; }
.editor-autocomplete-item.is-first { background: var(--editor-autocomplete-sel, var(--hover, rgba(78, 201, 176, 0.18))); }

/* Off-screen mirror used only to measure caret pixel coordinates. */
.editor-autocomplete-mirror {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
  top: 0;
  left: 0;
}