/* Interactive Dinghy Diagram */

.idd-diagram-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 0.9fr);
  gap: 1.5rem;
  align-items: start;
  margin: 1.5rem 0;
}

/* IMPORTANT: remove overflow blocking sticky */
.idd-diagram-stage {
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 12px;
  padding: 1rem;
  overflow: visible; /* CHANGED from hidden */
}

.idd-diagram-stage svg {
  width: 100%;
  height: auto;
  display: block;
}

/* STICKY PANEL */
.idd-diagram-panel {
  border: 1px solid #ddd;
  padding: 1rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  max-width: 280px;
}

/* Panel content */
.idd-panel-title {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.idd-panel-content p {
  margin-top: 0;
}

/* Interactive parts */
.idd-part {
  cursor: pointer;
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
  transform-origin: center center;
}

.idd-part.is-hovered {
  opacity: 0.85;
  filter: brightness(1.05);
}

.idd-part.is-selected {
  opacity: 1;
  filter: brightness(1.1);
}

/* Stroke animation */
.idd-part path,
.idd-part polygon,
.idd-part line,
.idd-part polyline,
.idd-part ellipse,
.idd-part circle,
.idd-part rect {
  transition: stroke 0.2s ease, stroke-width 0.2s ease, fill 0.2s ease;
}

.idd-part.is-hovered path,
.idd-part.is-hovered polygon,
.idd-part.is-hovered line,
.idd-part.is-hovered polyline,
.idd-part.is-hovered ellipse,
.idd-part.is-hovered circle,
.idd-part.is-hovered rect {
  stroke: #1d5fd1 !important;
  stroke-width: 3px !important;
}

.idd-part.is-selected path,
.idd-part.is-selected polygon,
.idd-part.is-selected line,
.idd-part.is-selected polyline,
.idd-part.is-selected ellipse,
.idd-part.is-selected circle,
.idd-part.is-selected rect {
  stroke: #1d5fd1 !important;
  stroke-width: 3.5px !important;
  fill-opacity: 0.9;
}

.idd-diagram-meta {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #666;
}

/* MOBILE */
@media (max-width: 900px) {
  .idd-diagram-wrapper {
    grid-template-columns: 1fr;
  }

  .idd-diagram-panel {
    position: static;
    top: auto;
    max-width: 100%;
  }
}