/*
 * Editorial Minimal — survey module styling
 *
 * Every rule is prefixed with .survey-* so this file can never leak into the
 * existing admin chrome. Keep all survey CSS confined here; never cross-apply
 * admin-* tokens to survey-* selectors.
 *
 * Tokens and typography below are the contract with Survey views/components;
 * Task 9.5 in the pairwise-comparison implementation plan lists the required
 * palette and font stacks.
 */

:root {
  --survey-bg: #fdfbf7;
  --survey-ink: #1a1a1a;
  --survey-muted: #8a7a6a;
  --survey-rule: #e8e2d8;
  /* ~20% darker than --survey-rule, used for filled secondary surfaces
     (e.g. Choose buttons) where the rule tone is too washed-out. */
  --survey-rule-strong: #c2b9a8;
  --survey-serif: Georgia, "Iowan Old Style", "Apple Garamond", "Source Serif Pro", "Times New Roman", serif;
  --survey-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
}

/* ── Page shells ───────────────────────────────────────────────────────── */

.survey-landing,
.survey-finish,
.survey-pair {
  background: var(--survey-bg);
  color: var(--survey-ink);
  font-family: var(--survey-sans);
  min-height: 100vh;
}

.survey-landing,
.survey-finish {
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

/*
 * Pair comparison runs full-bleed: the variant cards span the whole viewport
 * so the designs being compared get maximum screen real estate. Header/footer
 * text (progress, hint, undo) stays inside `.survey-pair-shell` so it keeps
 * its readable column width.
 */
.survey-pair {
  padding: 2rem 0;
}

.survey-pair-shell {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* ── Typography ────────────────────────────────────────────────────────── */

.survey-h1,
.survey-h2 {
  font-family: var(--survey-serif);
  font-weight: 400;
  color: var(--survey-ink);
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

.survey-h1 {
  font-size: clamp(1.875rem, 2.5vw + 1rem, 2.75rem);
  line-height: 1.15;
}

.survey-h2 {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.625rem);
  line-height: 1.25;
}

.survey-subtitle,
.survey-resume-hint,
.survey-pair-progress-label,
.survey-pair-label {
  font-family: var(--survey-sans);
  color: var(--survey-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.survey-pill {
  display: inline-block;
  font-family: var(--survey-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--survey-muted);
  border: 1px solid var(--survey-rule);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}

/* ── Rules / dividers ─────────────────────────────────────────────────── */

.survey-divider {
  border: 0;
  height: 1px;
  background: var(--survey-rule);
  margin: 1.75rem 0;
  width: 100%;
  display: block;
}

hr.survey-divider {
  margin: 1.75rem 0;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */

.survey-input-wrapper {
  margin: 1.25rem 0;
}

.survey-input-wrapper input[type="text"] {
  font-family: var(--survey-sans);
  font-size: 1rem;
  color: var(--survey-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--survey-rule);
  padding: 0.5rem 0;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}

.survey-input-wrapper input[type="text"]:focus {
  border-bottom-color: var(--survey-ink);
}

.survey-input-wrapper input[type="text"]::placeholder {
  color: var(--survey-muted);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.survey-btn-primary {
  display: inline-block;
  font-family: var(--survey-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--survey-bg);
  background: var(--survey-ink);
  border: 1px solid var(--survey-ink);
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.survey-btn-primary:hover,
.survey-btn-primary:focus-visible {
  background: var(--survey-bg);
  color: var(--survey-ink);
  outline: none;
}

.survey-btn-primary[disabled],
.survey-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.survey-btn-resume {
  margin-bottom: 0.75rem;
}

.survey-pair-undo-btn {
  background: transparent;
  border: 1px solid var(--survey-rule);
  border-radius: 6px;
  color: var(--survey-muted);
  font-family: var(--survey-sans);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0.4rem 1rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.survey-pair-undo-btn:hover,
.survey-pair-undo-btn:focus-visible {
  background: var(--survey-rule);
  color: var(--survey-ink);
  border-color: var(--survey-muted);
  outline: none;
}

/* ── Pair comparison ───────────────────────────────────────────────────── */

.survey-pair-progress {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.survey-pair-progress-track {
  height: 1px;
  background: var(--survey-rule);
  position: relative;
}

.survey-pair-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--survey-ink);
  transition: width 0.3s ease;
}

.survey-pair-variants {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .survey-pair-variants {
    grid-template-columns: 1fr 1fr;
  }
}

.survey-pair-card {
  background: var(--survey-bg);
  border: 1px solid var(--survey-rule);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/*
 * On narrow viewports trim the card's horizontal padding to ~2% of the
 * screen so the HTML preview itself can claim virtually all of the width
 * — vertical chrome (top/bottom padding) stays so the label and Choose
 * button still have breathing room.
 */
@media (max-width: 767px) {
  .survey-pair-card {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

.survey-pair-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--survey-ink);
}

.survey-pair-choose {
  align-self: stretch;
  display: inline-block;
  font-family: var(--survey-sans);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* `!important` keeps Tailwind's preflight `button { color: inherit }`
     from creeping in on certain build orders / cache states. */
  color: #000 !important;
  background: var(--survey-rule-strong);
  border: 1px solid var(--survey-rule-strong);
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  margin-top: auto;
}

.survey-pair-choose:hover,
.survey-pair-choose:focus-visible {
  background: var(--survey-ink);
  /* Mirror the `!important` from the base rule so hover state
     can still override with the inverted, light label colour. */
  color: var(--survey-bg) !important;
  border-color: var(--survey-ink);
  outline: none;
}

.survey-pair-empty {
  text-align: center;
  color: var(--survey-muted);
  padding: 3rem 0;
  font-family: var(--survey-serif);
  font-size: 1.25rem;
}

.survey-pair-hint {
  font-family: var(--survey-sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--survey-muted);
  background: var(--survey-bg);
  border: 1px solid var(--survey-rule);
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
}

.survey-pair-undo {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* ── Resume prompt ────────────────────────────────────────────────────── */

.survey-resume {
  border-top: 1px solid var(--survey-rule);
  border-bottom: 1px solid var(--survey-rule);
  padding: 1rem 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

/* ── Campaign landing contest list ─────────────────────────────────────── */

.survey-readme {
  font-family: var(--survey-sans);
  color: var(--survey-ink);
  line-height: 1.6;
  font-size: 1rem;
  margin: 1rem 0;
}

.survey-contest-list {
  margin: 1.5rem 0;
}

.survey-contest-list-heading {
  font-family: var(--survey-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--survey-muted);
  margin-bottom: 0.75rem;
}

.survey-contest-list-items {
  list-style: none;
  counter-reset: survey-stage;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.survey-contest-list-item {
  counter-increment: survey-stage;
  font-family: var(--survey-serif);
  font-size: 1.125rem;
  color: var(--survey-ink);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--survey-rule);
}

.survey-contest-list-item::before {
  content: counter(survey-stage, decimal-leading-zero) " · ";
  color: var(--survey-muted);
  font-family: var(--survey-sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.survey-contest-list-item:last-child {
  border-bottom: 0;
}

/* ── Finish screen ────────────────────────────────────────────────────── */

.survey-gifts {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.survey-gift {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--survey-rule);
  font-family: var(--survey-sans);
}

.survey-gift:last-child {
  border-bottom: 0;
}

.survey-gift-link {
  color: var(--survey-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.survey-gift-link:hover {
  text-decoration-thickness: 2px;
}

.survey-gift-text {
  color: var(--survey-muted);
}

.survey-finish-actions {
  margin-top: 1.5rem;
}

/* ── Viewers (HTML, site_name) ────────────────────────────────────────── */

.survey-html-viewer,
.survey-site-name-viewer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--survey-rule);
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.survey-html-viewer-iframe {
  width: 100%;
  height: 480px;
  border: 0;
  display: block;
  background: #ffffff;
}

/*
 * Render the variant iframe at a fixed "desktop" viewport (so the page
 * sees a 1900px screen and lays out accordingly) and shrink it visually
 * with a CSS transform so it fills the variant container — be it a wide
 * 19:12 desktop card, a tall portrait card on mobile, or a 9:19.5 phone
 * bezel. Scale and the iframe's pixel height are both computed by the
 * survey-html-scaler Stimulus controller from the frame's measured size.
 */
.survey-html-viewer-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
}

/*
 * Desktop responsive card: 1900×1200 keeps the preview wide enough to
 * showcase modern landing-page layouts at near-actual proportions.
 */
.survey-html-viewer-frame:not(.survey-html-viewer-frame--mobile) {
  aspect-ratio: 1900 / 1200;
}

/*
 * Mobile responsive card: at narrow viewports (DevTools mobile presets,
 * real phones) flip to a portrait aspect close to iPhone 17 Pro (19.5:9)
 * so the design fills the height naturally instead of leaving a stubby
 * landscape strip on a tall screen.
 */
@media (max-width: 767px) {
  .survey-html-viewer-frame:not(.survey-html-viewer-frame--mobile) {
    aspect-ratio: 9 / 19.5;
  }
}

/* Inside a phone bezel the frame stretches to fully fill the screen
 * area; aspect-ratio is therefore not used (the parent dictates it). */
.survey-html-viewer-frame--mobile {
  height: 100%;
}

.survey-html-viewer-frame > .survey-html-viewer-iframe {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.survey-site-name-card {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #ffffff;
}

.survey-site-name-text {
  font-family: var(--survey-serif);
  font-size: clamp(1.5rem, 3vw + 1rem, 2.25rem);
  color: var(--survey-ink);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.2;
}

/* ── Phone frame (mobile_frame mode) ──────────────────────────────────── */

.survey-phone-frame {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  background: #0d0d0d;
  border-radius: 2.25rem;
  padding: 0.85rem;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--survey-rule);
}

.survey-phone-frame-notch {
  position: absolute;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 20px;
  background: #000;
  border-radius: 999px;
  z-index: 1;
}

.survey-phone-frame-body {
  background: #fff;
  border-radius: 1.6rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}

.survey-phone-frame-screen {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.survey-pair-variants--mobile-frame,
.survey-html-viewer--mobile-frame,
.survey-site-name-viewer--mobile-frame {
  background: transparent;
  border: 0;
}

/*
 * mobile_frame layout: on desktop both phones sit side-by-side (the base
 * .survey-pair-variants grid already provides 2 columns ≥768px); on mobile
 * we only show the active card so one phone bezel stays centered and the
 * swipe Stimulus controller reveals the other by toggling
 * .survey-pair-card--active.
 */
.survey-pair-variants--mobile-frame {
  justify-items: center;
}

.survey-pair-variants--mobile-frame .survey-pair-card {
  width: 100%;
  max-width: 360px;
  background: transparent;
  border: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .survey-pair-variants--mobile-frame .survey-pair-card {
    display: none;
  }

  .survey-pair-variants--mobile-frame .survey-pair-card.survey-pair-card--active,
  .survey-pair-variants--mobile-frame .survey-pair-card:first-child:not(.survey-pair-card--active) ~ *:not(.survey-pair-card--active) {
    /* first-child default visibility is handled below */
  }

  .survey-pair-variants--mobile-frame .survey-pair-card.survey-pair-card--active {
    display: flex;
  }

  /*
   * Before the swipe controller marks a card --active on mount (it runs on
   * Stimulus connect), show the first card so the pair is visible on load.
   */
  .survey-pair-variants--mobile-frame:not(:has(.survey-pair-card--active)) .survey-pair-card:first-child {
    display: flex;
  }
}

/* ── Swipe (mobile) ───────────────────────────────────────────────────── */

.survey-swipe-target {
  touch-action: pan-y;
}