/* Mobile-first chapter option; all rules are scoped to this new screen. */
#app.in-diagnostic:has(.dq-chapter){grid-template-rows:minmax(0,1fr) auto}
#app .dq-chapter{padding:0 0 20px;gap:0;min-height:100%;background:var(--bg)}
.dq-chapter-top{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:12px;min-height:58px;padding:4px 20px 8px;flex:none}
.dq-chapter-top p{margin:0;text-align:center;color:var(--muted);font:600 13px/1.4 var(--wlf-font-body);letter-spacing:.015em}
#app .dq-chapter-top button{min-width:44px;min-height:44px;padding:0;font-size:14px;font-weight:500}
.dq-chapter-hero{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;flex:none}
.dq-chapter-copy{display:grid;align-content:start;gap:18px;padding:28px 24px 0}
#app .dq-chapter h1{font-family:var(--wlf-font-body);font-size:32px;font-weight:750;line-height:1.16;letter-spacing:-.035em;max-width:100%}
.dq-chapter-explanation{display:grid;gap:10px}
.dq-chapter-explanation p{margin:0;color:#c8d4e2;font:400 16px/1.55 var(--wlf-font-body);text-wrap:pretty}
.dq-chapter-helper{margin:0;color:var(--muted);font:400 13px/1.5 var(--wlf-font-body)}
#app #diagnostic-footer:has(.dq-chapter-actions){padding:14px 24px 17px;background:var(--bg)}
#app #diagnostic-footer .dq-chapter-actions .btn{min-height:56px;font-size:17px;font-weight:650;border-radius:14px}
#app .dq-chapter button:focus-visible,#app .dq-chapter-actions button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:360px){.dq-chapter-top{padding-inline:16px}.dq-chapter-copy{padding:24px 20px 0}#app .dq-chapter h1{font-size:30px}#app #diagnostic-footer:has(.dq-chapter-actions){padding-inline:20px}}
@media(max-height:700px){.dq-chapter-hero{max-height:210px;object-position:center 56%}.dq-chapter-copy{padding-top:22px;gap:16px}}
@media(prefers-reduced-motion:reduce){.dq-chapter *,.dq-chapter-actions *{transition:none!important;animation:none!important}}