/* AI-færdigheder Værktøj – widgets (fremdrift + risikovurdering) */

.afv-widget-body {
	--afv-w-accent: #0b3d5c;
	--afv-w-accent-light: #e8f1f7;
	--afv-w-border: #d7dee3;
	--afv-w-muted: #5b6b74;
	--afv-w-ok: #1a7a4c;
	--afv-w-ok-bg: #e2f4ea;
	--afv-w-warn: #b25400;
	--afv-w-warn-bg: #fdf0dc;
	--afv-w-danger: #b3261e;
	--afv-w-danger-bg: #fbe4e2;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.9rem;
	color: #1c2b33;
	max-width: 100%;
}

.afv-w-loading {
	color: var(--afv-w-muted);
	font-size: 0.85rem;
	margin: 0;
}

/* Kort, dæmpet "puls", der viser at widgetten lige har opdateret sig selv
   live (fra en anden fane/enhed eller fra selve værktøjet på samme side). */
@keyframes afv-w-flash {
	0%   { background-color: var(--afv-w-accent-light); }
	100% { background-color: transparent; }
}

.afv-w-flash {
	animation: afv-w-flash 900ms ease-out;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	.afv-w-flash {
		animation: none;
	}
	.afv-w-progress__bar {
		transition: none;
	}
}

/* Fremdrift */
.afv-w-progress__bar-wrap {
	background: var(--afv-w-border);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	margin-bottom: 0.5rem;
}

.afv-w-progress__bar {
	background: var(--afv-w-accent);
	height: 100%;
	transition: width 0.4s ease;
}

.afv-w-progress__label {
	font-size: 0.82rem;
	color: var(--afv-w-muted);
	margin: 0 0 0.7rem;
}

/* Risiko */
.afv-w-badge {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 0.55rem;
}

.afv-w-badge--low {
	background: var(--afv-w-ok-bg);
	color: var(--afv-w-ok);
}

.afv-w-badge--medium {
	background: var(--afv-w-warn-bg);
	color: var(--afv-w-warn);
}

.afv-w-badge--high {
	background: var(--afv-w-danger-bg);
	color: var(--afv-w-danger);
}

.afv-w-risk__meta,
.afv-w-risk__empty {
	font-size: 0.82rem;
	color: var(--afv-w-muted);
	margin: 0 0 0.7rem;
}

/* Fælles link */
.afv-w-link {
	display: inline-block;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--afv-w-accent);
	text-decoration: none;
}

.afv-w-link:hover {
	text-decoration: underline;
}