/**
 * 51 Global Tech — Free Tools
 * Styles for the WordPress Theme Checker.
 *
 * Uses the same design tokens as the 51web theme (navy / blue gradient, 14px
 * radius, soft shadows) so the tool sits naturally inside any page.
 *
 * @package w51-http-ssl
 */

.w51t-tool {
	--w51t-navy: #081631;
	--w51t-navy-800: #0b1f45;
	--w51t-blue: #1e6ef5;
	--w51t-blue-400: #3b82f6;
	--w51t-cyan: #38bdf8;
	--w51t-text: #0f172a;
	--w51t-sub: #55647a;
	--w51t-line: #e5eaf2;
	--w51t-bg: #f5f8fc;
	--w51t-radius: 14px;
	--w51t-shadow: 0 10px 30px rgba(13, 38, 76, .08);
	--w51t-shadow-sm: 0 2px 8px rgba(13, 38, 76, .06);

	max-width: 1000px;
	margin: 0 auto;
	color: var(--w51t-text);
	font-size: 16px;
	line-height: 1.65;
}

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

/* ---------- Header ---------- */

.w51t-head {
	text-align: center;
	margin-bottom: 26px;
}

.w51t-title {
	margin: 0 0 10px;
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.25;
	letter-spacing: -.02em;
	color: var(--w51t-navy);
}

.w51t-sub {
	margin: 0;
	color: var(--w51t-sub);
	font-size: 16px;
}

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

.w51t-form {
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-radius: var(--w51t-radius);
	box-shadow: var(--w51t-shadow);
	padding: 22px;
}

.w51t-input-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.w51t-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 16px;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: var(--w51t-bg);
	color: var(--w51t-text);
	font-size: 15px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.w51t-input::placeholder {
	color: #93a1b5;
}

.w51t-input:focus {
	outline: none;
	background: #fff;
	border-color: var(--w51t-blue);
	box-shadow: 0 0 0 3px rgba(30, 110, 245, .15);
}

.w51t-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.w51t-btn.primary {
	background: linear-gradient(92deg, var(--w51t-blue), var(--w51t-blue-400));
	color: #fff;
	box-shadow: 0 8px 24px rgba(30, 110, 245, .32);
}

.w51t-btn.primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(30, 110, 245, .42);
}

.w51t-btn.outline {
	background: #fff;
	border-color: var(--w51t-line);
	color: var(--w51t-navy);
}

.w51t-btn.outline:hover:not(:disabled) {
	border-color: var(--w51t-blue);
	color: var(--w51t-blue);
	background: rgba(30, 110, 245, .05);
}

.w51t-btn.ghost {
	background: #fff;
	border-color: var(--w51t-line);
	color: var(--w51t-navy);
	padding: 11px 20px;
	font-size: 14px;
}

.w51t-btn.ghost:hover:not(:disabled) {
	border-color: var(--w51t-navy);
}

.w51t-btn:disabled {
	opacity: .62;
	cursor: progress;
	transform: none !important;
}

.w51t-hint {
	margin: 12px 0 0;
	color: var(--w51t-sub);
	font-size: 13.5px;
	line-height: 1.6;
}

.w51t-hint code {
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 12.5px;
	color: var(--w51t-navy);
}

.w51t-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--w51t-blue);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	border-bottom: 1px dashed rgba(30, 110, 245, .45);
	line-height: 1.9;
}

.w51t-toggle:hover {
	color: var(--w51t-navy);
	border-bottom-color: var(--w51t-navy);
}

.w51t-toggle-mark {
	font-style: normal;
}

.w51t-source {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--w51t-line);
}

.w51t-textarea {
	width: 100%;
	margin: 12px 0 14px;
	padding: 13px 15px;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: var(--w51t-bg);
	color: var(--w51t-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.6;
	resize: vertical;
}

.w51t-textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--w51t-blue);
	box-shadow: 0 0 0 3px rgba(30, 110, 245, .15);
}

/* ---------- Messages ---------- */

.w51t-msg {
	display: none;
	margin-top: 18px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14.5px;
	border: 1px solid transparent;
	line-height: 1.6;
}

.w51t-msg.show {
	display: block;
}

.w51t-msg.info {
	background: rgba(30, 110, 245, .06);
	border-color: rgba(30, 110, 245, .22);
	color: #17417f;
}

.w51t-msg.err {
	background: rgba(220, 38, 38, .06);
	border-color: rgba(220, 38, 38, .25);
	color: #8c1d1d;
}

