/**
 * CVM Jobbsök — tokens + base (prefix cjs-).
 * Source: web/app/themes/cv-mallen/docs/cvm-designsystem.md
 * html font-size stays 16px. All sizes below are px.
 */

html {
	font-size: 16px;
}

:root {
	--cjs-bg: #F3F3F8;
	--cjs-surface: #FFFFFF;
	--cjs-row: #F7F8FC;
	--cjs-surface-soft: var(--cjs-row);
	--cjs-row-alt: #F2F4F9;
	--cjs-ink: #142236;
	--cjs-text: var(--cjs-ink);
	--cjs-muted: #5B6478;
	--cjs-faint: #8A90A3;
	--cjs-muted-2: var(--cjs-faint);
	--cjs-border: #E6E6EF;
	--cjs-divider: #ECEEF5;
	--cjs-field-border: #CFD4E2;
	--cjs-border-strong: #D5D8E3;
	--cjs-blue-cap: #2E5588;
	--cjs-accent-dark: var(--cjs-blue-cap);
	--cjs-blue: #4478B8;
	--cjs-accent: var(--cjs-blue);
	--cjs-blue-hover: #3E6DA8;
	--cjs-blue-tint: #F2F7FD;
	--cjs-accent-soft-2: var(--cjs-blue-tint);
	--cjs-blue-tint-2: #E9F0F9;
	--cjs-accent-soft: var(--cjs-blue-tint-2);
	--cjs-blue-line: #C8DCF2;
	--cjs-blue-text: #23548F;
	--cjs-accent-ink: var(--cjs-blue-text);
	--cjs-link: #2563C7;
	--cjs-link-hover: #1C4A99;
	--cjs-green-cap: #245F33;
	--cjs-green: #2E7D3F;
	--cjs-green-tint: #DCF2E1;
	--cjs-green-soft: var(--cjs-green-tint);
	--cjs-green-text: #1F6B33;
	--cjs-gold-cap: #8A6612;
	--cjs-gold-dark: var(--cjs-gold-cap);
	--cjs-gold: #E0A82E;
	--cjs-gold-ink: #3D2F09;
	--cjs-gold-tint: #FDF7E7;
	--cjs-warn-bg: var(--cjs-gold-tint);
	--cjs-gold-line: #F2E4BF;
	--cjs-warn-border: var(--cjs-gold-line);
	--cjs-gold-text: #8A6612;
	--cjs-warn-icon: var(--cjs-gold-text);
	--cjs-gold-text-2: #6B5210;
	--cjs-warn-text: var(--cjs-gold-text-2);
	--cjs-date: #A34E12;
	--cjs-red-tint: #FBF1EF;
	--cjs-red-line: #E0C5C1;
	--cjs-red-border: #C08A82;
	--cjs-red-text: #8A3327;
	--cjs-scrim: rgba(20, 34, 54, 0.45);
	--cjs-shadow-dialog: 0 18px 48px rgba(20, 34, 54, 0.20), 0 2px 6px rgba(20, 34, 54, 0.10);
	--cjs-shadow-toast: 0 12px 32px rgba(20, 34, 54, 0.28);
	--cjs-shadow-sheet: 0 -12px 40px rgba(20, 34, 54, 0.22);
	--cjs-r-dialog: 16px;
	--cjs-r-sheet: 20px;
	--cjs-logo-gold: #E0A82E;
	--cjs-logo-red: #BA0C2F;
	--cjs-logo-blue: #2F5FA8;
	--cjs-r-card: 14px;
	--cjs-r-control: 9px;
	--cjs-r-icon: 8px;
	--cjs-r-pill: 999px;
	--cjs-radius-lg: var(--cjs-r-card);
	--cjs-radius: var(--cjs-r-control);
	--cjs-shadow: none;
	--cjs-font: "Plus Jakarta Sans", system-ui, sans-serif;
	/* Type — mobile first; desktop bumps at 900px */
	--cjs-t-h1: 23px;
	--cjs-t-h2: 18px;
	--cjs-t-card: 16px;
	--cjs-t-item: 15px;
	--cjs-t-body: 15px;
	--cjs-t-control: 14px;
	--cjs-t-meta: 13px;
	--cjs-t-label: 11px;
	--cjs-s-1: 4px;
	--cjs-s-2: 8px;
	--cjs-s-3: 12px;
	--cjs-s-4: 16px;
	--cjs-s-5: 20px;
	--cjs-s-6: 24px;
	--cjs-s-8: 32px;
	--cjs-max: 1160px;
	--cjs-side: 296px;
	--cjs-nav-h: 68px;
	--cjs-toolbar-h: 62px;
	--cjs-tabbar-h: 86px;
	--cjs-btn-h: 40px;
	--cjs-btn-h-sm: 34px;
}

