/* Regex Tester — tool-specific styles (loaded after site.css).
 * Teal rule (WCAG AA): teal text/links/icons on light backgrounds use
 * --color-teal-text (#0F766E); #14B8A6 is a fill only, always with navy
 * #142B4A text on it — this file uses teal only as text/outline colour. */

.rx-pattern-input { font-family: var(--font-mono); font-size: var(--text-base); }

.rx-flags {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  align-items: center; margin: var(--space-2) 0 var(--space-4);
}
.rx-flags .checkbox-row { margin: 0; }
.rx-flags .flag-letter { font-family: var(--font-mono); font-weight: var(--weight-semibold); }
.rx-flags .flag-name { color: var(--color-muted); font-size: var(--text-sm); }

.rx-highlight-pre {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-sm);
  white-space: pre-wrap; word-break: break-word; line-height: var(--leading-relaxed);
}
.rx-mark {
  background: #FDE68A; color: var(--color-ink);
  padding: 0 1px; border-radius: 3px;
}
.rx-mark-zero {
  display: inline-block; width: 3px; min-height: 1em;
  background: var(--color-teal-text, #0F766E); padding: 0; vertical-align: text-bottom;
}

.rx-table { font-size: var(--text-sm); }
.rx-table td { font-family: var(--font-mono); word-break: break-word; }

.rx-replace-box {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-sm);
  white-space: pre-wrap; word-break: break-word;
}

.rx-library-desc { max-width: 72ch; }
.rx-library-select { font-family: var(--font-mono); font-size: var(--text-sm); }

.rx-cheat td:first-child {
  font-family: var(--font-mono); font-weight: var(--weight-semibold);
  white-space: nowrap; width: 15ch;
}

.rx-slow strong { color: var(--color-warning, #92400E); }