@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,500&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   Valkompassen 2026
   Editorial newspaper-aesthetik. Mobile-first.
   ========================================================================== */

.alxvk-app {
	--alxvk-bg: #ffffff;
	--alxvk-surface: #ffffff;
	--alxvk-ink: #303030;
	--alxvk-ink-soft: #555555;
	--alxvk-muted: #888888;
	--alxvk-rule: #e5e5e5;
	--alxvk-accent: #0f4c5c;
	--alxvk-accent-hover: #1a6b80;
	--alxvk-accent-soft: rgba(15, 76, 92, 0.08);
	--alxvk-success: #2d6a3e;
	--alxvk-warn: #b8451f;

	--alxvk-font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
	--alxvk-font-body: 'Inter Tight', 'Helvetica Neue', 'Helvetica', sans-serif;
	--alxvk-font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

	box-sizing: border-box;
	width: 100%;
	margin: 32px 0;
	padding: 36px 32px 44px;
	color: var(--alxvk-ink);
	font-family: var(--alxvk-font-body);
	font-size: 17px;
	line-height: 1.55;
	background: #fafbfc;
	border: 1px solid var(--alxvk-rule);
	border-top: 4px solid var(--alxvk-accent);
	border-radius: 6px;
	letter-spacing: -0.005em;
}

@media (max-width: 600px) {
	.alxvk-app {
		padding: 24px 18px 32px;
		border-radius: 4px;
		margin: 24px -8px;
	}
}

.alxvk-app *,
.alxvk-app *::before,
.alxvk-app *::after {
	box-sizing: border-box;
}

.alxvk-app a {
	color: var(--alxvk-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ===== Eyebrow + headlines ===== */

.alxvk-eyebrow {
	font-family: var(--alxvk-font-mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--alxvk-muted);
	margin: 0 0 16px;
	font-weight: 500;
}

.alxvk-headline {
	font-family: var(--alxvk-font-display);
	font-size: clamp(32px, 7vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--alxvk-ink);
	margin: 0 0 20px;
}

.alxvk-deck {
	font-size: clamp(18px, 2.8vw, 22px);
	line-height: 1.45;
	color: var(--alxvk-ink-soft);
	margin: 0 0 32px;
	max-width: 56ch;
}

.alxvk-section-title {
	font-family: var(--alxvk-font-display);
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0 0 8px;
	color: var(--alxvk-ink);
}

.alxvk-section-deck {
	color: var(--alxvk-ink-soft);
	margin: 0 0 24px;
	font-size: 16px;
}

/* ===== Intro / start ===== */

.alxvk-intro,
.alxvk-challenge-intro {
	padding: 24px 0;
}

.alxvk-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0 0 32px;
	padding: 16px 0;
	border-top: 1px solid var(--alxvk-rule);
	border-bottom: 1px solid var(--alxvk-rule);
	font-size: 14px;
	color: var(--alxvk-ink-soft);
}

.alxvk-meta strong {
	font-weight: 600;
	color: var(--alxvk-ink);
}

.alxvk-prequiz {
	background: var(--alxvk-surface);
	border: 1px solid var(--alxvk-rule);
	padding: 24px;
	margin: 0 0 24px;
}

.alxvk-prequiz-label {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--alxvk-muted);
	font-family: var(--alxvk-font-mono);
	letter-spacing: 0.05em;
}

/* Rutnätet med alla frågor: 1 kolumn på mobil, 2 på medium, 3 på desktop */
.alxvk-prequiz-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
}

@media (min-width: 600px) {
	.alxvk-prequiz-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 20px;
	}
}

