/* ==========================================================================
   Visionary Education — the guided finders

   One question on screen at a time, on a measured column. The wizard is the
   calmest thing on the site on purpose: somebody using it has already told us
   they do not know what they are looking for, so the screen offers one
   decision and nothing else.
   ========================================================================== */

.ve-finder { max-width: 54rem; margin-inline: auto; display: grid; gap: 1.5rem; }
.ve-finder--results { max-width: 76rem; }

/* ---- Progress ------------------------------------------------------------ */
.ve-finder__progress { display: flex; align-items: center; gap: .9rem; }
.ve-finder__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--ve-border-subtle); overflow: hidden; }
.ve-finder__bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ve-primary), var(--ve-purple-600)); transition: width var(--ve-dur-base) var(--ve-ease-out-expo); }
.ve-finder__progress-text { flex: none; font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-text-muted); }

/* ---- The question card --------------------------------------------------- */
.ve-finder__card {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--ve-border-subtle);
  border-radius: var(--ve-radius-xl);
  background: #fff;
  box-shadow: var(--ve-shadow-sm);
  display: grid; gap: 1.5rem;
}
.ve-finder__fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ve-finder__legend { display: grid; gap: .35rem; margin-bottom: 1.25rem; padding: 0; }
.ve-finder__step { font-size: var(--ve-text-2xs); font-weight: 700; letter-spacing: var(--ve-tracking-caps, .08em); text-transform: uppercase; color: var(--ve-primary); }
.ve-finder__question { font-family: var(--ve-font-display); font-size: var(--ve-text-2xl); font-weight: 800; line-height: var(--ve-leading-tight); color: var(--ve-text-strong); }
.ve-finder__help { font-size: var(--ve-text-sm); color: var(--ve-text-muted); }
.ve-finder__hint { font-size: var(--ve-text-xs); font-weight: 600; color: var(--ve-primary); }

/* ---- The answers --------------------------------------------------------- */
.ve-finder__options {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .7rem; margin: 0; padding: 0; list-style: none;
}
/* An odd last answer takes the whole row rather than leaving half of it empty. */
.ve-finder__options > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.ve-finder__option { display: block; height: 100%; cursor: pointer; }
.ve-finder__option input { position: absolute; opacity: 0; width: 0; height: 0; }

.ve-finder__option-body {
  display: flex; align-items: center; gap: .85rem; height: 100%;
  padding: .95rem 1rem;
  border: 1.5px solid var(--ve-border); border-radius: var(--ve-radius-lg);
  background: #fff;
  transition: border-color var(--ve-dur-fast) var(--ve-ease), background var(--ve-dur-fast), transform var(--ve-dur-fast) var(--ve-ease-spring), box-shadow var(--ve-dur-fast);
}
.ve-finder__option:hover .ve-finder__option-body { border-color: var(--ve-primary); transform: translateY(-2px); box-shadow: var(--ve-shadow-sm); }
.ve-finder__option input:checked + .ve-finder__option-body {
  border-color: var(--ve-primary);
  background: var(--ve-purple-050);
  box-shadow: inset 0 0 0 1px var(--ve-primary);
}
.ve-finder__option input:focus-visible + .ve-finder__option-body { outline: none; box-shadow: 0 0 0 3px var(--ve-focus); }

.ve-finder__option-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: var(--ve-radius-md); background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-finder__option-icon svg { width: 1.15rem; height: 1.15rem; }
.ve-finder__option-text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.ve-finder__option-label { font-size: var(--ve-text-md); font-weight: 700; color: var(--ve-text-strong); line-height: var(--ve-leading-snug); }
.ve-finder__option-help { font-size: var(--ve-text-xs); color: var(--ve-text-muted); }

