/* WTFAQ — design tokens + base component classes
 * Ported from prototype "styles (1).css".
 *
 * Color and font-family values are the source of truth in theme.json.
 * This file aliases the WP preset variables to the bare names used in the
 * prototype (--paper, --ink, --serif, etc.) so existing JSX-derived markup
 * lifts cleanly into block templates without a global find/replace.
 */

:root {
    --paper:   var(--wp--preset--color--paper);
    --paper-2: var(--wp--preset--color--paper-2);
    --paper-3: var(--wp--preset--color--paper-3);
    --ink:     var(--wp--preset--color--ink);
    --ink-2:   var(--wp--preset--color--ink-2);
    --ink-3:   var(--wp--preset--color--ink-3);
    --rule:    var(--wp--preset--color--rule);
    --hi:      var(--wp--preset--color--hi);
    --hi-2:    var(--wp--preset--color--hi-2);
    --alert:   var(--wp--preset--color--alert);
    --ok:      var(--wp--preset--color--ok);

    --serif: var(--wp--preset--font-family--serif);
    --sans:  var(--wp--preset--font-family--sans);
    --mono:  var(--wp--preset--font-family--mono);
}

/* =============================================================================
   Base
============================================================================= */

body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* Display + serif helpers */
.display {
    font-family: var(--serif);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.95;
}

.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

/* WTF wordmark — terracotta question mark */
.qmark {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 800;
    color: var(--alert);
}

/* =============================================================================
   Highlighter underline (the "hi" mark from the prototype)
============================================================================= */

.hi {
    background: linear-gradient(
        180deg,
        transparent 55%,
        var(--hi) 55%,
        var(--hi) 92%,
        transparent 92%
    );
    padding: 0 2px;
}

/* =============================================================================
   Pills / chips
============================================================================= */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    background: var(--paper);
}
.chip-fill {
    background: var(--ink);
    color: var(--paper);
}
.chip-hi {
    background: var(--hi);
    border-color: var(--ink);
}

/* =============================================================================
   Buttons
============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--ink);
    color: var(--paper);
}
.btn-hi {
    background: var(--hi);
    color: var(--ink);
}

/* =============================================================================
   Ad placeholders (replaced by AdSense markup in Phase 4)
============================================================================= */

.ad {
    position: relative;
    border: 1px dashed var(--ink-3);
    background: repeating-linear-gradient(135deg, transparent 0 8px, var(--paper-2) 8px 9px);
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    min-height: 90px;
}
.ad__label,
.ad::before {
    position: absolute;
    top: 6px;
    left: 8px;
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.ad::before {
    content: 'SPONSORED · GOOGLE ADS';
}
.ad:has(.ad__label)::before { content: none; }

/* =============================================================================
   Numbered card sections (CSS counter — replaces ACF repeater)
   Wrap section headings inside <article class="wtf-sections"> in the
   single-card template; H2s will auto-prefix with 01, 02, 03…
============================================================================= */

.wtf-sections { counter-reset: wtfsec; }
.wtf-sections > h2 {
    counter-increment: wtfsec;
    position: relative;
    padding-left: 64px;
}
.wtf-sections > h2::before {
    content: counter(wtfsec, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.05em;
    font-family: var(--serif);
    font-weight: 800;
    font-size: 0.75em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   Numbered question list (taxonomy-topic numerals)
============================================================================= */

.wtf-list {
    counter-reset: q;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Counts every direct child — works for ul>li, core/query .wp-block-post, or
   the wtf-related anchor list. */
.wtf-list > .wp-block-post,
.wtf-list > li,
.wtf-list > a {
    counter-increment: q;
    position: relative;
    display: block;
    padding: 14px 0 14px 56px;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
}
.wtf-list > .wp-block-post::before,
.wtf-list > li::before,
.wtf-list > a::before {
    content: counter(q, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 14px;
    font-family: var(--serif);
    font-weight: 800;
    color: var(--ink-3);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
}
.wtf-list > *:last-child { border-bottom: 0; }

/* =============================================================================
   TL;DR callout (yellow box rendered in single-card template)
============================================================================= */

.wtf-tldr {
    border: 1px solid var(--ink);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--hi);
    margin: 16px 0 22px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink);
}
.wtf-tldr__kicker {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin-bottom: 4px;
}

/* =============================================================================
   Striped image placeholder
============================================================================= */

.ph {
    background: repeating-linear-gradient(45deg, var(--paper-3) 0 8px, var(--paper) 8px 16px);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* =============================================================================
   Subtle paper grain (overlay element — opt-in)
============================================================================= */

.paper-grain {
    background-image: radial-gradient(oklch(0.85 0.014 85) 1px, transparent 1px);
    background-size: 3px 3px;
    background-position: 0 0;
    opacity: 0.35;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* =============================================================================
   Animated underline link
============================================================================= */

.lnk {
    text-decoration: none;
    color: inherit;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 1px;
}

/* =============================================================================
   Scrollbar hide for screens that need it
============================================================================= */

.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }

/* =============================================================================
   Editor-only tweaks (loaded via add_editor_style)
============================================================================= */

.wp-block-post-content > .wp-block-heading {
    font-family: var(--serif);
    font-weight: 800;
}

/* =============================================================================
   PHASE 2 — Component classes for templates and dynamic blocks
============================================================================= */

/* ---- Wordmark ---------------------------------------------------------- */

.wtf-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    color: var(--ink);
    letter-spacing: -0.02em;
}
.wtf-wordmark__wtf {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 800;
}
.wtf-wordmark__aq {
    font-family: var(--sans);
    font-weight: 700;
}
.wtf-wordmark__q {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 800;
    color: var(--alert);
    margin-left: 1px;
}

/* ---- Header / site nav ------------------------------------------------- */

.wtf-site-header {
    border-bottom: 1px solid var(--rule);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--paper);
}
.wtf-site-header .wtf-iconbtn,
.wtf-iconbtn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--rule);
    background: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
}
.wtf-iconbtn:hover { background: var(--paper-2); }
.wtf-site-header__actions { display: flex; gap: 10px; }

