/* =========================================================================
   /regex-tester - the few pieces text-tools.css does not already provide.
   Colours come from the bench / site custom properties so light, dark and
   contrast themes all follow automatically.
   ========================================================================= */

/* ---- the /pattern/flags box ---- */
.regex-page .rx-pattern{
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); overflow: hidden;
}
.regex-page .rx-pattern:focus-within{ border-color: var(--mark); box-shadow: 0 0 0 3px var(--mark-soft); }
.regex-page .rx-pattern.is-bad{ border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.regex-page .rx-pattern .tt-input{
  flex: 1 1 auto; min-width: 0; border: 0 !important; box-shadow: none !important; outline: none !important; background: transparent;
  font-family: var(--font-mono); font-size: 14px;
}
.regex-page .rx-slash{
  flex: 0 0 auto; padding: 0 10px; align-self: stretch; display: flex; align-items: center;
  font-family: var(--font-mono); font-size: 15px; color: var(--ink-3); background: var(--paper-2);
}
.regex-page .rx-slash b{ color: var(--mark-deep, var(--mark)); font-weight: 600; margin-left: 1px; }
.regex-page .rx-error{
  margin-top: 6px; padding: 6px 10px; border-radius: var(--r-sm);
  background: var(--bad-soft); color: var(--bad);
  font-family: var(--font-mono); font-size: 11.5px;
}

/* ---- flag toggles ---- */
.regex-page .rx-flags{ flex-wrap: wrap; row-gap: 6px; }
.regex-page .rx-flags .mini-btn{ font-family: var(--font-mono); font-weight: 600; }
.regex-page .rx-flags .mini-btn span{ font-weight: 400; color: var(--ink-3); margin-left: 3px; }
.regex-page .rx-flags .mini-btn[aria-pressed="true"]{ background: var(--mark-soft); border-color: var(--mark); color: var(--mark-deep, var(--mark)); }
.regex-page .rx-flags .mini-btn[aria-pressed="true"] span{ color: inherit; }
@media (max-width: 700px){ .regex-page .rx-flags .mini-btn span{ display: none; } }

.regex-page .rx-examples select{ cursor: pointer; padding-right: 8px; }

/* ---- match highlighting: alternate tints so adjacent matches stay distinct ---- */
.regex-page .rx-preview{ max-height: 520px; }
.regex-page .rx-hl{
  background: var(--mark-soft); color: var(--mark-deep, var(--mark));
  border-radius: 3px; padding: 0 1px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--mark-line, var(--mark));
}
.regex-page .rx-hl.alt{ background: var(--ok-soft); color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); }
/* A zero-length match has no text to colour, so it gets a thin caret instead. */
.regex-page .rx-hl.empty{ display: inline-block; width: 2px; height: 1.1em; padding: 0; vertical-align: text-bottom; background: var(--mark); box-shadow: none; }

/* ---- groups table ---- */
.regex-page #groupsTable.rx-wide{ overflow-x: auto; }
.regex-page #groupsTable.rx-wide .tt-thead,
.regex-page #groupsTable.rx-wide .tt-row{ min-width: 640px; }
.regex-page .rx-groups-body{ max-height: 520px; }

.regex-page .rx-inline-field{ margin: 0 0 10px; }

/* ---- code snippets ---- */
.regex-page .rx-code{ display: grid; gap: 12px; }
.regex-page .rx-snippet{ border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.regex-page .rx-snippet-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px 7px 13px; background: var(--paper-2); border-bottom: 1px solid var(--rule-2);
}
.regex-page .rx-snippet-head strong{ font-size: 12.5px; }
.regex-page .rx-snippet pre{ margin: 0; padding: 12px 13px; overflow-x: auto; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; }
.regex-page .rx-notes{ margin: 0; padding-left: 18px; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

/* ---- explainer ---- */
.regex-page .rx-tok.rx-group .tt-strong{ color: var(--mark-deep, var(--mark)); }
.regex-page .rx-tok.rx-quant .tt-strong{ color: var(--ok); }
.regex-page .rx-tok.rx-anchor .tt-strong,
.regex-page .rx-tok.rx-alt .tt-strong{ color: var(--warn); }
.regex-page .rx-tok.rx-bad{ background: var(--bad-soft); }

/* ---- cheat sheet: three tables side by side on wide screens ---- */
.regex-page .rx-cheats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px){ .regex-page .rx-cheats{ grid-template-columns: 1fr; } }