/* rc-v3.css — Ratio Calculator workbench (v3 design system).
   Scoped to #rcRoot.rcv3 (+ the .rc-edu sections below the stage).
   Tokens replicate the owner's approved workbench mockup: dark is the
   default (ungated), light is derived under [data-theme="light"] per
   the fin-kit convention. Nothing here touches site chrome. */
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/tool-assets/fonts/inter-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}

#rcRoot.rcv3{
  --rcv-surface:#111827; --rcv-inner:#0F1626; --rcv-border:#243049; --rcv-border2:#2C3A5C;
  --rcv-text:#E5E7EB; --rcv-muted:#94A3B8; --rcv-faint:#64748B;
  --rcv-grad:linear-gradient(135deg,#4F46E5,#7C3AED);
  --rcv-accent:#6366F1; --rcv-accent2:#818CF8; --rcv-accent-soft:#A5B4FC;
  --rcv-a:#6366F1; --rcv-b:#F472B6; --rcv-datab:#64748B;
  --rcv-pos:#34D399; --rcv-warn:#FBBF24; --rcv-danger:#F87171;
  --rcv-pos-txt:#34D399; --rcv-warn-txt:#FBBF24; --rcv-danger-txt:#F87171;
  --rcv-ghost-bg:#1B2440; --rcv-track:#243049; --rcv-grid-line:#1C2540;
  --rcv-tip-bg:rgba(16,185,129,.10); --rcv-tip-border:rgba(16,185,129,.35);
  --rcv-err-bg:rgba(248,113,113,.08); --rcv-err-border:rgba(248,113,113,.45); --rcv-err-txt:#FCA5A5;
  --rc-accent:#6366F1; --rc-accent-dim:#4F46E5; --rc-slate:#64748B;
  --rc-ink:var(--rcv-text); --rc-muted:var(--rcv-muted); --rc-line:var(--rcv-border);
  --rc-soft:var(--rcv-inner); --rc-surface:var(--rcv-surface);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--rcv-text);
  background:radial-gradient(900px 420px at 50% -120px,rgba(99,102,241,.22),transparent),#0B1020;
  border-radius:18px;
  padding:14px;
}
html[data-theme="light"] #rcRoot.rcv3{
  --rcv-surface:#FFFFFF; --rcv-inner:#F1F5F9; --rcv-border:#E2E8F0; --rcv-border2:#CBD5E1;
  --rcv-text:#0F172A; --rcv-muted:#5B6B82; --rcv-faint:#94A3B8;
  --rcv-accent2:#4F46E5; --rcv-accent-soft:#4338CA; --rcv-datab:#94A3B8;
  --rcv-pos-txt:#047857; --rcv-warn-txt:#B45309; --rcv-danger-txt:#DC2626;
  --rcv-ghost-bg:#EEF2F7; --rcv-track:#E2E8F0; --rcv-grid-line:#E2E8F0;
  --rcv-tip-bg:#ECFDF5; --rcv-tip-border:rgba(16,185,129,.4);
  --rcv-err-bg:#FEF2F2; --rcv-err-border:#FCA5A5; --rcv-err-txt:#B91C1C;
  background:radial-gradient(900px 420px at 50% -120px,rgba(99,102,241,.10),transparent),#F7F4EE;
}
#rcRoot.rcv3 *{box-sizing:border-box}
/* CSS display beats the hidden attribute — any element the JS toggles
   via hidden (third-term row, bar view, target row…) needs this guard. */
#rcRoot.rcv3 [hidden]{display:none !important}
#rcRoot.rcv3 button{font-family:inherit;cursor:pointer}
#rcRoot.rcv3 :focus-visible{outline:2px solid var(--rcv-accent);outline-offset:2px}
#rcRoot.rcv3 input{font-family:inherit}
.tool-stage.rc-stage-wide{width:80vw;max-width:1680px}
@media (max-width:768px){.tool-stage.rc-stage-wide{width:100%;max-width:none}}

/* ---------- mode row + actions ---------- */
.rcv-toprow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
#rcRoot .rcv-seg{display:flex;background:var(--rcv-inner);border:1px solid var(--rcv-border);border-radius:12px;padding:4px;gap:4px;flex:1;max-width:820px;min-width:min(560px,100%)}
#rcRoot .rcv-seg button{flex:1;border:0;background:transparent;color:var(--rcv-muted);padding:6px 6px;border-radius:9px;font-size:13px;font-weight:600;white-space:nowrap}
#rcRoot .rcv-seg button.on,#rcRoot .rcv-seg button.active{background:var(--rcv-grad);color:#fff}
.rcv-nw{display:inline-block;font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;background:#10B981;color:#04281D;margin-left:6px;font-style:normal;vertical-align:1px}
#rcRoot .rcv-seg button.active .rcv-nw,#rcRoot .rcv-seg button.on .rcv-nw{background:#fff;color:#047857}
.rcv-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
#rcRoot .rcv-g{background:var(--rcv-ghost-bg);border:1px solid var(--rcv-border2);color:var(--rcv-text);border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600}
#rcRoot .rcv-g:hover{border-color:var(--rcv-accent)}

/* ---------- bench grids + cards ---------- */
.rcv-bench3{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,3fr);gap:16px;align-items:stretch}
.rcv-bench-sim{grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr)}
.rcv-card{background:var(--rcv-surface);border:1px solid var(--rcv-border);border-radius:18px;padding:14px;min-width:0}
.rcv-col{display:flex;flex-direction:column;gap:8px}
.rcv-col-stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.rcv-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--rcv-muted);text-transform:uppercase}
.rcv-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rcv-card-head .rcv-lbl{white-space:nowrap}
.rcv-head-note{margin-left:auto;font-size:12px;color:var(--rcv-muted)}
#rcRoot .rcv-seg-s{flex:none;width:172px;max-width:100%;margin-left:auto}
.rcv-hint{font-size:12px;color:var(--rcv-muted);margin:0;line-height:1.45}
#rcRoot .rcv-linkbtn{background:none;border:0;padding:0;color:var(--rcv-accent-soft);font-weight:700;font-size:12px;text-decoration:underline;text-underline-offset:2px}
html[data-theme="light"] #rcRoot .rcv-linkbtn{color:#4F46E5}
.rcv-fine{font-size:12.5px;color:var(--rcv-muted);line-height:1.6;margin:0}
.rcv-body{font-size:14px;line-height:1.65;color:var(--rcv-muted);margin:0}
.rcv-check{font-size:13.5px;color:var(--rcv-pos-txt);font-weight:600;margin:0}

/* ---------- big equation inputs ---------- */
.rcv-eq{display:grid;grid-template-columns:1fr 16px 1fr 20px 1fr 16px 1fr;gap:6px;align-items:center}
.rcv-eq-mini{grid-template-columns:1fr 20px 1fr;max-width:340px}
.rcv-bigwrap{min-width:0;display:flex;align-items:center;gap:5px}
#rcRoot .rcv-bigwrap>label.rc-lab{margin-bottom:0;text-align:left;flex:none}
#rcRoot .rcv-bigwrap>input.rcv-big{flex:1 1 auto;min-width:0;width:auto}
#rcRoot .rcv-big{background:var(--rcv-inner);border:1px solid var(--rcv-border2);border-radius:14px;padding:7px 2px;width:100%;text-align:center;font-size:clamp(18px,1.5vw,21px);font-weight:800;font-variant-numeric:tabular-nums;color:var(--rcv-text)}
#rcRoot .rcv-big:focus{border-color:var(--rcv-accent);outline:none}
#rcRoot .rcv-big.rc-solved{border:2px solid #8B5CF6;background:linear-gradient(135deg,rgba(79,70,229,.35),rgba(124,58,237,.35))}
.rcv-sym{font-size:24px;color:var(--rcv-faint);font-weight:700;text-align:center;padding-bottom:0}
.rcv-eq-third{grid-template-columns:86px 1fr 20px 1fr 130px;align-items:center;margin-top:0}
.rcv-third-lab{font-size:12px;font-weight:700;color:var(--rcv-muted);padding-bottom:0}
.rcv-third-note{font-size:12px;color:var(--rcv-faint);padding-bottom:0;text-align:right}
#rcRoot label.rc-lab{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--rcv-muted);margin-bottom:6px;text-align:center}

/* ---------- chips ---------- */
.rc-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rc-presets span{flex:0 0 100%;font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--rcv-muted);text-transform:uppercase}
#rcRoot .rc-chip,#rcRoot .rcv-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:700;border:1px solid var(--rcv-border2);background:var(--rcv-inner);color:var(--rcv-text)}
#rcRoot .rc-chip:hover,#rcRoot .rcv-chip:hover{border-color:var(--rcv-accent)}
.rc-scenario-note{font-size:13.5px;line-height:1.55;color:var(--rcv-muted);margin:0}

