/*
 * regex-tester.css — Regex Tester (tools/regex-tester.php), 2026-10 redesign.
 *
 * Colour meanings (same in every view; the legend and the plain-words rows
 * repeat them in text, so colour is never the only signal):
 *   --rx-anchor  position (^ $ \b)          --rx-class  characters (\d [a-z] .)
 *   --rx-quant   how many (+ * {2,})        --rx-group  groups ( (?<n> ) | )
 *   --rx-escape  escaped character (\.)     literal text = the text colour
 *   match = orange wash + 2 px underline;   wanted = blue ✓;  unwanted = orange ✗
 * Light values (New view, Classic light) and dark values (Classic dark only:
 * the New view is light-only) are each >= 4.5:1 on every page/card/code
 * background of that theme, and --rx-on-accent is >= 4.5:1 on the accent and
 * box-colour fills — checked by tests/regex-ui.test.js.
 */
.rx-app {
    --rx-anchor: #9A1F57; --rx-class: #1B529A; --rx-quant: #7F4200; --rx-group: #155E3A; --rx-escape: #62379C;
    --rx-match: #A8380A; --rx-match-wash: rgba(234, 88, 12, 0.22);
    --rx-want: #1B529A; --rx-unwant: #9A3A00;
    --rx-on-accent: #FFFFFF; /* text on accent / box-colour fills */
    --rx-code-bg: var(--color-bg-secondary);
    --rx-card-bg: var(--color-bg);
    --rx-gap: var(--spacing-md, 1rem);
}
@media (prefers-color-scheme: dark) {
    html:not([data-ui="control"]) .rx-app {
        --rx-anchor: #FF8FC0; --rx-class: #7DB7FF; --rx-quant: #FFB65C; --rx-group: #6FDDA6; --rx-escape: #C7A6FF;
        --rx-match: #FF9A4D; --rx-match-wash: rgba(255, 154, 77, 0.22);
        --rx-want: #7DB7FF; --rx-unwant: #FFB65C;
        --rx-on-accent: #1A1210; /* the accent is light here (#f58572), so fills take dark text */
    }
}
html[data-ui="control"] .rx-app { --rx-code-bg: var(--surface-2, #F0EFEB); --rx-card-bg: var(--surface, #F6F5F2); }

.rx-app { display: grid; gap: var(--rx-gap); min-width: 0; }
.rx-app *, .rx-app *::before, .rx-app *::after { box-sizing: border-box; }
.rx-app [hidden] { display: none !important; }
.rx-app code, .rx-app pre, .rx-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }
.rx-app button { font: inherit; }
.rx-app :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* privacy badge (in the tool header) */
.rx-badge { display: inline-flex; align-items: center; gap: 6px; margin: var(--spacing-xs, 0.5rem) 0 0; padding: 6px 14px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.88rem; color: var(--color-text); background: var(--color-bg-secondary); }
.rx-badge__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rx-group, #155E3A); flex: none; }

/* ---- mode cards ---- */
.rx-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rx-gap); }
.rx-mode {
    display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px; text-align: left; cursor: pointer;
    color: var(--color-text); background: var(--rx-card-bg); border: 2px solid var(--color-border); border-radius: 12px;
}
.rx-mode:hover { border-color: var(--color-accent); }
.rx-mode[aria-checked="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.rx-mode__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; font-size: 1.15rem; background: var(--color-bg-secondary); color: var(--color-text); }
.rx-mode[aria-checked="true"] .rx-mode__icon { background: var(--color-accent); color: var(--rx-on-accent); }
.rx-mode__t { display: block; font-weight: 700; font-size: 1.05rem; }
.rx-mode__d { display: block; font-size: 0.9rem; color: var(--color-text-muted); }
.rx-mode__on { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.rx-mode[aria-checked="false"] .rx-mode__on { display: none; }

/* ---- "What's happening" ---- */
.rx-happening { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--rx-card-bg); line-height: 1.5; }
.rx-happening__i { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-accent); color: var(--color-accent); font-weight: 700; font-size: 0.8rem; margin-top: 1px; }
.rx-happening.is-error { border-color: var(--color-error, #b42318); }
.rx-happening.is-error .rx-happening__i { border-color: var(--color-error, #b42318); color: var(--color-error, #b42318); }
.rx-happening code { padding: 0 3px; border-radius: 3px; background: var(--rx-code-bg); }
.rx-happening .rx-name { color: var(--rx-group); font-family: var(--font-mono, monospace); }

/* ---- onboarding ---- */
.rx-onboard { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm, 0.75rem); padding: 10px 14px; border: 1px dashed var(--color-border); border-radius: 10px; }
.rx-onboard ol { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; counter-reset: rxob; flex: 1 1 320px; }
.rx-onboard li { counter-increment: rxob; font-size: 0.92rem; }
.rx-onboard li::before { content: counter(rxob); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; background: var(--color-accent); color: var(--rx-on-accent); font-weight: 700; font-size: 0.78rem; }

/* ---- layout ---- */
.rx-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--rx-gap); align-items: start; }
.rx-col { display: grid; gap: var(--rx-gap); min-width: 0; }
.rx-card { min-width: 0; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--rx-card-bg); }
.rx-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.rx-card__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.2rem; }
.rx-card__head .rx-card__end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rx-step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-accent); color: var(--rx-on-accent); font-weight: 700; font-size: 0.9rem; }
.rx-sub { margin: 0 0 8px; font-size: 0.9rem; color: var(--color-text-muted); }
.rx-opt { font-weight: 400; font-size: 0.85rem; color: var(--color-text-muted); }

