/* regex-tester: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.rx-pattern { display: flex; align-items: center; gap: 6px; background: var(--ink); border-radius: 12px; padding: 6px 14px; }
.rx-pattern input { flex: 1; background: transparent; border: 0; color: #fff; padding: 8px 4px; box-shadow: none !important; }
.rx-slash, .rx-flags { font-family: var(--mono); font-size: 1.2rem; color: var(--c1); }
.rx-flag-list { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rx-flag-list .checkbox { font-weight: 400; font-size: 0.92rem; }
.rx-highlight, .jwt-json {
    min-height: 210px; margin: 0; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto;
    font-family: var(--mono); font-size: 0.88rem; line-height: 1.55; background: #FBFCFE; border: 1px solid var(--line-strong); border-radius: var(--r-control);
}
.rx-highlight mark { background: color-mix(in srgb, var(--signal) 28%, transparent); color: var(--ink); border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 45%, transparent); }
.rx-highlight mark:nth-of-type(even) { background: color-mix(in srgb, var(--c2) 35%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c2) 60%, transparent); }
.rx-highlight .rx-empty { padding: 0 2px; }
#rx-matches td:nth-child(2), #rx-matches td:nth-child(4) { font-family: var(--mono); font-size: 0.85rem; white-space: pre-wrap; text-align: left; }