/* Regex Builder (regex/regex-builder.php). Layout tokens only (assets/layout/layout.css), so light and dark both work.
   Sections: frame and header, pattern editor and flags, status and notes, blocks, block palette, explanation,
   tester (samples, legend, tabs, tables), test cases, code, drawer (library + cheat sheet), drag and drop, phone. */

.rb-page {
    max-width: none; gap: 16px;   /* a workbench: uses the whole content width */
    /* token colours: part of the pattern (editor text, block stripe, explanation chip) */
    --rb-text: #3f3f46; --rb-esc: #c0267d; --rb-cls: #0a6cf0; --rb-set: #7c3aed; --rb-grp: #18794e; --rb-look: #0e7490;
    --rb-alt: #c2410c; --rb-quant: #a35200; --rb-anchor: #c2410c; --rb-ref: #be185d; --rb-err: var(--bad);
    /* group colours in the tester: background + underline */
    --rb-m: rgba(10, 108, 240, .14); --rb-m-line: rgba(10, 108, 240, .55); --rb-m2: rgba(10, 108, 240, .24);
    --rb-g1: rgba(24, 121, 78, .24); --rb-g1-l: #18794e;
    --rb-g2: rgba(163, 82, 0, .24); --rb-g2-l: #a35200;
    --rb-g3: rgba(124, 58, 237, .22); --rb-g3-l: #7c3aed;
    --rb-g4: rgba(190, 24, 93, .2); --rb-g4-l: #be185d;
    --rb-g5: rgba(14, 116, 144, .24); --rb-g5-l: #0e7490;
    --rb-g6: rgba(202, 138, 4, .28); --rb-g6-l: #a16207;
    --rb-hot: rgba(245, 165, 36, .32);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rb-page {
        --rb-text: #d4d4d8; --rb-esc: #f472b6; --rb-cls: #6aa8ff; --rb-set: #b794ff; --rb-grp: #3fcf8e; --rb-look: #22d3ee;
        --rb-alt: #fb923c; --rb-quant: #f5a524; --rb-anchor: #fb923c; --rb-ref: #f472b6;
        --rb-m: rgba(76, 149, 255, .2); --rb-m-line: rgba(76, 149, 255, .7); --rb-m2: rgba(76, 149, 255, .32);
        --rb-g1: rgba(63, 207, 142, .26); --rb-g1-l: #3fcf8e;
        --rb-g2: rgba(245, 165, 36, .26); --rb-g2-l: #f5a524;
        --rb-g3: rgba(183, 148, 255, .26); --rb-g3-l: #b794ff;
        --rb-g4: rgba(244, 114, 182, .24); --rb-g4-l: #f472b6;
        --rb-g5: rgba(34, 211, 238, .22); --rb-g5-l: #22d3ee;
        --rb-g6: rgba(250, 204, 21, .22); --rb-g6-l: #facc15;
        --rb-hot: rgba(245, 165, 36, .3);
    }
}
:root[data-theme="dark"] .rb-page {
    --rb-text: #d4d4d8; --rb-esc: #f472b6; --rb-cls: #6aa8ff; --rb-set: #b794ff; --rb-grp: #3fcf8e; --rb-look: #22d3ee;
    --rb-alt: #fb923c; --rb-quant: #f5a524; --rb-anchor: #fb923c; --rb-ref: #f472b6;
    --rb-m: rgba(76, 149, 255, .2); --rb-m-line: rgba(76, 149, 255, .7); --rb-m2: rgba(76, 149, 255, .32);
    --rb-g1: rgba(63, 207, 142, .26); --rb-g1-l: #3fcf8e;
    --rb-g2: rgba(245, 165, 36, .26); --rb-g2-l: #f5a524;
    --rb-g3: rgba(183, 148, 255, .26); --rb-g3-l: #b794ff;
    --rb-g4: rgba(244, 114, 182, .24); --rb-g4-l: #f472b6;
    --rb-g5: rgba(34, 211, 238, .22); --rb-g5-l: #22d3ee;
    --rb-g6: rgba(250, 204, 21, .22); --rb-g6-l: #facc15;
    --rb-hot: rgba(245, 165, 36, .3);
}

