/*
 * Savings vs Investing Calculator styles.
 * Clean white layout, blue accents, rounded cards, subtle shadows.
 */

.svic {
	--svic-blue-900: #0b3d91;
	--svic-blue-700: #1a56db;
	--svic-blue-600: #2563eb;
	--svic-blue-100: #e8f0fe;
	--svic-blue-50: #f4f8ff;
	--svic-green-700: #0f9d58;
	--svic-green-100: #e6f7ee;
	--svic-gray-900: #111827;
	--svic-gray-700: #374151;
	--svic-gray-500: #6b7280;
	--svic-gray-200: #e5e7eb;
	--svic-gray-100: #f3f4f6;
	--svic-white: #ffffff;
	--svic-radius-lg: 16px;
	--svic-radius-md: 10px;
	--svic-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
	--svic-max-width: 860px;

	max-width: var( --svic-max-width );
	margin: 0 auto;
	padding: 32px 20px 64px;
	color: var( --svic-gray-900 );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
	background: var( --svic-white );
}

.svic *,
.svic *::before,
.svic *::after {
	box-sizing: border-box;
}

.svic__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Hero */

.svic__hero {
	text-align: center;
	margin-bottom: 28px;
}

.svic__title {
	font-size: clamp( 1.75rem, 1.4rem + 1.4vw, 2.5rem );
	font-weight: 800;
	color: var( --svic-gray-900 );
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}

.svic__subtitle {
	font-size: 1.05rem;
	color: var( --svic-gray-700 );
	max-width: 640px;
	margin: 0 auto;
}

/* Cards */

.svic__card {
	background: var( --svic-white );
	border: 1px solid var( --svic-gray-200 );
	border-radius: var( --svic-radius-lg );
	box-shadow: var( --svic-shadow );
	padding: 32px 28px 28px;
	margin-bottom: 24px;
}

/* Calculator form */

.svic__field {
	margin-bottom: 24px;
}
.svic__field--quicklook {
	margin-bottom: 32px;
}

.svic__field-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.svic__field label {
	display: block;
	font-weight: 600;
	font-size: 0.925rem;
	color: var( --svic-gray-900 );
	margin-bottom: 8px;
}

