/* Калькулятор геометрии реза — стили страницы (грузятся только здесь).
 * Всё под .rezcalc: переменные на контейнере (не :root — чтобы не пересекаться
 * с темой сайта). Палитра и приёмы совпадают с конструктором (konstruktor.css). */

.rezcalc{
  --bg:#17171a; --panel:#1f1f24; --panel2:#26262c; --line:#34343c;
  --gold:rgb(var(--color-gold, 201 168 76));
  --gold-l:rgb(var(--color-gold-light, 232 201 109));
  --gold-dim:rgb(var(--color-gold, 201 168 76) / .55);
  --text:#e5e7eb; --muted:#9ca3af;
  --ok:#7db184; --ok-bg:rgba(125,177,132,.12);
  --warn:#d9a441; --warn-bg:rgba(217,164,65,.12);
  --bad:#c96054; --bad-bg:rgba(201,96,84,.12);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:Inter,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  max-width:1180px; margin:0 auto; padding:8px 16px 60px;
  color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.55;
}
.rezcalc *{box-sizing:border-box}

.rezcalc header{padding:22px 0 8px; border-bottom:1px solid var(--line); margin-bottom:26px}
.rezcalc .eyebrow{font-size:11px; letter-spacing:.22em; color:var(--gold); text-transform:uppercase; margin:0 0 10px}
.rezcalc h1{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.5vw,36px); line-height:1.1; margin:0 0 8px; text-wrap:balance; color:#fff}
.rezcalc .sub{color:var(--muted); max-width:100ch; margin:0 0 8px}
.rezcalc .sub b{color:var(--text); font-weight:600}

.rezcalc .cols{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:28px; align-items:start}
@media (max-width:960px){ .rezcalc .cols{grid-template-columns:minmax(0,1fr)} }

.rezcalc .board{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px 18px 22px; min-width:0}
.rezcalc .board svg{width:100%; height:auto; display:block}
.rezcalc .cap{margin:8px 2px 16px; font-size:13px; color:var(--muted); min-height:2.6em}

/* заголовки визуалов */
.rezcalc .viz-h{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:2px 0 6px}
.rezcalc .viz-h + .cap, .rezcalc svg + .cap{min-height:0}
/* крупный живой пик усилия (ось Y авто-масштабируется — число не даёт обмануться) */
.rezcalc .viz-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:2px 0 6px}
.rezcalc .viz-head .viz-h{margin:0}
.rezcalc .peak{font-size:12px; color:var(--muted); white-space:nowrap}
.rezcalc .peak b{font-size:22px; color:var(--gold-l); font-weight:600; font-variant-numeric:tabular-nums}

/* поперечное сечение клинка */
.rezcalc #rez-section{margin-bottom:2px}
.rezcalc .rez-blade{fill:var(--gold); opacity:.85; stroke:var(--gold-l); stroke-width:1; stroke-linejoin:round}
.rezcalc .rez-center{stroke:var(--line); stroke-width:1; stroke-dasharray:3 4}
.rezcalc .rez-mark{fill:var(--muted); font-size:10px; font-family:var(--sans); letter-spacing:.04em}
.rezcalc #rez-seccap{margin-bottom:20px; min-height:0}
/* чертёжные выноски сечения */
.rezcalc .rez-dim{stroke:var(--gold-dim); stroke-width:1}
.rezcalc .rez-ext{stroke:var(--gold-dim); stroke-width:1; opacity:.45}
.rezcalc .rez-arc{fill:none; stroke:var(--gold-dim); stroke-width:1.2}
.rezcalc .rez-dtext{fill:var(--gold); font-size:11px; font-family:var(--sans); font-variant-numeric:tabular-nums}

/* вкладки вид (сечение / 3D) и контейнер объёма */
.rezcalc .rez-views{display:flex; gap:8px; margin:2px 0 12px}
.rezcalc .rez-views button{background:var(--panel2); color:var(--muted); border:1px solid var(--line); border-radius:6px;
  padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans)}
