/* Finance Hamster — fund typeahead dropdown. Tokens inherited from foundation.css. */

.fh-typeahead { position: relative; }

.fh-ac-list {
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: 0;
	top: calc(100% + 6px);
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--fh-card, #fff);
	border: 1px solid var(--fh-border, rgba(0, 0, 0, .12));
	border-radius: 14px;
	box-shadow: 0 18px 50px -20px rgba(0, 0, 0, .35), 0 2px 8px -3px rgba(0, 0, 0, .2);
	z-index: 60;
	max-height: min(64vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.fh-ac-list[hidden] { display: none; }

.fh-ac-group-h {
	font: 600 11px/1.6 var(--fh-font, inherit);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--fh-muted, #6b7280);
	padding: 8px 10px 2px;
}

.fh-ac-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	cursor: pointer;
	scroll-margin: 8px;
}
.fh-ac-opt.is-active,
.fh-typeahead:not([data-nav="keyboard"]) .fh-ac-opt:hover {
	background: var(--fh-soft, rgba(0, 0, 0, .05));
	outline: 2px solid var(--fh-ring, rgba(99, 102, 241, .5));
	outline-offset: -2px;
}
.fh-typeahead[data-nav="pointer"] .fh-ac-opt.is-active:not(:hover) { outline: none; background: none; }

.fh-ac-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fh-ac-name {
	font: 600 14px/1.35 var(--fh-font, inherit);
	color: var(--fh-text, #111827);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fh-ac-meta {
	display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
	font: 500 12px/1.4 var(--fh-font, inherit);
	color: var(--fh-muted, #6b7280);
}
.fh-ac-dot { opacity: .5; }
.fh-ac-chip {
	background: var(--fh-soft, rgba(0, 0, 0, .06));
	border-radius: 999px; padding: 1px 8px; font-size: 11px;
}
.fh-ac-issuer { color: var(--fh-text, #374151); }
.fh-ac-pos { color: var(--fh-up, #059669); font-weight: 600; }
.fh-ac-neg { color: var(--fh-down, #dc2626); font-weight: 600; }

.fh-ac-acc { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fh-ac-ter {
	font: 600 12px/1 var(--fh-font, inherit);
	color: var(--fh-text, #374151);
	background: var(--fh-soft, rgba(0, 0, 0, .06));
	border-radius: 8px; padding: 4px 7px;
}

/* Highlight = weight + underline (never color alone), so it survives dark mode + forced colors. */
.fh-ac-hl mark {
	background: none; color: inherit; font-weight: 800;
	text-decoration: underline; text-underline-offset: 2px;
}

.fh-ac-action {
	font: 600 13px/1.4 var(--fh-font, inherit);
	color: var(--fh-accent, #4f46e5);
}
.fh-ac-empty {
	padding: 14px 12px; color: var(--fh-muted, #6b7280);
	font: 500 13px/1.4 var(--fh-font, inherit);
}

@media (max-width: 640px) {
	.fh-ac-list { max-height: 70vh; }
	.fh-ac-opt { min-height: 44px; }
	.fh-ac-name { white-space: normal; }
}

@media (prefers-color-scheme: dark) {
	.fh-ac-list { background: var(--fh-card, #161a22); border-color: var(--fh-border, rgba(255, 255, 255, .12)); }
}

@media (forced-colors: active) {
	.fh-ac-opt.is-active { outline: 2px solid; }
	.fh-ac-hl mark { text-decoration: underline; }
}