/* viraltest/result-card.css
   "Clean & Friendly" English result card — scoped, additive, light island on the dark page.
   Locked design tokens from docs/superpowers/specs/2026-06-02-easytest-english-relaunch-design.md §5.
   Inner rules are scoped under `.et-result-card` (specificity 0,2,0) so the heading
   beats the dark theme's `.quiz-result h2` (viraltest/style.css, 0,1,1).
   Replication note: keep the card OUT of `.result-container` — `css/easytest.css`
   has `body.test-page .result-container h2` (0,2,1) which would override .etc-name.
   Text colors on the light card are tuned to meet WCAG AA (>=4.5:1). */

.et-result-card{
  --etc-cream:#FFF6EF; --etc-purple:#8257E6; --etc-purple-d:#6D3FE0;
  --etc-coral:#EC6F4D; --etc-coral-ink:#BC4A28; --etc-ink:#2c2535; --etc-ink-2:#4a4458; --etc-muted:#6A6276;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  background:var(--etc-cream); border-radius:24px; padding:24px 22px;
  max-width:460px; margin:0 auto 12px; color:var(--etc-ink);
  box-shadow:0 18px 44px rgba(60,40,90,.18);
}
.et-result-card[hidden]{ display:none; }
.et-result-card .etc-kicker{ font:700 11px/1 'Plus Jakarta Sans'; letter-spacing:.14em; text-transform:uppercase; color:var(--etc-coral-ink); }
.et-result-card .etc-name{ font:800 34px/1.04 'Plus Jakarta Sans'; letter-spacing:-.02em; margin:10px 0 14px; color:var(--etc-ink); }
.et-result-card .etc-score{ background:#fff; border-radius:16px; padding:14px 16px; box-shadow:0 8px 22px rgba(120,90,60,.10); }
.et-result-card .etc-score-row{ display:flex; justify-content:space-between; align-items:baseline; }
.et-result-card .etc-score-lab{ font:700 12px/1 'Plus Jakarta Sans'; text-transform:uppercase; letter-spacing:.06em; color:var(--etc-muted); }
.et-result-card .etc-score-val{ font:800 26px/1 'Plus Jakarta Sans'; color:var(--etc-purple); }
.et-result-card .etc-bar{ height:10px; border-radius:8px; background:#F0EAF7; overflow:hidden; margin-top:10px; }
.et-result-card .etc-bar > i{ display:block; height:100%; background:linear-gradient(90deg,var(--etc-purple),#B79CFF); border-radius:8px; }
.et-result-card .etc-line{ font:600 15.5px/1.5 'Plus Jakarta Sans'; color:var(--etc-ink-2); margin:16px 0 0; }
.et-result-card .etc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.et-result-card .etc-chip{ font:700 12.5px/1 'Plus Jakarta Sans'; color:#b54a2c; background:#FFEAE0; padding:9px 12px; border-radius:12px; }
.et-result-card .etc-signals{ list-style:none; margin:16px 0 0; padding:0; }
.et-result-card .etc-signals > li{ position:relative; padding-left:20px; margin:8px 0; font:600 14px/1.5 'Plus Jakarta Sans'; color:var(--etc-ink-2); }
.et-result-card .etc-signals > li::before{ content:""; position:absolute; left:4px; top:9px; width:7px; height:7px; border-radius:50%; background:var(--etc-purple); }
.et-result-card .etc-realtalk{ background:#F3EEFF; border-radius:14px; padding:13px 15px; margin-top:16px; font:600 14px/1.5 'Plus Jakarta Sans'; color:#3a2c66; }
.et-result-card .etc-realtalk b{ color:var(--etc-purple-d); }
.et-result-card .etc-action{ font:700 14px/1.5 'Plus Jakarta Sans'; color:var(--etc-ink); margin-top:14px; }
.et-result-card .etc-friend{ font:700 12.5px/1.4 'Plus Jakarta Sans'; color:var(--etc-muted); margin-top:16px; text-align:center; }
@media (max-width:480px){ .et-result-card .etc-name{ font-size:29px; } }