/* the palette, drawer and menus sit outside .rb-page: give them the same token colours */
.rb-pop, .rb-drawer { --rb-text: var(--ink); --rb-cls: var(--accent); }

.rb-page [hidden], .rb-pop[hidden], .rb-drawer[hidden], .rb-scrim[hidden] { display: none !important; }
.rb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rb-lbl { display: block; font-size: 11.5px; font-weight: 500; color: var(--faint); margin: 0; }
.rb-icon-btn { min-width: 28px; padding: 0 6px; }
.rb-chev { width: 12px !important; height: 12px !important; opacity: .7; }
.rb-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.rb-dot.is-ok { background: var(--ok); }
.rb-dot.is-bad { background: var(--bad); }
.rb-row-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-card { gap: 14px; min-width: 0; }

/* ---------- header ---------- */
.rb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rb-head .tool-head { flex: 1 1 420px; min-width: 0; }
.rb-head-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rb-btn-group { display: inline-flex; }
.rb-btn-group .ui-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rb-btn-group .ui-btn + .ui-btn { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rb-head-acts .ui-btn:disabled { opacity: .45; cursor: default; }
.rb-head-acts .ui-btn:disabled:hover { background: var(--bg); }

.rb-menu-wrap { position: relative; }
.rb-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px; padding: 5px; display: grid; gap: 1px;
    background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; box-shadow: var(--shadow);
    animation: rb-pop-in var(--mo-fast) var(--mo-ease-out);
}
.rb-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%; height: 32px; padding: 0 9px; border: 0; border-radius: 6px;
    background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; white-space: nowrap;
}
.rb-menu button:hover, .rb-menu button:focus-visible { background: var(--hover); outline: none; }
.rb-menu button .lay-i { color: var(--dim); width: 14px; height: 14px; }
.rb-menu button.is-danger, .rb-menu button.is-danger .lay-i { color: var(--bad); }
.rb-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
@keyframes rb-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- pattern editor ---------- */
.rb-pattern { gap: 12px; }
/* the pattern stays in view while you scroll the blocks, only where there is room for it */
@media (min-width: 1181px) and (min-height: 820px) {
    .rb-pattern { position: sticky; top: calc(var(--bar-h) + 8px); z-index: 30; box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgba(0, 0, 0, .35); }
}
.rb-pattern-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rb-pattern-top .rb-lbl { font-size: 12px; color: var(--dim); }
.rb-flavour { display: inline-flex; align-items: center; gap: 8px; }
.rb-flavour-lbl { font-size: 12px; color: var(--faint); }