.w51t-msg code {
	background: rgba(0, 0, 0, .05);
	border-radius: 4px;
	padding: 1px 5px;
}

/* ---------- Report shell ---------- */

.w51t-result {
	display: none;
}

.w51t-result.show {
	display: block;
	animation: w51t-in .35s ease both;
}

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

.w51t-report {
	margin-top: 24px;
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-radius: var(--w51t-radius);
	box-shadow: var(--w51t-shadow);
	overflow: hidden;
}

/* ---------- Overview ---------- */

.w51t-overview {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--w51t-line);
	border-bottom: 1px solid var(--w51t-line);
}

.w51t-stat {
	background: #fff;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.w51t-stat-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--w51t-sub);
	font-weight: 600;
}

.w51t-stat-value {
	font-size: 16px;
	font-weight: 600;
	color: var(--w51t-navy);
	overflow-wrap: anywhere;
}

.w51t-ok   { color: #067647; }
.w51t-warn { color: #b54708; }
.w51t-dim  { color: var(--w51t-sub); font-weight: 500; }

.w51t-inline-note {
	margin: 0;
	padding: 14px 20px;
	border-bottom: 1px solid var(--w51t-line);
	background: var(--w51t-bg);
	color: var(--w51t-sub);
	font-size: 13.5px;
}

.w51t-inline-note .w51t-ev {
	display: inline-flex;
	margin-top: 6px;
}

/* ---------- Sections ---------- */

.w51t-section {
	padding: 22px 24px;
	border-bottom: 1px solid var(--w51t-line);
}

.w51t-section:last-child {
	border-bottom: 0;
}

.w51t-section-title {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	color: var(--w51t-navy);
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.w51t-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 8px;
	border-radius: 99px;
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--w51t-sub);
}

.w51t-empty {
	margin: 0;
	color: var(--w51t-sub);
	font-size: 14.5px;
}

/* ---------- Themes ---------- */

.w51t-theme {
	border: 1px solid var(--w51t-line);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 12px;
	background: #fff;
}

.w51t-theme:last-child {
	margin-bottom: 0;
}

.w51t-theme.is-current {
	border-color: rgba(30, 110, 245, .38);
	background: linear-gradient(180deg, rgba(30, 110, 245, .05), rgba(30, 110, 245, .015));
}

.w51t-theme-top {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 7px;
}

.w51t-theme-name {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--w51t-navy);
}

.w51t-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.w51t-badge.live {
	background: rgba(6, 118, 71, .1);
	color: #067647;
	border: 1px solid rgba(6, 118, 71, .25);
}

.w51t-badge.ghost {
	background: var(--w51t-bg);
	color: var(--w51t-sub);
	border: 1px solid var(--w51t-line);
}

.w51t-theme-meta {
	font-size: 13.5px;
	color: var(--w51t-sub);
	overflow-wrap: anywhere;
}

.w51t-theme-meta code {
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 12.5px;
	color: var(--w51t-navy);
}

.w51t-theme-note {
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--w51t-sub);
}

/* ---------- Evidence chips ---------- */

.w51t-ev {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.w51t-ev-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 6px;
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	color: var(--w51t-sub);
	font-size: 12px;
	line-height: 1.55;
}

/* ---------- Plugin chips ---------- */

.w51t-cat-label {
	margin: 18px 0 9px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--w51t-blue);
}

.w51t-cat-label:first-child {
	margin-top: 0;
}

.w51t-chip {
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: #fff;
	margin-bottom: 8px;
	overflow: hidden;
	transition: border-color .2s ease;
}

.w51t-chip:hover {
	border-color: rgba(30, 110, 245, .35);
}

.w51t-chip > summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 15px;
	cursor: pointer;
	list-style: none;
	flex-wrap: wrap;
	transition: background .2s ease;
}

.w51t-chip > summary::-webkit-details-marker {
	display: none;
}

.w51t-chip > summary::after {
	content: "＋";
	margin-left: auto;
	color: var(--w51t-sub);
	font-size: 13px;
	line-height: 1;
}

.w51t-chip[open] > summary::after {
	content: "－";
}

.w51t-chip > summary:hover {
	background: var(--w51t-bg);
}

.w51t-chip > summary b {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--w51t-navy);
}

.w51t-chip-slug {
	font-size: 12.5px;
	color: var(--w51t-sub);
}

.w51t-chip-slug code {
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	border-radius: 5px;
	padding: 1px 6px;
	font-size: 12px;
	color: var(--w51t-navy);
}

