/* "Two kinds of pool", owner-approved and locked 2026-10-28 (Daniel: "approved... looks incredible"; Codex family-c/two-pools-v002, APPROVED-LOCK.json).
   Site placement of the locked style.css: every rule scoped to .dio-two-pools, the page's own wrapper padding, body rules and the
   fallback @font-face dropped (Nunito Sans comes from the site's fonts.css), h1 shown as the component title (h3) and the pool
   headings h2 as h4. Values are unchanged. Breakpoints follow the component's own width (container queries), not the screen: it sits
   in the answer header box, which is about 390 px wide beside the question on a computer, so it takes its phone layout there. */
.dio-two-pools{--font:'Avenir Next',Avenir,Nunito Sans,system-ui,sans-serif;--navy:#2F4452;--steel:#4C7288;--orange:#ED873C;color:var(--navy);font-family:var(--font);font-synthesis:none;background:#fff;max-width:1120px;margin:0 auto;container-type:inline-size}
.dio-two-pools *{box-sizing:border-box}
.dio-two-pools .tp-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}
.dio-two-pools .tp-title{font-family:var(--font);color:var(--navy);font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:600;margin:0}
.dio-two-pools .controls{display:flex;gap:10px}.dio-two-pools .controls[hidden]{display:none}
.dio-two-pools button{font:500 14px/1.2 var(--font);color:var(--navy);background:#fff;border:1px solid #a9b8bf;min-height:48px;min-width:88px;padding:10px 16px;border-radius:2px;cursor:pointer}
.dio-two-pools button:hover{background:#f1f5f6;border-color:var(--navy)}.dio-two-pools button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.dio-two-pools button[aria-pressed=true]{background:#e6edf0;border-color:var(--steel)}.dio-two-pools button:disabled{opacity:.6;cursor:default}
.dio-two-pools figure{margin:0}
.dio-two-pools .comparison{background:#f5f7f7;padding:22px 24px 24px}
.dio-two-pools .contribution-label{margin:0 0 18px;text-align:center;font-size:17px;line-height:1.5;font-weight:500}
.dio-two-pools .pools{display:grid;grid-template-columns:1fr 1fr;gap:36px;position:relative}
.dio-two-pools .pools:after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#d7e1e5;pointer-events:none}
.dio-two-pools .pool-side{min-width:0;text-align:center}
.dio-two-pools .tp-pool-title{font-family:var(--font);color:var(--navy);font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.dio-two-pools .flow-stage{position:relative;width:min(100%,356px);margin-inline:auto}
.dio-two-pools .flow{display:block;width:100%;height:auto}
.dio-two-pools .outcome{font-size:18px;line-height:1.4;font-weight:500;max-width:260px;min-height:51px;margin:6px auto 0;text-wrap:balance}
.dio-two-pools .cap-label{position:absolute;left:50%;top:calc(84.655% - 1.6em - 6px);transform:translateX(-50%);font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;background:#f5f7f7;padding:2px 8px}
.dio-two-pools .cap-rail{fill:none;stroke:#2F4452;stroke-width:3;stroke-linecap:round}
.dio-two-pools .outgoing-path{opacity:.75}
.dio-two-pools .deposit{opacity:0}
.dio-two-pools .narration{min-height:75px;margin:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:17px;line-height:1.5;font-weight:500;padding:20px 24px}
.dio-two-pools figure figcaption{text-align:center;font-size:14px;line-height:1.5;color:#566874;padding:5px 16px 0}
.dio-two-pools .sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
@container (max-width:700px){.dio-two-pools .tp-head{align-items:flex-start;flex-wrap:wrap;gap:15px;margin-bottom:16px}.dio-two-pools .tp-title{font-size:25px}.dio-two-pools .controls{gap:8px}.dio-two-pools button{min-width:86px;padding-inline:14px}.dio-two-pools .comparison{padding:19px 6px 20px}.dio-two-pools .contribution-label{font-size:16px;margin-bottom:21px}.dio-two-pools .pools{gap:12px}.dio-two-pools .tp-pool-title{font-size:18px;line-height:1.25;min-height:45px;margin-bottom:2px}.dio-two-pools .outcome{font-size:14px;line-height:1.4;min-height:59px;padding:0 7px;margin-top:10px}.dio-two-pools .cap-label{font-size:12px;padding:1px 5px;top:calc(84.655% - 1.6em - 6px)}.dio-two-pools .narration{font-size:16px;min-height:100px;padding:18px 10px}.dio-two-pools figure figcaption{font-size:13px;padding-inline:0}}
@container (max-width:370px){.dio-two-pools .pools{gap:8px}.dio-two-pools .comparison{padding-inline:4px}.dio-two-pools .tp-pool-title{font-size:17px}.dio-two-pools .cap-label{font-size:11px}.dio-two-pools .outcome{font-size:13px;padding-inline:3px}}
@media print{.dio-two-pools .controls{display:none!important}}

/* End state before the script runs: the money is in the graph, with both bowls empty. */
.dio-two-pools .settled-money{opacity:0}
/* 2026-11-11 audit, animation controls: one look and one place on every animation. The row is a right-aligned row above the figure, 12px above it; each control has the
   finish of the site's animation toggle (answer-anim.css .ans-anim-toggle): 44px tall, 2px steel border, white ground, 6px corners, ink focus ring,
   mist fill when "Still view" is on. Looks and placement only: no markup, wording, timing or logic changes. The doubled root class outranks the
   widget's older control rules above, which stay as they were. */
.dio-two-pools.dio-two-pools .controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;width:auto;min-height:0;margin:0 0 0 auto;padding:0;border:0}
.dio-two-pools.dio-two-pools .controls[hidden]{display:none}
.dio-two-pools.dio-two-pools .controls button{font:500 14px/1.2 'Avenir Next',Avenir,'Nunito Sans',system-ui,sans-serif;min-height:44px;min-width:82px;margin:0;padding:10px 16px;background:#fff;color:#203846;border:2px solid #4c7288;border-radius:6px;box-shadow:none;text-shadow:none;text-transform:none;letter-spacing:normal;text-decoration:none;clip-path:none;cursor:pointer}
.dio-two-pools.dio-two-pools .controls button:hover{background:#f1f5f6;border-color:#4c7288;color:#203846;text-shadow:none;text-decoration:none}
.dio-two-pools.dio-two-pools .controls button:focus-visible{outline:3px solid #203846;outline-offset:2px}
.dio-two-pools.dio-two-pools .controls button[aria-pressed=true]{background:#e6edf0;border-color:#4c7288}
.dio-two-pools.dio-two-pools .controls button:disabled{opacity:.55;color:#203846;cursor:default}
.dio-two-pools.dio-two-pools .tp-head{flex-wrap:wrap;margin-bottom:12px}
@media print{.dio-two-pools.dio-two-pools .controls{display:none!important}}
/* end animation controls */