/* =========================================================
   PROFILKOLL
   =========================================================
   Analysen ar sajtens leadmagnet. Den ska se ut som ett
   verktyg, inte som en annons: lugna ytor, tabulara siffror
   och inga larmfarger.

   BETYGSFARGEN BAR ALDRIG INFORMATIONEN ENSAM. Bokstaven och
   poangen star alltid utskrivna bredvid, vilket ar kravet i
   WCAG 1.4.1.
   ========================================================= */

.ca-pk { max-width: 62rem; margin-inline: auto; }

/* ---- Formularet ---- */
.ca-pk__falt { display: block; }

.ca-pk__etikett {
	display: block;
	font-size: var(--ca-text-xs);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ca-ink-dampad);
	margin-block-end: var(--ca-rum-3);
}

.ca-pk__rad {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ca-rum-2);
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie);
	padding: var(--ca-rum-2);
}

.ca-pk__prefix {
	display: flex;
	align-items: center;
	padding-inline: var(--ca-rum-3);
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
	white-space: nowrap;
}

.ca-pk__input {
	flex: 1 1 12rem;
	min-width: 0;
	min-height: var(--ca-traffyta);
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--ca-text-bas);
	color: var(--ca-ink);
	padding-inline: 0;
}

.ca-pk__input:focus { outline: none; }

.ca-pk__rad:focus-within {
	border-color: var(--ca-brand);
	box-shadow: 0 0 0 3px rgba(177, 72, 125, .15);
}

.ca-pk__hjalp {
	margin-block-start: var(--ca-rum-3);
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
}

/* ---- Lagen ---- */
.ca-pk__fel {
	margin-block-start: var(--ca-rum-5);
	padding: var(--ca-rum-4) var(--ca-rum-5);
	border-inline-start: 3px solid var(--ca-fel);
	background: var(--ca-surface);
	font-size: var(--ca-text-sm);
}

.ca-pk__laddar {
	margin-block-start: var(--ca-rum-5);
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
}

.ca-pk__resultat { margin-block-start: var(--ca-rum-8); }

/* ---- Resultatkortet ---- */
.ca-pk__kort {
	display: grid;
	gap: var(--ca-rum-8);
	background: var(--ca-white);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie-stor);
	padding: var(--ca-rum-6);
	box-shadow: var(--ca-skugga);
}

@media (min-width: 800px) {
	.ca-pk__kort { grid-template-columns: 14rem 1fr; }
}

.ca-pk__profil { text-align: center; }

.ca-pk__avatar {
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ca-line);
}

.ca-pk__namn {
	margin-block: var(--ca-rum-3) var(--ca-rum-5);
	font-weight: 600;
	font-size: var(--ca-text-sm);
	overflow-wrap: anywhere;
}

.ca-pk__betyg {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	padding: var(--ca-rum-4) var(--ca-rum-6);
	border-radius: var(--ca-radie-stor);
	border: 1px solid var(--ca-line);
	background: var(--ca-surface);
}

