/* ==========================================================================
   Sophicly · True / False (v3.10.17)
   Light/dark via shared --sc-* tokens.
   ========================================================================== */

.sctf-widget {
    font-family: 'Proxima Soft', system-ui, -apple-system, sans-serif;
    max-width: 640px;
    margin: 24px auto;
    -webkit-font-smoothing: antialiased;
}

.sctf-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 16px;
    padding: 24px;
    color: var(--sc-text);
}

.sctf-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--sc-accent); margin-bottom: 8px;
}
.sctf-title { font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 6px; }
.sctf-intro { font-size: 14px; color: var(--sc-text-muted); margin: 0 0 16px; }

/* ── Progress ── */
.sctf-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.sctf-progress-track { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--sc-surface-2); overflow: hidden; }
.sctf-progress-bar { height: 100%; width: 0; background: var(--sc-accent); border-radius: 3px; transition: width 0.3s ease; }
.sctf-progress-txt { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--sc-text-muted); white-space: nowrap; }

/* ── One step (Typeform) ── */
.sctf-stephost { min-height: 120px; }
.sctf-step { animation: sctf-slide 0.28s ease; }
@keyframes sctf-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sctf-statement { margin: 0 0 16px; font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--sc-text); }

/* ── Results summary header ── */
.sctf-summary { text-align: center; padding: 8px 0 18px; animation: sctf-slide 0.28s ease; }
.sctf-summary-score { font-size: 34px; font-weight: 800; line-height: 1; color: var(--sc-text); }
.sctf-summary-sub { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 13.5px; color: var(--sc-text-muted); flex-wrap: wrap; }

/* ── Results (end-of-quiz) ── */
.sctf-results { display: flex; flex-direction: column; gap: 12px; animation: sctf-slide 0.28s ease; }

.sctf-resultfoot { display: flex; justify-content: center; margin-top: 18px; }
.sctf-again { min-width: 160px; }
.sctf-result {
    display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border);   /* even border, no coloured edge-strip */
}
.sctf-result-icon {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: #fff; margin-top: 1px;
}
.sctf-result.is-correct .sctf-result-icon { background: #1CD991; }
.sctf-result.is-wrong .sctf-result-icon { background: #ff5470; }
.sctf-result-body { flex: 1 1 auto; min-width: 0; }
.sctf-result-body .sctf-statement { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.sctf-result-meta { font-size: 12.5px; color: var(--sc-text-muted); margin-bottom: 6px; }
.sctf-result-meta b { color: var(--sc-text); font-weight: 700; }

.sctf-choices { display: flex; gap: 8px; }
.sctf-tf {
    appearance: none; cursor: pointer;
    flex: 0 0 auto; min-width: 84px;
    font-family: inherit; font-size: 13.5px; font-weight: 700;
    padding: 7px 16px; border-radius: 9px;
    border: 1.5px solid var(--sc-border);
    background: var(--sc-surface-2); color: var(--sc-text-muted);
    transition: transform 0.1s ease, border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.sctf-tf:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--sc-accent); color: var(--sc-text); }
.sctf-tf:disabled { cursor: default; }
.sctf-tf.is-sel { border-color: var(--sc-accent); background: color-mix(in srgb, var(--sc-accent) 14%, var(--sc-surface-2)); color: var(--sc-text); }

/* After checking: the chosen button goes green/red; the true answer is ringed. */
.sctf-tf.is-correct { border-color: #1CD991; background: color-mix(in srgb, #1CD991 18%, var(--sc-surface-2)); color: var(--sc-text); }
.sctf-tf.is-wrong   { border-color: #ff5470; background: color-mix(in srgb, #ff5470 16%, var(--sc-surface-2)); color: var(--sc-text); }
.sctf-tf.is-answer  { box-shadow: 0 0 0 2px color-mix(in srgb, #1CD991 55%, transparent); }

.sctf-reveal {
    display: none;
    margin-top: 10px; padding: 11px 13px;
    font-size: 13.5px; line-height: 1.55;
    color: var(--sc-text-muted);
    background: color-mix(in srgb, var(--sc-text) 5%, transparent);
    border-radius: 10px;
}
.sctf-reveal.is-on { display: block; }
.sctf-reveal::before {
    content: 'Why'; display: block;
    font-size: 10px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--sc-accent); margin-bottom: 4px;
}

.sctf-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.sctf-btn {
    appearance: none; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600;
    padding: 9px 18px; border-radius: 10px;
    border: 1.5px solid var(--sc-border);
    background: var(--sc-surface-2); color: var(--sc-text);
    transition: transform 0.1s ease, opacity 0.12s ease;
}
.sctf-btn:hover { transform: translateY(-1px); }
.sctf-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.sctf-btn-primary { background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; }

.sctf-scorebar { font-size: 14px; font-weight: 600; margin-top: 14px; min-height: 1.2em; opacity: 0; transition: opacity 0.15s ease; }
.sctf-scorebar.is-on { opacity: 1; }

@media (max-width: 480px) {
    .sctf-card { padding: 20px 16px; }
}