/* ============================================================================
   ToolBench — regex.css
   Regex Tester & Explainer: pattern input, flags, match highlighting,
   explanation tree, replace preview, list-test results, Quick Reference.

   Loaded alongside tools.css, which already supplies .card/.field/.inp/
   .tabs/.panel/.warn/.err/.capnote/.count — none of that is redeclared here.
   Tokens come from site.css.
   ============================================================================ */

/* --------------------------------------------------------- pattern input --- */
.rx-patternrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.rx-patternwrap{
  flex:1 1 320px;display:flex;align-items:center;gap:0;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  padding:0 10px;
}
.rx-patternwrap:focus-within{border-color:var(--blueprint);box-shadow:0 0 0 3px rgba(44,110,142,.14)}
.rx-slash{flex:none;font:500 16px/1 var(--mono);color:var(--slate-light)}
.rx-patterninp{
  flex:1 1 auto;border:0;background:none;padding:12px 6px;
  font:400 16px/1.5 var(--mono);color:var(--ink);
}
.rx-patterninp:focus{outline:0;box-shadow:none}

.rx-flags{display:flex;flex-wrap:wrap;gap:4px}
.rx-flag{
  min-width:34px;min-height:34px;padding:0 8px;cursor:pointer;
  background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);
  font:600 13px/1 var(--mono);color:var(--slate);text-transform:lowercase;
}
.rx-flag[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--blueprint-light)}

/* --------------------------------------------------------------- test tab --- */
.rx-ta{
  display:block;width:100%;padding:12px;
  background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--radius);
  color:var(--ink);font:400 15px/1.6 var(--mono);resize:vertical;min-height:7em;
}
.rx-ta:focus{outline:0;border-color:var(--blueprint);box-shadow:0 0 0 3px rgba(44,110,142,.14)}

.rx-highlight{
  margin:14px 0 0;padding:12px;
  background:#fff;border:1px solid var(--paper-line);border-radius:var(--radius);
  font:400 14.5px/1.7 var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;
}
.rx-mark{background:rgba(127,209,224,.35);border-radius:2px;padding:0 1px;color:var(--ink)}
.rx-mark:nth-of-type(3n+2){background:rgba(245,166,35,.35)}
.rx-mark:nth-of-type(3n){background:rgba(76,175,125,.35)}

.rx-scroll{overflow-x:auto;margin:14px 0 0}
.rx-matchtable{min-width:520px}
.rx-table{width:100%;border-collapse:collapse;font-size:14px}
.rx-table th,.rx-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--paper-line)}
.rx-table th{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--slate-light);border-bottom:2px solid var(--paper-line)}
.rx-groupchip{
  display:inline-block;margin:0 8px 4px 0;padding:2px 6px;
  background:var(--paper);border-radius:2px;font-size:12.5px;
}

/* ----------------------------------------------------------- explain tab --- */
.rx-explain{margin:0;padding:0;list-style:none;font:400 14.5px/2 var(--mono)}
.rx-explain li{padding:2px 0;color:var(--ink);border-bottom:1px dashed var(--paper-line)}
.rx-explain li:last-child{border-bottom:0}
.rx-explain li.rx-or{color:var(--blueprint);font-weight:600;letter-spacing:.06em}
.rx-ind{display:inline-block;width:20px}

/* ----------------------------------------------------------- replace tab --- */
.rx-beforeafter{display:grid;gap:14px;grid-template-columns:1fr;margin:16px 0 0}
@media (min-width:768px){.rx-beforeafter{grid-template-columns:1fr 1fr}}
.rx-balabel{margin:0 0 6px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-light)}
.rx-bacode{
  margin:0;padding:12px;max-height:280px;overflow:auto;
  background:var(--ink);color:#CFE6EE;border-radius:2px;
  font:400 13.5px/1.65 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;
}

/* --------------------------------------------------------------- list tab --- */
.rx-listresults{margin:14px 0 0;padding:0;list-style:none}
.rx-listresults li{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:9px 12px;margin:0 0 5px;border-radius:var(--radius);font:400 14px/1.5 var(--mono);
}
.rx-listresults li.is-pass{background:rgba(76,175,125,.08);color:var(--success-ink)}
.rx-listresults li.is-fail{background:var(--danger-bg);color:var(--danger-ink)}
.rx-listmark{flex:none;font-weight:700}

/* --------------------------------------------------------- quick reference --- */
.rx-refpanel{margin:26px 0 0;border:1px solid var(--paper-line);border-radius:var(--radius);overflow:hidden}
.rx-refhead{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 16px;background:var(--paper);border:0;cursor:pointer;
  font:600 15px/1.3 var(--display);color:var(--blueprint);
}
.rx-refchevron{transition:transform .15s}
.rx-refchevron.is-open{transform:rotate(180deg)}
.rx-refbody{padding:14px 16px;background:#fff;border-top:1px solid var(--paper-line)}
.rx-refsearch{margin:0 0 12px}
.rx-refgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:768px){.rx-refgrid{grid-template-columns:180px 1fr}}
.rx-refcats{display:flex;flex-wrap:wrap;gap:4px}
@media (min-width:768px){.rx-refcats{flex-direction:column;flex-wrap:nowrap}}
.rx-refcat{
  text-align:left;min-height:34px;padding:0 10px;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--radius);
  font:500 13px/1.3 var(--sans);color:var(--slate);
}
.rx-refcat[aria-pressed="true"]{background:var(--paper);border-color:var(--paper-line);color:var(--ink);font-weight:600}
.rx-refrows{margin:0;padding:0;list-style:none;max-height:360px;overflow-y:auto}
.rx-refrow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;cursor:pointer;border-bottom:1px solid var(--paper-line);
}
.rx-refrow:hover,.rx-refrow:focus-visible{background:var(--paper);outline:0}
.rx-refrow span:first-child{flex:1 1 220px;font-size:14px;color:var(--ink)}
.rx-reftoken{flex:none;font:500 13px/1 var(--mono);color:var(--success-ink)}