/* ==========================================================================
   Tool pages and the shared tool UI kit (loaded on tool pages only)
   ========================================================================== */

/* Page structure */
.wpdv-toolpage__head {
	padding-block: var(--wpdv-space-4) var(--wpdv-space-5);
	max-width: 860px;
}

.wpdv-toolpage__title {
	margin: var(--wpdv-space-3) 0 var(--wpdv-space-3);
	font-size: var(--wpdv-text-5xl);
}

.wpdv-toolpage__intro {
	margin: 0;
	font-size: var(--wpdv-text-lg);
	color: var(--wpdv-color-muted);
	max-width: 68ch;
}

.wpdv-toolpage__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpdv-space-2) var(--wpdv-space-5);
	margin-top: var(--wpdv-space-4);
	font-size: var(--wpdv-text-sm);
	color: var(--wpdv-color-muted);
}

.wpdv-toolpage__meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wpdv-toolpage__grid {
	display: grid;
	gap: var(--wpdv-space-7);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
	.wpdv-toolpage__grid {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

.wpdv-toolpage__content {
	max-width: var(--wpdv-container-prose);
}

.wpdv-toolpage__aside {
	display: none;
}

@media (min-width: 1280px) {
	.wpdv-toolpage__aside {
		display: block;
	}

	.wpdv-toolpage__aside > .wpdv-sticky {
		position: sticky;
		top: calc(var(--wpdv-header-h) + var(--wpdv-space-5));
		display: flex;
		flex-direction: column;
		gap: var(--wpdv-space-5);
	}
}

.wpdv-aside-box {
	padding: var(--wpdv-space-4);
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-md);
	background: var(--wpdv-color-surface);
}

.wpdv-aside-box__title {
	margin: 0 0 var(--wpdv-space-2);
	font-size: var(--wpdv-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wpdv-color-muted);
}

/* ---------- Tool panel ---------- */
.wpdv-tool {
	position: relative;
	padding: clamp(16px, 3vw, 28px);
	border: 1px solid var(--wpdv-color-border-strong);
	border-radius: var(--wpdv-radius-lg);
	background: var(--wpdv-color-surface);
}

.wpdv-tool__form {
	margin: 0;
}

.wpdv-tool__title {
	margin: 0 0 var(--wpdv-space-4);
	font-size: var(--wpdv-text-lg);
}

.wpdv-tool__row {
	display: grid;
	gap: var(--wpdv-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.wpdv-tool__row--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.wpdv-tool__cols {
	display: grid;
	gap: var(--wpdv-space-5);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.wpdv-tool__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wpdv-tool__cols--preview {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	}
}

.wpdv-tool__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpdv-space-2);
	margin-block: var(--wpdv-space-4);
}

.wpdv-tool__actions:last-child {
	margin-bottom: 0;
}

.wpdv-tool__actions .wpdv-btn .wpdv-icon {
	width: 18px;
	height: 18px;
}

.wpdv-tool textarea {
	min-height: 180px;
}

.wpdv-tool textarea.is-tall {
	min-height: 280px;
}

.wpdv-tool textarea.is-short {
	min-height: 96px;
}

.wpdv-tool__output {
	width: 100%;
	min-height: 160px;
	margin: 0;
	padding: var(--wpdv-space-3) var(--wpdv-space-4);
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-sm);
	background: var(--wpdv-color-sunken);
	color: var(--wpdv-color-text);
	font-family: var(--wpdv-font-mono);
	font-size: var(--wpdv-text-sm);
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
	overflow: auto;
	max-height: 520px;
}

textarea.wpdv-tool__output {
	resize: vertical;
}

.wpdv-tool__output:empty::before {
	content: attr(data-empty);
	color: var(--wpdv-color-muted);
}

.wpdv-tool__status {
	min-height: 1.5em;
	margin-top: var(--wpdv-space-3);
	font-size: var(--wpdv-text-sm);
	font-weight: 600;
	color: var(--wpdv-color-muted);
}

.wpdv-tool__status.is-success {
	color: var(--wpdv-color-success);
}

.wpdv-tool__status.is-error {
	color: var(--wpdv-color-danger);
}

.wpdv-tool__status.is-warning {
	color: var(--wpdv-color-warning);
}

.wpdv-tool__note {
	margin: var(--wpdv-space-3) 0 0;
	font-size: var(--wpdv-text-xs);
	color: var(--wpdv-color-muted);
}

.wpdv-tool__divider {
	height: 1px;
	background: var(--wpdv-color-border);
	margin-block: var(--wpdv-space-5);
	border: 0;
}

