/* The OEE calculator's own rules (site-en/oee-calculator.html and site/kalkulator-oee.html), linked after the site's styles.css and the toolbox
   rules it shares with the other calculators (lens-calculator.css: the column, inputs, results bars, figures, parts and
   exports). Only what that page lacks: the intro diagram, drawn at its container's width (oee-calculator-page.js). */
.flow{margin:28px 0}
.flow svg{display:block;width:100%;height:auto}
.flow text{font-family:var(--sans);font-size:13px;letter-spacing:0;fill:var(--ink);stroke:none}
.flow .fs{font-size:14px;font-weight:700}
.flow .narrow .fs{font-size:13px}
.flow .fh{font-family:var(--mono);font-size:12px;letter-spacing:.04em;fill:var(--muted)}
.flow .fa{font-size:12px;fill:var(--muted)}
.flow a rect{transition:stroke-width .15s}
/* a bar's title in the steps' diagrams, in bold (Jacek, 15 Oct 2026) */
.diagram text.b{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;fill:var(--ink)}
.flow a:hover rect{stroke-width:2.5}
/* the six big losses under the cascade (the site's table.data), its caption as a figure's title */
.tool table.data{margin-top:28px}
.tool table.data caption{caption-side:top;text-align:left;margin:0 0 10px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.5;color:var(--ink)}
/* "How to read the result": each paragraph with its score's upright bar beside it, on the right so the paragraphs keep
   the column's left edge; on a phone the bar floats at the paragraph's right and the text wraps around it (Jacek,
   15 Oct 2026) */
.readrow{display:grid;grid-template-columns:minmax(0,1fr) 112px;column-gap:32px;align-items:start}
.readrow>p{grid-column:1;grid-row:1}
.readrow>.score{grid-column:2;grid-row:1;margin:4px 0 0}
@media (max-width:620px){.readrow{display:flow-root}.readrow>.score{float:right;width:88px;margin:4px 0 8px 16px}}