/* ===== Embed mode (SurveyMonkey iframe) ===== */

#stage-embed { background: var(--white); }

.embed-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  color: var(--white);
  padding: 0.55rem 1rem;
  padding-top: max(0.55rem, env(safe-area-inset-top));
}
.bar-title { font-weight: 800; letter-spacing: 0.04em; }

/*
 * The iframe is sized taller than the survey's content (--survey-height) so the
 * survey never scrolls internally — our host scrolls instead. That keeps overlay
 * anchors tracking the survey content 1:1. Anchor values are measured against
 * the live survey at a 1024px-wide viewport (see docs/RESEARCH.md); tune the
 * --coach-* vars if SurveyMonkey's layout shifts.
 */
.embed-frame-host {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/*
 * The coach mark's left edge anchors just right of viewport CENTER:
 * SurveyMonkey's fluid layout keeps the dropdown's right edge hugging the
 * center at every width we've measured (1024: 507/512, 1180: ~567/590), so
 * center + a small gap stays close to the control without ever overlapping
 * it, at any plausible iPad width.
 */
.embed-canvas {
  position: relative;
  --survey-height: 1400px;
  --coach-top: 385px;
  --coach-gap: 26px;
}
.embed-canvas iframe {
  display: block;
  width: 100%;
  height: var(--survey-height);
  border: 0;
}

.embed-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* taps pass straight through to the survey */
}
.coach-mark {
  position: absolute;
  top: var(--coach-top);
  left: calc(50% + var(--coach-gap));
  max-width: 26rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 14px;
  padding: 0.75em 1.1em;
  box-shadow: 0 8px 24px rgba(22, 65, 78, 0.35);
  animation: coach-nudge 2.2s ease-in-out infinite;
}
/* left-pointing arrow aimed at the dropdown */
.coach-mark::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  border: 9px solid transparent;
  border-right-color: var(--ink);
  border-left-width: 5px;
}
.coach-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.03em;
}
.coach-area {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
}
@keyframes coach-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-7px); }
}

/* Scroll hint: compact round badge in the bottom-left gutter (survey content
 * starts ~215px in, so a small circle never covers it), tappable, and hidden
 * automatically once the student is near the bottom (Submit visible). */
.scroll-hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 10;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: 50%;
  font-size: 1.4rem;
  box-shadow: 0 5px 14px rgba(25, 179, 184, 0.45);
}
.scroll-hint-arrow {
  display: inline-block;
  animation: hint-bob 1.4s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}