/**
 * WebTalkHub tools.
 *
 * Sized in rem, never em. The theme runs an 18px body and em values compound
 * through every nesting level, which is what inflated the first version.
 *
 * Neutrals are tinted toward the brand hue (288) rather than pure grey, and
 * the accent is GeneratePress's own --accent so the tool reads as part of the
 * site instead of a widget dropped onto it.
 *
 * Light only, on purpose. The host page is light and a dark tool sitting in a
 * white article would look broken, not clever.
 */

.wth-tool {
	/* Fallback first, then OKLCH for browsers that support it. */
	--wth-accent: #745acc;
	--wth-accent: oklch(0.53 0.155 288);
	--wth-accent-hover: #6349bd;
	--wth-accent-hover: oklch(0.47 0.155 288);
	--wth-accent-ring: rgba(116, 90, 204, 0.28);

	--wth-surface: #ffffff;
	--wth-surface: oklch(1 0.002 288);
	--wth-sunken: #f7f6fb;
	--wth-sunken: oklch(0.975 0.006 288);
	--wth-line: #e4e1ee;
	--wth-line: oklch(0.915 0.011 288);

	--wth-ink: #23202b;
	--wth-ink: oklch(0.26 0.018 288);
	--wth-ink-soft: #6b6579;
	--wth-ink-soft: oklch(0.53 0.021 288);
	--wth-ink-faint: #8d8799;
	--wth-ink-faint: oklch(0.64 0.019 288);

	--wth-good: #0f6b45;
	--wth-good: oklch(0.46 0.108 158);
	--wth-good-bg: #e6f4ed;
	--wth-good-bg: oklch(0.955 0.032 158);

	--wth-bad: #a3241a;
	--wth-bad: oklch(0.47 0.155 27);
	--wth-bad-bg: #fdeceb;
	--wth-bad-bg: oklch(0.955 0.028 27);

	--wth-r: 6px;
	--wth-r-lg: 10px;
	--wth-ease: cubic-bezier(0.22, 1, 0.36, 1);

	background: var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-r-lg);
	color: var(--wth-ink);
	/* The widget adapts to its own width, not the window's, so it also holds up
	   in a narrow column or sidebar and not only on a small phone. */
	container-type: inline-size;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	margin: 2rem 0;
	overflow: hidden;
}

/**
 * Themes style bare elements freely. GeneratePress ships
 * `button:not(.menu-toggle) { text-transform: uppercase; letter-spacing: 1px }`
 * which ties this on specificity and wins on source order, so the reset is
 * repeated on each component's own two-class selector below where it outranks
 * the theme. Do not thin these out.
 */
.wth-tool code,
.wth-tool pre {
	letter-spacing: normal;
	text-transform: none;
}

/* ---------- tabs ---------- */

/* Wraps rather than overflowing. Tab labels cannot shrink because they are
   nowrap, so a tool with five of them would otherwise push its own row off
   the side of the widget on a phone. */
.wth-tabs {
	background: var(--wth-sunken);
	border-bottom: 1px solid var(--wth-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem;
	padding: 0 0.375rem;
}

.wth-tool .wth-tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
	color: var(--wth-ink-soft);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1;
	margin: 0;
	padding: 0.75rem 0.875rem 0.6875rem;
	text-transform: none;
	transition: color 180ms var(--wth-ease), border-color 180ms var(--wth-ease);
	white-space: nowrap;
}

.wth-tool .wth-tab:hover {
	background: none;
	color: var(--wth-ink);
}

.wth-tool .wth-tab.is-active {
	border-bottom-color: var(--wth-accent);
	color: var(--wth-ink);
}

.wth-tool .wth-tab:focus-visible {
	border-radius: var(--wth-r) var(--wth-r) 0 0;
	outline: 2px solid var(--wth-accent);
	outline-offset: -2px;
}

/* ---------- panels ---------- */

.wth-panel {
	padding: 1.25rem;
}

