/* 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 (Scratch-style), block palette sheet, 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 (Scratch-style: snap-together blocks with slots, C-shaped groups) ---------- */
/* One saturated colour per category (Core.catOf), white text, light slots. Only this area is "Scratch"; the page keeps the tools look. */
.rb-page, .rb-ghost {
    --rb-b-text: #4d5bd1; --rb-b-cls: #1a73d1; --rb-b-set: #8a4fd4; --rb-b-anchor: #c4580a; --rb-b-grp: #137a47;
    --rb-b-look: #0b7a8f; --rb-b-ref: #c0307a; --rb-b-alt: #c23a3a;
    --rb-slot-bg: #ffffff; --rb-slot-ink: #1b1f27; --rb-slot-hint: #8a91a0;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rb-page, :root:not([data-theme="light"]) .rb-ghost {
        --rb-b-text: #5563d6; --rb-b-cls: #2b7bd6; --rb-b-set: #8f5bd8; --rb-b-anchor: #c25f12; --rb-b-grp: #1a8a55;
        --rb-b-look: #1288a0; --rb-b-ref: #c5428a; --rb-b-alt: #c24848;
        --rb-slot-bg: #eceff5; --rb-slot-ink: #161a22;
    }
}
:root[data-theme="dark"] .rb-page, :root[data-theme="dark"] .rb-ghost {
    --rb-b-text: #5563d6; --rb-b-cls: #2b7bd6; --rb-b-set: #8f5bd8; --rb-b-anchor: #c25f12; --rb-b-grp: #1a8a55;
    --rb-b-look: #1288a0; --rb-b-ref: #c5428a; --rb-b-alt: #c24848;
    --rb-slot-bg: #eceff5; --rb-slot-ink: #161a22;
}
:is(.rb-block, .rb-either, .rb-pal-item, .rb-pal-tab, .rb-pal-h)[data-cat="cls"] { --cat: var(--rb-b-cls); }
:is(.rb-block, .rb-either, .rb-pal-item, .rb-pal-tab, .rb-pal-h)[data-cat="set"] { --cat: var(--rb-b-set); }
:is(.rb-block, .rb-either, .rb-pal-item, .rb-pal-tab, .rb-pal-h)[data-cat="anchor"] { --cat: var(--rb-b-anchor); }
:is(.rb-block, .rb-either, .rb-pal-item, .rb-pal-tab, .rb-pal-h)[data-cat="grp"] { --cat: var(--rb-b-grp); }
:is(.rb-block, .rb-either, .rb-pal-item, .rb-pal-tab, .rb-pal-h)[data-cat="look"] { --cat: var(--rb-b-look); }
:is(.rb-block, .rb-either, .rb-pal-item, .rb-pal-tab, .rb-pal-h)[data-cat="ref"] { --cat: var(--rb-b-ref); }
:is(.rb-block, .rb-either, .rb-pal-item, .rb-pal-tab, .rb-pal-h)[data-cat="alt"] { --cat: var(--rb-b-alt); }

.rb-blocks-card { grid-column: 1 / -1; }
.rb-blocks-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }

/* the workspace */
.rb-tree {
    --stack-bg: var(--sub);
    display: block; min-width: 0; min-height: 280px; padding: 18px 18px 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--stack-bg);
}
.rb-list { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; position: relative; }
.rb-list > .rb-add-row { align-self: stretch; margin-top: 10px; }
.rb-list > .rb-block, .rb-c-body .rb-list > .rb-block { max-width: 100%; }

/* one block: chunky, a notch on top and a tab underneath so a sequence reads as one snapped stack */
.rb-block, .rb-either {
    --cat: var(--rb-b-text); --cat-d: color-mix(in srgb, var(--cat) 70%, #000);
    position: relative; width: fit-content; min-width: min(250px, 100%); max-width: 100%; border-radius: 9px; background: var(--cat); color: #fff;
    box-shadow: 0 0 0 1px var(--cat-d), inset 0 1px 0 rgba(255, 255, 255, .24), 0 2px 0 var(--cat-d);
    transition: box-shadow var(--mo-fast);
}
.rb-block::before, .rb-either::before {
    content: ""; position: absolute; left: 20px; top: 0; z-index: 1; width: 30px; height: 6px; background: var(--stack-bg, var(--sub)); border-radius: 0 0 6px 6px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); pointer-events: none;
}
.rb-block::after, .rb-either::after {
    content: ""; position: absolute; left: 20px; bottom: -6px; z-index: 2; width: 30px; height: 7px; box-sizing: border-box; background: var(--cat);
    border: 1px solid var(--cat-d); border-top: 0; border-radius: 0 0 6px 6px; pointer-events: none;
}
.rb-block + .rb-block, .rb-either + .rb-block { margin-top: 1px; }
.rb-block.is-hot, .rb-either.is-hot { box-shadow: 0 0 0 1px var(--cat-d), 0 0 0 4px var(--rb-hot), inset 0 1px 0 rgba(255, 255, 255, .24); }
.rb-block.is-dragging { opacity: .35; }

