/* ============================================================================
   NEXUSBODY · quiz.css · the conversational "open door" experience
   ----------------------------------------------------------------------------
   NEW FILE. Loaded AFTER styles.css, so rules here override the base quiz block
   where needed. Nothing in styles.css is edited. Register is unchanged:
   porcelain focused funnel, Cinzel numerals, Cormorant prompts, Inter UI.

   Everything animated uses transform/opacity only (GPU, 60fps). Reduced motion
   collapses to instant swaps at the bottom of this file.
   ============================================================================ */

/* --- sticky slim progress header (conversion: never lose the progress cue) -- */
.quiz-top{position:sticky;top:0;z-index:30}

/* Slightly roomier card top so the editorial prompt breathes. */
.quiz-main{padding-top:44px}

/* ============================================================================
   SCREEN 1 · THE OPEN DOOR
   ============================================================================ */
.quiz-open{max-width:100%}
.od-prompt{
  font-family:var(--font-editorial);
  font-weight:var(--weight-editorial);
  font-size:clamp(1.9rem,6vw,3rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:26px;
  max-width:16ch;
}

/* the real text field: an editorial writing line with a native blinking caret */
.od-form{margin:0 0 22px}
.od-inputwrap{
  display:flex;align-items:center;gap:10px;
  border-bottom:2px solid var(--navy);
  padding:6px 2px 10px;
  transition:border-color .2s ease;
}
.od-inputwrap:focus-within{border-color:var(--navy-deep)}
.od-input{
  flex:1;min-width:0;
  border:0;background:transparent;outline:none;
  font-family:var(--font-body);
  font-size:1.375rem;           /* >=16px: no iOS zoom */
  line-height:1.35;
  color:var(--navy);
  caret-color:var(--navy);      /* native caret blinks on focus / autofocus */
  padding:2px 0;
}
.od-input::placeholder{color:var(--slate-light);font-weight:var(--weight-body)}
.od-input::-webkit-input-placeholder{color:var(--slate-light)}
/* thumb-zone submit affordance (Enter also submits; mobile keyboard shows "go") */
.od-go{
  flex:none;
  width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;
  background:var(--navy);color:var(--porcelain);
  font-family:var(--font-body);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,transform .18s ease,opacity .18s ease;
}
.od-go:hover{background:var(--navy-deep)}
.od-go:active{transform:scale(.94)}
.od-hint{margin-bottom:26px}

/* tappable suggestion bubbles */
.od-bubbles-label{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--slate);font-weight:var(--weight-semibold);margin-bottom:14px}
.od-bubbles{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.od-bubble{
  font-family:var(--font-body);font-size:.9375rem;font-weight:var(--weight-medium);
  color:var(--navy);background:var(--paper);
  border:var(--hairline-width) solid var(--line);
  border-radius:999px;padding:11px 18px;cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.od-bubble:hover{border-color:var(--navy);background:var(--highlight)}
.od-bubble:active{transform:scale(.96)}
.od-legal{margin-top:2px}

/* ============================================================================
   THE CLARIFY SCREEN (only shown when typed text matched nothing)
   ============================================================================ */
.od-echo{
  font-family:var(--font-editorial);font-style:italic;
  font-size:1.25rem;color:var(--navy);line-height:1.35;
  margin-bottom:28px;
}
.od-echo q{quotes:"\201C" "\201D"}
.clarify-chips{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;
}
@media (max-width:440px){.clarify-chips{grid-template-columns:1fr}}
.clarify-chip{
  font-family:var(--font-body);font-size:1.0625rem;color:var(--navy);
  background:var(--paper);border:var(--hairline-width) solid var(--line);
  border-radius:var(--radius-max);padding:20px 22px;cursor:pointer;text-align:left;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.clarify-chip:hover{border-color:var(--navy);background:var(--highlight)}
.clarify-chip:active{transform:scale(.985)}

/* ============================================================================
   MICRO-STEPS · auto-advance friction removal
   ----------------------------------------------------------------------------
   The Continue button is gone (auto-advance on select). Selecting an option
   arms a brief highlight, then the flow advances. Give options a bigger touch
   target and a momentary "armed" pulse.
   ============================================================================ */
.quiz-options{margin-bottom:8px}
.quiz-opt{padding:22px 22px}
.quiz-opt.armed{background:var(--highlight);border-color:var(--navy)}
.quiz-opt.armed .dot{border-color:var(--navy)}
.quiz-opt.armed .dot::after{content:"";position:absolute;inset:3px;background:var(--navy);border-radius:50%}
/* optional-question skip affordance sits quietly under the options */
.quiz-skiprow{margin-top:18px}

/* ============================================================================
   DEPTH TRANSITIONS · Apple restraint, transforms only
   Direction classes are toggled by quiz.js. These are MORE specific than the
   base `.quiz-screen.active` rule in styles.css, so they win.
   ============================================================================ */
.quiz-screen.active.q-fwd{animation:qEnterFwd .34s cubic-bezier(.22,.61,.36,1) both}
.quiz-screen.active.q-back{animation:qEnterBack .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes qEnterFwd{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.986)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes qEnterBack{
  from{opacity:0;transform:translate3d(0,-14px,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* ============================================================================
   LOADER · goal echo under "Reading your six systems"
   ============================================================================ */
.loader-goal{
  font-family:var(--font-editorial);font-style:italic;
  font-size:1.1875rem;color:var(--navy);
  margin:-20px auto 34px;max-width:34ch;line-height:1.35;
}

/* ============================================================================
   PAYOFF · verbatim words echoed above the match
   ============================================================================ */
.payoff-words{
  font-family:var(--font-editorial);font-style:italic;
  font-size:clamp(1.375rem,3.4vw,1.75rem);line-height:1.3;
  color:var(--navy);margin:6px auto 24px;max-width:24ch;
}
.payoff-words q{quotes:"\201C" "\201D"}

/* ============================================================================
   MOBILE · thumb-zone comfort at 390px and below
   ============================================================================ */
@media (max-width:560px){
  .quiz-main{padding:32px 20px 88px}
  .od-prompt{margin-bottom:22px}
  .od-go{width:48px;height:48px}
  /* primary CTAs go full width and land in the thumb zone */
  .quiz-btn-row{gap:12px}
  .quiz-btn-row .btn-primary{width:100%}
  .quiz-payoff .quiz-btn-row .btn-primary,
  .quiz-screen[data-step="gate"] .btn-primary{width:100%}
}

/* ============================================================================
   REDUCED MOTION · instant screen swaps, no transforms
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .quiz-screen.active,
  .quiz-screen.active.q-fwd,
  .quiz-screen.active.q-back{animation:none}
  .quiz-progress-fill{transition:none}
  .od-go,.od-bubble,.clarify-chip,.quiz-opt{transition:none}
}