/*!
 * CSS Portal — Code Tool styles
 * Shared by the converter / compiler pages. Everything is scoped to .ct
 * so it can't clash with the site theme. Swap --ct-accent for the brand colour.
 */

.ct {
	--ct-accent: #2563eb;
	--ct-accent-hover: #1d4ed8;
	--ct-accent-soft: rgba(37, 99, 235, 0.12);
	--ct-on-accent: #ffffff;
	--ct-bg: #ffffff;
	--ct-surface: #f8fafc;
	--ct-surface-2: #eef2f7;
	--ct-border: #e2e8f0;
	--ct-border-strong: #cbd5e1;
	--ct-text: #0f172a;
	--ct-muted: #64748b;
	--ct-gutter: #a3afc0;
	--ct-ok: #15803d;
	--ct-warn: #b45309;
	--ct-err: #dc2626;
	--ct-radius: 12px;
	--ct-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

	/* syntax */
	--sx-text: #1e293b;
	--sx-comment: #8a96a8;
	--sx-punct: #64748b;
	--sx-tag: #0f766e;
	--sx-class: #1d4ed8;
	--sx-id: #b91c1c;
	--sx-pseudo: #9333ea;
	--sx-amp: #db2777;
	--sx-attr: #0e7490;
	--sx-at: #be185d;
	--sx-prop: #0c4a9e;
	--sx-value: #1e293b;
	--sx-num: #b45309;
	--sx-str: #15803d;
	--sx-hex: #c2410c;
	--sx-var: #7c3aed;
	--sx-fn: #0369a1;
	--sx-imp: #dc2626;

	color: var(--ct-text);
	margin: 8px 0 24px;
}

html.dark-mode .ct {
	--ct-accent: #3b82f6;
	--ct-accent-hover: #60a5fa;
	--ct-accent-soft: rgba(96, 165, 250, 0.16);
	--ct-bg: #0f1623;
	--ct-surface: #151e2d;
	--ct-surface-2: #1d2839;
	--ct-border: #263246;
	--ct-border-strong: #33415a;
	--ct-text: #e2e8f0;
	--ct-muted: #94a3b8;
	--ct-gutter: #4b5a72;
	--ct-ok: #4ade80;
	--ct-warn: #fbbf24;
	--ct-err: #f87171;

	--sx-text: #e2e8f0;
	--sx-comment: #64748b;
	--sx-punct: #8291a8;
	--sx-tag: #5eead4;
	--sx-class: #93c5fd;
	--sx-id: #fca5a5;
	--sx-pseudo: #d8b4fe;
	--sx-amp: #f9a8d4;
	--sx-attr: #67e8f9;
	--sx-at: #f9a8d4;
	--sx-prop: #7dd3fc;
	--sx-value: #e2e8f0;
	--sx-num: #fdba74;
	--sx-str: #86efac;
	--sx-hex: #fb923c;
	--sx-var: #c4b5fd;
	--sx-fn: #93c5fd;
	--sx-imp: #fca5a5;
}

.ct *,
.ct *::before,
.ct *::after { box-sizing: border-box; }

/* ---------- Toolbar ---------- */

.ct-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 10px 12px 10px 16px;
	margin-bottom: 14px;
	background: var(--ct-surface);
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
}

.ct-options,
.ct-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
}

.ct-actions { margin-left: auto; }

.ct-field {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--ct-muted);
	white-space: nowrap;
}

.ct-field select {
	appearance: none;
	-webkit-appearance: none;
	height: 32px;
	padding: 0 30px 0 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--ct-text);
	background-color: var(--ct-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	border: 1px solid var(--ct-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s;
}

.ct-field select:hover { border-color: var(--ct-border-strong); }

.ct-field select:focus-visible {
	outline: none;
	border-color: var(--ct-accent);
	box-shadow: 0 0 0 3px var(--ct-accent-soft);
}

/* Switch */
.ct-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var(--ct-muted);
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.ct-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.ct-switch__track {
	position: relative;
	flex: none;
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: var(--ct-border-strong);
	transition: background-color .15s;
}

.ct-switch__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
	transition: transform .15s;
}

