/* The machine hour rate calculator's own rules (draft): Cost of One Hour's second figure, what moves the cost of one
   hour, built by the page script as text: a sentence once, the worst and the best case, then per input a heading and
   two lines in a grid, each with its percentage as a field and a bar on a background track. In the diagrams' type
   (the mono labels of lens-calculator.css), so it reads as part of the chart. */
.sens{font-family:var(--mono);font-size:13px;line-height:1.45;color:var(--ink)}
.sens p{margin:0}
.sens .note{margin:0 0 4px}
/* the cost as entered, in the worst and in the best case */
.sens .ssum{display:grid;grid-template-columns:auto auto auto;justify-content:start;gap:2px 14px;align-items:baseline;margin:12px 0 0}
.sens .sv{text-align:right;white-space:nowrap}
/* per input a heading across the grid, then two lines: the percentage, the value tried, the change and its bar */
.sens .sgrid{display:grid;grid-template-columns:auto auto auto minmax(48px,22em);justify-content:start;gap:4px 14px;align-items:baseline}
.sens .sgroup{display:contents}
.sens .sgroup[hidden]{display:none} /* the economic life's row or the rate's, by the switch */
.sens .shead{grid-column:1/-1;margin:14px 0 0}
.sens .sdir,.sens .sval,.sens .sch{white-space:nowrap}
.sens .sval,.sens .sch{text-align:right}
/* each bar on a track the width of the scale (Jacek, 16 Oct 2026: "add some background to the bars") */
.sens .sbar{position:relative;align-self:center;height:12px;background:var(--wax)}
.sens .sbar::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;border-left:1px solid var(--ink)}
.sens .fill{position:absolute;top:0;bottom:0;background:var(--signal)}
/* the percentage fields, styled without the browser's own text field (Safari showed them empty, Jacek, 19 Oct 2026):
   their height and line height set, the text's colour forced, no AutoFill button inside */
.sens input.pct{-webkit-appearance:none;appearance:none;width:2.8em;height:calc(1.45em + 1px);margin:0;padding:0 3px;border:0;
  border-bottom:1px solid var(--ink);border-radius:0;background:var(--wax);font:inherit;font-weight:700;line-height:1.45;
  color:inherit;-webkit-text-fill-color:currentColor;text-align:right}
.sens input.pct::-webkit-contacts-auto-fill-button,.sens input.pct::-webkit-credentials-auto-fill-button{display:none!important}
.sens input.pct[aria-invalid="true"]{border-bottom-color:#B3261E}
/* on a phone, tighter gaps and a track that can narrow, so the widest values (a Polish "6 000 000 zł" with "o 20% więcej")
   fit 375 px */
@media (max-width:480px){.sens .sgrid{column-gap:8px;grid-template-columns:auto auto auto minmax(36px,22em)}}
/* where even so the values do not fit (the page script's fitSens): a size smaller, tighter gaps, each bar under its line */
.sens.stack{font-size:12px}
.sens.stack .ssum,.sens.stack .sgrid{column-gap:8px}
.sens.stack .sgrid{grid-template-columns:auto auto auto}
.sens.stack .sbar{grid-column:1/-1}