.ca-pk__bokstav {
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ca-pk__poang {
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
	font-variant-numeric: tabular-nums;
}

.ca-pk__betyg--bra { border-color: var(--ca-ok); }
.ca-pk__betyg--bra .ca-pk__bokstav { color: var(--ca-ok); }
.ca-pk__betyg--ok { border-color: var(--ca-brass); }
.ca-pk__betyg--ok .ca-pk__bokstav { color: var(--ca-brass); }
.ca-pk__betyg--svag { border-color: var(--ca-fel); }
.ca-pk__betyg--svag .ca-pk__bokstav { color: var(--ca-fel); }

/* ---- Stjarnbetyget ----
   Helhetsbetyget en gang till, i den form en besokare laser utan att
   lasa. Se betygsstjarnor() i profilkoll.js.

   ⚠️ FARGEN AR --ca-brass OCH INTE EN GUL. tokens.css sager rakt ut att
   guld aldrig far bli en gradient, for det ar kategorins mest slitna
   grepp. Brass ar samma signal utan den slitna ytan, ligger i paletten,
   och mater 4,55:1 mot bakgrunden. */

/*
 * Ligger sist i nedbrytningen och fyller ytan under staplarna. Storre
 * an forsta forsoket under betygsrutan, dar de blev sma och forsvann
 * mot rutans kant. Fem stjarnor i den har storleken ar det forsta ogat
 * hittar i hoger kolumn, vilket ar meningen.
 */
.ca-pk__kvalitet {
	margin-block-start: var(--ca-rum-6);
	padding-block-start: var(--ca-rum-5);
	border-block-start: 1px solid var(--ca-line);
}

/* Samma form som de andra gruppubrikerna i kortet, sa att den laser som
   en till sektion och inte som en reklamruta. */
.ca-pk__kvalitet-rubrik {
	margin: 0 0 var(--ca-rum-3);
	font-size: var(--ca-text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ca-ink-dampad);
}

.ca-pk__stjarnbetyg {
	display: flex;
	gap: .1em;
	font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
	line-height: 1;
}

.ca-pk__kvalitet-hook {
	margin-block: var(--ca-rum-4) var(--ca-rum-4);
	font-size: var(--ca-text-sm);
	line-height: var(--ca-radhojd);
	color: var(--ca-ink);
	max-width: 42ch;
}

.ca-pk__kvalitet-hook strong { font-weight: 700; }

/*
 * ⚠️ Sekundar knapp, inte primar. Den primara pa skarmen ar Send i
 * formularet den leder till. Tva fyllda knappar hade tavlat, och den
 * har ar en vagvisare och inte malet.
 */
.ca-pk__kvalitet-cta {
	appearance: none;
	min-height: var(--ca-traffyta);
	border: 1px solid var(--ca-brand);
	background: var(--ca-white);
	color: var(--ca-brand-stark);
	border-radius: var(--ca-radie);
	padding-inline: var(--ca-rum-5);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.ca-pk__kvalitet-cta:hover,
.ca-pk__kvalitet-cta:focus-visible {
	background: var(--ca-brand);
	color: var(--ca-ink-invers);
}

.ca-pk__kvalitet-not {
	margin-block: var(--ca-rum-3) 0;
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
}

.ca-pk__stjarna {
	color: var(--ca-line);
	transition: transform .18s ease;
}

.ca-pk__stjarna.ar-fylld { color: var(--ca-brass); }

/*
 * Stjarnorna tands en i taget vid inladdning. Det ar hela poangen med
 * dem: samma siffra, men med en liten belonande rorelse i stallet for
 * ett stillastaende tal.
 */
@media (prefers-reduced-motion: no-preference) {
	.ca-pk__stjarna.ar-fylld {
		animation: ca-pk-stjarna .34s ease-out both;
	}

	.ca-pk__stjarna.ar-fylld:nth-child(2) { animation-delay: .09s; }
	.ca-pk__stjarna.ar-fylld:nth-child(3) { animation-delay: .18s; }
	.ca-pk__stjarna.ar-fylld:nth-child(4) { animation-delay: .27s; }
	.ca-pk__stjarna.ar-fylld:nth-child(5) { animation-delay: .36s; }
}

@keyframes ca-pk-stjarna {
	0%   { transform: scale(.4); opacity: 0; }
	60%  { transform: scale(1.18); opacity: 1; }
	100% { transform: scale(1); opacity: 1; }
}

/* ---- Siffrorna ---- */
.ca-pk__data {
	display: grid;
	gap: var(--ca-rum-6);
}

@media (min-width: 620px) {
	.ca-pk__data { grid-template-columns: repeat(2, 1fr); }
}

.ca-pk__grupp h4 {
	margin: 0 0 var(--ca-rum-3);
	font-size: var(--ca-text-xs);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ca-ink-dampad);
	font-weight: 600;
}

.ca-pk__rad-data {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--ca-rum-3);
	padding-block: var(--ca-rum-2);
	border-block-end: 1px solid var(--ca-line);
	font-size: var(--ca-text-sm);
}

