/* ============================================================================
   RP2 · КАЛЬКУЛЯТОР ПОТУЖНОСТІ (40-IA-UX-SPEC §6)
   Мова прототипу v2: аркуш .pick__panel, результат .pick__res з петролевою
   рискою, плашки-рядки складу, кнопки-розряд .btn. Кольори — лише токени,
   темна тема приходить сама.
   ========================================================================== */

.calc{ display:grid; gap: var(--rp-s4); }

/* вступ калькулятора — на всю ширину сторінки (правка 10.09) */
.lead.calc__lead{ max-width:none; }

/* інший калькулятор — окремий рядок із кнопкою (правка 10.09) */
.calc__other{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--rp-s3) var(--rp-s4);
  padding-top: var(--rp-s4); border-top: var(--rp-hair) solid var(--rp-line);
}

/* ---- шапка стовпців (як .cat__cols відомості) ---------------------------- */
.calc__cols{ display:none; }
@media (min-width: 900px){
  .calc__cols{
    display:grid; grid-template-columns: minmax(0,1fr) 130px 132px 84px;
    gap: var(--rp-s4); padding-bottom: 7px;
    border-bottom: var(--rp-hair) solid var(--rp-rule);
  }
  .calc__cols span{
    font-size: var(--rp-fs-micro);
    letter-spacing:.08em; text-transform:uppercase; color: var(--rp-muted);
  }
  .calc__cols span:last-child{ text-align:right; }
}

/* ---- рядок навантаження -------------------------------------------------- */
.calc__row{
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  gap: var(--rp-s2) var(--rp-s4); align-items:center;
  padding: 12px 0; border-bottom: var(--rp-hair) solid var(--rp-line);
  transition: background-color var(--rp-dur) linear;
}
.calc__row:hover{ background: var(--rp-hover); }
.calc__row.is-on .calc__t{ font-weight: 500; }
@media (min-width: 900px){
  .calc__row{ grid-template-columns: minmax(0,1fr) 130px 132px 84px; }
}
.calc__t{ display:flex; flex-wrap:wrap; gap: 6px 10px; align-items:center; line-height:1.3; }
@media (max-width: 899px){
  .calc__t{ grid-column: 1 / -1; }
}

.calc__kw input{
  width: 100%; max-width: 130px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 899px){ .calc__kw input{ max-width: 104px; } }

/* лічильник кількості: сегмент −/n/+ */
.calc__qty{
  display:inline-flex; align-items:stretch;
  border: var(--rp-hair) solid var(--rp-edge); border-radius: var(--rp-r-sm);
  overflow:hidden; justify-self:start;
}
.calc__qty button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  width: 40px; min-height: 40px; color: var(--rp-ink);
  font-size: var(--rp-fs-h3); line-height:1;
  transition: background-color var(--rp-dur) linear;
}
.calc__qty button:hover{ background: var(--rp-tint); }
.calc__qty button:focus-visible{ outline: 2px solid var(--rp-focus); outline-offset:-3px; }
.calc__qty output{
  display:flex; align-items:center; justify-content:center;
  min-width: 40px; padding: 0 4px;
  border-inline: var(--rp-hair) solid var(--rp-edge);
  font-variant-numeric: tabular-nums;
  background: var(--rp-sunk);
}
.calc__row.is-on .calc__qty output{ background: var(--rp-flame); color: var(--rp-on-flame); }

.calc__sum{
  font-variant-numeric: tabular-nums;
  text-align:right; color: var(--rp-muted);
}
.calc__row.is-on .calc__sum{ color: var(--rp-ink); }

/* «своє навантаження»: перемикач мотора */
.calc__motor{ font-size: var(--rp-fs-small); color: var(--rp-muted); }

/* ---- коефіцієнти ---------------------------------------------------------- */
.calc__coef{
  display:flex; flex-wrap:wrap; gap: var(--rp-s3) var(--rp-s5);
  align-items:center;
}
.calc__kfield{ display:inline-grid; }
.calc__kfield input{ max-width: 104px; }

/* ---- застереження про пуск (обов'язкове, §6) ------------------------------ */
.calc__warn{
  background: var(--rp-tint);
  border-left: 2px solid var(--rp-flame);
  padding: 12px 16px;
  font-size: var(--rp-fs-small); line-height: 1.5;
  max-width: 72ch;
}

/* ---- результат ------------------------------------------------------------ */
.calc__res .readouts{ display:flex; flex-wrap:wrap; gap: var(--rp-s3); }
.calc__need{ margin:0; }
.calc__need .num{ font-variant-numeric: tabular-nums; }