/* Tools page and the preview-then-run tool pages: cards and colours as on the
   Dashboard (colours and section headings in admin-pages.css). */

.spar-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 16px;
	max-width: 80rem;
}

.spar-tool-card {
	display: flex;
	gap: 14px;
	padding: 18px 20px 20px;
	background: #ffffff;
	border: 1px solid var(--spar-admin-line);
	border-radius: var(--spar-admin-radius);
	box-shadow: var(--spar-admin-shadow);
}

.spar-tool-card__icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	font-size: 18px;
	line-height: 38px;
	text-align: center;
	color: var(--spar-admin-accent-2);
	background: var(--spar-admin-accent-soft);
	border-radius: 11px;
}

.spar-tool-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.spar-admin-page .spar-tool-card__title {
	margin: 0.5rem 0 0.375rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--spar-admin-ink);
}

.spar-tool-card__description {
	flex: 1 1 auto;
	margin: 0 0 1rem;
	color: var(--spar-admin-muted);
}


/* Preview-then-run tool pages */
.spar-tool-job-intro {
	max-width: 50rem;
	color: var(--spar-admin-muted);
}

/* The settings, and the preview or result below them, sit on cards. */
.spar-admin-page .spar-tool-job-form,
.spar-admin-page .spar-tool-job-summary {
	max-width: 60rem;
	box-sizing: border-box;
	padding: 4px 24px 8px;
	background: #ffffff;
	border: 1px solid var(--spar-admin-line);
	border-radius: var(--spar-admin-radius);
	box-shadow: var(--spar-admin-shadow);
}

.spar-admin-page .spar-tool-job-summary {
	padding-bottom: 20px;
}

.spar-admin-page .spar-tool-job-summary .widefat {
	box-shadow: none;
}

.spar-tool-job-summary h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--spar-admin-ink);
}

.spar-tool-job-status:empty {
	display: none;
}

.spar-tool-job-status--error {
	color: var(--spar-admin-red);
}

.spar-tool-job-status--warning {
	color: var(--spar-admin-amber);
}

.spar-tool-job-summary {
	margin-top: 1rem;
}

.spar-tool-job-stats,
.spar-tool-job-sample {
	max-width: 44rem;
}

.spar-tool-job-stats th {
	width: 50%;
	font-weight: 600;
}

.spar-tool-job-reasons {
	margin: 0.5rem 0 0 1.25rem;
	list-style: disc;
}

.spar-tool-job-notice {
	max-width: 44rem;
	padding: 10px 14px;
	color: #6b4500;
	background: var(--spar-admin-amber-soft);
	border: 1px solid #f1dcb1;
	border-radius: 10px;
}

.spar-tool-job-sample td {
	word-break: break-word;
}

.spar-tool-job-undo {
	max-width: 60rem;
	box-sizing: border-box;
	margin-top: 2rem;
	padding: 18px 24px 20px;
	background: #ffffff;
	border: 1px solid var(--spar-admin-line);
	border-radius: var(--spar-admin-radius);
	box-shadow: var(--spar-admin-shadow);
}

.spar-tool-job-undo h2 {
	margin-top: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--spar-admin-ink);
}