.water-jug-lab{max-width:1120px}
.water-jug-lab [hidden]{display:none!important}
.wj-panel{padding:clamp(1rem,3vw,2rem);border:1px solid #d7dfda;border-radius:22px;background:#fffaf0}
.wj-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.wj-panel label{font-weight:700;display:block}
.wj-panel label input{margin-top:.45rem}
.wj-panel h2{font-size:clamp(1.3rem,3vw,1.9rem)}
.wj-equation{font-variant-numeric:tabular-nums;font-size:clamp(1.05rem,2.6vw,1.5rem);overflow-wrap:anywhere;color:#155d66}
.wj-notice{padding:1rem 1.3rem;border-left:4px solid #337c80;background:#edf5f1;border-radius:5px;overflow-wrap:anywhere}
.wj-notice.wj-error{border-color:#ad4736;background:#fff0eb}
.wj-parameter{display:flex;align-items:end;gap:1rem;flex-wrap:wrap}
.wj-parameter p{flex-basis:100%}
.wj-parameter input{max-width:20rem}
.wj-route-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0}
.wj-route-choice{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;text-align:left;min-height:88px;padding:1rem;border:2px solid #bbcfc9;border-radius:14px;color:#21474e;background:#fff;font:inherit;cursor:pointer}
.wj-route-choice strong{font-size:1.05rem}
.wj-route-choice span{font-size:.95rem;line-height:1.5;overflow-wrap:anywhere}
.wj-route-choice:hover{border-color:#286f79;background:#f1f8f5}
.wj-route-choice[aria-pressed="true"]{border-color:#155d66;background:#dceee9;box-shadow:inset 0 0 0 1px #155d66}
.wj-route-choice:disabled{cursor:not-allowed;opacity:.6}
.wj-levels{display:grid;grid-template-columns:1fr 1fr;text-align:center;gap:1rem;max-width:720px;margin:1.5rem auto 0}
.wj-levels h3{font-size:1.15rem}
.wj-levels strong{font-size:1.8rem;color:#145f6b;font-variant-numeric:tabular-nums}
.wj-levels>div:last-child strong{color:#8c5c13}
.wj-chart{display:block;width:100%;max-width:720px;margin:0 auto}
.wj-chart text{font:22px system-ui,sans-serif;fill:#244954}
.wj-vessel{fill:#fffdf7;stroke:#3d6971;stroke-width:3}
.wj-water-a{fill:#388d9b}
.wj-water-b{fill:#c89439}
.wj-water{transition:y .22s ease,height .22s ease}
.wj-axis-line{stroke:#b8ccc5;stroke-width:1}
.wj-current{padding:1.1rem 1.3rem;background:#e9f2f0;border-radius:14px;min-height:128px}
.wj-current strong{color:#155d66}
.wj-current p{margin:.4rem 0}
.wj-done{font-weight:700;color:#226a37}
.wj-controls{display:flex;flex-wrap:wrap;gap:.6rem}
.wj-controls button{min-height:46px}
.wj-balance{border:1px solid #c3d6cb;border-radius:12px;padding:1rem;margin-top:1.4rem;background:#f5faf4}
.wj-balance p{margin-bottom:.4rem}
.wj-balance>strong{font-size:.9rem;color:#267348}
.wj-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.wj-totals p{padding:1rem;background:#fff;border:1px solid #dbe1da;border-radius:12px;margin:0;font-size:.95rem}
.wj-totals strong{display:block;font-size:1.5rem;color:#205f69}
.wj-cycle{padding:.7rem 1rem;background:#fff0cb;border-left:4px solid #b9842d}
.wj-table{max-height:460px}
.wj-table th{background:#fff6e4;position:sticky;top:0;z-index:1}
.wj-table td{vertical-align:middle}
.wj-table tr.wj-active td{background:#d9eeea!important;font-weight:600}
.water-jug-lab :focus-visible{outline:3px solid #ce962e;outline-offset:3px}
.water-jug-lab summary{font-weight:700;color:#1e6269;cursor:pointer}
.water-jug-lab .btn{white-space:normal}
@media(max-width:650px){.wj-fields{grid-template-columns:1fr}
.wj-route-choices{grid-template-columns:1fr}
.wj-totals{grid-template-columns:1fr}
.wj-levels h3{font-size:.95rem}
.wj-levels strong{font-size:1.5rem}
.wj-controls{display:grid;grid-template-columns:repeat(3,1fr)}
.wj-parameter{display:block}
.wj-parameter button{margin-top:.75rem}
.wj-current{min-height:155px}
}
@media(prefers-reduced-motion:reduce){.wj-water{transition:none}
}
@media print{.wj-controls,.wj-panel form,.wj-panel button,.wj-panel input,.wj-panel select{display:none}
.wj-panel{break-inside:avoid}
.wj-table{max-height:none}
}
.wj-visual-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.6rem;align-items:center}
.wj-visual-grid .wj-levels{margin-top:.8rem;gap:.5rem}
.wj-interaction .wj-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.wj-interaction .wj-controls button{padding:.6rem .35rem;font-size:.95rem}
.wj-plot{min-width:0}
@media(max-width:760px){.wj-visual-grid{grid-template-columns:1fr;gap:.8rem}.wj-visual-grid .wj-chart{max-width:480px}.wj-visual-grid .wj-levels{max-width:480px}.wj-current{min-height:110px}}