.rb-editor { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.rb-delim { flex: none; padding-top: 9px; font: 500 16px/1.55 var(--f-mono); color: var(--faint); user-select: none; }
.rb-delim b { font-weight: 500; color: var(--rb-quant); }
.rb-code { position: relative; flex: 1 1 auto; min-width: 0; }
.rb-code-hl, .rb-code-in {
    margin: 0; padding: 8px 12px; min-height: 42px; border: 1px solid transparent; border-radius: 8px;
    font: 400 15px/1.55 var(--f-mono); letter-spacing: 0; tab-size: 4;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all;
}
.rb-code-hl { position: absolute; inset: 0; overflow: hidden; color: var(--rb-text); background: var(--sub); pointer-events: none; }
.rb-code-in {
    position: relative; display: block; width: 100%; resize: none; overflow: hidden;
    color: transparent; caret-color: var(--ink); background: transparent !important; -webkit-text-fill-color: transparent;
    border-color: var(--ctl-line);
}
.rb-code-in::placeholder { color: var(--faint); -webkit-text-fill-color: var(--faint); font-family: var(--f-mono); font-size: 14px; }
.rb-code-in::selection { background: rgba(10, 108, 240, .28); -webkit-text-fill-color: transparent; }
.rb-code-in.is-error { border-color: var(--bad); }
.rb-copy { flex: none; margin-top: 7px; }

/* token colours (editor and explanation chips) */
.rb-t-lit { color: var(--rb-text); }
.rb-t-esc { color: var(--rb-esc); }
.rb-t-cls { color: var(--rb-cls); }
.rb-t-set { color: var(--rb-set); }
.rb-t-grp { color: var(--rb-grp); font-weight: 500; }
.rb-t-look { color: var(--rb-look); font-weight: 500; }
.rb-t-alt { color: var(--rb-alt); font-weight: 600; }
.rb-t-quant { color: var(--rb-quant); font-weight: 500; }
.rb-t-anchor { color: var(--rb-anchor); font-weight: 500; }
.rb-t-ref { color: var(--rb-ref); }
.rb-t-err { color: var(--rb-err); text-decoration: wavy underline; text-decoration-color: var(--bad); text-underline-offset: 3px; }
.rb-hot { background: var(--rb-hot); border-radius: 3px; }
.rb-pair { box-shadow: inset 0 0 0 1px currentColor; border-radius: 3px; }

/* flags */
.rb-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-flag {
    display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px 0 6px; border: 1px solid var(--line2); border-radius: 999px;
    background: var(--bg); color: var(--dim); font: inherit; font-size: 12px; cursor: pointer; transition: background var(--mo-fast), border-color var(--mo-fast), color var(--mo-fast);
}
.rb-flag b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sub); border: 1px solid var(--line2); font: 600 11px var(--f-mono); color: var(--dim); }
.rb-flag:hover { color: var(--ink); border-color: var(--faint); }
.rb-flag[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, var(--line2)); background: var(--accent-bg); }
.rb-flag[aria-pressed="true"] b { background: var(--accent); border-color: var(--accent); color: #fff; }

/* status + notes */
.rb-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--dim); min-height: 20px; }
.rb-status .rb-dot { width: 8px; height: 8px; }
.rb-status[data-state="ok"] .rb-dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.rb-status[data-state="error"] { color: var(--bad); }
.rb-status[data-state="error"] .rb-dot { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.rb-status[data-state="slow"] .rb-dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.rb-status[data-state="busy"] .rb-dot { background: var(--accent); animation: rb-pulse 1s ease-in-out infinite; }
.rb-status b { color: var(--ink); font-weight: 600; }
.rb-status .rb-sep { color: var(--line2); }
@keyframes rb-pulse { 50% { opacity: .3; } }
.rb-warns { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rb-warns:empty { display: none; }
.rb-warn {
    display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--sub);
    color: var(--dim); font-size: 12.5px; line-height: 1.45;
}
.rb-warn::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.rb-warn[data-level="warn"] { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.rb-warn[data-level="warn"]::before { background: var(--warn); }
.rb-warn[data-level="bad"] { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: var(--bad-bg); color: var(--ink); }
.rb-warn[data-level="bad"]::before { background: var(--bad); }
.rb-warn[data-start] { cursor: pointer; }
.rb-warn[data-start]:hover { border-color: var(--line2); }

/* ---------- grid ---------- */
.rb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rb-col { display: grid; gap: 16px; min-width: 0; }

/* ---------- blocks ---------- */
.rb-tree { display: grid; gap: 0; min-width: 0; }
.rb-list { display: grid; gap: 6px; min-width: 0; position: relative; }
.rb-branches { display: grid; gap: 0; min-width: 0; }
.rb-branch { display: grid; gap: 6px; padding: 8px; border: 1px dashed var(--line2); border-radius: 8px; background: color-mix(in srgb, var(--sub) 70%, transparent); min-width: 0; }
.rb-branch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--faint); font-weight: 500; }
.rb-or { display: flex; align-items: center; gap: 8px; margin: 4px 0; font: 600 11px var(--f-mono); color: var(--rb-alt); }
.rb-or::before, .rb-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.rb-block {
    --cat: var(--rb-text);
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start;
    padding: 8px 8px 8px 4px; border: 1px solid var(--line); border-left: 3px solid var(--cat); border-radius: 8px; background: var(--bg);
    transition: border-color var(--mo-fast), box-shadow var(--mo-fast), background var(--mo-fast); min-width: 0;
}
.rb-block[data-cat="cls"] { --cat: var(--rb-cls); }
.rb-block[data-cat="set"] { --cat: var(--rb-set); }
.rb-block[data-cat="anchor"] { --cat: var(--rb-anchor); }
.rb-block[data-cat="grp"] { --cat: var(--rb-grp); }
.rb-block[data-cat="look"] { --cat: var(--rb-look); }
.rb-block[data-cat="ref"] { --cat: var(--rb-ref); }
.rb-block:hover { border-color: var(--line2); border-left-color: var(--cat); }
.rb-block.is-hot { box-shadow: 0 0 0 2px var(--rb-hot); border-color: color-mix(in srgb, var(--warn) 50%, var(--line2)); border-left-color: var(--cat); }
.rb-block.is-dragging { opacity: .35; }
.rb-block:focus-within { border-color: var(--line2); border-left-color: var(--cat); }

