/* ============================================================
   Engagement intake form — conversational one-question flow
   ============================================================ */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* --- navy header bar --- */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 5vw, 56px);
  background: var(--jw-purple);
}
.site-head__brand {
  display: flex;
  align-items: center;
  gap: 18px;
}
.site-head__home { display: inline-flex; }
.site-head__logo { height: 58px; width: auto; }
.site-head__label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 17px;
  color: var(--jw-white);
  padding-left: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.28);
}

.progress { width: min(380px, 46vw); }
.progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--jw-white);
  margin-bottom: 5px;
}
.progress__meta span:last-child { font-weight: 400; color: rgba(255, 255, 255, 0.7); }
.progress__track {
  height: 8px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;
  background: var(--jw-lime);
  border-radius: 99px;
  transition: width 400ms var(--ease-spring);
}

/* --- stage --- */
.stage {
  flex: 1;
  width: min(760px, 92vw);
  margin: 0 auto;
  padding: clamp(18px, 4vh, 48px) 0 64px;
  position: relative;
}

.screen {
  position: relative;
  z-index: 1;
  animation: screenIn 240ms var(--ease-spring) both;
}
.screen--out { animation: screenOut 160ms ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes screenOut { to { opacity: 0; transform: translateY(-14px); } }

.kicker {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 15px;
  color: var(--jw-orange);
  margin-bottom: 10px;
}

.q {
  font-size: clamp(26px, 4.2vw, 38px);
  font-weight: 700;
  line-height: 1.14;
  color: var(--jw-purple-dark);
  margin-bottom: 10px;
}

.q-context {
  font-size: 17px;
  color: rgba(10, 12, 31, 0.78);
  max-width: 58ch;
  margin-bottom: 28px;
}
.q-context strong { color: var(--jw-purple); }

/* --- option cards --- */
.options { display: grid; gap: 12px; }
.options--2col { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.options--wards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.options--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.opt {
  appearance: none;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  background: var(--jw-white);
  color: var(--jw-ink);
  border: 2px solid rgba(21, 25, 73, 0.16);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--speed-snap) ease,
              background-color var(--speed-snap) ease,
              color var(--speed-snap) ease,
              transform var(--speed-snap) var(--ease-spring);
  animation: optIn 240ms var(--ease-spring) both;
}
.opt:nth-child(1) { animation-delay: 30ms; } .opt:nth-child(2) { animation-delay: 60ms; }
.opt:nth-child(3) { animation-delay: 90ms; } .opt:nth-child(4) { animation-delay: 120ms; }
.opt:nth-child(5) { animation-delay: 150ms; } .opt:nth-child(6) { animation-delay: 180ms; }
.opt:nth-child(7) { animation-delay: 210ms; } .opt:nth-child(8) { animation-delay: 240ms; }
.opt:nth-child(9) { animation-delay: 270ms; } .opt:nth-child(n+10) { animation-delay: 300ms; }
@keyframes optIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.opt:hover { border-color: var(--jw-purple); background: #F0F2F8; transform: translateY(-1px); }
.opt:focus-visible { outline: 3px solid var(--jw-orange); outline-offset: 2px; }

.opt.is-selected {
  background: var(--jw-purple);
  border-color: var(--jw-purple);
  color: var(--jw-egg);
}
.opt.is-selected .opt__check { background: var(--jw-lime); border-color: var(--jw-lime); }
.opt.is-selected .opt__check::after { opacity: 1; }
.opt.is-selected .opt__sub { color: rgba(255, 255, 255, 0.75); }

.opt__check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(21, 25, 73, 0.35);
  border-radius: 50%;
  position: relative;
  transition: background-color var(--speed-snap) ease;
}
.opt__check::after {
  content: '';
  position: absolute;
  inset: 4px 5px 7px;
  border-left: 3px solid var(--jw-ink);
  border-bottom: 3px solid var(--jw-ink);
  transform: rotate(-48deg);
  opacity: 0;
}
.opt__label { flex: 1; }
.opt__sub { display: block; font-size: 13.5px; font-weight: 400; color: rgba(10, 12, 31, 0.6); margin-top: 2px; }

/* chips = compact multi-select */
.options--chips .opt {
  padding: 10px 16px;
  font-size: 15.5px;
  box-shadow: none;
  border-radius: 99px;
}
.options--chips .opt__check { display: none; }

/* rank badges (volunteer interests) */
.opt__rank {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--jw-lime);
  color: var(--jw-ink);
  font-weight: 700;
  font-size: 14px;
  display: none;
  align-items: center;
  justify-content: center;
}
.opt.is-selected .opt__rank { display: flex; }

