/* HeartStrings — Quizzes. Inherits design tokens from .hs-ebooks-archive (ebooks.css). */

.hs-quiz-page { --hs-primary:#c1373d; --hs-primary-dark:#9d2a30; --hs-ink:#1a1a1f;
	--hs-muted:#6b6b76; --hs-line:#e9e9ee; --hs-bg:#fafafb; --hs-card-bg:#fff;
	--hs-shadow-sm:0 1px 2px rgba(20,20,30,.04),0 1px 3px rgba(20,20,30,.05);
	--hs-shadow-md:0 4px 12px rgba(20,20,30,.06),0 2px 4px rgba(20,20,30,.04);
	--hs-shadow-lg:0 24px 48px rgba(20,20,30,.10),0 8px 16px rgba(20,20,30,.06);
	--hs-radius:14px; }

/* Layout shell — quiz.css loads standalone (ebooks.css is not enqueued here),
 * so the wrap/archive rules must be defined locally to provide padding + max-width. */
.hs-quiz-page.hs-ebooks-archive{ background:var(--hs-bg); padding:60px 0 80px; }
.hs-quiz-page .hs-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; box-sizing:border-box; }
.hs-quiz-page .hs-hero{ text-align:center; max-width:720px; margin:0 auto 48px; }
.hs-quiz-page .hs-hero .hs-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.08em;
	font-size:.74rem; font-weight:700; color:var(--hs-primary); background:rgba(193,55,61,.08);
	padding:6px 14px; border-radius:100px; margin-bottom:18px; }
.hs-quiz-page .hs-hero h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.15; margin:0 0 16px;
	color:var(--hs-ink); letter-spacing:-.02em; }
.hs-quiz-page .hs-hero p{ font-size:1.1rem; line-height:1.6; color:var(--hs-muted); margin:0; }

/* shared button (mirrors ebooks .hs-btn in case it isn't loaded) */
.hs-quiz-page .hs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
	background:var(--hs-primary); color:#fff; border:none; cursor:pointer;
	padding:14px 26px; border-radius:100px; font-size:1rem; font-weight:600;
	text-decoration:none; transition:background .15s, transform .1s, box-shadow .15s;
	box-shadow:0 4px 14px rgba(193,55,61,.25); }
.hs-quiz-page .hs-btn:hover{ background:var(--hs-primary-dark); transform:translateY(-1px); }
.hs-quiz-page .hs-btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* ---------- INDEX GRID ---------- */
.hs-quiz-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; }
.hs-quiz-card{ display:flex; flex-direction:column; gap:10px; text-decoration:none;
	background:var(--hs-card-bg); border:1px solid var(--hs-line); border-radius:var(--hs-radius);
	padding:26px 24px; box-shadow:var(--hs-shadow-sm);
	transition:transform .2s, box-shadow .2s, border-color .2s; }