.wth-label {
	color: var(--wth-ink);
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 0.4375rem;
}

.wth-field {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* ---------- inputs ---------- */

.wth-tool .wth-input {
	background: var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-r);
	color: var(--wth-ink);
	flex: 1 1 15rem;
	font-family: inherit;
	font-size: 0.875rem;
	letter-spacing: normal;
	line-height: 1.4;
	min-width: 0;
	padding: 0.5rem 0.625rem;
	text-transform: none;
	transition: border-color 150ms var(--wth-ease), box-shadow 150ms var(--wth-ease);
}

.wth-tool .wth-input::placeholder {
	color: var(--wth-ink-faint);
}

.wth-tool .wth-input:focus {
	border-color: var(--wth-accent);
	box-shadow: 0 0 0 3px var(--wth-accent-ring);
	outline: none;
}

/* Sits in a column flex label, where flex-basis would set height, not width. */
.wth-tool .wth-input-sm {
	flex: none;
	font-size: 0.8125rem;
	padding: 0.4375rem 0.5625rem;
	width: 100%;
}

/* ---------- buttons ---------- */

.wth-tool .wth-btn {
	appearance: none;
	background: var(--wth-surface);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-r);
	box-shadow: none;
	color: var(--wth-ink);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.4;
	padding: 0.5rem 0.875rem;
	text-transform: none;
	transition: background-color 150ms var(--wth-ease), border-color 150ms var(--wth-ease), color 150ms var(--wth-ease);
	white-space: nowrap;
}

.wth-tool .wth-btn:hover {
	background: var(--wth-sunken);
	border-color: var(--wth-ink-faint);
	color: var(--wth-ink);
}

.wth-tool .wth-btn:active {
	background: var(--wth-line);
}

.wth-tool .wth-btn:focus-visible {
	outline: 2px solid var(--wth-accent);
	outline-offset: 2px;
}

.wth-tool .wth-btn:disabled {
	cursor: default;
	opacity: 0.55;
}

.wth-tool .wth-btn:disabled:hover {
	background: var(--wth-surface);
	border-color: var(--wth-line);
}

.wth-tool .wth-btn-primary {
	background: var(--wth-accent);
	border-color: var(--wth-accent);
	color: #fff;
}

.wth-tool .wth-btn-primary:hover,
.wth-tool .wth-btn-primary:active {
	background: var(--wth-accent-hover);
	border-color: var(--wth-accent-hover);
	color: #fff;
}

.wth-tool .wth-btn-copy {
	flex: 0 0 auto;
	font-size: 0.75rem;
	padding: 0.3125rem 0.625rem;
}

.wth-tool .wth-btn-copy.is-copied,
.wth-tool .wth-btn-copy.is-copied:hover {
	background: var(--wth-good-bg);
	border-color: var(--wth-good);
	color: var(--wth-good);
}

/* ---------- supporting text ---------- */

.wth-note,
.wth-hint {
	color: var(--wth-ink-soft);
	font-size: 0.75rem;
	line-height: 1.55;
	margin: 0.5rem 0 0;
	max-width: 60ch;
}

.wth-error {
	background: var(--wth-bad-bg);
	border-radius: var(--wth-r);
	color: var(--wth-bad);
	font-size: 0.8125rem;
	margin-top: 0.75rem;
	padding: 0.5rem 0.75rem;
}

/* ---------- results ---------- */

.wth-results {
	margin-top: 1.25rem;
}

.wth-result + .wth-result {
	margin-top: 1.125rem;
}

.wth-sql {
	border-top: 1px solid var(--wth-line);
	margin-top: 1.5rem;
	padding-top: 1.25rem;
}

.wth-result-head {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}

.wth-result-title {
	font-size: 0.8125rem;
	font-weight: 600;
}

/* ink-soft rather than ink-faint. At 10px this needs 4.5:1 against the panel
   to stay readable, and faint only manages 3.1:1. */