.wpdv-tool__label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wpdv-space-3);
}

.wpdv-tool__label-row label {
	margin-bottom: var(--wpdv-space-1);
}

.wpdv-tool__count {
	font-size: var(--wpdv-text-xs);
	color: var(--wpdv-color-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Stats */
.wpdv-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
	gap: var(--wpdv-space-3);
	margin: var(--wpdv-space-4) 0;
	padding: 0;
	list-style: none;
}

.wpdv-stat {
	padding: var(--wpdv-space-3) var(--wpdv-space-4);
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-sm);
	background: var(--wpdv-color-sunken);
	min-width: 0;
}

.wpdv-stat__label {
	display: block;
	font-size: var(--wpdv-text-xs);
	color: var(--wpdv-color-muted);
	font-weight: 600;
}

.wpdv-stat__value {
	display: block;
	font-size: var(--wpdv-text-2xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.wpdv-stat--primary {
	border-color: var(--wpdv-color-primary);
	background: var(--wpdv-color-primary-soft);
}

/* Length meter */
.wpdv-meter {
	position: relative;
	height: 8px;
	margin-top: var(--wpdv-space-2);
	border-radius: var(--wpdv-radius-pill);
	background: var(--wpdv-color-elevated);
	overflow: hidden;
}

.wpdv-meter__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: var(--wpdv-color-muted);
	transition: width var(--wpdv-duration-fast) var(--wpdv-ease);
}

.wpdv-meter.is-good .wpdv-meter__bar {
	background: var(--wpdv-color-success);
}

.wpdv-meter.is-warn .wpdv-meter__bar {
	background: var(--wpdv-color-warning);
}

.wpdv-meter.is-bad .wpdv-meter__bar {
	background: var(--wpdv-color-danger);
}

.wpdv-checks {
	list-style: none;
	margin: var(--wpdv-space-3) 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
	font-size: var(--wpdv-text-sm);
}

.wpdv-checks li {
	display: flex;
	gap: var(--wpdv-space-2);
	align-items: flex-start;
}

.wpdv-checks li::before {
	content: "•";
	font-weight: 700;
	width: 1em;
	flex: none;
	color: var(--wpdv-color-muted);
}

.wpdv-checks .is-good::before {
	content: "✓";
	color: var(--wpdv-color-success);
}

.wpdv-checks .is-warn::before {
	content: "!";
	color: var(--wpdv-color-warning);
}

.wpdv-checks .is-bad::before {
	content: "✕";
	color: var(--wpdv-color-danger);
}

/* Segmented control (radio group) */
.wpdv-segmented {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-sm);
	background: var(--wpdv-color-sunken);
	margin: 0 0 var(--wpdv-space-4);
	min-width: 0;
}

.wpdv-segmented legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.wpdv-segmented label {
	position: relative;
	margin: 0;
	font-weight: 600;
	font-size: var(--wpdv-text-sm);
}

.wpdv-segmented input {
	position: absolute;
	opacity: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.wpdv-segmented span {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	border-radius: var(--wpdv-radius-xs);
	color: var(--wpdv-color-muted);
}

.wpdv-segmented input:checked + span {
	background: var(--wpdv-color-elevated);
	color: var(--wpdv-color-text);
	box-shadow: inset 0 0 0 1px var(--wpdv-color-border-strong);
}

.wpdv-segmented input:focus-visible + span {
	box-shadow: var(--wpdv-focus);
}

/* Preview stage for CSS tools */
.wpdv-preview {
	display: grid;
	place-items: center;
	min-height: 260px;
	padding: var(--wpdv-space-6);
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-md);
	background-color: var(--wpdv-color-sunken);
	background-image: linear-gradient(45deg, var(--wpdv-color-elevated) 25%, transparent 25%), linear-gradient(-45deg, var(--wpdv-color-elevated) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--wpdv-color-elevated) 75%), linear-gradient(-45deg, transparent 75%, var(--wpdv-color-elevated) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
	overflow: hidden;
}

.wpdv-preview--plain {
	background-image: none;
}

.wpdv-preview__box {
	width: min(220px, 70%);
	aspect-ratio: 4 / 3;
	background: #ffffff;
	border-radius: 12px;
}

/* Range rows */
.wpdv-range {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 84px;
	gap: var(--wpdv-space-3);
	align-items: center;
}

.wpdv-range input[type="number"] {
	min-height: 36px;
	padding: 6px 8px;
}

