/* textRay share pages · quiz landing (/quiz, /quiz/<slug>, /quiz/<slug>/v/<hash>)
   and the report share preview (/s/<id>). Tokens from styles.css; the card
   blocks mirror the in-app share cards (docs/share-cards-mock.html §4e, §5f). */

.nav-inner { justify-content: space-between; }

/* ---------- quiz: the friend's verdict ---------- */

.verdict-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 560px; margin: 8px 0 28px;
  background: #CFEEC5; color: #141412;
  border: 2.5px solid #141412; border-radius: 8px;
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 18px 20px 20px;
}
.verdict-card .label,
.qcard .label,
.read-card .label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  color: inherit; opacity: .72;
}
.verdict-name {
  margin: 0; font-weight: 900; font-size: clamp(26px, 4.6vw, 38px);
  line-height: 1.04; letter-spacing: -.02em; text-wrap: balance;
}
.verdict-copy { margin: 0; font-size: 16px; line-height: 1.45; color: #4A473F; }
.ribbon {
  position: absolute; top: 14px; right: -34px; width: 130px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: #141412; color: #C6F432; transform: rotate(45deg);
  font-weight: 900; font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}

/* ---------- quiz: first question ---------- */

.quiz-start { padding: 44px 22px 8px; }
.qcard {
  display: flex; flex-direction: column; gap: 12px; max-width: 620px;
  background: var(--card); border: 2px solid var(--line);
  box-shadow: 6px 6px 0 var(--shadow); padding: 22px 22px 20px;
}
.qcard .q { margin: 0; font-weight: 700; font-size: 19px; line-height: 1.3; }
.qcard .bubble { max-width: 90%; }
.qcard .reveal.open { border-top: 0; padding-top: 0; margin-top: 4px; }
.qcard .options { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.qcard .options input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qcard .option {
  display: block; cursor: pointer; text-decoration: none; font-weight: 700; font-size: 15px;
  border: 2px solid var(--line); background: var(--panel); padding: 10px 14px;
  box-shadow: 3px 3px 0 var(--shadow); transition: transform .12s ease, box-shadow .12s ease;
}
.qcard .option:hover,
.qcard input:focus-visible + .option { background: var(--lime); color: var(--ink-fixed); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.qcard input:checked + .option { background: var(--lime); color: var(--ink-fixed); transform: translate(3px, 3px); box-shadow: none; }
.qcard:has(input:checked) .option:not(:checked + .option) { opacity: .55; }
/* the reveal: hidden until an option is picked */
.qcard .reveal { display: none; flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 6px; border-top: 2px dashed var(--dim-line); padding-top: 14px; }
.qcard .reveal p { margin: 0; font-weight: 700; font-size: 16px; line-height: 1.35; }
.qcard:has(input:checked) .reveal, .qcard .reveal.open { display: flex; }
.qcard:has(input:checked) .note { display: none; }
.qcard .note { margin: 6px 0 0; font-size: 14px; }

/* ---------- shared CTA band + store row ---------- */

.share-cta { padding: 24px 22px 56px; }
.share-cta .cta-band { max-width: 620px; margin: 16px 0 0; }
.store-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.store-row .btn { font-size: 15px; padding: 11px 18px; }
.share-cta .fine { margin-top: 16px; text-transform: none; letter-spacing: 0; font-size: 13px; }

/* ---------- quiz index ---------- */

.quiz-list { padding: 40px 22px 8px; }
.quiz-list .related-grid a { display: grid; gap: 4px; }
.quiz-list .q-title { font-weight: 900; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }

/* ---------- report share preview ---------- */

.share-hero .page-h1 { max-width: 20ch; }
.read-card {
  --card-bg: #F7D3B8; --card-ink: #141412; --card-muted: #666259; --card-shadow: #141412; --flag-tint: #F7D3B8;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  max-width: 560px; margin: 8px 0 28px;
  background: var(--card-bg); color: var(--card-ink);
  border: 2.5px solid var(--card-ink); border-radius: 8px;
  box-shadow: 6px 6px 0 var(--card-shadow);
  padding: 20px 22px 22px;
}
.read-card .label { color: var(--card-muted); opacity: 1; }
.read-headline {
  margin: 0; font-weight: 900; font-size: clamp(28px, 5vw, 42px);
  line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; color: var(--card-ink);
}
.read-headline.split { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: clamp(40px, 8vw, 64px); }
.read-headline.split small { font-size: 16px; font-weight: 700; color: var(--card-muted); margin-right: 10px; }
.read-body { margin: 0; font-size: 16px; line-height: 1.45; color: var(--card-ink); }
.flag-pill {
  display: inline-block; font-weight: 700; font-size: 13px; padding: 4px 12px;
  border: 2px solid #141412; border-radius: 999px; background: #F6F3EA; color: #141412;
}

@media (prefers-color-scheme: dark) {
  .verdict-copy { color: #2E2C26; }
}
@media (max-width: 640px) {
  .quiz-start, .share-cta, .quiz-list { padding-inline: 16px; }
}