/**
 * Kompeaa ATS Checker — styled as its own polished card rather than
 * bare form controls. Loaded standalone (doesn't depend on
 * builder.css), so .kompeaa-loading/.kompeaa-error are redefined
 * here rather than assumed from another stylesheet.
 */

.kompeaa-loading, .kompeaa-error { padding: 24px; text-align: center; color: #666; }
.kompeaa-error { color: #b32d2e; }

.kompeaa-ats-app {
	max-width: 720px;
	margin: 32px auto;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--kompeaa-brand-border, #e2e2e2);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.kompeaa-ats-app > h2 {
	margin: 0 0 20px;
	color: var(--kompeaa-brand-secondary, #1f2a44);
	font-size: 22px;
}

.kompeaa-field {
	display: block;
	font-weight: 600;
	color: var(--kompeaa-brand-secondary, #1f2a44);
	margin-bottom: 20px;
	font-size: 14px;
}

.kompeaa-field select,
.kompeaa-field textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--kompeaa-brand-border, #e2e2e2);
	border-radius: 6px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	background: #fff;
}

.kompeaa-field select:focus,
.kompeaa-field textarea:focus {
	outline: none;
	border-color: var(--kompeaa-brand-primary, #0f766e);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.kompeaa-field textarea { resize: vertical; min-height: 120px; }

#kompeaa-run-check {
	display: block;
	width: 100%;
	padding: 14px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	border: none;
	background: var(--kompeaa-brand-primary, #0f766e);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
#kompeaa-run-check:hover { background: var(--kompeaa-brand-primary-dark, #0b5a54); }

#kompeaa-ats-results { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--kompeaa-brand-border, #e2e2e2); }
#kompeaa-ats-results > h3 {
	font-size: 15px;
	color: var(--kompeaa-brand-secondary, #1f2a44);
	margin: 20px 0 10px;
}

.kompeaa-ats-score { display: flex; flex-direction: column; align-items: center; margin: 4px 0 24px; }
.kompeaa-score-circle {
	width: 120px; height: 120px; border-radius: 50%; border: 8px solid var(--kompeaa-brand-primary, #0f766e);
	display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: var(--kompeaa-brand-secondary, #1f2a44);
	transition: border-color 0.2s ease;
}
.kompeaa-score-circle span { font-size: 14px; font-weight: 400; margin-left: 2px; color: #888; }
.kompeaa-score-label { margin-top: 10px; font-size: 13px; font-weight: 600; color: #888; text-align: center; text-transform: uppercase; letter-spacing: 0.03em; }

/* Score-quality color coding — same red/amber/green vocabulary as the formatting badge below */
.kompeaa-score-good  { border-color: #1e7e34; }
.kompeaa-score-fair  { border-color: #9a6700; }
.kompeaa-score-poor  { border-color: #b32d2e; }

.kompeaa-score-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 20px 0; font-size: 14px; }
.kompeaa-breakdown-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 12px; background: var(--kompeaa-brand-bg-soft, #fafafa); border-radius: 6px;
}
.kompeaa-breakdown-row span:last-child { font-weight: 700; color: var(--kompeaa-brand-secondary, #1f2a44); }

.kompeaa-formatting-status { display: inline-block; padding: 8px 14px; border-radius: 20px; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.kompeaa-status-pass { background: #e6f4ea; color: #1e7e34; }
.kompeaa-status-warning { background: #fff4e5; color: #9a6700; }
.kompeaa-status-fail { background: #fdecea; color: #b32d2e; }

.kompeaa-keyword-list { list-style: none; padding: 0; margin: 0 0 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kompeaa-keyword-list li { padding: 5px 12px; border-radius: 14px; font-size: 13px; font-weight: 600; }
.kompeaa-matched li { background: #e6f4ea; color: #1e7e34; }
.kompeaa-missing li { background: #fff4e5; color: #9a6700; }

.kompeaa-suggestions { list-style: none; padding: 0; margin: 0; }
.kompeaa-suggestions li {
	position: relative;
	padding: 8px 0 8px 24px;
	font-size: 14px;
	line-height: 1.5;
	border-bottom: 1px solid var(--kompeaa-brand-bg-soft, #fafafa);
}
.kompeaa-suggestions li:last-child { border-bottom: none; }
.kompeaa-suggestions li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--kompeaa-brand-primary, #0f766e);
	font-weight: 700;
}

.kompeaa-disclaimer { font-size: 12px; color: #999; margin-top: 20px; font-style: italic; text-align: center; }