/* --- text inputs --- */
.field { margin-bottom: 18px; animation: optIn 240ms var(--ease-spring) both; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--jw-purple-dark);
  margin-bottom: 6px;
}
.field label .why { font-weight: 400; color: rgba(10, 12, 31, 0.55); }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--jw-ink);
  background: var(--jw-white);
  border: 2px solid rgba(21, 25, 73, 0.22);
  border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color var(--speed-snap) ease, box-shadow var(--speed-snap) ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--jw-purple);
  box-shadow: 0 0 0 3px rgba(255, 145, 0, 0.55);
}
.field textarea { min-height: 110px; resize: vertical; }
.field--error input { border-color: var(--jw-orange); }
.field__err { color: #B35A00; font-size: 14px; margin-top: 5px; display: none; }
.field--error .field__err { display: block; }

/* file upload */
.upload {
  border: 2px dashed rgba(21, 25, 73, 0.35);
  border-radius: var(--radius);
  background: var(--jw-white);
  padding: 26px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--speed-snap) ease, background-color var(--speed-snap) ease;
}
.upload:hover, .upload.is-drag { border-color: var(--jw-purple); background: #F0F2F8; }
.upload.has-file { border-style: solid; border-color: var(--jw-purple); }
.upload strong { color: var(--jw-purple); }
.upload small { display: block; color: rgba(10, 12, 31, 0.55); margin-top: 4px; }

/* --- nav row --- */
.nav-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}
.nav-row .spacer { flex: 1; }
.link-back, .link-skip {
  font-family: var(--font-body);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15.5px;
  color: rgba(14, 17, 51, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 4px;
}
.link-back:hover, .link-skip:hover { color: var(--jw-purple); }

/* --- welcome & done screens --- */
.welcome { text-align: left; padding-top: clamp(8px, 4vh, 40px); } /* left-aligned like the rest of the site (feedback doc 10/31) */

.welcome__hed {
  font-size: clamp(56px, 11vw, 108px);
  margin-bottom: 6px;
}
.welcome__hed .accent { color: var(--jw-lime); text-shadow: 0 1px 0 rgba(10, 12, 31, 0.12); }
.welcome__lede {
  font-size: 19px;
  max-width: 56ch;
  margin: 0 0 14px;
  color: rgba(10, 12, 31, 0.85);
}
.welcome__lede strong { color: var(--jw-purple); }
.welcome__fineprint { font-size: 15.5px; color: rgba(10, 12, 31, 0.62); max-width: 52ch; margin: 0 0 30px; }
.timechip {
  display: inline-block;
  background: var(--jw-lavender);
  color: var(--jw-purple-dark);
  font-weight: 700;
  font-size: 14px;
  border-radius: 99px;
  padding: 7px 16px;
  margin-bottom: 26px;
}

.done { text-align: left; padding-top: clamp(10px, 6vh, 60px); }
.done__hed { font-size: clamp(44px, 8vw, 84px); margin: 14px 0 12px; }
.done__hed .accent { color: var(--jw-lime); text-shadow: 0 1px 0 rgba(10, 12, 31, 0.12); }
.done p { max-width: 54ch; margin: 0 auto 14px; font-size: 18px; }
.done__next {
  background: var(--jw-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: left;
  max-width: 480px;
  margin: 28px auto 0;
  padding: 22px 26px;
}
.done__next h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--jw-purple); font-size: 20px; margin-bottom: 10px; }
.done__next li { margin: 8px 0 8px 18px; font-size: 16px; }

/* section intro flash — big display interstitial */
.section-flash {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--jw-purple);
  font-size: clamp(34px, 6vw, 58px);
  line-height: 0.95;
  margin-bottom: 26px;
}
.section-flash .bar { display: block; width: 74px; height: 8px; background: var(--jw-lime); margin-top: 12px; }

/* footer */
.site-foot { padding: 26px 20px 34px; text-align: center; }
.site-foot__note { font-size: 14px; color: rgba(10, 12, 31, 0.6); }
.site-foot__note a { color: var(--jw-purple); font-weight: 600; }
.site-foot__auth { font-size: 12.5px; color: rgba(10, 12, 31, 0.5); margin-top: 8px; }

/* mobile */
@media (max-width: 640px) {
  .site-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-head__logo { height: 56px; }
  .progress { width: 100%; }
  .options--2col, .options--wards { grid-template-columns: 1fr 1fr; }
}
/* small phones: one column so card labels don't break a word per line (10/21) */
@media (max-width: 480px) {
  .options--2col { grid-template-columns: 1fr; }
}

/* honeypot — humans never see it */
.hp-wrap { position: absolute; left: -6000px; top: -6000px; }