@media (min-width: 900px) {
	.alxvk-prequiz-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.alxvk-prequiz-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.alxvk-prequiz-row label {
	font-weight: 500;
	font-size: 14px;
	color: var(--alxvk-ink-soft);
}

.alxvk-select {
	height: 44px !important;
	line-height: 44px !important;
	padding: 0 32px 0 12px !important;
	border: 1px solid var(--alxvk-rule) !important;
	background: var(--alxvk-bg) !important;
	font-family: var(--alxvk-font-body) !important;
	font-size: 15px !important;
	color: var(--alxvk-ink) !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	width: 100% !important;
	border-radius: 0 !important;
}

.alxvk-fineprint {
	font-size: 13px;
	color: var(--alxvk-muted);
	margin: 16px 0 0;
}

/* ===== Buttons ===== */

.alxvk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 24px;
	border: 1px solid var(--alxvk-ink);
	background: var(--alxvk-ink);
	color: var(--alxvk-bg);
	font-family: var(--alxvk-font-body);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
	border-radius: 0;
	text-decoration: none;
}

.alxvk-btn:hover { transform: translateY(-1px); }
.alxvk-btn:active { transform: translateY(0); }

.alxvk-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.alxvk-btn-large {
	padding: 18px 32px;
	font-size: 18px;
	width: 100%;
}

@media (min-width: 480px) {
	.alxvk-btn-large { width: auto; }
}

.alxvk-btn-primary {
	background: var(--alxvk-ink);
	color: var(--alxvk-bg);
}

.alxvk-btn-ghost {
	background: transparent;
	color: var(--alxvk-ink);
	border-color: var(--alxvk-ink);
}

.alxvk-btn-ghost:hover {
	background: var(--alxvk-ink);
	color: var(--alxvk-bg);
}

/* ===== Quiz ===== */

.alxvk-quiz {
	padding: 8px 0 32px;
}

.alxvk-progress {
	margin: 0 0 32px;
}

.alxvk-progress-text {
	font-family: var(--alxvk-font-mono);
	font-size: 13px;
	letter-spacing: 0.1em;
	color: var(--alxvk-muted);
	margin: 0 0 8px;
	text-transform: uppercase;
}

.alxvk-progress-bar {
	height: 4px;
	background: var(--alxvk-rule);
	overflow: hidden;
}

.alxvk-progress-fill {
	height: 100%;
	background: var(--alxvk-ink);
	transition: width 0.3s ease;
	width: 0%;
}

.alxvk-question {
	transition: opacity 0.18s ease;
	margin: 0 0 32px;
}

.alxvk-question-category {
	font-family: var(--alxvk-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--alxvk-warn);
	font-weight: 500;
	margin: 0 0 12px;
}

.alxvk-question-statement {
	font-family: var(--alxvk-font-display);
	font-size: clamp(24px, 5vw, 34px);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--alxvk-ink);
	margin: 0 0 16px;
}

.alxvk-question-explainer-wrap {
	margin: 0 0 24px;
}

.alxvk-explainer-toggle {
	background: none;
	border: none;
	padding: 0;
	color: var(--alxvk-muted);
	font-family: var(--alxvk-font-body);
	font-size: 14px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.alxvk-explainer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid var(--alxvk-muted);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}

.alxvk-explainer-content {
	margin-top: 12px;
	padding: 16px;
	background: var(--alxvk-surface);
	border-left: 3px solid var(--alxvk-warn);
	font-size: 15px;
	line-height: 1.5;
	color: var(--alxvk-ink-soft);
}

/* Options */

.alxvk-options {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0 0 24px;
}

.alxvk-opt {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: var(--alxvk-surface);
	border: 1px solid var(--alxvk-rule);
	color: var(--alxvk-ink);
	font-family: var(--alxvk-font-body);
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: all 0.12s ease;
	border-radius: 0;
	width: 100%;
}

.alxvk-opt:hover {
	border-color: var(--alxvk-ink);
	background: var(--alxvk-bg);
	color: var(--alxvk-ink);
}

.alxvk-opt-selected,
.alxvk-opt-selected:hover {
	background: var(--alxvk-ink) !important;
	color: var(--alxvk-bg) !important;
	border-color: var(--alxvk-ink) !important;
}

.alxvk-opt-label { flex: 1; }

.alxvk-important {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--alxvk-ink-soft);
	margin: 8px 0 0;
	cursor: pointer;
	user-select: none;
}

