/*
 * Namespaced posture illustration overlay.
 * The existing host supplies position: relative and its own lifecycle.
 */

.plank-illustration {
  align-items: center;
  background: #f7faf7;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  padding: 14px 18px 22px;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.plank-illustration::after {
  border: 1px solid rgba(92, 131, 108, .18);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.plank-illustration-svg {
  display: block;
  height: auto;
  max-height: min(72%, 190px);
  max-width: 520px;
  position: relative;
  width: min(88%, 430px);
  z-index: 1;
}

.plank-illustration-caption,
.plank-illustration-note {
  color: #526a5c;
  display: block;
  line-height: 1.4;
  position: relative;
  text-align: center;
  z-index: 1;
}

.plank-illustration-caption {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  margin-top: 2px;
}

.plank-illustration-note {
  font-size: 12px;
  max-width: 34em;
  padding: 0 8px;
}

.plank-svg-floor {
  fill: none;
  stroke: #b9cfc1;
  stroke-linecap: round;
  stroke-width: 3;
}

.plank-svg-support {
  fill: none;
  stroke: #8bb8a0;
  stroke-linecap: round;
  stroke-width: 7;
}

.plank-svg-wall-mark {
  fill: none;
  stroke: #b6d1c1;
  stroke-width: 2;
}

.plank-svg-body,
.plank-svg-limb {
  fill: none;
  stroke: #28654b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
}

.plank-svg-limb {
  stroke-width: 5;
}

.plank-svg-head {
  fill: #28654b;
}

.plank-svg-pad {
  fill: #d9ebdf;
  stroke: #8bb8a0;
  stroke-width: 2;
}

@media (max-width: 360px) {
  .plank-illustration {
    padding: 10px 8px 18px;
  }

  .plank-illustration-svg {
    max-height: 66%;
    width: 96%;
  }

  .plank-illustration-note {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plank-illustration,
  .plank-illustration-svg {
    transition: none;
  }
}

/* Replace the ordinary unavailable-video placeholder while a diagram is mounted. */
#demoFallback:has(.plank-illustration) > :not(.plank-illustration),
#dFallback:has(.plank-illustration) > :not(.plank-illustration) { display: none; }