/* Шаг 4 — конфигурация трассы (canvas) */

.catalog-landing.site-page--metashino #step-metal,
.catalog-landing.site-page--metashino #step-ip,
.catalog-landing.site-page--metashino #step-current,
.catalog-landing.site-page--metashino #step-canvas,
.catalog-landing.site-page--metashino #step-engineer,
.catalog-landing.site-page--metashino #configurator,
.catalog-landing.site-page--metashino #how,
.catalog-landing.site-page--metashino #result-note {
  scroll-margin-top: var(--anchor-offset, calc(var(--header-height, 72px) + 3.5rem));
}

.ms-wizard #quest04 .ms-step4-intro {
  margin: 0 0 1.5rem;
  padding: 0;
}

.ms-wizard #quest04 .ms-step4-intro h3 {
  max-width: none;
  text-align: left;
  line-height: 1.6;
  font-size: 1.05rem;
}

.ms-wizard #quest04 .ms-canvas-hints {
  margin: 0 0 0.75rem;
}

.ms-wizard #quest04 .ms-canvas-status {
  height: auto;
  width: 100%;
}

.ms-wizard #quest04 .ms-canvas-status__text,
.ms-wizard #quest04 #hint_top {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  background: var(--bg-alt, #f5f7f8);
  border: 1px solid var(--border);
  border-radius: var(--site-radius-sm);
  font-family: "PT Sans", sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: left;
}

.ms-wizard #quest04 #hint_container {
  width: 100%;
  max-width: none;
}

.ms-wizard #quest04 .ms-canvas-workspace {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(200px, 260px);
  gap: 1rem;
  align-items: start;
  background: var(--bg-alt, #f5f7f8) !important;
  border-radius: var(--site-radius-sm);
  padding: 1.25rem 1rem !important;
  margin: 0 !important;
}

.ms-wizard #quest04 .ms-canvas-toolbar {
  position: relative;
  padding: 0;
  width: auto;
  margin: 0;
}

.ms-wizard #quest04 .ms-canvas-toolbar ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  min-height: 100%;
}

.ms-wizard #quest04 .ms-canvas-toolbar__clear {
  margin-top: auto;
}

.ms-wizard #quest04 .ms-canvas-stage {
  display: block;
  max-width: 100%;
  max-height: 700px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--border) !important;
  border-radius: var(--site-radius-sm) !important;
  background: #fff !important;
  box-shadow: var(--shadow);
}

/* Fabric Canvas: do not CSS-scale <canvas> — breaks offsetX/draw coords */
.ms-wizard #quest04 .ms-canvas-stage canvas,
.ms-wizard #quest04 .ms-canvas-stage .canvas-container {
  display: block;
  max-width: none;
  width: 1000px;
  height: 700px;
}

.ms-wizard #quest04 .ms-canvas-sidebar {
  width: auto;
  padding: 0;
}

.ms-wizard #quest04 #svodka {
  width: 100% !important;
  max-width: 260px;
  font-size: 0.92rem !important;
}

.ms-wizard #quest04 .arrow-hint {
  left: calc(100% + 0.75rem);
  width: min(14rem, 40vw);
  font-family: "PT Sans", sans-serif;
  font-size: 0.85rem;
  line-height: 1.4;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--site-radius-sm);
  padding: 0.6rem 0.75rem;
  box-shadow: var(--shadow);
}

@media (max-width: 1100px) {
  .ms-wizard #quest04 .ms-canvas-workspace {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  .ms-wizard #quest04 .ms-canvas-sidebar {
    grid-column: 1 / -1;
  }

  .ms-wizard #quest04 #svodka {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .ms-wizard #quest04 .ms-canvas-workspace {
    grid-template-columns: 1fr;
  }

  .ms-wizard #quest04 .ms-canvas-toolbar ul {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ms-wizard #quest04 .ms-canvas-toolbar__clear {
    margin-top: 0;
    margin-left: auto;
  }
}