/* Questionnaire chrome.

   Layered on top of the .qual-* card in styles.css rather than replacing it, so
   the card looks the same wherever it is mounted. Everything here exists for one
   of two reasons: the questionnaire got long enough to need a real progress
   read, or a phone did something ugly.

   The phone rules are the load bearing half:
     - every input is 16px, because anything smaller makes iOS zoom the page on
       focus and that zoom never comes back on its own. That is the "random
       zoom" a visitor sees.
     - touch-action: manipulation kills the 300ms double-tap-zoom wait, which is
       what made tapping an option feel laggy.
     - the panel is min-height'd so answering a four line question and landing on
       a one line question does not collapse the card under the thumb. */

.quiz-head { margin-bottom: 22px; }
.quiz-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.quiz-sec {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-lite);
}
.quiz-count { font-size: 11.5px; letter-spacing: .1em; color: var(--faint); font-variant-numeric: tabular-nums; }
.quiz-bar { height: 3px; border-radius: 3px; background: rgba(var(--tint),.1); overflow: hidden; }
.quiz-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-lite));
  transition: width .32s cubic-bezier(.22,.61,.36,1);
}

.quiz-mount {
  opacity: 1; transform: none;
  transition: opacity .16s ease, transform .16s ease;
}
.quiz-mount.is-out { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .quiz-mount, .quiz-mount.is-out { transition: none; opacity: 1; transform: none; }
  .quiz-bar i { transition: none; }
}

.quiz-help {
  margin: -8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--faint);
}
.qual-q + .qual-opts { margin-top: 2px; }

/* square tick for the one multi select question, so it reads as "pick several" */
.qual-tick.sq { border-radius: 6px; }
.qual-tick.sq::after { border-radius: 2px; }

.quiz-next { margin-top: 16px; }

/* ---------- contact step ---------- */
.quiz-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.quiz-form label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--dim);
}
.quiz-form input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  background: rgba(var(--tint),.045); border: 1px solid var(--line);
  color: var(--ink); font: inherit;
  font-size: 16px; /* do not drop below 16px: iOS zooms the page on focus */
  letter-spacing: -0.01em;
  transition: border-color .16s ease, background .16s ease;
  -webkit-appearance: none; appearance: none;
}
.quiz-form input:focus {
  outline: none; border-color: var(--accent);
  background: rgba(47,107,255,.08);
}
.quiz-form input::placeholder { color: var(--faint); }
.quiz-form .btn { margin-top: 6px; }
.quiz-error {
  margin: 0; font-size: 13.5px; color: #FF8A8A;
}

.quiz-tick {
  width: 54px; height: 54px; border-radius: 50%; margin-bottom: 20px;
  display: grid; place-items: center;
  background: rgba(75,208,126,.14); border: 1px solid rgba(75,208,126,.4); color: #8FE0AE;
}
.quiz-tick svg { width: 26px; height: 26px; }

/* questionnaire.js locks, measures and animates the card between question
   heights, so the CSS min-height is only a floor for the no-JS case */
.qual-card { transition: min-height .24s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) { .qual-card { transition: none; } }

/* ---------- phone ---------- */
.qual-opt, .quiz-next, .quiz-form input, .quiz-form button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
  /* a sticky :hover state on touch makes the last tapped option look chosen */
  .qual-opt:hover { border-color: var(--line); background: rgba(var(--tint),.04); color: var(--ink-soft); }
  .qual-opt.sel:hover { border-color: var(--accent); background: rgba(47,107,255,.16); color: var(--ink); }
  .qual-arrow { display: none; }
}
@media (max-width: 780px) {
  .qual-card { min-height: 300px; padding: 24px 20px; }
  .qual-q { font-size: 20px; line-height: 1.25; }
  .quiz-help { font-size: 13.5px; }
  .qual-opt { padding: 15px 16px; font-size: 15px; align-items: flex-start; line-height: 1.35; }
  .qual-tick { margin-top: 1px; }
}


/* ---------- the questionnaire as a page ----------
   /apply and /architecture used to be bare full-bleed flow pages with their own
   chrome. They are now normal pages with the same nav, hero and footer as
   everything else, and the card in the middle is the identical component that
   is inlined on the home page. */
.quiz-solo { max-width: 640px; }
.quiz-solo .qual-card { min-height: 320px; }
.quiz-solo-note {
  margin-top: 20px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--faint);
}

/* ---------- the free planner's email gate ----------
   The blurred teaser is the real plan, generated before the gate, so what is
   behind the blur is genuinely what unlocks. */
.arch-gate .gate-preview {
  position: relative; max-height: 190px; overflow: hidden; margin-bottom: 24px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  padding: 20px; background: var(--panel);
  filter: blur(5px); user-select: none; pointer-events: none;
}
.arch-gate .gate-fade {
  position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(180deg, rgba(var(--tint),0), var(--panel));
}
.arch-gate .gate-lock {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(47,107,255,.3), rgba(47,107,255,.07));
  border: 1px solid rgba(47,107,255,.34); color: var(--accent-lite);
}
.arch-gate .gate-lock svg { width: 22px; height: 22px; }


/* ---------- dropdown ----------
   Used for the one question with ten answers. A native <select> is what gets
   the iOS wheel picker; anything hand-built loses it. The chevron is a
   background image because appearance:none removes the platform arrow. */
.quiz-select { position: relative; margin-top: 4px; }
.quiz-select select {
  width: 100%; padding: 17px 46px 17px 18px; border-radius: 13px;
  background-color: rgba(var(--tint),.045);
  border: 1px solid var(--line); color: var(--ink);
  font: inherit; font-size: 16px; /* under 16px iOS zooms the page on focus */
  letter-spacing: -0.015em; line-height: 1.3;
  -webkit-appearance: none; appearance: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FA6FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px 20px;
  transition: border-color .16s ease, background-color .16s ease;
}
.quiz-select select:focus {
  outline: none; border-color: var(--accent); background-color: rgba(47,107,255,.08);
}
/* the native menu paints in the OS palette, so the options need real colours
   rather than inherited ones or they render black on black on some platforms */
.quiz-select option { color: #111; background: #fff; }
.quiz-select select:invalid, .quiz-select select option[value=""] { color: var(--faint); }