:root{--water-deep:#1d6ea0;--amber-deep:#b97b28;--danger-deep:#a8322c;--rain:#7c9fd6;--pool-fill:var(--water);--pool-flood:var(--warn);--pool-over:var(--danger);--danger-text:color-mix(in srgb, var(--danger) 80%, #fff)}.flood-layout{grid-template:"chart stage"minmax(200px,42%)"dams stage"minmax(0,1fr)/minmax(0,1fr) 336px}.stage-panel{grid-area:stage}.dams-panel{grid-area:dams}.sub-head{border-top:1px solid var(--line);margin-top:2px}.flood-layout #log{flex:1;min-height:60px}#stage-chart{flex:1;width:100%;min-height:0;display:block}.stage-readout{justify-content:center;align-items:baseline;gap:6px;padding:10px 12px 2px;display:flex}.stage-value{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:42px;font-weight:600;line-height:1;transition:color .2s}.stage-value.action{color:var(--warn)}.stage-value.flood{color:var(--danger);animation:1.1s ease-in-out infinite stage-pulse}@keyframes stage-pulse{50%{opacity:.55}}.stage-unit{font-size:var(--fs-body);color:var(--text-dim)}.stage-bar{background:var(--bg);border:1px solid var(--line);border-radius:6px;height:12px;margin:8px 14px 0;position:relative;overflow:hidden}.stage-bar-fill{background:linear-gradient(90deg, var(--water-deep), var(--water));width:0;transition:width .15s linear;position:absolute;top:0;bottom:0;left:0;right:auto}.stage-bar-mark{width:2px;position:absolute;top:0;bottom:0}.stage-bar-mark.action{background:var(--warn)}.stage-bar-mark.flood{background:var(--danger)}.stage-status{text-align:center;font-size:var(--fs-small);color:var(--text-dim);min-height:30px;padding:7px 12px 9px;line-height:1.4}.stage-status.action{color:var(--warn)}.stage-status.flood{color:var(--danger);font-weight:600}.schematic-wrap{flex-shrink:0;padding:0 8px 6px}#river-schematic{width:100%;height:132px;display:block}#dams{flex-direction:column;gap:7px;padding:8px;display:flex;overflow-y:auto}.dam{background:var(--panel-2);border:1px solid var(--line);border-left:4px solid var(--water-deep);cursor:pointer;border-radius:7px;grid-template-columns:176px 150px minmax(0,1fr) 150px;align-items:center;gap:12px;padding:7px 11px;transition:border-color .12s,background .12s;display:grid}.dam:hover{background:var(--panel-3)}.dam.selected{background:var(--panel-3);box-shadow:inset 0 0 0 1px var(--accent)}.dam.tributary{border-left-color:var(--accent)}.dam.surcharge{border-color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, var(--panel-2))}.dam-name{font-size:var(--fs-body);align-items:center;gap:7px;font-weight:600;display:flex}.dam-sub{font-size:var(--fs-micro);color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}.dam-travel{font-family:var(--mono);font-size:var(--fs-micro);color:var(--text-dim);background:var(--bg);border-radius:3px;padding:1px 5px}.pool{background:var(--bg);border-radius:4px;height:34px;position:relative;overflow:hidden}.pool-fill{background:linear-gradient(180deg, var(--water), var(--water-deep));transition:height .15s linear;position:absolute;top:auto;bottom:0;left:0;right:0}.pool-fill.high{background:linear-gradient(180deg, var(--pool-flood), var(--amber-deep))}.pool-fill.over{background:linear-gradient(180deg, var(--pool-over), var(--danger-deep))}.pool-mark{opacity:.85;height:1px;position:absolute;left:0;right:0}.pool-mark.normal{background:color-mix(in srgb, var(--text) 65%, transparent)}.pool-mark.top{background:var(--danger)}.pool-mark.min{background:color-mix(in srgb, var(--warn) 70%, transparent)}.pool-label{font-family:var(--mono);font-size:var(--fs-micro);font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000000f2;justify-content:flex-end;align-items:center;padding-right:6px;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.dam-control{align-items:center;gap:8px;display:flex}.dam-control input[type=range]{min-width:0;accent-color:var(--water);cursor:pointer;flex:1}.dam-control .btn{font-size:var(--fs-small);padding:3px 8px}.dam-flows{font-family:var(--mono);font-size:var(--fs-micro);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;line-height:1.55}.dam-flows .in{color:var(--text-dim)}.dam-flows .turb{color:var(--ok)}.dam-flows .spill{color:var(--warn)}.dam-flows .over{color:var(--danger-text);font-weight:600}.score-lines{font-size:var(--fs-body);grid-template-columns:minmax(0,1fr) 78px;gap:5px 12px;margin:14px 0 4px;display:grid}.score-lines dt{color:var(--text-dim)}.score-lines dd{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;margin:0}.grade-row{align-items:center;gap:18px;display:flex}.teaching-note{border-left:3px solid var(--accent);color:var(--text-dim);font-size:var(--fs-small);margin-top:18px;padding:9px 12px;line-height:1.55}@media (max-width:1100px){html,body{overflow:auto}#app{height:auto;min-height:100vh}.flood-layout{grid-template:"chart"250px"stage""dams"/minmax(0,1fr)}.flood-layout #log{max-height:220px}.dam{grid-template-columns:minmax(0,1fr) 130px;grid-template-areas:"name pool""control control""flows flows";gap:8px 12px}.dam-info{grid-area:name}.pool{grid-area:pool}.dam-control{grid-area:control}.dam-flows{text-align:left;grid-area:flows}}@media (prefers-reduced-motion:reduce){.stage-value.flood{animation:none}.stage-bar-fill,.pool-fill{transition:none}}