/* Калькулятор пружин — стили. Изолировано в #spring-calc. Шрифты SIL OFL 1.1. */
/* Шрифты — SIL Open Font License 1.1, файлы в fonts/ вместе с текстами лицензий.
   PT Sans — интерфейс, JetBrains Mono — числа, Roboto Condensed Italic — размеры на чертеже. */
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/pt-sans-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/pt-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/pt-sans-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'PT Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/pt-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2212}
@font-face{font-family:'Roboto Condensed';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/roboto-condensed-cyrillic-400-italic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Roboto Condensed';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/roboto-condensed-latin-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+2000-206F,U+2212}


/* ==========================================================================
   Всё оформление изолировано в #spring-calc — при вставке в Тильду (блок T123)
   стили сайта не пересекаются с виджетом и наоборот.
   ========================================================================== */
#spring-calc,
#spring-calc *{box-sizing:border-box}

#spring-calc{
  /* палитра: лист ватмана, графит, синий для расчётных величин */
  --paper:#f6f5f1;
  --card:#fff;
  --ink:#1c1f22;
  --ink-2:#5a6169;
  --rule:#c9c7c0;
  --rule-hard:#1c1f22;
  --calc:#14459c;        /* цвет вычисленных значений — как в исходных SVG */
  --err:#a4231b;
  --err-bg:#fbeceb;
  --warn:#7a5600;
  --warn-bg:#fdf4de;
  --accent:#1c1f22;

  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --sans:'PT Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;

  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.45;
  width:83.333%;            /* 10 из 12 колонок */
  max-width:1240px;
  margin:0 auto;
  padding:24px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- каркас ---------- */
#spring-calc .spr-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;border-bottom:2px solid var(--rule-hard);padding-bottom:10px;margin-bottom:20px;
}
#spring-calc .spr-title{
  font-size:19px;font-weight:600;letter-spacing:.01em;margin:0;
}
#spring-calc .spr-grid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:24px;align-items:start}
#spring-calc #sprFormA{grid-column:1;grid-row:1}
#spring-calc #sprFormB{grid-column:1;grid-row:2}
#spring-calc .spr-sheet{grid-column:2;grid-row:1 / span 2;position:sticky;top:16px}

/* ---------- форма ---------- */
#spring-calc .spr-panel{background:var(--card);border:1px solid var(--rule);padding:18px}
#spring-calc .spr-legend{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:6px;margin:0 0 14px;
}
#spring-calc .spr-legend + .spr-legend,
#spring-calc .spr-field + .spr-legend{margin-top:22px}

#spring-calc .spr-field{margin-bottom:12px}
#spring-calc .spr-label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:4px}
#spring-calc .spr-label b{color:var(--ink);font-weight:500}
#spring-calc .spr-row{display:flex;align-items:stretch}
#spring-calc input[type=text],
#spring-calc select{
  width:100%;font-family:var(--mono);font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:0;
  padding:7px 9px;min-height:34px;
}
#spring-calc select{font-family:var(--sans);cursor:pointer}
#spring-calc input[type=text]:focus-visible,
#spring-calc select:focus-visible{outline:2px solid var(--calc);outline-offset:-1px}
#spring-calc .spr-unit{
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
  border:1px solid var(--rule);border-left:0;background:var(--paper);
  display:flex;align-items:center;padding:0 9px;white-space:nowrap;
}
#spring-calc .spr-field--bad input{border-color:var(--err);background:var(--err-bg)}
#spring-calc .spr-hint{font-size:12px;color:var(--err);margin-top:4px;display:block}

/* показ полей по типу пружины */
#spring-calc[data-type=tension] .spr-mode-c{display:none!important}
#spring-calc[data-type=compression] .spr-mode-t{display:none!important}
/* справка по обозначениям */
#spring-calc .spr-help{margin-top:16px;border:1px solid var(--rule);background:#fff}
#spring-calc .spr-help summary{
  cursor:pointer;padding:9px 12px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);user-select:none;
}
#spring-calc .spr-help summary:focus-visible{outline:2px solid var(--calc);outline-offset:-2px}
#spring-calc .spr-help[open] summary{border-bottom:1px solid var(--rule)}
#spring-calc .spr-help table{width:100%;border-collapse:collapse;font-size:13px}
#spring-calc .spr-help td{border-top:1px solid #eee;padding:4px 12px;vertical-align:baseline}
#spring-calc .spr-help td:first-child{
  font-family:var(--mono);white-space:nowrap;width:1%;color:var(--calc);padding-right:16px;
}
#spring-calc .spr-help tr:first-child td{border-top:0}
#spring-calc .spr-help .spr-help-sec td{
  background:var(--paper);font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
}
#spring-calc .spr-hookrot{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px}
#spring-calc .spr-hookrot button{padding:6px 12px;font-size:13px}
#spring-calc .spr-hookrot b{font-weight:600}

