/* ============================================================
   СКОЛЬКО СТОИТ РУТИНА — КАЛЬКУЛЯТОР (29.09.2026)
   Слева — три ползунка на белом, справа — результат на заливке
   цвета направления (как у карточек-призывов). Шкалы «рабочий день»
   и «ставки» — простые полосы, без рисованных предметов.
   Заливку трека ползунка держит --p, её ставит calc.js.
   ============================================================ */
.calc__card{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:calc(var(--r-card) + 6px);
  background:var(--surface);
  box-shadow:0 2px 6px rgba(13,15,32,.05), 0 40px 80px -40px rgba(var(--accent-rgb), .35);
}
.calc__cap{
  margin:0 0 clamp(18px, 1.8vw, 26px);
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-mute);
}

/* ---------- ввод ---------- */
.calc__in{ padding:clamp(24px, 3vw, 52px); display:flex; flex-direction:column; }
.calc__row{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:baseline; column-gap:16px; row-gap:10px;
  padding:clamp(14px, 1.4vw, 20px) 0;
  border-top:1px solid var(--line);
  cursor:pointer;
}
.calc__row:first-of-type{ border-top:0; padding-top:0; }
.calc__label{ font-size:clamp(14px, 1vw, 16px); line-height:1.4; color:var(--fg-lead); }
.calc__val{
  font:650 clamp(20px, 1.6vw, 26px)/1 var(--font); letter-spacing:-.01em;
  color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.calc__range{ grid-column:1 / -1; }
/* живая формула: прозрачный расчёт — тот же довод, что «цену называем до старта» */
.calc__how{
  margin-top:clamp(18px, 1.8vw, 26px); padding:16px 18px;
  border-radius:10px; background:var(--accent-wash); border:1px solid rgba(var(--accent-rgb), .14);
  display:grid; gap:6px;
}
.calc__how p{ margin:0; font-size:13.5px; line-height:1.45; color:var(--fg-lead); font-variant-numeric:tabular-nums; }
.calc__how b{ font-weight:600; color:var(--fg); }
.calc__how .calc__how-cap{ margin-bottom:2px; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-1); }
.calc__assume{ margin:auto 0 0; padding-top:clamp(16px, 1.6vw, 22px); font-size:13px; line-height:1.5; color:var(--fg-mute); }

/* ползунок: трек с заливкой до --p, круглая ручка */
.calc__range{
  --p:50%;
  -webkit-appearance:none; appearance:none;
  width:100%; height:28px; margin:0;
  background:transparent; cursor:pointer;
}
.calc__range:focus{ outline:none; }
.calc__range::-webkit-slider-runnable-track{
  height:6px; border-radius:3px;
  background:linear-gradient(90deg, var(--accent-1) var(--p), rgba(var(--accent-rgb), .16) var(--p));
}
.calc__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; margin-top:-9px; border-radius:50%;
  background:#fff; border:2px solid var(--accent-1);
  box-shadow:0 4px 12px rgba(var(--accent-rgb), .35);
  transition:transform .2s var(--ease);
}
.calc__range::-moz-range-track{ height:6px; border-radius:3px; background:rgba(var(--accent-rgb), .16); }
.calc__range::-moz-range-progress{ height:6px; border-radius:3px; background:var(--accent-1); }
.calc__range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--accent-1);
  box-shadow:0 4px 12px rgba(var(--accent-rgb), .35);
}
.calc__range:active::-webkit-slider-thumb{ transform:scale(1.15); }
.calc__range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(var(--accent-rgb), .3); }
.calc__range:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(var(--accent-rgb), .3); }

/* ---------- результат ---------- */
.calc__out{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  padding:clamp(24px, 3vw, 52px);
  color:#fff;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    linear-gradient(150deg, var(--accent-1), var(--accent-dark));
}
.calc__out .calc__cap{ color:rgba(255,255,255,.72); }
.calc__art{ position:absolute; z-index:-1; right:-6%; top:-6%; width:min(42%, 260px); opacity:.9; mix-blend-mode:screen; pointer-events:none; }

