/* embed/easy-prompt.css — slim card, one question at a time.
 *
 * Lives inside an iframe on third-party sites, so we don't load style.css
 * or the canonical easy-prompt.css. Everything is in this file.
 *
 * Layout: a single card (max ~360px wide) with a header (title + back +
 * progress bar), a body slot that renders one step at a time, and a footer
 * link back to the canonical product. Designed to fit in a blog sidebar or
 * between paragraphs without overwhelming the host page.
 */

:root {
  color-scheme: dark;

  --bg:           #050a05;
  --bg-card:      #0a0f0a;
  --bg-deep:      #000;
  --green:        #00ff66;
  --green-bright: #00ff41;
  --green-soft:   #c8e6c8;
  --green-muted:  #1a3a1a;
  --green-line:   #2a5a2a;
  --text-muted:   #7a8a7a;
  --warn:         #ff6666;

  --tier-godmode:      #00ff41;
  --tier-godmode-plus: #00ffaa;
  --tier-one-shot:     #ffaa00;
  --tier-orchestra:    #ff3366;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--green-soft);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.ep-embed-body {
  /* No min-height: when iframed by a parent that auto-resizes via the
     postMessage hook below, the body should wrap tightly around the card
     so the parent measures actual content height (not viewport height).
     No padding either, so the card touches the iframe edges and the
     parent doesn't see a "double box" around the widget. Standalone
     visits still look fine because the card carries its own border. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
}

/* ─── Card shell ───────────────────────────────────────────────────────── */

.ep-embed-card {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--green-line);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 255, 102, 0.04), 0 8px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ep-embed-card-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--green-muted);
  background: linear-gradient(180deg, rgba(0,255,102,0.04), transparent);
}

.ep-embed-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ep-embed-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--green-muted);
  border-radius: 4px;
  color: var(--green-soft);
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.ep-embed-back:hover {
  border-color: var(--green);
  color: var(--green);
}

.ep-embed-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.02em;
}

/* Progress dots: one per step, the current step is highlighted. */
.ep-embed-progress {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.ep-embed-progress-dot {
  flex: 1;
  height: 3px;
  background: var(--green-muted);
  border-radius: 2px;
  transition: background 0.15s ease;
}
.ep-embed-progress-dot.is-done    { background: var(--green-line); }
.ep-embed-progress-dot.is-current { background: var(--green); }

/* ─── Live brief (between progress bar and step body) ────────────────── */

.ep-embed-live-prompt {
  padding: 12px 16px 10px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--green-muted);
}

.ep-embed-prompt-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: #fff;
  word-spacing: 0.04em;
}

.ep-embed-prompt-word              { color: #fff; }
.ep-embed-prompt-word.is-filled    { color: var(--green); font-weight: 600; }
.ep-embed-prompt-word.is-empty     {
  color: var(--text-muted);
  border-bottom: 1px dashed var(--green-line);
  padding-bottom: 1px;
  font-style: italic;
}

/* ─── Card body (per-step) ─────────────────────────────────────────────── */

.ep-embed-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ep-embed-step-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ep-embed-step-question {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--green-soft);
}

/* ─── Option list (used for templates, dropdowns, tiers) ───────────────── */

.ep-embed-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ep-embed-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--green-muted);
  border-radius: 4px;
  color: var(--green-soft);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.06s ease;
}
.ep-embed-option:hover:not(:disabled) {
  border-color: var(--green);
  background: rgba(0, 255, 102, 0.04);
}
.ep-embed-option:active:not(:disabled) {
  transform: translateY(1px);
}
.ep-embed-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ep-embed-option-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ep-embed-option-label {
  font-weight: 600;
  color: var(--green-soft);
}
.ep-embed-option-desc {
  font-size: 11px;
  color: var(--text-muted);
}
.ep-embed-option-aside {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}
.ep-embed-option-aside.is-price {
  color: var(--green);
  font-weight: 600;
}
.ep-embed-option-aside.is-soon {
  color: var(--tier-orchestra);
  font-style: italic;
}
.ep-embed-option-aside.is-na {
  color: var(--warn);
}

/* Tier rows have a colour bar on the left to match the canonical site. */
.ep-embed-option.is-tier {
  position: relative;
  padding-left: 14px;
}
.ep-embed-option.is-tier::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tier-color, var(--green));
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* ─── Custom-text input (under each option list) ──────────────────────── */

.ep-embed-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--green-muted);
}

.ep-embed-custom-label {
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.ep-embed-custom-input {
  flex: 1 1 60%;
  min-width: 0;
  background: var(--bg-deep);
  border: 1px solid var(--green-muted);
  border-radius: 4px;
  color: var(--green-soft);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
}
.ep-embed-custom-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0, 255, 102, 0.18);
}

.ep-embed-custom-next {
  flex: 0 0 auto;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--green-muted);
  border-radius: 4px;
  color: var(--green-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ep-embed-custom-next:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green);
}
.ep-embed-custom-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.ep-embed-custom.is-flagged .ep-embed-custom-input {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px rgba(255, 102, 102, 0.2);
}