.rezcalc .rez-views button:hover:not(:disabled){border-color:var(--gold-dim); color:var(--text)}
.rezcalc .rez-views button.active{background:var(--gold); color:#17171a; border-color:var(--gold)}
.rezcalc .rez-views button:disabled{opacity:.4; cursor:not-allowed}
.rezcalc .rez-views button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rezcalc #rez-3d-view{width:100%; aspect-ratio:16/10; max-height:420px; touch-action:none; cursor:grab;
  border-radius:4px; overflow:hidden;
  background:radial-gradient(120% 140% at 50% 0%, var(--panel2) 0%, var(--panel) 55%, #17171a 100%)}
.rezcalc #rez-3d-view:active{cursor:grabbing}
.rezcalc #rez-3d-view canvas{display:block; width:100%; height:100%}
.rezcalc .rez-3d-hud{margin:6px 2px 0; font-size:12px; color:var(--muted)}
.rezcalc .rez-3d-fail{margin:8px 2px 0; font-size:13px; color:var(--gold-l)}

/* график */
.rezcalc .rez-axis{stroke:var(--line); stroke-width:1}
.rezcalc .rez-grid{stroke:var(--line); stroke-width:1; opacity:.5}
.rezcalc .rez-line{fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.rezcalc .rez-fill{fill:var(--gold); opacity:.10}
.rezcalc .rez-tick{fill:var(--muted); font-size:10px; font-family:var(--sans); font-variant-numeric:tabular-nums}
.rezcalc .rez-axlabel{fill:var(--muted); font-size:10.5px; font-family:var(--sans); letter-spacing:.02em}

/* тип спуска */
.rezcalc .grind{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.rezcalc .grind button{
  background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:6px;
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--sans);
}
.rezcalc .grind button:hover{border-color:var(--gold-dim)}
.rezcalc .grind button.active{background:var(--gold); color:#17171a; border-color:var(--gold)}
.rezcalc .grind button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ползунки */
.rezcalc .ctls{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px}
@media (max-width:640px){ .rezcalc .ctls{grid-template-columns:1fr} }
.rezcalc .ctl{min-width:0}
.rezcalc .ctl label{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; color:var(--muted); margin-bottom:5px}
.rezcalc .ctl .val{color:var(--gold-l); font-variant-numeric:tabular-nums; font-size:14px; white-space:nowrap}
.rezcalc .ctl input[type=range]{width:100%; accent-color:var(--gold); height:22px; margin:0; background:transparent}
.rezcalc .ctl input[type=range]:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rezcalc .ctl select{
  width:100%; background:var(--panel2); color:var(--text); border:1px solid var(--line);
  border-radius:5px; padding:8px 10px; font-size:13.5px; font-family:var(--sans);
}
.rezcalc .ctl select:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rezcalc .ctl .hint{margin:3px 0 0; font-size:11.5px; color:var(--muted); opacity:.85; line-height:1.4}

/* группы справа */
.rezcalc .grp{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin-bottom:16px; display:flex; flex-direction:column; gap:12px}
.rezcalc .grp-h{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}

/* штамп-вердикт */
.rezcalc .stamp{border:2px solid; border-radius:6px; padding:14px 18px; margin:4px 0 16px;
  text-transform:uppercase; letter-spacing:.12em; font-size:15px; font-weight:600}
.rezcalc .stamp small{display:block; text-transform:none; letter-spacing:0; font-weight:400; font-size:13px; margin-top:6px; opacity:.9}
.rezcalc .stamp.ok{color:var(--ok); border-color:var(--ok); background:var(--ok-bg)}
.rezcalc .stamp.warn{color:var(--warn); border-color:var(--warn); background:var(--warn-bg)}
.rezcalc .stamp.bad{color:var(--bad); border-color:var(--bad); background:var(--bad-bg)}

/* три запаса */
.rezcalc .crit{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.rezcalc .crit li{background:var(--panel); border:1px solid var(--line); border-left-width:3px; border-radius:4px; padding:11px 14px}
.rezcalc .crit li.ok{border-left-color:var(--ok)} .rezcalc .crit li.warn{border-left-color:var(--warn)}
.rezcalc .crit li.sign{border-left-color:var(--bad)} .rezcalc .crit li.na{border-left-color:var(--line)}
.rezcalc .crit .row{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.rezcalc .crit .name{font-weight:600; font-size:14px}
.rezcalc .crit .chip{font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; font-variant-numeric:tabular-nums}
.rezcalc .crit li.ok .chip{color:var(--ok)} .rezcalc .crit li.warn .chip{color:var(--warn)}
.rezcalc .crit li.sign .chip{color:var(--bad)} .rezcalc .crit li.na .chip{color:var(--muted)}
.rezcalc .crit .bar{height:4px; background:var(--line); border-radius:2px; margin:8px 0 6px; overflow:hidden}
.rezcalc .crit .bar i{display:block; height:100%; background:var(--gold); border-radius:2px}
.rezcalc .crit li.warn .bar i{background:var(--warn)} .rezcalc .crit li.sign .bar i{background:var(--bad)}
.rezcalc .crit li.ok .bar i{background:var(--ok)}
.rezcalc .crit .why{color:var(--muted); font-size:12.5px}

/* подвал */
/* кнопка «Поделиться» — вторичная контурная (не спорит с золотом) */
.rezcalc .share-box{margin-top:16px}
.rezcalc .share-box button{width:100%; padding:11px 16px; font-size:14px; font-family:var(--sans); font-weight:600;
  border-radius:5px; border:1px solid var(--gold-dim); background:transparent; color:var(--gold-l); cursor:pointer}
.rezcalc .share-box button:hover{border-color:var(--gold); color:var(--gold)}
.rezcalc .share-box button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.rezcalc .share-box .note{font-size:12.5px; color:var(--muted); margin-top:8px; word-break:break-all}

.rezcalc footer{margin-top:28px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); line-height:1.6}
.rezcalc footer b{color:var(--text); font-weight:600}
.rezcalc #rez-ver{display:inline-block; margin-left:6px; opacity:.6; font-variant-numeric:tabular-nums}