/* ============================================================
   QUIZ ENGINE — shared by the homepage Fit-Check and /check.html
   Design tokens (--c-*, --sp-*, --f-*, --r-*, --sh-*, --t-*, --ease-out)
   are defined in index.html's :root and assumed to be loaded already
   wherever this stylesheet is used.
============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* FIT-CHECK WIZARD */
.wizard { background: var(--c-snow); padding: var(--sp-20) 0 var(--sp-24); }
.wizard__header { text-align: center; max-width: 620px; margin: 0 auto var(--sp-12); }
.wizard__header .label { margin-bottom: var(--sp-4); }
.wizard__heading { margin-bottom: var(--sp-4); }
.wizard__header .section-sub { margin: 0 auto; }

.wizard__card {
  position: relative;
  max-width: 720px; margin: 0 auto;
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--c-smoke);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  overflow: hidden;
}
@media (min-width: 640px) { .wizard__card { padding: var(--sp-10) var(--sp-10) var(--sp-8); } }

.wizard__progress {
  height: 6px; border-radius: var(--r-full);
  background: var(--c-smoke); overflow: hidden;
  margin-bottom: var(--sp-8);
}
.wizard__progress-fill {
  display: block; height: 100%; width: 20%;
  background: var(--c-ember);
  border-radius: var(--r-full);
  transition: width var(--t-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .wizard__progress-fill { transition: none; }
}

.wizard__step { display: none; }
.wizard__step.is-active {
  display: block;
  animation: wizardStepIn var(--t-slow) var(--ease-out);
}
@keyframes wizardStepIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wizard__step.is-active { animation: none; }
}
.wizard__step-label {
  font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ember-700); margin-bottom: var(--sp-3);
}
.wizard__step-title {
  font-family: var(--f-display); font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--c-void); line-height: 1.15; margin-bottom: var(--sp-2);
}
.wizard__step-sub { font-size: 0.9rem; color: var(--c-ash); margin-bottom: 0; }

.wizard__tiles {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-6);
}
@media (min-width: 640px) {
  .wizard__tiles { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
  .wizard__tiles--2col { grid-template-columns: repeat(2, 1fr); }
  .wizard__tiles--3col { grid-template-columns: repeat(3, 1fr); }
}

.wizard__tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 104px;
  padding: var(--sp-5) var(--sp-3);
  background: var(--c-snow);
  border: 2px solid var(--c-smoke);
  border-radius: var(--r-lg);
  font-family: var(--f-body); font-size: 0.875rem; font-weight: 600;
  color: var(--c-void); text-align: center; line-height: 1.3;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.wizard__tile:hover { border-color: var(--c-ember); background: var(--c-white); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.wizard__tile:active { transform: translateY(0); }
.wizard__tile:focus-visible { outline: 2px solid var(--c-petrol); outline-offset: 2px; }
.wizard__tile small { display: block; font-weight: 400; font-size: 0.75rem; color: var(--c-ash); margin-top: 2px; }
.wizard__tile-icon { font-size: 1.75rem; line-height: 1; }
.wizard__tile.is-selected {
  border-color: var(--c-ember); background: var(--c-ember-dim);
  box-shadow: 0 0 0 1px var(--c-ember) inset;
}
.wizard__tile.is-selected small { color: var(--c-ember-700); }
.wizard__tile::after {
  content: '✓'; position: absolute; top: 8px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--c-ember); color: var(--c-void);
  font-size: 0.7rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.wizard__tile.is-selected::after { opacity: 1; transform: scale(1); }

.wizard__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-8);
}
.wizard__nav.is-hidden { display: none; }
.wizard__back {
  background: none; border: none; cursor: pointer;
  font-family: var(--f-body); font-size: 0.875rem; font-weight: 600;
  color: var(--c-ash); padding: var(--sp-2) var(--sp-3);
  transition: color var(--t-fast);
}
.wizard__back:hover { color: var(--c-void); }
.wizard__back.is-hidden { visibility: hidden; }
.wizard__next {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-void); color: var(--c-white);
  border: none; border-radius: var(--r-full);
  padding: 13px 26px; font-family: var(--f-body); font-size: 0.9375rem; font-weight: 700;
  cursor: pointer; transition: background var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
}
.wizard__next:hover:not(:disabled) { background: var(--c-petrol); transform: translateY(-1px); }
.wizard__next:disabled { opacity: 0.35; cursor: not-allowed; }
.wizard__next.is-hidden { display: none; }

.wizard__loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-6); padding: var(--sp-16) 0;
  text-align: center;
}
.wizard__spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 4px solid var(--c-smoke); border-top-color: var(--c-ember);
  animation: wizardSpin 0.8s linear infinite;
}
@keyframes wizardSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* style.css's global reduced-motion rule forces animation-duration to
     0.01ms but not iteration-count, so a slowed (not disabled) spin here
     would jitter continuously instead of holding still. */
  .wizard__spinner { animation: none; }
}
.wizard__loading-text {
  font-family: var(--f-mono); font-size: 0.85rem; color: var(--c-ash);
  letter-spacing: 0.02em;
}

.wizard__result { text-align: center; padding: var(--sp-4) 0; }
.wizard__result-badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-ember); color: var(--c-void);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
}
.wizard__result-title {
  font-family: var(--f-display); font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--c-void); line-height: 1.15; margin-bottom: var(--sp-3);
}
.wizard__result-sub {
  font-size: 0.9375rem; color: var(--c-ash); line-height: 1.6;
  margin: 0 auto var(--sp-8); max-width: 44ch;
}