/* Dropzone */
.wpdv-dropzone {
	position: relative;
	display: grid;
	place-items: center;
	gap: var(--wpdv-space-2);
	min-height: 180px;
	padding: var(--wpdv-space-6);
	border: 2px dashed var(--wpdv-color-border-strong);
	border-radius: var(--wpdv-radius-md);
	background: var(--wpdv-color-sunken);
	text-align: center;
	color: var(--wpdv-color-muted);
	transition: border-color var(--wpdv-duration-fast) var(--wpdv-ease), background-color var(--wpdv-duration-fast) var(--wpdv-ease);
}

.wpdv-dropzone.is-over {
	border-color: var(--wpdv-color-primary);
	background: var(--wpdv-color-primary-soft);
}

.wpdv-dropzone input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

.wpdv-dropzone input[type="file"]:focus-visible + .wpdv-dropzone__label {
	box-shadow: var(--wpdv-focus);
	border-radius: var(--wpdv-radius-sm);
}

.wpdv-dropzone__label {
	font-weight: 650;
	color: var(--wpdv-color-text);
}

.wpdv-dropzone .wpdv-icon {
	color: var(--wpdv-color-primary);
}

/* File results list (image tools) */
.wpdv-files {
	list-style: none;
	margin: var(--wpdv-space-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wpdv-space-3);
}

.wpdv-file {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wpdv-space-3);
	padding: var(--wpdv-space-3);
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-sm);
	background: var(--wpdv-color-sunken);
}

.wpdv-file img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--wpdv-radius-xs);
	background: var(--wpdv-color-elevated);
}

.wpdv-file__name {
	font-weight: 600;
	font-size: var(--wpdv-text-sm);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpdv-file__meta {
	font-size: var(--wpdv-text-xs);
	color: var(--wpdv-color-muted);
}

.wpdv-file__meta .is-smaller {
	color: var(--wpdv-color-success);
	font-weight: 700;
}

.wpdv-file__meta .is-larger {
	color: var(--wpdv-color-warning);
	font-weight: 700;
}

@media (max-width: 480px) {
	.wpdv-file {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.wpdv-file img {
		width: 48px;
		height: 48px;
	}

	.wpdv-file .wpdv-btn {
		grid-column: 1 / -1;
	}
}

/* Colour swatches */
.wpdv-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
	gap: var(--wpdv-space-3);
	margin: var(--wpdv-space-4) 0 0;
	padding: 0;
	list-style: none;
}

.wpdv-swatch {
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-sm);
	overflow: hidden;
	background: var(--wpdv-color-sunken);
}

.wpdv-swatch__color {
	display: block;
	width: 100%;
	height: 72px;
	border: 0;
	cursor: pointer;
}

.wpdv-swatch__label {
	display: block;
	padding: 6px 10px;
	font-family: var(--wpdv-font-mono);
	font-size: var(--wpdv-text-xs);
}

.wpdv-swatch__label small {
	display: block;
	color: var(--wpdv-color-muted);
	font-family: var(--wpdv-font-sans);
}

/* Data table */
.wpdv-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-sm);
	margin-top: var(--wpdv-space-4);
}

.wpdv-table-wrap table {
	margin: 0;
}

.wpdv-table-wrap td,
.wpdv-table-wrap th {
	white-space: nowrap;
}

.wpdv-table-wrap td.is-wrap {
	white-space: normal;
}

/* SERP / social previews: original neutral styling, approximations only */
.wpdv-serp {
	padding: var(--wpdv-space-4) var(--wpdv-space-5);
	border-radius: var(--wpdv-radius-md);
	background: #ffffff;
	color: #202124;
	font-family: Arial, Helvetica, sans-serif;
	max-width: 652px;
	box-shadow: inset 0 0 0 1px #dadce0;
}

.wpdv-serp.is-mobile {
	max-width: 400px;
}

.wpdv-serp__site {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.wpdv-serp__favicon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #f1f3f4;
	border: 1px solid #dadce0;
	flex: none;
}

.wpdv-serp__name {
	display: block;
	font-size: 14px;
	line-height: 20px;
	color: #202124;
}

.wpdv-serp__url {
	display: block;
	font-size: 12px;
	line-height: 18px;
	color: #4d5156;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 520px;
}