/* переключатели-группы */
#spring-calc .spr-seg{display:flex;border:1px solid var(--rule)}
#spring-calc .spr-seg label{
  flex:1;text-align:center;font-size:13px;padding:7px 4px;cursor:pointer;
  border-right:1px solid var(--rule);user-select:none;
}
#spring-calc .spr-seg label:last-child{border-right:0}
#spring-calc .spr-seg input{position:absolute;opacity:0;width:0;height:0}
#spring-calc .spr-seg input:checked + span{font-weight:600}
#spring-calc .spr-seg label:has(input:checked){background:var(--ink);color:#fff}
#spring-calc .spr-seg label:has(input:focus-visible){outline:2px solid var(--calc);outline-offset:-2px}

/* витки — три варианта картинкой-заглушкой */
#spring-calc .spr-turns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#spring-calc .spr-turn{
  border:1px solid var(--rule);padding:8px 6px;text-align:center;cursor:pointer;
  font-size:11px;line-height:1.25;color:var(--ink-2);background:#fff;
}
#spring-calc .spr-turn input{position:absolute;opacity:0;width:0;height:0}
#spring-calc .spr-turn:has(input:checked){border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
#spring-calc .spr-turn:has(input:focus-visible){outline:2px solid var(--calc);outline-offset:2px}
#spring-calc .spr-turn-fig{display:block;margin-bottom:6px;color:var(--ink);opacity:.75}
#spring-calc .spr-turn-fig svg{display:block;width:100%;height:auto}
#spring-calc .spr-turn:has(input:checked) .spr-turn-fig{opacity:1}

/* ---------- правая колонка ---------- */
#spring-calc .spr-sheet{background:var(--card);border:1px solid var(--rule);padding:18px}

/* лист со схемой: рамка формата и основная надпись */
#spring-calc .spr-frame{
  position:relative;border:2px solid var(--rule-hard);background:#fff;display:flex;flex-direction:column;
}
/* подложка под числами — размерная линия прерывается под значением */
#spring-calc .spr-halo{fill:#fff;pointer-events:none}
/* редактируемые размеры видно всегда: заливка + штриховая рамка */
#spring-calc .spr-hit{
  fill:#14459c;fill-opacity:.09;
  stroke:#14459c;stroke-opacity:.45;stroke-width:1;stroke-dasharray:3 2.5;
  cursor:pointer;
}
#spring-calc .spr-hit:hover{fill-opacity:.18;stroke-opacity:1;stroke-dasharray:none}
#spring-calc .spr-hit:focus-visible{fill-opacity:.18;stroke-opacity:1;stroke-dasharray:none;outline:none}
/* всплывающее поле правки поверх чертежа */
#spring-calc .spr-inline{
  position:absolute;z-index:5;font-family:var(--mono);font-size:15px;
  padding:3px 6px;border:1px solid var(--calc);border-radius:0;background:#fff;color:var(--calc);
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
#spring-calc .spr-inline:focus-visible{outline:2px solid var(--calc);outline-offset:1px}
#spring-calc .spr-tip{
  font-size:12px;color:var(--ink-2);margin-top:8px;
}
#spring-calc .spr-draw{padding:14px 10px 4px}
#spring-calc .spr-draw svg{display:block;width:100%;height:auto;color:var(--ink)}
#spring-calc .spr-draw text{pointer-events:none}   /* клик по числу попадает в зону правки под ним */
#spring-calc .spr-draw svg + svg{margin-top:10px;border-top:1px dashed var(--rule);padding-top:12px}
#spring-calc .spr-stamp{
  border-bottom:2px solid var(--rule-hard);background:#fff;font-family:var(--mono);
}
#spring-calc .spr-stamp-name{
  padding:8px 10px 5px;font-size:13px;font-weight:700;letter-spacing:.01em;line-height:1.25;
}
#spring-calc .spr-stamp-meta{
  display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;
  padding:0 10px 7px;font-size:11px;color:var(--ink-2);line-height:1.35;
}

/* таблица параметров — как на чертеже пружины по ГОСТ 2.401 */
#spring-calc .spr-params{width:100%;border-collapse:collapse;margin-top:18px;font-size:13.5px}
#spring-calc .spr-params caption{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-2);text-align:left;padding-bottom:6px;
}
#spring-calc .spr-params th{
  text-align:left;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-2);background:var(--paper);
  border:1px solid var(--rule);padding:5px 9px;
}
#spring-calc .spr-params td{border:1px solid var(--rule);padding:5px 9px;vertical-align:baseline}
#spring-calc .spr-params td:last-child{
  font-family:var(--mono);text-align:right;white-space:nowrap;width:1%;
}
#spring-calc .spr-params tr[data-kind=calc] td:last-child{color:var(--calc);font-weight:500}
#spring-calc .spr-params .spr-sec td{
  background:var(--paper);font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
}
#spring-calc .spr-params sub{font-size:.72em}