.rb-handle {
    display: grid; place-items: center; width: 22px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: none;
    color: var(--faint); cursor: var(--cur-grab, pointer); touch-action: none;
}
.rb-handle:hover { background: var(--hover); color: var(--ink); }
.rb-handle:active { cursor: var(--cur-grabbing, pointer); }
.rb-handle svg { width: 12px; height: 16px; fill: currentColor; }

.rb-block-main { display: grid; gap: 7px; min-width: 0; }
.rb-block-top { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; min-height: 22px; padding-top: 4px; }
.rb-kind { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rb-kind-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: color-mix(in srgb, var(--cat) 16%, transparent); color: var(--cat); font: 600 10.5px var(--f-mono); }
.rb-tok { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px var(--f-mono); color: var(--cat); background: var(--sub); border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; line-height: 20px; }
.rb-qpill { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--warn-bg); color: var(--rb-quant); font-size: 11.5px; font-weight: 500; }

.rb-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rb-fields .tw-input, .rb-fields .tw-select { height: 30px; font-size: 12.5px; }
.rb-fields .tw-input { flex: 1 1 140px; min-width: 0; width: auto; }
.rb-fields .tw-select { flex: 0 1 auto; width: auto; font-weight: 400; }
.rb-fields .rb-num { flex: 0 0 64px; width: 64px; }
.rb-fields .rb-name { flex: 0 1 140px; }
.rb-q { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.rb-q .tw-select { flex: 0 1 auto; }
.rb-field-lbl { font-size: 12px; color: var(--faint); white-space: nowrap; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-chip {
    height: 22px; padding: 0 7px; border: 1px solid var(--line2); border-radius: 999px; background: var(--bg); color: var(--dim);
    font: 11.5px var(--f-mono); cursor: pointer;
}
.rb-chip:hover { color: var(--ink); border-color: var(--faint); }
.rb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); white-space: nowrap; cursor: pointer; }
.rb-check input { margin: 0; }
.rb-quant { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 7px; border-top: 1px dashed var(--line); min-width: 0; }

.rb-block-acts { display: flex; gap: 2px; opacity: .55; transition: opacity var(--mo-fast); }
.rb-block:hover > .rb-block-acts, .rb-block:focus-within > .rb-block-acts { opacity: 1; }
.rb-act { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--dim); cursor: pointer; }
.rb-act:hover { background: var(--hover); color: var(--ink); }
.rb-act.is-danger:hover { background: var(--bad-bg); color: var(--bad); }
.rb-act:disabled { opacity: .3; cursor: default; background: none; }
.rb-act svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.rb-children { display: grid; gap: 6px; padding: 8px 0 2px 10px; border-left: 2px solid color-mix(in srgb, var(--cat) 35%, var(--line)); margin-left: 2px; min-width: 0; }
.rb-add {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; width: 100%; border: 1px dashed var(--line2); border-radius: 8px;
    background: none; color: var(--dim); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color var(--mo-fast), color var(--mo-fast), background var(--mo-fast);
}
.rb-add:hover, .rb-add[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.rb-add .lay-i { width: 14px; height: 14px; }
.rb-add-row { display: flex; gap: 6px; }
.rb-add-row .rb-add { flex: 1 1 auto; }
.rb-add-row .rb-add.is-alt { flex: 0 0 auto; width: auto; padding: 0 12px; }

.rb-raw-mode { display: grid; gap: 8px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--bad) 45%, var(--line2)); border-radius: 8px; background: var(--bad-bg); color: var(--ink); }
.rb-raw-mode p { margin: 0; color: var(--dim); }

