/* Finance Hamster — interactive Learn engine.
   Consumes the theme design tokens (style.css :root) so guides "ship with the new
   design" for free, in light + dark, and honour prefers-reduced-motion. */

.fh-lesson { max-width: 760px; margin: 0 auto; }
.fh-lesson-hook { font-size: var(--t-md, 1.15rem); font-weight: 700; color: var(--ink, #2b2118); margin: 0 0 var(--s-4, 16px); }

/* 💡 TL;DR — the answer above the fold */
.fh-tldr {
	background: var(--soft, #fff5e1); border: 1px solid var(--bd, #ece4d8);
	border-radius: var(--radius, 16px); padding: var(--s-4, 16px) var(--s-5, 24px);
	margin: 0 0 var(--s-5, 24px);
}
.fh-tldr-badge { display: inline-block; font-weight: 800; font-size: var(--t-sm, .88rem); color: var(--accent-d, #b9770a); margin-bottom: var(--s-2, 8px); }
.fh-tldr ul { margin: 0; padding-left: 1.2em; }
.fh-tldr li { margin: 0 0 var(--s-1, 4px); }

/* The live widget = the lesson, the SEO-unique content, the Shorts b-roll */
.fh-lesson-widget { margin: 0 0 var(--s-3, 12px); }
.fh-lesson-try { font-size: var(--t-sm, .88rem); color: var(--muted, #6f6357); margin: 0 0 var(--s-6, 32px); }

/* Readable body. Anchors clear the (optional) sticky header. */
.fh-lesson-body > h2 { scroll-margin-top: 84px; margin-top: var(--s-7, 48px); }
.fh-lesson-body > h2:first-child { margin-top: 0; }

/* Inline glossary tooltip (wrapper span + button trigger + sibling pop) */
.fh-term { position: relative; display: inline; }
.fh-term-w {
	font: inherit; color: var(--accent-d, #b9770a); background: none; border: 0; padding: 0;
	cursor: help; border-bottom: 1.5px dotted currentColor; line-height: inherit;
}
.fh-term-w:focus-visible { outline: 2px solid var(--ring, rgba(245,158,11,.35)); outline-offset: 2px; border-radius: 2px; }
.fh-term-pop {
	position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(320px, 86vw);
	background: var(--card, #fff); color: var(--ink, #2b2118); border: 1px solid var(--bd, #ece4d8);
	border-radius: var(--radius-sm, 10px); box-shadow: var(--shadow-lg, 0 14px 40px rgba(43,33,24,.12));
	padding: var(--s-3, 12px) var(--s-4, 16px); font-size: var(--t-sm, .88rem); font-weight: 400; text-align: left;
	line-height: 1.5; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .12s ease, transform .12s ease;
}
.fh-term.is-open .fh-term-pop { opacity: 1; visibility: visible; transform: none; }
.fh-term-more { display: inline-block; margin-top: var(--s-2, 8px); font-weight: 700; }

/* Non-gating check-for-understanding */
.fh-check {
	background: var(--card, #fff); border: 1px solid var(--bd, #ece4d8); border-radius: var(--radius, 16px);
	padding: var(--s-5, 24px); margin: var(--s-6, 32px) 0;
}
.fh-check-q { font-weight: 800; margin: 0 0 var(--s-3, 12px); }
.fh-check-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2, 8px); }
.fh-check-opt {
	display: flex; align-items: flex-start; gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-4, 16px);
	border: 1.5px solid var(--bd, #ece4d8); border-radius: var(--radius-sm, 10px); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.fh-check-opt:hover { border-color: var(--accent, #f59e0b); }
.fh-check-opt input { margin-top: .2em; }
.fh-check-opt.is-correct { border-color: var(--pos, #15803d); background: color-mix(in srgb, var(--pos, #15803d) 8%, transparent); }
.fh-check-opt.is-wrong { border-color: var(--neg, #b91c1c); background: color-mix(in srgb, var(--neg, #b91c1c) 8%, transparent); }
.fh-check-why {
	margin: var(--s-4, 16px) 0 0; padding: var(--s-3, 12px) var(--s-4, 16px);
	background: var(--soft, #fff5e1); border-radius: var(--radius-sm, 10px); font-size: var(--t-sm, .88rem);
}

/* FAQ */
.fh-faq { margin: var(--s-7, 48px) 0 0; }
.fh-faq-item { border-bottom: 1px solid var(--bd, #ece4d8); padding: var(--s-3, 12px) 0; }
.fh-faq-item summary { font-weight: 700; cursor: pointer; list-style: none; padding-right: var(--s-5, 24px); position: relative; }
.fh-faq-item summary::-webkit-details-marker { display: none; }
.fh-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--accent-d, #b9770a); font-weight: 800; }
.fh-faq-item[open] summary::after { content: "–"; }
.fh-faq-a { padding-top: var(--s-3, 12px); color: var(--muted, #6f6357); }

.fh-lesson-foot { margin-top: var(--s-7, 48px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--bd, #ece4d8); }
.fh-lesson-src { font-size: var(--t-xs, .78rem); color: var(--muted, #6f6357); margin: 0 0 var(--s-2, 8px); }
.fh-lesson-missing { color: var(--neg, #b91c1c); font-weight: 700; }

/* ---- Learn grid (Door 1: searchable, no forced progression) ---- */
.fh-learn { max-width: var(--maxw, 1120px); margin: 0 auto; }
.fh-learn-controls { display: flex; flex-wrap: wrap; gap: var(--s-3, 12px); align-items: center; margin: 0 0 var(--s-5, 24px); }
.fh-learn-search { flex: 1 1 260px; }
.fh-learn-q {
	width: 100%; font: inherit; padding: var(--s-3, 12px) var(--s-4, 16px);
	border: 1.5px solid var(--bd, #ece4d8); border-radius: var(--radius-sm, 10px); background: var(--card, #fff); color: var(--ink, #2b2118);
}
.fh-learn-q:focus-visible { outline: 2px solid var(--ring, rgba(245,158,11,.35)); outline-offset: 1px; border-color: var(--accent, #f59e0b); }
.fh-learn-pills { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); }
.fh-learn-pill {
	font: inherit; font-size: var(--t-sm, .88rem); padding: var(--s-2, 8px) var(--s-3, 12px);
	border: 1.5px solid var(--bd, #ece4d8); border-radius: 999px; background: var(--card, #fff); color: var(--muted, #6f6357); cursor: pointer;
}
.fh-learn-pill.is-active { background: var(--accent, #f59e0b); border-color: var(--accent, #f59e0b); color: #2b2118; font-weight: 700; }
.fh-learn-grid { display: grid; gap: var(--s-4, 16px); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fh-learn-card {
	display: block; background: var(--card, #fff); border: 1px solid var(--bd, #ece4d8); border-radius: var(--radius, 16px);
	padding: var(--s-5, 24px); color: var(--ink, #2b2118); box-shadow: var(--shadow, 0 1px 3px rgba(43,33,24,.06));
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.fh-learn-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 14px 40px rgba(43,33,24,.12)); border-color: var(--accent, #f59e0b); }
.fh-learn-card[hidden] { display: none; }
.fh-learn-tag { display: inline-block; font-size: var(--t-xs, .78rem); font-weight: 700; color: var(--accent-d, #b9770a); margin-bottom: var(--s-2, 8px); }
.fh-learn-card h3 { margin: 0 0 var(--s-2, 8px); font-size: var(--t-md, 1.15rem); }
.fh-learn-card p { margin: 0; color: var(--muted, #6f6357); font-size: var(--t-sm, .88rem); }
.fh-learn-empty { text-align: center; color: var(--muted, #6f6357); padding: var(--s-6, 32px); }

@media (prefers-reduced-motion: reduce) {
	.fh-term-pop, .fh-learn-card { transition: none; }
}