@media (min-width: 900px) {
	:root {
		--cjs-t-h1: 28px;
		--cjs-t-h2: 20px;
		--cjs-t-card: 18px;
		--cjs-t-item: 16px;
	}
}

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

.cjs-body {
	margin: 0;
	background: var(--cjs-bg);
	color: var(--cjs-text);
	font-family: var(--cjs-font);
	font-size: 16px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

/* Normal document scroll (browser scrollbar). Mobile tabbar is fixed
   per designsystem § tabbar — room via body padding below. */
@media (max-width: 899px) {
	.cjs-body {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}
}

.cjs-app {
	box-sizing: border-box;
	min-height: 100%;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.cjs-app > .cjs-main {
	flex: 1 1 auto;
}

/* Dialog/overlay open — lock page scroll (designsystem §7). */
body.cjs-modal-open,
body.cjs-overlay-open {
	overflow: hidden;
}

.cjs-app button:not([disabled]):not([aria-disabled="true"]),
.cjs-app [role="button"]:not([aria-disabled="true"]) {
	cursor: pointer;
}

.cjs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cjs-only-desktop {
	display: none !important;
}

.cjs-only-mobile {
	display: initial;
}

@media (min-width: 900px) {
	.cjs-only-desktop {
		display: initial !important;
	}

	.cjs-only-mobile {
		display: none !important;
	}

	.cjs-only-desktop.cjs-btn,
	.cjs-only-desktop.cjs-path-card,
	.cjs-only-desktop.cjs-job-card,
	.cjs-only-desktop.cjs-followup-row,
	.cjs-only-desktop.cjs-pill,
	.cjs-only-desktop.cjs-layout__side,
	.cjs-only-desktop.cjs-card,
	.cjs-only-desktop.cjs-profile-card,
	.cjs-only-desktop.cjs-match-actions,
	.cjs-only-desktop.cjs-sort {
		display: flex !important;
	}

	.cjs-only-desktop.cjs-job-card,
	.cjs-only-desktop.cjs-card,
	.cjs-only-desktop.cjs-profile-card {
		display: block !important;
	}

	.cjs-only-desktop.cjs-pill {
		display: inline-flex !important;
	}

	.cjs-only-desktop.cjs-layout__side {
		display: flex !important;
	}
}

/* Width helpers for progress bars (no inline CSS) */
.cjs-w-40 { width: 40%; }
.cjs-w-50 { width: 50%; }
.cjs-w-64 { width: 64%; }
.cjs-w-72 { width: 72%; }
.cjs-w-78 { width: 78%; }
.cjs-w-81 { width: 81%; }
.cjs-w-88 { width: 88%; }
.cjs-w-91 { width: 91%; }

/* Family switch — attention bar (designsystem: light gold = needs awareness). */
.cjs-switch-banner {
	flex-shrink: 0;
	background: var(--cjs-gold-tint);
	border-bottom: 1px solid var(--cjs-gold-line);
}

.cjs-switch-banner__inner {
	max-width: var(--cjs-max);
	margin: 0 auto;
	padding: 0.55rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.cjs-switch-banner__text {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cjs-gold-text-2);
}

.cjs-switch-banner__link {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cjs-link);
	text-decoration: none;
	white-space: nowrap;
}

.cjs-switch-banner__link:hover {
	color: var(--cjs-link-hover);
	text-decoration: underline;
}

/* Context note when editing an application CV copy. */
.cjs-app-context {
	flex-shrink: 0;
	max-width: var(--cjs-max);
	margin: 0 auto;
	padding: 0.65rem 1rem 0;
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cjs-muted);
}

/* Top nav */
.cjs-top {
	flex-shrink: 0;
	background: var(--cjs-surface);
	border-bottom: 1px solid var(--cjs-border);
}

