/* ---- global configuration editor ----
   The panel that names voltage channels, sets colouring limits and binds EZ slots. Shared chrome
   rather than a view: it sits above the tab panels and its result (one global YAML doc) feeds Live,
   Analyze and EZ alike. */
.rails {
  padding: 0.86rem 1.43rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.rails[hidden] { display: none; }
.rails-head {
  display: flex;
  align-items: baseline;
  gap: 0.71rem;
  flex-wrap: wrap;
  margin-bottom: 0.57rem;
}
.rails-head .gear { margin-right: 0.36rem; color: var(--muted); }
.rails-hint { flex: 1; min-width: 15.7rem; font-size: 0.86rem; color: var(--muted); }

/* The highlight overlay: a transparent-text textarea over a coloured <pre>, sharing identical box
   metrics so the caret sits exactly on the highlighted glyphs. Every metric that affects glyph
   position — font, line-height, padding, tab-size, white-space, box-sizing — MUST match on both. */
.rails-editor {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 0.57rem;
  background: var(--bg);
  overflow: hidden;
}
.rails-editor:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }

.rails-editor .rails-hl,
.rails-editor textarea {
  margin: 0;
  padding: 0.71rem 0.86rem;
  border: 0;
  box-sizing: border-box;
  font: 0.86rem/1.55 var(--mono);
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
}

.rails-editor .rails-hl {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--text);
}
.rails-editor .rails-hl code { font: inherit; white-space: inherit; }

.rails-editor textarea {
  position: relative;
  display: block;
  width: 100%;
  min-height: 20rem;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  overflow: auto;
}
.rails-editor textarea:focus { outline: none; }
/* The selection must read even though the text itself is transparent. */
.rails-editor textarea::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* Syntax colours. Dark by default, light under prefers-color-scheme — matching the app's theme. */
.rails-hl .y-key { color: #79c0ff; }
.rails-hl .y-val { color: #a5d6ff; }
.rails-hl .y-str { color: #7ee787; }
.rails-hl .y-num { color: #f2cc60; }
.rails-hl .y-bool { color: #ff7b72; }
.rails-hl .y-punct { color: #8b949e; }
.rails-hl .y-com { color: #8b949e; font-style: italic; }

@media (prefers-color-scheme: light) {
  .rails-hl .y-key { color: #0550ae; }
  .rails-hl .y-val { color: #0a3069; }
  .rails-hl .y-str { color: #116329; }
  .rails-hl .y-num { color: #953800; }
  .rails-hl .y-bool { color: #cf222e; }
  .rails-hl .y-punct { color: #6e7781; }
  .rails-hl .y-com { color: #6e7781; }
}

.rails-errors {
  margin: 0.57rem 0 0;
  padding: 0.57rem 0.71rem;
  font: 0.86rem/1.5 var(--mono);
  white-space: pre-wrap;
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--critical) 35%, transparent);
  border-radius: 0.57rem;
}
.rails-errors[hidden] { display: none; }
.rails-actions {
  display: flex;
  align-items: center;
  gap: 0.57rem;
  margin-top: 0.57rem;
  flex-wrap: wrap;
}
.rails-actions button {
  padding: 0.43rem 1rem;
  font: 600 0.93rem var(--sans);
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 0.57rem;
  cursor: pointer;
}
.rails-actions button.ghost { color: var(--text); background: transparent; border: 1px solid var(--border); }
.rails-actions button:disabled { opacity: 0.6; cursor: default; }
.rails-status { font-size: 0.86rem; color: var(--muted); }
.rails-status[data-state="ok"] { color: var(--good, #3fb950); }
.rails-status[data-state="err"] { color: var(--critical); }
.rails-status[data-state="busy"] { color: var(--accent); }