.ca-pk__rad-data:last-child { border-block-end: 0; }
.ca-pk__rad-data span { color: var(--ca-ink-dampad); }
.ca-pk__rad-data strong { font-variant-numeric: tabular-nums; }

/* ---- Staplarna ---- */
.ca-pk__matt {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .2rem var(--ca-rum-3);
	padding-block: var(--ca-rum-2);
	font-size: var(--ca-text-sm);
}

.ca-pk__matt-namn { color: var(--ca-ink-dampad); }
.ca-pk__matt-varde { font-weight: 600; font-variant-numeric: tabular-nums; }
.ca-pk__matt-varde small { color: var(--ca-ink-dampad); font-weight: 400; }

.ca-pk__matt-tom {
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
	font-style: italic;
}

.ca-pk__spar {
	grid-column: 1 / -1;
	height: 5px;
	border-radius: 3px;
	background: var(--ca-surface-3);
	overflow: hidden;
}

.ca-pk__fyll {
	display: block;
	height: 100%;
	background: var(--ca-brand);
	border-radius: 3px;
}

/* ---- Noterna ---- */
.ca-pk__noter {
	margin-block-start: var(--ca-rum-6);
	padding: var(--ca-rum-6);
	background: var(--ca-surface);
	border-radius: var(--ca-radie-stor);
	border: 1px solid var(--ca-line);
}

.ca-pk__noter h4 {
	margin: 0 0 var(--ca-rum-3);
	font-size: var(--ca-text-lg);
}

.ca-pk__noter ul {
	margin: 0;
	padding-inline-start: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-3);
	font-size: var(--ca-text-sm);
	line-height: 1.55;
}

.ca-pk__fotnot {
	margin-block-start: var(--ca-rum-4);
	font-size: var(--ca-text-xs);
	color: var(--ca-ink-dampad);
}

/* ---- Uppfoljningen, dar samtycket ligger ----
   Ligger EFTER analysen med flit. Att krava en kryssruta innan
   besokaren fatt nagot skrammer bort halften. */
.ca-pk__folj {
	margin-block-start: var(--ca-rum-8);
	padding: var(--ca-rum-6);
	border: 1px solid var(--ca-brand);
	border-radius: var(--ca-radie-stor);
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-4);
}

.ca-pk__folj h4 { margin: 0; font-size: var(--ca-text-xl); }

.ca-pk__folj p {
	margin: 0;
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
	max-width: 52ch;
}

.ca-pk__folj-falt {
	display: flex;
	flex-direction: column;
	gap: var(--ca-rum-2);
	max-width: 28rem;
}

.ca-pk__folj-falt span { font-size: var(--ca-text-xs); font-weight: 600; }

.ca-pk__folj-falt input {
	min-height: var(--ca-traffyta);
	padding: var(--ca-rum-2) var(--ca-rum-4);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie);
	font: inherit;
	font-size: var(--ca-text-sm);
	background: var(--ca-white);
	color: var(--ca-ink);
}

.ca-pk__kryss {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ca-rum-3);
	align-items: start;
	font-size: var(--ca-text-sm);
	line-height: 1.5;
	max-width: 52ch;
}

.ca-pk__kryss input {
	width: 1.15rem;
	height: 1.15rem;
	margin-block-start: .18rem;
}

.ca-pk__folj button { align-self: flex-start; }

.ca-pk__folj-fel {
	color: var(--ca-fel);
	font-size: var(--ca-text-sm);
	font-weight: 600;
}

.ca-pk__tack {
	margin: 0;
	font-size: var(--ca-text-bas);
	line-height: 1.55;
}

/* Faltet ligger tatt under rubriken. Sektionen hade tidigare
   eyebrow, rubrik, ingress, faltetikett OCH hjalptext runt ett
   enda inmatningsfalt. Fyra av dem sa samma sak. */
.ca-pk-wrap { margin-block-start: var(--ca-rum-6); }