/* empty state (blocks, results) */
.rb-empty { display: grid; justify-items: center; gap: 10px; padding: 26px 16px; text-align: center; border: 1px dashed var(--line2); border-radius: 10px; background: var(--sub); }
.rb-empty svg.rb-empty-art { width: 64px; height: 40px; }
.rb-empty h3 { margin: 0; font-size: 14px; font-weight: 600; }
.rb-empty p { margin: 0; color: var(--dim); max-width: 46ch; }
.rb-empty .ui-chips { justify-content: center; }
.rb-empty-art .a { fill: var(--bg); stroke: var(--line2); }
.rb-empty-art .b { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.rb-empty-art .c { fill: var(--faint); font: 600 13px var(--f-mono); }

/* drag and drop */
.rb-ghost {
    position: fixed; z-index: 500; pointer-events: none; opacity: .92; box-shadow: var(--shadow); transform: rotate(-1.2deg); border-radius: 8px;
    max-width: min(520px, calc(100vw - 32px));
}
.rb-drop { height: 0; position: relative; margin: -3px 0; pointer-events: none; }
.rb-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.rb-drop::after { content: ""; position: absolute; left: -5px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-sizing: border-box; }
body.rb-dragging, body.rb-dragging * { cursor: var(--cur-grabbing, default) !important; user-select: none; }
.rb-list.is-drop-target > .rb-add { border-color: var(--accent); }

/* ---------- block palette ---------- */
.rb-pop {
    position: absolute; z-index: 150; width: 400px; max-width: calc(100vw - 24px); max-height: min(460px, 70vh); display: flex; flex-direction: column;
    background: var(--bg); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
    animation: rb-pop-in var(--mo-fast) var(--mo-ease-out);
}
.rb-pop-head { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.rb-pop-head .tw-input { height: 32px; font-family: var(--f-sans); font-size: 13px; }
.rb-pop-body { overflow: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.rb-pop-cat { padding: 8px 4px 4px; font-size: 11px; font-weight: 500; color: var(--faint); }
.rb-pop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.rb-pop-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; align-items: center; padding: 7px 9px; border: 1px solid transparent; border-radius: 7px;
    background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.rb-pop-item:hover, .rb-pop-item:focus-visible, .rb-pop-item.is-active { background: var(--hover); border-color: var(--line); outline: none; }
.rb-pop-item b { font-weight: 500; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-pop-item code { font: 11.5px var(--f-mono); color: var(--rb-cls); white-space: nowrap; }
.rb-pop-item span { grid-column: 1 / -1; font-size: 11.5px; color: var(--faint); line-height: 1.35; }
.rb-pop-none { padding: 18px 8px; text-align: center; color: var(--dim); }

/* ---------- explanation ---------- */
.rb-explain { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rb-ex {
    display: grid; grid-template-columns: minmax(70px, max-content) minmax(0, 1fr); gap: 10px; align-items: baseline;
    padding: 5px 8px 5px calc(8px + var(--d, 0) * 16px); border-radius: 6px; cursor: default; transition: background var(--mo-fast);
}
.rb-ex:hover, .rb-ex.is-hot { background: var(--rb-hot); }
.rb-ex code { font: 12.5px var(--f-mono); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 6px; border-radius: 5px; background: var(--sub); border: 1px solid var(--line); }
.rb-ex span { color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.rb-ex[data-cat="alt"] span { color: var(--rb-alt); font-weight: 500; }
.rb-ex[data-cat="grp"] span, .rb-ex[data-cat="look"] span { color: var(--ink); font-weight: 500; }
.rb-ex-empty { color: var(--faint); padding: 6px 2px; }

/* ---------- tester ---------- */
.rb-samples { display: grid; gap: 10px; }
.rb-sample { display: grid; gap: 6px; min-width: 0; }
.rb-sample-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.rb-sample-head .rb-lbl { font-size: 12px; color: var(--dim); }
.rb-sample-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); }
.rb-sample-meta b { color: var(--ink); font-weight: 600; }
.rb-sample.is-active .rb-sample-head .rb-lbl { color: var(--ink); }
.rb-area { position: relative; min-width: 0; }
.rb-area-hl, .rb-area-in {
    margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px;
    font: 400 13px/1.6 var(--f-mono); letter-spacing: 0; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
    scrollbar-gutter: stable;
}
.rb-area-hl { position: absolute; inset: 0; overflow: hidden; color: transparent; background: var(--bg); pointer-events: none; }
.rb-area-in {
    position: relative; display: block; width: 100%; min-height: 96px; max-height: 360px; resize: vertical;
    color: var(--ink); background: transparent !important; overflow: auto;
    border-color: var(--ctl-line);
}
.rb-area-hl mark { color: transparent; border-radius: 2px; background: var(--rb-m); box-shadow: inset 0 -2px 0 var(--rb-m-line); }
.rb-area-hl mark.rb-alt { background: var(--rb-m2); }
.rb-area-hl mark.rb-sel { box-shadow: inset 0 0 0 2px var(--accent); }
.rb-area-hl mark .rb-g, .rb-area-hl .rb-g { color: transparent; border-radius: 2px; }
.rb-zero { position: relative; display: inline; }
.rb-zero::before { content: ""; position: absolute; left: -1px; top: -2px; bottom: -2px; width: 2px; background: var(--accent); border-radius: 1px; }
.g1 { background: var(--rb-g1); box-shadow: inset 0 -2px 0 var(--rb-g1-l); } .g2 { background: var(--rb-g2); box-shadow: inset 0 -2px 0 var(--rb-g2-l); }
.g3 { background: var(--rb-g3); box-shadow: inset 0 -2px 0 var(--rb-g3-l); } .g4 { background: var(--rb-g4); box-shadow: inset 0 -2px 0 var(--rb-g4-l); }
.g5 { background: var(--rb-g5); box-shadow: inset 0 -2px 0 var(--rb-g5-l); } .g6 { background: var(--rb-g6); box-shadow: inset 0 -2px 0 var(--rb-g6-l); }

.rb-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--dim); }
.rb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rb-legend i { width: 14px; height: 10px; border-radius: 3px; }
.rb-legend .is-match { background: var(--rb-m); box-shadow: inset 0 -2px 0 var(--rb-m-line); }

.rb-results { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; min-width: 0; }
.rb-tabs { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line2); border-radius: 8px; background: var(--sub); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rb-tabs button {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: none;
    color: var(--dim); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.rb-tabs button:hover { color: var(--ink); }
.rb-tabs button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line2), 0 1px 2px rgba(0, 0, 0, .06); }
.rb-tabs i { font: 500 11px var(--f-mono); color: var(--faint); font-style: normal; }
.rb-tabs i:empty { display: none; }
.rb-replace-row { display: grid; gap: 5px; }
.rb-replace-row .tw-input { font-family: var(--f-mono); }
.rb-panel { min-width: 0; }
.rb-panel-note { margin: 0 0 8px; font-size: 12px; color: var(--faint); }

.rb-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.rb-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rb-table th { position: sticky; top: 0; z-index: 1; background: var(--sub); text-align: left; font-weight: 500; color: var(--faint); font-size: 11.5px; padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.rb-table td { padding: 7px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.rb-table tbody tr:first-child td { border-top: 0; }
.rb-table tbody tr { cursor: pointer; }
.rb-table tbody tr:hover td { background: var(--hover); }
.rb-table .rb-num-cell { font-family: var(--f-mono); color: var(--faint); white-space: nowrap; width: 1%; }
.rb-table td:nth-child(2) { min-width: 14ch; }
.rb-mtext { font-family: var(--f-mono); color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.rb-mtext.is-empty { color: var(--faint); font-style: italic; font-family: var(--f-sans); }
.rb-gchips { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-gchip { display: inline-flex; gap: 5px; align-items: baseline; max-width: 100%; padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.rb-gchip b { font: 600 10.5px var(--f-mono); opacity: .8; white-space: nowrap; }
.rb-gchip span { font-family: var(--f-mono); overflow-wrap: anywhere; color: var(--ink); }
.rb-gchip.is-unset span { color: var(--faint); font-style: italic; font-family: var(--f-sans); }

.rb-out { margin: 0; padding: 10px 12px; max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--sub); font: 12.5px/1.6 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.rb-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 320px; overflow: auto; counter-reset: part; }
.rb-parts li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; counter-increment: part; }
.rb-parts li::before { content: counter(part); font: 11px var(--f-mono); color: var(--faint); }
.rb-parts .rb-mtext { min-height: 1em; }
.rb-parts li.is-cap { border-style: dashed; }
.rb-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 360px; overflow: auto; }
.rb-lines li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 6px; box-shadow: inset 3px 0 0 var(--line2); background: var(--bg); font: 12.5px/1.5 var(--f-mono); }
.rb-lines li.is-ok { box-shadow: inset 3px 0 0 var(--ok); background: var(--ok-bg); }
.rb-lines li::before { content: "–"; color: var(--faint); font-family: var(--f-sans); }
.rb-lines li.is-ok::before { content: "✓"; color: var(--ok); }
.rb-lines mark { background: var(--rb-m); color: inherit; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--rb-m-line); }
.rb-lines span { overflow-wrap: anywhere; white-space: pre-wrap; }
.rb-panel .tool-results-empty { padding: 14px 16px; }

/* ---------- test cases ---------- */
.rb-cases-sum { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); white-space: nowrap; }
.rb-cases-sum:empty { display: none; }
.rb-cases-sum b { color: var(--ink); }
.rb-meter { width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rb-meter > i { display: block; height: 100%; background: var(--ok); border-radius: 3px; transition: width var(--mo-base) var(--mo-ease); }
.rb-meter.is-bad > i { background: var(--warn); }
.rb-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rb-cases:empty { display: none; }
.rb-case { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 6px 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); min-width: 0; }
.rb-case .tw-input { height: 30px; font-family: var(--f-mono); }
.rb-expect {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--line2); border-radius: 999px; background: var(--sub);
    color: var(--dim); font: inherit; font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.rb-expect:hover { color: var(--ink); border-color: var(--faint); }