.alxvk-important input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--alxvk-ink);
	cursor: pointer;
}

/* Quiz nav */

.alxvk-quiz-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--alxvk-rule);
}

.alxvk-quiz-nav .alxvk-btn { flex: 1; }

/* När föregående är dold ska nästa hamna till höger */
.alxvk-quiz-nav #alxvk-next { margin-left: auto; }

@media (min-width: 480px) {
	.alxvk-quiz-nav .alxvk-btn { flex: 0 0 auto; }
}

/* ===== Loading ===== */

.alxvk-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px 0;
	color: var(--alxvk-ink-soft);
}

.alxvk-loading[hidden] {
	display: none !important;
}

.alxvk-loading-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid var(--alxvk-rule);
	border-top-color: var(--alxvk-ink);
	border-radius: 50%;
	animation: alxvk-spin 0.8s linear infinite;
}

@keyframes alxvk-spin {
	to { transform: rotate(360deg); }
}

/* ===== Result ===== */

.alxvk-result {
	padding: 16px 0 32px;
}

.alxvk-result-header {
	border-top: 4px solid var(--alxvk-accent);
	padding: 32px 0 32px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--alxvk-rule);
}

.alxvk-archetype-name {
	font-family: var(--alxvk-font-display);
	font-size: clamp(32px, 7vw, 54px);
	line-height: 1.05;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--alxvk-accent);
	margin: 16px 0 16px;
}

.alxvk-archetype-tagline {
	font-family: var(--alxvk-font-display);
	font-style: italic;
	font-size: clamp(20px, 3vw, 24px);
	line-height: 1.3;
	color: var(--alxvk-ink);
	margin: 0 0 24px;
}

.alxvk-archetype-longer {
	font-size: 17px;
	line-height: 1.6;
	color: var(--alxvk-ink-soft);
	margin: 0 0 0;
	max-width: 60ch;
}

/* Share block */

.alxvk-share-block {
	margin: 0 0 40px;
	padding: 24px;
	background: var(--alxvk-surface);
	border: 1px solid var(--alxvk-rule);
	border-left: 4px solid var(--alxvk-accent);
}

.alxvk-share-text-preview {
	font-family: var(--alxvk-font-display);
	font-size: 18px;
	line-height: 1.4;
	color: var(--alxvk-ink);
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--alxvk-bg);
	border-left: 2px solid var(--alxvk-rule);
}

.alxvk-share-buttons {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
}

