/* ------------------------------------------------------------------
   Чертежи для страницы — тот же язык, что в аппкасте и на экране
   «Что нового» (installer/whatsnew/blueprint.html, карточка 243.2).

   Геометрия оттуда же и трогать её наугад не стоит: изометрия без
   перспективы rotateX(59deg) rotateZ(-45deg). Следствия, которые
   решают всю раскладку внутри поля:
     +Z  — строго вверх по экрану (шаг стопки виден как z·sin59°);
     +X  — вправо-вверх, +Y — вправо-вниз;
     X и Y вместе (translate(d,d)) — строго вправо на 1.414·d.
   CSS scale() двумерный и Z НЕ масштабирует, поэтому шаг в стопке
   считается до scale — числа подобраны под это.

   Поле нарисовано в фиксированном холсте 1120x400 (у релизной
   картинки 620x236, подписи 8.5px — на ширине страницы они бы
   потребовали пересчёта всей геометрии). Узкий экран уменьшает
   ВЕСЬ чертёж ступенями --s, как окна кита: scale(calc(100vw/…))
   невалиден, длина на число не делится.
   ------------------------------------------------------------------ */

.vb-plate {
  --w: 1120;
  --h: 400;
  --s: 1;
  --line: rgba(29, 27, 23, .5);
  --thin: rgba(29, 27, 23, .3);
  --fill: rgba(254, 253, 250, .4);
  --mk: oklch(0.91 0.17 98);
  --ink-plate: rgba(29, 27, 23, .62);
  --ink-plate-soft: rgba(29, 27, 23, .4);

  position: relative;
  width: 100%;
  height: calc(var(--h) * 1px * var(--s));
  overflow: hidden;
  border-radius: 14px;
}

.vb-field {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
  transform: scale(var(--s));
  transform-origin: top left;
  background: linear-gradient(155deg, #e6d7ae 0%, #f0e3c0 45%, #eadfd2 100%);
  overflow: hidden;
}

.vb-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(29, 27, 23, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 27, 23, .04) 1px, transparent 1px);
  background-size: 36px 36px;
}

.vb-fig {
  position: absolute;
  left: 46px;
  top: 34px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .18em;
  color: rgba(29, 27, 23, .42);
}

/* Отметка «этого ещё нет»: у чертежа к будущему свой знак, иначе
   рисунок неотличим от рисунка к работающему. */
.vb-fig--soon::after {
  content: 'ЭТОГО ЕЩЁ НЕТ';
  display: block;
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(29, 27, 23, .3);
}

.vb-scene { position: absolute; inset: 0; }
.vb-lines { position: absolute; inset: 0; }

.vb-iso {
  position: absolute;
  width: 260px;
  height: 180px;
  transform-style: preserve-3d;
}

/* Пластина — лист, плита, лежащая в изометрии */
.vb-pl {
  position: absolute;
  inset: 0;
  border: 3px solid var(--thin);
  border-radius: 22px;
  background: var(--fill);
}

.vb-pl--solid {
  border-color: var(--line);
  border-width: 3.6px;
  background: rgba(254, 253, 250, .72);
  padding: 30px 34px;
}

.vb-pl--outline {
  border-color: rgba(29, 27, 23, .34);
  border-width: 3px;
  border-style: dashed;
  background: none;
  padding: 30px 34px;
}

.vb-pl--query {
  border-color: var(--line);
  padding: 30px 34px;
}

.vb-bar { height: 14px; border-radius: 7px; background: rgba(29, 27, 23, .13); margin-bottom: 15px; }
.vb-bar:last-child { margin-bottom: 0; }
.vb-mk { height: 16px; border-radius: 4px; background: var(--mk); margin-bottom: 15px; }
.vb-mk:last-child { margin-bottom: 0; }

.vb-find {
  height: 60px;
  border: 3.4px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 26px;
}
.vb-mag { width: 24px; height: 24px; border: 3.6px solid var(--line); border-radius: 50%; flex: none; }
.vb-qb { height: 17px; width: 150px; border-radius: 9px; background: rgba(29, 27, 23, .34); }

/* Подписи: обычными словами, не нашим рабочим языком */
.vb-lbl {
  position: absolute;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--ink-plate);
  white-space: nowrap;
}
.vb-cnt {
  position: absolute;
  text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-plate-soft);
  white-space: nowrap;
}
.vb-lbl--right, .vb-cnt--right { text-align: left; }