.cjs-top__inner {
	max-width: var(--cjs-max);
	margin: 0 auto;
	padding: 0 1rem;
	min-height: 56px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

@media (min-width: 900px) {
	/* Three columns: logo | centered nav | actions — nav sits in viewport center. */
	.cjs-top__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
		column-gap: 16px;
		height: var(--cjs-nav-h);
		min-height: var(--cjs-nav-h);
		padding: 0 32px;
	}
}

.cjs-logo {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.4px;
	text-decoration: none;
	flex-shrink: 0;
}

@media (min-width: 900px) {
	.cjs-logo {
		font-size: 20px;
		justify-self: start;
	}
}

.cjs-logo__cv { color: var(--cjs-logo-gold); }
.cjs-logo__mallen { color: var(--cjs-logo-blue); }
.cjs-logo__se { color: var(--cjs-logo-blue); }

/* NO: CV red + MALEN.no dark (norsk flagg-känsla). */
.cjs-logo.is-no .cjs-logo__cv { color: var(--cjs-logo-red); }
.cjs-logo.is-no .cjs-logo__mallen,
.cjs-logo.is-no .cjs-logo__se { color: var(--cjs-logo-blue); }

.cjs-top__nav {
	display: none;
	align-items: center;
	gap: 0.15rem;
}

@media (min-width: 900px) {
	.cjs-top__nav {
		display: flex;
		justify-content: center;
		justify-self: center;
		min-width: 0;
	}
}

.cjs-top__link {
	padding: 9px 15px;
	border-radius: var(--cjs-r-control);
	color: var(--cjs-muted);
	font-family: var(--cjs-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.cjs-top__link.is-active {
	background: var(--cjs-blue-tint-2);
	color: var(--cjs-blue-text);
	font-weight: 700;
}

.cjs-top__link--muted {
	opacity: 0.55;
	cursor: default;
}

.cjs-top__actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-shrink: 0;
}

@media (min-width: 900px) {
	.cjs-top__actions {
		margin-left: 0;
		justify-self: end;
		min-width: 0;
	}
}

.cjs-top__premium {
	font-size: 0.75rem;
	color: var(--cjs-muted);
}

button.cjs-top__premium-btn,
a.cjs-top__premium-btn {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--cjs-green-text);
	cursor: pointer;
	text-decoration: none;
}

.cjs-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--cjs-accent-dark);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 600;
}

.cjs-account {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--cjs-muted);
	cursor: default;
}

.cjs-account__ring {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--cjs-blue-tint-2);
	color: var(--cjs-blue-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 800;
}

.cjs-account__ring img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cjs-account__initials {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
}

.cjs-account__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
	max-width: 11.5rem;
	line-height: 1.15;
}

.cjs-account__name {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--cjs-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.cjs-account__tag {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--cjs-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.cjs-account__caret {
	flex-shrink: 0;
}

.cjs-account-menu {
	position: relative;
	display: none;
}

@media (min-width: 900px) {
	.cjs-account-menu {
		display: block;
	}
}

.cjs-account-menu > summary {
	list-style: none;
	cursor: pointer;
}

.cjs-account-menu > summary::-webkit-details-marker {
	display: none;
}

.cjs-account-menu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 0.45rem);
	z-index: 30;
	min-width: 15rem;
	padding: 0.35rem;
	background: var(--cjs-surface);
	border: 1px solid var(--cjs-border);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(20, 34, 54, 0.08);
}

.cjs-account-menu__section {
	padding: 0.2rem 0 0.35rem;
}

.cjs-account-menu__label {
	margin: 0;
	padding: 0.35rem 0.75rem 0.45rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cjs-faint);
}

.cjs-account-menu__person {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	color: var(--cjs-text);
	text-decoration: none;
}

.cjs-account-menu__person:hover {
	background: var(--cjs-surface-soft);
}

.cjs-account-menu__person.is-active {
	background: var(--cjs-blue-tint-2);
}

.cjs-account-menu__person-name {
	font-size: 0.9rem;
	font-weight: 700;
}

.cjs-account-menu__person-role {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--cjs-muted);
}

.cjs-account-menu__divider {
	height: 1px;
	margin: 0.25rem 0.5rem;
	background: var(--cjs-divider);
}

