/* ============================================================
   canvas.css — стили визуализации (SVG/Canvas)
   Стили применяются к элементам, которые рендереры будут
   генерировать внутри .stage__canvas.
   ============================================================ */

/* ---------- Базовый SVG-контейнер ---------- */
.stage__canvas svg.unfold-svg,
.stage__canvas svg.section-svg,
.stage__canvas svg.sheet-svg {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* фон сцены — лёгкая сетка через pattern рисуется в SVG,
   здесь задаём базовый фон под неё */
.stage__canvas {
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  background-position: -1px -1px;
}

/* ---------- Сечение профиля ---------- */
.section-svg .profile-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.section-svg .vertex-dot {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1.5;
}
.section-svg .seg-letter {
  fill: var(--text);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
}
.section-svg .dim-text {
  fill: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
}

/* ---------- Развёртка ---------- */
.unfold-svg .unfold-fill {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.unfold-svg .centerline {
  fill: none;
  stroke: var(--bend-line, var(--text-muted));
  stroke-width: 1;
  stroke-dasharray: 8 3 1 3;
  opacity: .8;
}
.unfold-svg .bend-line {
  stroke: var(--bend-line, var(--accent));
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
}
.unfold-svg .seg-letter {
  fill: var(--text);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
}
.unfold-svg .dim-label {
  fill: var(--text-faint);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
}
.unfold-svg .dim-line {
  stroke: var(--dim-line, var(--text-faint));
  stroke-width: .8;
}
.unfold-svg .dim-text {
  fill: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

/* ---------- Раскрой листа ---------- */
.sheet-svg .sheet-rect {
  fill: var(--surface-2);
  stroke: var(--accent);
  stroke-width: 1.5;
}
.sheet-svg .sheet-dim {
  fill: var(--accent);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 700;
}
.sheet-svg .sheet-grid {
  stroke: var(--grid-line-strong);
  stroke-width: .5;
}
.sheet-svg .part-rect {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.2;
}
.sheet-svg .part-rect.is-selected {
  stroke: var(--text);
  stroke-width: 2;
}
.sheet-svg .part-label {
  fill: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.sheet-svg .waste-region {
  fill: var(--waste);
  stroke: none;
  pointer-events: none;
}
.sheet-svg .waste-region.is-hidden { display: none; }
.sheet-svg .part-label.is-hidden { display: none; }
.sheet-svg .part-dim {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  text-anchor: middle;
}

/* ---------- Общие помощники для SVG ---------- */
.svg-axis { stroke: var(--text-faint); stroke-width: 1; }
.svg-axis-tick { stroke: var(--text-faint); stroke-width: 1; }
.svg-axis-text {
  fill: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
}
.svg-cursor-grab { cursor: grab; }
.svg-cursor-grabbing { cursor: grabbing; }

/* ---------- Скелетон загрузки ---------- */
.skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius);
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- Мини-схема профиля в панели ввода ---------- */
.profile-schema-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  min-height: 90px;
}
.profile-schema {
  width: auto;
  height: 70px;
  max-width: 100%;
  display: block;
}
.profile-schema text {
  user-select: none;
}