.ct-switch input:checked + .ct-switch__track { background: var(--ct-accent); }
.ct-switch input:checked + .ct-switch__track::after { transform: translateX(14px); }
.ct-switch input:focus-visible + .ct-switch__track { box-shadow: 0 0 0 3px var(--ct-accent-soft); }

/* ---------- Buttons ---------- */

.ct-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--ct-on-accent);
	background: var(--ct-accent);
	border: 1px solid var(--ct-accent);
	border-radius: 9px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, transform .05s;
}

.ct-btn:hover { background: var(--ct-accent-hover); border-color: var(--ct-accent-hover); }
.ct-btn:active { transform: translateY(1px); }
.ct-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ct-accent-soft); }
.ct-btn i { font-size: 16px; }

.ct-btn kbd {
	padding: 2px 5px;
	font-family: var(--ct-mono);
	font-size: 11px;
	font-weight: 500;
	color: inherit;
	background: rgba(255, 255, 255, .18);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
}

.ct-tool {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var(--ct-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 7px;
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.ct-tool i { font-size: 16px; }
.ct-tool:hover { color: var(--ct-text); background: var(--ct-surface-2); }
.ct-tool:focus-visible { outline: none; border-color: var(--ct-accent); box-shadow: 0 0 0 3px var(--ct-accent-soft); }
.ct-tool--danger:hover { color: var(--ct-err); }
.ct-tool.is-done, .ct-tool.is-done:hover { color: var(--ct-ok); }

/* ---------- Panes ---------- */

.ct-panes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 992px) {
	.ct-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ct-pane {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

.ct-pane:focus-within {
	border-color: var(--ct-accent);
	box-shadow: 0 0 0 3px var(--ct-accent-soft);
}

.ct-pane__head {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 6px 8px 6px 14px;
	background: var(--ct-surface);
	border-bottom: 1px solid var(--ct-border);
}

.ct-pane__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ct-text);
	white-space: nowrap;
}

.ct-badge {
	padding: 3px 7px;
	font-family: var(--ct-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ct-accent);
	background: var(--ct-accent-soft);
	border-radius: 6px;
}

.ct-pane__meta {
	font-size: 12px;
	color: var(--ct-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-variant-numeric: tabular-nums;
}

.ct-pane__tools {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}

/* View tabs (Code / Preview) */
.ct-tabs {
	display: inline-flex;
	padding: 2px;
	margin-left: 4px;
	background: var(--ct-surface-2);
	border-radius: 8px;
}

.ct-tab {
	height: 26px;
	padding: 0 10px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--ct-muted);
	background: transparent;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.ct-tab:hover { color: var(--ct-text); }
.ct-tab.is-active { color: var(--ct-text); background: var(--ct-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.ct-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ct-accent-soft); }

.ct-preview {
	display: none;
	width: 100%;
	height: clamp(320px, 58vh, 620px);
	border: 0;
	background: var(--ct-bg);
}

.ct-pane.is-preview .ce { display: none !important; }
.ct-pane.is-preview .ct-preview { display: block; }

/* Drop zone */
.ct-drop {
	position: absolute;
	inset: 46px 0 0;
	z-index: 3;
	display: none;
	place-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ct-accent);
	background: color-mix(in srgb, var(--ct-bg) 88%, transparent);
	border: 2px dashed var(--ct-accent);
	border-radius: 0 0 var(--ct-radius) var(--ct-radius);
	pointer-events: none;
}

.ct-drop i { display: block; margin: 0 auto 6px; font-size: 32px; text-align: center; }
.ct-pane.is-drop .ct-drop { display: grid; }

/* ---------- Status ---------- */

.ct-status {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 22px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--ct-muted);
}