@media (min-width: 600px) {
	.alxvk-share-buttons {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.alxvk-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	background: var(--alxvk-ink);
	color: var(--alxvk-bg);
	border: 1px solid var(--alxvk-ink);
	font-family: var(--alxvk-font-body);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 0.12s ease;
	border-radius: 0;
}

.alxvk-share-btn:hover {
	transform: translateY(-1px);
	text-decoration: none !important;
}

/* Färgvarianter — !important för att övertrumfa tema-länkfärger */
.alxvk-share-fb,
.alxvk-share-fb:hover,
.alxvk-share-fb:visited { background: #1877F2 !important; border-color: #1877F2 !important; color: #fff !important; }

.alxvk-share-x,
.alxvk-share-x:hover,
.alxvk-share-x:visited { background: #000 !important; border-color: #000 !important; color: #fff !important; }

.alxvk-share-li,
.alxvk-share-li:hover,
.alxvk-share-li:visited { background: #0A66C2 !important; border-color: #0A66C2 !important; color: #fff !important; }

.alxvk-share-msg,
.alxvk-share-msg:hover,
.alxvk-share-msg:visited { background: #34c759 !important; border-color: #34c759 !important; color: #fff !important; }

.alxvk-share-fb-msg,
.alxvk-share-fb-msg:hover,
.alxvk-share-fb-msg:visited { background: #0084FF !important; border-color: #0084FF !important; color: #fff !important; }

.alxvk-share-mail,
.alxvk-share-mail:hover,
.alxvk-share-mail:visited { background: #4a5568 !important; border-color: #4a5568 !important; color: #fff !important; }

.alxvk-share-copied {
	background: var(--alxvk-success) !important;
	border-color: var(--alxvk-success) !important;
	color: #fff !important;
}

/* Challenge block */

.alxvk-challenge-block {
	margin: 0 0 40px;
	padding: 0;
	background: var(--alxvk-ink);
	color: var(--alxvk-bg);
	position: relative;
	overflow: hidden;
}

.alxvk-challenge-inner {
	padding: 32px 24px;
	position: relative;
	z-index: 1;
}

.alxvk-challenge-block::before {
	content: "";
	position: absolute;
	top: -40%;
	right: -20%;
	width: 60%;
	height: 180%;
	background: var(--alxvk-accent);
	opacity: 0.3;
	transform: rotate(20deg);
	z-index: 0;
}

.alxvk-challenge-block .alxvk-section-title {
	color: var(--alxvk-bg);
}

.alxvk-challenge-block p {
	color: rgba(247, 243, 236, 0.85);
	margin: 0 0 20px;
}

.alxvk-challenge-buttons {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

@media (min-width: 480px) {
	.alxvk-challenge-buttons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 720px) {
	.alxvk-challenge-buttons {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* "Kopiera länk"-knappen i challenge-blocket — annan stil än färgade share-knappar */
.alxvk-challenge-buttons .alxvk-share-copy {
	background: rgba(247, 243, 236, 0.12) !important;
	border: 1px solid rgba(247, 243, 236, 0.4) !important;
	color: #fff !important;
}

.alxvk-challenge-buttons .alxvk-share-copy:hover {
	background: rgba(247, 243, 236, 0.2) !important;
}

/* Parties block */

.alxvk-parties-block {
	margin: 0 0 40px;
}

.alxvk-party-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--alxvk-rule);
}

.alxvk-party-row {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"rank info"
		"bar bar"
		"pct pct";
	gap: 4px 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--alxvk-rule);
	align-items: center;
}

@media (min-width: 600px) {
	.alxvk-party-row {
		grid-template-columns: 24px minmax(0, 180px) minmax(0, 1fr) auto;
		grid-template-rows: auto;
		grid-template-areas: "rank info bar pct";
		gap: 16px;
	}
}

.alxvk-party-rank {
	grid-area: rank;
	font-family: var(--alxvk-font-mono);
	font-size: 13px;
	color: var(--alxvk-muted);
	font-weight: 500;
}

.alxvk-party-info { grid-area: info; min-width: 0; }

.alxvk-party-name {
	font-weight: 600;
	font-size: 15px;
	color: var(--alxvk-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.alxvk-party-detail {
	font-size: 13px;
	color: var(--alxvk-muted);
}

.alxvk-party-bar {
	grid-area: bar;
	height: 14px;
	background: var(--alxvk-rule);
	overflow: hidden;
	min-width: 0;
}

.alxvk-party-bar-fill {
	height: 100%;
	background: var(--alxvk-bar);
	transition: width 0.6s ease;
}

.alxvk-party-percent {
	grid-area: pct;
	font-family: var(--alxvk-font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--alxvk-ink);
	text-align: right;
	min-width: 48px;
}

/* Generation block */

.alxvk-generation-block {
	margin: 0 0 40px;
	padding: 24px;
	background: var(--alxvk-surface);
	border: 1px solid var(--alxvk-rule);
}

.alxvk-axis-list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

@media (min-width: 600px) {
	.alxvk-axis-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.alxvk-axis-list dt {
	font-family: var(--alxvk-font-mono);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--alxvk-muted);
	margin: 0 0 4px;
}

.alxvk-axis-list dd { margin: 0; }

.alxvk-axis-scale {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: var(--alxvk-muted);
}

.alxvk-axis-track {
	position: relative;
	height: 24px;
	background: var(--alxvk-bg);
	border: 1px solid var(--alxvk-rule);
	min-width: 0;
}

.alxvk-axis-marker {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

.alxvk-axis-you { background: var(--alxvk-warn); z-index: 2; border: 2px solid var(--alxvk-bg); }
.alxvk-axis-avg { background: var(--alxvk-ink); z-index: 1; border: 2px solid var(--alxvk-bg); }

.alxvk-axis-legend {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--alxvk-muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.alxvk-axis-key {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}

.alxvk-axis-you-key { background: var(--alxvk-warn); }
.alxvk-axis-avg-key { background: var(--alxvk-ink); }

/* Disagreements */

.alxvk-disagree-block {
	margin: 0 0 40px;
	padding: 24px;
	background: var(--alxvk-surface);
	border-left: 4px solid var(--alxvk-warn);
	border-top: 1px solid var(--alxvk-rule);
	border-right: 1px solid var(--alxvk-rule);
	border-bottom: 1px solid var(--alxvk-rule);
}

.alxvk-disagree-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.alxvk-disagree-list li {
	padding: 16px 0;
	border-bottom: 1px solid var(--alxvk-rule);
}

.alxvk-disagree-list li:last-child { border-bottom: 0; }

.alxvk-disagree-list strong {
	display: block;
	font-family: var(--alxvk-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 17px;
	line-height: 1.4;
	color: var(--alxvk-ink);
	margin: 0 0 8px;
}

.alxvk-disagree-detail {
	font-size: 14px;
	color: var(--alxvk-muted);
	font-family: var(--alxvk-font-mono);
}

/* CTA */

.alxvk-cta-block {
	margin: 40px 0 0;
	text-align: center;
}

/* ===== Compare view ===== */

.alxvk-compare-header {
	border-top: 4px solid var(--alxvk-ink);
	padding: 32px 0;
	margin: 0 0 32px;
	text-align: center;
	border-bottom: 1px solid var(--alxvk-rule);
}

.alxvk-compare-similarity-line {
	font-size: 18px;
	color: var(--alxvk-ink);
	margin: 8px 0 0;
}

.alxvk-compare-bignum {
	font-family: var(--alxvk-font-display);
	font-weight: 700;
	color: var(--alxvk-accent, var(--alxvk-ink));
}

.alxvk-compare-cta {
	margin: 40px 0 24px;
	padding: 28px 24px;
	background: var(--alxvk-surface);
	border: 1px solid var(--alxvk-rule);
}

.alxvk-compare-cta .alxvk-section-title {
	margin-top: 0;
}

.alxvk-compare-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 24px;
}

.alxvk-compare-actions .alxvk-btn {
	flex: 1 1 240px;
	text-align: center;
}

.alxvk-share-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding-top: 18px;
	border-top: 1px solid var(--alxvk-rule);
}

.alxvk-share-label {
	font-size: 14px;
	color: var(--alxvk-ink-soft);
	margin-right: 6px;
}

.alxvk-compare-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0 0 40px;
}

@media (min-width: 600px) {
	.alxvk-compare-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.alxvk-compare-card {
	padding: 24px;
	background: var(--alxvk-surface);
	border-top: 4px solid var(--alxvk-accent);
	border-left: 1px solid var(--alxvk-rule);
	border-right: 1px solid var(--alxvk-rule);
	border-bottom: 1px solid var(--alxvk-rule);
}

.alxvk-compare-card .alxvk-compare-label {
	font-family: var(--alxvk-font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--alxvk-muted);
	margin: 0 0 8px;
}

.alxvk-compare-card h2 {
	font-family: var(--alxvk-font-display);
	font-size: 26px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--alxvk-accent);
	margin: 0 0 8px;
}

.alxvk-compare-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--alxvk-ink-soft);
	font-style: italic;
}

.alxvk-compare-questions {
	margin: 0 0 40px;
}

/* Errors */

.alxvk-error {
	padding: 24px;
	background: var(--alxvk-surface);
	border-left: 4px solid var(--alxvk-warn);
	color: var(--alxvk-ink);
	font-size: 16px;
}

/* Print + reduced motion */

@media (prefers-reduced-motion: reduce) {
	.alxvk-app *, .alxvk-app *::before, .alxvk-app *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ================================================================
 * Jämförelsesektion — fråga för fråga, alla partier
 * ================================================================ */

.alxvk-compare-block {
	margin: 40px 0;
}

.alxvk-compare-axis {
	background: var(--alxvk-surface);
	border: 1px solid var(--alxvk-rule);
	border-radius: 0;
	margin-bottom: 12px;
}

.alxvk-compare-axis-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	font-family: var(--alxvk-font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--alxvk-ink);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.alxvk-compare-axis-title::-webkit-details-marker {
	display: none;
}

.alxvk-compare-axis-title::after {
	content: "+";
	font-size: 22px;
	font-weight: 400;
	color: var(--alxvk-ink-soft);
	transition: transform 0.2s;
}

.alxvk-compare-axis[open] .alxvk-compare-axis-title::after {
	content: "−";
}

.alxvk-compare-axis-count {
	font-size: 13px;
	font-weight: 400;
	color: var(--alxvk-ink-soft);
	letter-spacing: 0.04em;
	margin-left: auto;
	margin-right: 16px;
}

.alxvk-compare-questions {
	padding: 0 22px 22px 22px;
	border-top: 1px solid var(--alxvk-rule);
}

.alxvk-compare-q {
	padding: 20px 0;
	border-bottom: 1px solid var(--alxvk-rule);
}

.alxvk-compare-q:last-child {
	border-bottom: 0;
}

.alxvk-compare-q-text {
	font-family: var(--alxvk-font-display);
	font-size: 17px;
	font-weight: 500;
	color: var(--alxvk-ink);
	margin: 0 0 12px;
	font-style: italic;
}

.alxvk-compare-user {
	font-size: 14px;
	color: var(--alxvk-ink-soft);
	margin-bottom: 10px;
}

.alxvk-compare-user strong {
	color: var(--alxvk-ink);
	margin-left: 6px;
}

.alxvk-compare-parties {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 6px;
}

.alxvk-compare-party {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 4px;
	font-size: 13px;
	background: var(--alxvk-bg);
	border-left: 3px solid transparent;
}

.alxvk-compare-party.alxvk-match-agree {
	border-left-color: #2d8659;
	background: #f0f7f3;
}

.alxvk-compare-party.alxvk-match-partial {
	border-left-color: #c2964a;
	background: #faf6ed;
}

.alxvk-compare-party.alxvk-match-disagree {
	border-left-color: #b04848;
	background: #faf0f0;
}

.alxvk-compare-party-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.alxvk-compare-party-name {
	font-weight: 600;
	color: var(--alxvk-ink);
	min-width: 32px;
}

.alxvk-compare-party-pos {
	color: var(--alxvk-ink-soft);
	font-size: 12px;
	margin-left: auto;
}

.alxvk-compare-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 13px;
	color: var(--alxvk-ink-soft);
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--alxvk-rule);
}

.alxvk-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.alxvk-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.alxvk-legend-item.alxvk-match-agree .alxvk-legend-dot {
	background: #2d8659;
}

.alxvk-legend-item.alxvk-match-partial .alxvk-legend-dot {
	background: #c2964a;
}

.alxvk-legend-item.alxvk-match-disagree .alxvk-legend-dot {
	background: #b04848;
}

@media (max-width: 600px) {
	.alxvk-compare-axis-title {
		padding: 16px 18px;
		font-size: 16px;
	}

	.alxvk-compare-questions {
		padding: 0 18px 18px 18px;
	}

	.alxvk-compare-q-text {
		font-size: 15px;
	}

	.alxvk-compare-parties {
		grid-template-columns: 1fr 1fr;
	}
}

/* ===== Byline + e-postanmälan ===== */

.alxvk-byline {
	margin: 24px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--alxvk-rule);
	font-size: 13px;
	line-height: 1.5;
	color: var(--alxvk-muted);
	letter-spacing: 0.01em;
}

.alxvk-signup-block {
	margin: 40px 0;
	padding: 32px 28px;
	background: var(--alxvk-accent-soft);
	border: 1px solid var(--alxvk-rule);
	border-radius: 4px;
}

.alxvk-signup-inner .alxvk-eyebrow {
	margin-bottom: 8px;
}

.alxvk-signup-inner .alxvk-section-title {
	margin: 0 0 12px;
}

.alxvk-signup-inner > p {
	margin: 0 0 20px;
	color: var(--alxvk-ink-soft);
	max-width: 60ch;
}

.alxvk-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 520px;
}

.alxvk-signup-input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 12px 14px;
	font-family: var(--alxvk-font-body);
	font-size: 16px;
	line-height: 1.4;
	color: var(--alxvk-ink);
	background: #fff;
	border: 1px solid var(--alxvk-rule);
	border-radius: 3px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.alxvk-signup-input:focus {
	outline: 2px solid var(--alxvk-accent);
	outline-offset: 1px;
}

.alxvk-signup-submit {
	flex: 0 0 auto;
	white-space: nowrap;
}

.alxvk-signup-status {
	margin: 14px 0 0;
	min-height: 20px;
	font-size: 14px;
	color: var(--alxvk-ink-soft);
}

.alxvk-signup-status.alxvk-status-ok {
	color: var(--alxvk-success);
	font-weight: 500;
}

.alxvk-signup-status.alxvk-status-error {
	color: var(--alxvk-warn);
	font-weight: 500;
}

.alxvk-fineprint {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--alxvk-muted);
}

@media (max-width: 540px) {
	.alxvk-signup-block {
		padding: 22px 18px;
	}
	.alxvk-signup-form {
		flex-direction: column;
	}
	.alxvk-signup-submit {
		width: 100%;
	}
}

/* ===== Hide auto-injected Table of Contents inside widget ===== */
/* Vissa TOC-plugins (Easy Table of Contents, LuckyWP, Heroic TOC, Joli TOC)
   injicerar automatiskt en innehållsförteckning före första rubriken.
   Eftersom vår widget innehåller H2:er hamnar TOC inne i widget-ramen.
   Vi döljer den hårt här som säkerhetsnät. */
.alxvk-app #ez-toc-container,
.alxvk-app .ez-toc-container,
.alxvk-app #toc_container,
.alxvk-app .toc_container,
.alxvk-app .lwptoc,
.alxvk-app .ht-toc,
.alxvk-app .joli-toc,
.alxvk-app .toc-container {
	display: none !important;
}

/* ===== Beslutsstöd ===== */

.alxvk-decision-block {
	margin: 40px 0;
	padding: 28px 28px 24px;
	background: #fff;
	border: 1px solid var(--alxvk-rule);
	border-left: 4px solid var(--alxvk-accent);
	border-radius: 4px;
}

.alxvk-decision-block .alxvk-section-title {
	margin-top: 0;
}

.alxvk-decision-block p {
	margin: 0 0 16px;
	line-height: 1.6;
	color: var(--alxvk-ink);
}

.alxvk-decision-block p strong {
	color: var(--alxvk-ink);
}

.alxvk-decision-h3 {
	font-family: var(--alxvk-font-display);
	font-size: 22px;
	font-weight: 700;
	margin: 28px 0 14px;
	color: var(--alxvk-ink);
}

.alxvk-decision-list {
	margin: 0;
	padding-left: 22px;
	counter-reset: decision;
	list-style: none;
}

.alxvk-decision-list li {
	margin: 0 0 18px;
	padding-left: 6px;
	line-height: 1.6;
	position: relative;
	counter-increment: decision;
}

.alxvk-decision-list li::before {
	content: counter(decision) ".";
	position: absolute;
	left: -22px;
	top: 0;
	font-weight: 700;
	color: var(--alxvk-accent);
}

.alxvk-decision-list li strong {
	display: block;
	margin-bottom: 4px;
	color: var(--alxvk-ink);
}

.alxvk-decision-list em {
	font-style: italic;
	color: var(--alxvk-ink-soft);
}

@media (max-width: 600px) {
	.alxvk-decision-block {
		padding: 22px 18px 18px;
	}
}

/* ===== Personlig analys i beslutsstödet ===== */

.alxvk-important-list,
.alxvk-agree-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.alxvk-important-list li {
	padding: 10px 14px;
	margin: 0 0 8px;
	background: var(--alxvk-accent-soft);
	border-left: 3px solid var(--alxvk-accent);
	border-radius: 2px;
	font-size: 16px;
	line-height: 1.45;
	color: var(--alxvk-ink);
}

.alxvk-important-list li em {
	font-style: italic;
}

.alxvk-agree-list li {
	padding: 12px 14px;
	margin: 0 0 8px;
	background: #f4faf6;
	border-left: 3px solid var(--alxvk-success);
	border-radius: 2px;
	line-height: 1.5;
}

.alxvk-agree-list li strong {
	display: block;
	margin-bottom: 4px;
	font-style: italic;
	font-weight: 500;
	color: var(--alxvk-ink);
}

.alxvk-agree-detail {
	font-family: var(--alxvk-font-mono);
	font-size: 13px;
	color: var(--alxvk-ink-soft);
	letter-spacing: 0.01em;
}

@media (max-width: 600px) {
	.alxvk-important-list li,
	.alxvk-agree-list li {
		padding: 10px 12px;
		font-size: 15px;
	}
}

/* ===== Spara ditt resultat ===== */

.alxvk-save-block {
	margin: 32px 0;
	padding: 24px 26px 20px;
	background: #fafbfc;
	border: 1px solid var(--alxvk-rule);
	border-radius: 4px;
}

.alxvk-save-block .alxvk-section-title {
	margin-top: 0;
}

.alxvk-save-block .alxvk-section-deck {
	margin: 0 0 18px;
	color: var(--alxvk-ink-soft);
	font-size: 16px;
}

.alxvk-save-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: flex-end;
}

.alxvk-save-url {
	flex: 1 1 320px;
	min-width: 0;
}

.alxvk-save-url label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--alxvk-ink-soft);
}

