/* AI Have Questions — article page blocks (pull quote, poll, share, sources).
   Loaded only on article pages, after styles.css, whose tokens it uses. */

.article-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* Source notes: small and quiet, never links ------------------------------- */
.prose sup.note { font-size: 0.66em; line-height: 0; vertical-align: super; margin-left: 0.08em; color: var(--ink-muted); font-weight: 500; }

/* Pull quote ----------------------------------------------------------------- */
.prose .pull-quote { margin: 2.6em 0; padding: clamp(1.5rem, 3vw, 2.25rem) 0; border-block: 1px solid var(--line); }
.pull-quote blockquote { margin: 0; padding: 0; border: 0; }
.pull-quote blockquote p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.55rem, 3.2vw, 2.25rem); line-height: 1.18; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.pull-quote blockquote p::before { content: "“"; color: var(--curiosity); }
.pull-quote blockquote p::after { content: "”"; color: var(--curiosity); }
.pull-quote__share { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: 0.8125rem; color: var(--ink-muted); }
.pull-quote__share span { margin-right: 0.25rem; }
.icon-share, .prose a.icon-share { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none !important; transition: border-color .2s, color .2s; }
.icon-share svg { width: 1rem; height: 1rem; }
.icon-share:hover, .prose a.icon-share:hover { border-color: var(--ink); color: var(--ink); }
.icon-share--wa, .prose a.icon-share--wa { background: var(--midnight); border-color: var(--midnight); color: var(--white); }
.icon-share--wa:hover, .prose a.icon-share--wa:hover { color: var(--white); background: #26262C; }

/* Poll ------------------------------------------------------------------------ */
.poll { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius); background: var(--lilac); }
html:not(.js) .poll { display: none; }
.poll .eyebrow { margin: 0; }
.poll__question { margin: 0.6rem 0 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; }
.poll__options { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.poll__option { min-width: 7rem; padding: 0.8rem 1.4rem; border: 1px solid var(--midnight); border-radius: var(--pill); background: var(--white); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background .2s, color .2s; }
.poll__option:hover { background: var(--midnight); color: var(--white); }
.poll__option:disabled { opacity: .55; cursor: progress; }
.poll__results { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.poll__results li { display: grid; grid-template-columns: minmax(3rem, auto) 1fr 3.25rem; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.poll__results li.is-mine .poll__label { font-weight: 600; }
.poll__bar { height: 0.6rem; border-radius: var(--pill); background: rgba(11, 11, 15, .08); overflow: hidden; }
.poll__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--curiosity); transition: width .8s var(--ease); }
.poll__pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.poll [hidden] { display: none !important; }
.poll__status { margin: 1rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }
.poll__status:empty { display: none; }

/* Share ----------------------------------------------------------------------- */
.share { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.5rem); border-top: 1px solid var(--line); }
.share__title { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; }
.share__lead { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }
.share__main { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.share__main .btn { gap: 0.6rem; }
.share__main svg { width: 1.15rem; height: 1.15rem; }
.share__wa { padding-inline: 1.5rem; }
.btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--midnight); }
.btn--outline:hover { background: var(--midnight); color: var(--white); }
.share__more { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; padding: 0; }
.share__more a, .share__more button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0; border: 0; background: none; color: var(--ink-soft); font: inherit; font-size: 0.875rem; text-decoration: none; cursor: pointer; }
.share__more a:hover, .share__more button:hover { color: var(--curiosity-ink); }
.share__more svg { width: 1rem; height: 1rem; }

/* Related + sources ------------------------------------------------------------- */
.related { padding-bottom: 0; }
.sources { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.sources h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); }
.sources__lead { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--ink-muted); }
.sources ol { margin: 1.25rem 0 0; padding-left: 1.4rem; font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.sources li + li { margin-top: 0.45rem; }
.sources li::marker { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sources a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; word-break: break-word; }
.sources a:hover { color: var(--curiosity-ink); text-decoration-color: currentColor; }

@media (max-width: 560px) {
  .share__main .btn { flex: 1 1 100%; justify-content: center; }
}