.rb-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.rb-badge.is-pass { background: var(--ok-bg); color: var(--ok); }
.rb-badge.is-fail { background: var(--bad-bg); color: var(--bad); }
.rb-badge.is-wait { background: var(--sub); color: var(--faint); }
.rb-case.is-fail { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.rb-case-add { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-case-add .tw-input { flex: 1 1 220px; min-width: 0; font-family: var(--f-mono); }
.rb-case-btns { display: flex; gap: 6px; }
.rb-case-btns .ui-btn { height: 36px; }

/* ---------- code ---------- */
.rb-codebox { position: relative; min-width: 0; }
.rb-codebox .rb-out { padding-right: 80px; }
.rb-snippet { margin: 0; padding: 12px 14px; padding-right: 86px; border: 1px solid var(--line); border-radius: 8px; background: var(--sub); font: 12.5px/1.6 var(--f-mono); color: var(--ink); overflow-x: auto; white-space: pre; tab-size: 4; }
.rb-snippet .k { color: var(--k); } .rb-snippet .s { color: var(--s); } .rb-snippet .c { color: var(--faint); font-style: italic; }
.rb-snippet-copy { position: absolute; top: 8px; right: 8px; }
.rb-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--dim); }
.rb-notes:empty { display: none; }
.rb-notes li { display: flex; gap: 8px; }
.rb-notes li::before { content: "·"; color: var(--faint); font-weight: 700; }