.ct-status span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-status i { flex: none; font-size: 16px; }
.ct-status.is-ok i { color: var(--ct-ok); }
.ct-status.is-warn { color: var(--ct-warn); }
.ct-status.is-error { color: var(--ct-err); }
.ct-status.is-busy i { animation: ct-spin .9s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-status.is-error span { white-space: normal; }

/* Output is out of date after a failed compile */
.ct--error [data-ct="output"] .ce-hl { opacity: .45; }
.ct--error [data-ct="output"]::after {
	content: "Showing the last successful result";
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	position: absolute;
	right: 12px;
	bottom: 10px;
	z-index: 2;
	padding: 4px 8px;
	font-size: 12px;
	color: var(--ct-err);
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: 6px;
	pointer-events: none;
}
.ct--error [data-ct="output"] { position: relative; }

/* ---------- Editor ---------- */

.ce {
	--ce-pad-y: 14px;
	--ce-line: 1.65;
	display: flex;
	height: clamp(320px, 58vh, 620px);
	min-height: 200px;
	font-family: var(--ct-mono);
	font-size: 13px;
	line-height: var(--ce-line);
	background: var(--ct-bg);
	overflow: hidden;
	resize: vertical;
}

.ce-gutter {
	flex: none;
	width: calc(var(--ce-digits, 2) * 1ch + 26px);
	padding: var(--ce-pad-y) 12px var(--ce-pad-y) 10px;
	overflow: hidden;
	color: var(--ct-gutter);
	text-align: right;
	white-space: pre;
	user-select: none;
	background: var(--ct-surface);
	border-right: 1px solid var(--ct-border);
	font-variant-numeric: tabular-nums;
}

.ce-body {
	position: relative;
	flex: 1;
	min-width: 0;
}

.ce-hl,
.ce-ta {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: var(--ce-pad-y) 16px;
	border: 0;
	border-radius: 0;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	word-spacing: normal;
	white-space: pre;
	overflow-wrap: normal;
	tab-size: 4;
	-moz-tab-size: 4;
	text-align: left;
	box-shadow: none;
}

.ce-hl {
	overflow: hidden;
	pointer-events: none;
	color: var(--sx-text);
	background: transparent;
}

.ce-ta {
	z-index: 1;
	overflow: auto;
	resize: none;
	outline: none;
	color: transparent;
	-webkit-text-fill-color: transparent;
	caret-color: var(--ct-text);
	background: transparent;
}

.ce-ta::placeholder {
	color: var(--ct-muted);
	-webkit-text-fill-color: var(--ct-muted);
	opacity: .8;
}

.ce-ta::selection { background: rgba(59, 130, 246, .28); }

.ce--readonly .ce-ta { caret-color: transparent; }

/*
 * Guard against site/theme rules (pre, textarea, code, *) leaking in.
 * The highlighted layer and the textarea MUST lay text out identically,
 * otherwise line breaks and the caret drift apart.
 */
.ct .ce .ce-hl,
.ct .ce .ce-ta,
.ct .ce .ce-gutter {
	display: block !important;
	float: none !important;
	white-space: pre !important;
	word-break: normal !important;
	word-wrap: normal !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
	text-transform: none !important;
	text-indent: 0 !important;
	text-shadow: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
	font-family: var(--ct-mono) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: var(--ce-line) !important;
	tab-size: 4 !important;
	-moz-tab-size: 4 !important;
	max-width: none !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transition: none !important;
}

.ct .ce .ce-hl,
.ct .ce .ce-ta {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: var(--ce-pad-y) 16px !important;
	text-align: left !important;
}

.ct .ce .ce-hl {
	overflow: hidden !important;
	background: transparent !important;
}

.ct .ce .ce-ta {
	overflow: auto !important;
	background: transparent !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	resize: none !important;
	outline: none !important;
}

.ct .ce .ce-gutter {
	position: static !important;
	margin: 0 !important;
	padding: var(--ce-pad-y) 12px var(--ce-pad-y) 10px !important;
	overflow: hidden !important;
	text-align: right !important;
	background: var(--ct-surface) !important;
	border-right: 1px solid var(--ct-border) !important;
}

.ct .ce .ce-hl span {
	display: inline !important;
	white-space: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

/* line marks + highlighted line (validators) */
.ct .ce .ce-gutter .ce-mark {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font: inherit !important;
	font-weight: 700 !important;
	line-height: inherit !important;
	vertical-align: baseline !important;
	background: none !important;
}
.ce-mark--error { color: var(--ct-err); }
.ce-mark--warning { color: var(--ct-warn); }
.ce-mark--info { color: var(--ct-accent); }

.ce-active {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--ct-accent-soft);
	box-shadow: inset 3px 0 0 var(--ct-accent);
}
.ce-active[hidden] { display: none; }
.ce-active--error { background: color-mix(in srgb, var(--ct-err) 12%, transparent); box-shadow: inset 3px 0 0 var(--ct-err); }
.ce-active--warning { background: color-mix(in srgb, var(--ct-warn) 14%, transparent); box-shadow: inset 3px 0 0 var(--ct-warn); }

/* tokens */
.ce .t-cm { color: var(--sx-comment); font-style: italic; }
.ce .t-pn { color: var(--sx-punct); }
.ce .t-tag { color: var(--sx-tag); }
.ce .t-cls { color: var(--sx-class); }
.ce .t-id { color: var(--sx-id); }
.ce .t-pseudo { color: var(--sx-pseudo); }
.ce .t-amp { color: var(--sx-amp); }
.ce .t-attr { color: var(--sx-attr); }
.ce .t-at { color: var(--sx-at); }
.ce .t-prop { color: var(--sx-prop); }
.ce .t-val { color: var(--sx-value); }
.ce .t-num { color: var(--sx-num); }
.ce .t-str { color: var(--sx-str); }
.ce .t-var { color: var(--sx-var); }
.ce .t-fn { color: var(--sx-fn); }
.ce .t-imp { color: var(--sx-imp); }
.ce .t-hex {
	color: var(--sx-hex);
	text-decoration: underline 3px;
	text-decoration-color: var(--sw, transparent);
	text-underline-offset: 3px;
}

/* ---------- Small screens ---------- */

@media (max-width: 575.98px) {
	.ct-toolbar { padding: 12px; }
	.ct-options { gap: 10px 14px; }
	.ct-actions { width: 100%; justify-content: space-between; }
	.ct-btn kbd { display: none; }
	.ct-tool span { display: none; }
	.ct-tool { padding: 0 8px; }
	.ct-pane__meta { display: none; }
	.ce, .ct-preview { height: 340px; }
}

@media (hover: none) {
	.ct-btn kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ct *, .ct *::before, .ct *::after { transition: none !important; }
}

/* ---------- About section code samples ---------- */

.ct-compare {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 16px 0 20px;
}

@media (min-width: 768px) {
	.ct-compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.ct-compare figure { margin: 0; min-width: 0; }

.ct-compare figcaption {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ct-muted, #64748b);
}

.ct-compare pre { margin: 0; height: 100%; }

/* =========================================================
 * Validators
 * ========================================================= */

.vt-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	white-space: nowrap;
}
.vt-summary:empty { display: none; }
.vt-summary i { font-size: 15px; }
.vt-summary.is-valid { color: var(--ct-ok); background: color-mix(in srgb, var(--ct-ok) 12%, transparent); }
.vt-summary.is-error { color: var(--ct-err); background: color-mix(in srgb, var(--ct-err) 12%, transparent); }
.vt-summary.is-busy { color: var(--ct-muted); background: var(--ct-surface-2); }
.vt-summary.is-busy i { animation: ct-spin .9s linear infinite; }

.vt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--ct-border);
}