.ep-embed-custom-warning {
  flex: 1 1 100%;
  margin: 0;
  padding: 6px 8px;
  background: rgba(255, 102, 102, 0.08);
  border: 1px solid rgba(255, 102, 102, 0.35);
  border-radius: 4px;
  color: var(--warn);
  font-size: 11px;
  line-height: 1.4;
}

.ep-embed-review-flag {
  margin-top: 4px;
}

/* ─── Review step ──────────────────────────────────────────────────────── */

.ep-embed-review-brief {
  background: var(--bg-deep);
  border: 1px solid var(--green-muted);
  border-radius: 4px;
  padding: 12px;
  font-size: 13px;
  color: var(--green-soft);
  line-height: 1.55;
}

.ep-embed-review-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px dashed var(--green-muted);
  padding-top: 10px;
}
.ep-embed-review-meta strong {
  color: var(--green-soft);
  font-weight: 600;
}
.ep-embed-review-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
}

/* ─── OTP / verification block (review step) ───────────────────────────── */

.ep-embed-auth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--green-muted);
  border-radius: 4px;
}

.ep-embed-auth.is-verified {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-color: var(--green);
  background: rgba(0, 255, 102, 0.06);
}

.ep-embed-auth-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ep-embed-auth-email {
  flex: 1;
  font-size: 12px;
  color: var(--green-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-embed-auth-change {
  background: transparent;
  border: 1px solid var(--green-muted);
  color: var(--text-muted);
  border-radius: 3px;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
}
.ep-embed-auth-change:hover {
  border-color: var(--green);
  color: var(--green);
}

.ep-embed-auth-status {
  margin: 0;
  font-size: 12px;
  color: var(--green-soft);
}

.ep-embed-auth-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.ep-embed-auth-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ep-embed-link-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.ep-embed-link-btn:hover:not(:disabled) {
  color: var(--green);
}
.ep-embed-link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
}

.ep-embed-otp-input {
  flex: 1;
  min-width: 0; /* let the input shrink so the Verify button stays inside the card on narrow viewports (320px) */
  background: var(--bg-card);
  border: 1px solid var(--green-muted);
  border-radius: 4px;
  color: var(--green-soft);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 9px 10px;
  outline: none;
}
.ep-embed-otp-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0, 255, 102, 0.18);
}

.ep-embed-otp-verify,
.ep-embed-otp-send {
  flex: 0 0 auto;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--green);
  border-radius: 4px;
  color: var(--green);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ep-embed-otp-verify:hover:not(:disabled),
.ep-embed-otp-send:hover:not(:disabled) {
  background: rgba(0, 255, 102, 0.06);
}
.ep-embed-otp-verify:disabled,
.ep-embed-otp-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ep-embed-auth-error {
  margin: 0;
  font-size: 11px;
  color: var(--warn);
  background: rgba(255, 102, 102, 0.08);
  border: 1px solid rgba(255, 102, 102, 0.35);
  border-radius: 4px;
  padding: 6px 8px;
}

/* ─── Email field (review step) ────────────────────────────────────────── */

.ep-embed-email {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ep-embed-email-label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ep-embed-email-input {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--green-muted);
  border-radius: 4px;
  color: var(--green-soft);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 10px;
  outline: none;
}
.ep-embed-email-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0, 255, 102, 0.18);
}
.ep-embed-email-input.is-invalid {
  border-color: var(--warn);
  box-shadow: 0 0 0 1px rgba(255, 102, 102, 0.2);
}

.ep-embed-email-help {
  font-size: 11px;
  color: var(--text-muted);
}

/* Disabled secondary CTA visual when blocked (email missing/invalid). */
.ep-embed-cta-secondary[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.ep-embed-cta-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* ─── CTAs ─────────────────────────────────────────────────────────────── */

.ep-embed-ctas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.ep-embed-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.06s ease, box-shadow 0.12s ease, background 0.12s ease;
  border: 1px solid transparent;
}

.ep-embed-cta-primary {
  background: var(--green-bright);
  color: #021b08;
  border-color: var(--green-bright);
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.25);
}
.ep-embed-cta-primary:hover { box-shadow: 0 0 18px rgba(0, 255, 65, 0.45); }
.ep-embed-cta-primary:active { transform: translateY(1px); }

.ep-embed-cta-secondary {
  background: transparent;
  color: var(--green-soft);
  border-color: var(--green-muted);
}
.ep-embed-cta-secondary:hover {
  border-color: var(--green);
  color: var(--green);
}

/* ─── Footer ───────────────────────────────────────────────────────────── */

.ep-embed-card-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--green-muted);
  font-size: 11px;
  text-align: center;
  background: var(--bg-deep);
}
.ep-embed-card-foot a {
  color: var(--text-muted);
  text-decoration: none;
}
.ep-embed-card-foot a:hover {
  color: var(--green);
}