.wizard__form { max-width: 420px; margin: 0 auto; text-align: left; }
.wizard__form-row { margin-bottom: var(--sp-4); }
.wizard__form-label {
  display: block; font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-ash); margin-bottom: var(--sp-2);
}
.wizard__form-input {
  width: 100%; padding: 13px var(--sp-4);
  font-family: var(--f-body); font-size: 0.9375rem;
  border: 1.5px solid var(--c-smoke); border-radius: var(--r-md);
  color: var(--c-void); background: var(--c-white);
  transition: border-color var(--t-fast);
}
.wizard__form-input:focus { border-color: var(--c-ember); }
.wizard__form-error {
  display: none; font-size: 0.8125rem; color: #c0392b;
  margin-bottom: var(--sp-4);
}
.wizard__form-error.is-visible { display: block; }
.wizard__submit-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2); white-space: normal; text-align: center;
  background: var(--c-ember); color: var(--c-void);
  border: none; border-radius: var(--r-full);
  padding: 16px var(--sp-6);
  font-family: var(--f-body); font-size: 0.9375rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 20px rgba(225,231,35,0.30);
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  scroll-margin-bottom: 16px;
}
.wizard__submit-btn:hover:not(:disabled) { background: var(--c-ember-dark); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(225,231,35,0.38); }
.wizard__submit-btn:active { transform: translateY(0); }
.wizard__submit-btn:disabled { opacity: 0.6; cursor: wait; }

.wizard__restart-link {
  display: block; margin: var(--sp-4) auto 0;
  font-size: 0.8125rem; color: var(--c-ash); text-decoration: underline;
  background: none; border: none; cursor: pointer; font-family: var(--f-body);
  text-align: center;
}
.wizard__restart-link:hover { color: var(--c-void); }

/* Buero-Check: score ring, calculation disclosure, email gate, CTAs */
.wizard__score-ring {
  width: 128px; height: 128px; margin: 0 auto var(--sp-5);
  position: relative;
}
.wizard__score-ring svg { transform: rotate(-90deg); }
.wizard__score-ring circle { fill: none; stroke-width: 10; }
.wizard__score-ring .track { stroke: var(--c-smoke); }
.wizard__score-ring .fill { stroke: var(--c-ember); stroke-linecap: round; transition: stroke-dashoffset var(--t-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .wizard__score-ring .fill { transition: none; } }
.wizard__score-ring-value {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; color: var(--c-void);
}
.wizard__score-ring-value small { font-family: var(--f-mono); font-size: 0.6rem; color: var(--c-ash); font-weight: 400; letter-spacing: 0.04em; }

.wizard__hours { font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; color: var(--c-void); margin-bottom: var(--sp-2); }
.wizard__levers { list-style: none; padding: 0; margin: var(--sp-4) auto var(--sp-6); max-width: 480px; text-align: left; }
.wizard__levers li { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: 0.9375rem; color: var(--c-void); }
.wizard__levers li::before { content: '→'; color: var(--c-ember-700); font-weight: 700; flex-shrink: 0; }

.wizard__explain { margin: var(--sp-4) auto var(--sp-8); max-width: 480px; text-align: left; font-size: 0.85rem; color: var(--c-ash); }
.wizard__explain summary { cursor: pointer; font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--c-ash); text-decoration: underline; margin-bottom: var(--sp-2); }
.wizard__explain pre { white-space: pre-wrap; background: var(--c-snow); border-radius: var(--r-md); padding: var(--sp-3); margin-top: var(--sp-2); font-family: var(--f-mono); font-size: 0.75rem; }

.wizard__gate { max-width: 420px; margin: var(--sp-8) auto 0; text-align: left; border-top: 1px solid var(--c-smoke); padding-top: var(--sp-8); }
.wizard__gate-title { font-family: var(--f-display); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: var(--c-void); margin-bottom: var(--sp-5); text-align: center; }
.wizard__checkbox-row { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-4); font-size: 0.8125rem; color: var(--c-ash); line-height: 1.5; }
.wizard__checkbox-row input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.wizard__privacy-note { font-size: 0.75rem; color: var(--c-ash); margin-bottom: var(--sp-4); }
.wizard__privacy-note a { text-decoration: underline; }
.wizard__skip-link { display: block; margin: var(--sp-4) auto 0; text-align: center; font-size: 0.8125rem; color: var(--c-ash); text-decoration: underline; background: none; border: none; cursor: pointer; font-family: var(--f-body); }

.wizard__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wizard__cta-group { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 360px; margin: var(--sp-6) auto 0; }
.wizard__cta-group.is-hidden { display: none; }
.wizard__cta-primary, .wizard__cta-secondary {
  display: flex; align-items: center; justify-content: center;
  padding: 14px var(--sp-6); border-radius: var(--r-full);
  font-family: var(--f-body); font-size: 0.9375rem; font-weight: 700; text-align: center;
}
.wizard__cta-primary { background: var(--c-ember); color: var(--c-void); }
.wizard__cta-primary:hover { background: var(--c-ember-dark); }
.wizard__cta-secondary { background: none; border: 1.5px solid var(--c-smoke); color: var(--c-void); }
.wizard__cta-secondary:hover { border-color: var(--c-void); }