/* I en centrerad sektion foljer verktyget med och centreras.
   Hjalpraden och felrutan centreras dock BARA som text, inte som
   block: felrutan har en fargad kantlinje i vanster kant som bar
   betydelse, och den ska ligga kvar dar. */
.ca-s--mitt .ca-pk,
.ca-s--rubrikmitt .ca-pk { margin-inline: auto; }
.ca-s--mitt .ca-pk__hjalp { text-align: center; }
.ca-s--mitt .ca-pk__fel,
.ca-s--mitt .ca-pk__kort,
.ca-s--mitt .ca-pk__noter,
.ca-s--mitt .ca-pk__folj { text-align: start; }

/* ---- Plattformsvaljaren ----
   Ligger inuti samma ram som faltet, sa att hela raden last som
   EN kontroll. En separat select ovanfor hade last som tva steg,
   och det ar ett steg for mycket for nagot som ska ta tio
   sekunder. */
.ca-pk__valj {
	position: relative;
	display: flex;
	align-items: center;
	border-inline-end: 1px solid var(--ca-line);
	padding-inline-end: var(--ca-rum-2);
}

.ca-pk__valj select {
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--ca-text-sm);
	font-weight: 600;
	color: var(--ca-ink);
	min-height: var(--ca-traffyta);
	padding-inline: var(--ca-rum-3) 1.6rem;
	cursor: pointer;
}

/* Pilen ritas med CSS i stallet for en bild, sa att den foljer
   textfargen och inte behover en extra fil. */
.ca-pk__valj::after {
	content: "";
	position: absolute;
	inset-inline-end: .55rem;
	width: .45rem;
	height: .45rem;
	border-inline-end: 2px solid var(--ca-ink-dampad);
	border-block-end: 2px solid var(--ca-ink-dampad);
	transform: translateY(-.15em) rotate(45deg);
	pointer-events: none;
}

.ca-pk__valj select:focus-visible {
	outline: 2px solid var(--ca-brand);
	outline-offset: 2px;
	border-radius: var(--ca-radie);
}

/* Prefixet byts nar plattformen byts. Ar det tomt, som for
   Google, tas hela utrymmet bort i stallet for att lamna ett
   halt hal. */
.ca-pk__prefix:empty { display: none; }

/* Google-resultatet visar stjarnbetyg i stallet for foljare.
   Siffran bar informationen, stjarnorna forstarker den. */
.ca-pk__stjarnor {
	font-size: var(--ca-text-sm);
	color: var(--ca-brass);
	letter-spacing: .1em;
}

@media (max-width: 34rem) {
	.ca-pk__valj {
		border-inline-end: 0;
		border-block-end: 1px solid var(--ca-line);
		width: 100%;
	}
}

/* ---- Vad vi rekommenderar ----
   Skiljer sig visuellt fran noterna ovanfor, eftersom det ar det enda
   stallet i analysen dar vi vill att nagon klickar. Ramen ar i
   varumarkesfargen, resten av analysen ar neutral. */
.ca-pk__forslag {
	margin-block-start: var(--ca-rum-6);
	padding: var(--ca-rum-6);
	border: 1px solid var(--ca-brand);
	border-radius: var(--ca-radie-stor);
	background: var(--ca-white);
}

.ca-pk__forslag h4 {
	margin: 0 0 var(--ca-rum-3);
	font-size: var(--ca-text-lg);
}

.ca-pk__forslag-varfor {
	margin: 0;
	font-size: var(--ca-text-sm);
	line-height: 1.55;
	max-width: 62ch;
	color: var(--ca-ink);
}

.ca-pk__forslag-rad {
	display: grid;
	gap: var(--ca-rum-3);
	margin-block-start: var(--ca-rum-5);
}

@media (min-width: 34rem) {
	.ca-pk__forslag-rad { grid-template-columns: repeat(2, 1fr); }
}

.ca-pk__forslag-kort {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: var(--ca-rum-4) var(--ca-rum-5);
	border: 1px solid var(--ca-line);
	border-radius: var(--ca-radie);
	background: var(--ca-surface);
	color: var(--ca-ink);
	min-height: var(--ca-traffyta);
}