/* buttons */
.rx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--color-border-input, var(--color-border)); background: var(--rx-card-bg); color: var(--color-text); cursor: pointer; font-size: 0.92rem; }
.rx-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.rx-btn:disabled { opacity: 0.5; cursor: default; }
.rx-btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--rx-on-accent); font-weight: 700; }
.rx-btn--primary:hover:not(:disabled) { color: var(--rx-on-accent); background: var(--color-accent-hover, var(--color-accent)); }
.rx-btn--ghost { border-style: dashed; width: 100%; color: var(--color-text-muted); }
.rx-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }

/* segmented switch (Type it | Build with blocks) */
.rx-seg { display: inline-flex; padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg-secondary); }
.rx-seg button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text); cursor: pointer; font-size: 0.92rem; }
.rx-seg button[aria-pressed="true"] { background: var(--color-accent); color: var(--rx-on-accent); font-weight: 700; }

/* ---- pattern line: coloured tokens behind a transparent-text input ---- */
.rx-pat-label { display: block; margin: 0 0 6px; font-size: 0.9rem; color: var(--color-text-muted); }
.rx-pat { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 12px; border: 1px solid var(--color-border-input, var(--color-border)); border-radius: 10px; background: var(--rx-code-bg); }
.rx-pat:focus-within { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.rx-pat.is-error { border-color: var(--color-error, #b42318); }
.rx-pat__slash, .rx-pat__flags { flex: none; font-family: var(--font-mono, monospace); font-size: 1.15rem; color: var(--color-text-muted); }
.rx-pat__box { position: relative; flex: 1 1 auto; min-width: 0; }
.rx-pat__box > .rx-mirror, .rx-pat__box > input {
    font-family: var(--font-mono, monospace); font-size: 1.15rem; line-height: 1.6; letter-spacing: 0; padding: 8px 2px; margin: 0;
    white-space: pre; border: 0; font-variant-ligatures: none; tab-size: 4;
}
.rx-pat__box > .rx-mirror { position: absolute; inset: 0; overflow: hidden; color: var(--color-text); pointer-events: none; }
.rx-pat__box > input { position: relative; display: block; width: 100%; background: transparent; color: transparent; caret-color: var(--color-text); outline: none; box-shadow: none; }
.rx-pat__box > input::placeholder { color: var(--color-text-muted); }
.rx-pat__box > input::selection { background: rgba(27, 82, 154, 0.25); color: transparent; }
.rx-valid { flex: none; font-size: 0.88rem; font-weight: 700; white-space: nowrap; }
.rx-valid.is-ok { color: var(--rx-group); }
.rx-valid.is-bad { color: var(--color-error, #b42318); }
.rx-tk--anchor { color: var(--rx-anchor); }
.rx-tk--class { color: var(--rx-class); }
.rx-tk--quant { color: var(--rx-quant); }
.rx-tk--group { color: var(--rx-group); }
.rx-tk--escape { color: var(--rx-escape); }
.rx-tk--literal { color: var(--color-text); }
.rx-tk--error { color: var(--color-error, #b42318); }
.rx-tk.is-bad, .rx-mirror .is-bad { text-decoration: wavy underline var(--color-error, #b42318); text-decoration-skip-ink: none; text-underline-offset: 4px; }
.rx-tk.is-sel { border-radius: 3px; box-shadow: 0 0 0 2px currentColor; }
.rx-error { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--color-error, #b42318); background: var(--color-bg-secondary); font-size: 0.9rem; }
.rx-error code { font-weight: 700; }
.rx-warn { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--rx-quant); background: var(--color-bg-secondary); font-size: 0.9rem; }

/* flag toggles */
.rx-flags { margin-top: 14px; }
.rx-flags__label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: var(--color-text-muted); }
.rx-flags__row { display: flex; flex-wrap: wrap; gap: 8px; }
.rx-flag { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--color-border-input, var(--color-border)); border-radius: 999px; background: var(--rx-card-bg); color: var(--color-text); cursor: pointer; font-size: 0.9rem; }
.rx-flag code { color: var(--color-text-muted); }
.rx-flag::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; flex: none; }
.rx-flag[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); font-weight: 700; }
.rx-flag[aria-pressed="true"]::before { content: "✓"; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; background: var(--color-accent); border-color: var(--color-accent); color: var(--rx-on-accent); }
.rx-more { margin-top: 10px; }
.rx-more > summary, .rx-fold > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 0.9rem; color: var(--color-text-muted); }
.rx-more__body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; }
.rx-more__body label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; margin: 0; }
.rx-more__body input[type=text] { width: 7em; min-height: 44px; font-family: var(--font-mono, monospace); }

/* ---- test text: highlight layer behind a transparent-text textarea ---- */
.rx-subject { position: relative; border: 1px solid var(--color-border-input, var(--color-border)); border-radius: 10px; background: var(--rx-code-bg); }
.rx-subject:focus-within { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.rx-subject > .rx-mirror, .rx-subject > textarea {
    font-family: var(--font-mono, monospace); font-size: 0.98rem; line-height: 1.75; letter-spacing: 0; padding: 12px 16px; margin: 0;
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; border: 0; tab-size: 4; font-variant-ligatures: none;
}
.rx-subject > .rx-mirror { position: absolute; inset: 0; overflow: hidden; color: var(--color-text); pointer-events: none; }
.rx-subject > textarea { position: relative; display: block; width: 100%; min-height: 9.5em; resize: vertical; background: transparent; color: transparent; caret-color: var(--color-text); outline: none; box-shadow: none; }
.rx-subject > textarea::placeholder { color: var(--color-text-muted); }
.rx-subject > textarea::selection { background: rgba(27, 82, 154, 0.25); color: transparent; }
.rx-mirror mark { color: inherit; background: var(--rx-match-wash); text-decoration: underline 2px var(--rx-match); text-underline-offset: 3px; text-decoration-skip-ink: none; padding: 0; position: relative; }
.rx-mirror mark.rx-hl { background: var(--rx-w, var(--rx-match-wash)); text-decoration-color: var(--rx-c, var(--rx-match)); }
.rx-mirror mark.rx-hl--multi { outline: 1px dashed currentColor; outline-offset: -1px; }
/* match numbers: zero width, so the layer stays aligned with the textarea */
.rx-mirror mark[data-n]::before { content: attr(data-n); position: absolute; left: 0; top: -0.95em; font-size: 0.62em; line-height: 1; color: var(--rx-c, var(--rx-match)); font-weight: 700; white-space: nowrap; pointer-events: none; }
.rx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--color-text-muted); }
.rx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rx-sw { width: 12px; height: 12px; border-radius: 3px; flex: none; background: currentColor; }
.rx-sw--match { background: var(--rx-match-wash); box-shadow: inset 0 -2px 0 var(--rx-match); }
.rx-legend .rx-sw--anchor { color: var(--rx-anchor); } .rx-legend .rx-sw--class { color: var(--rx-class); }
.rx-legend .rx-sw--quant { color: var(--rx-quant); } .rx-legend .rx-sw--group { color: var(--rx-group); }
.rx-legend .rx-sw--escape { color: var(--rx-escape); } .rx-legend .rx-sw--literal { color: var(--color-text); border: 1px solid var(--color-border); background: transparent; }
.rx-examples { display: grid; gap: 6px; margin: 0 0 10px; padding: 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--rx-card-bg); }
.rx-examples button { justify-content: flex-start; text-align: left; }

