/* Collector Profile — quiz, result and archetype pages. Builds on /assets/pages.css. */

/* Quiz shell */
.quiz { margin:32px 0 8px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); padding:24px 20px; scroll-margin-top:16px; }
@media (min-width:720px) { .quiz { padding:32px; } }
.quiz h2, .quiz h3 { margin-top:0; }
.quiz :focus { outline:none; }
.quiz :focus-visible { outline:2px solid var(--inner); outline-offset:2px; }
.quiz-start { text-align:center; }
.quiz-start .icons { display:flex; justify-content:center; gap:6px; margin-bottom:14px; }
.quiz-start .icons img { width:40px; height:40px; }
.quiz-start h2 { font-size:24px; margin:6px 0 6px; }
.quiz-start p { color:var(--soft); margin:0 auto 20px; max-width:30rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px var(--sans); border-radius:8px; padding:12px 20px; cursor:pointer; text-decoration:none; border:1px solid transparent; }
.btn-primary { background:var(--accent); color:var(--on-text); }
.btn-primary:hover { background:var(--accent-2); color:var(--on-text); }
.btn-ghost { background:none; color:var(--soft); border-color:var(--line-2); }
.btn-ghost:hover { color:var(--text); border-color:var(--muted); }
.btn-link { background:none; border:0; color:var(--soft); padding:8px 4px; font:500 14px var(--sans); cursor:pointer; }
.btn-link:hover { color:var(--text); }
.btn-link:disabled { visibility:hidden; }

