/* Finance Hamster — "Anatomy of an ETF".
   The card (the REAL screener browse card, styled by screener.css) sits in the
   centre; a callout for each part is arranged around it. On wide screens JS draws
   leader lines from each callout to the part it describes; on narrow screens it
   stacks (card first, then callouts) and the lines are hidden. Scoped to .fh-anat. */
.fh-anat {
	--accent: #f59e0b; --accent-d: #b9770a; --soft: #fff5e1; --bd: #ece4d8;
	--card: #fff; --ink: #2b2118; --muted: #8a7d6f; --pos: #15803d;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ink); max-width: 1000px; margin: 0 auto;
}
.fh-anat * { box-sizing: border-box; }

.fh-anat-intro { text-align: center; }
.fh-anat-intro h2 { margin: 0 0 2px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; }
.fh-anat-intro p { margin: 0 auto; max-width: 520px; color: var(--muted); font-size: 0.92rem; }

/* The diagram: [ left callouts | card | right callouts ] */
.fh-anat-diagram { position: relative; display: grid; grid-template-columns: 1fr minmax(280px, 320px) 1fr; gap: 30px; align-items: center; margin-top: 22px; }
.fh-anat-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.fh-anat-lines path { fill: none; stroke: var(--bd); stroke-width: 2; transition: stroke .15s, stroke-width .15s; }
.fh-anat-lines path.is-active { stroke: var(--accent); stroke-width: 3; }
.fh-anat-lines circle { fill: var(--bd); transition: fill .15s; }
.fh-anat-lines circle.is-active { fill: var(--accent); }

.fh-anat-side { display: flex; flex-direction: column; gap: 18px; z-index: 1; }
.fh-anat-side--l { align-items: flex-end; }
.fh-anat-side--r { align-items: flex-start; }
.fh-anat-center { z-index: 1; }
.fh-anat-center .fh-card { width: 100%; }

/* A callout */
.fh-anat-call { position: relative; width: 100%; max-width: 300px; background: var(--card); border: 1px solid var(--bd); border-radius: 13px; padding: 11px 13px; box-shadow: 0 2px 10px rgba(43,33,24,.06); transition: border-color .15s, box-shadow .18s, transform .12s; }
.fh-anat-side--l .fh-anat-call { text-align: right; }
.fh-anat-call:focus { outline: none; }
.fh-anat-call:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 2px; }
.fh-anat-call.is-active { border-color: var(--accent); box-shadow: 0 8px 22px rgba(245,158,11,.20); transform: translateY(-1px); }
.fh-anat-call-tag { margin: 0 0 3px; font-size: 0.84rem; font-weight: 800; color: var(--accent-d); letter-spacing: -0.01em; }
.fh-anat-call-text { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--ink); }
.fh-anat-more { display: inline-block; margin-top: 7px; font-size: 0.8rem; font-weight: 700; color: var(--accent-d); text-decoration: none; }
.fh-anat-more:hover { text-decoration: underline; }

/* The dot where a leader line attaches (inner edge, facing the card) */
.fh-anat-call-dot { position: absolute; top: 15px; width: 9px; height: 9px; border-radius: 999px; background: var(--bd); box-shadow: 0 0 0 2px var(--card); transition: background .15s; }
.fh-anat-side--l .fh-anat-call-dot { right: -5px; }
.fh-anat-side--r .fh-anat-call-dot { left: -5px; }
.fh-anat-call.is-active .fh-anat-call-dot { background: var(--accent); }

/* "See it" toggle a touch tighter inside a callout */
.fh-anat-call .fh-viz-wrap { display: block; margin-top: 6px; }

/* Card part highlight (driven by JS, two-way with the callouts) */
.fh-anat .fh-card--anat [data-part] { border-radius: 8px; outline: 2px solid transparent; outline-offset: 2px; transition: background .15s, box-shadow .15s, outline-color .15s; cursor: pointer; }
.fh-anat .fh-card--anat [data-part].is-active { background: rgba(245,158,11,.16); outline-color: var(--accent); }
.fh-anat .fh-card--anat .fh-badge[data-part].is-active { box-shadow: 0 0 0 2px var(--accent); outline-color: transparent; }
.fh-anat .fh-card--anat:hover { transform: none; }

.fh-anat-note { margin: 20px 0 0; text-align: center; font-size: 0.76rem; color: var(--muted); font-style: italic; }

/* Stacked layout: card first, then the callouts; no leader lines */
@media (max-width: 760px) {
	.fh-anat-diagram { grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
	.fh-anat-center { order: -1; }
	.fh-anat-side { align-items: stretch; }
	.fh-anat-side--l .fh-anat-call { text-align: left; }
	.fh-anat-call { max-width: none; }
	.fh-anat-call-dot { display: none; }
	.fh-anat-lines { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fh-anat *, .fh-anat-lines path, .fh-anat-lines circle { transition: none !important; }
}

@media (prefers-color-scheme: dark) {
	.fh-anat { --accent: #f59e0b; --accent-d: #fbbf24; --soft: #2c2114; --bd: #3a3026; --card: #221c16; --ink: #f2ebe0; --muted: #b7ab9a; --pos: #4ade80; }
	.fh-anat-lines path { stroke: #4a3f31; }
	.fh-anat-lines circle { fill: #4a3f31; }
}