/* сообщения */
#spring-calc .spr-msgs{margin-top:16px;display:flex;flex-direction:column;gap:1px}
#spring-calc .spr-msg{font-size:13px;padding:8px 11px;border-left:3px solid}
#spring-calc .spr-msg--err{background:var(--err-bg);border-color:var(--err);color:var(--err)}
#spring-calc .spr-msg--warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}

/* действия и спецификация */
#spring-calc .spr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
#spring-calc button{
  font-family:var(--sans);font-size:14px;padding:10px 18px;border-radius:0;cursor:pointer;
  border:1px solid var(--ink);background:var(--ink);color:#fff;
}
#spring-calc button.spr-btn--ghost{background:#fff;color:var(--ink)}
#spring-calc button:disabled{opacity:.35;cursor:not-allowed}
#spring-calc button:focus-visible{outline:2px solid var(--calc);outline-offset:2px}
#spring-calc .spr-spec{margin-top:16px}
#spring-calc textarea{
  width:100%;min-height:150px;font-family:var(--mono);font-size:12px;line-height:1.5;
  border:1px solid var(--rule);border-radius:0;padding:10px;background:#fff;color:var(--ink);resize:vertical;
}
#spring-calc .spr-foot{
  margin-top:18px;padding-top:10px;border-top:1px solid var(--rule);
  font-size:12px;color:var(--ink-2);
}

@media (max-width:1100px){
  #spring-calc{width:100%;max-width:none}
}
/* узкий экран: сначала геометрия и витки, затем чертёж, затем остальное */
@media (max-width:900px){
  #spring-calc .spr-grid{grid-template-columns:1fr}
  #spring-calc #sprFormA,
  #spring-calc #sprFormB,
  #spring-calc .spr-sheet{grid-column:auto;grid-row:auto;position:static}
}
@media (max-width:860px){
  #spring-calc{padding:16px}
  #spring-calc .spr-head{flex-direction:column;gap:4px}
}
@media print{
  #spring-calc{background:#fff;padding:0}
  #spring-calc .spr-grid{grid-template-columns:1fr}
  #spring-calc .spr-panel,#spring-calc .spr-actions,#spring-calc .spr-spec{display:none}
  #spring-calc .spr-sheet{border:0;padding:0}
}

/* ---------- справка по обозначениям ---------- */
#spring-calc .spr-headside{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:flex-end}
#spring-calc .spr-ref-btn{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  padding:7px 13px;border:1px solid var(--rule);background:#fff;color:var(--ink-2);
  border-radius:0;cursor:pointer;
}
#spring-calc .spr-ref-btn:hover,
#spring-calc .spr-ref-btn--on{border-color:var(--ink);color:var(--ink)}
#spring-calc .spr-ref-btn:focus-visible{outline:2px solid var(--calc);outline-offset:2px}
#spring-calc .spr-ref{
  background:var(--card);border:1px solid var(--rule);
  padding:12px 18px;margin-bottom:20px;
  /* панель раскрывается вниз от кнопки; при длинном списке скроллится сама,
     чтобы кнопка «Закрыть» всегда оставалась в поле зрения */
  max-height:min(60vh, 520px);overflow-y:auto;
  scroll-margin-top:16px;
}
#spring-calc .spr-ref-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:-12px;z-index:1;
  background:var(--card);padding:2px 0 8px;margin:-2px 0 4px;
  border-bottom:1px solid var(--rule);
}
#spring-calc .spr-ref-head .spr-legend{border:0;padding:0;margin:0}
#spring-calc .spr-ref-close{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  padding:5px 11px;border:1px solid var(--rule);background:#fff;color:var(--ink-2);
  border-radius:0;cursor:pointer;flex:0 0 auto;
}
#spring-calc .spr-ref-close:hover{border-color:var(--ink);color:var(--ink)}
#spring-calc .spr-ref-close:focus-visible{outline:2px solid var(--calc);outline-offset:2px}
#spring-calc .spr-ref-grid dl{margin:0;column-width:300px;column-gap:34px}
#spring-calc .spr-ref-grid dt{
  float:left;clear:left;min-width:84px;padding:3px 8px 3px 0;
  font-family:'Roboto Condensed','Arial Narrow',sans-serif;font-style:italic;
  font-size:15px;color:var(--calc);white-space:nowrap;
}
#spring-calc .spr-ref-grid dd{
  margin:0;padding:3px 0;overflow:hidden;font-size:13px;
  border-bottom:1px dotted var(--rule);
  break-inside:avoid;
}
@media (max-width:860px){
  #spring-calc .spr-headside{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  #spring-calc *{transition:none!important;animation:none!important}
}