/* Sentinel Audit tool — uses the marketing theme's CSS variables with fallbacks
   so it sits naturally inside a normal page. */
.sa-tool {
	--sa-blue: var(--blue, #3795fc);
	--sa-purple: var(--purple, #6f56da);
	--sa-border: var(--border, #e3e8ef);
	--sa-heading: var(--heading, #0f172a);
	--sa-body: var(--body, #475569);
	--sa-grey: var(--bg-grey, #f8fafc);
	--sa-ok: #16a34a;
	--sa-warn: #d97706;
	--sa-fail: #dc2626;
	max-width: 720px;
	margin: 0 auto;
}

/* Slim the theme's tall page hero on this page only (this stylesheet loads only
   where the shortcode is present), and tuck the card up under it. */
section.page-hero { padding: 50px 0 26px; }
section.page-hero + section.section { padding-top: 30px; }

/* Card shell */
.sa-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--sa-border);
	border-radius: 18px;
	padding: 32px 32px 28px;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07);
	margin-top: -26px;
	overflow: hidden;
}
.sa-card::before {
	content: '';
	position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--sa-blue), var(--sa-purple));
}

.sa-badge {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12px; font-weight: 600; color: var(--sa-blue);
	background: var(--sa-grey); border-radius: 24px; padding: 7px 14px;
	margin-bottom: 16px;
}
.sa-lead { font-size: 16px; line-height: 1.7; color: var(--sa-body); margin: 0 0 22px; }

/* Form */
.sa-form { margin-bottom: 4px; }
.sa-field-label { display: block; font-weight: 600; color: var(--sa-heading); margin-bottom: 8px; }
.sa-input-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-input {
	flex: 1 1 260px;
	padding: 14px 16px;
	font-size: 16px;
	border: 1px solid var(--sa-border);
	border-radius: 10px;
	outline: none;
}
.sa-input:focus { border-color: var(--sa-blue); box-shadow: 0 0 0 3px rgba(55, 149, 252, 0.15); }
.sa-submit { white-space: nowrap; }
.sa-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--sa-body); }
.sa-check input { margin-top: 3px; }

/* "What we check" footer row */
.sa-checks { border-top: 1px solid var(--sa-border); margin-top: 22px; padding-top: 18px; }
.sa-checks-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sa-body); margin-bottom: 11px; }
.sa-checks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sa-checks li {
	font-size: 13px; color: var(--sa-heading);
	background: var(--sa-grey); border: 1px solid var(--sa-border);
	border-radius: 8px; padding: 6px 11px;
}

/* Loading / notices */
.sa-results:empty { display: none; }
.sa-loading { display: flex; align-items: center; gap: 10px; padding: 18px 0; color: var(--sa-body); }
.sa-spinner {
	width: 18px; height: 18px; border-radius: 50%;
	border: 3px solid var(--sa-border); border-top-color: var(--sa-blue);
	animation: sa-spin 0.8s linear infinite; display: inline-block;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-notice { padding: 14px 16px; border-radius: 10px; margin: 16px 0 0; font-size: 15px; }
.sa-notice--warn { background: #fef3c7; color: #92400e; }
.sa-notice--ok { background: #dcfce7; color: #166534; }

/* Report head + grade badge */
.sa-report-head { display: flex; align-items: center; gap: 18px; margin: 20px 0; }
.sa-grade {
	width: 84px; height: 84px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: 800; flex: 0 0 auto;
}
.sa-grade-letter { font-size: 44px; line-height: 1; }
.sa-grade--A { background: #16a34a; }
.sa-grade--B { background: #65a30d; }
.sa-grade--C { background: #d97706; }
.sa-grade--D { background: #ea580c; }
.sa-grade--F { background: #dc2626; }
.sa-score { font-size: 28px; font-weight: 800; color: var(--sa-heading); }
.sa-score span { font-size: 16px; font-weight: 600; color: var(--sa-body); }
.sa-domain { color: var(--sa-body); font-size: 14px; word-break: break-all; }

/* Category rollup */
.sa-cats { list-style: none; margin: 0 0 8px; padding: 0; }
.sa-cat {
	display: grid; grid-template-columns: 14px 160px 1fr; align-items: center; gap: 12px;
	padding: 12px 4px; border-bottom: 1px solid var(--sa-border); font-size: 15px;
}
.sa-cat-dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; }
.sa-cat--ok .sa-cat-dot { background: var(--sa-ok); }
.sa-cat--warn .sa-cat-dot { background: var(--sa-warn); }
.sa-cat--fail .sa-cat-dot { background: var(--sa-fail); }
.sa-cat-label { font-weight: 600; color: var(--sa-heading); }
.sa-cat-headline { color: var(--sa-body); }

/* Email gate */
.sa-gate { margin-top: 22px; padding: 20px; background: var(--sa-grey); border-radius: 14px; }
.sa-gate-lead { margin: 0 0 12px; color: var(--sa-heading); }
.sa-email-form { display: flex; gap: 10px; flex-wrap: wrap; }
.sa-email-form .sa-input { flex: 1 1 220px; }
.sa-fineprint { margin: 10px 0 0; font-size: 12px; color: var(--sa-body); opacity: 0.8; }

/* Full findings */
.sa-findings { list-style: none; margin: 18px 0 0; padding: 0; }
.sa-finding { padding: 14px; border: 1px solid var(--sa-border); border-left-width: 4px; border-radius: 8px; margin-bottom: 10px; }
.sa-finding--critical { border-left-color: var(--sa-fail); }
.sa-finding--warning { border-left-color: var(--sa-warn); }
.sa-finding--info { border-left-color: var(--sa-blue); }
.sa-finding-title { font-weight: 600; color: var(--sa-heading); }
.sa-sev { text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 4px; background: #f1f5f9; color: var(--sa-body); }
.sa-cve { font-size: 12px; color: var(--sa-body); font-weight: 500; }
.sa-finding-detail { margin-top: 6px; font-size: 14px; color: var(--sa-body); }
.sa-finding-fix { margin-top: 6px; font-size: 14px; color: var(--sa-heading); }

@media (max-width: 560px) {
	.sa-card { padding: 24px 20px; }
	.sa-cat { grid-template-columns: 14px 1fr; }
	.sa-cat-headline { grid-column: 2; }
}