.ca-pk__forslag-kort:hover,
.ca-pk__forslag-kort:focus-visible {
	border-color: var(--ca-brand);
	background: var(--ca-surface-2);
}

.ca-pk__forslag-titel { font-weight: 600; font-size: var(--ca-text-sm); }

.ca-pk__forslag-pris {
	font-size: var(--ca-text-bas);
	font-weight: 700;
	color: var(--ca-brand-stark);
	font-variant-numeric: tabular-nums;
}

/* Ingen kopruta alls ar ett giltigt svar. Da bar rutan bara texten,
   och ska inte se ut som om nagot gick sonder. */
.ca-pk__forslag-rad:empty { display: none; }

/* Vagen in i konfiguratorn, under forslagskorten. En lank och inte en
   knapp: forslaget ar en slutsats, inte en uppmaning, och en stor knapp
   dar hade gjort hela analysen till en annons. */
.ca-pk__forslag-bygg {
	display: inline-block;
	margin-block-start: var(--ca-rum-4);
	font-weight: 600;
	color: var(--ca-brand-stark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ca-pk__forslag-bygg::after { content: " 92"; }

/* ---- En styrka och ett nasta steg ----
   Ersatter betygsrutan, de fem stjarnorna och talet av hundra. Se
   inc/profilkoll-framat.php for varfor. Styrkan forst, steget sedan. */

.ca-pk__framat {
	display: grid;
	gap: var(--ca-rum-3);
	margin-block-start: var(--ca-rum-5);
	padding: var(--ca-rum-5);
	border-radius: var(--ca-radie-stor);
	background: var(--ca-surface-2, #F7F1F4);
}

.ca-pk__framat p { margin: 0; }

.ca-pk__framat-etikett {
	display: block;
	margin-block-end: var(--ca-rum-1);
	font-size: var(--ca-text-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ca-ink-dampad);
}

/* Styrkan bar en gron kant, steget en i varumarkets farg. Ingen rod:
   nasta steg ar inte ett fel. */
.ca-pk__framat-styrka {
	padding-inline-start: var(--ca-rum-4);
	border-inline-start: 4px solid var(--ca-ok, #1E6B40);
}

.ca-pk__framat-steg {
	padding-inline-start: var(--ca-rum-4);
	border-inline-start: 4px solid var(--ca-brand);
}

/* Det vi inte kunde mata. Ingen kant: det ar varken en styrka eller ett
   steg, bara en upplysning om vad matningen inte nadde. */
.ca-pk__framat-omatt {
	font-size: var(--ca-text-sm);
	color: var(--ca-ink-dampad);
}

/* ---- Vantans tre steg ----
   Labor illusion: visa arbetet som utfors. Se profilkoll-rest.php. */

.ca-pk__steg {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--ca-rum-2);
}

.ca-pk__steg-rad {
	display: flex;
	align-items: center;
	gap: var(--ca-rum-3);
	color: var(--ca-ink-dampad);
	opacity: .45;
	transition: opacity .25s ease;
}

/* Punkten framfor raden: tom, pulserande, sedan ifylld. */
.ca-pk__steg-rad::before {
	content: "";
	flex: none;
	inline-size: .7rem;
	block-size: .7rem;
	border: 2px solid currentColor;
	border-radius: 999px;
}

.ca-pk__steg-rad.ar-igang {
	opacity: 1;
	color: var(--ca-ink);
}

.ca-pk__steg-rad.ar-igang::before {
	background: var(--ca-brand);
	border-color: var(--ca-brand);
	animation: ca-pk-puls 1.1s ease-in-out infinite;
}

.ca-pk__steg-rad.ar-klar {
	opacity: 1;
	color: var(--ca-ink-dampad);
}

.ca-pk__steg-rad.ar-klar::before {
	background: var(--ca-ok, #1E6B40);
	border-color: var(--ca-ok, #1E6B40);
}

@keyframes ca-pk-puls {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.35); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	.ca-pk__steg-rad.ar-igang::before { animation: none; }
}