/* Progress + question */
.q-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.q-count { font:500 12px var(--mono); color:var(--muted); letter-spacing:.06em; }
.progress { height:4px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:22px; }
.progress i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--outer), var(--inner)); transition:width .25s ease; }
.q-text { font-size:21px; line-height:1.3; letter-spacing:-.01em; margin:0 0 18px; text-wrap:balance; }
.answers { display:grid; gap:10px; }
@media (min-width:560px) { .answers { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.answer { text-align:left; font:500 16px/1.4 var(--sans); color:var(--text); background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px; padding:16px; min-height:58px; cursor:pointer; transition:border-color .12s, background .12s; }
.answer:hover { border-color:var(--muted); }
.answer[aria-pressed="true"] { border-color:var(--inner); background:#0e2338; }

/* Result */
.result-head { display:flex; gap:18px; align-items:center; margin-bottom:8px; }
.result-head img { width:88px; height:88px; flex:none; background:var(--bg); border:1px solid var(--line-2); border-radius:14px; padding:8px; }
.result-head h2 { font-size:28px; margin:4px 0 2px; line-height:1.15; }
.result-head .tagline { margin:0; color:var(--soft); }
.secondary { font-size:14px; color:var(--muted); margin:10px 0 0; }
.secondary a { color:var(--soft); }
.cols { display:grid; gap:16px; margin:20px 0; }
@media (min-width:640px) { .cols { grid-template-columns:1fr 1fr; } }
.box { border:1px solid var(--line); border-radius:10px; padding:16px; background:var(--bg); }
.box h3 { font-size:15px; margin:0 0 8px; }
.box ul { margin:0; padding-left:20px; }
.box li { color:#d6dcef; font-size:15px; }
.box li + li { margin-top:6px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0; }

/* Share */
.share { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.share-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.share-preview { display:flex; gap:12px; margin:14px 0; }
.share-preview canvas { width:96px; height:auto; border-radius:8px; border:1px solid var(--line-2); background:var(--bg); }
.share-preview canvas.sq { width:170px; }
.share-msg { font-size:13px; color:var(--pass); min-height:1.2em; margin:8px 0 0; }

/* Investment question */
.invest { border-top:1px solid var(--line); margin-top:24px; padding-top:24px; }
.invest h3 { font-size:20px; margin:0 0 6px; }
.invest > p { color:var(--soft); margin:0 0 16px; }

/* Portfolio */
.portfolio { margin-top:20px; }
.pf-grid { display:grid; gap:20px; align-items:center; }
@media (min-width:640px) { .pf-grid { grid-template-columns:200px 1fr; } }
.donut { width:200px; height:200px; margin:0 auto; display:block; }
.legend { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.legend li { display:grid; grid-template-columns:12px 1fr auto auto; gap:10px; align-items:center; font-size:15px; }
.legend i { width:12px; height:12px; border-radius:3px; }
.legend .pct { font:500 14px var(--mono); color:var(--text); text-align:right; }
.legend .usd { font:13px var(--mono); color:var(--muted); text-align:right; min-width:4.5em; }
.risk { display:inline-block; font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:999px; padding:3px 10px; color:var(--soft); }
.pf-note { font-size:13px; color:var(--muted); margin:12px 0 0; }
.gate { margin-top:16px; border-radius:10px; overflow:hidden; }
.gate iframe { display:block; width:100%; border:0; }

/* Recommendations */
.recs { display:grid; gap:10px; margin:12px 0 0; }
@media (min-width:640px) { .recs { grid-template-columns:1fr 1fr; } }
.rec { display:block; border:1px solid var(--line); border-radius:10px; background:var(--bg); padding:14px 16px; text-decoration:none; color:var(--soft); font-size:14px; line-height:1.5; }
.rec:hover { border-color:var(--muted); color:var(--soft); }
.rec strong { display:block; color:var(--text); font-size:15px; }
.rec .eyebrow { display:block; margin-bottom:4px; }
.fine { font-size:12.5px; color:var(--muted); line-height:1.6; margin:16px 0 0; }

/* Article: archetype cards */
.types { display:grid; gap:10px; margin:16px 0; }
@media (min-width:640px) { .types { grid-template-columns:1fr 1fr; } }
.type { display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:14px 16px; text-decoration:none; color:var(--soft); transition:border-color .15s; }
.type:hover { border-color:var(--muted); color:var(--soft); }
.type img { width:48px; height:48px; }
.type h3 { margin:0 0 4px; font-size:16px; color:var(--text); }
.type p { margin:0; font-size:14.5px; line-height:1.55; color:var(--soft); }

/* FAQ */
.faq details { border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary { cursor:pointer; font-weight:600; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font:400 20px/1 var(--mono); color:var(--muted); }
.faq details[open] summary::after { content:'−'; }
.faq details p { margin:10px 0 0; }

.disclaimer { border:1px solid var(--line-2); border-radius:10px; background:var(--surface); padding:16px; margin:32px 0 0; font-size:14px; color:var(--soft); }
.disclaimer p { margin:0; color:var(--soft); }
.disclaimer p + p { margin-top:8px; }

@media (prefers-reduced-motion:reduce) { .progress i { transition:none; } }

/* Archetype guide pages */
.arch-hero { display:flex; align-items:center; gap:18px; margin:4px 0 16px; }
.arch-hero img { width:96px; height:96px; flex:none; background:var(--surface); border:1px solid var(--line-2); border-radius:16px; padding:10px; }
.arch-hero h1 { margin:4px 0 2px; }
.arch-hero .tagline { margin:0; color:var(--c); font-weight:500; }
@media (max-width:480px) { .arch-hero img { width:72px; height:72px; } }
.alloc { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:16px; margin:16px 0; }
.alloc-bar { display:flex; gap:2px; height:14px; border-radius:999px; overflow:hidden; margin-bottom:14px; }
.alloc-bar i { display:block; height:100%; }
.alloc .legend li { grid-template-columns:12px 1fr auto; }
.article .recs { margin:16px 0; }

/* Start Here pillar page */
.toc { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:16px 20px; margin:28px 0 8px; }
.toc ol { margin:6px 0 0; padding-left:22px; columns:2 16rem; column-gap:28px; }
.toc li { break-inside:avoid; }
.toc li + li { margin-top:4px; }
.toc a { color:var(--soft); text-decoration:none; }
.toc a:hover { color:var(--text); text-decoration:underline; }
.quiz-cta { border:1px solid var(--line-2); border-radius:12px; background:var(--surface); padding:20px; margin:20px 0; text-align:center; }
.quiz-cta .icons { display:flex; justify-content:center; gap:6px; margin-bottom:10px; }
.quiz-cta p { margin:0 auto 16px; max-width:30rem; color:var(--soft); }
.quiz-cta strong { display:block; color:var(--text); font-size:19px; margin-bottom:4px; }
.article .video { position:relative; aspect-ratio:16 / 9; margin:24px 0; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.article .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.text-cells td, .text-cells th { white-space:normal; vertical-align:top; }
.text-cells td:first-child { white-space:nowrap; color:var(--text); }