.hs-quiz-card:hover{ transform:translateY(-4px); box-shadow:var(--hs-shadow-lg); border-color:#ddd; }
.hs-quiz-card__type{ align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.1em;
	text-transform:uppercase; color:var(--hs-primary); background:rgba(193,55,61,.08);
	padding:5px 11px; border-radius:100px; }
.hs-quiz-card h2{ font-size:1.3rem; line-height:1.25; margin:6px 0 0; color:var(--hs-ink); letter-spacing:-.01em; }
.hs-quiz-card p{ color:var(--hs-muted); font-size:.98rem; line-height:1.55; margin:0; flex:1; }
.hs-quiz-card__meta{ font-size:.84rem; color:var(--hs-muted); }
.hs-quiz-card__cta{ font-weight:600; color:var(--hs-primary); margin-top:4px; }

/* ---------- SINGLE QUIZ ---------- */
.hs-quiz{ max-width:720px; margin:0 auto; }
.hs-quiz-intro{ text-align:center; color:var(--hs-muted); font-size:1.02rem; line-height:1.6; margin:0 0 30px; }

.hs-quiz-progress{ position:sticky; top:0; z-index:5; height:6px; background:var(--hs-line);
	border-radius:100px; overflow:hidden; margin:0 0 30px; }
.hs-quiz-progress__bar{ height:100%; width:0; background:var(--hs-primary);
	border-radius:100px; transition:width .35s ease; }

.hs-quiz-q{ border:1px solid var(--hs-line); border-radius:var(--hs-radius); background:#fff;
	box-shadow:var(--hs-shadow-sm); padding:24px 24px 14px; margin:0 0 18px; }
.hs-quiz-q legend{ display:flex; align-items:flex-start; gap:12px; font-size:1.12rem; font-weight:600;
	color:var(--hs-ink); line-height:1.4; padding:0; margin-bottom:16px; float:none; width:100%; }
.hs-quiz-qn{ flex:0 0 28px; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
	background:rgba(193,55,61,.10); color:var(--hs-primary); border-radius:50%; font-size:.85rem; font-weight:700; }

.hs-quiz-opts{ display:grid; gap:10px; }
.hs-quiz-opt{ display:flex; align-items:center; gap:12px; cursor:pointer;
	border:1.5px solid var(--hs-line); border-radius:10px; padding:13px 16px;
	transition:border-color .15s, background .15s; }
.hs-quiz-opt:hover{ border-color:var(--hs-primary); background:rgba(193,55,61,.03); }
.hs-quiz-opt input{ accent-color:var(--hs-primary); width:18px; height:18px; margin:0; flex:0 0 auto; }
.hs-quiz-opt span{ color:#33333c; font-size:1rem; }
.hs-quiz-opt:has(input:checked){ border-color:var(--hs-primary); background:rgba(193,55,61,.06);
	box-shadow:0 0 0 3px rgba(193,55,61,.08); }
.hs-quiz-q--flag{ animation:hsQuizFlag .6s ease; }
@keyframes hsQuizFlag{ 0%,100%{ box-shadow:var(--hs-shadow-sm); } 30%,70%{ box-shadow:0 0 0 3px rgba(193,55,61,.35); border-color:var(--hs-primary); } }

/* gate */
.hs-quiz-gate{ text-align:center; background:linear-gradient(135deg,#fff 0%,#fff7f7 100%);
	border:1px solid var(--hs-line); border-radius:var(--hs-radius); box-shadow:var(--hs-shadow-md);
	padding:32px 28px; margin-top:8px; }
.hs-quiz-gate h3{ font-size:1.4rem; margin:0 0 8px; color:var(--hs-ink); }
.hs-quiz-gate p{ color:var(--hs-muted); margin:0 0 18px; }
.hs-quiz-gate__fields{ display:flex; gap:12px; flex-wrap:wrap; max-width:480px; margin:0 auto 18px; }
.hs-quiz-gate__fields input{ flex:1 1 180px; padding:13px 16px; border:1px solid var(--hs-line);
	border-radius:10px; font-size:1rem; outline:none; transition:border-color .15s, box-shadow .15s; }
.hs-quiz-gate__fields input:focus{ border-color:var(--hs-primary); box-shadow:0 0 0 4px rgba(193,55,61,.10); }
.hs-quiz-error{ color:var(--hs-primary); font-weight:600; min-height:1.2em; margin:14px 0 0; }
.hs-quiz-privacy{ font-size:.82rem; color:var(--hs-muted); margin:12px 0 0; }

/* ---------- RESULT ---------- */
.hs-quiz-result-mount{ max-width:720px; margin:0 auto; }
.hs-quiz-result{ text-align:center; background:#fff; border:1px solid var(--hs-line);
	border-radius:var(--hs-radius); box-shadow:var(--hs-shadow-lg); padding:44px 32px;
	animation:hsQuizIn .4s ease; }
@keyframes hsQuizIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hs-quiz-result .hs-eyebrow{ display:inline-block; text-transform:uppercase; letter-spacing:.08em;
	font-size:.74rem; font-weight:700; color:var(--hs-primary); background:rgba(193,55,61,.08);
	padding:6px 14px; border-radius:100px; margin-bottom:18px; }
.hs-quiz-result h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin:8px 0 14px; color:var(--hs-ink); }
.hs-quiz-result h2 em{ color:var(--hs-primary); font-style:normal; }
.hs-quiz-blurb{ color:#3a3a44; font-size:1.05rem; line-height:1.65; max-width:560px; margin:0 auto 8px; }

.hs-quiz-score-ring{ --pct:0; width:130px; height:130px; margin:0 auto 8px; border-radius:50%;
	display:grid; place-items:center;
	background:conic-gradient(var(--hs-primary) calc(var(--pct)*1%), var(--hs-line) 0); }
.hs-quiz-score-ring span{ width:104px; height:104px; border-radius:50%; background:#fff;
	display:grid; place-items:center; font-size:2rem; font-weight:800; color:var(--hs-ink); }
.hs-quiz-score-ring small{ font-size:.9rem; color:var(--hs-muted); font-weight:600; }

.hs-quiz-recs{ margin-top:28px; padding-top:24px; border-top:1px solid var(--hs-line); }
.hs-quiz-recs h3{ font-size:1.15rem; margin:0 0 14px; color:var(--hs-ink); }
.hs-quiz-recs ul{ list-style:none; padding:0; margin:0 0 18px; display:grid; gap:8px; }
.hs-quiz-recs a{ color:var(--hs-primary); font-weight:600; text-decoration:none; }
.hs-quiz-recs a:hover{ text-decoration:underline; }
.hs-quiz-again{ margin-top:24px; }
.hs-quiz-again a{ color:var(--hs-muted); text-decoration:none; font-weight:600; }
.hs-quiz-again a:hover{ color:var(--hs-primary); }

@media(max-width:560px){ .hs-quiz-gate__fields{ flex-direction:column; } }