.w51t-chip-body {
	padding: 0 15px 14px;
	border-top: 1px solid var(--w51t-line);
	background: var(--w51t-bg);
}

.w51t-chip-body-label {
	display: block;
	margin-top: 11px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--w51t-sub);
}

.w51t-chip-body .w51t-ev {
	margin-top: 7px;
}

.w51t-chip-body .w51t-ev-chip {
	background: #fff;
}

/* ---------- Tech signatures ---------- */

.w51t-plug {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}

.w51t-tech {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	background: #fff;
	min-width: 0;
}

.w51t-tech b {
	font-size: 14px;
	color: var(--w51t-navy);
	overflow-wrap: anywhere;
}

.w51t-tech span {
	font-size: 12px;
	font-weight: 600;
	color: var(--w51t-blue);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.w51t-tech em {
	font-size: 12px;
	font-style: normal;
	color: var(--w51t-sub);
	overflow-wrap: anywhere;
}

/* ---------- Key/value rows ---------- */

.w51t-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--w51t-line);
	font-size: 14px;
	flex-wrap: wrap;
}

.w51t-row:last-of-type {
	border-bottom: 0;
}

.w51t-row span {
	color: var(--w51t-sub);
	flex: 0 0 auto;
}

.w51t-row b {
	color: var(--w51t-navy);
	font-weight: 600;
	text-align: right;
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.w51t-warnline {
	margin: 12px 0 0;
	padding: 11px 14px;
	border-radius: 9px;
	background: rgba(181, 71, 8, .07);
	border: 1px solid rgba(181, 71, 8, .2);
	color: #7a3208;
	font-size: 13.5px;
}

/* ---------- Actions ---------- */

.w51t-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 24px;
	background: var(--w51t-bg);
	border-top: 1px solid var(--w51t-line);
}

.w51t-inline-actions {
	display: flex;
	gap: 16px;
	margin-top: 12px;
}

.w51t-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--w51t-blue);
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.w51t-link:hover {
	border-bottom-color: currentColor;
}

/* ---------- Disclaimer ---------- */

