Steam and cooling: visible heat-recovery loop, tables inside their cards

- The feedwater loop between HP-1 and T-1 was drawn with class "hr",
  which had no stroke rule, so it was invisible. It now has its amber
  stroke, flow arrows both ways and a "feed loop" label.
- Number cells were white-space:nowrap, so the operating-case table ran
  up to 33 px past its card, the design basis table up to 312 px, and a
  phone page was 842 px wide. Numbers may wrap now (only the coverage
  percentages stay on one line), the side column and grid tracks may
  shrink, and units moved into the case table's row labels. Only the
  diagram scrolls sideways on a phone.

Checked headless (scripts/pw_sc_check.py, now also HTML card/table
overflow, document width and unstyled pipes): before, 'p hr' unstyled
and card overflow at 1600, 1258 and 390 px in every case; after, no
unstyled pipes, no card or table overflow and document width equal to
the viewport at all three sizes and four cases, no SVG overlap or
overflow, 32 boxes open their detail, no errors.

docs/steam-cooling.html

@@ -32,20 +32,23 @@ main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;padding:12p
 .card p,.card li{font-size:13px}.card ul{padding-left:18px}
 .wrap{overflow-x:auto}
 svg{display:block;width:100%;min-width:1100px;height:auto}
-.side{display:flex;flex-direction:column;gap:12px}
+.side{display:flex;flex-direction:column;gap:12px;min-width:0}
 table{border-collapse:collapse;width:100%;font-size:12.5px}
 td,th{border-bottom:1px solid var(--stroke);padding:3px 6px;text-align:left;vertical-align:top}
 th{color:var(--mute);font-weight:600}
-td.n{font-family:var(--mono);white-space:nowrap}
+td.n{font-family:var(--mono)}
+td.pc{white-space:nowrap}
+.card td,.card p,.card li{overflow-wrap:break-word}
+#caseCard table{font-size:12px}
 td.low{color:var(--warn);font-weight:600}
-.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:12px;padding:0 16px 16px}
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:12px;padding:0 16px 16px}
 .b{display:inline-block;font-size:10px;border-radius:3px;padding:0 4px;margin-left:4px;border:1px solid var(--stroke);color:var(--mute)}
 .b.v{border-color:var(--ok);color:var(--ok)}.b.e{border-color:var(--warn);color:var(--warn)}
 .legend{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;font-size:12.5px}
 .legend i{display:inline-block;width:26px;border-top:3px solid;margin-right:6px;vertical-align:middle}
 .legend i.d{border-top-style:dashed}
 .note{color:var(--mute);font-size:12px;margin-top:6px}
-@media (max-width:1100px){main{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}
+@media (max-width:1100px){main{grid-template-columns:minmax(0,1fr)}.grid{grid-template-columns:minmax(0,1fr)}}
 /* diagram */
 .bx{fill:var(--box);stroke:var(--stroke);stroke-width:1}
 .hd{fill:var(--head)}
@@ -60,8 +63,8 @@ td.low{color:var(--warn);font-weight:600}
 .p{fill:none;stroke-width:2.2;stroke-linejoin:round}
 .p.st{stroke:var(--st);stroke-width:3}.p.cd{stroke:var(--cd);stroke-dasharray:7 4}.p.fw{stroke:var(--fw)}.p.rw{stroke:var(--rw)}
 .p.cws{stroke:var(--cws);stroke-width:2.6}.p.cwr{stroke:var(--cwr);stroke-dasharray:7 4}.p.pri{stroke:var(--pri)}.p.prw{stroke:var(--prw);stroke-dasharray:7 4}
-.p.bd{stroke:var(--bd);stroke-dasharray:3 3}.p.opt{stroke-dasharray:3 5;opacity:.8}
-.ar{stroke:none}.ar.st{fill:var(--st)}.ar.cd{fill:var(--cd)}.ar.cws{fill:var(--cws)}.ar.cwr{fill:var(--cwr)}.ar.pri{fill:var(--pri)}.ar.prw{fill:var(--prw)}
+.p.hr{stroke:var(--hr);stroke-width:2.6}.p.bd{stroke:var(--bd);stroke-dasharray:3 3}.p.opt{stroke-dasharray:3 5;opacity:.8}
+.ar{stroke:none}.ar.st{fill:var(--st)}.ar.cd{fill:var(--cd)}.ar.cws{fill:var(--cws)}.ar.cwr{fill:var(--cwr)}.ar.pri{fill:var(--pri)}.ar.prw{fill:var(--prw)}.ar.hr{fill:var(--hr)}
 .vv{fill:var(--card);stroke:var(--fg);stroke-width:1.2}
 .trap{fill:var(--card);stroke:var(--cd);stroke-width:1.4}
 .tt{fill:var(--fg);font:bold 7px var(--mono);text-anchor:middle}
@@ -223,7 +226,7 @@ pipe('M740,112 H760 M760,82 V156 M760,82 H780 M760,156 H780','fw');pipe('M760,15
 pipe('M970,82 H1000 V156 M970,156 H1000 M1000,152 H1030','st');pipe('M970,230 H1000 V156','st opt');
 pipe('M970,104 H985 M970,178 H985 M985,104 V250 H1030','bd');pipe('M1200,262 H1240','bd');lbl(1246,266,'to drain, cooled');
 pipe('M1325,104 V152','st opt');
-pipe('M450,150 V196 M520,196 V150','hr');
+pipe('M450,150 V196 M520,196 V150','hr');arrow(450,176,'s','hr');arrow(520,170,'n','hr');lbl(458,177,'feed loop');
 pipe('M1200,152 H1740 V350 H620','st');arrow(1500,152,'e','st');arrow(1740,250,'s','st');arrow(1150,350,'w','st');
 lbl(1430,172,'steam main 10 bar · insulated · falls with the flow');
 
@@ -316,8 +319,8 @@ function setCase(k){const c=CASES[k];
   const stLo=bc<st[1],ccLo=cc<cool;
   $('caseCard').innerHTML=`<h2>${c.t}</h2><p>${c.s}.</p><table>
    <tr><th></th><th>Demand</th><th>Installed</th><th>Covers</th></tr>
-   <tr><td>Steam</td><td class="n">${f0(st[0])} to ${f0(st[1])} kg/h</td><td class="n">${f0(bc)} kg/h</td><td class="n${stLo?' low':''}">${pc(bc,st[1])} to ${pc(bc,st[0])} %</td></tr>
-   <tr><td>Cooling, peak</td><td class="n">${f0(cool)} kW</td><td class="n">${f0(cc)} kW</td><td class="n${ccLo?' low':''}">${pc(cc,cool)} %</td></tr>
+   <tr><td>Steam, kg/h</td><td class="n">${f0(st[0])} to ${f0(st[1])}</td><td class="n">${f0(bc)}</td><td class="n pc${stLo?' low':''}">${pc(bc,st[1])} to ${pc(bc,st[0])} %</td></tr>
+   <tr><td>Cooling peak, kW</td><td class="n">${f0(cool)}</td><td class="n">${f0(cc)}</td><td class="n pc${ccLo?' low':''}">${pc(cc,cool)} %</td></tr>
    <tr><td>Circulating water</td><td class="n" colspan="3">${f0(fl[0])} to ${f0(fl[1])} l/min</td></tr>
    <tr><td>Chiller input at peak</td><td class="n" colspan="3">~${f0(cool*0.32)} to ${f0(cool*0.5)} kW electrical</td></tr>
    <tr><td>Electric boilers instead</td><td class="n" colspan="3">~${f0(st[0]*0.68/0.98)} to ${f0(st[1]*0.68/0.98)} kW electrical</td></tr></table>