.alxvk-save-url-inner {
	display: flex;
	gap: 8px;
}

.alxvk-save-url-inner input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 12px;
	font-family: var(--alxvk-font-mono);
	font-size: 14px;
	color: var(--alxvk-ink);
	background: #fff;
	border: 1px solid var(--alxvk-rule);
	border-radius: 3px;
	box-sizing: border-box;
}

.alxvk-save-url-inner input:focus {
	outline: 2px solid var(--alxvk-accent);
	outline-offset: 1px;
}

.alxvk-save-copy {
	flex: 0 0 auto;
	white-space: nowrap;
}

.alxvk-save-actions {
	flex: 0 0 auto;
}

.alxvk-btn-secondary {
	background: #fff;
	color: var(--alxvk-accent);
	border: 1.5px solid var(--alxvk-accent);
	padding: 10px 18px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 3px;
	font-family: var(--alxvk-font-body);
	font-size: 15px;
	transition: background 0.15s, color 0.15s;
}

.alxvk-btn-secondary:hover {
	background: var(--alxvk-accent);
	color: #fff;
}

.alxvk-save-block .alxvk-fineprint {
	margin: 14px 0 0;
}

@media (max-width: 600px) {
	.alxvk-save-block {
		padding: 20px 18px 16px;
	}
	.alxvk-save-actions {
		width: 100%;
	}
	.alxvk-print-btn {
		width: 100%;
	}
}

/* Helper-rad i beslutsstöds-h3:n när toppmatchningar är knutna */
.alxvk-decision-helper {
	margin: -8px 0 14px;
	font-size: 14px;
	color: var(--alxvk-ink-soft);
	font-style: italic;
}

/* Agree-detail wrappar bra med 2-4 partikolumner vid tied results */
.alxvk-agree-detail {
	display: inline;
	font-family: var(--alxvk-font-mono);
	font-size: 13px;
	color: var(--alxvk-ink-soft);
	letter-spacing: 0.01em;
	line-height: 1.7;
}