.wth-badge {
	background: var(--wth-sunken);
	border-radius: 3px;
	color: var(--wth-ink-soft);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding: 0.0625rem 0.375rem;
	text-transform: uppercase;
}

.wth-badge-good {
	background: var(--wth-good-bg);
	color: var(--wth-good);
}

/* ---------- output ---------- */

.wth-output {
	align-items: center;
	background: var(--wth-sunken);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-r);
	display: flex;
	gap: 0.625rem;
	padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}

.wth-output code,
.wth-output pre {
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--wth-ink);
	flex: 1 1 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.8125rem;
	line-height: 1.6;
	margin: 0;
	min-width: 0;
	padding: 0;
}

/* Direct children only, so the block inside the salt panel keeps its layout. */
.wth-output > code {
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

/* The generated password is the whole point of its panel, so it gets size. */
.wth-output-hero {
	padding: 0.75rem 0.625rem 0.75rem 0.875rem;
}

.wth-output-hero > code {
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

.wth-output-block {
	align-items: flex-start;
	padding: 0.625rem 0.5rem 0.625rem 0.75rem;
}

.wth-output-block pre {
	overflow-x: auto;
	white-space: pre;
	width: 100%;
}

.wth-sub {
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0 0 0.625rem;
}

.wth-inline-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.625rem;
}

.wth-mini {
	color: var(--wth-ink-soft);
	display: flex;
	flex: 0 1 11rem;
	flex-direction: column;
	font-size: 0.75rem;
	font-weight: 600;
	gap: 0.3125rem;
}

/* Row of inputs above the generated rules. The address fields take the slack
   because a URL needs the room; the small dropdowns keep their natural size. */
.wth-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.wth-mini-grow {
	flex: 1 1 13rem;
}

.wth-tool select.wth-input {
	appearance: auto;
}

/* ---------- strong password controls ---------- */

.wth-controls {
	border-top: 1px solid var(--wth-line);
	display: grid;
	gap: 0.875rem;
	margin: 1rem 0 1.125rem;
	padding-top: 1rem;
}

.wth-length {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.wth-length-label {
	color: var(--wth-ink-soft);
	flex: 0 0 auto;
	font-size: 0.75rem;
	font-weight: 600;
}

/* 24px so the slider is grabbable with a thumb, not just a mouse pointer. */
.wth-tool .wth-length input[type="range"] {
	accent-color: var(--wth-accent);
	flex: 1 1 10rem;
	height: 1.5rem;
	margin: 0;
	min-width: 8rem;
}

.wth-length output {
	color: var(--wth-ink);
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	min-width: 2ch;
	text-align: right;
}

.wth-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.125rem;
}

/* The label is the tap target, so it carries the 24px minimum rather than the
   box itself. A 13px checkbox is fine to look at and miserable to hit. */
.wth-check {
	align-items: center;
	color: var(--wth-ink-soft);
	cursor: pointer;
	display: flex;
	font-size: 0.8125rem;
	gap: 0.375rem;
	line-height: 1.3;
	min-height: 1.5rem;
}

.wth-check:hover {
	color: var(--wth-ink);
}

.wth-tool .wth-check input[type="checkbox"] {
	accent-color: var(--wth-accent);
	flex: none;
	height: 1.0625rem;
	margin: 0;
	width: 1.0625rem;
}

/* ---------- detector results ---------- */

.wth-verdict {
	border-radius: var(--wth-r);
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 1.25rem;
	padding: 0.625rem 0.875rem;
}

.wth-verdict.is-yes {
	background: var(--wth-good-bg);
	color: var(--wth-good);
}

.wth-verdict.is-no {
	background: var(--wth-sunken);
	color: var(--wth-ink-soft);
}

.wth-detail {
	background: var(--wth-sunken);
	border: 1px solid var(--wth-line);
	border-radius: var(--wth-r);
	padding: 0.75rem 0.875rem;
}

.wth-detail-name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.wth-tool .wth-meta {
	display: grid;
	gap: 0.125rem 0.875rem;
	grid-template-columns: auto 1fr;
	margin: 0.625rem 0 0;
}

.wth-tool .wth-meta:empty {
	margin: 0;
}

.wth-tool .wth-meta dt {
	color: var(--wth-ink-faint);
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0;
}

.wth-tool .wth-meta dd {
	color: var(--wth-ink);
	font-size: 0.75rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.wth-tool .wth-list {
	display: grid;
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wth-tool .wth-list-item {
	align-items: baseline;
	background: var(--wth-sunken);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
	margin: 0;
	padding: 0.4375rem 0.75rem;
}

.wth-tool .wth-list-item:first-child {
	border-radius: var(--wth-r) var(--wth-r) 0 0;
}

.wth-tool .wth-list-item:last-child {
	border-radius: 0 0 var(--wth-r) var(--wth-r);
}

.wth-list-name {
	font-size: 0.8125rem;
	font-weight: 600;
}

.wth-tool .wth-list-slug {
	background: none;
	color: var(--wth-ink-faint);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6875rem;
	padding: 0;
}

.wth-tool .wth-list-empty {
	background: var(--wth-sunken);
	border-radius: var(--wth-r);
	color: var(--wth-ink-soft);
	font-size: 0.8125rem;
	margin: 0;
	padding: 0.625rem 0.75rem;
}

/* ---------- tools hub grid ---------- */

.wth-index {
	display: grid;
	gap: 0.875rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin: 2rem 0;
}

.wth-index .wth-card {
	align-items: flex-start;
	background: #fff;
	border: 1px solid #e4e1ee;
	border-radius: 10px;
	color: #23202b;
	display: flex;
	gap: 0.875rem;
	padding: 1.125rem;
	text-decoration: none;
	transition: border-color 150ms cubic-bezier(0.22, 1, 0.36, 1), transform 150ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 150ms cubic-bezier(0.22, 1, 0.36, 1);
}

.wth-index .wth-card:hover {
	border-color: #745acc;
	box-shadow: 0 6px 18px rgba(116, 90, 204, 0.13);
	transform: translateY(-2px);
}

.wth-card-icon {
	background: #f2effc;
	border-radius: 8px;
	color: #745acc;
	flex: none;
	height: 2.375rem;
	padding: 0.5rem;
	width: 2.375rem;
}

.wth-card-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.wth-card-name {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.wth-card-tagline {
	color: #6b6579;
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* ---------- narrow ---------- */

@container (max-width: 30rem) {
	.wth-panel {
		padding: 1rem;
	}

	.wth-tabs {
		padding: 0 0.25rem;
	}

	.wth-tool .wth-tab {
		flex: 1 1 auto;
		padding: 0.75rem 0.375rem 0.6875rem;
		text-align: center;
	}

	.wth-output {
		align-items: stretch;
		flex-direction: column;
		gap: 0.5rem;
		padding: 0.625rem 0.75rem;
	}

	.wth-output-hero > code {
		font-size: 0.9375rem;
	}

	.wth-tool .wth-btn-copy {
		align-self: flex-start;
	}

	.wth-mini {
		flex: 1 1 8rem;
	}

	.wth-options {
		gap: 0.5rem 0.875rem;
	}
}

/* Fallback for browsers without container query support. Same rules, keyed to
   the viewport, so a phone still gets the stacked layout. */
@supports not (container-type: inline-size) {
	@media (max-width: 40rem) {
		.wth-panel {
			padding: 1rem;
		}

		.wth-tool .wth-tab {
			flex: 1 1 auto;
			padding: 0.75rem 0.375rem 0.6875rem;
			text-align: center;
		}

		.wth-output {
			align-items: stretch;
			flex-direction: column;
			gap: 0.5rem;
		}

		.wth-tool .wth-btn-copy {
			align-self: flex-start;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.wth-tool * {
		transition-duration: 1ms !important;
	}
}