/* Macro Editor Syntax Highlighting */

/* Color tokens — dark theme defaults */
:root {
  --mh-comment: #6a737d;
  --mh-string: #e5c07b;
  --mh-keyword: #c678dd;
  --mh-variable: #61afef;
  --mh-attribute: #d19a66;
  --mh-number: #d19a66;
}

/* Container holds backdrop + textarea stacked */
.mh-container {
  position: relative;
  overflow: hidden;
}

/* Highlighted backdrop — sits behind the transparent textarea */
.mh-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  border-color: transparent;
  border-style: solid;
}

/* Textarea fills the container and handles scrolling */
.mh-textarea {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  outline: none;
  overflow-y: auto;
  box-sizing: border-box;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Keep placeholder visible */
.mh-textarea::placeholder {
  color: #555;
  -webkit-text-fill-color: #555;
}

/* Keep text selection visible */
.mh-textarea::selection {
  background: rgba(100, 140, 200, 0.35);
  -webkit-text-fill-color: transparent;
}

/* Token colors */
.mh-comment   { color: var(--mh-comment); }
.mh-string    { color: var(--mh-string); }
.mh-keyword   { color: var(--mh-keyword); font-weight: bold; }
.mh-variable  { color: var(--mh-variable); }
.mh-attribute { color: var(--mh-attribute); font-style: italic; }
.mh-number    { color: var(--mh-number); }