.vt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--ct-muted);
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}
.vt-chip:hover:not(:disabled) { color: var(--ct-text); border-color: var(--ct-border-strong); }
.vt-chip:disabled { opacity: .5; cursor: default; }
.vt-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ct-accent-soft); }
.vt-chip.is-active { color: var(--ct-text); background: var(--ct-surface-2); border-color: var(--ct-border-strong); }
.vt-chip [data-count] { font-variant-numeric: tabular-nums; color: var(--ct-muted); font-weight: 500; }
.vt-dot { width: 8px; height: 8px; border-radius: 50%; }
.vt-dot--error { background: var(--ct-err); }
.vt-dot--warning { background: var(--ct-warn); }
.vt-dot--info { background: var(--ct-accent); }

.vt-results {
	height: calc(clamp(320px, 58vh, 620px) - 45px);
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: opacity .15s;
}
.ct.is-stale .vt-results,
.ct.is-busy .vt-results { opacity: .5; }

.vt-list { margin: 0; padding: 6px; list-style: none; }
.vt-list li { margin: 0; padding: 0; }

.vt-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	font: inherit;
	text-align: left;
	color: var(--ct-text);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.vt-item:hover { background: var(--ct-surface); }
.vt-item.is-current { background: var(--ct-surface-2); }
.vt-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ct-accent); }
.vt-item > i { flex: none; margin-top: 1px; font-size: 18px; }
.vt-item--error > i { color: var(--ct-err); }
.vt-item--warning > i { color: var(--ct-warn); }
.vt-item--info > i { color: var(--ct-accent); }
.vt-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-item__msg { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.vt-item__msg code {
	padding: 1px 5px;
	font-family: var(--ct-mono);
	font-size: 12.5px;
	color: var(--ct-text);
	background: var(--ct-surface-2);
	border-radius: 4px;
}
.vt-item__meta { font-size: 12px; color: var(--ct-muted); text-transform: capitalize; font-variant-numeric: tabular-nums; }

.vt-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 100%;
	min-height: 220px;
	padding: 24px;
	text-align: center;
	color: var(--ct-muted);
}
.vt-empty i { font-size: 40px; margin-bottom: 4px; opacity: .7; }
.vt-empty strong { font-size: 16px; color: var(--ct-text); }
.vt-empty span { font-size: 14px; max-width: 34ch; }
.vt-empty.is-valid i { color: var(--ct-ok); opacity: 1; }
.vt-empty.is-failed i { color: var(--ct-err); opacity: 1; }