.wpdv-serp__title {
	display: block;
	margin: 4px 0 3px;
	font-size: 20px;
	line-height: 26px;
	color: #1a0dab;
	font-weight: 400;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wpdv-serp.is-mobile .wpdv-serp__title {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wpdv-serp__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 22px;
	color: #4d5156;
}

.wpdv-serp.is-mobile .wpdv-serp__desc {
	-webkit-line-clamp: 3;
}

.wpdv-social {
	max-width: 520px;
	border: 1px solid var(--wpdv-color-border-strong);
	border-radius: var(--wpdv-radius-md);
	overflow: hidden;
	background: var(--wpdv-color-sunken);
}

.wpdv-social__image {
	aspect-ratio: 1.91 / 1;
	background: var(--wpdv-color-elevated);
	display: grid;
	place-items: center;
	color: var(--wpdv-color-muted);
	font-size: var(--wpdv-text-sm);
	overflow: hidden;
}

.wpdv-social__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpdv-social__body {
	padding: var(--wpdv-space-3) var(--wpdv-space-4);
}

.wpdv-social__domain {
	font-size: var(--wpdv-text-xs);
	text-transform: uppercase;
	color: var(--wpdv-color-muted);
}

.wpdv-social__title {
	font-weight: 700;
	margin: 2px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wpdv-social__desc {
	font-size: var(--wpdv-text-sm);
	color: var(--wpdv-color-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Heading outline */
.wpdv-outline {
	list-style: none;
	margin: var(--wpdv-space-4) 0 0;
	padding: 0;
	font-size: var(--wpdv-text-sm);
	font-family: var(--wpdv-font-mono);
}

.wpdv-outline li {
	padding: 4px 0;
	border-bottom: 1px solid var(--wpdv-color-border);
}

.wpdv-outline .lvl {
	display: inline-block;
	min-width: 2.4em;
	margin-right: 8px;
	padding: 0 6px;
	border-radius: var(--wpdv-radius-xs);
	background: var(--wpdv-color-elevated);
	color: var(--wpdv-color-primary);
	font-weight: 700;
	text-align: center;
}

.wpdv-outline .is-issue .lvl {
	color: var(--wpdv-color-warning);
}

/* Regex highlight */
.wpdv-highlight mark {
	background: var(--wpdv-color-primary-soft);
	color: var(--wpdv-color-text);
	border-bottom: 2px solid var(--wpdv-color-primary);
	border-radius: 2px;
}

/* Inline repeater (FAQ schema, redirects) */
.wpdv-repeat {
	display: grid;
	gap: var(--wpdv-space-3);
}

.wpdv-repeat__row {
	display: grid;
	gap: var(--wpdv-space-2);
	padding: var(--wpdv-space-3);
	border: 1px solid var(--wpdv-color-border);
	border-radius: var(--wpdv-radius-sm);
	background: var(--wpdv-color-sunken);
}

.wpdv-repeat__row .wpdv-btn {
	justify-self: start;
}

/* Contrast sample */
.wpdv-contrast-sample {
	padding: var(--wpdv-space-5);
	border-radius: var(--wpdv-radius-md);
	border: 1px solid var(--wpdv-color-border);
}

.wpdv-contrast-sample p {
	margin: 0 0 var(--wpdv-space-2);
}

.wpdv-contrast-sample .is-large {
	font-size: 24px;
	font-weight: 700;
}

.wpdv-pass,
.wpdv-fail {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--wpdv-radius-pill);
	font-size: var(--wpdv-text-xs);
	font-weight: 700;
}

.wpdv-pass {
	color: var(--wpdv-color-success);
	border: 1px solid currentColor;
}

.wpdv-fail {
	color: var(--wpdv-color-danger);
	border: 1px solid currentColor;
}

.wpdv-scale-preview {
	display: grid;
	gap: var(--wpdv-space-2);
	margin-top: var(--wpdv-space-4);
	overflow: hidden;
}

.wpdv-scale-preview > div {
	display: flex;
	align-items: baseline;
	gap: var(--wpdv-space-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: 1px solid var(--wpdv-color-border);
	padding-bottom: var(--wpdv-space-2);
}

.wpdv-scale-preview code {
	flex: none;
	font-size: 12px;
	color: var(--wpdv-color-muted);
	min-width: 9ch;
}

.wpdv-spacing-bar {
	height: 16px;
	background: var(--wpdv-color-primary);
	border-radius: 2px;
	flex: none;
}

.wpdv-span-all {
	grid-column: 1 / -1;
}

.wpdv-repeat__row label {
	display: block;
}

.wpdv-repeat__row label input,
.wpdv-repeat__row label textarea {
	margin-top: 4px;
	font-weight: 400;
}

.wpdv-tool [hidden] {
	display: none !important;
}