/* ============================================================
   Калькулятор пептидов на шприц — страница /kalkulyator
   ============================================================ */

.calc-head{ padding-bottom:0; display:grid; gap:14px; }
.calc-crumb{ font-size:13px; color:var(--text-3); }
.calc-crumb span{ color:var(--text-2); }
.calc-head h1{ font:800 clamp(30px,4.6vw,48px)/1.08 var(--head); letter-spacing:-.02em; }
.calc-head .lead{ max-width:62ch; color:var(--text-2); font-size:clamp(15px,1.6vw,17px); }
.calc-head .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:700 12px/1 var(--head); letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
}

.calc-body{ display:grid; gap:16px; padding-bottom:clamp(64px,9vw,120px); }
.calc-panel{ display:grid; gap:22px; }

.calc-step{ display:grid; gap:10px; }
.calc-step h2{ display:flex; align-items:center; gap:10px; font:700 15px/1.3 var(--head); letter-spacing:0; }
.calc-num{
  flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand);
  font:800 12px/24px var(--head); text-align:center;
}
.calc-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.calc-chips .chip{ height:auto; min-height:40px; padding:8px 17px; flex-direction:column; justify-content:center; gap:0; font-variant-numeric:tabular-nums; }
.calc-chips .chip small{ display:block; margin-top:3px; font:500 11px/1.2 var(--body); opacity:.75; }

.calc-own{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-2); }
.calc-own input{
  width:108px; padding:9px 11px; border-radius:var(--radius-s);
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  font:600 14px var(--body);
}
.calc-own input:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }

/* ---------- результат ---------- */
.calc-res{
  display:grid; gap:14px; padding:clamp(16px,2.4vw,22px);
  border-radius:var(--radius); background:var(--brand-soft); border:1px solid var(--brand);
}
.calc-res.warn{ background:var(--danger-soft); border-color:var(--danger); }
.calc-res-t{ font:700 12px/1 var(--head); letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.calc-res.warn .calc-res-t{ color:var(--danger); }
.calc-head-line{ font:700 clamp(18px,2.6vw,24px)/1.3 var(--head); }
.calc-head-line b{ color:var(--brand); }
.calc-res.warn .calc-head-line b{ color:var(--danger); }
.calc-facts{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; color:var(--text-2); }
.calc-facts b{ color:var(--text); font-variant-numeric:tabular-nums; }
.calc-syr{ width:100%; height:auto; max-width:100%; display:block; }

.calc-ruo{ font-size:13px; line-height:1.5; color:var(--text-3); }

/* ---------- таблицы ---------- */
.calc-tables{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.calc-tables .panel{ margin-top:0; min-width:0; }
.calc-t-title{ font:700 18px/1.2 var(--head); letter-spacing:-.01em; margin-bottom:8px; }
.calc-t-note{ font-size:14px; margin-bottom:14px; max-width:62ch; }
.calc-scroll{ overflow-x:auto; }
.calc-scroll .tbl th{ white-space:normal; line-height:1.25; vertical-align:bottom; }
.calc-scroll .tbl td{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.calc-scroll .tbl tbody tr.on{ background:var(--brand-soft); }
.calc-over{ color:var(--danger); }

/* ---------- принцип расчёта ---------- */
.calc-how{ display:grid; gap:12px; }
.calc-how p{ color:var(--text-2); max-width:74ch; }
.calc-how b{ color:var(--text); }
.calc-f{
  padding:12px 15px; border-radius:var(--radius-s);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--brand);
  font-variant-numeric:tabular-nums;
}
.calc-f span{ display:block; margin-top:4px; font-size:13px; color:var(--text-3); }
.calc-warn-note{
  padding:14px 16px; border-radius:var(--radius-s);
  background:var(--accent-soft); border:1px solid var(--line);
}

@media (max-width:860px){
  .calc-tables{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px){
  .calc-scroll .tbl{ font-size:13px; }
  .calc-scroll .tbl td:last-child{ white-space:normal; }
  .calc-tables .panel{ padding:18px 12px; }
  .calc-t-title, .calc-t-note{ padding-inline:4px; }
  .calc-syr text{ font-size:26px; }
  .calc-syr line{ stroke-width:3; }
  .calc-scroll .tbl th{ padding:9px 7px; font-size:11px; letter-spacing:.02em; }
  .calc-scroll .tbl td{ padding:11px 7px; }
  .calc-chips .chip{ flex:1 1 calc(33% - 8px); text-align:center; padding-inline:10px; }
}
@media (max-width:400px){
  .calc-scroll .tbl th{ padding-inline:5px; font-size:10px; letter-spacing:0; }
  .calc-scroll .tbl td{ padding-inline:5px; }
  /* третий столбец таблицы воды («В одном делении») — тот же факт есть в строке итогов; на узком экране таблица должна уместиться */
  #calc-water-tbl th:nth-child(3), #calc-water-tbl td:nth-child(3){ display:none; }
}