/* НейроМиша — формулы площадей и объёмов /spravochnik/ (tools/spravochnik-geometry.mjs).
   Калькулятор первого экрана с рисунком фигуры, рисунки над таблицей формул и
   значки фигур в сводных таблицах. Цвета — токены темы: рисунки те же в
   светлой и тёмной теме. Подключается только на страницах с этими блоками. */

:root{
  --sp-g-fill:rgba(223,153,91,.10);
  --sp-g-hi:rgba(223,153,91,.30);
}
[data-theme="dark"]{
  --sp-g-fill:rgba(240,185,100,.10);
  --sp-g-hi:rgba(240,185,100,.28);
}

/* ── Рисунки ── */
.sp-g-svg{display:block;width:100%;height:auto;overflow:visible;font-family:Manrope,system-ui,sans-serif}
.sp-g-svg .g-fill{fill:var(--sp-g-fill);stroke:none}
.sp-g-svg .g-fill.g-hi{fill:var(--sp-g-hi)}
.sp-g-svg .g-even{fill-rule:evenodd}
.sp-g-svg .g-face{fill:transparent;stroke:none}
.sp-g-svg .g-face.g-sec{fill:var(--sp-g-fill)}
.sp-g-svg .g-l,.sp-g-svg line:not([class]){fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sp-g-svg .g-c{fill:none;stroke:var(--ink);stroke-width:2}
.sp-g-svg .g-thin{stroke-width:1.4}
.sp-g-svg .g-top{fill:var(--sp-g-fill)}
.sp-g-svg .g-h{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:5 4}
.sp-g-svg .g-aux{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:6 4}
.sp-g-svg .g-mark,.sp-g-svg .g-arc{fill:none;stroke:var(--ink-3);stroke-width:1.4}
.sp-g-svg .g-grid{stroke:var(--line-2);stroke-width:1}
.sp-g-svg .g-dot{fill:var(--ink)}
.sp-g-svg .g-node-on{fill:var(--ink)}
.sp-g-svg .g-node-in{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.sp-g-svg .g-t{font-size:17px;font-weight:800;font-style:italic;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round}
/* Подсветка элементов, нужных выбранному способу (калькулятор ставит .on). */
.sp-g-svg .g-l.on,.sp-g-svg .g-c.on,.sp-g-svg .g-aux.on,.sp-g-svg .g-h.on,.sp-g-svg .g-arc.on{stroke:var(--brand);stroke-width:3.2;stroke-dasharray:none}
.sp-g-svg .g-t.on{fill:var(--brand-ink)}
.sp-g-svg .g-face.on{fill:var(--sp-g-hi)}
.sp-g-svg .g-node-on.on{fill:var(--brand)}
.sp-g-svg .g-node-in.on{stroke:var(--brand);fill:var(--sp-g-hi)}
[data-theme="dark"] .sp-g-svg .g-t.on{fill:#F0B964}

/* ── Калькулятор первого экрана ── */
.sp-geo{max-width:880px}
.sp-g-top{display:flex;align-items:flex-end;gap:10px;margin-bottom:10px}
.sp-g-top .sp-g-m{flex:1 1 auto}
.sp-g-top .sp-g-u{flex:0 0 132px}
.sp-geo select{
  font:inherit;font-size:16px;font-weight:700;line-height:1.25;min-height:50px;width:100%;min-width:0;
  padding:10px 34px 10px 12px;border-radius:12px;border:1.5px solid var(--line-2);color:var(--ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;background-color:var(--surface-2);
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 55%,calc(100% - 13px) 55%;background-size:6px 6px;background-repeat:no-repeat;
}
.sp-geo select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
.sp-geo select:disabled{opacity:.5;cursor:default}
.sp-g-body{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px 18px;align-items:start}
.sp-g-grp{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 10px}
.sp-g-grp[hidden],.sp-g-f[hidden],.sp-g-pic[hidden]{display:none}
.sp-g-f{margin:12px 0 0;font-size:18px;line-height:1.5;color:var(--ink)}
.sp-g-f .f{white-space:normal}
.sp-g-fig{padding:6px;border-radius:14px;background:var(--surface-2)}
.sp-g-calc .g-t{font-size:20px}
.sp-g-out{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2)}
.sp-g-out .sp-q-main{font-size:22px}
.sp-g-steps{margin:6px 0 0;padding-left:1.3em;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sp-g-steps li + li{margin-top:2px}
.sp-g-extra{margin:6px 0 0;padding:0;list-style:none;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sp-g-extra li{padding-left:14px;position:relative}
.sp-g-extra li::before{content:"";position:absolute;left:3px;top:.65em;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.sp-g-out sub,.sp-g-steps sub{font-size:.7em}

/* ── Рисунки под таблицей формул ── */
.sp-g-figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:14px 0 0}
.sp-g-figs[data-n="1"]{grid-template-columns:minmax(0,300px)}
.sp-g-figs[data-n="2"]{grid-template-columns:repeat(2,minmax(0,260px))}
.sp-g-card{margin:0;padding:10px 10px 8px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.sp-g-card figcaption{margin-top:6px;font-size:13px;font-weight:700;line-height:1.3;color:var(--ink-3);text-align:center}
.sp-g-go{
  display:inline-flex;align-items:center;margin:4px 0 0;min-height:32px;padding:3px 12px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--surface);color:var(--brand-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.sp-g-go:hover{border-color:var(--brand)}
.sp-g-go[hidden]{display:none}
.sp-geo-sec .sp-t tbody th{min-width:180px}

/* ── Значки фигур в сводной таблице хаба ── */
.sp-g-ic{display:inline-block;width:46px;vertical-align:middle;margin-right:10px}
.sp-geo-hub .sp-t tbody th{white-space:nowrap}
.sp-geo-hub .sp-t tbody th a{font-weight:800}
.sp-g-thumb .g-t{display:none}
.sp-g-thumb .g-l,.sp-g-thumb .g-c{stroke-width:3.2}
.sp-g-thumb .g-aux,.sp-g-thumb .g-h,.sp-g-thumb .g-mark,.sp-g-thumb .g-arc{stroke-width:2.2}

@media(max-width:600px){
  .sp-g-top .sp-g-u{flex-basis:104px}
  .sp-geo select{font-size:15px;padding-right:30px}
  .sp-g-body{grid-template-columns:minmax(0,1fr) 116px;gap:10px}
  .sp-g-grp{grid-template-columns:1fr}
  .sp-g-fig{padding:3px}
  .sp-g-calc .g-t{font-size:26px}
  .sp-g-calc .g-l,.sp-g-calc .g-c{stroke-width:2.6}
  .sp-g-f{font-size:16px}
  .sp-g-out .sp-q-main{font-size:20px}
  .sp-g-steps{font-size:14px}
  .sp-g-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sp-g-figs:not([data-n="1"]):not([data-n="2"]):not([data-n="4"]){grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sp-g-figs .g-t{font-size:22px}
  .sp-g-figs[data-n="1"]{grid-template-columns:minmax(0,1fr)}
  .sp-g-card{padding:6px 6px 5px}
  .sp-g-card figcaption{font-size:12px}
  .sp-geo-sec .sp-t tbody th{min-width:0}
  .sp-geo-hub .sp-t tbody th{white-space:normal}
  .sp-g-ic{width:40px}
}

@media print{
  .sp-g-figs{grid-template-columns:repeat(auto-fill,minmax(34mm,1fr));gap:2mm;margin:2mm 0 0}
  .sp-g-figs[data-n="1"],.sp-g-figs[data-n="2"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-g-card{padding:1mm;border:.5pt solid #b9ad97;break-inside:avoid}
  .sp-g-card figcaption{font-size:7pt;color:#000;margin-top:.5mm}
  .sp-g-svg .g-t{stroke:#fff}
  .sp-g-go{display:none !important}
}