.w51t-disclaimer {
	margin: 18px 0 0;
	color: var(--w51t-sub);
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {

	.w51t-input-row {
		flex-wrap: wrap;
	}

	.w51t-input {
		flex-basis: 100%;
	}

	.w51t-btn {
		flex: 1 1 auto;
	}

	.w51t-overview {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.w51t-section,
	.w51t-actions {
		padding-left: 18px;
		padding-right: 18px;
	}

	.w51t-row {
		flex-direction: column;
		gap: 2px;
	}

	.w51t-row b {
		text-align: left;
	}
}

@media (max-width: 480px) {

	.w51t-overview {
		grid-template-columns: 1fr;
	}

	.w51t-plug {
		grid-template-columns: 1fr;
	}

	.w51t-chip > summary {
		flex-direction: column;
		gap: 4px;
	}
}

/* =====================================================================
   HTTP & SSL CHECKER — report blocks
   ===================================================================== */

.w51t-tool.is-busy .w51t-form {
	opacity: .72;
}

.w51h-tone-ok   { color: #067647; }
.w51h-tone-warn { color: #b54708; }
.w51h-tone-bad  { color: #b42318; }

/* ---------- Hero ---------- */

.w51h-hero {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	padding: 26px 24px;
	border-bottom: 1px solid var(--w51t-line);
	background: linear-gradient(180deg, #fbfdff, #fff);
}

.w51h-hero-status {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	flex: 1 1 420px;
}

.w51h-code {
	flex: 0 0 auto;
	min-width: 116px;
	padding: 14px 18px;
	border-radius: 12px;
	text-align: center;
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
}

.w51h-code.w51h-tone-ok {
	background: rgba(6, 118, 71, .08);
	color: #067647;
	box-shadow: inset 0 0 0 1px rgba(6, 118, 71, .22);
}

.w51h-code.w51h-tone-warn {
	background: rgba(217, 119, 6, .1);
	color: #b54708;
	box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .25);
}

.w51h-code.w51h-tone-bad {
	background: rgba(220, 38, 38, .08);
	color: #b42318;
	box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .22);
}

.w51h-hero-meta {
	min-width: 0;
}

.w51h-code-name {
	font-size: 19px;
	font-weight: 700;
	color: var(--w51t-navy);
	line-height: 1.3;
}

.w51h-code-class {
	font-size: 13.5px;
	color: var(--w51t-sub);
	font-weight: 600;
	margin-top: 2px;
}

.w51h-code-url {
	margin-top: 6px;
	font-size: 13px;
	color: var(--w51t-sub);
	overflow-wrap: anywhere;
}

.w51h-hero-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.w51h-grade {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 3px solid var(--w51t-line);
	background: #fff;
}

.w51h-grade b {
	font-size: 32px;
	line-height: 1;
	letter-spacing: -.02em;
}

.w51h-grade span {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--w51t-sub);
	margin-top: 3px;
}

.w51h-grade-ok {
	border-color: rgba(6, 118, 71, .45);
	color: #067647;
}

.w51h-grade-warn {
	border-color: rgba(217, 119, 6, .5);
	color: #b54708;
}

.w51h-grade-bad {
	border-color: rgba(220, 38, 38, .45);
	color: #b42318;
}

.w51h-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.w51h-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 99px;
	font-size: 12.5px;
	font-weight: 600;
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	color: var(--w51t-text);
}

.w51h-pill i {
	font-style: normal;
	font-weight: 600;
	color: var(--w51t-sub);
}

.w51h-pill-ok {
	background: rgba(6, 118, 71, .08);
	border-color: rgba(6, 118, 71, .22);
	color: #067647;
}

.w51h-pill-warn {
	background: rgba(217, 119, 6, .09);
	border-color: rgba(217, 119, 6, .24);
	color: #b54708;
}

.w51h-pill-bad {
	background: rgba(220, 38, 38, .08);
	border-color: rgba(220, 38, 38, .22);
	color: #b42318;
}

/* ---------- Cards ---------- */

.w51h-card {
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	border-radius: 12px;
	padding: 18px 20px;
}

.w51h-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.w51h-card-head b {
	font-size: 16px;
	color: var(--w51t-navy);
}

.w51h-code-sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 3px 9px;
	border-radius: 7px;
	font-weight: 800;
	font-size: 15px;
}

.w51h-code-sm.w51h-tone-ok   { background: rgba(6, 118, 71, .12); }
.w51h-code-sm.w51h-tone-warn { background: rgba(217, 119, 6, .14); }
.w51h-code-sm.w51h-tone-bad  { background: rgba(220, 38, 38, .12); }

.w51h-note {
	margin: 0;
	font-size: 14.5px;
	color: var(--w51t-text);
}

.w51h-advice {
	margin: 12px 0 0;
	padding: 12px 14px;
	background: #fff;
	border-left: 3px solid var(--w51t-blue);
	border-radius: 0 8px 8px 0;
	font-size: 14.5px;
	color: var(--w51t-text);
}

.w51h-advice span {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--w51t-blue);
	margin-bottom: 3px;
}

/* ---------- Redirect chain ---------- */

