/* Regex Tester — a form of cards (styles/components/form.css): the pattern
   card (/pattern/flags, the error caption, the flag pills; the whole card
   takes the focus ring), the test-string editor (a transparent textarea over
   the highlight layer, then the Options / Sample / Clear tray), the matches
   card and the cheat sheet. The Options sheet holds replace mode. Only the
   pattern field, the pills, the editor, the match entries and the cheat grid
   are the page's own. */

/* Selectors below that style a form field are written input.<class>: the
   shared form rule input[type="…"] in common.css is (0,1,1) and silently
   beats a bare class. */

/* Pattern row: /pattern/flags in mono. */
.rx-pattern-row {
  gap: var(--space-1);
  font-family: var(--mono);
}

.rx-delim {
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 500;
  user-select: none;
}

input.rx-pattern {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 4px 2px;
  outline: none;
  letter-spacing: 0;
}

input.rx-pattern::placeholder { color: var(--text-placeholder); }
/* The pattern is a borderless field set between "/" delimiters, so the focus
   ring belongs to the whole card, not to a box around the text. */
input.rx-pattern:focus { border-color: transparent; box-shadow: none; }
.rx-pattern-card { transition: box-shadow var(--duration-snap) var(--ease-standard); }
.rx-pattern-card:focus-within {
  box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft), var(--card-shadow);
}

.rx-flags-display {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  min-width: 1ch;
  padding-left: 2px;
}

/* The syntax error is a caption row; mono, since it quotes the pattern. */
.rx-error { font-family: var(--mono); }

/* Flag pills */
.rx-flags {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rx-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  background: var(--bg-fill-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background var(--duration-snap) var(--ease-standard);
}

.rx-flag:hover { background: var(--bg-hover-strong); }

.rx-flag input { display: none; }

.rx-flag span {
  font-weight: 600;
  color: var(--text-muted);
}

.rx-flag em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-muted);
}

.rx-flag:has(input:checked) {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}

.rx-flag:has(input:checked) span,
.rx-flag:has(input:checked) em {
  color: var(--accent);
}

/* Test string editor: a transparent textarea over the highlight layer. Both
   share one box model so the marks sit exactly under the text; the card draws
   the edges. */
.rx-editor {
  position: relative;
  min-height: 280px;
}

.rx-highlight,
textarea.rx-input {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--row-pad-y) var(--inset);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  tab-size: 2;
}

.rx-highlight {
  pointer-events: none;
  color: transparent;
  background: transparent;
  z-index: 1;
}

.rx-highlight mark {
  background: var(--accent-soft);
  color: transparent;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.rx-highlight mark.is-active {
  background: var(--warning-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent);
}

textarea.rx-input {
  background: transparent;
  color: var(--text);
  resize: none;
  outline: none;
  z-index: 2;
  caret-color: var(--accent);
}

textarea.rx-input::placeholder { color: var(--text-placeholder); }
textarea.rx-input:focus { border: none; box-shadow: none; }
textarea.rx-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Sample / Clear stay together at the end of the tray. */
.rx-tray {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Matches: one entry per match inside the card, newest-first scrolling list. */
.rx-matches-list {
  max-height: 360px;
  overflow-y: auto;
}

.rx-match {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--row-pad-y) var(--inset);
  font-family: var(--mono);
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--duration-snap) var(--ease-standard);
}
.rx-match + .rx-match { border-top: var(--sep-w) solid var(--sep); }

.rx-match:hover { background: var(--bg-hover); }
.rx-match.is-active { background: var(--warning-soft); }

.rx-match__head {
  display: flex;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: 11.5px;
}

.rx-match__index { color: var(--accent); font-weight: 600; }

.rx-match__text {
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.rx-match__groups {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

.rx-match__group {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
}

.rx-match__group b {
  color: var(--text-dim);
  font-weight: 600;
}

/* Replace (Options sheet) */
input.rx-replacement {
  font-family: var(--mono);
  font-size: 13px;
}

input.rx-replacement::placeholder { color: var(--text-placeholder); }

.rx-output {
  --code-output-max-h: 280px;
  min-height: 80px;
}

/* Cheat sheet: shared disclosure row with a tool-specific syntax grid. */
.rx-cheat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-2) var(--space-4);
}

.rx-cheat-grid > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-muted);
}

.rx-cheat-grid code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-fill-2);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}