/**
 * Keyword rank checker — module styles.
 * Shared components (inputs, buttons, mode toggle, table, notices, CTA
 * banner, attribution) come from the shared stylesheet; the summary strip,
 * position pills and detail rows live here. All selectors are svt-kr-
 * prefixed so the module never interferes with other tools.
 */

.svt-wrap[data-tool="keyword-rank-checker"] {
	max-width: 1040px;
}

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

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

/* The shared .svt-form is a flex row — block layout keeps rows full-width. */
.svt-kr-form {
	display: block;
}

.svt-wrap[data-tool="keyword-rank-checker"] .svt-input {
	width: 100%;
}

.svt-kr-scope {
	display: inline-flex;
	gap: 6px;
	margin-bottom: 16px;
}

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

.svt-kr-grid .svt-field {
	margin: 0;
	min-width: 0;
}

.svt-kr-sub {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	font-size: 13px;
	color: var(--svt-muted);
	cursor: pointer;
}

.svt-kr-sub input {
	accent-color: var(--svt-primary);
}

.svt-kr-device {
	margin-top: 8px;
	/* Inside the flex-column .svt-field the toggle would stretch full
	   width — hug the two buttons and sit at the right edge of the column. */
	align-self: flex-end;
	width: fit-content;
}

.svt-field--full {
	margin-top: 12px;
}

.svt-kr-keywords {
	resize: vertical;
	min-height: 120px;
	font-family: inherit;
}

.svt-kr-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 7px;
	font-size: 12.5px;
	color: var(--svt-muted);
}

.svt-kr-counter.is-over {
	color: #b45309;
	font-weight: 700;
}

.svt-kr-flags {
	color: #b45309;
	font-weight: 600;
}

.svt-kr-submitrow {
	margin-top: 14px;
}

/* ---------- Summary strip ---------- */

.svt-kr-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.svt-kr-stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 2px solid var(--svt-border);
	border-radius: 999px;
	background: var(--svt-tile);
	padding: 7px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--svt-muted);
}

.svt-kr-statnum {
	font-size: 17px;
	font-weight: 800;
	color: var(--svt-text);
	font-variant-numeric: tabular-nums;
}

.svt-kr-stat.is-top10 .svt-kr-statnum {
	color: #16a34a;
}

.svt-kr-stat.is-nf .svt-kr-statnum {
	color: #dc2626;
}

.svt-kr-summary .svt-kr-export {
	margin-left: auto;
}

/* ---------- Table ---------- */

.svt-kr-tbl {
	min-width: 760px;
}

.svt-kr-cell-kw {
	font-weight: 600;
	color: var(--svt-text);
}

.svt-kr-expand {
	appearance: none;
	border: 0;
	background: none;
	padding: 2px;
	margin-right: 4px;
	cursor: pointer;
	color: var(--svt-slate);
	vertical-align: -2px;
	transition: transform 0.15s ease;
	display: inline-block;
}

.svt-kr-expand.is-open {
	transform: rotate(180deg);
}

.svt-kr-expand:focus {
	outline: none;
}

.svt-kr-expand:focus-visible {
	outline: 2px solid var(--svt-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Position pills: text carries meaning, colour reinforces. */
.svt-kr-pill {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.svt-kr-pill.is-top {
	background: rgba(22, 163, 74, 0.16);
	color: #14532d;
}

.svt-kr-pill.is-good {
	background: rgba(34, 197, 94, 0.10);
	color: #166534;
}

.svt-kr-pill.is-mid {
	background: rgba(245, 158, 11, 0.16);
	color: #92400e;
}

.svt-kr-pill.is-low {
	background: rgba(239, 68, 68, 0.13);
	color: #991b1b;
}

.svt-kr-pill.is-nf {
	background: rgba(80, 92, 124, 0.12);
	color: var(--svt-slate);
}

.svt-kr-pill.is-error {
	background: rgba(80, 92, 124, 0.08);
	color: var(--svt-muted);
}

.svt-kr-cell-url {
	max-width: 260px;
}

.svt-kr-url {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--svt-primary);
	text-decoration: none;
	font-weight: 600;
}

.svt-kr-url:hover,
.svt-kr-url:focus-visible {
	text-decoration: underline;
}

.svt-kr-cell-comp {
	color: var(--svt-muted);
}

/* ---------- Detail rows ---------- */

.svt-kr-detail td {
	background: var(--svt-tile);
}

.svt-kr-detailbody {
	font-size: 13px;
	color: var(--svt-muted);
	line-height: 1.6;
}

.svt-kr-complist {
	margin: 6px 0 0;
	padding-left: 4px;
	list-style: none;
}

.svt-kr-complist a {
	color: var(--svt-primary);
	text-decoration: none;
	font-weight: 600;
}

.svt-kr-complist a:hover {
	text-decoration: underline;
}

.svt-kr-comppos {
	display: inline-block;
	min-width: 34px;
	font-weight: 700;
	color: var(--svt-text);
	font-variant-numeric: tabular-nums;
}

.svt-kr-more {
	margin: 8px 0 0;
	font-weight: 600;
}

/* Exact URL mode: cannibalization marker under the position pill. */
.svt-kr-otherpage {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--svt-muted, #6b7280);
	white-space: nowrap;
}

.svt-kr-otherdetail {
	margin: 0 0 8px;
}

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

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

	.svt-kr-summary .svt-kr-export {
		margin-left: 0;
		width: 100%;
		justify-content: center;
	}

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