/* Dosha Quiz (BPI-21) — page styles. Site chrome comes from global.css. */
:root{
  --vata:#4A6FA5;--pitta:#B4552F;--kapha:#4C7A5A;
  --vata-soft:rgba(74,111,165,.10);
  --pitta-soft:rgba(180,85,47,.10);
  --kapha-soft:rgba(76,122,90,.10);
  --r-card:14px;
  --bdy:'Source Serif 4',Georgia,serif;
  --bdr-strong:rgba(0,31,63,.16);
}
.dq{--px:clamp(20px,4vw,44px);padding:clamp(40px,6vw,76px) 0 clamp(48px,7vw,88px)}
.dq .ctn{max-width:760px;margin:0 auto;padding:0 var(--px)}
.dq .btn--q{background:transparent;color:var(--txt2);border:1.5px solid var(--bdr-strong)}
.dq .btn--q:hover{background:var(--cream);color:var(--txt);border-color:rgba(205,169,74,.55)}
.dq .btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.dq .btn svg{flex-shrink:0}

.dq .eyebrow{font-family:var(--bd);font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin:0 0 16px}
.dq h1{font-family:var(--hd);font-weight:500;line-height:1.12;color:var(--txt);letter-spacing:-.015em;font-size:clamp(2rem,4.4vw,3rem);margin-bottom:14px;text-wrap:balance}
.dq .standfirst{font-family:var(--hd);font-style:italic;font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.5;color:var(--txt2);margin-bottom:10px;max-width:52ch}
.dq .byline{font-family:var(--bd);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin-bottom:34px}
.dq p{color:var(--txt2);max-width:70ch;line-height:1.75}

.dq .screen{display:none}
.dq .screen.is-active{display:block;animation:dq-rise .35s cubic-bezier(.22,1,.36,1) both}
@keyframes dq-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .dq .screen.is-active{animation:none}
}

.dq .instr{background:var(--cream);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:clamp(26px,4vw,38px) clamp(22px,3.5vw,36px);margin:0 0 32px;border-radius:var(--r-card)}
.dq .instr__head{font-family:var(--bd);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);margin:0 0 18px}
.dq .instr ol{counter-reset:instr;margin:0;padding:0;list-style:none}
.dq .instr li{counter-increment:instr;position:relative;padding-left:32px;margin-bottom:11px;font-size:15.5px;line-height:1.6;color:var(--txt2);max-width:62ch}
.dq .instr li:last-child{margin-bottom:0}
.dq .instr li::before{content:counter(instr);position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:999px;background:var(--white);border:1px solid rgba(205,169,74,.5);font-family:var(--bd);font-size:11px;font-weight:600;color:var(--gold-text);display:flex;align-items:center;justify-content:center;line-height:1}

.dq .doshakeys{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.dq .key{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border-radius:999px;font-family:var(--bd);font-size:12px;font-weight:600;letter-spacing:.04em}
.dq .key i{width:8px;height:8px;border-radius:999px;display:block}
.dq .key--v{background:var(--vata-soft);color:var(--vata)} .dq .key--v i{background:var(--vata)}
.dq .key--p{background:var(--pitta-soft);color:var(--pitta)} .dq .key--p i{background:var(--pitta)}
.dq .key--k{background:var(--kapha-soft);color:var(--kapha)} .dq .key--k i{background:var(--kapha)}

.dq .note{font-size:13px;line-height:1.7;color:var(--txt3);border-top:1px solid var(--bdr);margin-top:34px;padding-top:18px;max-width:66ch}
.dq .note a{color:var(--gold-text);border-bottom:1px solid rgba(205,169,74,.45)}
.dq .note a:hover{border-bottom-color:var(--gold)}

.dq .prog{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,4vw,38px)}
.dq .prog__track{flex:1;height:3px;background:var(--bdr);border-radius:999px;overflow:hidden}
.dq .prog__fill{height:100%;background:var(--gold);border-radius:999px;transition:width .4s cubic-bezier(.22,1,.36,1)}
.dq .prog__txt{font-family:var(--bd);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);font-variant-numeric:tabular-nums;white-space:nowrap}