/* ---- "What your pattern does" ---- */
.rx-ex, .rx-ex ol { list-style: none; margin: 0; padding: 0; }
.rx-ex ol { margin-left: 18px; padding-left: 10px; border-left: 2px solid var(--color-border); }
.rx-ex__row {
    display: grid; grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr); gap: 4px 14px; width: 100%; min-height: 44px; padding: 8px 10px; margin: 2px 0;
    text-align: left; background: transparent; color: var(--color-text); border: 2px solid transparent; border-radius: 8px; cursor: pointer;
}
.rx-ex__row:hover { background: var(--color-bg-secondary); }
.rx-ex__row[aria-current="true"] { border-color: var(--rx-class); background: var(--color-bg-secondary); }
.rx-ex__code { font-family: var(--font-mono, monospace); white-space: pre-wrap; word-break: break-all; }
.rx-ex__text { line-height: 1.45; }
.rx-ex__kind { display: block; margin-top: 2px; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.rx-ex__row.rx-tk--error .rx-ex__text { color: var(--color-error, #b42318); }
.rx-empty { color: var(--color-text-muted); font-style: italic; margin: 0; padding: 8px 0; }

/* ---- result card ---- */
.rx-result__sum { margin-left: auto; font-weight: 700; color: var(--rx-group); font-size: 0.95rem; }
.rx-result__sum.is-none { color: var(--color-text-muted); }
.rx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-secondary); }
.rx-tab { min-height: 44px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; color: var(--color-text); cursor: pointer; font-size: 0.92rem; }
.rx-tab[aria-selected="true"] { background: var(--rx-card-bg); font-weight: 700; box-shadow: 0 0 0 1px var(--color-border); }
.rx-tabpanel { padding-top: 12px; }
.rx-matches { display: grid; gap: 10px; max-height: 520px; overflow-y: auto; padding: 2px; }
.rx-match { padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--rx-card-bg); }
.rx-match__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; font-size: 0.85rem; color: var(--color-text-muted); }
.rx-match__top > strong { white-space: nowrap; }
.rx-match__val { margin: 4px 0 0; font-family: var(--font-mono, monospace); font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-match__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.rx-match__groups li { padding: 6px 10px; border-radius: 6px; background: var(--color-bg-secondary); min-width: 0; }
.rx-match__gname { display: block; font-size: 0.8rem; color: var(--rx-group); font-family: var(--font-mono, monospace); }
.rx-match__gval { display: block; font-family: var(--font-mono, monospace); white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-match__gval.is-none { color: var(--color-text-muted); font-style: italic; font-family: inherit; }
.rx-field { display: grid; gap: 4px; margin: 0 0 10px; }
.rx-field > span { font-size: 0.88rem; color: var(--color-text-muted); }
.rx-field input, .rx-field textarea { min-height: 44px; font-family: var(--font-mono, monospace); width: 100%; }
.rx-split { margin: 0; padding-left: 1.6em; }
.rx-split li { margin: 4px 0; }
.rx-split code { padding: 1px 5px; border-radius: 3px; background: var(--rx-code-bg); white-space: pre-wrap; overflow-wrap: anywhere; }
.rx-code { margin: 0 0 14px; }
.rx-code h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1rem; }
.rx-code h3 .rx-btn { margin-left: auto; min-height: 40px; padding: 0 12px; }
.rx-code pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--rx-code-bg); white-space: pre-wrap; word-break: break-all; font-size: 0.85rem; }
.rx-code__warn { margin: 6px 0 0; padding-left: 1.2em; font-size: 0.85rem; }
.rx-code__warn li { margin: 2px 0; }
.rx-code__na { margin: 0; padding: 8px 12px; border-left: 4px solid var(--rx-quant); background: var(--color-bg-secondary); font-size: 0.88rem; }
.rx-status { min-height: 1.3em; margin: 8px 0 0; font-size: 0.88rem; color: var(--color-text-muted); overflow-wrap: anywhere; }

