/* The picker, /yantras/which-yantra/ and its twins (SRS v3 FR-DES-2's picker template; mockup/src.html:1359-1373).
   Linked after site.css by these three pages only. The quiz sits on the band and is shown by picker.js; the result and
   the three tables it reads sit on the ground below it, so they read without the script. */
.picker { padding-block: 52px 96px; }
.picker h1 { font-size: var(--step-2); margin-block: 12px 14px; }
.quiz { margin-top: 36px; max-width: 900px; }
.quiz__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 260px; }
.quiz__progress span { height: 3px; border-radius: 2px; background: var(--rule); }
.quiz__progress span.on { background: var(--gold); }
.quiz__count { color: var(--band-ink-2); margin-top: 14px; font-size: var(--step-small); }
.quiz__q { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); margin-block: 6px 24px; }
.opts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.opt { display: grid; gap: 4px; align-content: start; text-align: left; padding: 18px 20px; min-height: 92px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--band-2); color: var(--band-ink); transition: border-color .2s, translate .2s, opacity .2s; }
.opt:hover { border-color: var(--gold); translate: 0 -2px; }
.opt b { font: 600 1.1875rem/1.3 var(--font-display); }
.opt span { color: var(--band-ink-2); font-size: var(--step-small); }
.opts:has(.opt:hover) .opt:not(:hover) { opacity: .7; }
.textbtn { border: 0; background: none; color: var(--ink-2); min-height: 44px; padding: 0; text-decoration: underline; text-underline-offset: .2em; }
.textbtn:hover { color: var(--ink); }
.result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; align-items: center; }
@media (min-width: 900px) { .result { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.result__tile { max-width: 440px; width: 100%; }
.result p { color: var(--ink-2); }
.result__acts { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 22px; }
.result__alt { margin-top: 18px; }
.result p + p { margin-top: 10px; }
.result__lead { font-weight: 600; color: var(--ink); }
.result__name { font: 600 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.25 var(--font-display); }
.result__name strong { color: var(--ink); }
.picksec h2 { font-size: var(--step-2); }
.picksec h3 { font-size: 1.25rem; margin: 40px 0 10px; }
.picksec > .wrap > p, .picksec li { color: var(--ink-2); max-width: 44em; }
.picksec > .wrap > p + p { margin-top: 14px; }
.picksec ul { padding-left: 1.3em; display: grid; gap: 8px; margin: 14px 0; }
.picksec li::marker { color: var(--gold-ink); }