/* ============================================================
   vanilla — Lua editor
   ============================================================ */

.ed {
  --ed-pad-y: 14px;
  --ed-pad-x: 16px;
  --ed-gutter: 54px;
  --ed-map: 78px;
  --ed-font-size: 12.5px;
  --ed-line-h: 20px;

  position: relative;
  height: 100%;
  background: #05080c;
  border-radius: 10px;
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: var(--ed-font-size);
  line-height: var(--ed-line-h);
}

/* The text column stops where the minimap starts, so long lines are
   clipped instead of bleeding underneath it. */
.ed-area { position: absolute; top: 0; left: 0; bottom: 0; right: var(--ed-map); overflow: hidden; }

.ed-hl,
.ed-input {
  margin: 0;
  padding: var(--ed-pad-y) var(--ed-pad-x) var(--ed-pad-y) calc(var(--ed-gutter) + 6px);
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  tab-size: 4;
  white-space: pre;
  word-wrap: normal;
  border: 0;
  position: absolute;
  inset: 0;
  overflow: auto;
}

.ed-hl {
  color: #c7d4de;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.ed-input {
  z-index: 2;
  background: transparent;
  color: transparent;
  caret-color: #7fe3ff;
  resize: none;
  outline: none;
  -webkit-text-fill-color: transparent;
}
.ed-input::selection { background: rgba(127, 227, 255, 0.22); }
.ed-input::-webkit-scrollbar { width: 10px; height: 10px; }
.ed-input::-webkit-scrollbar-track { background: transparent; }
.ed-input::-webkit-scrollbar-thumb { background: #1b242d; border-radius: 99px; border: 2px solid #05080c; }
.ed-input::-webkit-scrollbar-thumb:hover { background: #2a3a47; }

/* ---------- gutter ---------- */
.ed-gutter {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--ed-gutter);
  z-index: 3;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.014);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.ed-gutter-inner {
  padding: var(--ed-pad-y) 0;
  text-align: right;
  padding-right: 12px;
  color: #3d4a55;
  font: inherit;
  line-height: inherit;
  white-space: pre;
  will-change: transform;
}

/* ---------- minimap ---------- */
.ed-minimap {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: var(--ed-map);
  z-index: 3;
  overflow: hidden;
  background: #070b0f;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.ed-minimap[hidden] { display: none; }
.ed-minimap canvas { display: block; width: var(--ed-map); opacity: 0.75; }

.ed-minimap-view {
  position: absolute;
  left: 0; right: 0;
  background: rgba(127, 227, 255, 0.09);
  border-top: 1px solid rgba(127, 227, 255, 0.25);
  border-bottom: 1px solid rgba(127, 227, 255, 0.25);
  transition: top 0.08s linear;
}

/* ---------- tokens ---------- */
.t-kw   { color: #ff7ab2; }
.t-bi   { color: #c792ea; }
.t-bool { color: #82aaff; font-weight: 500; }
.t-num  { color: #a6e3a1; }
.t-str  { color: #ffb86b; }
.t-key  { color: #7fe3ff; }
.t-com  { color: #55636f; font-style: italic; }
.t-id   { color: #c7d4de; }
.t-punc { color: #64757f; }

/* ---------- read-only variant ---------- */
.ed.is-ro .ed-input { cursor: default; }
.ed.is-ro .ed-input::selection { background: rgba(127, 227, 255, 0.18); }