/* ENP Regex Tools — supplemental CSS only (spec R4/R7: < 10 KB, Tailwind does
 * the heavy lifting). Everything below is additive, never overrides regex.html. */

/* Match highlight in the overlay layer (from regex.html). */
.regex-highlight {
  background-color: rgba(37, 99, 235, 0.15);
  border-bottom: 2px solid #2563eb;
  border-radius: 2px;
}

/* Custom scrollbars (from regex.html). */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

/* The textarea / highlight overlay pair. The textarea sits on top, transparent
 * text, and the highlight layer behind it renders the same text with the match
 * spans — so they must share identical metrics (font, line-height, padding). */
.enp-rx-editor {
  position: relative;
  min-height: 360px;
}
.enp-rx-highlight,
.enp-rx-text {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.enp-rx-highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: transparent;
  overflow: auto;
}
.enp-rx-text {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 360px;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
}

/* Code blocks never overflow their card on narrow screens. */
[data-enp-rx="detail"] pre {
  max-width: 100%;
}