/* Who Said It? in the Hope look. Overrides who-said-it.css under body.hope-guide. */

body.hope-guide .wsi { color: var(--hg-text); max-width: 720px; }
body.hope-guide .wsi-card {
  background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius);
  box-shadow: var(--hg-shadow); padding: clamp(20px, 4vw, 36px);
}
body.hope-guide .wsi-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide .wsi-title {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: currentColor; color: var(--hg-text) !important; font-weight: 800; font-size: clamp(32px, 6vw, 44px);
}
body.hope-guide .wsi-lede { font-size: 17px; line-height: 1.6; color: var(--hg-muted); }
body.hope-guide .wsi-stat-num { color: var(--hg-text); font-weight: 800; }
body.hope-guide .wsi-stat-den { color: var(--hg-faint); }
body.hope-guide .wsi-stat-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--hg-muted); }
body.hope-guide .wsi-fineprint { font-size: 15px; font-style: normal; color: var(--hg-muted); }

/* Buttons */
body.hope-guide .wsi-btn { min-height: 44px; font-size: 16px; font-weight: 700; letter-spacing: 0; border-radius: 10px; }
body.hope-guide .wsi-btn--primary { background: var(--hg-primary); color: #fff; box-shadow: none; }
body.hope-guide .wsi-btn--primary:hover { background: var(--hg-primary-hover); transform: none; box-shadow: none; }
body.hope-guide .wsi-btn--ghost { background: var(--hg-primary-soft); color: var(--hg-primary); border-color: transparent; }
body.hope-guide .wsi-btn--ghost:hover { background: #e0e6fc; }

/* Play screen */
body.hope-guide .wsi-round { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-text); }
body.hope-guide .wsi-round-of { color: var(--hg-muted); font-weight: 600; }
body.hope-guide .wsi-score-pill, body.hope-guide .wsi-streak-pill { font-size: 14px; font-weight: 700; background: var(--hg-primary-soft); color: var(--hg-primary); }
body.hope-guide .wsi-streak-pill { background: var(--hg-reaffirm-bg); color: var(--hg-reaffirm); }
body.hope-guide .wsi-progress { background: var(--hg-primary-soft); }
body.hope-guide .wsi-progress span { background: var(--hg-primary); }
body.hope-guide .wsi-cat { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
body.hope-guide .wsi-quote > svg { color: var(--hg-primary); }
body.hope-guide .wsi-quote p { font-style: normal; font-weight: 600; font-size: clamp(20px, 3.2vw, 25px); line-height: 1.45; color: var(--hg-text); }
body.hope-guide .wsi-prompt { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }

body.hope-guide .wsi-opt {
  min-height: 52px; border: 1.5px solid var(--hg-border-strong); background: var(--hg-surface);
  font-size: 17px; font-weight: 600; color: var(--hg-text); border-radius: 12px;
}
body.hope-guide .wsi-opt:hover:not(:disabled) { border-color: var(--hg-primary); background: var(--hg-primary-soft); transform: none; }
body.hope-guide .wsi-opt-letter { background: var(--hg-primary-soft); color: var(--hg-primary); font-size: 15px; }
body.hope-guide .wsi-opt:disabled { opacity: 1; color: var(--hg-text); }
body.hope-guide .wsi-opt.is-correct { border-color: var(--hg-develop); background: var(--hg-develop-bg); }
body.hope-guide .wsi-opt.is-correct .wsi-opt-letter { background: var(--hg-develop); color: #fff; }
body.hope-guide .wsi-opt.is-wrong { border-color: var(--hg-reverse); background: var(--hg-reverse-bg); }
body.hope-guide .wsi-opt.is-wrong .wsi-opt-letter { background: var(--hg-reverse); color: #fff; }
/* Text + icon tag on the answered buttons (added by who-said-it.js) */
body.hope-guide .wsi-opt-tag { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; }
body.hope-guide .wsi-opt-tag svg { width: 15px; height: 15px; }
body.hope-guide .wsi-opt.is-correct .wsi-opt-tag { color: var(--hg-develop); }
body.hope-guide .wsi-opt.is-wrong .wsi-opt-tag { color: var(--hg-reverse); }

body.hope-guide .wsi-reveal { border-radius: 12px; border: 1px solid var(--hg-border); background: var(--hg-surface-2); }
body.hope-guide .wsi-reveal.is-right { border-color: #a7dcc1; background: var(--hg-develop-bg); }
body.hope-guide .wsi-reveal.is-wrong { border-color: #f4bdb6; background: var(--hg-reverse-bg); }
body.hope-guide .wsi-reveal-head { font-size: 18px; font-weight: 800; }
body.hope-guide .wsi-reveal.is-right .wsi-reveal-head { color: var(--hg-develop); }
body.hope-guide .wsi-reveal.is-wrong .wsi-reveal-head { color: var(--hg-reverse); }
body.hope-guide .wsi-reveal-answer, body.hope-guide .wsi-reveal-note { font-size: 16px; line-height: 1.6; color: var(--hg-body); }
body.hope-guide .wsi-reveal-source { font-size: 14px; font-style: normal; color: var(--hg-muted); }

/* Result */
body.hope-guide .wsi-result-medal { color: var(--hg-primary); }
body.hope-guide .wsi-result-score { color: var(--hg-text); }
body.hope-guide .wsi-result-den { color: var(--hg-faint); }
body.hope-guide .wsi-result-rank { font-size: 26px; font-weight: 800; }
body.hope-guide .wsi-result-sub { font-size: 17px; color: var(--hg-muted); }
body.hope-guide .wsi-review { background: var(--hg-surface-2); border-color: var(--hg-border); border-radius: 12px; }
body.hope-guide .wsi-review h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: var(--hg-primary) !important; }
body.hope-guide .wsi-review li { border-top-color: var(--hg-border); }
body.hope-guide .wsi-review-q { font-size: 15px; color: var(--hg-body); }
body.hope-guide .wsi-review-a { font-size: 15px; font-weight: 700; color: var(--hg-text); }
body.hope-guide .wsi-allright { font-size: 17px; color: var(--hg-develop); }
body.hope-guide .wsi-morelink { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--hg-primary); }
body.hope-guide .wsi-loading { font-style: normal; color: var(--hg-muted); }
body.hope-guide .wsi-toast { font-family: var(--hg-font); background: var(--hg-text); }

/* Screen-reader-only live region */
body.hope-guide .wsi-sr, .wsi-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

body.hope-guide footer { border-top-color: var(--hg-border); }

@media (max-width: 520px) {
  body.hope-guide .wsi-opt { font-size: 16px; }
  body.hope-guide .wsi-lede { font-size: 16px; }
}