/* ---- Tab bar (mobile only) -------------------------------------------- */

.wtf-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: rgba(252, 250, 245, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
    padding: 8px 0 max(22px, env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.wtf-tabbar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--ink-3);
    padding: 4px 10px;
    text-decoration: none;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.wtf-tabbar__tab.is-active { color: var(--ink); }
.wtf-tabbar__tab.is-active::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: var(--alert);
    margin-top: 1px;
}
.wtf-tabbar svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
}
@media (min-width: 900px) {
    .wtf-tabbar { display: none; }
}
/* Reserve room above the fixed tab-bar so content isn't clipped on mobile. */
@media (max-width: 899.98px) {
    body { padding-bottom: 92px; }
}

/* ---- Hero (front page) ------------------------------------------------- */

.wtf-hero {
    padding: 24px 18px 18px;
}
.wtf-hero__title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(34px, 5vw + 14px, 56px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}
.wtf-hero__title em {
    font-style: italic;
    font-weight: 800;
}
.wtf-hero__title .qmark {
    margin-left: 2px;
    font-size: 1.18em;
}
.wtf-hero__lede {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink-2);
    max-width: 480px;
}

/* ---- Search prompt (placeholder, real search lands later) ------------- */

.wtf-search {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--ink);
    border-radius: 12px;
    padding: 11px 14px;
    background: var(--paper);
    margin: 0 18px 16px;
    text-decoration: none;
    color: var(--ink-3);
    font-size: 14px;
}
.wtf-search__kbd {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
    border: 1px solid var(--rule);
    padding: 2px 5px;
    border-radius: 4px;
}

/* ---- Streak / daily callout ------------------------------------------ */

.wtf-streak {
    margin: 0 18px 16px;
    border: 1px solid var(--ink);
    border-radius: 14px;
    padding: 14px;
    background: var(--hi);
    display: flex;
    align-items: center;
    gap: 12px;
}
.wtf-streak__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--ink);
    color: var(--hi);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wtf-streak__kicker {
    font-size: 11px;
    font-family: var(--mono);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wtf-streak__title {
    font-size: 16px;
    font-weight: 700;
    margin-top: 2px;
}

/* ---- Section heading (used in front-page sections) -------------------- */

.wtf-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 18px 8px;
    margin-top: 8px;
}
.wtf-section-head__title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.01em;
    margin: 0;
}
.wtf-section-head__cta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
}

/* ---- Topic grid (wtfaq/topic-grid) ------------------------------------ */

.wtf-topic-grid {
    display: grid;
    grid-template-columns: repeat(var(--wtf-cols, 2), 1fr);
    gap: 8px;
    padding: 6px 18px 16px;
}
.wtf-topic-card {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: 12px;
    border: 1px solid var(--ink);
    border-radius: 12px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 92px;
    text-decoration: none;
    color: var(--ink);
}
.wtf-topic-card__blob {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    opacity: 0.85;
}
.wtf-topic-card__label {
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.01em;
    position: relative;
}
.wtf-topic-card__meta {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.wtf-topic-card__count {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ink-3);
}
.wtf-topic-card__arrow { color: var(--ink); }

/* ---- Topic hero (wtfaq/topic-hero, taxonomy-topic.html) -------------- */

.wtf-topic-hero {
    margin: 6px 14px 18px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--ink);
    position: relative;
    overflow: hidden;
}
.wtf-topic-hero::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 140px;
    height: 140px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.06);
}
.wtf-topic-hero__kicker {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    position: relative;
}
.wtf-topic-hero__title {
    font-size: 44px;
    margin: 6px 0 0;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--ink);
    position: relative;
}
.wtf-topic-hero__blurb {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.35;
    max-width: 480px;
    position: relative;
}
.wtf-topic-hero__pills {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}

/* ---- Feed row (wtfaq/trending-feed) ---------------------------------- */

.wtf-feed {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 6px 18px 18px;
}
.wtf-feedrow {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
}
.wtf-feedrow:hover { background: var(--paper-2); }
.wtf-feedrow__rule {
    width: 6px;
    align-self: stretch;
    border-radius: 3px;
}
.wtf-feedrow__body { flex: 1; min-width: 0; }
.wtf-feedrow__topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    margin-bottom: 6px;
}
.wtf-feedrow__q {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}
.wtf-feedrow__meta {
    display: block;
    margin-top: 6px;
    color: var(--ink-3);
    font-size: 11px;
    font-family: var(--mono);
}
.wtf-heat--hot { color: var(--alert); margin-left: 6px; }

