/* /build page styles (CAND-1387). Loads on top of preview.css, which already
   owns the topbar, state cards, buttons, spinner and form shell. Only what is
   specific to the Instagram demo builder lives here. */

/* ── Entry ────────────────────────────────────────────────────────── */
.build-entry-form {
  max-width: 460px;
  margin: 0 auto;
}
.build-entry-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
  margin: 0 0 6px;
}

.handle-row {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #D1D5DB;
  border-radius: 12px;
  padding: 0 12px;
  background: #FFFFFF;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.handle-row:focus-within {
  border-color: #FB5405;
  box-shadow: 0 0 0 3px rgba(251, 84, 5, 0.14);
}
.handle-at {
  font-size: 17px;
  font-weight: 600;
  color: #9CA3AF;
}
.handle-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 17px; /* 16px+ so iOS Safari does not zoom on focus */
  padding: 13px 0;
  color: #1A1A1A;
}

.consent-line {
  font-size: 13px;
  line-height: 1.55;
  color: #4B5563;
  background: #F7F7F8;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 16px 0;
}

.disclaimer {
  margin-top: 16px;
  line-height: 1.5;
}

.build-entry-form .btn-primary {
  display: block;
  width: 100%;
}
.build-entry-form .btn-secondary {
  display: block;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  box-sizing: border-box;
}
.build-entry-form .btn-primary:disabled {
  background: #D1D5DB;
  cursor: not-allowed;
  transform: none;
}

.preview-card--friendly {
  background: #FFF8F4;
  border-color: #FFD9C7;
}

/* ── Building: the reveal (CAND-1769) ─────────────────────────────── */
/* A rehearsal of the page this state redirects to, so every measurement here
   is s.html's own (.cover, .logo-circle, .header-row, .feature-wrapper,
   .feature-card, .icon-circle, .feature-label): the visitor watches the real
   layout fill in, and the hand-off to s.html is a cut between two frames of
   the same page rather than between two different screens. s.html's page
   wrapper is 500px wide with its body in the system font, so the reveal is too. */
.preview-state--reveal {
  max-width: 500px;
  padding: 0;
  background: #FFFFFF;
}

.reveal {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #000000;
  background: #FFFFFF;
}

/* Cover: s.html .cover. The gradient is what shows until the first photo
   arrives, and what a venue with no usable photo keeps. */
.reveal-cover {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(251, 84, 5, 0.30), rgba(251, 84, 5, 0.10));
}
/* The photos stack: the newest is appended on top and fades in over the one
   before it, which stays opaque underneath, so the cross-fade never dips back
   through the gradient. */
.reveal-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.reveal-cover-img.is-shown { opacity: 1; }

/* Logo + title row: s.html .header-row / .logo-circle / .header-text. */
.reveal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 16px 0;
  position: relative;
  z-index: 2;
}
.reveal-logo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: -55px;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background: #FFFFFF;
  position: relative;
  z-index: 3;
}
/* iOS systemGray5, which is what the real page shows while it loads its own
   copy of this picture. */
.reveal-logo.is-placeholder { background: #E5E5EA; }
.reveal-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}
.reveal-logo-img.is-shown { opacity: 1; }

.reveal-header-text {
  flex: 1;
  min-width: 0;
}
.reveal-title-slot, .reveal-tagline-slot { display: block; }
.reveal-title {
  display: block;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.reveal-tagline {
  display: block;
  font-size: 15px;
  color: #6C6C70;
  margin-top: 2px;
  line-height: 1.3;
}
.is-landed > * { animation: reveal-fade-in 0.45s ease-in-out; }

/* Placeholder bars. The title and tagline bars carry the margins that make
   them the same height as the text they stand in for (22px/1.25 = 27.5px;
   15px/1.3 + 2px = 21.5px), so the row does not jump when the name lands. */
.reveal-bar {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  border-radius: 999px;
  background: #E5E5EA;
}
.reveal-bar--title { width: 150px; height: 20px; margin: 4px 0; }
.reveal-bar--tagline { width: 110px; height: 12px; margin: 4px 0 6px; }
.reveal-bar--label { width: 140px; height: 14px; }

/* Cards: s.html .feature-grid / .feature-wrapper / .feature-card. Each row is
   the real card's chrome from the first frame; only its contents change. */
.reveal-cards { padding: 20px 16px 4px; }
.reveal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
}
.reveal-card .icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #E5E5EA;
}
/* s.html's own Google row: the G on a plain white circle with a hairline, never
   a tinted feature row. build.js sets the other five circles' tint inline from
   REVEAL_CARDS, exactly as featureCardHtml does. */
.reveal-card.is-google .icon-circle {
  background: #FFFFFF;
  border: 1px solid rgba(128, 128, 128, 0.15);
  color: inherit;
}
.reveal-card .icon-circle svg { width: 20px; height: 20px; }
.reveal-card .feature-label {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.reveal-card.is-revealed > * { animation: reveal-fade-in 0.35s ease-out; }

@keyframes reveal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Shimmer: one band of light travelling left to right over everything that is
   still a placeholder, until the create returns. A settled page that still
   shimmers reads as "still working". */
.reveal.is-shimmering .reveal-cover::after,
.reveal.is-shimmering .reveal-logo.is-placeholder::after,
.reveal.is-shimmering .reveal-bar::after,
.reveal.is-shimmering .reveal-card:not(.is-revealed) .icon-circle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0) 100%);
  animation: reveal-sweep 1.4s linear infinite;
  pointer-events: none;
}
@keyframes reveal-sweep {
  from { transform: translateX(-220%); }
  to   { transform: translateX(220%); }
}

/* Status: the one line a screen reader gets, s.html's secondary text colour.
   Sticky to the bottom of the viewport while the skeleton is taller than the
   screen - six cards under a 200px cover are, on most phones - so the line
   that says what is happening is never the thing that has scrolled away. Once
   the page fits it sits where the Clip puts it, under the last card. */
.reveal-status {
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: 16px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  font-size: 15px;
  line-height: 1.4;
  color: #6C6C70;
  text-align: center;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* The wash: the same band, once, in the brand colour, across the whole
   viewport, then the redirect. Unhidden by settleReveal; the animation starts
   the moment it is displayed. */
.reveal-wash {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
}
.reveal-wash[hidden] { display: none; }
.reveal-wash::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 70%;
  background: linear-gradient(90deg, rgba(251, 84, 5, 0) 0%, rgba(251, 84, 5, 0.28) 50%, rgba(251, 84, 5, 0) 100%);
  animation: reveal-sweep 0.65s ease-out 1 both;
}

/* Reduce motion, read once at submit by build.js and carried as a class: no
   shimmer, no wash, no cover cycling (only candidate 0 is fetched), and every
   cross-fade becomes a cut. The rows still land on the same cadence - the
   state changes are the content, only the motion goes. */
.reveal.is-reduced,
.reveal.is-reduced *,
.reveal.is-reduced *::after {
  transition: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-wash { display: none; }
  .reveal,
  .reveal *,
  .reveal *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* ── Brand accent override (CAND-1461) ────────────────────────────── */
/* preview.css hardcodes the site blue in its shared shell. This file only
   loads on /build, so overriding here repaints the funnel orange without
   touching /preview, which is linked from the landing page in three places
   and still blue. If /preview ever moves to orange too, delete this block
   and change preview.css instead. */
a, .text-link { color: #FB5405; }
.btn-primary { background: #FB5405; }
.btn-primary:hover { background: #D63F04; }
.btn-secondary { color: #FB5405; }
.spinner { border-top-color: #FB5405; }