/**
 * AI visibility checker — module styles.
 * Shared components (inputs, buttons, table, notices, CTA banner,
 * attribution, spinner) come from the shared stylesheet; the hero dial,
 * progress panel, bars, examples and waitlist live here. All selectors
 * are svt-aiv- prefixed so the module never interferes with other tools.
 */

.svt-wrap[data-tool="ai-visibility"] {
	max-width: 980px;
}

.svt-required {
	color: var(--svt-primary);
}

/* ---------- Form ---------- */

/* The shared .svt-form is a flex row, which makes these grid blocks shrink
   to their content — block layout lets every row span the full width. */
.svt-aiv-form {
	display: block;
}

/* Every input fills its grid cell so the columns line up evenly. */
.svt-wrap[data-tool="ai-visibility"] .svt-input {
	width: 100%;
}

.svt-aiv-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px 14px;
	align-items: end;
}

.svt-aiv-grid .svt-field {
	margin: 0 0 4px;
	min-width: 0;
}

.svt-aiv-grid .svt-field label {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.svt-aiv-compblock {
	margin-top: 10px;
}

/* Breathing room between the competitor hint and the name/email row. */
.svt-aiv-compblock + .svt-aiv-grid {
	margin-top: 12px;
}

.svt-aiv-optional {
	font-weight: 500;
	font-size: 12px;
	color: var(--svt-muted);
	margin-left: 6px;
}

.svt-aiv-comps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.svt-aiv-comphint {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--svt-muted);
}

.svt-aiv-submitrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.svt-aiv-scannote {
	font-size: 12.5px;
	color: var(--svt-muted);
}

/* ---------- Progress panel ---------- */

.svt-aiv-progress {
	border: 2px solid var(--svt-border);
	border-radius: var(--svt-radius-sm);
	background: var(--svt-tile);
	padding: 22px 24px;
	text-align: center;
}

.svt-aiv-progresshead {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 15px;
	color: var(--svt-text);
}

.svt-aiv-progressbar {
	margin: 16px auto 10px;
	max-width: 420px;
	height: 10px;
	border-radius: 999px;
	background: #e8eaf1;
	overflow: hidden;
}

.svt-aiv-progressbar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--svt-primary);
	transition: width 0.6s ease;
}

.svt-aiv-stage {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--svt-slate);
	min-height: 20px;
}

.svt-aiv-note {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--svt-muted);
}

/* ---------- Hero ---------- */

.svt-aiv-hero {
	border: 2px solid var(--svt-border);
	border-radius: var(--svt-radius-sm);
	background: var(--svt-tile);
	padding: 26px 24px 22px;
	text-align: center;
}

.svt-aiv-dial {
	position: relative;
	max-width: 250px;
	margin: 0 auto;
}

.svt-aiv-dial svg {
	display: block;
	width: 100%;
	height: auto;
}

.svt-aiv-track {
	fill: none;
	stroke: #e8eaf1;
	stroke-width: 18;
	stroke-linecap: round;
}

.svt-aiv-dialvalue {
	position: absolute;
	left: 0;
	right: 0;
	top: 44%;
	transform: translateY(-50%);
	font-size: 40px;
	font-weight: 800;
	color: var(--svt-text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.svt-aiv-dialvalue span {
	font-size: 16px;
	font-weight: 700;
	color: var(--svt-muted);
}

.svt-aiv-diallabel {
	position: absolute;
	left: 0;
	right: 0;
	top: 64%;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--svt-muted);
}

.svt-aiv-heroline {
	margin: 14px auto 0;
	max-width: 560px;
	font-size: 18px;
	font-weight: 700;
	color: var(--svt-text);
	line-height: 1.45;
}

.svt-aiv-emptytitle {
	margin-top: 14px;
	font-size: 22px;
	font-weight: 800;
	color: var(--svt-text);
}

.svt-aiv-emptybody {
	margin: 10px auto 0;
	max-width: 560px;
	font-size: 14.5px;
	color: var(--svt-muted);
	line-height: 1.6;
}

/* ---------- Boxes, bars, factors ---------- */

.svt-aiv-box {
	margin-top: 12px;
	border: 2px solid var(--svt-border);
	border-radius: var(--svt-radius-sm);
	background: var(--svt-bg);
	padding: 16px 18px;
}

.svt-aiv-subtitle {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--svt-text);
}

