/* Reader's Card quiz — shared by index.html (A) and index-b.html (B).
   Tokens are inherited from each page's :root, so this file never redefines
   the palette; it only lays out the overlay. Copy: quiz-copy.md. */

/* the entry point on the page itself */
.quiz-cta{margin:14px 0 0;text-align:center}
.q-link{background:none;border:0;cursor:pointer;font:400 .96rem/1.4 var(--body);
  color:var(--gold-2);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(200,163,95,.45);padding:4px}
.q-link:hover{text-decoration-color:var(--gold)}

.q-open{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;background:rgba(10,7,4,.92);backdrop-filter:blur(3px);padding:clamp(16px,5vh,64px) 16px}
.q-open[hidden]{display:none}

.q-panel{width:min(560px,100%);background:var(--card);border:1px solid rgba(200,163,95,.28);
  border-radius:3px;padding:clamp(20px,4vw,38px);box-shadow:0 24px 70px rgba(0,0,0,.55)}

/* progress: a row of ticks, not a loading bar — this is a card being filled in */
/* stop the ticks short of the close button so they never crowd it */
.q-prog{display:flex;gap:6px;margin-bottom:22px;padding-right:26px}
.q-prog span{flex:1;height:2px;background:rgba(240,230,210,.16);transition:background .3s}
.q-prog span.on{background:var(--gold)}

.q-step{font:400 .74rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-2);opacity:.6;margin-bottom:10px}
.q-ask{font:400 clamp(1.35rem,3.4vw,1.85rem)/1.25 var(--display);color:var(--cream);margin:0 0 6px}
.q-hint{font:400 .88rem/1.5 var(--body);color:var(--cream-2);opacity:.75;margin:0 0 18px}

.q-opts{display:flex;flex-direction:column;gap:9px;margin:0 0 20px;padding:0;list-style:none}
.q-opt{display:block;width:100%;text-align:left;cursor:pointer;
  font:400 1.02rem/1.4 var(--body);color:var(--cream);
  background:rgba(240,230,210,.04);border:1px solid rgba(240,230,210,.14);border-radius:2px;
  padding:13px 15px;transition:border-color .18s,background .18s}
.q-opt:hover{border-color:rgba(200,163,95,.55);background:rgba(200,163,95,.07)}
.q-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.q-opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(200,163,95,.13)}
.q-opt[aria-pressed="true"]::after{content:"✦";float:right;color:var(--gold);margin-left:10px}

.q-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.q-next{font:400 .98rem/1 var(--body);color:var(--night);background:var(--gold);
  border:0;border-radius:2px;padding:12px 22px;cursor:pointer}
.q-next:disabled{opacity:.35;cursor:default}
.q-back{background:none;border:0;cursor:pointer;font:400 .86rem/1 var(--body);
  color:var(--cream-2);opacity:.7;text-decoration:underline;text-underline-offset:3px}
.q-back:hover{opacity:1}
.q-skip{background:none;border:0;cursor:pointer;font:400 .86rem/1 var(--body);
  color:var(--cream-2);opacity:.55;text-decoration:underline;text-underline-offset:3px}
.q-skip:hover{opacity:.9}

/* the reveal: a library-card entry, not a quiz result */
.q-card{border:1px solid rgba(200,163,95,.4);border-radius:2px;padding:22px;
  background:linear-gradient(180deg,rgba(200,163,95,.09),rgba(200,163,95,.02))}
.q-card-over{font:400 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-2);opacity:.85;margin:0 0 10px}
.q-card-name{font:400 clamp(1.7rem,4.6vw,2.3rem)/1.1 var(--display);color:var(--cream);margin:0 0 12px}
.q-card-body{font:400 1.02rem/1.62 var(--body);color:var(--cream-2);margin:0}
.q-card-tenet{font:400 .84rem/1.5 var(--body);color:var(--gold-2);opacity:.85;
  margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(200,163,95,.2)}

.q-field{width:100%;font:400 1rem/1.3 var(--body);color:var(--cream);
  background:rgba(0,0,0,.25);border:1px solid rgba(240,230,210,.2);border-radius:2px;padding:13px 14px}
.q-field:focus{outline:none;border-color:var(--gold)}
textarea.q-field{min-height:96px;resize:vertical}
.q-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;
  font:400 .9rem/1.45 var(--body);color:var(--cream-2);cursor:pointer}
.q-check input{margin-top:3px;accent-color:var(--gold)}
.q-err{font:400 .88rem/1.4 var(--body);color:var(--ember);margin:10px 0 0;min-height:1.2em}
.q-fine{font:400 .82rem/1.5 var(--body);color:var(--cream-2);opacity:.6;margin:14px 0 0}

.q-x{position:absolute;top:14px;right:16px;background:none;border:0;cursor:pointer;
  font:400 1.4rem/1 var(--body);color:var(--cream-2);opacity:.5}
.q-x:hover{opacity:1}
.q-panel{position:relative}

@media (prefers-reduced-motion:reduce){
  .q-opt,.q-prog span{transition:none}
}