/* Venpo Redline — /tools/redline.
   Assembled from the design's redline-shared.css, venpo-button.css and the
   page's own <style>, with every selector scoped under `.rdl`: this page
   shares the DOM with the public site header and footer, so the design's
   global resets (:root, *, html/body, bare nav/a/button rules) are gone and
   what they used to do lives in the reset block below.
   Marker styles target the ENGINE's vocabulary (ins.diffins, del.diffdel,
   .diffmod pairs, bare .mod when "ignore formatting" is off, .diffmoved,
   .diffattr, .diffdup) instead of the design's
   demo mk-* classes; the mk-* names survive only on the legend swatches. */

/* ── reset ─────────────────────────────────────────────────────────────── */
.rdl{--ink:#15131c;--body:#33303d;--muted:#6b6678;--dim:#8c8798;--faint:#b5b1be;--border:#e6e3ec;--soft:#efedf3;--paper:#FAFAFD;--purple:#5b3fb8;--purple-soft:#efeaf7;--purple-line:#ddd3f0;--pos:#0f6a3f;--pos-soft:#e7f5ed;--pos-line:#b6dcc5;--neg:#9d2f45;--neg-soft:#fdeef1;--neg-line:#eec3cd;--amber:#b06410;--amber-soft:#fbefe0;--amber-line:#eccfa6;--shadow-n:0 1px 2px rgba(21,19,28,.05),0 2px 6px -2px rgba(21,19,28,.06);--shadow-h:0 10px 24px -10px rgba(21,19,28,.24),0 2px 6px -2px rgba(21,19,28,.1);font-synthesis-weight:none}
.rdl{color:var(--ink);font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:14px;line-height:normal;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.rdl *{box-sizing:border-box}
/* The layout ships `a{color:inherit;text-decoration:none}` and no font-family
   on form controls — both are what the design's bare-element rules gave it. */
.rdl a{color:var(--purple);text-decoration:none}
.rdl a:hover{color:#4a3299;text-decoration:underline}
.rdl button,.rdl input,.rdl textarea,.rdl select{font-family:inherit}
.rdl .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.94em}

/* ── controls (redline-shared.css) ─────────────────────────────────────── */
.rdl .linkbtn{border:none;background:none;padding:0;font-size:12.5px;font-weight:600;color:var(--purple);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rdl .linkbtn:hover{color:#4a3299}
.rdl .seg{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;flex:none}
.rdl .seg button{border:none;background:#fff;height:32px;padding:0 13px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.rdl .seg button+button{border-left:1px solid var(--soft)}
.rdl .seg button.on{background:var(--soft);color:var(--ink)}
.rdl .seg button:hover:not(.on){background:#fbfafc;color:var(--ink)}

/* ── the document (redline-shared.css) ─────────────────────────────────── */
.rdl .paper{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:18px;padding:44px 52px 48px;box-shadow:0 1px 2px rgba(21,19,28,.04),0 18px 40px -32px rgba(21,19,28,.3)}
.rdl .paper.split{max-width:1280px;padding:0;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.rdl .paper.split .col{min-width:0;padding:0 34px 40px}
.rdl .paper.split .col+.col{border-left:1px solid var(--soft)}
.rdl .colh{position:sticky;top:0;background:#fff;padding:16px 0 12px;margin-bottom:14px;border-bottom:1px solid var(--soft);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);z-index:2}
.rdl .pv.doc{font-family:'Source Serif 4',Georgia,serif;font-size:16.5px;line-height:1.8;color:#221f2b}
.rdl .pv.doc h1,.rdl .pv.doc h2,.rdl .pv.doc h3,.rdl .pv.doc h4{font-family:Inter,sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:34px 0 12px;line-height:1.4}
.rdl .pv.doc>:first-child{margin-top:0}
.rdl .pv.doc p{margin:0 0 15px}
.rdl .pv.doc p:last-child{margin-bottom:0}
.rdl .pv.doc ul,.rdl .pv.doc ol{margin:0 0 15px;padding-left:24px}
.rdl .pv.doc li{margin:0 0 5px}
.rdl .pv.doc a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
.rdl .paper.split .pv.doc{font-size:14.5px;line-height:1.72}
.rdl .pv.doc [data-sel]{outline:2px solid var(--purple);outline-offset:3px;border-radius:4px}
.rdl .pv.doc [data-selpair]{outline:1.5px dashed #bda9ec;outline-offset:3px;border-radius:4px}
.rdl .mvb{font-family:Inter,sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--purple);background:#fff;border:1px solid var(--purple-line);border-radius:5px;padding:3px 5px;margin:0 2px 0 5px;cursor:pointer;vertical-align:2px;display:inline-flex;gap:3px;align-items:center;transition:background .12s}
.rdl .mvb:hover{background:var(--purple);border-color:var(--purple);color:#fff}
.rdl .mvb-a{opacity:.65}

/* ── engine markers ────────────────────────────────────────────────────── */
.rdl .pv.doc ins,.rdl .pv.doc del{border-radius:3px;padding:0 2px;cursor:pointer;transition:box-shadow .14s,background .14s;text-decoration:none}
.rdl .pv.doc ins.diffins,.rdl .pv.doc ins.diffmod,.rdl .pv.doc ins.mod{color:var(--pos);background:var(--pos-soft);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:#7fc3a1;text-underline-offset:3px}
.rdl .pv.doc del.diffdel,.rdl .pv.doc del.diffmod,.rdl .pv.doc del.mod{color:var(--neg);background:var(--neg-soft);text-decoration:line-through;text-decoration-color:#dd94a3}
.rdl .pv.doc ins.diffmoved{color:#4a2f9e;background:var(--purple-soft);box-shadow:inset 0 -1.6px 0 #b7a3e8;text-decoration:none}
.rdl .pv.doc ins.diffmoved.diffmovedchanged{text-decoration:underline;text-decoration-style:dashed;text-decoration-color:#b7a3e8;text-underline-offset:3px}
.rdl .pv.doc del.diffmoved{color:#7a63c4;background:#f8f5fd;text-decoration:line-through;text-decoration-color:#bcaae8;box-shadow:none}
.rdl .pv.doc ins.diffdup,.rdl .pv.doc del.diffdup{color:var(--muted);background:var(--soft);box-shadow:inset 0 -1.5px 0 #c3bfcd;text-decoration:none}
.rdl .pv.doc .diffattr{color:var(--amber);background:var(--amber-soft);border-radius:3px;padding:0 3px;box-shadow:inset 0 -1.6px 0 #e0b877;text-decoration:none;cursor:pointer}

/* Clean copy strips the marks. Written after the marker block and matched on
   `.pv.doc.plain` so it outranks them — the marker selectors carry a tag name
   and would otherwise win. viewHtml('clean') already unwraps them; this is the
   belt to that braces. */
.rdl .pv.doc.plain ins,.rdl .pv.doc.plain del,.rdl .pv.doc.plain .diffattr{background:none;color:inherit;text-decoration:none;box-shadow:none;padding:0;outline:none}
.rdl .pv.doc.plain .mvb{display:none}
.rdl .pv.doc.plain a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}

/* ── legend popover (redline-shared.css) ───────────────────────────────── */
.rdl .legend{position:relative;flex:none}
.rdl .lgbody{display:none;position:absolute;right:0;top:36px;width:300px;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:13px;box-shadow:var(--shadow-h);z-index:30}
.rdl .legend.on .lgbody{display:flex}
.rdl .lg{display:flex;align-items:baseline;gap:10px;font-size:11.5px;color:var(--muted);line-height:1.4}
.rdl .lg em{font-style:normal;font-family:'Source Serif 4',Georgia,serif;font-size:12.5px;flex:none;border-radius:3px;padding:0 3px}
/* The legend keeps the design's demo class names for its four swatches; they
   are decoration, never applied to document content. */
.rdl .lg em.mk-ins{color:var(--pos);background:var(--pos-soft);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:#7fc3a1;text-underline-offset:3px}
.rdl .lg em.mk-del{color:var(--neg);background:var(--neg-soft);text-decoration:line-through;text-decoration-color:#dd94a3}
.rdl .lg em.mk-move{color:#4a2f9e;background:var(--purple-soft);box-shadow:inset 0 -1.6px 0 #b7a3e8}
.rdl .lg em.mk-link{color:var(--amber);background:var(--amber-soft)}

/* ── change filters + bubble chips (redline-shared.css) ────────────────── */
.rdl .fseg{display:flex;gap:6px}
.rdl .fseg button{flex:1;height:30px;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px}
.rdl .fseg button em{font-style:normal;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.rdl .fseg button:hover{border-color:#d8d3e2;color:var(--ink)}
.rdl .fseg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.rdl .fseg button.on em{color:rgba(255,255,255,.6)}
.rdl .chk{width:20px;height:20px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1;margin-top:1px}
.rdl .k-pos{background:var(--pos-soft);color:var(--pos);box-shadow:inset 0 0 0 1px var(--pos-line)}
.rdl .k-neg{background:var(--neg-soft);color:var(--neg);box-shadow:inset 0 0 0 1px var(--neg-line)}
.rdl .k-mv{background:var(--purple-soft);color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple-line)}
.rdl .k-rw{background:var(--soft);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.rdl .k-lk{background:var(--amber-soft);color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber-line)}
.rdl .chsec,.rdl .ckind,.rdl .cmat{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:5px}
.rdl .chsec{background:var(--soft);color:var(--muted)}
.rdl .ckind{color:var(--dim);padding-left:0}
.rdl .cmat{background:var(--amber-soft);color:var(--amber)}

/* ── gate (redline-shared.css) ─────────────────────────────────────────── */
.rdl .gate{position:fixed;inset:0;z-index:10060;display:none;align-items:center;justify-content:center;background:rgba(21,19,28,.4);backdrop-filter:blur(2px)}
.rdl .gate.on{display:flex}
.rdl .gatec{width:412px;max-width:calc(100vw - 40px);background:#fff;border-radius:18px;padding:24px;box-shadow:0 30px 70px -20px rgba(21,19,28,.5)}
.rdl .gatec h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.6px}
.rdl .gatec p{margin:9px 0 16px;font-size:13.5px;line-height:1.55;color:var(--body)}
.rdl .gatec .fine{font-size:11.5px;color:var(--dim);margin:0}
.rdl .gatec .fine .linkbtn{font-size:11.5px}
.rdl .inline{display:flex;gap:8px;flex-wrap:wrap}

/* ── buttons (venpo-button.css) ────────────────────────────────────────── */
.rdl .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 15px;border-radius:999px;border:1px solid var(--border);background:#fff;font-family:inherit;font-size:13px;font-weight:600;line-height:1;color:var(--ink);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.rdl .btn:hover{background:#fbfafc;border-color:#d8d3e2;color:var(--ink);text-decoration:none}
.rdl .btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.rdl .btn>svg{flex:none;color:var(--muted)}
.rdl .btn:hover>svg{color:var(--body)}
.rdl .btn.sm{height:30px;padding:0 12px;font-size:12.5px;gap:6px}
.rdl .btn.lg{height:42px;padding:0 20px;font-size:14.5px;gap:8px}
.rdl .btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.rdl .btn.primary:hover{background:#241f31;border-color:#241f31;color:#fff}
.rdl .btn.primary>svg,.rdl .btn.primary:hover>svg{color:rgba(255,255,255,.82)}
.rdl .btn.purple{background:var(--purple);border-color:var(--purple);color:#fff}
.rdl .btn.purple:hover{background:#4a3299;border-color:#4a3299;color:#fff}
.rdl .btn.purple>svg,.rdl .btn.purple:hover>svg{color:rgba(255,255,255,.85)}
.rdl .btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.rdl .btn.ghost:hover{background:var(--soft);border-color:transparent;color:var(--ink)}
.rdl .btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.rdl .btn.light:hover{background:#f2ecfd;border-color:#f2ecfd}
.rdl .btn.light>svg,.rdl .btn.light:hover>svg{color:var(--purple)}
.rdl .btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.rdl .btn.block{width:100%}
.rdl .btn.sq{border-radius:10px}
.rdl .btn.icon{width:34px;padding:0}
.rdl .btn.icon.sm{width:30px}
.rdl .btn.icon.lg{width:42px}
.rdl .b-s{display:none}
@media (max-width:1340px){.rdl .btn.c-short .b-l{display:none}.rdl .btn.c-short .b-s{display:inline}}
@media (max-width:1140px){.rdl .btn.c-icon .b-l,.rdl .btn.c-icon .b-s{display:none}.rdl .btn.c-icon{width:34px;padding:0;gap:0}.rdl .btn.c-icon.sm{width:30px}.rdl .btn.c-icon.lg{width:42px}}

/* ── input stage ───────────────────────────────────────────────────────── */
/* Normal flow inside the layout's <main>, which already supplies the page
   gutter and the offset under the fixed site header. */
.rdl #stageIn{display:flex;flex-direction:column}
.rdl.out #stageIn{display:none}
.rdl .inwrap{width:100%;max-width:1440px;margin:0 auto;padding:0 0 26px;display:flex;flex-direction:column;min-height:calc(100vh - 220px)}
.rdl .inhead{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap}
.rdl .inhead h1{margin:5px 0 0;font-weight:600;font-size:31px;letter-spacing:-1.1px;line-height:1.1}
.rdl .inhead .sub{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--body);max-width:62ch;text-wrap:pretty}
.rdl .exrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-bottom:3px}
.rdl .exlab{font-size:11.5px;font-weight:600;color:var(--dim)}
.rdl .exchip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 14px 6px 11px;font-size:12.5px;font-weight:500;color:var(--body);cursor:pointer}
.rdl .exchip:hover{border-color:var(--purple-line);color:var(--ink)}
.rdl .exchip i{width:7px;height:7px;border-radius:2px;background:var(--purple-line);flex:none}
.rdl .panes{position:relative;flex:1;min-height:430px;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.rdl .pane{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-n);overflow:hidden;transition:border-color .16s,box-shadow .16s}
.rdl .pane:focus-within{border-color:var(--purple-line);box-shadow:0 0 0 3px rgba(91,63,184,.07),var(--shadow-n)}
.rdl .paneh{flex:none;display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--soft)}
.rdl .pdot{width:9px;height:9px;border-radius:3px;flex:none}
.rdl .pdot.a{background:var(--neg-line)}
.rdl .pdot.b{background:var(--pos-line)}
.rdl .paneh b{font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.rdl .paneh .pn{font-size:11.5px;color:var(--dim)}
.rdl .psp{flex:1}
.rdl .px{border:none;background:none;font-size:11.5px;font-weight:600;color:var(--faint);cursor:pointer;padding:3px 5px;border-radius:6px}
.rdl .px:hover{color:var(--neg);background:var(--neg-soft)}
.rdl .pane textarea{flex:1;min-height:0;width:100%;border:none;outline:none;resize:none;padding:20px 24px;font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.75;color:#221f2b;background:#fff}
.rdl .pane textarea::placeholder{color:var(--faint)}
.rdl .swap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;border-radius:999px;box-shadow:var(--shadow-h)}
.rdl .inbar{flex:none;display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px}
.rdl .optrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rdl .optlab{font-size:11.5px;font-weight:600;color:var(--dim);margin-right:2px}
.rdl .opt2{position:relative;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 11px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:12.5px;color:var(--body);cursor:pointer;user-select:none}
.rdl .opt2:hover{border-color:#d8d3e2;color:var(--ink)}
.rdl .opt2.on{border-color:var(--purple-line);background:var(--purple-soft);color:var(--ink);font-weight:600}
.rdl .opt2 input{position:absolute;opacity:0;pointer-events:none}
.rdl .opt2 i{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--faint);flex:none;display:flex;align-items:center;justify-content:center}
.rdl .opt2.on i{background:var(--purple);border-color:var(--purple)}
.rdl .opt2.on i::after{content:"";width:7px;height:4px;border:1.7px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(0,-1px)}
.rdl .opt2:focus-within{border-color:var(--purple-line);box-shadow:0 0 0 3px rgba(91,63,184,.12)}
.rdl .inspace{flex:1}
.rdl .enote{font-size:11.5px;color:var(--dim);max-width:34ch;line-height:1.4}
/* Server or network refusals from the compare endpoint. */
.rdl .rerr{display:none;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--neg)}
.rdl .rerr.on{display:block}

/* ── output stage ──────────────────────────────────────────────────────── */
/* A fixed overlay rather than a stage swap: the tool's chrome (back, views,
   legend, explain) is its own header, and the site header would otherwise
   float over it. Same treatment as the subprocessor graph's .psg-overlay —
   the site chrome behind it is hidden so nothing there stays reachable. */
.rdl #rdlOut{display:none;position:fixed;inset:0;z-index:10050;background:var(--paper);flex-direction:column}
.rdl.out #rdlOut{display:flex}
body:has(.rdl.out){overflow:hidden}
body:has(.rdl.out) .nav-wrapper,body:has(.rdl.out) .footer{visibility:hidden}
.rdl .ghead{flex:none;background:#fff;border-bottom:1px solid var(--border)}
.rdl .gin{max-width:1560px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:12px;width:100%}
.rdl .gback{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px 0 10px;flex:none;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--body);font-size:12.5px;font-weight:600;cursor:pointer}
.rdl .gback:hover{background:#fbfafc;color:var(--ink)}
.rdl .gtitle{font-size:15px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rdl #stats{display:flex;align-items:center;gap:7px;flex:none}
.rdl .st{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.rdl .st.a{background:var(--pos-soft);color:var(--pos)}
.rdl .st.r{background:var(--neg-soft);color:var(--neg)}
.rdl .st.m{background:var(--purple-soft);color:var(--purple)}
.rdl .st.n{background:var(--soft);color:var(--muted)}
.rdl .gspace{flex:1}
.rdl .outwrap{flex:1;min-height:0;overflow-y:auto;background:var(--paper)}
.rdl .rhead{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:14px;padding:12px 34px;background:rgba(250,250,253,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--soft)}
.rdl #rmeta{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;min-width:0}
.rdl #rmeta b{color:var(--ink);font-weight:600}
.rdl .rspace{flex:1}
.rdl #obody{padding:30px 34px 90px}
/* explanation bubbles */
.rdl .stage{position:relative;max-width:820px;margin:0 auto}
.rdl .stage.gut{max-width:1250px;display:grid;grid-template-columns:minmax(0,820px) 350px;gap:42px;align-items:start}
.rdl .bcol{position:relative}
.rdl .bub{position:absolute;left:0;width:350px;display:flex;gap:10px;font-family:Inter,sans-serif;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px 13px;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(21,19,28,.04),0 14px 30px -22px rgba(21,19,28,.5);transition:top .3s cubic-bezier(.22,.68,.24,1),border-color .16s,box-shadow .16s,transform .16s;animation:rdl-bpop .26s cubic-bezier(.2,.8,.25,1) both}
@keyframes rdl-bpop{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.rdl .bub:hover{border-color:var(--purple-line);box-shadow:0 1px 2px rgba(21,19,28,.04),0 18px 34px -20px rgba(21,19,28,.55)}
.rdl .bub.on{border-color:var(--purple);box-shadow:0 0 0 3px rgba(91,63,184,.12),0 18px 34px -20px rgba(21,19,28,.5)}
.rdl .bnib{position:absolute;left:-28px;top:20px;width:28px;height:1px;background:linear-gradient(to right,rgba(91,63,184,0),var(--purple-line))}
.rdl .bnib::after{content:"";position:absolute;right:-1px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:var(--purple-line)}
.rdl .bub.on .bnib{background:linear-gradient(to right,rgba(91,63,184,.15),var(--purple))}
.rdl .bub.on .bnib::after{background:var(--purple)}
.rdl .btt{flex:1;min-width:0}
.rdl .btt b{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--ink)}
.rdl .bmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
.rdl .bub p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.rdl .bub p q{quotes:'\201C' '\201D';font-family:'Source Serif 4',Georgia,serif;font-size:12.5px;color:var(--body)}
.rdl .bub.inflow{position:static;width:100%;max-width:560px;margin:-2px 0 16px;animation-name:rdl-bpopf}
@keyframes rdl-bpopf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rdl .bub.inflow .bnib{display:none}
.rdl #fseg2{display:none}
.rdl.explaining #fseg2{display:inline-flex}
.rdl .seg.sm button{height:28px;padding:0 11px;font-size:12px}
.rdl #rnote{display:none;align-items:center;gap:7px;font-size:11.5px;color:var(--dim)}
.rdl.explaining #rnote{display:flex}
.rdl.explaining #copyBtn{display:none}
@media (max-width:1300px){.rdl #obody{padding:26px 24px 80px}.rdl .rhead{padding:12px 24px}}
@media (max-width:1260px){.rdl .gtitle{display:none}}
@media (max-width:1080px){.rdl #stats{display:none}}
@media (max-width:980px){.rdl .panes{grid-template-columns:1fr;flex:none;min-height:0;grid-auto-rows:min-content}.rdl .pane textarea{height:250px;flex:none}.rdl .swap{display:none}.rdl .inhead{align-items:flex-start}.rdl .inwrap{min-height:0}}
/* The tool header is a single row of controls sized for a desktop bar. Below
   the phone breakpoint it must wrap instead of running off the side — the
   design never sized it for 375px, and the views, legend and Explain button
   would otherwise be unreachable. */
@media (max-width:760px){.rdl .inhead h1{font-size:25px;letter-spacing:-.7px}.rdl .paper{padding:28px 22px 30px}.rdl .pv.doc{font-size:15.5px}.rdl .paper.split{grid-template-columns:1fr}.rdl .paper.split .col+.col{border-left:none;border-top:1px solid var(--soft)}.rdl .gin{flex-wrap:wrap;padding:10px 16px;gap:8px}.rdl .gspace{display:none}.rdl #viewSeg button{padding:0 10px;font-size:12px}.rdl #obody{padding:22px 16px 70px}.rdl .rhead{flex-wrap:wrap;gap:8px 12px;padding:10px 16px}.rdl .rspace{display:none}.rdl #rnote{flex:1 0 100%}.rdl .lgbody{width:min(300px,calc(100vw - 32px))}}