/* ---- Topic chip dot --------------------------------------------------- */

.wtf-topic-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 2px;
}

/* ---- Reading-time chip ----------------------------------------------- */

.wtf-reading-time { font-size: 11px; }

/* ---- Related cards (wtfaq/related-cards) ----------------------------- */

.wtf-related {
    margin: 24px 18px 0;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.wtf-related__heading {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 800;
    font-style: italic;
    margin: 0 0 8px;
}
.wtf-related__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wtf-related__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
}
.wtf-related__row:hover { background: var(--paper-2); }
.wtf-related__qmark {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 800;
    font-size: 18px;
    color: var(--ink-3);
}
.wtf-related__title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.wtf-related__arrow { color: var(--ink-3); }

/* ---- TL;DR (wtfaq/tldr — Phase 2 markup adds __body wrapper) -------- */

.wtf-tldr__body {
    margin: 6px 0 0;
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
}

/* ---- Filter pill row (taxonomy-topic.html) --------------------------- */

.wtf-filter-row {
    padding: 0 14px 12px;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.wtf-filter-row::-webkit-scrollbar { display: none; }
.wtf-filter-pill {
    padding: 7px 12px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
}
.wtf-filter-pill.is-active {
    background: var(--ink);
    color: var(--paper);
}

/* ---- Empty state ----------------------------------------------------- */

.wtf-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
}

/* ---- Article header (single-card.html) ------------------------------- */

.wtf-article-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 8px 0 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    flex-wrap: wrap;
}
.wtf-article-title {
    font-family: var(--serif);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(28px, 4vw + 14px, 44px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 6px 0 0;
}
.wtf-article-title .qmark {
    font-size: 1.12em;
}

/* =============================================================================
   Container helpers — keep mobile feel on small screens, expand on desktop
============================================================================= */

.wtf-mobile-frame {
    max-width: 720px;
    margin: 0 auto;
}
@media (min-width: 1024px) {
    .wtf-mobile-frame { max-width: 880px; }
}

/* =============================================================================
   PHASE 3 — Quiz hydration styles
   Loaded with the core tokens.css (not conditional) so the editor preview
   styles match the front-end. assets/js/quiz.js converts the authored
   H2+UL+P trio into .wtf-quiz-question on page load.
============================================================================= */

.wtf-quiz-body {
    margin-top: 24px;
}

.wtf-quiz-question {
    border-top: 1px solid var(--rule);
    padding: 28px 0 8px;
}
.wtf-quiz-question:first-of-type {
    border-top: 0;
    padding-top: 8px;
}

.wtf-quiz-question__q {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(22px, 3vw + 12px, 28px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 18px;
}

.wtf-quiz-question__options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wtf-quiz-option {
    text-align: left;
    padding: 14px 14px;
    border-radius: 12px;
    border: 1px solid var(--rule);
    background: var(--paper);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    width: 100%;
}
.wtf-quiz-option:hover {
    background: var(--paper-2);
}
.wtf-quiz-option:disabled {
    cursor: default;
}

.wtf-quiz-option__letter {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.wtf-quiz-option__label {
    flex: 1;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink);
    font-weight: 500;
}

/* Pre-reveal: picked option shows yellow */
.wtf-quiz-option.is-picked {
    background: var(--hi);
    border-color: var(--ink);
}
.wtf-quiz-option.is-picked .wtf-quiz-option__letter {
    background: var(--ink);
    color: var(--paper);
}

/* Post-reveal: correct = green, wrong-pick = red */
.wtf-quiz-option.is-correct {
    background: oklch(0.92 0.10 145);
    border-color: var(--ok);
}
.wtf-quiz-option.is-correct .wtf-quiz-option__letter {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--paper);
}
.wtf-quiz-option.is-correct::after {
    content: '✓';
    margin-left: auto;
    color: var(--ok);
    font-weight: 700;
    font-size: 16px;
}
.wtf-quiz-option.is-wrong {
    background: oklch(0.93 0.08 25);
    border-color: var(--alert);
}
.wtf-quiz-option.is-wrong .wtf-quiz-option__letter {
    color: var(--alert);
    border-color: var(--alert);
}
.wtf-quiz-option.is-wrong::after {
    content: '✕';
    margin-left: auto;
    color: var(--alert);
    font-weight: 700;
    font-size: 16px;
}

/* "Why" box appears after reveal */
.wtf-quiz-question__why {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--ink);
    background: var(--paper-2);
}
.wtf-quiz-question__why-kicker {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    text-transform: uppercase;
}
.wtf-quiz-question__why-body {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ink);
    margin: 6px 0 0;
}

/* Action buttons */
.wtf-quiz-question__actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.wtf-quiz-question__actions .btn {
    flex: 1;
}
.wtf-quiz-question__check.is-disabled,
.wtf-quiz-question__check[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}