/* The Berean Bible Challenge in the Hope look: dark board -> light white card.
   Overrides berean.css under body.hope-guide. */

body.hope-guide #bb-root {
  --bb-navy: #ffffff;
  --bb-line: var(--hg-border-strong);
  --bb-line-soft: var(--hg-border);
  --bb-gold: var(--hg-primary);
  --bb-gold-2: var(--hg-primary);
  --bb-cream: var(--hg-text);
  --bb-cream-dim: var(--hg-muted);
  --bb-good: var(--hg-develop);
  --bb-good-bg: var(--hg-develop-bg);
  --bb-bad: var(--hg-reverse);
  --bb-bad-bg: var(--hg-reverse-bg);
  --bb-display: var(--hg-font);
  --bb-body: var(--hg-font);
  background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius);
  box-shadow: var(--hg-shadow); color: var(--hg-text); font-size: 16px;
}
body.hope-guide #bb-root :is(h1, h2, h3, h4) { color: var(--hg-text) !important; -webkit-text-fill-color: var(--hg-text) !important; }

/* Hero + stats */
body.hope-guide #bb-root .bb-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide #bb-root .bb-title { font-weight: 800; letter-spacing: -0.01em; }
body.hope-guide #bb-root .bb-subtitle { font-size: 17px; line-height: 1.6; color: var(--hg-muted); }
body.hope-guide #bb-root .bb-stat { background: var(--hg-surface-2); border-color: var(--hg-border); }
body.hope-guide #bb-root :is(.bb-stat-k, .bb-rcell-k) { font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-transform: none; color: var(--hg-muted); }
body.hope-guide #bb-root :is(.bb-stat-v, .bb-rcell-v) { font-size: 18px; font-weight: 800; color: var(--hg-text); }
body.hope-guide #bb-root .bb-section { font-size: 19px; font-weight: 800; letter-spacing: 0; }

/* Daily banner + cards */
body.hope-guide #bb-root .bb-daily { background: var(--hg-primary-soft); border: 1px solid #d5ddfb; color: var(--hg-text); min-height: 64px; }
body.hope-guide #bb-root .bb-daily:hover { transform: none; box-shadow: var(--hg-shadow-sm); border-color: var(--hg-primary); }
body.hope-guide #bb-root .bb-go { background: var(--hg-primary); color: #fff; width: 44px; height: 44px; }
body.hope-guide #bb-root .bb-pill { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; background: var(--hg-develop-bg); color: var(--hg-develop); }
body.hope-guide #bb-root .bb-card { background: var(--hg-surface); border: 1px solid var(--hg-border); box-shadow: var(--hg-shadow-sm); color: var(--hg-text); }
body.hope-guide #bb-root .bb-card:hover { transform: none; border-color: var(--hg-primary); background: var(--hg-primary-soft); box-shadow: var(--hg-shadow-sm); }
body.hope-guide #bb-root .bb-card-icon, body.hope-guide #bb-root .bb-life-ic { background: var(--hg-primary-soft); color: var(--hg-primary); }
body.hope-guide #bb-root .bb-card-title { font-size: 17px; font-weight: 700; }
body.hope-guide #bb-root .bb-card-desc { font-size: 15px; line-height: 1.45; color: var(--hg-muted); }
/* Locked modes: readable, marked by the lock icon + dashed border instead of fading */
body.hope-guide #bb-root .bb-card.is-locked { opacity: 1; filter: none; background: var(--hg-surface-2); border-style: dashed; border-color: var(--hg-border-strong); box-shadow: none; }
body.hope-guide #bb-root .bb-card.is-locked .bb-card-icon { background: #eef0f3; color: var(--hg-muted); }
body.hope-guide #bb-root .bb-card.is-locked:hover { background: var(--hg-surface-2); border-color: var(--hg-border-strong); }
body.hope-guide #bb-root .bb-lock { opacity: 1; color: var(--hg-muted); }
body.hope-guide #bb-root .bb-badge { font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; border: 0; background: var(--hg-primary-soft); color: var(--hg-primary); }
body.hope-guide #bb-root .bb-badge-soft { background: #eef0f3; color: var(--hg-muted); }

/* Topbar + HUD */
body.hope-guide #bb-root .bb-back { min-height: 44px; font-size: 15px; font-weight: 600; color: var(--hg-primary); background: var(--hg-primary-soft); border: 0; border-radius: 10px; }
body.hope-guide #bb-root .bb-topbar-title { font-weight: 700; color: var(--hg-text); }
body.hope-guide #bb-root .bb-quit { width: 44px; height: 44px; color: var(--hg-muted); background: var(--hg-surface-2); border-color: var(--hg-border-strong); }
body.hope-guide #bb-root .bb-progress-text { font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--hg-text); }
body.hope-guide #bb-root .bb-streak { color: var(--hg-reaffirm); font-weight: 700; }
body.hope-guide #bb-root .bb-score { font-weight: 800; color: var(--hg-primary); }
body.hope-guide #bb-root .bb-timer { background: var(--hg-primary-soft); }
body.hope-guide #bb-root .bb-timer-bar { background: var(--hg-primary); }
body.hope-guide #bb-root .bb-timer-bar.bb-warn { background: var(--hg-reverse); }

