/*
 * Workout description editor (CodeMirror 6).
 *
 * Highlight classes only ever change color/decoration — never weight, style,
 * or spacing, which can change a character's advance width depending on the
 * font actually installed on the system.
 */

.syntax-highlight-container {
  font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
}

.syntax-highlight-editor {
  position: relative;
}

.syntax-highlight-container .workout-editor-source {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.workout-editor-mount {
  width: 100%;
  overflow: hidden;
  resize: vertical;
}

.workout-editor-mount .cm-editor {
  height: 100%;
  min-height: inherit;
  color: var(--dark-gray);
  background: transparent;
}

.workout-editor-mount .cm-scroller {
  height: 100%;
  min-height: 0;
  overflow: auto;
  font-family: inherit;
  line-height: inherit;
}

.workout-editor-mount .cm-content {
  min-height: 100%;
  padding: 0.5rem;
  caret-color: var(--dark-gray);
}

.workout-editor-mount .cm-focused {
  outline: none;
}

.workout-editor-mount .cm-placeholder {
  color: var(--text-muted);
}

.demo-pane--input .workout-editor-mount .cm-editor {
  color: #c6d0f5;
  background: #1e1e2e;
}

.demo-pane--input .workout-editor-mount .cm-content {
  caret-color: #c6d0f5;
}

/* Highlight classes. Color and background only — a header or rule line is
   distinguished by color and, for headers, an underline, never by anything
   that could change how wide the text renders. */
.hl-header {
  color: var(--primary-color-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.hl-quantity {
  color: var(--hl-quantity);
}

.hl-element {
  color: var(--hl-element);
}

.hl-condition {
  color: var(--hl-condition);
}

.hl-rest {
  color: var(--text-muted);
}

.hl-rule {
  color: var(--text-muted);
}

.hl-scaling {
  color: var(--hl-scaling);
}

/* Text the parser skipped. A tint behind the characters, never a color on
   them, so the typed text stays readable while the error is marked. */
.hl-error {
  background: color-mix(in oklch, var(--danger-color) 28%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--danger-color) 45%, transparent);
}