/* How many records each answer leaves — so nobody picks a dead end blind. */
.ve-finder__option-count {
  flex: none; display: inline-grid; place-items: center;
  min-width: 2rem; padding: .15rem .5rem;
  border-radius: var(--ve-radius-pill);
  background: var(--ve-surface-alt); color: var(--ve-text-muted);
  font-size: var(--ve-text-2xs); font-weight: 700;
}
.ve-finder__option input:checked + .ve-finder__option-body .ve-finder__option-count { background: var(--ve-primary); color: #fff; }

/* An answer that would find nothing is shown as such, and cannot be chosen. */
.ve-finder__option.is-empty { cursor: not-allowed; }
.ve-finder__option.is-empty .ve-finder__option-body { opacity: .45; }
.ve-finder__option.is-empty:hover .ve-finder__option-body { border-color: var(--ve-border); transform: none; box-shadow: none; }

/* ---- Buttons ------------------------------------------------------------- */
.ve-finder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding-top: .25rem; border-top: 1px solid var(--ve-border-subtle); }
.ve-finder__restart { margin-left: auto; font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.ve-finder__restart:hover { color: var(--ve-primary); }

/* ---- What has been answered so far --------------------------------------- */
.ve-finder__answers { display: grid; gap: .6rem; }
.ve-finder__answers-title { font-size: var(--ve-text-xs); font-weight: 700; letter-spacing: var(--ve-tracking-caps, .08em); text-transform: uppercase; color: var(--ve-text-muted); }
.ve-finder__answers-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ve-finder__answer {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .45rem .8rem; border-radius: var(--ve-radius-pill);
  border: 1px solid var(--ve-border); background: #fff;
  font-size: var(--ve-text-xs); text-decoration: none;
  transition: border-color var(--ve-dur-fast), background var(--ve-dur-fast);
}
.ve-finder__answer:hover { border-color: var(--ve-primary); background: var(--ve-purple-050); }
.ve-finder__answer-q { color: var(--ve-text-muted); }
.ve-finder__answer-a { font-weight: 700; color: var(--ve-text-strong); }
.ve-finder__answer-change { color: var(--ve-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Results ------------------------------------------------------------- */
.ve-finder__result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; }
.ve-finder__result-title { font-family: var(--ve-font-display); font-size: var(--ve-text-xl); font-weight: 800; color: var(--ve-text-strong); }
.ve-finder__result-title strong { color: var(--ve-primary); }
.ve-finder__result-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ve-finder__result-actions svg { width: .85rem; height: .85rem; }

.ve-finder__relaxed {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .8rem 1rem; border-radius: var(--ve-radius-md);
  background: var(--ve-gold-100, #fdf3d7); border: 1px solid var(--ve-gold-400, #e8c766);
  color: var(--ve-indigo-950); font-size: var(--ve-text-xs); line-height: var(--ve-leading-snug);
}
.ve-finder__relaxed svg { width: .95rem; height: .95rem; flex: none; margin-top: .1rem; }

.ve-finder__grid { margin: 0; padding: 0; }

/* ---- The advisor band ---------------------------------------------------- */
.ve-finder__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--ve-radius-xl);
  background: linear-gradient(135deg, var(--ve-indigo-900), var(--ve-primary));
  color: #fff;
}
/* The colour is stated, not inherited. The site sets a dark colour on every
   heading, which wins over the white inherited from this band — the same trap
   that once made every page banner title dark-on-dark. */
.ve-finder__cta-title { font-family: var(--ve-font-display); font-size: var(--ve-text-lg); font-weight: 800; color: #fff; }
.ve-finder__cta-body { margin-top: .35rem; font-size: var(--ve-text-sm); color: rgb(255 255 255 / .82); max-width: 46rem; }

@media (max-width: 40rem) {
  .ve-finder__options { grid-template-columns: 1fr; }
  .ve-finder__actions { flex-direction: column; align-items: stretch; }
  .ve-finder__actions .ve-btn { width: 100%; }
  .ve-finder__restart { margin-left: 0; text-align: center; padding-top: .35rem; }
  .ve-finder__cta { flex-direction: column; align-items: stretch; }
  .ve-finder__cta .ve-btn { width: 100%; }
}