/* Ступени масштаба: холст один, экраны разные */
@media (max-width: 1240px) { .vb-plate { --s: .84; } }
@media (max-width: 1040px) { .vb-plate { --s: .74; } }
@media (max-width: 900px)  { .vb-plate { --s: .64; } }
@media (max-width: 760px)  { .vb-plate { --s: .54; } }
@media (max-width: 640px)  { .vb-plate { --s: .46; } }
@media (max-width: 520px)  { .vb-plate { --s: .38; } }
@media (max-width: 430px)  { .vb-plate { --s: .32; } }

/* Дорожка: полоса вместо листа — у неё настоящая высота, а не squash,
   иначе рамка и скругление поплывут вместе с содержимым. */
.vb-pl--track {
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding: 0 30px;
}
.vb-pl--track .vb-bar { margin-bottom: 0; height: 12px; }

/* Узкий экран: номер на чертеже вместо подписи с выноской */
.vb-num {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1.6px solid rgba(29, 27, 23, .45);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 17px;
  color: rgba(29, 27, 23, .62);
  background: rgba(254, 253, 250, .45);
}

/* Подписи к чертежу на узком экране — обычным списком под рисунком,
   номера в нём те же, что стоят на самом чертеже. Цвет берётся от
   родителя (currentColor + прозрачность), чтобы список одинаково
   читался и на графите страницы, и на бумаге стенда. */
.vb-legend {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 46ch;
}
.vb-legend li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.5;
  color: currentColor;
  opacity: .68;
}
.vb-legend i {
  flex: none;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 9px;
  opacity: .8;
}
.vb-legend em { font-style: normal; opacity: .74; }

/* ------------------------------------------------------------------
   Плоские чертежи (РИС. 01, 03, 04). Штрихи, заливки и шрифты живут
   здесь, а не в разметке SVG: так рисунок в скрипте читается как
   геометрия, а не как простыня атрибутов.
   ------------------------------------------------------------------ */
.vb-draw { position: absolute; inset: 0; width: 100%; height: 100%; }

.vb-draw .kt  { fill: none; stroke: rgba(29, 27, 23, .34); stroke-width: 1.3; }
.vb-draw .kd  { fill: none; stroke: rgba(29, 27, 23, .34); stroke-width: 1.3;
                stroke-dasharray: 5 5; }
.vb-draw .kf  { fill: rgba(254, 253, 250, .42); stroke: rgba(29, 27, 23, .3); stroke-width: 1.3; }
.vb-draw .kfs { fill: rgba(254, 253, 250, .78); stroke: rgba(29, 27, 23, .5); stroke-width: 1.8; }
.vb-draw .kn  { fill: rgba(29, 27, 23, .55); }
.vb-draw .kdn { fill: none; stroke: rgba(29, 27, 23, .42); stroke-width: 1.6; stroke-dasharray: 4 4; }
.vb-draw .wv  { stroke: rgba(29, 27, 23, .2); stroke-width: 1.5; stroke-linecap: round; }
.vb-draw .wvs { stroke: rgba(29, 27, 23, .34); stroke-width: 1.6; stroke-linecap: round; }

.vb-draw text { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.vb-draw .t   { font-size: 13px; letter-spacing: .15em; fill: rgba(29, 27, 23, .62); }
.vb-draw .tm  { font-size: 12px; letter-spacing: .1em;  fill: rgba(29, 27, 23, .55); }
.vb-draw .ts  { font-size: 11px; letter-spacing: .1em;  fill: rgba(29, 27, 23, .44); }

/* Подпись поверх линии не прячет её под плашкой: обводка цветом поля
   разрывает линию ровно по контуру букв. */
.vb-draw .halo { paint-order: stroke; stroke: #efe3c2; stroke-width: 6; stroke-linejoin: round; }

/* Жёлтое — только след руки человека */
.vb-draw .y    { fill: oklch(0.91 0.17 98); }
.vb-draw .yd   { fill: none; stroke: oklch(0.91 0.17 98); stroke-width: 1.6; stroke-dasharray: 4 4; }
.vb-draw .yl   { fill: none; stroke: oklch(0.91 0.17 98); stroke-width: 3; }
.vb-draw .yl-h { fill: oklch(0.91 0.17 98); }

/* Выноски изометрического чертежа */
.vb-lines .vb-lead { fill: none; stroke: rgba(29, 27, 23, .34); stroke-width: .9; }
.vb-lines .vb-dot  { fill: rgba(29, 27, 23, .34); }
.vb-lines .vb-axis { fill: none; stroke: rgba(29, 27, 23, .2); stroke-width: .9;
                     stroke-dasharray: 2 3.5; }