/* Stage 4: the four-question advisor funnel. */
.advisor-entry{width:min(760px,100%);padding:1rem}
.advisor-entry .advmode{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;padding:.35rem;border:1px solid color-mix(in srgb,var(--color-border) 68%,transparent);border-radius:16px;background:color-mix(in srgb,var(--color-canvas) 76%,transparent)}
.advisor-entry .advmode-btn{min-height:44px;padding:.65rem 1rem;border-radius:12px;color:var(--color-text-muted);font-size:.84rem;font-weight:720;transition:color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.advisor-entry .advmode-btn.active{background:var(--color-surface-raised);color:var(--color-text-strong);box-shadow:0 5px 16px rgba(21,17,13,.09)}
.advisor-entry .advmode-btn:hover{color:var(--color-text-strong)}
.advisor-funnel .progress{display:block;margin:.2rem 0 .85rem;padding:.6rem .35rem .2rem}
.progress-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;color:var(--color-text-muted);font-size:.7rem;font-weight:720;letter-spacing:.055em;text-transform:uppercase}
.progress-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:.38rem}
.progress-bars .pdot{width:auto;height:4px;border-radius:999px;background:color-mix(in srgb,var(--color-border) 80%,transparent);overflow:hidden}
.progress-bars .pdot.done,.progress-bars .pdot.now{background:var(--color-accent)}
.progress-bars .pdot.now{box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 14%,transparent)}
#quizMode .qcard{max-width:none;margin:0;padding:clamp(1.25rem,3vw,2rem);border:1px solid color-mix(in srgb,var(--color-border) 78%,transparent);border-radius:22px;background:var(--color-surface-raised);box-shadow:0 18px 46px rgba(21,17,13,.09);animation:questionIn 260ms var(--ease-reveal) both}
#quizMode .qnum{margin:0 0 .65rem;color:var(--color-accent);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
#quizMode .qcard h2{max-width:590px;margin:0;color:var(--color-text-strong);font-family:var(--font-body);font-size:clamp(1.45rem,3vw,2rem);font-weight:730;line-height:1.08;letter-spacing:-.035em}
#quizMode .qcard h2:focus{outline:none}
#quizMode .qsub{max-width:590px;margin:.65rem 0 1rem;color:var(--color-text-muted);font-size:.9rem;line-height:1.55}
#quizMode .explain-btn{min-height:40px;margin:0 0 1.1rem;padding:.45rem .7rem;border:1px solid var(--color-border);border-radius:11px;background:var(--color-canvas);color:var(--color-text-muted);font-size:.76rem;font-weight:700;text-align:left}
#quizMode .explain-btn::before{content:"i";display:inline-grid;place-items:center;width:18px;height:18px;margin-right:.45rem;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent-hover);font-family:var(--font-editorial);font-weight:800}
#quizMode .explain-btn:hover,#quizMode .explain-btn.open{border-color:color-mix(in srgb,var(--color-accent) 42%,var(--color-border));color:var(--color-text)}
#quizMode [hidden]{display:none!important}
#quizMode .explain-box{margin:-.45rem 0 1.15rem;padding:1rem;border:1px solid var(--color-border);border-radius:14px;background:var(--color-accent-soft);color:var(--color-text);font-size:.82rem;line-height:1.55}
#quizMode .opts{display:grid;gap:.65rem}
#quizMode .opt{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;align-items:center;gap:.85rem;min-height:76px;padding:.8rem .9rem;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);box-shadow:none;color:var(--color-text);text-align:left;transition:border-color var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
#quizMode .opt:hover{border-color:color-mix(in srgb,var(--color-accent) 52%,var(--color-border));background:var(--color-surface);box-shadow:0 9px 24px rgba(21,17,13,.08);transform:translateY(-1px)}
#quizMode .opt.sel{border-color:var(--color-accent);background:var(--color-accent-soft);box-shadow:0 0 0 1px var(--color-accent),0 10px 28px rgba(242,106,27,.1)}
#quizMode .oic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--color-canvas);font-size:1.35rem}
#quizMode .opt.sel .oic{background:var(--color-surface)}
#quizMode .otxt b{margin:0 0 .16rem;color:var(--color-text-strong);font-size:.96rem;line-height:1.25}
#quizMode .otxt span{display:block;color:var(--color-text-muted);font-size:.78rem;line-height:1.38}
#quizMode .ochk{width:22px;height:22px;border:1.5px solid var(--color-border);background:var(--color-surface)}
#quizMode .ochk::after{width:8px;height:8px;background:var(--color-accent)}
#quizMode .opt.sel .ochk{border-color:var(--color-accent)}
#quizMode .navrow{margin-top:1rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--color-border) 68%,transparent)}
#quizMode .navrow .btn{min-height:46px;border-radius:13px;padding:.7rem 1.15rem;font-size:.85rem}
#quizMode .navrow .btn.primary{min-width:116px;background:var(--color-accent);box-shadow:0 8px 20px rgba(242,106,27,.18)}
#quizMode .navrow .btn.primary:not(:disabled):hover{background:var(--color-accent-hover);transform:translateY(-1px)}
#quizMode .navrow .btn.primary:disabled{background:color-mix(in srgb,var(--color-border) 72%,var(--color-surface));color:var(--color-text-muted);box-shadow:none;opacity:.7}
#quizMode .navrow .btn.ghost{background:transparent;color:var(--color-text-muted)}
#quizMode .navrow .btn.ghost:hover{background:var(--color-canvas);color:var(--color-text)}
@keyframes questionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){
 .advisor-entry{padding:.45rem}
 .advisor-entry .advmode{margin-bottom:.55rem}
 .advisor-entry .advmode-btn{padding:.55rem .35rem;font-size:.76rem}
 .advisor-funnel .progress{padding-inline:.25rem}
 #quizMode .qcard{padding:1.1rem;border-radius:18px}
 #quizMode .qcard h2{font-size:1.45rem}
 #quizMode .opt{grid-template-columns:42px minmax(0,1fr) 22px;gap:.65rem;min-height:72px;padding:.7rem}
 #quizMode .oic{width:42px;height:42px;border-radius:12px;font-size:1.2rem}
 #quizMode .otxt b{font-size:.9rem}
 #quizMode .otxt span{font-size:.74rem}
 #quizMode .navrow{margin:1rem 0 0;padding:1rem 0 0}
}
@media(prefers-reduced-motion:reduce){#quizMode .qcard{animation:none}}

/* Free-text "Describe your situation" mode */
#describeMode .describe-panel{max-width:none;margin:0;padding:clamp(1.1rem,3vw,1.8rem);border:1px solid color-mix(in srgb,var(--color-border) 78%,transparent);border-radius:22px;background:var(--color-surface-raised);box-shadow:0 18px 46px rgba(21,17,13,.09)}
#describeMode .describe-lead{display:block;margin:0 0 .7rem;color:var(--color-text-strong);font-size:.95rem;font-weight:640;line-height:1.5}
#describeMode textarea{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:.75rem .85rem;border:1.5px solid color-mix(in srgb,var(--color-border) 82%,transparent);border-radius:12px;background:var(--color-surface);color:var(--color-text);resize:vertical;min-height:88px}
#describeMode textarea:focus{outline:none;border-color:var(--color-accent)}
#describeMode .describe-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.8rem}
#describeMode .describe-note{color:var(--color-text-muted);font-size:.76rem}
#describeMode .describe-reading{margin-top:1.1rem;display:grid;gap:.8rem}
#describeMode .describe-read-block{border:1px solid color-mix(in srgb,var(--color-border) 78%,transparent);border-radius:14px;padding:.85rem 1rem;background:var(--color-surface)}
#describeMode .describe-read-block h3{margin:0 0 .5rem;font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--color-text-muted)}
#describeMode .describe-read-block ul{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
#describeMode .describe-read-block li{font-size:.9rem;line-height:1.5;color:var(--color-text)}
#describeMode .describe-confirm{border-color:color-mix(in srgb,var(--color-accent) 40%,var(--color-border));background:color-mix(in srgb,var(--color-accent) 6%,var(--color-surface))}
#describeMode .describe-confirm h3{color:var(--color-accent)}
#describeMode .describe-hint{margin:.55rem 0 0;font-size:.82rem;color:var(--color-text-muted)}
#describeMode .describe-note-block{border-style:dashed}
@media(max-width:560px){
 .advisor-entry .advmode{grid-template-columns:1fr}
 #describeMode .describe-panel{padding:1.1rem;border-radius:18px}
}