/* Shared tool UI: input card -> progress -> result card. Loaded only on pages with a tool block. */
.geo-tool {
	container: geo-tool / inline-size;
	display: grid;
	gap: var(--geo-3);
	margin-block: var(--geo-4);
	font-family: var(--geo-font);
	color: var(--geo-text);
}

.geo-tool__card {
	background: var(--geo-surface);
	border: 1px solid var(--geo-border);
	border-radius: var(--geo-radius);
	padding: var(--geo-3);
	box-shadow: var(--geo-shadow);
}

.geo-tool__grid { display: grid; gap: var(--geo-3); }

@container geo-tool (min-width: 52rem) {
	.geo-tool__grid--split { grid-template-columns: 1fr 1fr; align-items: start; }
	.geo-tool__card { padding: var(--geo-4); }
}

.geo-field { display: grid; gap: 0.375rem; margin-bottom: var(--geo-2); }
.geo-field > label, .geo-legend { font-weight: 600; font-size: var(--geo-step--1); }
.geo-hint { color: var(--geo-muted); font-size: 0.875rem; margin: 0; }

.geo-input,
.geo-tool select,
.geo-tool textarea {
	width: 100%;
	min-height: var(--geo-touch);
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--geo-border);
	border-radius: var(--geo-radius-sm);
	background: var(--geo-bg);
	color: var(--geo-text);
	font: inherit;
	transition: border-color var(--geo-fast), box-shadow var(--geo-fast);
}

.geo-tool textarea { min-height: 6rem; resize: vertical; }

.geo-input:focus,
.geo-tool select:focus,
.geo-tool textarea:focus {
	outline: none;
	border-color: var(--geo-accent);
	box-shadow: 0 0 0 3px var(--geo-accent-soft);
}

.geo-btn {
	min-height: var(--geo-touch);
	min-width: var(--geo-touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--geo-radius-sm);
	background: var(--geo-accent);
	color: var(--geo-on-accent);
	font: inherit;
	font-weight: 650;
	cursor: pointer;
	text-decoration: none;
	transition: transform var(--geo-fast) var(--geo-ease), background var(--geo-fast);
}

.geo-btn:hover { background: var(--geo-accent-strong); color: var(--geo-on-accent); }
/* Beat theme/site link colors so button text keeps its contrast. */
.geo-tool a.geo-btn, .geo-tool a.geo-btn:hover { color: var(--geo-on-accent); }
.geo-result:focus { outline: none; }
.geo-btn:active { transform: scale(0.98); }
.geo-btn--ghost, .geo-tool .geo-btn--ghost { background: transparent; color: var(--geo-text); border-color: var(--geo-border); }
.geo-btn--ghost:hover { background: var(--geo-accent-soft); color: var(--geo-text); }
.geo-btn:focus-visible, .geo-tool :focus-visible { outline: none; box-shadow: var(--geo-ring); }
.geo-row { display: flex; flex-wrap: wrap; gap: var(--geo-1); align-items: center; }

/* Repeating field groups (FAQ items, steps) */
.geo-repeat { display: grid; gap: var(--geo-2); }
.geo-repeat__item { border: 1px dashed var(--geo-border); border-radius: var(--geo-radius-sm); padding: var(--geo-2); }

/* Progress state */
.geo-progress { display: flex; align-items: center; gap: var(--geo-2); color: var(--geo-muted); }
.geo-progress__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--geo-border); overflow: hidden; }
.geo-progress__bar::after { content: ""; display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--geo-accent); animation: geo-slide 1.1s var(--geo-ease) infinite; }

@keyframes geo-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

@media (prefers-reduced-motion: reduce) {
	.geo-progress__bar::after { animation: none; width: 100%; opacity: 0.5; }
}

/* Result card */
.geo-result { display: grid; gap: var(--geo-3); animation: geo-in var(--geo-slow) var(--geo-ease); }

@keyframes geo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.geo-result__head { display: grid; gap: var(--geo-3); align-items: center; }

@container geo-tool (min-width: 36rem) {
	.geo-result__head { grid-template-columns: auto 1fr; }
}

.geo-score { width: 7.5rem; height: 7.5rem; }
.geo-score circle { fill: none; stroke-width: 10; }
.geo-score .geo-score__track { stroke: var(--geo-border); }
.geo-score .geo-score__value { stroke: var(--geo-accent); stroke-linecap: round; transition: stroke-dashoffset var(--geo-slow) var(--geo-ease); transform: rotate(-90deg); transform-origin: 50% 50%; }
.geo-score text { fill: var(--geo-text); font: 700 1.75rem var(--geo-font); }
.geo-score[data-tone="good"] .geo-score__value { stroke: var(--geo-good); }
.geo-score[data-tone="warn"] .geo-score__value { stroke: var(--geo-warn); }
.geo-score[data-tone="bad"] .geo-score__value { stroke: var(--geo-bad); }

.geo-result__title { margin: 0; font-size: var(--geo-step-1); }
.geo-result__text { margin: 0.25rem 0 0; color: var(--geo-muted); }

.geo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.geo-checks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; font-size: var(--geo-step--1); }
.geo-checks li::before { font-weight: 700; }
.geo-checks .is-pass::before { content: "✓"; color: var(--geo-good); }
.geo-checks .is-warn::before { content: "!"; color: var(--geo-warn); }
.geo-checks .is-fail::before { content: "✕"; color: var(--geo-bad); }

.geo-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--geo-2); padding: var(--geo-2) var(--geo-3); border-radius: var(--geo-radius-sm); background: var(--geo-accent-soft); }
.geo-next p { margin: 0; font-weight: 600; }

.geo-code {
	margin: 0;
	padding: var(--geo-2);
	max-height: 28rem;
	overflow: auto;
	border-radius: var(--geo-radius-sm);
	background: #0b0e14;
	color: #e6e9f0;
	font: 0.8125rem/1.6 var(--geo-mono);
	white-space: pre;
	tab-size: 2;
}

.geo-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--geo-2); }
.geo-tabs [aria-selected="true"] { background: var(--geo-accent); color: var(--geo-on-accent); border-color: var(--geo-accent); }

/* SERP preview */
.geo-serp { font-family: Arial, sans-serif; padding: var(--geo-2); border-radius: var(--geo-radius-sm); background: #fff; color: #202124; max-width: 600px; }
.geo-serp__site { display: flex; gap: 0.5rem; align-items: center; font-size: 14px; color: #202124; }
.geo-serp__fav { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; display: grid; place-items: center; font-size: 12px; }
.geo-serp__url { font-size: 12px; color: #4d5156; }
.geo-serp__title { display: block; margin: 0.25rem 0; font-size: 20px; line-height: 1.3; color: #1a0dab; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.geo-serp__desc { font-size: 14px; line-height: 1.58; color: #4d5156; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.geo-serp--mobile { max-width: 390px; }

.geo-meter { display: grid; gap: 0.25rem; font-size: 0.875rem; }
.geo-meter__track { height: 8px; border-radius: 999px; background: var(--geo-border); overflow: hidden; }
.geo-meter__fill { height: 100%; width: 0; background: var(--geo-good); transition: width var(--geo-fast) linear; }
.geo-meter[data-tone="warn"] .geo-meter__fill { background: var(--geo-warn); }
.geo-meter[data-tone="bad"] .geo-meter__fill { background: var(--geo-bad); }

.geo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.geo-tool [hidden] { display: none !important; }