.cjs-account-menu__panel > a {
	display: block;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	color: var(--cjs-text);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.cjs-account-menu__panel > a:hover {
	background: var(--cjs-surface-soft);
}

/* Mobile tab bar — fixed to viewport bottom (< 900px), designsystem § tabbar.
   Equal vertical padding; home-indicator only via safe-area (not +22px fake). */
.cjs-tabbar {
	position: relative;
	z-index: 40;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 10px 6px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--cjs-surface);
	border-top: 1px solid var(--cjs-border);
	display: flex;
	align-items: stretch;
}

@media (max-width: 899px) {
	.cjs-tabbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		display: flex !important;
	}
}

@media (min-width: 900px) {
	.cjs-tabbar {
		display: none !important;
	}
}

.cjs-tabbar__item {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 4px 2px;
	text-decoration: none;
	color: #6C7385;
	font: 600 11px/1 var(--cjs-font);
	text-align: center;
}

.cjs-tabbar__item.is-active {
	color: var(--cjs-blue-text);
	font-weight: 800;
}

.cjs-tabbar__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
}

.cjs-tabbar__label {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 0.1rem;
}

.cjs-tabbar__badge {
	position: absolute;
	top: -0.3rem;
	right: -0.45rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.25rem;
	border-radius: 999px;
	background: #8a6612;
	color: #fff;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
}

/* Buttons — one size. Color variants only change color. */
.cjs-btn,
button.cjs-btn,
a.cjs-btn,
.cjs-btn[type="button"],
.cjs-btn[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--cjs-btn-h);
	padding: 0 17px;
	border-radius: var(--cjs-r-control);
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	font-family: var(--cjs-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
}

.cjs-btn--split,
button.cjs-btn--split,
a.cjs-btn--split,
.cjs-btn.cjs-btn--split[type="button"],
.cjs-btn.cjs-btn--split[type="submit"] {
	height: var(--cjs-btn-h);
	padding: 0;
	overflow: hidden;
	border: none;
	gap: 0;
	align-items: stretch;
	background: none;
	border-radius: var(--cjs-r-control);
	font-weight: 700;
}

.cjs-btn__icon,
.cjs-btn__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cjs-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
}

.cjs-btn__icon {
	padding: 0 13px;
	background: var(--cjs-blue-cap);
	color: #fff;
	align-self: stretch;
}

.cjs-btn__label {
	padding: 0 18px;
	background: var(--cjs-blue);
	color: #fff;
	flex: 1;
}

/* Small button — inside rows, warn bars, card heads (DS: 34 / 13) */
.cjs-btn--sm,
button.cjs-btn--sm,
a.cjs-btn--sm {
	height: var(--cjs-btn-h-sm);
}

.cjs-btn--sm.cjs-btn--split,
button.cjs-btn--sm.cjs-btn--split,
a.cjs-btn--sm.cjs-btn--split {
	height: var(--cjs-btn-h-sm);
}

.cjs-btn--sm .cjs-btn__icon {
	padding: 0 11px;
}

.cjs-btn--sm .cjs-btn__icon svg {
	width: 13px;
	height: 13px;
}

.cjs-btn--sm .cjs-btn__label {
	padding: 0 14px;
	font-size: 13px;
}

.cjs-btn--sm.cjs-btn--ghost,
.cjs-btn--sm.cjs-btn--outline,
.cjs-btn--sm.cjs-btn--danger {
	padding: 0 14px;
	font-size: 13px;
}

.cjs-btn--ai .cjs-btn__icon {
	background: var(--cjs-gold-cap);
	color: #fff;
}

.cjs-btn--ai .cjs-btn__label {
	background: var(--cjs-gold);
	color: var(--cjs-gold-ink);
}

.cjs-btn--green .cjs-btn__icon {
	background: var(--cjs-green-cap);
	color: #fff;
}

.cjs-btn--green .cjs-btn__label {
	background: var(--cjs-green);
	color: #fff;
}

.cjs-btn--ghost {
	height: var(--cjs-btn-h);
	padding: 0 17px;
	background: var(--cjs-surface);
	border: 1px solid var(--cjs-border-strong);
	color: var(--cjs-ink);
	font-weight: 600;
}

.cjs-btn--outline {
	background: var(--cjs-surface);
	border-color: var(--cjs-blue-line);
	color: var(--cjs-blue-text);
	font-weight: 700;
}

