/* ── Компоненты, общие для версий ──────────────────────────────────────────────────────────── */

/* Иллюстрация с выносками поверх (рендер/фото + номера): контейнер в pt, содержимое не обрезается */
.figure { position: absolute; overflow: visible; }
.figure > img, .figure > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }

/* Выноска-номер — как в чертежах 475: круг 12.94 pt, Finval-синий #1B74B2, Lato Bold 8 pt белым.
   Ставится центром в точку: <span class="callout" style="left:Xpt;top:Ypt">1</span> внутри .figure */
.callout {
  position: absolute; width: 12.94pt; height: 12.94pt; margin: -6.47pt 0 0 -6.47pt;
  border-radius: 50%; background: var(--callout, #1b74b2); color: #fff;
  font: 700 8pt/12.94pt 'Lato'; text-align: center; letter-spacing: 0; z-index: 2;
}
/* Линия-указатель выноски (тонкая, как в чертежах): SVG поверх рисунка */
.figure svg.leaders { overflow: visible; pointer-events: none; }
.figure svg.leaders line, .figure svg.leaders path { stroke: var(--callout, #1b74b2); stroke-width: 0.5; fill: none; }

/* Плашка «ждём материал от клиента» — видна в вёрстке и в PDF, чтобы не потерялась */
.pending {
  position: absolute; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 0.75pt dashed #e0a100; background: rgba(255, 196, 0, .08); color: #8a6300;
  font: 600 8pt/1.3 'Lato'; padding: 6pt;
}