/* Stats */
.vt-stats {
	margin-top: 16px;
	padding: 16px;
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: var(--ct-radius);
}
.vt-stats[hidden] { display: none; }
.vt-stats h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--ct-text); }

.vt-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.vt-tile {
	padding: 12px 14px;
	background: var(--ct-surface);
	border: 1px solid var(--ct-border);
	border-radius: 10px;
}
.vt-tile strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ct-text); font-variant-numeric: tabular-nums; }
.vt-tile span { font-size: 12px; color: var(--ct-muted); }
.vt-tile--error strong { color: var(--ct-err); }
.vt-tile--warning strong { color: var(--ct-warn); }
.vt-tile--info strong { color: var(--ct-accent); }

.vt-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 768px) { .vt-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vt-cols h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ct-muted); }

.vt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-tags code {
	padding: 3px 8px;
	font-family: var(--ct-mono);
	font-size: 12.5px;
	color: var(--ct-text);
	background: var(--ct-surface-2);
	border-radius: 6px;
}
.vt-none { font-size: 13px; color: var(--ct-muted); }

.vt-bars { margin: 0; padding: 0; list-style: none; }
.vt-bars li { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr) 3ch; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13px; }
.vt-bars code { font-family: var(--ct-mono); font-size: 12.5px; color: var(--ct-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-bars .vt-bar { height: 8px; background: var(--ct-surface-2); border-radius: 999px; overflow: hidden; }
.vt-bars .vt-bar i { display: block; height: 100%; background: var(--ct-accent); border-radius: 999px; }
.vt-bars b { font-weight: 600; text-align: right; color: var(--ct-muted); font-variant-numeric: tabular-nums; }

/* Severity labels used in page copy */
.vt-sev { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.vt-sev::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.vt-sev--error { color: #dc2626; }
.vt-sev--warning { color: #b45309; }
.vt-sev--info { color: #2563eb; }

@media (max-width: 575.98px) {
	.vt-results { height: 360px; }
	.vt-chip { padding: 0 8px; }
}
.vt-item__meta .vt-rule { text-transform: none; font-family: var(--ct-mono); font-size: 11.5px; }
.vt-bars code.vt-plain { font-family: inherit; font-size: 13px; }

/* =========================================================
 * Segmented control (radio buttons)
 * ========================================================= */

.ct-seg {
	display: inline-flex;
	padding: 3px;
	margin: 0;
	background: var(--ct-surface-2);
	border: 0;
	border-radius: 9px;
}
.ct-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ct-seg label { position: relative; margin: 0; }
.ct-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ct-seg span {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-muted);
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s, color .15s;
}
.ct-seg span:hover { color: var(--ct-text); }
.ct-seg input:checked + span { color: var(--ct-text); background: var(--ct-bg); box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
.ct-seg input:focus-visible + span { box-shadow: 0 0 0 3px var(--ct-accent-soft); }

.ct-group { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ct-muted); }

/* =========================================================
 * CSS Formatter
 * ========================================================= */

.cf-suboptions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin: -4px 0 14px;
	padding: 0 4px;
	min-height: 34px;
}
.cf-suboptions > * { display: none; }
.cf[data-mode="beautify"] .cf-suboptions [data-for~="beautify"],
.cf[data-mode="compact"] .cf-suboptions [data-for~="compact"],
.cf[data-mode="inline"] .cf-suboptions [data-for~="inline"],
.cf[data-mode="minify"] .cf-suboptions [data-for~="minify"],
.cf.cf--optimise .cf-suboptions [data-for~="optimise"] { display: inline-flex; }
.cf-note { font-size: 12px; color: var(--ct-muted); }
.cf-divider { width: 1px; height: 20px; background: var(--ct-border); }

.cf[data-mode="minify"] .cf-indent { opacity: .45; pointer-events: none; }

.cf .ct-panes { grid-template-columns: minmax(0, 1fr) !important; }
.cf [data-ct="input"].ce { height: clamp(240px, 38vh, 440px); }
.cf [data-ct="output"].ce { height: clamp(300px, 52vh, 620px); }

.cf-out-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.cf-opt { display: none; }
.cf.cf--optimise .cf-opt { display: flex; }

@media (min-width: 992px) {
	.cf.cf--optimise .cf-out-body { grid-template-columns: minmax(0, 1fr) 320px; }
}

.cf-opt {
	flex-direction: column;
	min-width: 0;
	max-height: clamp(300px, 52vh, 620px);
	border-left: 1px solid var(--ct-border);
	background: var(--ct-surface);
}
@media (max-width: 991.98px) {
	.cf-opt { border-left: 0; border-top: 1px solid var(--ct-border); max-height: 420px; }
}
.cf-opt__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-text);
	border-bottom: 1px solid var(--ct-border);
}
.cf-opt__head [data-cf="opt-count"] {
	min-width: 24px;
	padding: 1px 8px;
	font-size: 12px;
	text-align: center;
	color: var(--ct-accent);
	background: var(--ct-accent-soft);
	border-radius: 999px;
}
.cf-opt__list { flex: 1; overflow-y: auto; padding: 6px; }

.cf-opt-group { margin: 0 0 4px; }
.cf-opt-group summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-text);
	border-radius: 8px;
	cursor: pointer;
	list-style: none;
}
.cf-opt-group summary::-webkit-details-marker { display: none; }
.cf-opt-group summary::after { content: "›"; margin-left: auto; color: var(--ct-muted); transition: transform .15s; }
.cf-opt-group[open] summary::after { transform: rotate(90deg); }
.cf-opt-group summary:hover { background: var(--ct-surface-2); }
.cf-opt-badge {
	min-width: 22px;
	padding: 1px 6px;
	font-size: 11px;
	text-align: center;
	color: var(--ct-muted);
	background: var(--ct-bg);
	border: 1px solid var(--ct-border);
	border-radius: 999px;
}
.cf-opt-group ul { margin: 0 0 6px; padding: 0 0 0 8px; list-style: none; }
.cf-opt-group li { margin: 0; padding: 7px 8px; border-left: 2px solid var(--ct-border); }
.cf-opt-where { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-bottom: 5px; }
.cf-opt-where code { font-family: var(--ct-mono); font-size: 12px; color: var(--ct-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-opt-where span { display: block; max-width: 100%; font-size: 11.5px; color: var(--ct-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-opt-where span:empty { display: none; }
.cf-opt-diff { display: grid; gap: 2px; font-family: var(--ct-mono); font-size: 12px; overflow-wrap: anywhere; }
.cf-opt-diff del, .cf-opt-diff ins { display: block; padding: 2px 6px; text-decoration: none; border-radius: 4px; }
.cf-opt-diff del { color: var(--ct-err); background: color-mix(in srgb, var(--ct-err) 9%, transparent); }
.cf-opt-diff del::before { content: "− "; }
.cf-opt-diff ins { color: var(--ct-ok); background: color-mix(in srgb, var(--ct-ok) 10%, transparent); }
.cf-opt-diff ins::before { content: "+ "; }
.cf-opt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 16px; font-size: 13px; text-align: center; color: var(--ct-muted); }
.cf-opt-empty i { font-size: 28px; }

.cf-size { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: var(--ct-muted); background: var(--ct-surface-2); }
.cf-size:empty { display: none; }
.cf-size.is-smaller { color: var(--ct-ok); background: color-mix(in srgb, var(--ct-ok) 12%, transparent); }