.calc__hours{ margin:0; font-size:clamp(15px, 1.1vw, 17px); line-height:1.4; color:rgba(255,255,255,.86); }
.calc__hours b{
  display:inline-block; margin-right:4px;
  font:650 clamp(44px, 4.4vw, 76px)/1 var(--font-display, var(--font)); letter-spacing:-.03em;
  color:#fff; font-variant-numeric:tabular-nums;
}
.calc__money{ display:flex; flex-wrap:wrap; gap:6px 32px; margin-top:clamp(12px, 1.2vw, 18px); }
.calc__money p{ margin:0; display:flex; align-items:baseline; gap:8px; }
.calc__money b{ font:650 clamp(22px, 1.9vw, 32px)/1.1 var(--font); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.calc__money span{ font-size:14px; color:rgba(255,255,255,.72); }

.calc__viz{ display:grid; gap:14px; margin-top:clamp(18px, 1.8vw, 26px); }
.calc__viz-cap{ display:block; margin-bottom:8px; font-size:13px; color:rgba(255,255,255,.78); }
.calc__viz-cap b{ color:#fff; font-weight:650; }
/* рабочий день: восемь часов-клеток, рутина заливает их слева */
.calc__day-bar{ display:grid; grid-template-columns:repeat(8, 1fr); gap:4px; }
.calc__day-bar i{
  --f:0;
  height:12px; border-radius:3px;
  background:linear-gradient(90deg, #fff calc(var(--f) * 100%), rgba(255,255,255,.18) calc(var(--f) * 100%));
  transition:background .3s var(--ease);
}
/* ставки: по блоку на полную ставку, последний — частично */
.calc__fte-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-height:28px; }
.calc__fte-row i{
  --f:1;
  width:28px; height:28px; border-radius:6px;
  background:linear-gradient(0deg, #fff calc(var(--f) * 100%), rgba(255,255,255,.18) calc(var(--f) * 100%));
}
.calc__fte-row span{ margin-left:4px; font-size:13px; font-weight:600; color:rgba(255,255,255,.86); }

.calc__share{
  margin-top:clamp(18px, 1.8vw, 26px); padding-top:clamp(16px, 1.6vw, 22px);
  border-top:1px solid rgba(255,255,255,.2);
}
.calc__share-row{ display:grid; gap:8px; cursor:pointer; font-size:clamp(14px, 1vw, 16px); color:rgba(255,255,255,.9); }
.calc__share-row output{ font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.calc__free{ margin:6px 0 0; font-size:clamp(15px, 1.1vw, 17px); line-height:1.4; color:rgba(255,255,255,.9); }
.calc__free b{ font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }

/* светлый ползунок на заливке */
.calc__range--light::-webkit-slider-runnable-track{ background:linear-gradient(90deg, #fff var(--p), rgba(255,255,255,.25) var(--p)); }
.calc__range--light::-webkit-slider-thumb{ background:var(--accent-1); border-color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.25); }
.calc__range--light::-moz-range-track{ background:rgba(255,255,255,.25); }
.calc__range--light::-moz-range-progress{ background:#fff; }
.calc__range--light::-moz-range-thumb{ background:var(--accent-1); border-color:#fff; }

.calc__btn{ align-self:flex-start; margin-top:clamp(20px, 2vw, 28px); background:#fff; color:var(--accent-1); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.calc__note{ margin:12px 0 0; font-size:12.5px; line-height:1.45; color:rgba(255,255,255,.7); max-width:44ch; }

@media (max-width: 900px){
  .calc__card{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 640px){
  .calc__hours b{ font-size:48px; }
  .calc__btn{ align-self:stretch; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .calc__day-bar i, .calc__range::-webkit-slider-thumb{ transition:none; }
}