/* ---- advanced: several patterns ---- */
.rx-fold { padding: 4px 20px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--rx-card-bg); }
.rx-fold > summary { font-weight: 700; color: var(--color-text); font-size: 1rem; }
.rx-fold[open] { padding-bottom: 18px; }
.rx-fold__body { padding-top: 6px; }

/* pattern boxes (kept from the previous version) */
.rx-c0 { --rx-c: var(--rx-match); --rx-w: var(--rx-match-wash); }
.rx-c1 { --rx-c: #1d5fd1; --rx-w: rgba(29, 95, 209, 0.20); }
.rx-c2 { --rx-c: #13803d; --rx-w: rgba(19, 128, 61, 0.22); }
.rx-c3 { --rx-c: #9a5f00; --rx-w: rgba(214, 140, 0, 0.26); }
.rx-c4 { --rx-c: #8a2fc9; --rx-w: rgba(138, 47, 201, 0.20); }
.rx-c5 { --rx-c: #0b7f91; --rx-w: rgba(11, 127, 145, 0.22); }
.rx-c6 { --rx-c: #be185d; --rx-w: rgba(219, 39, 119, 0.20); }
.rx-c7 { --rx-c: #57534e; --rx-w: rgba(87, 83, 78, 0.20); }
@media (prefers-color-scheme: dark) {
    html:not([data-ui="control"]) .rx-c1 { --rx-c: #7fa8f5; } html:not([data-ui="control"]) .rx-c2 { --rx-c: #5fd08a; }
    html:not([data-ui="control"]) .rx-c3 { --rx-c: #f2b84b; } html:not([data-ui="control"]) .rx-c4 { --rx-c: #c99af0; }
    html:not([data-ui="control"]) .rx-c5 { --rx-c: #5fcfdf; } html:not([data-ui="control"]) .rx-c6 { --rx-c: #f27fb5; }
    html:not([data-ui="control"]) .rx-c7 { --rx-c: #c8c2bb; }
}
.rx-boxes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rx-boxes { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rx-box { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; padding: 4px 6px 4px 0; border: 1px solid var(--color-border); border-left: 6px solid var(--rx-c); border-radius: 8px; background: linear-gradient(90deg, var(--rx-w), transparent 60%); }
.rx-box.is-active { box-shadow: 0 0 0 2px var(--rx-c); }
.rx-box.is-off { opacity: 0.6; }
.rx-box.is-dragging { opacity: 0.45; }
.rx-box.is-drop { outline: 2px dashed var(--color-accent); outline-offset: 2px; }
.rx-handle { cursor: grab; padding: 0 6px; font-size: 1.1rem; color: var(--color-text-muted); user-select: none; touch-action: none; }
.rx-box__sel { flex: 1 1 160px; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; background: transparent; border: none; color: inherit; text-align: left; cursor: pointer; padding: 2px 4px; }
.rx-box__num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--rx-c); color: var(--rx-on-accent); font-weight: 700; font-size: 0.8rem; }
@media (prefers-color-scheme: dark) { html:not([data-ui="control"]) .rx-box__num { color: #111; } }
.rx-box__pat { min-width: 0; overflow: hidden; }
.rx-box__src { font-family: var(--font-mono, monospace); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rx-box__count { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--color-text-muted); min-width: 5.5em; text-align: right; white-space: nowrap; }
.rx-box__count.is-error { color: var(--color-error, #b42318); font-weight: 600; }
.rx-box__ctl { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: nowrap; }
.rx-boxes .rx-box__on { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; min-height: 44px; padding: 0 4px; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.rx-boxes .rx-box__on input { margin: 0; width: 18px; height: 18px; flex: none; }
.rx-icon-btn { min-width: 44px; min-height: 44px; padding: 0 6px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg-secondary); color: inherit; cursor: pointer; font-size: 0.95rem; }
.rx-icon-btn:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
.rx-icon-btn:disabled { opacity: 0.35; cursor: default; }
.rx-share-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; margin: 0; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-secondary); font-size: 0.9rem; }
.rx-hint { font-size: 0.85rem; color: var(--color-text-muted); margin: 6px 0 0; }
.rx-editing { font-weight: 400; color: var(--color-text-muted); font-size: 0.85em; }

/* ---- block builder ---- */
.rx-builder { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.rx-bk--chars { --bk: var(--rx-class); --bk-w: rgba(27, 82, 154, 0.10); }
.rx-bk--sets { --bk: var(--rx-class); --bk-w: rgba(27, 82, 154, 0.10); }
.rx-bk--repeat { --bk: var(--rx-quant); --bk-w: rgba(234, 88, 12, 0.12); }
.rx-bk--position { --bk: var(--rx-anchor); --bk-w: rgba(154, 31, 87, 0.10); }
.rx-bk--groups { --bk: var(--rx-group); --bk-w: rgba(21, 94, 58, 0.10); }
.rx-bk--text { --bk: var(--color-text-muted); --bk-w: transparent; }
.rx-bk--raw { --bk: var(--color-text-muted); --bk-w: transparent; }
.rx-bk--escape { --bk: var(--rx-escape); --bk-w: rgba(98, 55, 156, 0.10); }
.rx-bk-steps { margin: 0 0 6px; padding-left: 1.4em; font-size: 0.88rem; color: var(--color-text-muted); }
.rx-bk-steps li { margin: 2px 0; }
.rx-bk-strip, .rx-bk-kids, .rx-bk-idea { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rx-bk-strip { min-height: 56px; padding: 8px; margin: 6px 0; border: 1px dashed var(--color-border); border-radius: 10px; }
.rx-bk-idea { gap: 2px; padding: 2px; border-radius: 6px; flex-direction: column; align-items: flex-start; }
.rx-bk-idea__chips { display: flex; gap: 2px; }
.rx-bk-idea__cap { font-size: 0.72rem; color: var(--color-text-muted); padding: 0 4px; max-width: 14em; }
.rx-bk-start { margin: 6px 0; font-size: 0.9rem; }
.rx-bk-start p { margin: 0 0 6px; color: var(--color-text-muted); }
.rx-bk-chip { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 10px; justify-content: center; font-family: var(--font-mono, monospace); font-size: 0.92rem; color: var(--color-text); cursor: pointer; user-select: none; background: var(--bk-w); border: 1px solid var(--color-border); border-left: 4px solid var(--bk); border-radius: 6px; }
.rx-bk-chip:hover { border-color: var(--bk); }
.rx-bk-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bk); font-weight: 700; }
.rx-bk--raw > .rx-bk-chip, .rx-bk-chip.rx-bk--raw { border-style: dashed; }
.rx-bk-chip.is-problem { border-color: var(--color-error, #b42318); text-decoration: wavy underline var(--color-error, #b42318); }
.rx-bk-grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--bk); border-radius: 8px; background: var(--bk-w); }
.rx-bk-grp > .rx-bk-kids { min-height: 44px; min-width: 60px; padding: 0 4px; }
.rx-bk-grp > .rx-bk-kids:empty::before { content: "drop blocks here"; color: var(--color-text-muted); font-size: 0.78rem; font-family: var(--font-sans, inherit); }
.rx-bk-close { font-family: var(--font-mono, monospace); color: var(--bk); font-weight: 700; padding: 0 4px; }
.rx-bk-drop { outline: 2px dashed var(--color-accent); outline-offset: 2px; }
.rx-bk-inspect { margin: 6px 0; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-secondary); }
.rx-bk-inspect .rx-bk-what { margin: 0 0 6px; font-size: 0.92rem; }
.rx-bk-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 6px; }
.rx-bk-fields label { display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; margin: 0; }
.rx-bk-fields label.rx-bk-check { flex-direction: row; align-items: center; gap: 6px; min-height: 44px; }
.rx-bk-fields input[type=text], .rx-bk-fields input[type=number], .rx-bk-fields select { min-height: 44px; font-family: var(--font-mono, monospace); }
.rx-bk-fields input[type=number] { width: 6em; }
.rx-bk-note { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--color-error, #b42318); }
.rx-bk-note:empty { display: none; }
.rx-bk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-bk-palette { display: grid; gap: 10px; margin-top: 10px; }
.rx-bk-pal-row { display: grid; gap: 6px; }
.rx-bk-pal-name { font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.rx-bk-pal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-bk-add { flex-direction: column; padding: 2px 10px; line-height: 1.15; }
.rx-bk-add > .rx-bk-desc { font-family: var(--font-sans, inherit); font-size: 0.74rem; color: var(--color-text-muted); white-space: nowrap; }
.rx-bk-pal-row details > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 0.85rem; color: var(--color-text-muted); }

/* ---- Find mode ---- */
.rx-find-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rx-gap); align-items: start; }
.rx-exlist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rx-exrow { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 6px 0 12px; border: 2px solid var(--color-border-input, var(--color-border)); border-radius: 10px; background: var(--rx-code-bg); }
.rx-exrow:focus-within { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.rx-exrow--want.is-ok { border-color: var(--rx-want); }
.rx-exrow--unwant { border-style: dashed; }
.rx-exrow--unwant.is-ok { border-color: var(--rx-unwant); }
.rx-exrow.is-bad { border-color: var(--color-error, #b42318); border-style: solid; }
.rx-exrow__mark { flex: none; width: 1.2em; font-weight: 700; text-align: center; }
.rx-exrow--want .rx-exrow__mark { color: var(--rx-want); }
.rx-exrow--unwant .rx-exrow__mark { color: var(--rx-unwant); }
.rx-exrow input { flex: 1 1 0; width: 0; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--color-text); font-family: var(--font-mono, monospace); font-size: 1rem; outline: none; box-shadow: none; padding: 0; }
.rx-exrow__st { flex: none; font-size: 0.82rem; white-space: nowrap; color: var(--color-text-muted); }
.rx-exrow__st.is-ok { color: var(--rx-want); }
.rx-exrow--unwant .rx-exrow__st.is-ok { color: var(--rx-unwant); }
.rx-exrow__st.is-bad { color: var(--color-error, #b42318); font-weight: 700; }
.rx-exrow .rx-icon-btn { flex: none; min-width: 44px; min-height: 44px; border-color: transparent; background: transparent; }
.rx-cands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rx-gap); margin: 0; padding: 0; }
.rx-cand { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px 16px; text-align: left; cursor: pointer; color: var(--color-text); background: var(--rx-card-bg); border: 2px solid var(--color-border); border-radius: 12px; }
.rx-cand:hover { border-color: var(--color-accent); }
.rx-cand[aria-checked="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.rx-cand__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.rx-cand__name { font-weight: 700; font-size: 1.05rem; }
.rx-cand__tag { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--color-bg-secondary); color: var(--color-text); }
.rx-cand__tag--rec { background: var(--color-accent); color: var(--rx-on-accent); }
.rx-cand__tag--broad { color: var(--rx-unwant); box-shadow: inset 0 0 0 1px currentColor; background: transparent; }
.rx-cand__code { display: block; padding: 10px 12px; border-radius: 8px; background: var(--rx-code-bg); font-size: 1rem; white-space: pre-wrap; word-break: break-all; }
.rx-cand__score { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; }
.rx-cand__score .is-want { color: var(--rx-want); }
.rx-cand__score .is-unwant { color: var(--rx-unwant); }
.rx-cand__desc { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.rx-plain { margin-top: var(--rx-gap); padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 12px; }
.rx-plain h3 { margin: 0 0 6px; font-size: 1rem; }
.rx-remind { margin: 10px 0 0; font-size: 0.88rem; color: var(--color-text-muted); }

/* ---- small screens: one column, in reading order ---- */
@media (max-width: 1099px) {
    .rx-grid { grid-template-columns: minmax(0, 1fr); }
    .rx-cands { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
    .rx-modes, .rx-find-grid { grid-template-columns: minmax(0, 1fr); }
    .rx-card { padding: 14px 12px; }
    .rx-fold { padding: 4px 12px; }
    .rx-card__head .rx-card__end { margin-left: 0; width: 100%; }
    .rx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rx-pat__box > .rx-mirror, .rx-pat__box > input { font-size: 1rem; }
    .rx-bk-pal-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .rx-bk-add > .rx-bk-desc { white-space: normal; }
    /* the example keeps the row; its ✓ / ✗ status moves under it */
    .rx-exrow { flex-wrap: wrap; row-gap: 0; }
    .rx-exrow__st { order: 3; flex-basis: 100%; padding: 0 0 8px calc(1.2em + 8px); }
    .rx-exrow__st:empty { display: none; }
}

/* Windows high contrast / forced colours: show the real text fields, drop the colour layers */
@media (forced-colors: active) {
    .rx-mirror { display: none; }
    .rx-pat__box > input, .rx-subject > textarea { color: CanvasText; }
    .rx-mode[aria-checked="true"], .rx-cand[aria-checked="true"], .rx-flag[aria-pressed="true"], .rx-seg button[aria-pressed="true"], .rx-tab[aria-selected="true"] { outline: 3px solid Highlight; }
}