/* /explainers index and /explainers/<id> deck viewer in the Hope look.
   The deck itself is styled by hope/widgets.css (shared with article embeds). */

/* ---- Index --------------------------------------------------------------- */
body.hope-guide #explainers-page { max-width: 1180px; margin-left: auto; margin-right: auto; }
body.hope-guide #explainers-page .qa-page-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--hg-primary); }
body.hope-guide #explainers-page .qa-page-title { font-weight: 800; font-size: clamp(30px, 4.4vw, 42px); }
body.hope-guide #explainers-page .qa-page-subtitle { font-size: 17px; line-height: 1.6; color: var(--hg-muted); max-width: 640px; margin-left: auto; margin-right: auto; }

body.hope-guide .explainers-search {
  background: var(--hg-surface); border: 1px solid var(--hg-border-strong); border-radius: 12px; box-shadow: var(--hg-shadow-sm); min-height: 48px;
}
body.hope-guide .explainers-search:focus-within { border-color: var(--hg-primary); box-shadow: 0 0 0 3px var(--hg-primary-soft); }
body.hope-guide .explainers-search > :is(svg, [data-lucide]) { color: var(--hg-faint); }
body.hope-guide .explainers-search input { font-size: 16px; color: var(--hg-text); }
body.hope-guide .explainers-search input::placeholder { color: var(--hg-faint); }
body.hope-guide .explainers-count { font-size: 14px; font-weight: 600; color: var(--hg-muted); }

body.hope-guide .explainers-topic-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--hg-primary) !important; background: var(--hg-primary-soft); border: 1px solid transparent; border-radius: 999px;
}
body.hope-guide .explainers-topic-chip:hover { background: var(--hg-primary); color: #fff !important; transform: none; }
body.hope-guide .explainers-topic-chip-n { font-size: 13px; font-weight: 700; background: #fff; color: var(--hg-primary); }
body.hope-guide .explainers-topic-head { border-bottom-color: var(--hg-border); }
body.hope-guide .explainers-topic-title { font-size: 24px !important; font-weight: 800; }
body.hope-guide .explainers-topic-blurb { font-size: 15.5px; line-height: 1.55; color: var(--hg-muted); font-style: normal; }
body.hope-guide .explainers-topic-count { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-muted); }

body.hope-guide .explainer-index-card {
  background: var(--hg-surface) !important; border: 1px solid var(--hg-border) !important; border-radius: var(--hg-radius) !important;
  box-shadow: var(--hg-shadow-sm) !important; color: var(--hg-text) !important;
}
body.hope-guide .explainer-index-card:hover { border-color: var(--hg-border-strong) !important; box-shadow: var(--hg-shadow) !important; }
body.hope-guide .explainer-index-kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--hg-primary); }
body.hope-guide .explainer-index-title { font-size: 20px !important; font-weight: 800; line-height: 1.25; }
body.hope-guide .explainer-index-sub { font-size: 15.5px; line-height: 1.55; color: var(--hg-body); font-style: normal; }
body.hope-guide .explainer-index-go { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-primary); }
body.hope-guide .explainer-index-card:hover .explainer-index-go { color: var(--hg-primary-hover); }
body.hope-guide .explainer-index-copy { min-height: 40px; font-size: 14px; color: var(--hg-muted); background: var(--hg-surface-2); border-color: var(--hg-border-strong); }

body.hope-guide .explainers-embed { background: var(--hg-surface); border: 1px solid var(--hg-border); border-radius: var(--hg-radius); box-shadow: var(--hg-shadow-sm); }
body.hope-guide .explainers-embed-title { font-size: 20px !important; font-weight: 800; }
body.hope-guide .explainers-embed-badge { font-size: 12.5px; letter-spacing: 0; text-transform: none; }
body.hope-guide :is(.explainers-embed-help, .explainers-embed-desc) { font-size: 15px; color: var(--hg-body); }

body.hope-guide #explainers-page .qa-status, body.hope-guide #explainers-page .qa-empty { font-size: 16px; color: var(--hg-muted); }

/* ---- Deck viewer ---------------------------------------------------------- */
body.hope-guide .explainer-view-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hg-primary) !important;
}
body.hope-guide .explainer-view-title { font-family: var(--hg-font) !important; font-weight: 800; font-size: clamp(24px, 3.4vw, 34px); color: var(--hg-text) !important; }
body.hope-guide .explainer-view-missing { font-size: 16px; color: var(--hg-muted); }

@media (max-width: 620px) {
  body.hope-guide #explainers-page .qa-page-subtitle { font-size: 16px; }
  body.hope-guide .explainers-topic-title { font-size: 21px !important; }
  /* Pull the deck up so its controls are reachable on a phone screen. */
  body.hope-guide .explainer-view-title { font-size: 22px; margin: 0.2rem 0 0.6rem; }
  body.hope-guide .explainer-view-host .explainer { margin-top: 8px; }
}

/* The admin-only "Copy embed" button starts hidden; style.css gives it display:inline-flex, which beat Tailwind's .hidden, so every visitor saw it (2026-10-26). */
.explainer-index-copy.hidden { display: none !important; }