.svt-aiv-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
	font-size: 13.5px;
}

.svt-aiv-barname {
	flex: 0 0 180px;
	font-weight: 600;
	color: var(--svt-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.svt-aiv-barname em {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: var(--svt-primary);
	background: var(--svt-primary-soft);
	border-radius: 999px;
	padding: 1px 8px;
	margin-left: 4px;
}

.svt-aiv-bartrack {
	flex: 1 1 auto;
	height: 12px;
	border-radius: 999px;
	background: #eef0f5;
	overflow: hidden;
}

.svt-aiv-barfill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--svt-primary);
	transition: width 0.5s ease;
}

.svt-aiv-bar.is-you .svt-aiv-barfill {
	background: #22c55e;
}

.svt-aiv-barval {
	flex: 0 0 46px;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.svt-aiv-factors {
	min-width: 420px;
}

.svt-aiv-th {
	display: inline-block;
	padding: 12px 14px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--svt-slate);
}

.svt-aiv-na {
	color: var(--svt-muted);
	font-size: 12.5px;
}

/* ---------- Examples ---------- */

.svt-aiv-example {
	border: 2px solid var(--svt-border);
	border-radius: 10px;
	background: var(--svt-tile);
	margin-bottom: 8px;
}

.svt-aiv-example summary {
	cursor: pointer;
	padding: 11px 14px;
	font-size: 13.5px;
	color: var(--svt-text);
}

.svt-aiv-example summary:focus {
	outline: none;
}

.svt-aiv-example summary:focus-visible {
	outline: 2px solid var(--svt-primary);
	outline-offset: 2px;
	border-radius: 6px;
}

.svt-aiv-snippet {
	padding: 0 14px 12px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--svt-muted);
}

.svt-aiv-snippet mark {
	background: rgba(34, 197, 94, 0.22);
	color: var(--svt-text);
	font-weight: 700;
	border-radius: 3px;
	padding: 0 2px;
}

.svt-aiv-absent {
	margin: 8px 0 0;
	font-size: 12.5px;
	font-weight: 700;
	color: #b45309;
}

/* ---------- Per-engine mini dials ---------- */

.svt-aiv-minis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
}

.svt-aiv-mini {
	text-align: center;
	padding: 10px 6px 6px;
	border: 2px solid var(--svt-border);
	border-radius: 10px;
	background: var(--svt-tile);
}

.svt-aiv-minidial {
	position: relative;
	max-width: 116px;
	margin: 0 auto;
}

.svt-aiv-minidial svg {
	display: block;
	width: 100%;
	height: auto;
}

.svt-aiv-minivalue {
	position: absolute;
	left: 0;
	right: 0;
	/* Vertically centred on the arc's midpoint (cy 92 of viewBox height 168). */
	top: 55%;
	transform: translateY(-50%);
	font-size: 19px;
	font-weight: 800;
	color: var(--svt-text);
	font-variant-numeric: tabular-nums;
}

.svt-aiv-mini.is-muted .svt-aiv-minivalue {
	color: var(--svt-muted);
}

.svt-aiv-minilabel {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
	color: var(--svt-muted);
}

/* ---------- PDF action ---------- */

.svt-aiv-actions {
	margin-top: 12px;
	text-align: center;
}

.svt-aiv-actions .svt-button {
	text-decoration: none;
	display: inline-block;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
	.svt-aiv-grid,
	.svt-aiv-comps {
		grid-template-columns: 1fr;
	}

	.svt-aiv-submitrow .svt-button {
		width: 100%;
	}

	.svt-aiv-barname {
		flex-basis: 110px;
		font-size: 12.5px;
	}

	.svt-aiv-minis {
		grid-template-columns: repeat(2, 1fr);
	}

	.svt-aiv-actions .svt-button {
		width: 100%;
	}
}