.svic__field input[type="number"],
.svic__field input[type="date"],
.svic__field select {
	width: 100%;
	font-size: 1rem;
	padding: 12px 14px;
	border: 1.5px solid var( --svic-gray-200 );
	border-radius: var( --svic-radius-md );
	background: var( --svic-white );
	color: var( --svic-gray-900 );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.svic__input--error {
	border-color: var( --svic-red, #dc2626 ) !important;
	box-shadow: 0 0 0 3px rgba( 220, 38, 38, 0.12 );
}

.svic__field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 52px;
	padding: 0 40px 0 14px;
	line-height: 49px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
}

.svic__field select:hover {
	border-color: var( --svic-gray-500 );
}

.svic__field input:focus-visible,
.svic__field select:focus-visible {
	outline: none;
	border-color: var( --svic-blue-600 );
	box-shadow: 0 0 0 3px var( --svic-blue-100 );
}

.svic__field input:invalid {
	border-color: #dc2626;
}

.svic__input-prefix,
.svic__input-suffix {
	position: relative;
	display: flex;
	align-items: center;
}

.svic__input-prefix span,
.svic__input-suffix span {
	position: absolute;
	color: var( --svic-gray-500 );
	font-weight: 600;
	pointer-events: none;
}

.svic__input-prefix span {
	left: 16px;
}

.svic__input-prefix input[type="number"] {
	padding-left: 34px !important;
}

.svic__input-suffix span {
	right: 14px;
}

.svic__input-suffix input {
	padding-right: 32px;
}

.svic__date-display {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: var( --svic-gray-500 );
	font-weight: 500;
}

.svic__error {
	margin: 8px 0 0;
	font-size: 0.875rem;
	color: #dc2626;
	font-weight: 600;
	min-height: 1.2em;
}

.svic__button {
	appearance: none;
	width: 100%;
	background: var( --svic-blue-600 );
	color: var( --svic-white );
	font-size: 1.05rem;
	font-weight: 700;
	border: none;
	border-radius: var( --svic-radius-md );
	padding: 14px 20px;
	cursor: pointer;
	margin-top: -20px;
	transition: background 0.15s ease, transform 0.05s ease;
}

.svic__button:hover:not(:disabled) {
	background: var( --svic-blue-700 );
}

.svic__button:active:not(:disabled) {
	transform: translateY( 1px );
}

.svic__button:disabled {
	background: var( --svic-gray-200 );
	color: var( --svic-gray-500 );
	cursor: not-allowed;
}

.svic__button:focus-visible {
	outline: 3px solid var( --svic-blue-100 );
	outline-offset: 2px;
}

.svic__loading {
	text-align: center;
	color: var( --svic-blue-700 );
	font-weight: 600;
	padding: 16px;
}

/* Results */

.svic__headline-stat {
	background: var( --svic-blue-50, #f4f8ff );
	border: 1px solid var( --svic-blue-100, #e8f0fe );
	border-radius: 12px;
	padding: 14px 20px;
	margin: 0 0 24px;
}
.svic__investment-summary-table-wrap {
	margin-top: 14px;
	padding-top: 14px;
	margin-bottom: 14px;
	border-top: 1px solid var( --svic-blue-100, #e8f0fe );
}
.svic__investment-summary-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.svic__investment-summary-table th {
	text-align: left;
	color: var( --svic-gray-500, #6b7280 );
	font-weight: 600;
	font-size: 0.75rem;
	padding: 0 0 6px;
}
.svic__investment-summary-table th:not( :first-child ),
.svic__investment-summary-table td:not( :first-child ) {
	text-align: right;
}
.svic__investment-summary-table td {
	padding: 6px 0;
	color: var( --svic-gray-900, #111827 );
}
.svic__investment-summary-table td:first-child {
	font-weight: 600;
}
.svic__headline-stat-tab {
	display: inline-block;
	background: var( --svic-blue-600, #2563eb );
	color: var( --svic-white, #ffffff );
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.svic__headline-stat-text {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --svic-blue-900, #0b3d91 );
	margin: 0 0 4px;
}
.svic__headline-stat-subtitle {
	font-size: 0.875rem;
	line-height: 1.3;
	color: var( --svic-blue-700, #1a56db );
	margin: 6px 0 0;
}

.svic__result-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

.svic__result-card {
	margin-bottom: 0;
	border-top: 4px solid var( --svic-blue-600 );
}

.svic__result-card--sp500 {
	border-top-color: var( --svic-green-700 );
}

.svic__result-card h3 {
	margin: 0 0 8px;
	font-size: 1.05rem;
	color: var( --svic-gray-700 );
}

.svic__result-value {
	font-size: 2rem;
	font-weight: 800;
	color: var( --svic-gray-900 );
	margin: 0 0 16px;
}

.svic__result-card--sp500 .svic__result-value,
.svic__result-card--savings .svic__result-value {
	margin: 0 0 4px;
}

.svic__result-price-range {
	font-size: 0.75rem;
	color: var( --svic-gray-400, #9ca3af );
	margin: 0 0 14px;
}

.svic__result-list {
	margin: 0;
}

.svic__result-list > div {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-top: 1px solid var( --svic-gray-100 );
	font-size: 0.9rem;
}

.svic__result-list dt {
	color: var( --svic-gray-500 );
}

.svic__result-list dd {
	margin: 0;
	font-weight: 700;
	color: var( --svic-gray-900 );
}

/* Comparison */

.svic__comparison h2,
.svic__chart-card h2 {
	margin: 0 0 20px;
	font-size: 1.4rem;
}

.svic__comparison-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 16px;
	margin-bottom: 20px;
}

.svic__comparison-grid > div {
	background: var( --svic-blue-50 );
	border-radius: var( --svic-radius-md );
	padding: 16px;
}

.svic__comparison-label {
	display: block;
	font-size: 0.85rem;
	color: var( --svic-gray-500 );
	font-weight: 600;
	margin-bottom: 6px;
}

.svic__comparison-value {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	color: var( --svic-gray-900 );
}

.svic__comparison-value.svic--positive {
	color: var( --svic-green-700 );
}

.svic__comparison-value.svic--neutral {
	color: var( --svic-blue-700 );
}

.svic__summary {
	background: var( --svic-gray-100 );
	border-radius: var( --svic-radius-md );
	padding: 18px;
	font-size: 1rem;
	color: var( --svic-gray-900 );
	margin: 0;
}

/* Chart */

.svic__chart-wrapper {
	position: relative;
	width: 100%;
	height: 340px;
}

/* SEO content */

.svic__seo-content {
	margin-top: 32px;
}

.svic__seo-section {
	margin-bottom: 28px;
	border-bottom: 1px solid var( --svic-gray-100 );
	padding-bottom: 20px;
}

.svic__seo-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.svic__seo-section h2 {
	font-size: 0.9375rem;
	color: var( --svic-gray-900 );
	margin: 0;
}

.svic__seo-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	color: var( --svic-blue-600 );
	border: none;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 4px 2px;
	cursor: pointer;
}

.svic__seo-toggle::after {
	content: "+";
	font-size: 1.1rem;
	line-height: 1;
}

.svic__seo-toggle[aria-expanded="true"]::after {
	content: "\2212";
}

.svic__seo-toggle:hover {
	color: var( --svic-blue-700 );
	text-decoration: underline;
}

.svic__seo-toggle:focus-visible {
	outline: 2px solid var( --svic-blue-600 );
	outline-offset: 2px;
	border-radius: 4px;
}

.svic__seo-body {
	margin-top: 12px;
}

.svic__seo-body p {
	color: var( --svic-gray-700 );
	margin: 0;
}

/* FAQ */

.svic__faq {
	border-top: 1px solid var( --svic-gray-200 );
	padding-top: 28px;
	margin-top: 8px;
	margin-bottom: 36px;
}

.svic__faq h2 {
	font-size: 1rem;
	margin: 0 0 16px;
}

.svic__faq-item {
	border-bottom: 1px solid var( --svic-gray-200 );
}

.svic__faq-question {
	margin: 0;
}

.svic__faq-toggle {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	font-size: 1rem;
	font-weight: 700;
	color: var( --svic-gray-900 );
	padding: 16px 28px 16px 0;
	position: relative;
	cursor: pointer;
}

.svic__faq-toggle::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY( -50% );
	font-size: 1.4rem;
	color: var( --svic-blue-600 );
}

.svic__faq-toggle[aria-expanded="true"]::after {
	content: "\2212";
}

.svic__faq-toggle:focus-visible {
	outline: 2px solid var( --svic-blue-600 );
	outline-offset: 2px;
}

.svic__faq-answer {
	padding: 0 0 16px;
	color: var( --svic-gray-700 );
}

.svic__faq-answer p {
	margin: 0;
}

/* Disclaimer */

.svic__disclaimer {
	margin-top: 32px;
	font-size: 0.8rem;
	color: var( --svic-gray-500 );
	text-align: center;
}

/* Responsive */

@media ( max-width: 640px ) {
	.svic {
		padding: 20px 16px 48px;
	}

	.svic__card {
		padding: 20px;
	}

	.svic__field-group,
	.svic__result-cards,
	.svic__comparison-grid {
		grid-template-columns: 1fr;
	}

	.svic__chart-wrapper {
		height: 280px;
	}

	.svic__share-row {
		position: static !important;
		margin-bottom: 16px;
		flex-wrap: wrap;
	}
}

/* Reduced motion */

@media ( prefers-reduced-motion: reduce ) {
	.svic__button {
		transition: none;
	}
}

/* Copy Link button: small, secondary/outlined icon button in the top-right
   corner of the comparison card -- deliberately NOT styled like the primary
   Calculate button, since it's a secondary action that only appears once
   results already exist. */
.svic__comparison {
	position: relative;
}
/* Same treatment as the Portfolio page: the share buttons float
   absolute over this heading, so it needs permanent right-side
   clearance to avoid overlapping a long comparison label. */
#svic-comparison-heading {
	padding-right: 300px;
}
@media ( max-width: 640px ) {
	#svic-comparison-heading {
		padding-right: 0;
	}
}
.svic__share-row {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.svic__share-row button {
	margin: 0;
	vertical-align: middle;
}
.svic__copy-link-btn {
	display: inline-flex;
	align-items: center;
	height: 32px;
	box-sizing: border-box;
	gap: 6px;
	padding: 0 12px;
	background: transparent;
	border: 1px solid var( --svic-gray-300, #d1d5db );
	border-radius: 999px;
	color: var( --svic-blue-700, #1a56db );
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.svic__share-buttons {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
}
.svic__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	padding: 0;
	background: transparent;
	border: 1px solid var( --svic-gray-300, #d1d5db );
	border-radius: 50%;
	color: var( --svic-gray-700, #374151 );
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.svic__share-btn:hover {
	background: var( --svic-gray-100, #f3f4f6 );
	border-color: var( --svic-gray-400, #9ca3af );
	color: var( --svic-blue-700, #1a56db );
}
.svic__copy-link-btn:hover {
	background: var( --svic-blue-50, #eff6ff );
	border-color: var( --svic-blue-700, #1a56db );
}
.svic__copy-link-btn svg {
	flex-shrink: 0;
}
@media ( max-width: 640px ) {
	.svic__copy-link-btn {
		position: static;
		margin-bottom: 16px;
	}
}

/* Download Chart / Download Data buttons: same small, secondary icon button
   language, in the top-right corner of the chart card. */
.svic__chart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 0;
}
.svic__chart-header h2 {
	margin: 0;
}
.svic__chart-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.svic__icon-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid var( --svic-gray-300, #d1d5db );
	border-radius: 999px;
	color: var( --svic-blue-700, #1a56db );
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.svic__icon-btn:hover {
	background: var( --svic-blue-50, #eff6ff );
	border-color: var( --svic-blue-700, #1a56db );
}
.svic__icon-btn svg {
	flex-shrink: 0;
}
@media ( max-width: 640px ) {
	.svic__chart-header {
		flex-direction: column;
		align-items: flex-start;
	}
	.svic__icon-btn-label {
		display: none;
	}
	.svic__icon-btn {
		padding: 8px;
	}
}

/* Popular Comparisons: plain, static, always-crawlable links directly to
   full pretty URLs (using the page's own default date window), placed
   right after the hero, before any JS runs -- lets Googlebot (and
   impatient visitors) discover and jump straight to a stock-vs-stock
   comparison. Unlike ETF/Stocks/Crypto, Compare has no short-redirect
   route to bounce through (two independent 503-option dropdowns have no
   single sensible default partner), so these link to the full slug
   directly. */
.svic__popular-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
}
.svic__popular-links-label {
	font-size: 0.8125rem;
	color: var( --svic-gray-500 );
	margin-right: 2px;
}
.svic__popular-links a {
	display: inline-block;
	padding: 4px 10px;
	background: var( --svic-white, #ffffff ) !important;
	border: 1px solid var( --svic-gray-300, #d1d5db );
	border-radius: 999px;
	color: var( --svic-blue-700, #1a56db ) !important;
	font-size: 0.6875rem;
	font-weight: 600;
	text-decoration: underline !important;
	text-decoration-skip-ink: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.svic__popular-links a:hover {
	background: var( --svic-blue-50, #eff6ff ) !important;
	border-color: var( --svic-blue-200, #bfdbfe );
}

/* Breadcrumb trail: small, gray, minimal financial-site style. Placed
   above the hero. Last crumb (current page) is non-clickable and
   slightly darker to signal it's the current location. */
.svic__breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var( --svic-gray-500 );
	margin: 0 0 16px;
}
.svic__breadcrumbs a {
	color: var( --svic-gray-500 );
	text-decoration: none;
}
.svic__breadcrumbs a:hover {
	color: var( --svic-blue-700, #1a56db );
	text-decoration: underline;
}
.svic__breadcrumb-sep {
	color: var( --svic-gray-300, #d1d5db );
}
.svic__breadcrumb-current {
	color: var( --svic-gray-700, #374151 );
	font-weight: 600;
}

/* Footer links: small, quiet trust-page links (About, Privacy Policy)
   printed into the theme footer on every page via wp_footer. */
.svic__footer-links {
	text-align: center;
	padding: 12px 0;
	font-size: 0.8125rem;
	color: var( --svic-gray-500 );
}
.svic__footer-links a {
	color: var( --svic-gray-500 );
	text-decoration: none;
}
.svic__footer-links a:hover {
	text-decoration: underline;
}
.svic__footer-links-sep {
	margin: 0 8px;
	color: var( --svic-gray-300, #d1d5db );
}


.svic__explore-calculators h2 {
	font-size: 1.4rem;
	margin: 0 0 8px;
}
.svic__explore-intro {
	color: var( --svic-gray-500 );
	font-size: 0.9375rem;
	margin: -8px 0 20px;
}
.svic__explore-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 12px;
}
.svic__explore-item {
	background: var( --svic-white );
	border: 1px solid var( --svic-gray-200 );
	border-radius: var( --svic-radius-md, 10px );
	padding: 14px 16px;
}
.svic__explore-item a {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --svic-blue-700, #1a56db );
	text-decoration: none;
	margin-bottom: 4px;
}
.svic__explore-item a:hover {
	text-decoration: underline;
}
.svic__explore-item p {
	font-size: 0.8125rem;
	color: var( --svic-gray-500 );
	margin: 0;
}

/* Badge: small warm-colored pill highlighting a calculator's unique
   feature (e.g. "3-in-1" on the Compare card), placed right next to
   its title in the Explore Other Calculators section. */
.svic__badge {
	display: inline-block;
	vertical-align: middle;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff;
	background: linear-gradient( 135deg, #f97316, #ef4444 );
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 6px;
}

/* Quick amount buttons: small, muted (gray, not blue) field helper.
   Sits directly after the input, before the (usually empty) error
   message, so no negative-margin workaround is needed. */
.svic__quickamt {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}
.svic__quickamt-btn {
	appearance: none;
	font-family: inherit;
	cursor: pointer;
	display: inline-block;
	padding: 3px 9px;
	background: var( --svic-gray-100, #f3f4f6 );
	border: 1px solid var( --svic-gray-200, #e5e7eb );
	border-radius: 999px;
	color: var( --svic-gray-500, #6b7280 );
	font-size: 0.6875rem;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.svic__quickamt-btn:hover {
	background: var( --svic-gray-200, #e5e7eb );
	color: var( --svic-gray-700, #374151 );
}

.svic__popular-links button.svic__quicklook-btn {
	appearance: none;
	font-family: inherit;
	cursor: pointer;
	display: inline-block;
	padding: 4px 10px;
	background: var( --svic-gray-100, #f3f4f6 ) !important;
	border: 1px solid var( --svic-gray-200, #e5e7eb );
	border-radius: 999px;
	color: var( --svic-gray-700, #374151 ) !important;
	font-size: 0.625rem;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.svic__popular-links button.svic__quicklook-btn:hover {
	background: var( --svic-gray-200, #e5e7eb ) !important;
	border-color: var( --svic-gray-300, #d1d5db );
}

/* Investment ticker search widget: replaces the plain select with
   a text input showing the full browsable ticker list by default (on
   focus), narrowing to live matches once the user types. */
.svic__ticker-search {
	position: relative;
}
.svic__ticker-search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 1rem;
	font-family: inherit;
	border: 1.5px solid var( --svic-gray-200, #e5e7eb );
	border-radius: 10px;
	background: var( --svic-white, #ffffff );
}
.svic__ticker-search-input:focus {
	outline: none;
	border-color: var( --svic-blue-700, #1a56db );
}
.svic__ticker-search-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var( --svic-white, #ffffff );
	border: 1px solid var( --svic-gray-200, #e5e7eb );
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	max-height: 280px;
	overflow-y: auto;
}
.svic__ticker-search-result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.875rem;
}
.svic__ticker-search-result:hover,
.svic__ticker-search-result.is-active {
	background: var( --svic-gray-100, #f3f4f6 );
}
.svic__ticker-search-result-ticker {
	flex-shrink: 0;
	font-weight: 700;
	color: var( --svic-gray-900, #111827 );
}
.svic__ticker-search-result-name {
	color: var( --svic-gray-500, #6b7280 );
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.svic__ticker-search-empty {
	padding: 10px;
	font-size: 0.8125rem;
	color: var( --svic-gray-500, #6b7280 );
	text-align: center;
}

/* Group header shown in the browsable ticker list -- splits
   the 542-entry merged list into ETFs and Stocks. */
.svic__ticker-search-group-header {
	padding: 6px 10px 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --svic-gray-400, #9ca3af );
}
.svic__ticker-search-group-header:not(:first-child) {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var( --svic-gray-100, #f3f4f6 );
}
.svic__comparison-grid > div {
	position: relative;
}
.svic__winner-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: 999px;
}
.svic__winner-badge.svic--positive {
	background: var( --svic-green-100 );
	color: var( --svic-green-700 );
}
.svic__winner-badge.svic--neutral {
	background: var( --svic-blue-100 );
	color: var( --svic-blue-700 );
}

.svic__comparison-margin {
	display: block;
	margin-top: 4px;
	font-size: 0.75rem;
	font-weight: 600;
}
.svic__comparison-margin[hidden] {
	display: none;
}
.svic__comparison-margin.svic--positive {
	color: var( --svic-green-700 );
}
.svic__comparison-margin.svic--neutral {
	color: var( --svic-blue-700 );
}
/* Section-level FAQ toggle -- collapses the whole FAQ list (not just
   individual answers) so the section takes up minimal space by default. */
.svic__faq-section-toggle.svic__faq-section-toggle {
	width: 100% !important;
	text-align: left !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	font: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	padding: 0 32px 0 0 !important;
	position: relative;
	cursor: pointer;
}
.svic__faq-section-toggle::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY( -50% );
	font-size: 1.5rem;
	color: var( --svic-blue-600 );
}
.svic__faq-section-toggle[aria-expanded="true"]::after {
	content: "\2212";
}
.svic__faq-section-toggle:focus-visible {
	outline: 2px solid var( --svic-blue-600 );
	outline-offset: 2px;
}
.svic__gap-callout {
	border-radius: var( --svic-radius-md );
	padding: 14px 20px;
	text-align: center;
	margin-bottom: 16px;
	border: 1px solid transparent;
}
.svic__gap-callout.svic--positive {
	background: var( --svic-green-100 );
	border-color: var( --svic-green-700 );
}
.svic__gap-callout.svic--neutral {
	background: var( --svic-blue-100 );
	border-color: var( --svic-blue-700 );
}
.svic__gap-label {
	margin: 0 0 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
}
.svic__gap-callout.svic--positive .svic__gap-label,
.svic__gap-callout.svic--positive .svic__gap-amount,
.svic__gap-callout.svic--positive .svic__gap-detail {
	color: var( --svic-green-700 );
}
.svic__gap-callout.svic--neutral .svic__gap-label,
.svic__gap-callout.svic--neutral .svic__gap-amount,
.svic__gap-callout.svic--neutral .svic__gap-detail {
	color: var( --svic-blue-700 );
}
.svic__gap-amount {
	margin: 0 0 2px;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
}
.svic__gap-detail {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.3;
}


.svic__quicklook-btn--disabled,
.svic__quicklook-btn:disabled {
	background: var( --svic-gray-200 ) !important;
	color: var( --svic-gray-500 ) !important;
	cursor: not-allowed;
	border-color: var( --svic-gray-200 );
}
.svic__quicklook-btn--disabled:hover,
.svic__quicklook-btn:disabled:hover {
	background: var( --svic-gray-200 ) !important;
	border-color: var( --svic-gray-200 );
}


.svic__mixed-close-time-note {
	margin-top: 16px;
	font-size: 0.8rem;
	color: var( --svic-gray-500 );
	line-height: 1.5;
}


/* Compare's headline area shows two full result blocks stacked
(one per ticker). When an investment summary table is immediately
followed by the next block's headline sentence, add the same
divider treatment already used above the table, so the boundary
between the two investments reads clearly instead of running
together. Does not affect the other pages, where the summary table
is always the last element in the box. */
.svic__investment-summary + p {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var( --svic-blue-100, #e8f0fe );
}