/* ============================================================
   EMBED — chrome for /embed/* pages shown inside an iframe
   ------------------------------------------------------------
   Deliberately excludes the site header, footer, ad zones and
   related-guides block. The only outbound link is the
   "Powered by" credit, which is the point of the embed.
   ============================================================ */

.embed-body {
  background: var(--c-bg);
  min-height: 0;                 /* let the frame size to content */
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}

.embed-shell {
  max-width: 640px;
  margin: 0 auto;
}

.embed-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--c-text);
  margin: 0 0 var(--sp-1);
}

.embed-intro {
  font-size: var(--text-sm);
  color: var(--c-text-secondary);
  margin: 0 0 var(--sp-5);
}

/* The wizard's own nav sits inside the shell. */
.embed-shell .wizard-nav {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* ── Attribution ─────────────────────────────────────────── */
.embed-credit {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--text-xs);
  color: var(--c-text-muted);
}

.embed-credit svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--c-primary);
}

.embed-credit a {
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: none;
}

.embed-credit a:hover,
.embed-credit a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.embed-credit__spacer { margin-left: auto; }

/* Screen-reader live region the wizard writes to; the embed has no
   sidebar to show it in, but the element must exist. */
.embed-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

@media (max-width: 480px) {
  .embed-body { padding: var(--sp-4) var(--sp-3); }
}

/* ── Stepper ─────────────────────────────────────────────── */
/* The horizontal stepper needs roughly the full-width main column to
   fit five labels. An embed is capped at 640px regardless of how wide
   the host sizes the iframe, so the viewport-width media query in
   wizard.css picks the desktop stepper while the container is far too
   narrow for it, and the labels collide. Embeds always use the compact
   progress bar instead. */
.embed-body .stepper-wrap { display: none; }
.embed-body .stepper-mobile {
  display: flex;
  min-height: 56px;      /* reserve space — prevents CLS on first render */
  margin-bottom: var(--sp-4);
}

/* wizard.css pins the nav to the bottom of the viewport under 768px.
   Inside an iframe that traps the buttons over the content, so keep
   them in normal flow. */
.embed-body .wizard-nav {
  position: static;
  bottom: auto;
  box-shadow: none;
  background: none;
  padding: 0;
}

/* The wizard offers to restore saved progress. Inside a third-party
   page that is confusing rather than helpful — and iframe storage is
   partitioned, so it rarely survives anyway. The element stays in the
   DOM because the wizard expects to find it. */
.embed-body #restore-banner {
  display: none !important;
}