.w51h-chain {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.w51h-hop {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-left-width: 3px;
	border-radius: 10px;
}

.w51h-hop-ok   { border-left-color: #067647; }
.w51h-hop-warn { border-left-color: #d97706; }
.w51h-hop-bad  { border-left-color: #dc2626; }

.w51h-hop-index {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	font-size: 12px;
	font-weight: 700;
	color: var(--w51t-sub);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.w51h-hop-code {
	flex: 0 0 auto;
	min-width: 46px;
	font-weight: 800;
	font-size: 15px;
}

.w51h-hop-ok .w51h-hop-code   { color: #067647; }
.w51h-hop-warn .w51h-hop-code { color: #b54708; }
.w51h-hop-bad .w51h-hop-code  { color: #b42318; }

.w51h-hop-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.w51h-hop-url {
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
	color: var(--w51t-navy);
}

.w51h-hop-to {
	font-size: 13px;
	color: var(--w51t-blue);
	overflow-wrap: anywhere;
}

.w51h-hop-err {
	font-size: 13px;
	color: #b42318;
}

.w51h-hop-meta {
	font-size: 12px;
	color: var(--w51t-sub);
}

.w51h-hop-flags {
	flex: 0 0 auto;
}

.w51h-badge-ok {
	background: rgba(6, 118, 71, .1);
	color: #067647;
	border: 1px solid rgba(6, 118, 71, .25);
}

.w51h-badge-warn {
	background: rgba(217, 119, 6, .1);
	color: #b54708;
	border: 1px solid rgba(217, 119, 6, .25);
}

.w51h-badge-bad {
	background: rgba(220, 38, 38, .09);
	color: #b42318;
	border: 1px solid rgba(220, 38, 38, .22);
}

.w51h-phases {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.w51h-phase {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 8px;
	background: var(--w51t-bg);
	border: 1px solid var(--w51t-line);
	font-size: 13px;
	font-weight: 600;
}

.w51h-phase i {
	font-style: normal;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--w51t-sub);
}

/* ---------- Key / value grid ---------- */

.w51h-kv {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--w51t-line);
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	overflow: hidden;
}

.w51h-kv-row {
	background: #fff;
	padding: 11px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.w51h-kv-row span {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--w51t-sub);
}

.w51h-kv-row b {
	font-size: 14px;
	font-weight: 600;
	color: var(--w51t-navy);
	overflow-wrap: anywhere;
}

.w51h-kv-row code {
	font-size: 12.5px;
	background: var(--w51t-bg);
	border-radius: 5px;
	padding: 2px 6px;
	margin-right: 4px;
	display: inline-block;
}

.w51h-sans {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.w51h-sans-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--w51t-sub);
	margin-right: 4px;
}

.w51h-sans code {
	font-size: 12.5px;
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-radius: 6px;
	padding: 2px 7px;
}

.w51h-notes {
	margin: 14px 0 0;
	padding-left: 20px;
	color: #8c1d1d;
	font-size: 14px;
}

.w51h-notes li {
	margin-bottom: 3px;
}

/* ---------- Checks ---------- */

.w51h-score-line {
	margin-bottom: 14px;
	font-size: 14px;
	color: var(--w51t-sub);
}

.w51h-score-line b {
	color: var(--w51t-navy);
}

.w51h-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 10px;
}

.w51h-check {
	display: flex;
	gap: 11px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
}

.w51h-check-mark {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 800;
	margin-top: 2px;
}

.w51h-check-ok .w51h-check-mark {
	background: rgba(6, 118, 71, .12);
	color: #067647;
}

.w51h-check-warn .w51h-check-mark {
	background: rgba(217, 119, 6, .14);
	color: #b54708;
}

.w51h-check-bad .w51h-check-mark {
	background: rgba(220, 38, 38, .12);
	color: #b42318;
}

.w51h-check-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.w51h-check-body b {
	font-size: 14px;
	color: var(--w51t-navy);
}

.w51h-check-note {
	font-size: 13.5px;
	color: var(--w51t-sub);
}

.w51h-check-value {
	font-size: 12px;
	background: var(--w51t-bg);
	border-radius: 5px;
	padding: 3px 7px;
	overflow-wrap: anywhere;
	margin-top: 2px;
}

/* ---------- Findings ---------- */

.w51h-findings {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.w51h-finding {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 16px;
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-left-width: 3px;
	border-radius: 10px;
}

.w51h-finding b {
	font-size: 14.5px;
	color: var(--w51t-navy);
}

.w51h-finding span {
	font-size: 14px;
	color: var(--w51t-sub);
}

.w51h-finding-ok   { border-left-color: #067647; }
.w51h-finding-warn { border-left-color: #d97706; }
.w51h-finding-bad  { border-left-color: #dc2626; }
.w51h-finding-info { border-left-color: var(--w51t-blue); }

/* ---------- Header dump ---------- */

.w51h-subgroup {
	margin-bottom: 16px;
}

.w51h-subgroup h5 {
	margin: 0 0 8px;
	font-size: 13px
	;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--w51t-sub);
}

.w51h-raw {
	background: #fff;
	border: 1px solid var(--w51t-line);
	border-radius: 10px;
	overflow: hidden;
}

.w51h-raw > summary {
	cursor: pointer;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--w51t-navy);
	list-style: none;
}

.w51h-raw > summary::-webkit-details-marker {
	display: none;
}

.w51h-raw > summary::before {
	content: "▸ ";
	color: var(--w51t-blue);
}

.w51h-raw[open] > summary::before {
	content: "▾ ";
}

.w51h-raw pre {
	margin: 0;
	padding: 0 16px 16px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--w51t-text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 420px;
	overflow: auto;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 640px) {

	.w51h-hero {
		padding: 20px 16px;
	}

	.w51h-hero-side {
		align-items: flex-start;
	}

	.w51h-pills {
		justify-content: flex-start;
	}

	.w51h-code {
		min-width: 92px;
		font-size: 34px;
		padding: 12px 14px;
	}

	.w51h-checks {
		grid-template-columns: 1fr;
	}
}