/* The early-access survey (/survey), in the site's style: loaded after style.css and uses its tokens.
   The survey is reached from the QR code on the conference card and letters, so it's built phone first (390 px),
   every tap target at least 48 px tall. Answers sit in the letters' light panels; a chosen answer turns ink.
   Oxblood is only the cite squares and the current step on the progress bar. The markup is built by js/survey.js
   from the classes below; keep them. */

.survey-page [hidden] { display: none !important; }
.survey-page { background: var(--white); min-height: 100vh; display: flex; flex-direction: column; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; }

.survey-header, .survey, .survey-foot { width: 100%; max-width: 600px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ------------------------------------------------------------------ header: the lockup and a way out */
.survey-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule); max-width: none; }
/* the lockup at the site header's size; on phones the mark and Folio only, as in the site header */
@media (max-width: 520px) { .survey-header .lockup .astreon, .survey-header .lockup .bar { display: none; } }
@media (min-width: 640px) { .survey-header { padding-left: max(20px, calc((100% - 600px) / 2 + 20px)); padding-right: max(20px, calc((100% - 600px) / 2 + 20px)); } }

.survey-skip { display: inline-flex; align-items: center; gap: 0.35em; min-height: 48px; font-size: 15px; color: var(--slate);
  text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 5px; white-space: nowrap; }
.survey-skip:hover { color: var(--ink); }

.survey { flex: 1; padding-top: 12px; padding-bottom: 48px; }

/* ------------------------------------------------------------------ back, count and progress */
.survey-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.survey-back { display: inline-flex; align-items: center; gap: 0.4em; min-height: 48px; padding: 0 12px 0 0; border: 0; background: none;
  color: var(--slate); font: 400 15px/1 var(--sans); cursor: pointer; }
.survey-back:hover { color: var(--ink); }
.survey-bar.is-first .survey-back { visibility: hidden; }
.survey-count { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }

.survey-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 4px 0 32px; }
.survey-progress span { height: 4px; background: var(--rule); transition: background 0.2s ease; }
.survey-progress .is-done { background: var(--ink); }
.survey-progress .is-current { background: var(--ox); }

/* ------------------------------------------------------------------ screens */
.survey-screen { animation: survey-enter 0.18s ease-out; }
@keyframes survey-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.survey-intro { margin-bottom: 32px; }
.survey-intro .eyebrow { display: block; margin-bottom: 14px; font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); line-height: 1.4; }
.survey-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 8vw, 40px); line-height: 1.08; letter-spacing: -0.016em;
  color: var(--ink); text-wrap: balance; }
.survey-lede { margin-top: 14px; font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--slate); text-wrap: pretty; }

.survey-question { min-width: 0; margin: 0; padding: 0; border: 0; }
.survey-question legend { width: 100%; margin-bottom: 18px; padding: 0; }
.survey-title { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 6vw, 28px); line-height: 1.2; color: var(--ink); text-wrap: pretty; }
.survey-title:focus { outline: none; }
.survey-context { display: block; margin-bottom: 14px; padding: 14px 16px; background: var(--panel); font-family: var(--sans); font-size: 16px;
  font-weight: 400; line-height: 1.55; color: var(--ink2); }
.survey-ask { display: block; }

/* ------------------------------------------------------------------ answers: radios drawn as the letters' panels */
.survey-options { display: grid; gap: 8px; }
.survey-option { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.survey-option-label { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--panel);
  background: var(--panel); color: var(--ink); font-size: 17px; line-height: 1.35; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.survey-option-label::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--slate2); border-radius: 50%; background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.survey-option:hover .survey-option-label { border-color: var(--rule2); background: var(--paper); }
.survey-radio:checked + .survey-option-label { border-color: var(--ink); background: var(--white); }
.survey-radio:checked + .survey-option-label::before { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 9px var(--ink); }
.survey-radio:focus-visible + .survey-option-label { outline: 2px solid var(--ox); outline-offset: 2px; }
.survey-option.is-chosen .survey-option-label { background: var(--ink); border-color: var(--ink); color: var(--white); }
.survey-option.is-chosen .survey-option-label::before { border-color: var(--white); background: var(--ink); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 9px var(--white); }

.survey-skip-question { display: block; min-height: 48px; margin: 14px auto 0; padding: 0 20px; border: 0; background: none; color: var(--slate);
  font: 400 16px/1 var(--sans); text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 5px; cursor: pointer; }

/* ------------------------------------------------------------------ the early-access sign-up */
.survey-signup-title { font-size: clamp(30px, 8vw, 38px); line-height: 1.1; margin-bottom: 18px; }
.survey-perks { margin: 0 0 26px; padding: 16px 18px; background: var(--panel); list-style: none; display: flex; flex-direction: column; gap: 8px; }
.survey-perks li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.45; color: var(--ink2); }
.survey-perks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; background: var(--ox); }

.survey-form .form-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.survey-form .form-field label { font-size: 14px; font-weight: 500; color: var(--ink2); }
/* 16px stops iOS Safari zooming in when a field gets focus. */
.survey-form .form-field input { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--rule2); border-radius: 0;
  background: var(--white); font: 400 16px/1.4 var(--sans); color: var(--ink); }
.survey-form .form-field input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.survey-form .form-field input[aria-invalid="true"] { border-color: var(--ox); }
.survey-field-error { font-size: 14px; color: var(--ox); }

.survey-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.survey-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 14px;
  border-left: 3px solid var(--ox); background: var(--panel); }
.survey-error-text { flex: 1 1 200px; font-size: 15px; color: var(--ink); }

/* the site's buttons, in the names survey.js gives them */
.btn-primary { background: var(--ink); color: var(--white); }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { background: var(--white); }
.btn-block { width: 100%; justify-content: center; }
.survey-retry, .survey-submit { min-height: 52px; }
.survey-submit[disabled] { opacity: 0.7; cursor: progress; }

.survey-consent { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--slate); }
.survey-decline { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; color: var(--slate);
  text-decoration: underline; text-decoration-color: var(--rule2); text-underline-offset: 5px; }
.survey-decline:hover { color: var(--ink); }
.survey-privacy { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.survey-privacy a { color: var(--ink); text-underline-offset: 3px; }

.survey-fallback { padding: 32px 0; color: var(--slate); }
.survey-fallback a { color: var(--ink); }

/* ------------------------------------------------------------------ footer: the endorsement, as on the card */
.survey-foot { padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--slate); }
.survey-foot b { font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .survey-screen { animation: none; }
  .survey-progress span, .survey-option-label, .survey-option-label::before { transition: none; }
}