.cjs-btn--danger {
	height: var(--cjs-btn-h);
	padding: 0 18px;
	border: 1px solid var(--cjs-red-border);
	border-radius: var(--cjs-r-control);
	background: var(--cjs-red-tint);
	color: var(--cjs-red-text);
	font-weight: 700;
	white-space: nowrap;
}

button.cjs-btn.cjs-btn--upgrade,
a.cjs-btn.cjs-btn--upgrade,
.cjs-btn.cjs-btn--upgrade {
	height: var(--cjs-btn-h);
	padding: 0 17px;
	border: none;
	background: var(--cjs-green);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	gap: 8px;
}

button.cjs-btn.cjs-btn--upgrade.cjs-btn--sm,
a.cjs-btn.cjs-btn--upgrade.cjs-btn--sm,
.cjs-btn.cjs-btn--upgrade.cjs-btn--sm {
	height: var(--cjs-btn-h-sm);
	padding: 0 14px;
	font-size: 13px;
	gap: 6px;
}

button.cjs-btn.cjs-btn--upgrade:hover,
a.cjs-btn.cjs-btn--upgrade:hover,
.cjs-btn.cjs-btn--upgrade:hover {
	background: var(--cjs-green-cap);
	color: #fff;
}

button.cjs-btn.cjs-btn--upgrade svg,
a.cjs-btn.cjs-btn--upgrade svg,
.cjs-btn.cjs-btn--upgrade svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: #fff;
	stroke: currentColor;
}

button.cjs-btn.cjs-btn--upgrade.cjs-btn--sm svg,
a.cjs-btn.cjs-btn--upgrade.cjs-btn--sm svg,
.cjs-btn.cjs-btn--upgrade.cjs-btn--sm svg {
	width: 13px;
	height: 13px;
}

button.cjs-btn.cjs-btn--upgrade,
a.cjs-btn.cjs-btn--upgrade,
.cjs-btn.cjs-btn--upgrade {
	height: var(--cjs-btn-h);
	padding: 0 17px;
	border: none;
	background: var(--cjs-green);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	gap: 8px;
}

button.cjs-btn.cjs-btn--upgrade.cjs-btn--sm,
a.cjs-btn.cjs-btn--upgrade.cjs-btn--sm,
.cjs-btn.cjs-btn--upgrade.cjs-btn--sm {
	height: var(--cjs-btn-h-sm);
	padding: 0 14px;
	font-size: 13px;
	gap: 6px;
}

button.cjs-btn.cjs-btn--upgrade:hover,
a.cjs-btn.cjs-btn--upgrade:hover,
.cjs-btn.cjs-btn--upgrade:hover {
	background: var(--cjs-green-cap);
	color: #fff;
}

button.cjs-btn.cjs-btn--upgrade svg,
a.cjs-btn.cjs-btn--upgrade svg,
.cjs-btn.cjs-btn--upgrade svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: #fff;
	stroke: currentColor;
}

button.cjs-btn.cjs-btn--upgrade.cjs-btn--sm svg,
a.cjs-btn.cjs-btn--upgrade.cjs-btn--sm svg,
.cjs-btn.cjs-btn--upgrade.cjs-btn--sm svg {
	width: 13px;
	height: 13px;
}

.cjs-btn--full,
.cjs-btn--block-mobile {
	width: 100%;
}

@media (min-width: 900px) {
	.cjs-btn--block-mobile {
		width: auto;
	}
}

.cjs-btn[aria-disabled="true"] {
	opacity: 0.92;
	cursor: default;
}

.cjs-text-link {
	color: var(--cjs-link);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

.cjs-text-link:hover {
	color: var(--cjs-link-hover);
}

.cjs-text-link[aria-disabled="true"] {
	opacity: 0.7;
	cursor: default;
}

/* Badges / pills — stilguide §Pill */
.cjs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--cjs-r-pill);
	font: 700 11px/1 var(--cjs-font);
	border: 1px solid transparent;
	vertical-align: middle;
}

.cjs-badge--online {
	background: var(--cjs-green-soft);
	color: #1f6b33;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.cjs-badge--soft {
	background: #ddebf8;
	color: var(--cjs-link);
}

.cjs-badge--warn {
	background: var(--cjs-gold-tint);
	color: var(--cjs-gold-text-2);
	border-color: var(--cjs-gold-line);
	text-transform: none;
	letter-spacing: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 10px;
}