.rb-block-top { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px 6px 4px; min-height: 42px; }
.rb-either > .rb-block-main > .rb-block-top { padding-left: 14px; }
.rb-handle {
    flex: none; display: grid; place-items: center; width: 20px; height: 30px; padding: 0; border: 0; border-radius: 5px; background: none;
    color: rgba(255, 255, 255, .6); cursor: var(--cur-grab, pointer); touch-action: none;
}
.rb-handle:hover { background: rgba(0, 0, 0, .2); color: #fff; }
.rb-handle:focus-visible { outline: 2px solid #fff; outline-offset: -1px; }
.rb-handle:active { cursor: var(--cur-grabbing, pointer); }
.rb-handle svg { width: 12px; height: 16px; fill: currentColor; }

.rb-fields { flex: 1 1 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 7px; min-width: 0; }
.rb-w { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.rb-kind-n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(0, 0, 0, .26); color: #fff; font: 600 11px var(--f-mono); }
.rb-tokwrap { flex: none; margin-left: auto; min-width: 0; }
.rb-tok {
    display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; border-radius: 10px;
    background: rgba(0, 0, 0, .24); color: rgba(255, 255, 255, .92); font: 11.5px/20px var(--f-mono);
}

/* slots: rounded inputs and dropdowns inside the sentence */
.rb-slot { height: 26px; max-width: 100%; margin: 0; border: 0; border-radius: 13px; font: 600 12.5px/1 var(--f-sans); outline: 0; }
.rb-slot:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, .35); }
.rb-slot[aria-invalid="true"] { box-shadow: 0 0 0 2px #ffd0d0, 0 0 0 4px #e5484d; }
.rb-slot-in, .rb-slot-num {
    padding: 0 10px; background: var(--rb-slot-bg); color: var(--rb-slot-ink); font-family: var(--f-mono); font-weight: 500; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28);
}
.rb-slot-in::placeholder { color: var(--rb-slot-hint); font-family: var(--f-sans); }
.rb-slot-in:focus-visible, .rb-slot-num:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, .35), inset 0 1px 3px rgba(0, 0, 0, .28); }
.rb-slot-num { width: 56px; padding: 0 6px; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.rb-slot-num::-webkit-inner-spin-button, .rb-slot-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rb-slot-sel {
    padding: 0 26px 0 11px; color: #fff; cursor: var(--cur-pointer, pointer); appearance: none; -webkit-appearance: none;
    background: color-mix(in srgb, var(--cat) 62%, #000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 9px 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.rb-slot-sel { field-sizing: content; }
.rb-slot-sel:hover { background-color: color-mix(in srgb, var(--cat) 52%, #000); }
.rb-slot-sel option { background: var(--bg); color: var(--ink); font-weight: 400; }
.rb-q.is-once .rb-slot-sel { background-color: transparent; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38); opacity: .88; }
.rb-fields > .rb-q.is-once { padding-left: 0; margin-left: 0; border-left: 0; }
.rb-fields > .rb-q { padding-left: 9px; margin-left: 3px; border-left: 1px solid rgba(255, 255, 255, .32); }
.rb-q { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 7px; min-width: 0; }
.rb-tgl {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; margin: 0; padding: 0 9px 0 6px; border-radius: 11px; background: rgba(0, 0, 0, .24);
    color: #fff; font: 600 11.5px var(--f-sans); cursor: pointer; white-space: nowrap;
}
.rb-tgl input { margin: 0; accent-color: #fff; }
.rb-tgl:has(input:checked) { background: rgba(255, 255, 255, .34); }
.rb-tgl:has(input:focus-visible) { box-shadow: 0 0 0 2px #fff; }
.rb-chips { display: none; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.rb-block:focus-within > .rb-block-main > .rb-block-top .rb-chips { display: flex; }
.rb-chip { height: 22px; padding: 0 8px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .24); color: #fff; font: 600 11.5px var(--f-mono); cursor: pointer; }
.rb-chip:hover { background: rgba(255, 255, 255, .4); }

/* the small toolbar: move, duplicate, remove (hover or focus; always on touch) */
.rb-block-acts { flex: none; display: flex; gap: 1px; opacity: 0; transition: opacity var(--mo-fast); }
.rb-block:is(:hover, :focus-within):not(:has(.rb-block:is(:hover, :focus-within))) > .rb-block-main > .rb-block-top > .rb-block-acts { opacity: 1; }
.rb-block .rb-act { color: #fff; background: rgba(0, 0, 0, .2); border-radius: 6px; width: 24px; height: 24px; }
.rb-block .rb-act:hover { background: rgba(0, 0, 0, .4); color: #fff; }
.rb-block .rb-act.is-danger:hover { background: #d6334a; color: #fff; }
.rb-block .rb-act:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.rb-block .rb-act:disabled { opacity: .35; }
.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.7; stroke-linecap: round; stroke-linejoin: round; }

/* C-shaped blocks: header, a mouth for the children, a foot */
.is-c { display: block; }
.rb-either { width: 100%; }
.rb-either > .rb-block-main > .rb-c-body > .rb-branches > .rb-mouth { --cat: var(--rb-b-alt); }
.rb-c-body { --mouth-bg: color-mix(in srgb, var(--cat) 26%, var(--bg)); min-width: 0; }
.rb-mouth {
    --stack-bg: var(--mouth-bg); position: relative; margin-left: 16px; min-width: 0; min-height: 48px; padding: 9px 10px 14px 10px; background: var(--mouth-bg);
    border-radius: 8px 0 0 8px; box-shadow: inset 2px 3px 5px rgba(0, 0, 0, .22); color: var(--ink);
}
.rb-mouth > .rb-list { min-height: 28px; }
.rb-mouth > .rb-list > .rb-add-row { margin-top: 8px; }
.rb-branches { display: block; min-width: 0; }
.rb-or {
    display: flex; align-items: center; height: 28px; padding: 0 14px; background: var(--cat); color: #fff; font: 700 13px var(--f-sans);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.rb-branch-del { position: absolute; right: 6px; top: 6px; z-index: 3; width: 22px; height: 22px; opacity: .55; }
.rb-branch:is(:hover, :focus-within) > .rb-branch-del { opacity: 1; }
.rb-c-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 30px; padding: 5px 10px 8px 14px; border-radius: 0 0 9px 9px; }
.rb-c-foot > .rb-q { padding: 0; margin: 0; border: 0; }
.rb-or-btn {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-left: auto; padding: 0 11px 0 7px; border: 0; border-radius: 12px;
    background: rgba(0, 0, 0, .24); color: #fff; font: 700 12px var(--f-sans); cursor: pointer;
}
.rb-or-btn:hover { background: rgba(0, 0, 0, .42); }
.rb-or-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.rb-or-btn .lay-i { width: 12px; height: 12px; }

/* "Add block" inside the stack */
.rb-add {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; width: 100%; padding: 0 12px; border: 1px dashed var(--line2); border-radius: 15px;
    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: 0 1 auto; width: auto; }
.rb-add-row .rb-add.is-alt { flex: 0 0 auto; }
.rb-mouth .rb-add { height: 26px; font-size: 12px; border-color: color-mix(in srgb, var(--cat) 55%, var(--line2)); }

/* side palette (desktop): blocks to drag into the stack; drop a block back here to remove it */
.rb-sidepal {
    position: sticky; top: calc(var(--bar-h) + 12px); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - var(--bar-h) - 28px); min-width: 0;
    padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--sub);
}
@media (min-width: 1181px) and (min-height: 820px) {
    .rb-sidepal { top: calc(var(--bar-h) + 214px); max-height: calc(100vh - var(--bar-h) - 230px); }
}
.rb-pal-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.rb-pal-tab {
    --cat: var(--rb-b-text); display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 6px; border: 1px solid var(--line2); border-radius: 12px;
    background: var(--bg); color: var(--dim); font: 500 11.5px var(--f-sans); cursor: pointer;
}
.rb-pal-tab i { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); }
.rb-pal-tab:hover { color: var(--ink); border-color: var(--cat); }
.rb-pal-body { display: grid; gap: 4px; min-height: 0; overflow: auto; padding: 0 2px 8px 0; overscroll-behavior: contain; }
.rb-pal-sec { display: grid; gap: 8px; padding-bottom: 8px; }
.rb-pal-h { --cat: var(--rb-b-text); margin: 4px 0 0; font: 600 11px var(--f-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.rb-pal-h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cat); }
.rb-pal-item {
    --cat: var(--rb-b-text); --cat-d: color-mix(in srgb, var(--cat) 70%, #000);
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 32px; margin: 0 0 6px; padding: 0 9px 0 11px;
    border: 0; border-radius: 8px; background: var(--cat); color: #fff; text-align: left; cursor: var(--cur-grab, pointer); touch-action: none; user-select: none; -webkit-user-select: none;
    box-shadow: 0 0 0 1px var(--cat-d), inset 0 1px 0 rgba(255, 255, 255, .24), 0 2px 0 var(--cat-d);
}
.rb-pal-item::after { content: ""; position: absolute; left: 14px; bottom: -5px; width: 22px; height: 5px; box-sizing: border-box; background: var(--cat); border: 1px solid var(--cat-d); border-top: 0; border-radius: 0 0 5px 5px; }
.rb-pal-item.is-c { border-left: 10px solid rgba(0, 0, 0, .22); padding-left: 8px; }
.rb-pal-item:hover { filter: brightness(1.08); }
.rb-pal-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rb-pal-item b { font: 600 12.5px var(--f-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-pal-item code { flex: none; padding: 0 7px; border-radius: 9px; background: rgba(0, 0, 0, .24); color: #fff; font: 11px/18px var(--f-mono); }
.rb-pal-hint { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--faint); }
.rb-sidepal.is-delete { outline: 2px dashed var(--bad); outline-offset: -2px; }
.rb-sidepal.is-delete::after {
    content: "Drop to remove"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 10px; pointer-events: none;
    background: color-mix(in srgb, var(--bad-bg) 88%, var(--bg)); color: var(--bad); font: 600 14px var(--f-sans);
}

.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: the ghost follows the pointer, the line shows where the block snaps in */
.rb-ghost {
    position: fixed; z-index: 500; pointer-events: none; opacity: .95; box-shadow: 0 12px 26px rgba(0, 0, 0, .38); transform: rotate(-1.5deg); border-radius: 9px;
    max-width: min(520px, calc(100vw - 32px)); margin: 0 !important;
}
.rb-ghost::before, .rb-ghost::after { display: none; }
.rb-ghost .rb-block-acts { opacity: 0; }
.rb-drop { align-self: stretch; height: 0; position: relative; margin: 0; pointer-events: none; z-index: 6; }
.rb-drop::before { content: ""; position: absolute; left: -3px; right: 0; top: -3px; height: 6px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.rb-drop::after { content: ""; position: absolute; left: 20px; top: 3px; width: 30px; height: 6px; background: var(--accent); border-radius: 0 0 6px 6px; }
body.rb-dragging, body.rb-dragging * { cursor: var(--cur-grabbing, default) !important; user-select: none; }
.rb-mouth:has(> .rb-list.is-drop-target) { outline: 2px dashed var(--accent); outline-offset: -2px; }

/* ---------- 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); }
    /* no side palette below desktop width: the Add block sheet does the job */
    .rb-blocks-body { grid-template-columns: minmax(0, 1fr); }
    .rb-sidepal { display: none; }
    /* 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-tree { padding: 10px 10px 14px; min-height: 200px; }
    .rb-list { align-items: stretch; }
    .rb-block, .rb-either { width: auto; min-width: 0; }
    .rb-block-top { flex-wrap: wrap; padding-right: 6px; }
    .rb-block-acts { opacity: 1; }
    .rb-tokwrap { display: none; }
    .rb-mouth { margin-left: 10px; padding: 7px 6px 12px 7px; }
    .rb-c-foot { padding-left: 10px; }
    .rb-slot-in { max-width: 52vw; }
    .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 (hover: none) {
    .rb-block-acts { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .rb-drawer, .rb-scrim, .rb-pop, .rb-menu { animation: none; }
}