/* Snapshot form + post-submit reward sequence (shared across pages).
 * Reward sequence is the sanctioned CSS-browser-frame implementation (HANDOFF §2):
 * NO iframe of the user's site, NO screenshot service. Stub by default;
 * window.INTAKE_ENDPOINT swaps in the real engine intake API (HANDOFF §6). */

/* ---------- form card ---------- */
.snapshot-form { max-width:440px; text-align:left; }
.snapshot-form.is-centered { margin-left:auto; margin-right:auto; }
.field { margin-bottom:16px; }
.field label { display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; }
.field input {
  width:100%; padding:11px 13px; border:1px solid var(--sand-2); border-radius:6px;
  background:var(--paper); color:var(--text);
}
.field input:focus { outline:2px solid var(--accent-deep); outline-offset:1px; border-color:var(--accent-deep); }
.field .err { display:none; color:var(--err); font-size:.8rem; margin-top:5px; }
.field.invalid .err { display:block; }
.field.invalid input { border-color:var(--err); }
.form-note { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
.form-msg { font-size:.85rem; color:var(--ok); margin-top:10px; }

/* ---------- reward overlay ---------- */
.reward-overlay {
  position:fixed; inset:0; z-index:60; background:rgba(16,24,32,.55);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.reward-overlay[hidden] { display:none; }
.reward-card {
  background:var(--paper); border-radius:14px; max-width:860px; width:100%;
  max-height:92vh; overflow:auto; padding:34px; position:relative;
}
.reward-card .close {
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--sand-2); background:var(--paper); cursor:pointer; font-size:1.1rem; color:var(--muted);
}
.reward-card .close:hover { border-color:var(--muted); }
.reward-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:34px; align-items:start; }
@media (max-width:720px){ .reward-grid { grid-template-columns:1fr; gap:24px; } }

.rw .frame-body { padding:18px; display:grid; gap:14px; }
.rw .region { display:grid; gap:8px; border-radius:6px; padding:6px; }
.rw .region.scan { outline:2px solid var(--grey); outline-offset:2px; }
.rw .sk { background:var(--sand-1); border-radius:4px; min-height:12px; }
.rw .sk-nav { display:flex; gap:8px; }
.rw .sk-nav .sk { height:10px; width:52px; }
.rw .sk-nav .sk:first-child { width:84px; background:var(--sand-2); }
.rw .sk-hero { height:64px; }
.rw .sk-sub { height:12px; width:70%; }
.rw .sk-line { height:10px; }
.rw .sk-line.w90 { width:90%; } .rw .sk-line.w80 { width:80%; } .rw .sk-line.w60 { width:60%; }
.rw .sk-cta { height:28px; width:130px; background:var(--sand-2); }
@media (prefers-reduced-motion: no-preference) { .rw.running .sk { animation:rw-pulse 1.6s ease-in-out infinite alternate; } }
@keyframes rw-pulse { from { opacity:1; } to { opacity:.55; } }

.rw .kicker { display:block; margin-bottom:12px; }
.rw h3.seq-title { font-family:var(--font-display); font-size:1.35rem; margin-bottom:22px; }
.rw #stage-list, .rw .stage-list { margin-bottom:6px; }
.rw .stage { display:flex; gap:13px; align-items:center; padding:11px 2px; border-bottom:1px solid var(--rule); }
.rw .stage:last-child { border-bottom:none; }
.rw .mark { width:22px; height:22px; border-radius:50%; border:2px solid var(--rule); flex:none; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:transparent; }
.rw .stage.active .mark { border-color:var(--muted); }
.rw .stage.active .mark::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
@media (prefers-reduced-motion: no-preference){ .rw .stage.active .mark::before { animation:rw-pulse .9s ease-in-out infinite alternate; } }
.rw .stage.done .mark { background:var(--ok); border-color:var(--ok); color:#fff; }
.rw .lbl-text { color:var(--grey); }
.rw .stage.active .lbl-text,.rw .stage.done .lbl-text { color:var(--text); }
.rw .bar { height:4px; background:var(--rule); border-radius:99px; overflow:hidden; margin:22px 0 10px; }
.rw .bar i { display:block; height:100%; width:0; background:var(--accent-deep); transition:width .5s ease; }
.rw .seq-detail { font-size:.82rem; color:var(--muted); min-height:1.4em; }

.rw .done-view h3,.rw .fail-view h3 { font-family:var(--font-display); font-size:1.5rem; margin-bottom:14px; }
.rw .done-view p,.rw .fail-view p { color:var(--muted); margin-bottom:12px; }
.rw .fail-view #fail-msg { color:var(--err); }