.cjs-badge--new {
	background: var(--cjs-green-soft);
	color: var(--cjs-green-text);
}

/* Neutral / dokument & ansökningsstatus */
.cjs-badge--muted,
.cjs-badge--draft,
.cjs-badge--cert {
	background: var(--cjs-surface);
	color: #465064;
	border-color: var(--cjs-border-strong);
}

.cjs-badge--ad,
.cjs-badge--intyg {
	background: var(--cjs-accent-soft);
	color: var(--cjs-accent-ink);
}

.cjs-badge--manual {
	background: #ddebf8;
	color: var(--cjs-link);
}

.cjs-badge--betyg,
.cjs-badge--applied,
.cjs-badge--hired {
	background: var(--cjs-green-soft);
	color: var(--cjs-green-text);
}

.cjs-badge--interview {
	background: var(--cjs-green-soft);
	color: var(--cjs-green-text);
	border-color: #a9d4b8;
}

.cjs-badge--rejected {
	background: var(--cjs-red-tint);
	color: var(--cjs-red-text);
	border-color: var(--cjs-red-line);
}

.cjs-badge--expires {
	background: var(--cjs-warn-bg);
	color: var(--cjs-warn-text);
	border-color: var(--cjs-warn-border);
}

.cjs-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.95rem;
	background: var(--cjs-surface);
	border: 1px solid var(--cjs-border);
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
}

.cjs-pill__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cjs-green);
}

.cjs-warn {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.6rem 0.7rem;
	background: var(--cjs-warn-bg);
	border: 1px solid var(--cjs-warn-border);
	border-radius: 8px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--cjs-warn-text);
}

.cjs-warn svg {
	flex-shrink: 0;
	color: var(--cjs-warn-icon);
	stroke: var(--cjs-warn-icon);
}

/* Upgrade dialog (CV-mallen Premium / trial) */
.cjs-dialog--upgrade {
	width: 100%;
	max-width: 440px;
}

.cjs-upgrade-list {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cjs-upgrade-intro {
	margin: 14px 0 0;
	font: 700 14px/1.4 var(--cjs-font);
	color: var(--cjs-ink);
}

.cjs-upgrade-intro[hidden] {
	display: none !important;
}

.cjs-upgrade-intro + .cjs-upgrade-list {
	margin-top: 8px;
}

.cjs-upgrade-list li {
	position: relative;
	padding: 0 0 0 22px;
	font: 500 15px/1.4 var(--cjs-font);
	color: var(--cjs-ink);
}

.cjs-upgrade-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--cjs-green-soft);
	box-shadow: inset 0 0 0 3px var(--cjs-green);
}

.cjs-upgrade-fine {
	margin: 14px 0 0;
	font: 400 13px/1.45 var(--cjs-font);
	color: var(--cjs-faint);
}

.cjs-dialog--upgrade .cjs-dialog__foot {
	margin-top: 18px;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 12px;
}

.cjs-dialog--upgrade .cjs-upgrade-fine {
	margin-top: 12px;
}

.cjs-dialog--upgrade .cjs-dialog__foot .cjs-btn--split {
	width: 100%;
	flex-shrink: 0;
}

.cjs-dialog--upgrade .cjs-btn--green .cjs-btn__icon {
	background: var(--cjs-green-cap);
	color: #fff;
}

.cjs-dialog--upgrade .cjs-btn--green .cjs-btn__label {
	background: var(--cjs-green);
	color: #fff;
}

.cjs-dialog--upgrade .cjs-dialog__text-btn {
	align-self: center;
	width: auto;
	height: auto;
	padding: 4px 0;
	font: 700 14px/1.4 var(--cjs-font);
}

@media (max-width: 639px) {
	.cjs-dialog--upgrade .cjs-dialog__foot {
		flex-direction: column;
	}

	.cjs-dialog--upgrade .cjs-dialog__foot .cjs-btn--split,
	.cjs-dialog--upgrade .cjs-dialog__foot .cjs-btn--split .cjs-btn__icon,
	.cjs-dialog--upgrade .cjs-dialog__foot .cjs-btn--split .cjs-btn__label {
		height: 50px;
		min-height: 50px;
		max-height: 50px;
	}

	.cjs-dialog--upgrade .cjs-dialog__text-btn {
		width: 100%;
		height: 44px;
	}
}