.dq .q{border:0;padding:0;margin:0;min-width:0}
.dq .q__legend{display:block;font-family:var(--hd);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.05rem);line-height:1.2;letter-spacing:-.012em;color:var(--txt);margin:0 0 6px;padding:0}
.dq .q__hint{font-family:var(--bd);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3);margin:0 0 24px}
.dq .opts{display:flex;flex-direction:column;gap:12px}
.dq .opt{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;background:var(--white);border:1px solid var(--bdr-strong);border-radius:var(--r-card);padding:18px 20px;cursor:pointer;font-family:var(--bdy);font-size:16.5px;line-height:1.6;color:var(--txt2);transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.dq .opt:hover{border-color:rgba(205,169,74,.55);background:var(--cream);color:var(--txt)}
.dq .opt__mark{flex:0 0 auto;width:20px;height:20px;border-radius:999px;border:1.5px solid var(--bdr-strong);margin-top:.28em;position:relative;transition:border-color .2s ease,background .2s ease}
.dq .opt__mark::after{content:"";position:absolute;inset:4px;border-radius:999px;background:var(--navy);opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}
.dq .opt[aria-checked="true"]{border-color:var(--navy);background:var(--cream);color:var(--txt);box-shadow:var(--shadow-s)}
.dq .opt[aria-checked="true"] .opt__mark{border-color:var(--navy)}
.dq .opt[aria-checked="true"] .opt__mark::after{opacity:1;transform:scale(1)}
.dq .opt:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

.dq .nav-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:clamp(26px,4vw,36px);padding-top:22px;border-top:1px solid var(--bdr)}

.dq .res__head{margin-bottom:clamp(28px,4vw,40px)}
.dq .res__dom{font-family:var(--hd);font-weight:500;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;letter-spacing:-.014em;color:var(--txt);margin:0 0 10px}
.dq .bars{margin:0 0 clamp(28px,4vw,38px)}
.dq .bar+.bar{margin-top:22px}
.dq .bar__lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;gap:16px}
.dq .bar__name{font-family:var(--bd);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--txt)}
.dq .bar__meta{font-family:var(--bd);font-size:12.5px;font-weight:500;color:var(--txt3);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.dq .bar__meta b{font-weight:700;color:var(--txt);font-size:15px}
.dq .bar__track{height:8px;background:var(--cream);border-radius:999px;overflow:hidden;border:1px solid var(--bdr)}
.dq .bar__fill{height:100%;width:0;border-radius:999px;transition:width .9s cubic-bezier(.22,1,.36,1)}
.dq .bar--v .bar__fill{background:var(--vata)} .dq .bar--p .bar__fill{background:var(--pitta)} .dq .bar--k .bar__fill{background:var(--kapha)}

.dq .prakriti-note{font-size:16.5px;line-height:1.7;color:var(--txt2);margin:0 0 clamp(24px,3.5vw,32px);max-width:66ch}
.dq .prakriti-note a{color:var(--gold-text);border-bottom:1px solid rgba(205,169,74,.45)}
.dq .prakriti-note a:hover{border-bottom-color:var(--gold)}

.dq .readout{background:var(--cream);border-radius:var(--r-card);padding:clamp(24px,3.5vw,32px);margin:0 0 28px}
.dq .readout h2{font-family:var(--hd);font-weight:500;font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.25;color:var(--txt);margin:0 0 12px}
.dq .readout p{font-size:16.5px;margin:0 0 14px}
.dq .readout p:last-child{margin-bottom:0}

.dq .cta{border-top:1px solid var(--bdr);margin-top:clamp(32px,5vw,46px);padding-top:clamp(28px,4vw,38px)}
.dq .cta .btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.dq .retake-row{margin-top:26px;padding-top:22px;border-top:1px solid var(--bdr)}
.dq .retake{background:none;border:0;padding:0;cursor:pointer;font-family:var(--bd);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--bdr-strong);transition:color .2s ease,border-color .2s ease}
.dq .retake:hover{color:var(--txt);border-bottom-color:var(--gold)}

.dq .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media print{
  .dq .btns,.dq .retake-row,.dq .note{display:none !important}
  .dq .readout,.dq .bars{break-inside:avoid}
}
@media(max-width:640px){
  .dq{--px:20px}
  .dq .opt{padding:16px 17px;font-size:15.5px;gap:12px}
  .dq .instr li{font-size:15px}
  .dq .cta .btns{flex-direction:column;align-items:stretch}
  .dq .cta .btns .btn{width:100%}
  .dq .nav-row .btn{padding:13px 22px}
}
@media(max-width:390px){
  .dq{--px:16px}
}