/* ---------- drawer ---------- */
.rb-scrim { position: fixed; inset: 0; z-index: 180; background: var(--scrim); animation: rb-fade var(--mo-base) var(--mo-ease-out); }
.rb-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 190; width: min(520px, 100vw); display: flex; flex-direction: column;
    background: var(--bg); border-left: 1px solid var(--line2); box-shadow: var(--shadow); animation: rb-slide var(--mo-slow) var(--mo-ease-out);
}
@keyframes rb-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rb-fade { from { opacity: 0; } to { opacity: 1; } }
.rb-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rb-drawer-search { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.rb-drawer-search .tw-input { font-family: var(--f-sans); font-size: 13px; }
.rb-drawer-body { flex: 1; overflow: auto; padding: 6px 14px 24px; overscroll-behavior: contain; }
.rb-lib-cat { margin: 14px 0 6px; font-size: 11.5px; font-weight: 500; color: var(--faint); }
.rb-lib { display: grid; gap: 6px; }
.rb-lib-item { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); transition: border-color var(--mo-fast), background var(--mo-fast); }
.rb-lib-item:hover { border-color: var(--line2); background: var(--sub); }
.rb-lib-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rb-lib-top b { font-weight: 600; }
.rb-lib-item p { margin: 0; color: var(--dim); font-size: 12.5px; }
.rb-lib-item code { display: block; font: 12px/1.5 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; padding: 6px 8px; border-radius: 6px; background: var(--sub); border: 1px solid var(--line); }
.rb-lib-item code i { font-style: normal; color: var(--rb-quant); }
.rb-cheat { width: 100%; border-collapse: collapse; }
.rb-cheat td { padding: 6px 4px; border-top: 1px solid var(--line); vertical-align: baseline; font-size: 12.5px; color: var(--dim); }
.rb-cheat td:first-child { width: 1%; white-space: nowrap; padding-right: 12px; }
.rb-cheat button { height: 24px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 5px; background: var(--sub); color: var(--rb-cls); font: 12px var(--f-mono); cursor: pointer; }
.rb-cheat button:hover { border-color: var(--accent); background: var(--accent-bg); }
.rb-cheat-flags { display: grid; gap: 4px; margin-top: 6px; font-size: 12.5px; color: var(--dim); }
.rb-cheat-flags code { font: 600 12px var(--f-mono); color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
    .rb-grid { grid-template-columns: minmax(0, 1fr); }
    /* one column: the tester comes first, so a phone sees results without scrolling past every block */
    .rb-col { display: contents; }
    .rb-test-card { order: 1; }
    .rb-cases-card { order: 2; }
    .rb-blocks-card { order: 3; }
    .rb-explain-card { order: 4; }
    .rb-code-card { order: 5; }
}
@media (max-width: 440px) {
    /* icon-only Library / Cheat sheet so the action row fits on one line (the label stays for screen readers) */
    #rbLibraryBtn span, #rbCheatBtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 640px) {
    .rb-head { align-items: stretch; }
    .rb-head-acts { width: 100%; }
    .rb-head-acts #rbSaveBtn { margin-left: auto; }
    .rb-pattern { position: static; padding: 14px; }
    .rb-editor { flex-wrap: wrap; }
    .rb-delim { display: none; }
    .rb-copy { margin-top: 0; }
    .rb-code { flex-basis: 100%; }
    .rb-code-hl, .rb-code-in { font-size: 14px; }
    .rb-flag { padding: 0 8px 0 5px; }
    .rb-flag span { display: none; }
    .rb-card { padding: 14px; }
    .rb-block { grid-template-columns: auto minmax(0, 1fr); }
    .rb-block-acts { grid-column: 1 / -1; justify-content: flex-end; opacity: 1; margin-top: -4px; }
    .rb-children { padding-left: 6px; }
    .rb-branch { padding: 6px; }
    .rb-pop { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-height: 72vh; }
    .rb-pop-grid { grid-template-columns: minmax(0, 1fr); }
    .rb-ex { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-left: calc(8px + var(--d, 0) * 10px); }
    .rb-ex code { max-width: 100%; justify-self: start; }
    .rb-case { grid-template-columns: minmax(0, 1fr) auto auto; }
    .rb-case .rb-expect { grid-column: 1 / -1; justify-self: start; }
    .rb-case-btns { width: 100%; }
    .rb-case-btns .ui-btn { flex: 1 1 0; }
    .rb-drawer { width: 100vw; border-left: 0; }
    .rb-table th:nth-child(3), .rb-table td:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rb-drawer, .rb-scrim, .rb-pop, .rb-menu { animation: none; }
}