/* ---------- solved / verdict gradient card ---------- */
.rcv-solved-card{border-radius:20px;padding:10px 14px;background:var(--rcv-grad);box-shadow:0 20px 50px rgba(99,102,241,.35);color:#fff}
.rcv-solved-lab{font-size:13px;font-weight:600;opacity:.85;letter-spacing:.4px}
.rcv-solved-val{font-size:31px;font-weight:800;letter-spacing:-1.5px;margin:4px 0;line-height:1.05;font-variant-numeric:tabular-nums}
.rcv-solved-val-s{font-size:34px;letter-spacing:-.5px}
.rcv-solved-sub{font-size:14px;opacity:.92;line-height:1.5}
.rcv-solved-sub .rc-bigline{font-size:14px;font-weight:600;color:#fff}
.rcv-solved-sub .rc-solved-val{font-size:14px;letter-spacing:0;color:#fff;text-decoration:underline}
#rcSolvedSimple{font-weight:600}

/* ---------- stat tiles ---------- */
.rcv-tiles2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rcv-stat{padding:6px 10px;border-radius:14px;background:var(--rcv-inner);border:1px solid var(--rcv-border);min-width:0}
.rcv-stat p{margin:0;font-size:11.5px;color:var(--rcv-muted);font-weight:600}
.rcv-stat h4{margin:3px 0 0;font-size:17px;line-height:1.15;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rcv-text);letter-spacing:-.01em;white-space:nowrap}
.rcv-stat h4.rcv-c-a{color:var(--rcv-accent2)}
.rcv-stat h4.rcv-c-b{color:#F472B6}
html[data-theme="light"] .rcv-stat h4.rcv-c-b{color:#DB2777}

/* ---------- generic fields / actions / errors ---------- */
#rcRoot input[type="number"]:not(.rcv-big):not(.rcv-n-input),#rcRoot input[type="text"]{
  background:var(--rcv-inner);border:1px solid var(--rcv-border2);border-radius:10px;
  padding:8px 12px;font-size:14px;font-weight:700;color:var(--rcv-text);width:100%}
#rcRoot input[type="number"]:not(.rcv-big):not(.rcv-n-input):focus,#rcRoot input[type="text"]:focus{border-color:var(--rcv-accent);outline:none}
.rcv-field{display:flex;flex-direction:column;gap:2px}
.rcv-field label.rc-lab{text-align:left}
.rcv-field-row{display:flex;gap:12px}
.rcv-field-row .rcv-field{flex:1}
.rcv-field-row .rcv-field-unit{flex:0 0 92px}
.rc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.rc-error{margin:0;border:1px solid var(--rcv-err-border);background:var(--rcv-err-bg);color:var(--rcv-err-txt);padding:8px 38px 8px 12px;font-size:13.5px;line-height:1.55;border-radius:12px;position:relative}
.rc-error-x{position:absolute;top:4px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--rcv-err-txt);font-size:17px;line-height:1;opacity:.65;cursor:pointer;padding:0}
.rc-error-x:hover{opacity:1;background:rgba(248,113,113,.14)}
.rc-error-x:focus-visible{outline:2px solid var(--rcv-err-txt);outline-offset:1px;opacity:1}
.rc-next{margin:auto 0 0;font-size:13.5px;color:var(--rcv-muted)}
.rc-next strong{color:var(--rcv-text)}
.rc-next a{font-weight:600;color:var(--rcv-accent-soft)}
html[data-theme="light"] .rc-next a{color:#4F46E5}
#rcRoot .rc-solved-tag{display:inline-block;background:var(--rcv-grad);color:#fff !important;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:8px;align-self:flex-start}

/* ---------- range sliders (mock .b pattern) ---------- */
#rcRoot .rcv-range{-webkit-appearance:none;appearance:none;flex:1;min-width:120px;height:6px;border-radius:6px;background:linear-gradient(90deg,#6366F1,#8B5CF6) 0 0/var(--p,20%) 100% no-repeat,var(--rcv-track);outline-offset:4px;cursor:pointer;border:0;padding:0}
#rcRoot .rcv-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45);border:0;cursor:pointer}
#rcRoot .rcv-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.45);border:0;cursor:pointer}
#rcRoot .rcv-range::-moz-range-progress{height:6px;border-radius:6px;background:linear-gradient(90deg,#6366F1,#8B5CF6)}
#rcRoot .rcv-range::-moz-range-track{height:6px;border-radius:6px;background:var(--rcv-track)}
.rcv-n{background:var(--rcv-inner);border:1px solid var(--rcv-border2);border-radius:10px;padding:7px 12px;min-width:70px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
#rcRoot input.rcv-n-input{width:86px;min-width:0;color:var(--rcv-text)}
.rcv-scale-row{display:flex;align-items:center;gap:12px}
.rcv-scale-lab{font-size:13px;color:var(--rcv-muted);font-weight:600}

/* ---------- share column: donut + bar view ---------- */
.rcv-donut-wrap{display:flex;justify-content:center;padding:2px 0}
#rcDonut{width:198px;max-width:100%;height:auto;touch-action:none;cursor:grab}
#rcRoot.rc-dragging #rcDonut{cursor:grabbing}
.rcv-donut-ratio{fill:var(--rcv-text);font-size:28px;font-weight:800;font-family:'Inter',sans-serif}
.rcv-donut-parts{fill:var(--rcv-muted);font-size:12px;font-family:'Inter',sans-serif}
.rcv-thinbar{display:flex;height:22px;border-radius:11px;overflow:hidden;background:var(--rcv-track)}
#rcDonutBarA{background:#6366F1;transition:width .35s ease}
#rcDonutBarB{background:#F472B6;transition:width .35s ease}
#rcDonutBarX{background:#FBBF24;transition:width .35s ease}
.rcv-leg-row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--rcv-text)}
.rcv-leg-row b{margin-left:auto;font-variant-numeric:tabular-nums}
.rcv-leg-dot{width:12px;height:12px;border-radius:4px;flex:none}
#rcRoot.rc-dragging #rcDonutBarA,#rcRoot.rc-dragging #rcDonutBarB,#rcRoot.rc-dragging #rcDonutBarX{transition:none}
/* Donut segment hover pull-out — restored from the pre-workbench pie
   (owner order, 2026-10-19; the workbench donut shipped without it).
   Same contract as the solver pie's slices below: the hovered
   segment eases 7 units out along its own bisector (the JS keeps
   --rc-ex/--rc-ey on each arc in step with the displayed fraction),
   the pop is held off while the sweep tween runs (.rc-tweening,
   which also covers drags) and on touch pointers, and a segment
   spanning the full ring (.rc-donut-full) scales gently about its
   own centre instead. The arcs' -90° start rotation lives on a
   wrapping <g> in the blade, so this CSS transform never overrides
   it. */
#rcDonut .rc-donut-arc{transition:transform .2s ease;transform-box:fill-box;transform-origin:center}
@media (hover:hover) and (pointer:fine){
  #rcDonut:not(.rc-tweening) .rc-donut-arc:hover{transform:translate(var(--rc-ex,0px),var(--rc-ey,0px))}
  #rcDonut:not(.rc-tweening) .rc-donut-arc.rc-donut-full:hover{transform:scale(1.045)}
}
.rcv-tip{display:flex;gap:14px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--rcv-tip-bg);border:1px solid var(--rcv-tip-border);font-size:13.5px;line-height:1.6;margin-top:auto;color:var(--rcv-text)}
.rcv-tip b{color:var(--rcv-pos-txt)}
.rcv-tip-ic{font-size:20px;line-height:1}
/* live "See it" panel, restyled (bar view) */
#rcVizPie{width:200px;max-width:100%;height:auto;display:block;margin:0 auto;touch-action:none;cursor:grab}
#rcVizPie .rc-pie-slice{transition:transform .2s ease}
#rcVizPie .rc-pie-full{transform-box:fill-box;transform-origin:center}
@media (hover:hover) and (pointer:fine){
  #rcVizPie:not(.rc-tweening) .rc-pie-slice:hover{transform:translate(var(--rc-ex,0px),var(--rc-ey,0px))}
  #rcVizPie:not(.rc-tweening) .rc-pie-slice.rc-pie-full:hover{transform:scale(1.045)}
}
.rc-legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--rcv-text)}
.rc-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px}
.rc-viz-bars{margin-top:16px;display:grid;gap:8px}
.rc-viz-bar-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center}
.rc-viz-bar-lab{font-size:12.5px;font-weight:700;color:var(--rcv-muted);letter-spacing:.04em}
.rc-vizbar{display:flex;height:30px;border-radius:8px;overflow:hidden;position:relative;cursor:ew-resize;touch-action:none;background:var(--rcv-track)}
.rc-vizbar div{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12.5px;min-width:0;overflow:hidden;white-space:nowrap;transition:width .35s ease}
#rcVizBarA1,#rcVizBarC1{background:#6366F1}
#rcVizBarA2,#rcVizBarC2{background:var(--rcv-datab)}
.rc-viz-note{margin:12px 0 2px;font-size:13.5px;line-height:1.5;color:var(--rcv-muted)}
.rc-viz-note.ok{color:var(--rcv-accent-soft);font-weight:600}
html[data-theme="light"] .rc-viz-note.ok{color:#4F46E5}
.rc-viz-note.bad{color:var(--rcv-danger-txt)}
.rc-grip{position:absolute;top:0;bottom:0;width:14px;margin-left:-7px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.rc-grip span{display:block;width:6px;height:58%;min-height:14px;background:#fff;border:1.5px solid rgba(23,23,28,.35);border-radius:3px;opacity:.92;box-sizing:border-box}
@media (hover:hover) and (pointer:fine){.rc-vizbar:hover .rc-grip span,.rc-splitbar:hover .rc-grip span{border-color:var(--rcv-accent);opacity:1}}
#rcRoot.rc-dragging .rc-vizbar div,#rcRoot.rc-dragging .rc-splitbar div,#rcRoot.rc-dragging #rcVizPie .rc-pie-slice{transition:none !important}

/* ---------- ratio shape stage ---------- */
.rcv-shape-stage{flex:1;display:flex;align-items:center;justify-content:center;background:var(--rcv-inner);border:1px dashed var(--rcv-border2);border-radius:14px;position:relative;background-image:linear-gradient(var(--rcv-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--rcv-grid-line) 1px,transparent 1px);background-size:32px 32px;min-height:300px;padding:24px 32px}
.rcv-shape-stage svg{width:100%;max-width:340px;height:auto}
#rcVizRect,#rcScRect{touch-action:none;cursor:nwse-resize}
.rcv-shape-wlab{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:13px;color:var(--rcv-accent-soft);font-weight:700}
.rcv-shape-hlab{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--rcv-accent-soft);font-weight:700}
.rc-vcap{text-align:center;margin:10px 0 0;font-size:13.5px;color:var(--rcv-muted)}

/* ---------- simplify visuals (live set, restyled) ---------- */
.rc-two{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;max-width:480px;margin-bottom:16px}
.rc-two .rc-op{font-size:26px;font-weight:700;color:var(--rcv-faint);padding-bottom:8px}
.rc-simline{margin:0;font-size:clamp(22px,3.6vw,32px);font-weight:800;color:var(--rcv-text)}
.rc-slider-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rc-slider-row label{font-size:13px;font-weight:600;color:var(--rcv-muted)}
.rc-slider-row input[type="range"]{flex:1;min-width:160px;accent-color:var(--rcv-accent)}
.rc-slider-row output{font-weight:700;color:var(--rcv-accent-soft);min-width:44px}
.rc-scaled{font-size:16px;color:var(--rcv-text)}
.rc-scaled strong{color:var(--rcv-accent-soft)}
.rc-visual h4{margin:0 0 12px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--rcv-muted);font-weight:700}
.rc-visual svg{display:block;margin:0 auto;max-width:100%;height:auto}
#rcPie{width:200px;touch-action:none;cursor:grab}
.rc-splitbar{display:flex;height:52px;border-radius:10px;overflow:hidden;position:relative;cursor:ew-resize;touch-action:none;background:var(--rcv-track)}
.rc-splitbar div{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;min-width:0;overflow:hidden;white-space:nowrap;transition:width .35s ease}
#rcBarA{background:#6366F1}
#rcBarB{background:var(--rcv-datab)}
#rcRect{touch-action:none;cursor:nwse-resize}
#rcNumLine{touch-action:none;cursor:ew-resize}
#rcGraph{touch-action:none;cursor:grab}
#rcRoot.rc-dragging #rcPie,#rcRoot.rc-dragging #rcGraph{cursor:grabbing}
.rc-vnote{font-size:13px;color:var(--rcv-muted);margin:0}
.rc-play{position:relative;height:300px;background:var(--rcv-inner);background-image:linear-gradient(var(--rcv-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--rcv-grid-line) 1px,transparent 1px);background-size:32px 32px;border:1px dashed var(--rcv-border2);border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rc-drag-rect{background:linear-gradient(135deg,#4F46E5,#8B5CF6);border-radius:12px;position:relative;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;box-shadow:0 16px 40px rgba(99,102,241,.35)}
.rc-drag-size{color:#fff;font-weight:700;font-size:15px;pointer-events:none;user-select:none;white-space:nowrap}
.rc-handle{position:absolute;right:0;bottom:0;width:26px;height:26px;background:#fff;border:0;border-radius:7px 0 0 0;color:#4F46E5;font-size:15px;line-height:24px;text-align:center;cursor:nwse-resize;touch-action:none;user-select:none;box-sizing:border-box}
.rc-drag-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin-top:14px}
.rc-drag-controls>div{width:130px}
.rc-drag-controls label.rc-lab{text-align:left}
.rc-drag-read{margin:0;padding-bottom:9px;font-size:16.5px;font-weight:700;color:var(--rcv-text)}
#rcRoot .rc-svg-lab{fill:var(--rcv-muted);font-size:10px;font-weight:700}
#rcRoot .rc-svg-val{fill:var(--rcv-text);font-size:10.5px;font-weight:700}
#rcRoot .rc-nl-axis{stroke:var(--rcv-muted);stroke-width:1.5}
#rcRoot .rc-nl-tick{stroke:var(--rcv-muted);stroke-width:1.5}
#rcRoot .rc-nl-link{stroke:var(--rcv-border);stroke-width:1}
#rcRoot .rc-graph-grid{stroke:var(--rcv-border);stroke-width:1}
#rcRoot .rc-graph-axis{stroke:var(--rcv-muted);stroke-width:1.5}
#rcRoot .rc-blk-bundle{fill:none;stroke:var(--rcv-muted);stroke-width:1;stroke-dasharray:3 3;opacity:.55}
#rcRoot .rc-pie-dot,#rcRoot .rc-rect-grip{pointer-events:none}
@keyframes rcPop{from{opacity:.3;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
.rc-pop{animation:rcPop .3s ease;transform-origin:center}
@keyframes rcPulse{from{opacity:.3}to{opacity:1}}
.rc-pulse{animation:rcPulse .5s ease}

/* ---------- tables ---------- */
.rc-tablewrap{margin-top:4px}
.rc-tablewrap h4{margin:0 0 10px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--rcv-muted);font-weight:700}
#rcRoot table.rc-table{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
#rcRoot table.rc-table th,#rcRoot table.rc-table td{padding:7px 12px;text-align:left;border-top:1px solid var(--rcv-border);color:var(--rcv-text)}
#rcRoot table.rc-table thead th{border-top:0;color:var(--rcv-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- parts (Split + Mixing) ---------- */
.rcv-part-row{display:grid;grid-template-columns:1fr 96px 30px;gap:8px;align-items:center;margin-bottom:8px}
#rcRoot .rcv-part-row input.rcv-part-label{text-align:left}
#rcRoot .rcv-part-row input.rcv-part-val{text-align:right}
#rcRoot .rcv-part-x{background:var(--rcv-inner);border:1px solid var(--rcv-border2);color:var(--rcv-muted);border-radius:8px;width:30px;height:36px;font-size:16px;font-weight:700;line-height:1}
#rcRoot .rcv-part-x:hover{color:var(--rcv-danger-txt);border-color:var(--rcv-danger)}
.rcv-partsbar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--rcv-track)}
.rcv-partsbar>div{transition:width .35s ease;min-width:0}
.rcv-partsbar-s{height:22px}
.rcv-part-outs{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.rcv-part-out{display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 2px;border-top:1px solid var(--rcv-border)}
.rcv-part-out:first-child{border-top:0}
.rcv-part-dot{width:12px;height:12px;border-radius:4px;flex:none}
.rcv-part-name{color:var(--rcv-text);font-weight:600}
.rcv-part-amt{margin-left:auto;font-size:17px;font-variant-numeric:tabular-nums}
.rcv-part-pct{color:var(--rcv-muted);font-weight:700;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.rc-fineprint{font-size:13px;color:var(--rcv-muted);margin:12px 0 0;line-height:1.55}

/* ---------- compare ---------- */
.rcv-xrows{display:flex;flex-direction:column;gap:8px}
.rcv-xrow{display:flex;align-items:center;justify-content:space-between;font-size:14px;background:var(--rcv-inner);border:1px solid var(--rcv-border);border-radius:10px;padding:10px 14px}
.rcv-xrow span{color:var(--rcv-muted);font-weight:600}
.rcv-xrow b{font-variant-numeric:tabular-nums}
.rcv-bar-lab{font-size:13px;font-weight:600;color:var(--rcv-muted);margin:12px 0 6px}
.rcv-cmpbar{height:22px;border-radius:11px;background:var(--rcv-track);overflow:hidden}
.rcv-cmpbar>div{height:100%;background:linear-gradient(90deg,#6366F1,#8B5CF6);border-radius:11px;transition:width .35s ease}

/* ---------- below-bench rows ---------- */
.rcv-divider{margin:26px 0 22px;border-top:1px dashed var(--rcv-border2)}
.rcv-row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.rcv-row3 .rcv-card{display:flex;flex-direction:column;gap:14px}
.rcv-steps{display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.6;color:var(--rcv-text)}
.rcv-steps b{color:var(--rcv-pos-txt)}
.rcv-steps .rcv-step-n{color:var(--rcv-accent-soft)}
.rcv-fw-context{font-size:12.5px;color:var(--rcv-muted);margin:0}
.rcv-next-tile{display:block;padding:12px 14px;border-radius:14px;background:var(--rcv-inner);border:1px solid var(--rcv-border);text-decoration:none;margin-top:2px}
.rcv-next-tile b{display:block;font-size:14.5px;color:var(--rcv-text)}
.rcv-next-tile span{font-size:12px;color:var(--rcv-muted)}
.rcv-next-tile:hover{border-color:var(--rcv-accent)}
.rcv-row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px;align-items:stretch}
.rcv-row2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;margin-top:20px;align-items:stretch}
.rcv-feat{display:flex;flex-direction:column;gap:12px}
.rcv-feat[data-open-mode]{cursor:pointer}
.rcv-feat[data-open-mode]:hover{border-color:var(--rcv-accent)}
.rcv-feat-head{display:flex;align-items:center;gap:8px}
.rcv-feat-txt{font-size:13px;color:var(--rcv-muted);margin:0}
.rcv-feat-vals{display:flex;justify-content:space-between;font-weight:700;font-variant-numeric:tabular-nums;gap:8px;flex-wrap:wrap}
.rcv-feat-cmp{display:flex;align-items:center;gap:10px}
.rcv-feat-big{flex:1;background:var(--rcv-inner);border:1px solid var(--rcv-border2);border-radius:14px;padding:10px 0;text-align:center;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.rcv-feat-tip{padding:10px 12px;border-radius:12px;background:var(--rcv-tip-bg);border:1px solid var(--rcv-tip-border);font-size:13px;line-height:1.55;margin:0;color:var(--rcv-text)}
.rcv-feat-tip b{color:var(--rcv-pos-txt)}
.rcv-pr-q{font-size:15px;font-weight:700;margin:0;color:var(--rcv-text)}
.rcv-pr-row{display:flex;gap:8px}
#rcRoot input.rcv-pr-ans{flex:1;min-width:0;text-align:center;color:var(--rcv-text)}
.rcv-pr-msg{font-size:12.5px;margin:0;min-height:16px;color:var(--rcv-muted);line-height:1.5}
.rcv-pr-msg.ok{color:var(--rcv-pos-txt)}
.rcv-pr-msg.bad{color:var(--rcv-danger-txt)}
.rcv-pr-streak{font-size:12px;color:var(--rcv-pos-txt);margin:0;font-weight:600}

/* ---------- screen finder + good to know ---------- */
.rc-finder{border:1px solid var(--rcv-border);border-radius:18px;padding:22px;background:var(--rcv-surface)}
.rc-finder h3{margin:0 0 14px;font-size:17px;font-weight:700;color:var(--rcv-text)}
.rc-finder-row{display:flex;flex-wrap:wrap;gap:14px;align-items:end}
.rc-finder-row>div{width:140px}
.rc-finder-row label.rc-lab{text-align:left}
.rc-finder-row .rc-op{font-size:22px;font-weight:700;color:var(--rcv-muted);padding-bottom:9px;width:auto}
.rc-finder-out{margin:0;padding-bottom:9px;font-size:21px;font-weight:600;color:var(--rcv-text)}
.rc-finder-out strong{color:var(--rcv-accent-soft);font-weight:700}
html[data-theme="light"] .rc-finder-out strong{color:#4F46E5}
.rc-finder-note{font-size:13px;color:var(--rcv-muted);margin:10px 0 0}
.rcv-gtk .tool-note{margin:0 0 14px}
.rc-goodtoknow h3{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--rcv-text)}
.rc-goodtoknow ul{margin:0;padding-left:18px}
.rc-goodtoknow li{font-size:13.5px;line-height:1.55;color:var(--rcv-muted);margin:0 0 5px}
.rc-goodtoknow strong{color:var(--rcv-text)}
.rc-crosslink{margin-top:22px;padding-top:16px;border-top:1px solid var(--rcv-border);font-size:14.5px;color:var(--rcv-muted)}
.rc-crosslink a{font-weight:600;color:var(--rcv-accent-soft)}
.rc-stagebar{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0 0}
.rc-stagebar span{font-size:13px;color:var(--rcv-muted);font-weight:600}
#rcRoot .rc-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);background:#1B2440;border:1px solid var(--rcv-border2);color:#E5E7EB;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:300}
#rcRoot .rc-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- educational sections below the stage (live rules, kept) ---------- */
.rc-edu{width:min(1240px,100%);margin:0 auto 8px;padding:0 clamp(20px,4vw,48px) 26px;color:var(--text,#17171c)}
.rc-edu h2{font-size:clamp(21px,3vw,27px);margin:26px 0 12px;font-weight:700}
.rc-edu h3{font-size:16.5px;margin:20px 0 8px;font-weight:700}
.rc-edu p,.rc-edu li{font-size:15.5px;line-height:1.65;color:var(--text-muted,#55555f);max-width:78ch}
.rc-edu p strong,.rc-edu li strong{color:var(--text,#17171c)}
.rc-edu ul{padding-left:20px;margin:8px 0}
.rc-edu li{margin-bottom:5px}
.rc-edu .rc-example{border-left:3px solid #4f46e5;background:var(--bg-soft,#f7f7f8);padding:13px 16px;margin:14px 0;max-width:78ch;border-radius:0 2px 2px 0}
.rc-edu .rc-example p{margin:0}
.rc-table-scroll{overflow-x:auto;margin-top:14px;border:1px solid var(--border,#e4e4e7);border-radius:2px}
table.rc-ref-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:720px}
table.rc-ref-table th,table.rc-ref-table td{padding:8px 14px;text-align:left;border-bottom:1px solid var(--border,#e4e4e7)}
table.rc-ref-table thead th{background:var(--bg-soft,#f7f7f8);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,#6d6d78);font-weight:700}
table.rc-ref-table tbody tr:last-child td{border-bottom:none}
table.rc-ref-table td.rc-num,table.rc-ref-table th.rc-num{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;white-space:nowrap}
table.rc-ref-table td.rc-name{font-weight:600;color:var(--text,#17171c);white-space:nowrap}
.rc-prev{background:#4f46e5;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:2px;padding:2px 4px;box-sizing:border-box;line-height:1.25}
.rc-prev .rc-prev-name{font-weight:600;font-size:12px;white-space:nowrap}
.rc-prev .rc-prev-name.long{font-size:10.5px}
.rc-prev .rc-prev-ratio{font-size:10.5px;opacity:.82;white-space:nowrap}
.rc-table-hint{font-size:13.5px;color:var(--text-muted,#6d6d78);margin:10px 0 0}
table.rc-ref-table tbody tr{cursor:pointer;transition:background-color .3s ease}
table.rc-ref-table tbody tr:hover{background:var(--bg-soft,#f7f7f8)}
table.rc-ref-table tbody tr.rc-row-match{background:rgba(79,70,229,.10)}
.rc-yourtag{display:inline-block;margin-top:6px;background:#4f46e5;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:2px;white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .rcv-bench3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rcv-bench3>.rcv-card:last-child,.rcv-bench3>.rcv-col-stack:last-child{grid-column:1/-1}
  .rcv-row4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .rcv-bench3{grid-template-columns:1fr}
  .rcv-row3,.rcv-row2{grid-template-columns:1fr}
  #rcRoot.rcv3{padding:16px}
  .rcv-toprow{gap:10px}
  .rcv-actions{margin-left:0}
}
@media (max-width:640px){
  .rcv-row4{grid-template-columns:1fr}
  .rcv-card{padding:12px}
  #rcRoot .rcv-eq{grid-template-columns:1fr 16px 1fr 20px 1fr 16px 1fr}
  .rc-play{height:240px}
  .rcv-solved-val{font-size:36px}
  #rcRoot .rcv-seg{min-width:0}
  #rcRoot .rcv-seg button{font-size:12px;padding:8px 3px}
  .rcv-nw{display:none}
  .rcv-eq-third{grid-template-columns:64px 1fr 16px 1fr}
  .rcv-third-note{display:none}
  .rc-finder-row>div{width:118px}
}

/* ---------- print report ---------- */
.rcv-print{display:none}
@media print{
  body:has(#rcRoot) .tool-topbar,body:has(#rcRoot) .tool-hero,body:has(#rcRoot) .tool-footer,
  body:has(#rcRoot) .tool-moved-intro,body:has(#rcRoot) .tool-guide,body:has(#rcRoot) #awsug,
  body:has(#rcRoot) .rc-edu{display:none !important}
  .tool-stage.rc-stage-wide{width:100%;max-width:none}
  #rcRoot.rcv3{background:#fff;color:#000;border-radius:0;padding:0}
  #rcRoot.rcv3>*{display:none !important}
  #rcRoot.rcv3 .rcv-print{display:block !important;color:#000;font-family:system-ui,sans-serif;font-size:13px;line-height:1.6}
  .rcv-print h2{font-size:19px;margin:0 0 4px}
  .rcv-print h3{font-size:14px;margin:18px 0 6px}
  .rcv-print .rcp-sub{color:#444;margin:0 0 8px}
  .rcv-print table.rcp-kv{width:100%;border-collapse:collapse;font-size:12.5px}
  .rcv-print table.rcp-kv td{border-bottom:1px solid #ccc;padding:4px 6px}
  .rcv-print table.rcp-kv td:first-child{color:#444;width:40%}
  .rcv-print .rcp-steps div{margin:3px 0}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  #rcRoot.rcv3 *,#rcRoot.rcv3 *::before,#rcRoot.rcv3 *::after,
  .rc-edu *,table.rc-ref-table *{animation:none !important;transition:none !important}
  #rcVizPie .rc-pie-slice:hover{transform:none !important}
  #rcDonut .rc-donut-arc:hover{transform:none !important}
}

/* ---------- theme-override layer ----------
   theme.css / tool-page-v2.css brute-force panel fonts, span/label
   colours, div background-images and amber buttons with !important.
   These scoped rules — panel scope + doubled root class for
   specificity — restore the v3 design inside #rcRoot only. */
.tool-panel #rcRoot.rcv3.rcv3{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important}
.tool-panel #rcRoot.rcv3.rcv3 *{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important}
.tool-panel #rcRoot.rcv3.rcv3 label.rc-lab{color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-solved-card{background-color:transparent !important;background-image:var(--rcv-grad) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-solved-card *{color:#fff !important}
.tool-panel #rcRoot.rcv3.rcv3 button.rcv-g{background:var(--rcv-ghost-bg) !important;color:var(--rcv-text) !important;border:1px solid var(--rcv-border2) !important;border-radius:10px !important;padding:8px 12px !important;font-size:13px !important;font-weight:600 !important;box-shadow:none !important;text-shadow:none !important;transform:none !important}
.tool-panel #rcRoot.rcv3.rcv3 button.rcv-g:hover{border-color:var(--rcv-accent) !important;background:var(--rcv-ghost-bg) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-seg button{background:transparent !important;color:var(--rcv-muted) !important;border:none !important;border-radius:9px !important;padding:6px 6px !important;font-size:13px !important;box-shadow:none !important;text-shadow:none !important;transform:none !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-seg button.on,.tool-panel #rcRoot.rcv3.rcv3 .rcv-seg button.active{background-color:transparent !important;background-image:var(--rcv-grad) !important;color:#fff !important}
.tool-panel #rcRoot.rcv3.rcv3 button.rc-chip,.tool-panel #rcRoot.rcv3.rcv3 button.rcv-chip{background:var(--rcv-inner) !important;color:var(--rcv-text) !important;border:1px solid var(--rcv-border2) !important;border-radius:999px !important;padding:3px 9px !important;font-size:12.5px !important;font-weight:700 !important;box-shadow:none !important;text-shadow:none !important;transform:none !important}
.tool-panel #rcRoot.rcv3.rcv3 button.rc-chip:hover,.tool-panel #rcRoot.rcv3.rcv3 button.rcv-chip:hover{border-color:var(--rcv-accent) !important;color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 button.rcv-part-x{background:var(--rcv-inner) !important;color:var(--rcv-muted) !important;border:1px solid var(--rcv-border2) !important;border-radius:8px !important;box-shadow:none !important;text-shadow:none !important;transform:none !important}
.tool-panel #rcRoot.rcv3.rcv3 button.rcv-linkbtn{background:none !important;border:none !important;color:var(--rcv-accent-soft) !important;padding:0 !important;box-shadow:none !important;text-shadow:none !important;transform:none !important}
html[data-theme="light"] .tool-panel #rcRoot.rcv3.rcv3 button.rcv-linkbtn{color:#4F46E5 !important}
.tool-panel #rcRoot.rcv3.rcv3 input.rcv-big{background:var(--rcv-inner) !important;border:1px solid var(--rcv-border2) !important;border-radius:14px !important;color:var(--rcv-text) !important;font-weight:800 !important;font-size:21px !important;padding:7px 4px !important;box-shadow:none !important}
.tool-panel #rcRoot.rcv3.rcv3 input.rcv-big.rc-solved{background-color:transparent !important;background-image:linear-gradient(135deg,rgba(79,70,229,.35),rgba(124,58,237,.35)) !important;border:2px solid #8B5CF6 !important}
.tool-panel #rcRoot.rcv3.rcv3 input[type="number"]:not(.rcv-big),.tool-panel #rcRoot.rcv3.rcv3 input[type="text"]{background:var(--rcv-inner) !important;border:1px solid var(--rcv-border2) !important;border-radius:10px !important;color:var(--rcv-text) !important;font-weight:700 !important;font-size:14px !important;box-shadow:none !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-parts input{font-size:15px !important}
.tool-panel #rcRoot.rcv3.rcv3 input.rcv-range{background-color:transparent !important;background-image:linear-gradient(90deg,#6366F1,#8B5CF6),linear-gradient(var(--rcv-track),var(--rcv-track)) !important;background-size:var(--p,20%) 100%,100% 100% !important;background-repeat:no-repeat !important;border:none !important;padding:0 !important;box-shadow:none !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-solved-tag{color:#fff !important}
.tool-panel #rcRoot.rcv3.rcv3 table.rc-table{border:none !important}
.tool-panel #rcRoot.rcv3.rcv3 table.rc-table th,.tool-panel #rcRoot.rcv3.rcv3 table.rc-table td{border:none !important;border-top:1px solid var(--rcv-border) !important;color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 table.rc-table thead th{border-top:none !important;color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-donut-ratio{fill:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-donut-parts{fill:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-next-tile{background-image:none !important}
/* theme sheets also pin panel heading/span/div text colours — restate
   the v3 text colours for every text-bearing element class. */
.tool-panel #rcRoot.rcv3.rcv3 .rcv-stat h4{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-stat h4.rcv-c-a{color:var(--rcv-accent2) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-stat h4.rcv-c-b{color:#F472B6 !important}
html[data-theme="light"] .tool-panel #rcRoot.rcv3.rcv3 .rcv-stat h4.rcv-c-b{color:#DB2777 !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-stat p{color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-lbl{color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-simline{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-drag-read{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-finder-out{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-finder h3,.tool-panel #rcRoot.rcv3.rcv3 .rc-goodtoknow h3{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-visual h4,.tool-panel #rcRoot.rcv3.rcv3 .rc-tablewrap h4{color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-legend,.tool-panel #rcRoot.rcv3.rcv3 .rcv-leg-row{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-vcap,.tool-panel #rcRoot.rcv3.rcv3 .rc-fineprint,.tool-panel #rcRoot.rcv3.rcv3 .rcv-fine{color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-steps{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-pr-q{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-feat-big{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-xrow b,.tool-panel #rcRoot.rcv3.rcv3 .rcv-part-amt{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-next-tile b{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-next-tile span{color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-scaled{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rc-two .rc-op,.tool-panel #rcRoot.rcv3.rcv3 .rcv-sym{color:var(--rcv-faint) !important}

/* ---------- phones: keep the big inputs + mode switch usable ----------
   (after the override layer on purpose: equal specificity, later wins) */
@media (max-width:640px){
  .tool-panel #rcRoot.rcv3.rcv3 input.rcv-big{font-size:20px !important;padding:10px 2px !important}
  #rcRoot .rcv-seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  #rcRoot .rcv-seg button{font-size:11.5px;padding:8px 2px;min-width:0}
  #rcRoot .rcv-actions{width:100%}
  #rcRoot .rcv-actions .rcv-ghost{flex:1}
  /* the 4-across proportion row cannot fit 3-digit values inside the
     site's narrow phone container — stack it as A : B / = / C : D */
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini){grid-template-columns:1fr 16px 1fr;grid-template-areas:"a s1 b" "eq eq eq" "c s2 d"}
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini)>*:nth-child(1){grid-area:a}
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini)>*:nth-child(2){grid-area:s1}
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini)>*:nth-child(3){grid-area:b}
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini)>*:nth-child(4){grid-area:eq;justify-self:center;line-height:1}
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini)>*:nth-child(5){grid-area:c}
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini)>*:nth-child(6){grid-area:s2}
  #rcRoot .rcv-eq:not(.rcv-eq-third):not(.rcv-eq-mini)>*:nth-child(7){grid-area:d}
}

/* ---------- section-height stabilisation + fit-to-screen (2026-10-23) ----------
   The Proportion workbench is compacted to fit a 1920x1080 viewport
   without scrolling: side labels on the equation fields, two-row Real
   Jobs chips, trimmed paddings and a smaller donut. The state-dependent
   regions form one reserved stack whose footprint is the tallest
   combined state, identical in EVERY state (idle / solved / holds /
   mismatch / error) and in both term modes: the third-term row and the
   scenario note now keep their slots via visibility too, and the hint
   is reserved at its two-line (three-term) height. Reservations are
   min-heights (boxes can still grow with zoom/text scaling instead of
   clipping). Below the stacking breakpoint (900px) none of this
   applies and the sections take their natural height again. The
   explainer keeps its slot when dismissed (x button) for the same
   reason: hiding its content never moves the silhouette. */
@media (min-width:901px){
  #rcRoot .rc-solved-tag{min-height:21px}
  #rcRoot.rcv3 #rcSolvedTag[hidden]{display:inline-block !important;visibility:hidden}
  #rcRoot .rcv-solved-card{min-height:118.5px}
  #rcPropEq{min-height:168px}
  #rcRoot.rcv3 #rcPropEq[hidden]{display:block !important;visibility:hidden}
  #rcPropError{min-height:102px}
  #rcRoot.rcv3 #rcPropError[hidden]{display:block !important;visibility:hidden}
  #rcThirdRow{min-height:44px}
  #rcRoot.rcv3 #rcThirdRow[hidden]{display:grid !important;visibility:hidden}
  /* the solved field's highlight border makes the input row 2px
     taller in solved states — reserve that height in every state */
  #rcPanelProp .rcv-eq:not(.rcv-eq-third){min-height:44px}
  /* hint reserved at its two-line (three-term) height in both modes */
  #rcPanelProp .rcv-hint{min-height:34.8px}
  /* scenario note slot reserved (it appears by value, e.g. 8:13) */
  #rcScenarioNote{min-height:63px}
  #rcRoot.rcv3 #rcScenarioNote[hidden]{display:block !important;visibility:hidden}
  /* 2-column layout: the share card is full-width here; both tip
     texts fit on one or two lines, so reserve the two-line height */
  #rcPanelProp .rcv-tip{min-height:70px}
}
@media (min-width:1800px){
  /* wide band: the stage caps at 1680px, so the explainer, the
     scenario note and the verdict card all top out one line shorter */
  #rcRoot .rcv-solved-card{min-height:102px}
  #rcPropError{min-height:82px}
  #rcScenarioNote{min-height:42px}
}
/* share tip (3-column layout): tallest text (the generic guidance)
   reserved, so the tip card is one height whether it shows the short
   solved line or the long guidance. */
@media (min-width:1241px){
  #rcPanelProp .rcv-tip{min-height:134.2px}
}
@media (min-width:1800px){
  #rcPanelProp .rcv-tip{min-height:92px}
}

/* ---------- Simplify section-height stabilisation (2026-10-23) ----------
   The Simplify body swaps wholesale between the results bench and the
   empty-state note, and inside the results the Unit blocks card alone
   swings by hundreds of px with the pair (its SVG viewBox narrows for
   small pairs, so the drawing renders taller). The results stack below
   the inputs is therefore reserved at its tallest measured footprint —
   the 1 : 1 pair — in every state: the bench stretches to fill the
   reserved body, the body keeps its space via visibility while the
   empty note shows, and the note itself paints at the top of the
   reserved zone without adding flow height. Reservations are
   min-heights (boxes can still grow instead of clipping) and all of
   this switches off below the stacking breakpoint (900px), where the
   panel takes its natural height again. */
@media (min-width:901px){
  /* 2-column band (901–1240): tallest body = the 1 : 1 pair at 1240 */
  #rcSimBody{display:flex;flex-direction:column;min-height:3652px}
  #rcRoot.rcv3 #rcSimBody[hidden]{display:flex !important;visibility:hidden}
  #rcPanelSim .rcv-bench-sim{flex:1 0 auto}
  /* the empty-state note keeps its place at the head of the reserved
     zone but adds no flow height of its own */
  #rcSimEmpty{height:0;margin:0;overflow:visible}
}
@media (min-width:1241px){
  /* 3-column band (1241–1799): tallest body = the 1 : 1 pair at 1799 */
  #rcSimBody{min-height:1830px}
}
@media (min-width:1800px){
  /* wide band: the stage caps at 1680px, so the 1 : 1 body tops out
     at the value measured from a 2100px viewport up */
  #rcSimBody{min-height:2111px}
}

/* fit-to-screen: the share (pie) view spreads its blocks through the
   column instead of stacking them at the top over a dead void */
#rcRoot.rcv3{gap:10px}
#rcPanelProp #rcSharePieView{display:flex;flex-direction:column;flex:1;justify-content:space-evenly}

/* ---------- owner spacing + share reading card (2026-10-24) ----------
   Left column: the two seams the owner marked get real air — +8px
   above the hint (under the fields / third-term row) and +10px above
   the SET A : B TO block. The bench may not grow, so the same +18 is
   taken back inside the same column: the preset blocks' row gap
   6px -> 2px (SET loses 4, Real Jobs loses 8) and the chips' vertical
   padding 3px -> 2px (three chip rows lose 2 each). Net delta zero
   in every band and state; no reserved min-height is touched. */
#rcPanelProp .rcv-hint{margin-top:8px}
#rcPanelProp .rc-presets:not(.rc-jobs){margin-top:10px}
#rcPanelProp .rc-presets{gap:2px 6px}
.tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp button.rc-chip{padding-top:2px !important;padding-bottom:2px !important}
/* Share column: the pie view no longer stretches its legend rows
   apart (space-evenly removed) — donut, bar and legend stack at
   natural spacing, and the slack is shared by the auto margins of
   the reading card and the tip below it. */
#rcPanelProp #rcSharePieView{flex:none;justify-content:flex-start}
.rcv-leg-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.rcv-leg-txt small{font-size:11.5px;color:var(--rcv-muted);font-weight:600}
#rcShareBarView .rc-legend>span{text-align:center}
#rcShareBarView .rc-legend small{display:block;font-size:11.5px;color:var(--rcv-muted);font-weight:600;margin-top:2px}
/* share thinbar: in-segment labels + a draggable boundary (the grip
   rides the split point; JS positions it and the drag feeds the same
   solver write path as the donut and the twin bars) */
.rcv-thinbar{position:relative;cursor:ew-resize;touch-action:none}
#rcDonutBarA,#rcDonutBarB,#rcDonutBarX{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;min-width:0}
#rcDonutBarX{color:#1F2937}
@media (hover:hover) and (pointer:fine){.rcv-thinbar:hover .rc-grip span{border-color:var(--rcv-accent);opacity:1}}
#rcRoot.rc-dragging .rcv-thinbar .rc-grip span{border-color:var(--rcv-accent);opacity:1}
/* "Reading this split" card */
.rcv-read{margin-top:auto;border:1px solid var(--rcv-border);background:var(--rcv-inner);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.rcv-read-h{font-size:12px;font-weight:700;letter-spacing:.8px;color:var(--rcv-muted);text-transform:uppercase}
.rcv-read-s{margin:0;font-size:13.5px;line-height:1.55;color:var(--rcv-text)}
.rcv-read-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--rcv-muted);border-top:1px solid var(--rcv-border);padding-top:6px}
.rcv-read-row b{color:var(--rcv-text);font-variant-numeric:tabular-nums;text-align:right}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-read-h,.tool-panel #rcRoot.rcv3.rcv3 .rcv-read-row{color:var(--rcv-muted) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-read-s,.tool-panel #rcRoot.rcv3.rcv3 .rcv-read-row b{color:var(--rcv-text) !important}
.tool-panel #rcRoot.rcv3.rcv3 .rcv-leg-txt small,.tool-panel #rcRoot.rcv3.rcv3 #rcShareBarView .rc-legend small{color:var(--rcv-muted) !important}

/* ---------- decongestion: chip restoration, Option A (2026-10-25) ----------
   The 2026-10-24 seam change (above) funded its +18px by tightening
   the preset chips (row gap 6px -> 2px, chip vertical padding
   3px -> 2px), and the chip blocks read congested as a result. The
   chips get their original air back here, funded by rebalancing the
   gaps BETWEEN the left column's sections: every fundable
   inter-section gap gives up the same small amount (a negative
   margin-top on the block below the gap), so no single gap
   collapses, no section height changes, the two widened seams
   (68px / 47px zones) are untouched and the bench stays 863.8px.
   Wide band (>=1800): the restoration costs +18 (row gaps +12 over
   3 internal gaps, padding +6 over 3 chip rows); six gaps give up
   3px each (five 8px gaps -> 5px, actions 10px -> 7px) = -18.
   Mid band (1241-1799): the chips wrap onto more rows, so the
   row-gap restoration alone costs +24 (SET +8, Real Jobs +16);
   six gaps give up 4px each (8px -> 4px, actions 10px -> 6px)
   = -24. The padding restoration is NOT applied in this band:
   it would cost +12 more (36 total) while the funding pool with
   every gap held at >=4px is only 26px — forcing it would drive
   five section gaps to the 2px floor, trading this congestion
   for another. Chip padding therefore stays 2px at 1241-1799. */
@media (min-width:1241px){
  #rcPanelProp .rc-presets{gap:6px}
  #rcPanelProp .rc-presets.rc-jobs{margin-top:-4px}
  #rcPanelProp #rcScenarioNote{margin-top:-4px}
  #rcPanelProp .rcv-solved-card{margin-top:-4px}
  #rcPanelProp #rcPropEq{margin-top:-4px}
  #rcPanelProp #rcPropError{margin-top:-4px}
  #rcPanelProp .rc-actions{margin-top:-2px}
}
@media (min-width:1800px){
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp button.rc-chip{padding-top:3px !important;padding-bottom:3px !important}
  #rcPanelProp .rc-presets.rc-jobs{margin-top:-3px}
  #rcPanelProp #rcScenarioNote{margin-top:-3px}
  #rcPanelProp .rcv-solved-card{margin-top:-3px}
  #rcPanelProp #rcPropEq{margin-top:-3px}
  #rcPanelProp #rcPropError{margin-top:-3px}
  #rcPanelProp .rc-actions{margin-top:-1px}
}

/* ---------- top reclaim + spacing redistribution (2026-10-25) ----------
   The owner circled the dead band above the tab bar: from the sticky
   header's bottom (65px) to the tabs took 73px — the shared stage
   margin (18) + the shared panel top padding (40) + the root top
   padding (14) + border. Reclaim 42px of it with page-local overrides
   (stage margin 18 -> 12, panel top padding 40 -> 12, root top padding
   14 -> 6). The strip from the header's bottom to the tab row shrinks
   from 73px to 31px: a 12px breathing gap under the header (inside the
   brief's 12-20px band) plus the card's normal 12 + 6 insets. The bench
   starts 42px higher and grows by the same 42px (863.8 -> 905.8), so
   its bottom (1061.8 at 1080p) and everything below it do not move.
   The growth is spent as space BETWEEN items — no section's own height
   changes, no reserved min-height is touched, and nothing Option A
   restored is re-tightened:
   - Left column: +42 across its twelve inter-block gaps in balanced
     increments (+3..+6 each). The two owner seams stay the widest
     gaps in the column (zones 68 -> 75 and 47 -> 54 at >=1800).
   - Share column: the pie view's two internal gaps (donut -> bar and
     bar -> legend, both 0) take a fixed share of the column slack
     (72px each at >=1800, 84px at 1241-1799, matching that band's taller bench), so the slack no longer
     pools in just the two auto margins above the reading card and the
     tip; those auto margins split what remains. In every state the
     four gaps (donut->bar, bar->legend, legend->card, card->tip) land
     within a balanced band instead of a 0/0/128/128 split. Bar mode's
     two auto-margin gaps were already even and simply grow with the
     bench. Below 1241px the share card takes its natural height (no
   bench slack to distribute), so the internal fixed margins are
   scoped to >=1241px. */
body .tool-stage.rc-stage-wide.rc-stage-wide{margin-top:12px}
.tool-stage.rc-stage-wide .tool-panel{padding-top:12px}
#rcRoot.rcv3{padding-top:6px}
/* left column: band-independent increments */
#rcPanelProp .rcv-eq:not(.rcv-eq-third){margin-top:3px}
#rcPanelProp #rcThirdRow{margin-top:3px}
#rcPanelProp .rcv-hint{margin-top:12px}
#rcPanelProp #rcSolvedTag{margin-top:3px}
#rcPanelProp .rc-presets:not(.rc-jobs){margin-top:14px}
#rcPanelProp .rc-next{margin-top:6px}
/* left column: the six Option-A-funded gaps, per band (absolute
   margin-tops; these replace Option A's negative margins) */
@media (min-width:901px) and (max-width:1240px){
  #rcPanelProp .rc-presets.rc-jobs{margin-top:3px}
  #rcPanelProp #rcScenarioNote{margin-top:3px}
  #rcPanelProp .rcv-solved-card{margin-top:4px}
  #rcPanelProp #rcPropEq{margin-top:3px}
  #rcPanelProp #rcPropError{margin-top:3px}
  #rcPanelProp .rc-actions{margin-top:5px}
}
@media (min-width:1241px) and (max-width:1799px){
  #rcPanelProp .rc-presets.rc-jobs{margin-top:-1px}
  #rcPanelProp #rcScenarioNote{margin-top:-1px}
  #rcPanelProp .rcv-solved-card{margin-top:0}
  #rcPanelProp #rcPropEq{margin-top:-1px}
  #rcPanelProp #rcPropError{margin-top:-1px}
  #rcPanelProp .rc-actions{margin-top:1px}
}
@media (min-width:1800px){
  #rcPanelProp .rc-presets.rc-jobs{margin-top:0}
  #rcPanelProp #rcScenarioNote{margin-top:0}
  #rcPanelProp .rcv-solved-card{margin-top:1px}
  #rcPanelProp #rcPropEq{margin-top:0}
  #rcPanelProp #rcPropError{margin-top:0}
  #rcPanelProp .rc-actions{margin-top:2px}
}
/* share column: fixed internal pie gaps share the slack (>=1241px) */
@media (min-width:1241px) and (max-width:1799px){
  #rcPanelProp .rcv-thinbar{margin-top:84px}
  #rcPanelProp #rcDonutLegA{margin-top:84px}
}
@media (min-width:1800px){
  #rcPanelProp .rcv-thinbar{margin-top:72px}
  #rcPanelProp #rcDonutLegA{margin-top:72px}
}

/* ---------- layout polish: bigger controls, fuller stage (2026-10-25) ----------
   Owner round after the topspace distribution: the preset chips go
   back to real buttons (13px text, 7px padding, ~32px tall, 8px
   gaps), the hero inputs grow a step (~48px), the donut grows
   198 -> 220 and the shape stage finally uses its room (the JS fits
   the shape's viewBox to the stage; see vizFit in ratio-calc.js).
   The growth is funded out of the columns' inter-block gaps — the
   margin trims live in the per-band blocks at the end of this
   section — so the bench stays 905.8px at >=1800 with no gap below
   ~6px and the two owner seams still the widest gaps in the column. */
/* preset chips (Proportion panel only — Scale's presets keep the
   compact size). Horizontal padding is 7px, not the nominal 13:
   at 13px the Real Jobs chips' total width passes the card and the
   block wraps to 3 rows (+41px the funding pool does not have);
   7px keeps the shipped [4,4] packing with the same 32px height,
   13px text and 8px gaps. */
.tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp button.rc-chip{padding:7px !important;font-size:13px !important}
#rcPanelProp .rc-presets{gap:8px}
/* hero inputs (the A/B/C/D row only — the third-term X/Y row keeps
   its size): ~48px tall at the wide band, ~47px below it */
@media (min-width:901px){
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp .rcv-eq:not(.rcv-eq-third) input.rcv-big{padding-top:10px !important;padding-bottom:10px !important}
}
@media (min-width:1800px){
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp .rcv-eq:not(.rcv-eq-third) input.rcv-big{font-size:22px !important}
}
/* donut 198 -> 220 (the share column's auto margins absorb it; the
   fixed pie gaps give a share back so Pie stays balanced in both
   term modes — see the band blocks below) */
@media (min-width:901px){
  #rcDonut{width:220px}
}
/* shape svg fills its stage; the viewBox is fitted by JS. It is
   absolutely positioned (the stage is relative) on purpose: in flow,
   the fitted viewBox's aspect ratio would feed the stage's natural
   height and the bench would ratchet upward on every render. */
#rcRoot #rcVizRect{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
/* middle column rhythm: the caption sat 18px under the stage while
   every other gap in the column is 8 — tighten to 12 (the stage,
   flex:1, takes the 6px) */
#rcPanelProp .rc-vcap{margin-top:4px}
/* funding, wide band (>=1800): the growth (eq row +6, SET +11,
   Jobs +22 = +39) comes out of the twelve inter-block margins.
   Rendered gaps land at [7,7,17,8,18,6,6,7,6,6,6,7] — nothing
   below 6px, and the two owner seams keep their approved zone
   totals (68px fields->hint, 47px hint->presets) and stay the
   widest gaps in the column. The bench stays 905.8px. */
@media (min-width:1800px){
  #rcPanelProp .rcv-eq:not(.rcv-eq-third){margin-top:-1px}
  #rcPanelProp #rcThirdRow{margin-top:-1px}
  #rcPanelProp .rcv-hint{margin-top:9px}
  #rcPanelProp #rcSolvedTag{margin-top:0}
  #rcPanelProp .rc-presets:not(.rc-jobs){margin-top:10px}
  #rcPanelProp .rc-presets.rc-jobs{margin-top:-2px}
  #rcPanelProp #rcScenarioNote{margin-top:-2px}
  #rcPanelProp .rcv-solved-card{margin-top:-1px}
  #rcPanelProp #rcPropEq{margin-top:-2px}
  #rcPanelProp #rcPropError{margin-top:-2px}
  #rcPanelProp .rc-actions{margin-top:-2px}
  #rcPanelProp .rc-next{margin-top:-1px}
  /* share pie: fixed internal gaps give 4px back so the donut's
     growth lands in the auto margins — Pie gaps land balanced in
     both term modes ([68,68,~70,~70] 2-term, [68,68,~44,~44] 3-term) */
  #rcPanelProp .rcv-thinbar{margin-top:68px}
  #rcPanelProp #rcDonutLegA{margin-top:68px}
}
/* funding, 2-column band (901-1240): same growth, wider gaps to
   fund it — every inter-block margin gives ~3px, next gives 6 */
@media (min-width:901px) and (max-width:1240px){
  #rcPanelProp .rcv-eq:not(.rcv-eq-third){margin-top:0}
  #rcPanelProp #rcThirdRow{margin-top:0}
  #rcPanelProp .rcv-hint{margin-top:7px}
  #rcPanelProp #rcSolvedTag{margin-top:0}
  #rcPanelProp .rc-presets:not(.rc-jobs){margin-top:11px}
  #rcPanelProp .rc-presets.rc-jobs{margin-top:0}
  #rcPanelProp #rcScenarioNote{margin-top:0}
  #rcPanelProp .rcv-solved-card{margin-top:1px}
  #rcPanelProp #rcPropEq{margin-top:0}
  #rcPanelProp #rcPropError{margin-top:0}
  #rcPanelProp .rc-actions{margin-top:2px}
  #rcPanelProp .rc-next{margin-top:0}
}
/* the taller inputs outgrew the eq row's 44px reservation, so the
   solved field's 2px border started leaking into the row height
   (2-term solved 50 vs 3-term/mismatch 48 — a 2px bench wobble).
   The reservation grows to 50px: the row is 50 in every state and
   the bench is uniform again. */
@media (min-width:901px){
  #rcPanelProp .rcv-eq:not(.rcv-eq-third){min-height:50px}
}
/* funding, mid band (1241-1799): the chips wrap onto more rows
   here (SET 2, Jobs 4), so the growth is +84 against +39 of
   fundable gap — the gaps land on the same rendered values as the
   wide band (seams 68/47 zones intact, nothing below 6px) and the
   remaining +45 grows this band's bench uniformly in every state
   (1032.3 -> ~1077). This band's bench already exceeded a 1080p
   screen before this round; the fit-to-screen rule binds >=1800.
   The share pie keeps its 84px fixed gaps: with the taller bench
   they land balanced ([84,84,~95,~95] 2-term) untouched. */
@media (min-width:1241px) and (max-width:1799px){
  #rcPanelProp .rcv-eq:not(.rcv-eq-third){margin-top:-1px}
  #rcPanelProp #rcThirdRow{margin-top:-1px}
  #rcPanelProp .rcv-hint{margin-top:9px}
  #rcPanelProp #rcSolvedTag{margin-top:0}
  #rcPanelProp .rc-presets:not(.rc-jobs){margin-top:10px}
  #rcPanelProp .rc-presets.rc-jobs{margin-top:-2px}
  #rcPanelProp #rcScenarioNote{margin-top:-2px}
  #rcPanelProp .rcv-solved-card{margin-top:-1px}
  #rcPanelProp #rcPropEq{margin-top:-2px}
  #rcPanelProp #rcPropError{margin-top:-2px}
  #rcPanelProp .rc-actions{margin-top:-2px}
  #rcPanelProp .rc-next{margin-top:-1px}
}

/* ============ layout refinements round 2 (2026-10-25) ============
   (a) Proportion fields in TWO lines (owner): line 1 = A : B [: X],
       line 2 = = C : D [: Y]. The two existing blocks (.rcv-eq and
       #rcThirdRow) become display:contents inside one grid, so X joins
       line 1 and Y line 2 with NO JS change (the toggle still flips
       #rcThirdRow[hidden]; :has widens the grid to 6 columns). The
       block is the same height in both states; the old third-row
       reservation is released. The "Third term" label and the
       equation note are not rendered in this layout — the two lines
       state the equation themselves (the X/Y inputs keep their own
       labels). Scoped >=768px: phones keep the existing stacked eq.
   (b) Chips: gaps 8px -> 10px both directions (owner emphasis:
       visible air between every chip and between rows).
   (c) Share legend rhythm (owner): the legend hugs the thin bar
       (bar->legend 68/72px -> 16-18px), the freed space moves to the
       legend->card and card->tip distribution gaps, legend entries
       gain air (0 -> 12px in Pie; row-gap 16 -> 26px in Bar) and the
       title->sub-line spacing loosens (gap 1 -> 4px Pie; margin-top
       2 -> 5px Bar; sub-line line-height 1.45). */
@media (min-width:768px){
  #rcPanelProp .rcv-eqgrid{display:grid;grid-template-columns:20px 1fr 16px 1fr;column-gap:6px;row-gap:6px;grid-template-rows:50px 50px;align-items:center}
  #rcPanelProp .rcv-eqgrid:has(>#rcThirdRow:not([hidden])){grid-template-columns:20px 1fr 16px 1fr 16px 1fr}
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp .rcv-eqgrid>.rcv-eq,
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp .rcv-eqgrid>#rcThirdRow{display:contents}
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp .rcv-eqgrid>#rcThirdRow[hidden]{display:none !important}
  #rcPanelProp .rcv-eqgrid>.rcv-eq>*:nth-child(1){grid-row:1;grid-column:2}
  #rcPanelProp .rcv-eqgrid>.rcv-eq>*:nth-child(2){grid-row:1;grid-column:3}
  #rcPanelProp .rcv-eqgrid>.rcv-eq>*:nth-child(3){grid-row:1;grid-column:4}
  #rcPanelProp .rcv-eqgrid>.rcv-eq>*:nth-child(4){grid-row:2;grid-column:1}
  #rcPanelProp .rcv-eqgrid>.rcv-eq>*:nth-child(5){grid-row:2;grid-column:2}
  #rcPanelProp .rcv-eqgrid>.rcv-eq>*:nth-child(6){grid-row:2;grid-column:3}
  #rcPanelProp .rcv-eqgrid>.rcv-eq>*:nth-child(7){grid-row:2;grid-column:4}
  #rcPanelProp .rcv-eqgrid>#rcThirdRow>*:nth-child(1){display:none}
  #rcPanelProp .rcv-eqgrid>#rcThirdRow>*:nth-child(2){grid-row:1;grid-column:6}
  #rcPanelProp .rcv-eqgrid>#rcThirdRow>*:nth-child(3){grid-row:1;grid-column:5}
  #rcPanelProp .rcv-eqgrid>#rcThirdRow>*:nth-child(4){grid-row:2;grid-column:6}
  #rcPanelProp .rcv-eqgrid>#rcThirdRow>*:nth-child(5){display:none}
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp .rcv-eqgrid input.rcv-big{padding-top:10px !important;padding-bottom:10px !important}
}
@media (min-width:768px) and (max-width:1799px){
  #rcPanelProp .rcv-eqgrid{grid-template-rows:49px 49px}
}
@media (min-width:768px) and (max-width:900px){
  #rcPanelProp .rcv-eqgrid{grid-template-rows:45px 45px}
}
@media (min-width:1800px){
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp .rcv-eqgrid input.rcv-big{font-size:22px !important}
  #rcPanelProp .rcv-eqgrid{margin-top:-1px}
  #rcPanelProp .rcv-hint{margin-top:4px}
}
@media (min-width:1241px) and (max-width:1799px){
  #rcPanelProp .rcv-hint{margin-top:4px}
}
@media (min-width:901px) and (max-width:1240px){
  #rcPanelProp .rcv-hint{margin-top:5px}
}
/* chips: airier gaps */
#rcPanelProp .rc-presets{gap:10px}
/* share legend rhythm */
#rcPanelProp #rcDonutLegB{margin-top:12px}
#rcPanelProp #rcDonutLegX{margin-top:12px}
#rcPanelProp .rcv-leg-txt{gap:4px}
#rcPanelProp .rcv-leg-txt small{line-height:1.45}
#rcPanelProp #rcShareBarView .rc-legend{gap:26px}
#rcPanelProp #rcShareBarView .rc-legend>span{line-height:1.4}
#rcPanelProp #rcShareBarView .rc-legend small{margin-top:5px;line-height:1.45}
@media (min-width:1800px){
  #rcPanelProp #rcDonutLegA{margin-top:16px}
}
@media (min-width:1241px) and (max-width:1799px){
  #rcPanelProp #rcDonutLegA{margin-top:18px}
}
@media (max-width:1240px){
  #rcPanelProp #rcDonutLegA{margin-top:14px}
}
/* chips at gap 10: the Jobs second row (Passport/Coffee/Concrete/
   Budget) had only 3px of slack at gap 8 — at gap 10 it wraps to a
   third row. Trimming horizontal chip padding 7px -> 6px (height and
   font unchanged) restores [4,4] with ~5px to spare. */
@media (min-width:901px){
  .tool-panel #rcRoot.rcv3.rcv3 #rcPanelProp button.rc-chip{padding-left:6px !important;padding-right:6px !important}
}
/* wide-band funding for the chips growth (+6): the tag->presets
   gap 18 -> 12 (still the widest single inter-item gap after the
   seam zones). The presets->jobs gap stays at its round-1 value. */
@media (min-width:1800px){
  #rcPanelProp .rc-presets:not(.rc-jobs){margin-top:4px}
  #rcPanelProp .rc-presets.rc-jobs{margin-top:-2px}
}
/* mid-band funding (round 2): chips +12 and the two-line block +1
   are absorbed above the chips zone and at the solved card, keeping
   every gap >= 6 and the fields->hint seam the widest (12). */
@media (min-width:1241px) and (max-width:1799px){
  #rcPanelProp .rc-presets:not(.rc-jobs){margin-top:2px}
  #rcPanelProp #rcSolvedTag{margin-top:-2px}
  #rcPanelProp .rcv-solved-card{margin-top:-2px}
}

/* Split + Mixing result bars are drag surfaces (2026-10-25): the
   bar takes the pointer (grips are pointer-events:none), segments
   track the pointer 1:1 while a drag runs — the same contract the
   Proportion bars keep via .rc-dragging. */
#rcSplitBar,#rcMixBar{position:relative;cursor:ew-resize;touch-action:none}
#rcRoot.rc-dragging .rcv-partsbar>div{transition:none}
@media (hover:hover) and (pointer:fine){#rcSplitBar:hover .rc-grip span,#rcMixBar:hover .rc-grip span{border-color:var(--rcv-accent);opacity:1}}

/* Phone fix (2026-10-30): stat-tile values may wrap instead of spilling
   across the neighbouring tile (share values are the long ones). */
@media (max-width:560px){
  .rcv-stat h4{white-space:normal;font-size:15.5px;line-height:1.25}
}

/* ---------- 2026-10-31: flat stage + phone insets (owner) ----------
   1) The site chrome's .tool-panel card is removed for THIS page only
      (the same flattening the International Tax Calculator got): no
      surface background, no visible border, no radius, no shadow and
      none of its clamp(22px,4vw,40px) padding. #rcRoot keeps its own
      slab background and 18px radius, so the workbench still reads as
      one surface — now running the full stage width. Scoped via
      body:has(#rcRoot); every other tool page keeps its panel.
   2) Phones: the measured inset chain was stage gutter 20px + panel
      23px + root 16px + card 12px = 59px of chrome per side, leaving
      a 272px-wide workbench on a 390px phone. With the panel gone,
      stage gutter -> 10px and root side padding -> 10px leaves
      10 + 10 + 12 = 32px/side. Card padding, the root's 6px top
      padding and all vertical rhythm are untouched. */
body:has(#rcRoot) .tool-panel{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  border-radius:0;
  padding:0;
}
@media (max-width:640px){
  body:has(#rcRoot) .tool-stage{padding-left:10px;padding-right:10px}
  #rcRoot.rcv3.rcv3{padding-left:10px;padding-right:10px}
}