/* Question + answers */
body.hope-guide #bb-root .bb-qcard { background: var(--hg-surface-2); border-color: var(--hg-border); }
body.hope-guide #bb-root .bb-qcat { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--hg-primary); }
body.hope-guide #bb-root .bb-qdiff { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; border: 0; }
body.hope-guide #bb-root .bb-diff-easy { color: var(--hg-develop); background: var(--hg-develop-bg); }
body.hope-guide #bb-root .bb-diff-medium { color: var(--hg-reaffirm); background: var(--hg-reaffirm-bg); }
body.hope-guide #bb-root .bb-diff-hard { color: var(--hg-reverse); background: var(--hg-reverse-bg); }
body.hope-guide #bb-root .bb-question { font-weight: 700; line-height: 1.35; }
body.hope-guide #bb-root .bb-hint { background: var(--hg-primary-soft); border-left-color: var(--hg-primary); color: var(--hg-text); font-size: 16px; }
body.hope-guide #bb-root .bb-answer { min-height: 52px; background: var(--hg-surface); border: 1.5px solid var(--hg-border-strong); font-size: 17px; font-weight: 600; color: var(--hg-text); }
body.hope-guide #bb-root .bb-answer:hover:not(:disabled) { transform: none; border-color: var(--hg-primary); background: var(--hg-primary-soft); }
body.hope-guide #bb-root .bb-answer-key { width: 30px; height: 30px; background: var(--hg-primary-soft); color: var(--hg-primary); font-size: 15px; font-weight: 700; }
body.hope-guide #bb-root .bb-answer-text { flex: 1; min-width: 0; }
body.hope-guide #bb-root .bb-answer.is-correct .bb-answer-key, body.hope-guide #bb-root .bb-answer.is-wrong .bb-answer-key { color: #fff; }
body.hope-guide #bb-root .bb-answer.is-eliminated { opacity: 1; color: var(--hg-faint); background: #eef0f3; }
body.hope-guide #bb-root .bb-answer-tag { flex: 0 0 auto; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; text-decoration: none; }
body.hope-guide #bb-root .bb-answer.is-correct .bb-answer-tag { color: var(--hg-develop); }
body.hope-guide #bb-root .bb-answer.is-wrong .bb-answer-tag { color: var(--hg-reverse); }

/* Feedback */
body.hope-guide #bb-root .bb-feedback.is-good { border-color: #a7dcc1; }
body.hope-guide #bb-root .bb-feedback.is-bad { border-color: #f4bdb6; }
body.hope-guide #bb-root .bb-fb-head { font-size: 18px; font-weight: 800; }
body.hope-guide #bb-root .bb-feedback.is-good .bb-fb-head { color: var(--hg-develop); }
body.hope-guide #bb-root .bb-feedback.is-bad .bb-fb-head { color: var(--hg-reverse); }
body.hope-guide #bb-root .bb-fb-pts { color: var(--hg-develop); font-weight: 700; }
body.hope-guide #bb-root .bb-fb-expl { font-size: 16px; line-height: 1.6; color: var(--hg-body); }
body.hope-guide #bb-root .bb-fb-ref, body.hope-guide #bb-root .bb-miss-ref { font-size: 14px; font-style: normal; font-weight: 600; color: var(--hg-muted); }

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

/* Lifelines */
body.hope-guide #bb-root .bb-life { min-height: 64px; font-size: 14px; font-weight: 600; color: var(--hg-text); background: var(--hg-surface); border-color: var(--hg-border-strong); }
body.hope-guide #bb-root .bb-life:hover:not(:disabled) { transform: none; color: var(--hg-text); border-color: var(--hg-primary); }
body.hope-guide #bb-root .bb-life.is-used { opacity: 1; color: var(--hg-faint); background: #eef0f3; }
body.hope-guide #bb-root .bb-life.is-armed { border-color: var(--hg-primary); color: var(--hg-primary); background: var(--hg-primary-soft); }
body.hope-guide #bb-root .bb-toast { font-size: 15px; font-weight: 700; background: var(--hg-text); color: #fff; }

/* Results */
body.hope-guide #bb-root .bb-rank { color: var(--hg-text); font-weight: 800; }
body.hope-guide #bb-root .bb-rank svg { color: var(--hg-primary); }
body.hope-guide #bb-root .bb-rank-blurb { font-size: 17px; color: var(--hg-muted); }
body.hope-guide #bb-root .bb-result-score { font-weight: 800; color: var(--hg-text); }
body.hope-guide #bb-root .bb-result-sub { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--hg-muted); }
body.hope-guide #bb-root .bb-rcell { background: var(--hg-surface-2); border-color: var(--hg-border); }
body.hope-guide #bb-root .bb-share textarea { background: var(--hg-surface-2); border-color: var(--hg-border-strong); color: var(--hg-text); font-size: 15px; }
body.hope-guide #bb-root .bb-miss { background: var(--hg-surface-2); border-color: var(--hg-border); border-left-color: var(--hg-reverse); }
body.hope-guide #bb-root .bb-miss-q { font-weight: 700; }
body.hope-guide #bb-root .bb-miss-line { font-size: 15px; font-weight: 600; }
body.hope-guide #bb-root .bb-miss-expl { font-size: 15px; color: var(--hg-body); }
body.hope-guide #bb-root .bb-loading { color: var(--hg-muted); }

/* Visible keyboard focus (berean.css removes the outline) */
body.hope-guide #bb-root :is(button, textarea):focus-visible { outline: 3px solid var(--hg-primary) !important; outline-offset: 2px; transform: none; }

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

@media (max-width: 520px) {
  body.hope-guide #bb-root { padding: 18px 16px; }
  body.hope-guide #bb-root .bb-subtitle { font-size: 16px; }
  body.hope-guide #bb-root .bb-answer { font-size: 16px; }
}