// ─────────────────────────────────────────────────────────────────────────────
// Candidate Details — faithful port of the easy.jobs app-end design.
// Source: "Candidate Profile.html" (self-contained mockup).
// ALL rules are scoped under `.ejc-app` so the design's generic class names
// (.card, .tab, .note, .empty, .pill, .modal, .toast …) cannot collide with the
// plugin's or WP-admin's styles. Tokens live on `.ejc-app` (not :root).
// ─────────────────────────────────────────────────────────────────────────────

// Inter is self-hosted (see public/assets/src/scss/partials/_local-fonts.scss),
// never loaded from Google. Path is relative to admin/assets/dist/css/.
$ej-font-path: "../../../../public/assets/vendor/fonts";
$ej-include-poppins: false;
$ej-include-inter: true;
@import "../../../../../public/assets/src/scss/partials/local-fonts";

// Pager candidate-change transition — mirrors the app's "slide-fade" Vue
// transition with mode="out-in": the old candidate slides out to the right and
// fades, then the new one slides in from the right and fades.
@keyframes ejcSlideLeave {
	from {
		opacity: 1;
		transform: translateX(0);
	}
	to {
		opacity: 0;
		transform: translateX(10px);
	}
}
@keyframes ejcSlideEnter {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.ejc-app {
	--accent: #4f46e5;
	--accent-600: #4338ca;
	--accent-700: #3730a3;
	--accent-50: #eef0ff;
	--accent-100: #e0e4ff;
	--bg: #fafafa;
	--surface: #ffffff;
	--surface-2: #f7f7f8;
	--border: #ebebec;
	--border-2: #e2e2e4;
	--hover: #f3f3f4;
	--hover-2: #ededef;
	--text: #0a0a0a;
	--text-2: #3a3a3c;
	--muted: #6e7079;
	--muted-2: #9698a1;
	--green: #15803d;
	--green-bg: #e7f6ec;
	--amber: #b45309;
	--amber-bg: #fdf3de;
	--red: #b91c1c;
	--red-bg: #fbe7e7;
	--sky: #0369a1;
	--sky-bg: #e2f1fb;
	--violet: #7c3aed;
	--violet-bg: #f1e9fe;
	--shadow-pop: 0 1px 2px rgba(15, 15, 15, 0.04),
		0 10px 30px -10px rgba(15, 15, 15, 0.18);
	--header-h: 60px;
	--radius: 12px;
	--radius-sm: 8px;

	font-family:
		"Inter",
		ui-sans-serif,
		system-ui,
		-apple-system,
		sans-serif;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;

	// Force the app shell to fill its parent whether that parent is block OR flex
	// (a flex ancestor would otherwise shrink-wrap the whole app to content width,
	// collapsing the left column and leaving a gap before the right rail).
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	align-self: stretch !important;
	box-sizing: border-box;

	* {
		box-sizing: border-box;
	}
	button {
		font-family: inherit;
		cursor: pointer;
		color: inherit;
	}
	a {
		color: inherit;
		text-decoration: none;
	}
	textarea {
		font-family: inherit;
	}
	.tnum {
		font-variant-numeric: tabular-nums;
	}

	// ── content / top bar ──────────────────────────────────────────────────────
	.ejc-content {
		padding: 20px 0 0;
		width: 100%;
	}
	.top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 12px;
	}
	// Back button — only the icon box is clickable; the "Back" text is static.
	.back-link {
		display: inline-flex;
		align-items: center;
	}
	.back-link__icon {
		width: 36px;
		height: 36px;
		min-width: 36px;
		display: grid;
		place-items: center;
		background: var(--accent-50);
		color: var(--accent);
		border-radius: 9px;
		cursor: pointer;
		transition: background 0.12s;
	}
	.back-link__icon:hover {
		background: var(--accent-100);
	}
	.back-link__icon svg {
		width: 16px;
		height: 16px;
		stroke-width: 1.9;
	}
	.back-link__icon i {
		font-size: 14px;
		line-height: 1;
	}
	.back-link__text {
		font-size: 14px;
		font-weight: 500;
		color: #212529;
		margin-left: 8px;
		line-height: 120%;
	}
	// Pager — matches the app: white box, 32px transparent buttons, bold count
	.pager {
		display: inline-flex;
		align-items: center;
		gap: 16px;
		background: #fff;
		border-radius: 8px;
		padding: 4px;
	}
	.pager .pos {
		font-size: 16px;
		font-weight: 600;
		color: #1d2339;
		line-height: 120%;
		font-variant-numeric: tabular-nums;
	}
	.pager .pos b {
		font-weight: 600;
	}
	.pager .pos__total {
		color: #44546f;
		font-weight: 400;
	}
	.pg-btn {
		width: 32px;
		height: 32px;
		min-width: 32px;
		border-radius: 5px;
		background: transparent;
		border: none;
		color: #1d2339;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.pg-btn:hover:not(:disabled) {
		background: #f2f4f7;
		color: #1d2339;
	}
	.pg-btn:disabled {
		background: #f2f4f7;
		color: #44546f;
		cursor: not-allowed;
	}
	.pg-btn svg {
		width: 15px;
		height: 15px;
		stroke-width: 2;
	}

	// ── layout (flex; renamed + !important to defeat any global collisions) ──
	.ejc-layout {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start !important;
		gap: 16px;
		width: 100% !important;
	}
	.ejc-leave {
		animation: ejcSlideLeave 0.3s cubic-bezier(1, 0.5, 0.8, 1) forwards;
	}
	.ejc-enter {
		animation: ejcSlideEnter 0.3s ease;
	}
	.ejc-card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		width: 100%;
		display: block;
	}
	.card-pad {
		padding: 22px 24px;
	}
	.ejc-col-left {
		flex: 0 0 calc(66.6666% - 8px) !important;
		min-width: 0;
		max-width: calc(66.6666% - 8px);
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.ejc-col-left > * {
		width: 100%;
	}
	.ejc-col-right {
		flex: 0 0 calc(33.3333% - 8px) !important;
		width: calc(33.3333% - 8px) !important;
		max-width: calc(33.3333% - 8px);
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.card-h {
		font-size: 15px;
		font-weight: 600;
		letter-spacing: -0.005em;
		margin: 0;
		display: flex;
		align-items: center;
		gap: 8px;
		color: #1d2339;
	}
	.card-h .pill-n {
		font-size: 11.5px;
		font-weight: 600;
		color: var(--muted);
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: 999px;
		padding: 0 7px;
		line-height: 18px;
		min-width: 18px;
		text-align: center;
	}
	.h-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 14px;
	}

	// ── candidate header card ──
	.cand-head {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		padding: 16px 16px 24px;
	}
	// Avatar — optional AI-score conic ring (the wrap carries the conic background)
	.cand-av-wrap {
		flex-shrink: 0;
		display: grid;
		place-items: center;
	}
	.cand-av-wrap.has-ring {
		width: 116px;
		height: 116px;
		border-radius: 50%;
		padding: 5px;
		box-sizing: border-box;
		position: relative;
		cursor: pointer;
	}
	// AI score breakdown popup — centered above the avatar, shown via React (z-index above the 9999 sticky header)
	.ai-pop {
		position: absolute;
		bottom: calc(100% + 9px);
		left: 50%;
		transform: translateX(-50%);
		background: #fff;
		border-radius: 10px;
		padding: 8px 12px;
		box-shadow: 0 8px 24px -8px rgba(15, 15, 15, 0.25);
		width: 150px;
		z-index: 10001;
	}
	.ai-pop::after {
		content: "";
		position: absolute;
		bottom: -6px;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 7px solid #fff;
	}
	.ai-pop ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 3px;
	}
	.ai-pop li {
		font-size: 12px;
		color: #1d2339;
		line-height: 1.35;
	}
	.ai-pop li strong {
		font-weight: 600;
	}
	.cand-av-wrap.has-ring .cand-av {
		width: 106px;
		height: 106px;
		border: 3px solid var(--surface);
		box-shadow: none;
	}
	.cand-av {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		flex-shrink: 0;
		position: relative;
		box-sizing: border-box;
		background: linear-gradient(135deg, #a78bfa, #6d4de3);
		display: grid;
		place-items: center;
		color: #fff;
		font-weight: 600;
		font-size: 30px;
		letter-spacing: -0.01em;
		overflow: hidden;
		box-shadow: 0 0 0 1px var(--border-2);
	}
	.cand-av img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 50%;
	}
	.cand-main {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.cand-name {
		font-size: 20px;
		font-weight: 600;
		line-height: 150%;
		color: #1d2339;
		margin: 0;
	}
	// Email / phone — static (not links), no hover (app look)
	.contact-row {
		display: flex;
		align-items: center;
		gap: 20px;
		flex-wrap: wrap;
	}
	.contact-item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.contact-item svg {
		width: 16px;
		height: 16px;
		color: #667085;
		flex-shrink: 0;
	}
	.contact-item span {
		font-size: 14px;
		color: #44546f;
		word-break: break-all;
	}
	.contact-row .sep {
		width: 1px;
		height: 16px;
		background: #44546f;
	}
	.cand-controls {
		display: flex;
		align-items: center;
		gap: 24px;
		margin-top: 6px;
		flex-wrap: wrap;
	}

	.status-wrap {
		position: relative;
	}
	.status-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		font-weight: 500;
		padding: 6px 11px;
		border-radius: 8px;
		border: 1px solid transparent;
		transition: filter 0.12s;
	}
	.status-btn:hover {
		filter: brightness(0.97);
	}
	.status-btn .dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
	.status-btn .chv {
		width: 14px;
		height: 14px;
		stroke-width: 2;
		opacity: 0.7;
		margin-left: 1px;
	}
	.st-neutral {
		background: var(--surface-2);
		color: var(--text-2);
		border-color: var(--border);
	}
	.st-neutral .dot {
		background: var(--muted-2);
	}
	.st-accent {
		background: var(--accent-50);
		color: var(--accent);
		border-color: var(--accent-100);
	}
	.st-accent .dot {
		background: var(--accent);
	}
	.st-amber {
		background: var(--amber-bg);
		color: var(--amber);
	}
	.st-amber .dot {
		background: var(--amber);
	}
	.st-sky {
		background: var(--sky-bg);
		color: var(--sky);
	}
	.st-sky .dot {
		background: var(--sky);
	}
	.st-violet {
		background: var(--violet-bg);
		color: var(--violet);
	}
	.st-violet .dot {
		background: var(--violet);
	}
	.st-red {
		background: var(--red-bg);
		color: var(--red);
	}
	.st-red .dot {
		background: var(--red);
	}
	.st-green {
		background: var(--green-bg);
		color: var(--green);
	}
	.st-green .dot {
		background: var(--green);
	}
	// Solid status button (default app look)
	.status-btn--solid {
		background: var(--accent);
		color: #fff;
		border-color: var(--accent);
		font-weight: 600;
	}
	.status-btn--solid:hover {
		background: var(--accent-600);
		filter: none;
	}
	.status-btn--solid .chv {
		opacity: 0.95;
	}
	// Pipeline button background reflects the current stage (same on hover)
	.status-btn--rejected,
	.status-btn--rejected:hover {
		background: #ff5f74 !important;
		border-color: #ff5f74;
		color: #fff;
		box-shadow: 0 10px 10px rgba(255, 95, 116, 0.3) !important;
	}
	.status-btn--selected,
	.status-btn--selected:hover {
		background: #60ce83 !important;
		border-color: #60ce83;
		color: #fff;
		box-shadow: 0 10px 10px rgba(96, 206, 131, 0.3) !important;
	}
	.status-menu {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 30;
		min-width: 178px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 10px;
		box-shadow: var(--shadow-pop);
		padding: 5px;
		display: none;
	}
	.status-menu.open {
		display: block;
	}
	.status-opt {
		display: flex;
		align-items: center;
		gap: 9px;
		padding: 8px 12px;
		border-radius: 7px;
		width: 100%;
		background: transparent;
		border: none;
		font: inherit;
		font-size: 14px;
		color: #7d8091;
		text-align: left;
		cursor: pointer;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.status-opt:hover {
		background: var(--hover);
	}
	.status-opt .ck {
		width: 14px;
		height: 14px;
		margin-left: auto;
		color: var(--accent);
		stroke-width: 2.2;
		opacity: 0;
	}
	.status-opt.sel .ck {
		opacity: 1;
	}
	.status-opt.sel {
		font-weight: 600;
	}
	.status-opt.is-selected {
		color: #28a745 !important;
	}
	.status-opt.is-rejected {
		color: #dc3545 !important;
	}

	.rate {
		display: inline-flex;
		align-items: center;
		gap: 9px;
	}
	.rate .lbl {
		font-size: 14px;
		line-height: 20px;
		color: #44546f;
	}
	.stars {
		display: inline-flex;
		gap: 0;
	}
	.star {
		width: 22px;
		height: 24px;
		display: grid;
		place-items: center;
		background: transparent;
		border: none;
		color: #c7cdd8;
	}
	.star svg {
		width: 18px;
		height: 18px;
		fill: currentColor;
		stroke: none;
	}
	.star.on {
		color: #ffc532;
	}
	.star.on svg {
		fill: #ffc532;
		stroke: none;
	}

	.kebab-wrap {
		position: relative;
		margin-left: auto;
	}
	.kebab {
		width: 32px;
		height: 32px;
		min-width: 32px;
		border-radius: 4px;
		background: transparent;
		border: none;
		color: #44546f;
		display: grid;
		place-items: center;
		cursor: pointer;
		transition:
			background 0.2s,
			color 0.2s;
	}
	.kebab:hover {
		background: #597dfc1a;
		color: #597dfc;
	}
	.kebab svg {
		width: 18px;
		height: 18px;
		stroke-width: 1.7;
	}
	.kebab-menu {
		position: absolute;
		top: calc(100% + 6px);
		right: 0;
		z-index: 30;
		min-width: 188px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 10px;
		box-shadow: var(--shadow-pop);
		padding: 5px;
		display: none;
	}
	.kebab-menu.open {
		display: block;
	}
	.kebab-menu button {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 8px 10px;
		border-radius: 7px;
		background: transparent;
		border: none;
		font: inherit;
		font-size: 13px;
		color: var(--text-2);
		text-align: left;
	}
	.kebab-menu button:hover {
		background: var(--hover);
		color: var(--text);
	}
	.kebab-menu button svg {
		width: 15px;
		height: 15px;
		stroke-width: 1.7;
		color: var(--muted);
	}
	.kebab-menu .sep-line {
		height: 1px;
		background: var(--border);
		margin: 4px 6px;
	}
	.kebab-menu button.danger {
		color: var(--red);
	}
	.kebab-menu button.danger svg {
		color: var(--red);
	}
	.kebab-menu button.danger:hover {
		background: var(--red-bg);
	}

	// ── tabs ──
	// Tab menu — compact, left-aligned, hover pills + crisp active underline
	// No overflow scroll container here — it would capture the wheel and block page
	// scrolling when the cursor is over the menu. Tabs wrap on narrow widths instead.
	.tabs {
		display: flex;
		justify-content: flex-start !important;
		align-items: stretch;
		gap: 4px 8px;
		border-bottom: 1px solid var(--border);
		padding: 0 16px;
		margin-top: 2px;
		flex-wrap: wrap;
	}
	.tab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		padding: 13px 14px;
		background: transparent;
		border: none;
		font: inherit;
		font-size: 14px;
		font-weight: 500;
		color: var(--muted);
		position: relative;
		white-space: nowrap;
	}
	.tab svg {
		width: 16px;
		height: 16px;
		stroke-width: 1.8;
		flex-shrink: 0;
	}
	.tab.active {
		color: var(--accent);
	}
	.tab.active svg {
		color: var(--accent);
	}
	// Plain full-width underline on the active tab; no hover effect
	.tab.active::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
		background: var(--accent);
	}

	.panel {
		display: none;
	}
	.panel.active {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding: 64px 24px;
		text-align: center;
	}
	.empty .ic {
		width: 46px;
		height: 46px;
		border-radius: 12px;
		background: var(--surface-2);
		border: 1px solid var(--border);
		display: grid;
		place-items: center;
		color: var(--muted-2);
	}
	.empty .ic svg {
		width: 21px;
		height: 21px;
		stroke-width: 1.6;
	}
	.empty h3 {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
	}
	.empty p {
		margin: 0;
		font-size: 13px;
		color: var(--muted);
		max-width: 320px;
	}

	// ── cover letter ──
	.cover-body {
		font-size: 14px;
		line-height: 1.65;
		color: #667085;
		position: relative;
		max-height: 88px;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.cover-body.open {
		max-height: 3000px;
	}
	.cover-text {
		color: #667085;
		text-align: justify;
		overflow-wrap: break-word;
		word-break: break-word;
	}
	.cover-text p {
		margin: 0 0 10px;
	}
	.cover-text p:last-child {
		margin-bottom: 0;
	}
	.cover-text li {
		margin-left: 16px;
	}
	// Links inside the cover letter — darker than body text, accent on hover (app look)
	.cover-text a {
		color: var(--text) !important;
		font-weight: 500;
		text-decoration: none;
		word-break: break-word;
		transition: color 0.12s;
	}
	.cover-text a:hover {
		color: var(--accent) !important;
		text-decoration: none;
	}
	.ejc-fade {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 42px;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0),
			var(--surface)
		);
		pointer-events: none;
	}
	.read-more {
		display: inline-block;
		margin-top: 12px;
		color: var(--accent) !important;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		transition: color 0.12s;
	}
	.read-more:hover {
		color: var(--accent-600) !important;
	}

	// ── experience timeline ──
	.meta-inline {
		font-size: 12.5px;
		color: var(--muted);
		font-weight: 450;
	}
	.meta-inline .dotsep {
		margin: 0 6px;
		color: var(--muted-2);
	}
	.expand-all {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 13px;
		font-weight: 500;
		color: var(--text-2);
		background: transparent;
		border: none;
		padding: 5px 8px;
		border-radius: 7px;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.expand-all:hover {
		background: var(--hover);
		color: var(--text);
	}
	.expand-all svg {
		width: 13px;
		height: 13px;
		stroke-width: 2;
		transition: transform 0.2s;
	}
	.expand-all.open svg {
		transform: rotate(180deg);
	}
	.timeline {
		position: relative;
		padding-left: 24px;
	}
	.timeline::before {
		content: "";
		position: absolute;
		left: 5px;
		top: 6px;
		bottom: 6px;
		width: 1px;
		background: var(--border-2);
	}
	.tl-item {
		position: relative;
		padding: 0 0 22px;
	}
	.tl-item:last-child {
		padding-bottom: 0;
	}
	.tl-item::before {
		content: "";
		position: absolute;
		left: -23px;
		top: 5px;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: var(--surface);
		border: 2px solid var(--muted-2);
	}
	.tl-item.current::before {
		border-color: var(--green);
		background: var(--green);
	}
	.tl-top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 14px;
		cursor: pointer;
	}
	.tl-role {
		font-size: 14.5px;
		font-weight: 500;
		color: var(--text);
		letter-spacing: -0.005em;
		margin: 0;
		line-height: 1.3;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}
	.tl-company {
		font-size: 13px;
		color: var(--muted);
		margin: 2px 0 0;
	}
	.tl-right {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}
	.tl-date {
		font-size: 12.5px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}
	.cur-pill {
		font-size: 11px;
		font-weight: 600;
		color: var(--green);
		background: var(--green-bg);
		border-radius: 999px;
		padding: 1px 8px;
		letter-spacing: 0.01em;
	}
	.tl-chev {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: transparent;
		border: none;
		color: var(--muted-2);
		display: grid;
		place-items: center;
		flex-shrink: 0;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.tl-chev:hover {
		background: var(--hover);
		color: var(--text);
	}
	.tl-chev svg {
		width: 15px;
		height: 15px;
		stroke-width: 2;
		transition: transform 0.22s;
	}
	.tl-item.open .tl-chev svg {
		transform: rotate(180deg);
	}
	.tl-desc {
		font-size: 13.5px;
		line-height: 1.6;
		color: var(--text-2);
		position: relative;
		max-height: 44px;
		overflow: hidden;
		transition: max-height 0.28s ease;
		margin-top: 8px;
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	.tl-item.open .tl-desc {
		max-height: 240px;
	}
	.tl-desc .ejc-fade {
		height: 30px;
	}
	.tl-item.open .tl-desc .ejc-fade {
		opacity: 0;
	}

	// ── education ──
	.edu-row {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px 0;
		border-bottom: 1px solid var(--border);
	}
	.edu-row:first-of-type {
		padding-top: 2px;
	}
	.edu-row:last-child {
		border-bottom: none;
		padding-bottom: 2px;
	}
	.edu-badge {
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.06em;
		color: var(--muted);
		background: var(--surface-2);
		border: 1px solid var(--border);
		border-radius: 7px;
		padding: 5px 0;
		width: 46px;
		text-align: center;
		flex-shrink: 0;
		text-transform: uppercase;
	}
	.edu-mid {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.edu-inst {
		font-size: 14px;
		font-weight: 500;
		color: var(--text);
	}
	.edu-field {
		font-size: 12.5px;
		color: var(--muted);
	}
	.edu-year {
		font-size: 13px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
		flex-shrink: 0;
	}

	// ═══ Custom Queries ═══
	.cq-list {
		display: flex;
		flex-direction: column;
	}
	.cq-row {
		padding: 14px 0;
		border-bottom: 1px solid var(--border);
	}
	.cq-row:first-child {
		padding-top: 2px;
	}
	.cq-row:last-child {
		border-bottom: none;
		padding-bottom: 2px;
	}
	.cq-title {
		font-size: 14px;
		font-weight: 500;
		color: var(--text);
		margin: 0 0 4px;
	}
	.cq-value {
		font-size: 13.5px;
		font-weight: 400;
		color: var(--muted);
		line-height: 1.55;
		margin: 0;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	// ── intro video ──
	.video {
		position: relative;
		width: 100%;
		aspect-ratio: 16/9;
		border-radius: 10px;
		border: 1px solid var(--border);
		overflow: hidden;
		background: #16161a;
		cursor: pointer;
	}
	.video iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	.video video {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
		background: #000;
	}
	// "Or watch from source" link under the intro video (matches the app)
	.watch-source {
		font-size: 14px;
		margin-top: 12px;
	}
	.watch-source__text {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 13px;
		font-weight: 500;
		color: var(--muted);
	}
	.watch-source__text svg {
		flex-shrink: 0;
		width: 15px;
		height: 15px;
	}
	.watch-source__link {
		color: var(--accent);
		text-decoration: none;
	}
	.watch-source__link:hover {
		color: var(--accent-600);
		text-decoration: none;
	}
	.video .ph {
		position: absolute;
		inset: 0;
		background: repeating-linear-gradient(
			135deg,
			#26262c 0 11px,
			#202026 11px 22px
		);
	}
	.video .grad {
		position: absolute;
		inset: 0;
		background: radial-gradient(
			120% 90% at 30% 20%,
			rgba(124, 103, 250, 0.25),
			transparent 60%
		);
	}
	.video .meta-tl {
		position: absolute;
		left: 14px;
		top: 13px;
		display: flex;
		align-items: center;
		gap: 8px;
		color: rgba(255, 255, 255, 0.92);
	}
	.video .meta-tl .av {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: linear-gradient(135deg, #a78bfa, #6d4de3);
		display: grid;
		place-items: center;
		font-size: 10px;
		font-weight: 600;
		color: #fff;
	}
	.video .meta-tl .t {
		font-size: 12.5px;
		font-weight: 500;
		text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	}
	.play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.16);
		border: 1px solid rgba(255, 255, 255, 0.3);
		display: grid;
		place-items: center;
		transition:
			transform 0.18s,
			background 0.18s;
	}
	.video:hover .play {
		background: var(--accent);
		border-color: var(--accent);
		transform: translate(-50%, -50%) scale(1.06);
	}
	.play svg {
		width: 22px;
		height: 22px;
		fill: #fff;
		margin-left: 3px;
	}
	.yt-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: 14px;
		font-size: 13px;
		color: var(--muted);
		font-weight: 450;
		transition: color 0.12s;
	}
	.yt-link:hover {
		color: var(--accent);
	}
	.yt-link svg {
		width: 14px;
		height: 14px;
		stroke-width: 1.7;
	}

	// ── right: candidate details ──
	.edit-btn {
		width: 28px;
		height: 28px;
		border-radius: 7px;
		background: transparent;
		border: none;
		color: var(--muted-2);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.edit-btn:hover {
		background: var(--hover);
		color: var(--text);
	}
	.edit-btn svg {
		width: 14px;
		height: 14px;
		stroke-width: 1.7;
	}
	.dl {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.dl-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}
	.dl-ic {
		width: 34px;
		height: 34px;
		border-radius: 9px;
		background: var(--surface-2);
		border: 1px solid var(--border);
		color: var(--muted);
		display: grid;
		place-items: center;
		flex-shrink: 0;
	}
	.dl-ic svg {
		width: 16px;
		height: 16px;
		stroke-width: 1.7;
	}
	.dl-main {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
		flex: 1;
	}
	.dl-label {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12.5px;
		font-weight: 500;
		color: var(--muted);
	}
	.dl-info {
		position: relative;
		display: inline-grid;
		place-items: center;
		cursor: help;
		flex-shrink: 0;
		color: #667085;
	}
	.dl-info svg {
		width: 12px;
		height: 12px;
	}
	.dl-val {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 14.5px;
		font-weight: 600;
		color: var(--text);
		font-variant-numeric: tabular-nums;
	}
	.dl-val__text {
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.dl-copy {
		position: relative;
		width: 20px;
		height: 20px;
		border-radius: 6px;
		background: transparent;
		border: none;
		color: var(--muted-2);
		display: grid;
		place-items: center;
		flex-shrink: 0;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.dl-copy:hover {
		background: var(--hover);
		color: var(--text);
	}
	.dl-copy.is-copied {
		color: var(--green);
		background: var(--green-bg);
	}
	.dl-copy svg {
		width: 12px;
		height: 12px;
		stroke-width: 1.7;
	}
	// Hover tooltips (info badge + copy button) — white box with a downward caret.
	.dl-tip,
	.dl-copy-tip {
		position: absolute;
		bottom: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%);
		font-size: 12px;
		line-height: 18px;
		color: #1d2339;
		padding: 6px 10px;
		background: #fff;
		border-radius: 8px;
		box-shadow:
			0 2px 6px -1px rgba(17, 17, 17, 0.04),
			0 4px 10px rgba(17, 17, 17, 0.15);
		white-space: nowrap;
		opacity: 0;
		visibility: hidden;
		transition: 0.2s ease;
		z-index: 8;
		pointer-events: none;
	}
	.dl-tip::after,
	.dl-copy-tip::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border: 8px solid transparent;
		border-top-color: #fff;
	}
	.dl-info:hover .dl-tip {
		opacity: 1;
		visibility: visible;
	}
	.dl-copy:hover .dl-copy-tip,
	.dl-copy.is-copied .dl-copy-tip {
		opacity: 1;
		visibility: visible;
	}
	.gov-id {
		display: inline-flex;
		align-items: center;
		gap: 7px;
	}
	.gov-id code {
		font-family: "JetBrains Mono", monospace;
		font-size: 12.5px;
		color: var(--text-2);
		letter-spacing: -0.01em;
	}
	.copy-btn {
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: transparent;
		border: none;
		color: var(--muted-2);
		display: grid;
		place-items: center;
		position: relative;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.copy-btn:hover {
		background: var(--hover);
		color: var(--text);
	}
	.copy-btn svg {
		width: 13px;
		height: 13px;
		stroke-width: 1.7;
	}
	// Social — label stacked above the brand circles, aligned with the detail
	// rows' content column (icon width + gap), no divider (matches the app).
	.social-block {
		display: flex;
		flex-direction: column;
		gap: 9px;
		margin-top: 16px;
		padding-left: 46px;
	}
	.social-block .dl-label {
		font-size: 12.5px;
		font-weight: 500;
		color: var(--muted);
	}
	.social-icons {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
	}
	// Brand-coloured circular social buttons (matches the app):
	// LinkedIn = blue, everything else = dark slate.
	.soc {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #44546f;
		border: none;
		color: #fff;
		display: grid;
		place-items: center;
		transition:
			opacity 0.2s ease,
			background 0.12s ease;
	}
	.soc:hover {
		opacity: 0.85;
		color: #fff;
	}
	.soc svg {
		width: 12px;
		height: 12px;
	}
	.soc--linkedin {
		background: #597dfc;
	}
	.soc--linkedin:hover {
		background: #4a6be0;
		opacity: 1;
	}

	// ── salary ──
	.sal-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		margin-top: 2px;
	}
	.sal-cell {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.sal-cell.right {
		border-left: 1px solid var(--border);
		padding-left: 16px;
	}
	.sal-lbl {
		font-size: 11.5px;
		color: var(--muted);
		font-weight: 500;
	}
	.sal-val {
		font-size: 21px;
		font-weight: 600;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
	}
	.sal-delta {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		margin-top: 12px;
		font-size: 12px;
		color: var(--muted);
	}
	.sal-delta .up {
		color: var(--green);
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 2px;
	}
	.sal-delta .up.down {
		color: var(--red);
	}
	.sal-delta .up svg {
		width: 11px;
		height: 11px;
		stroke-width: 2.6;
	}
	.sal-bar {
		flex: 1;
		height: 5px;
		border-radius: 3px;
		background: var(--surface-2);
		overflow: hidden;
		position: relative;
	}
	.sal-bar i {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 50%;
		background: var(--accent-100);
		border-radius: 3px;
	}
	.sal-bar i::after {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 2px;
		background: var(--accent);
	}

	// ═══ More Positions ═══
	.mp-sub {
		font-size: 14px;
		line-height: 1.4;
		font-weight: 400;
		color: #44546f;
		margin: 0 0 16px;
	}
	.mp-list {
		display: flex;
		flex-direction: column;
	}
	.mp-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 0;
	}
	.mp-row:not(:last-child) {
		border-bottom: 1px solid var(--border);
	}
	.mp-row:first-child {
		padding-top: 0;
	}
	.mp-row:last-child {
		padding-bottom: 0;
	}
	.mp-title {
		font-size: 12.5px;
		line-height: 1.5;
		font-weight: 500;
		color: var(--text) !important;
		text-decoration: none;
		word-break: break-word;
		transition: color 0.12s;
	}
	.mp-title:hover {
		color: var(--accent) !important;
	}
	.mp-tag {
		flex-shrink: 0;
		font-size: 12px;
		line-height: 1.3;
		font-weight: 500;
		color: #489e62;
		background: #e7f8ec;
		padding: 3px 10px;
		border-radius: 16px;
		white-space: nowrap;
	}
	.mp-tag--rejected {
		color: #d92d20;
		background: #fee4e2;
	}

	// ── internal notes ──
	.composer {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 16px;
		position: relative;
	}
	.composer textarea {
		width: 100%;
		resize: vertical;
		min-height: 64px;
		border: 1px solid var(--border);
		border-radius: 9px;
		padding: 10px 12px;
		font-size: 13.5px;
		color: var(--text);
		background: var(--surface-2);
		line-height: 1.5;
		transition:
			border-color 0.12s,
			box-shadow 0.12s,
			background 0.12s;
	}
	.composer textarea::placeholder {
		color: var(--muted-2);
	}
	.composer textarea:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-50);
		background: var(--surface);
	}
	.composer-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	.mention-trig {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12.5px;
		color: var(--muted);
		background: transparent;
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 5px 9px;
		transition:
			background 0.12s,
			color 0.12s,
			border-color 0.12s;
	}
	.mention-trig:hover {
		background: var(--hover);
		color: var(--text-2);
		border-color: var(--border-2);
	}
	.mention-trig svg {
		width: 13px;
		height: 13px;
		stroke-width: 1.8;
	}
	.composer-btns {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.btn-ghost {
		font-size: 13px;
		font-weight: 500;
		color: var(--muted);
		background: transparent;
		border: 1px solid transparent;
		border-radius: 8px;
		padding: 6px 12px;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.btn-ghost:hover {
		background: var(--hover);
		color: var(--text);
	}
	.btn-solid {
		font-size: 13px;
		font-weight: 500;
		color: #fff;
		background: var(--accent);
		border: 1px solid var(--accent);
		border-radius: 8px;
		padding: 6px 14px;
		transition:
			background 0.12s,
			opacity 0.12s;
	}
	.btn-solid:hover:not(:disabled) {
		background: var(--accent-600);
	}
	.btn-solid:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}

	.mention-pop {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% - 44px);
		z-index: 30;
		max-height: 210px;
		overflow-y: auto;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 10px;
		box-shadow: var(--shadow-pop);
		padding: 5px;
	}
	.mention-pop button {
		display: flex;
		align-items: center;
		gap: 9px;
		width: 100%;
		padding: 7px 9px;
		border-radius: 7px;
		background: transparent;
		border: none;
		font: inherit;
		font-size: 13px;
		color: var(--text-2);
		text-align: left;
	}
	.mention-pop button:hover,
	.mention-pop button.active {
		background: var(--hover);
	}
	.mention-pop .mav {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: var(--accent);
		color: #fff;
		display: grid;
		place-items: center;
		font-size: 11px;
		font-weight: 600;
		flex-shrink: 0;
	}

	.notes-thread {
		border-top: 1px solid var(--border);
		padding-top: 16px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.note {
		display: flex;
		gap: 11px;
	}
	.note-av {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		flex-shrink: 0;
		display: grid;
		place-items: center;
		color: #fff;
		font-weight: 600;
		font-size: 11px;
		background: linear-gradient(135deg, #ff8a65, #e63946);
	}
	.av-nh {
		background: linear-gradient(135deg, #ff8a65, #e63946);
	}
	.av-me {
		background: linear-gradient(135deg, #60a5fa, #2563eb);
	}
	.note-body {
		flex: 1;
		min-width: 0;
	}
	.note-head {
		display: flex;
		align-items: baseline;
		gap: 7px;
		flex-wrap: wrap;
	}
	.note-head .nm {
		font-size: 13px;
		font-weight: 500;
		color: var(--text);
	}
	.note-head .you {
		font-size: 10.5px;
		font-weight: 600;
		color: var(--accent);
		background: var(--accent-50);
		border-radius: 999px;
		padding: 0 7px;
		line-height: 16px;
	}
	.note-head .ts {
		font-size: 12px;
		color: var(--muted-2);
		margin-left: auto;
	}
	.note-del {
		background: transparent;
		border: none;
		color: var(--muted-2);
		width: 22px;
		height: 22px;
		border-radius: 5px;
		display: grid;
		place-items: center;
		opacity: 0;
		transition:
			opacity 0.12s,
			color 0.12s,
			background 0.12s;
	}
	.note:hover .note-del {
		opacity: 1;
	}
	.note-del:hover {
		color: var(--red);
		background: var(--red-bg);
	}
	.note-del svg {
		width: 13px;
		height: 13px;
		stroke-width: 1.7;
	}
	.note-text {
		font-size: 13.5px;
		line-height: 1.55;
		color: var(--text-2);
		margin-top: 4px;
		white-space: pre-line;
		word-break: break-word;
	}
	.mention {
		color: var(--accent);
		background: var(--accent-50);
		border-radius: 5px;
		padding: 0 5px;
		font-weight: 500;
		font-size: 13px;
	}

	// Illustrated empty states (experience / video / notes)
	.cd-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		padding: 28px 0;
		text-align: center;
	}
	.cd-empty__icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cd-empty__icon svg {
		display: block;
	}
	.cd-empty__text {
		margin: 0;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		color: var(--muted);
		text-align: center;
	}

	// Notes list / bottom composer
	.notes-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-bottom: 16px;
	}
	.notes-list .note + .note {
		border-top: 1px solid var(--border);
		padding-top: 16px;
	}
	.notes-list .cd-empty {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 14px;
		padding: 30px 12px;
	}
	.notes-list .cd-empty .cd-empty__icon svg {
		width: 52px;
		height: 52px;
	}
	.notes-list .cd-empty__text {
		font-size: 14px;
	}
	// Bottom composer — single bordered box wrapping the textarea + toolbar (app look)
	.composer--bottom {
		margin: 16px 0 0;
		border: 1px solid var(--border);
		border-radius: 10px;
		background: var(--surface);
		transition:
			border-color 0.12s,
			box-shadow 0.12s;
	}
	.composer--bottom:focus-within {
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-50);
	}
	.composer--bottom textarea {
		border: none;
		background: transparent;
		min-height: 52px;
		border-radius: 10px 10px 0 0;
		padding: 11px 12px;
	}
	.composer--bottom textarea:focus {
		outline: none;
		border: none;
		box-shadow: none;
		background: transparent;
	}
	.composer--bottom .composer-foot {
		padding: 2px 8px 8px;
	}
	.cd-note-tools {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	.cd-tool {
		width: 30px;
		height: 30px;
		border-radius: 7px;
		background: transparent;
		border: none;
		color: var(--muted);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.cd-tool:hover {
		background: var(--hover);
		color: var(--text);
	}
	.cd-tool:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}
	.cd-tool svg {
		width: 17px;
		height: 17px;
		stroke-width: 1.7;
	}
	.cd-send {
		width: 34px;
		height: 34px;
		border-radius: 8px;
		background: var(--accent-50);
		border: 1px solid var(--accent-100);
		color: var(--accent);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s,
			border-color 0.12s,
			opacity 0.12s;
	}
	.cd-send:hover:not(:disabled) {
		background: var(--accent);
		border-color: var(--accent);
		color: #fff;
	}
	.cd-send:disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}
	.cd-send svg {
		width: 15px;
		height: 15px;
		stroke-width: 1.7;
	}
	.emoji-pop {
		position: absolute;
		left: 0;
		bottom: 46px;
		z-index: 30;
		display: flex;
		gap: 2px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 10px;
		box-shadow: var(--shadow-pop);
		padding: 6px;
	}
	.emoji-pop button {
		background: none;
		border: none;
		font-size: 18px;
		padding: 4px;
		border-radius: 6px;
		cursor: pointer;
	}
	.emoji-pop button:hover {
		background: var(--hover);
		transform: scale(1.15);
	}

	// ═══ Resume tab ═══
	.tipw {
		position: relative;
	}
	.tip-d {
		position: absolute;
		bottom: calc(100% + 7px);
		left: 50%;
		transform: translateX(-50%);
		background: #111;
		color: #fff;
		font-size: 11px;
		padding: 5px 8px;
		border-radius: 7px;
		white-space: nowrap;
		box-shadow: var(--shadow-pop);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.12s;
		z-index: 8;
	}
	.tipw:hover .tip-d {
		opacity: 1;
	}
	.ai-bar {
		padding: 13px 18px;
		overflow: hidden;
	}
	.ai-row {
		display: flex;
		align-items: center;
		gap: 18px;
	}
	.ai-lead {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.ai-spark {
		color: var(--accent);
		display: grid;
		place-items: center;
	}
	.ai-spark svg {
		width: 16px;
		height: 16px;
	}
	.ai-title {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.ai-facts {
		display: flex;
		align-items: center;
		gap: 20px;
		flex: 1;
		min-width: 0;
		flex-wrap: wrap;
	}
	.ai-fact {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.ai-flabel {
		font-size: 9.5px;
		font-weight: 600;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--muted-2);
	}
	.ai-fval {
		font-size: 13px;
		font-weight: 500;
		color: var(--text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ai-vsep {
		width: 1px;
		height: 28px;
		background: var(--border);
		flex-shrink: 0;
	}

	.viewer-card {
		overflow: hidden;
	}
	.viewer-toolbar {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 9px 14px;
		border-bottom: 1px solid var(--border);
		background: var(--surface);
		flex-wrap: wrap;
	}
	.vt-left {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
		flex: 0 1 auto;
	}
	.vt-file-ic {
		color: var(--accent);
		display: grid;
		place-items: center;
		flex-shrink: 0;
	}
	.vt-file-ic svg {
		width: 17px;
		height: 17px;
		stroke-width: 1.6;
	}
	.vt-file {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.32;
	}
	.vt-name {
		font-size: 13px;
		font-weight: 500;
		color: var(--text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
	}
	.vt-meta {
		font-size: 11.5px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}
	// center controls
	.vt-center {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 auto;
		flex-wrap: wrap;
	}
	.vt-group {
		display: flex;
		align-items: center;
		gap: 1px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 2px;
	}
	.vt-btn {
		width: 28px;
		height: 28px;
		border-radius: 6px;
		background: transparent;
		border: none;
		color: var(--text-2);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.vt-btn:hover:not(:disabled) {
		background: var(--hover);
		color: var(--text);
	}
	.vt-btn:disabled {
		opacity: 0.35;
		cursor: not-allowed;
	}
	.vt-btn svg {
		width: 15px;
		height: 15px;
		stroke-width: 1.8;
	}
	.vt-page {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12.5px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
		padding: 0 6px;
	}
	.vt-page b {
		color: var(--text);
		font-weight: 600;
	}
	.vt-sep {
		color: var(--muted-2);
	}
	.vt-zoom-wrap {
		position: relative;
	}
	.vt-zoom {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 46px;
		height: 28px;
		padding: 0 7px;
		font-size: 12.5px;
		font-weight: 500;
		color: var(--text-2);
		background: transparent;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		font-variant-numeric: tabular-nums;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.vt-zoom:hover {
		background: var(--hover);
		color: var(--text);
	}
	.vt-zoom svg {
		width: 12px;
		height: 12px;
		opacity: 0.6;
	}
	.vt-zoom-menu {
		position: absolute;
		top: calc(100% + 6px);
		left: 50%;
		transform: translateX(-50%);
		z-index: 30;
		min-width: 152px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 10px;
		box-shadow: var(--shadow-pop);
		padding: 5px;
		display: none;
	}
	.vt-zoom-menu.open {
		display: block;
	}
	.vt-zoom-menu button {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 7px 10px;
		border-radius: 7px;
		background: transparent;
		border: none;
		font: inherit;
		font-size: 13px;
		color: var(--text-2);
		text-align: left;
		cursor: pointer;
	}
	.vt-zoom-menu button:hover {
		background: var(--hover);
		color: var(--text);
	}
	.vt-zoom-menu .vt-ck {
		margin-left: auto;
		width: 14px;
		height: 14px;
		color: var(--accent);
		opacity: 0;
		stroke-width: 2.4;
	}
	.vt-zoom-menu button.sel {
		color: var(--text);
		font-weight: 500;
	}
	.vt-zoom-menu button.sel .vt-ck {
		opacity: 1;
	}
	.vt-right {
		display: flex;
		align-items: center;
		gap: 4px;
		flex-shrink: 0;
		margin-left: auto;
	}
	.vt-icon {
		width: 32px;
		height: 32px;
		border-radius: 7px;
		background: transparent;
		border: 1px solid transparent;
		color: var(--text-2);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			border-color 0.12s,
			color 0.12s;
	}
	.vt-icon:hover {
		background: var(--surface-2);
		border-color: var(--border);
		color: var(--text);
	}
	.vt-icon svg {
		width: 16px;
		height: 16px;
		stroke-width: 1.7;
	}
	.vt-icon.is-copied {
		color: var(--green);
		background: var(--green-bg);
		border-color: transparent;
	}
	.vt-icon.is-copied:hover {
		color: var(--green);
		background: var(--green-bg);
	}
	.vt-open {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 13px;
		font-weight: 500;
		color: var(--text-2);
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 6px 11px;
		transition:
			background 0.12s,
			border-color 0.12s,
			color 0.12s;
	}
	.vt-open:hover {
		background: var(--surface-2);
		border-color: var(--border-2);
		color: var(--text);
	}
	.vt-open svg {
		width: 14px;
		height: 14px;
		stroke-width: 1.7;
	}
	// document tray
	// align-items:flex-start (not center) + margin:0 auto on the page keeps it
	// centred when it fits but lets it scroll (incl. the left edge) when zoomed past
	// the container width, instead of clipping.
	.viewer-body {
		background: #f4f5f7;
		height: 820px;
		overflow: auto;
		padding: 32px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.paper-page {
		background: #fff;
		border-radius: 2px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
		line-height: 0;
		margin: 0 auto;
	}
	.paper-page canvas {
		display: block;
		border-radius: 2px;
		max-width: 100%;
	}
	.viewer-frame {
		width: 100%;
		height: 100%;
		min-height: 760px;
		border: 0;
		background: #fff;
		border-radius: 4px;
	}
	.viewer-loading {
		margin: auto;
		color: var(--muted);
		font-size: 14px;
	}
	.viewer-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		min-height: 300px;
		color: var(--muted);
		font-size: 14px;
	}
	// resume empty state
	.rt-empty-card {
		padding: 30px 24px;
	}
	.rt-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		padding: 30px 0;
	}
	.rt-empty-icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.rt-empty-icon svg {
		display: block;
	}
	.rt-empty-sub {
		font-size: 13.5px;
		color: var(--muted);
		text-align: center;
		margin: 0;
		max-width: 380px;
		line-height: 1.5;
	}
	// highlights bar
	.rt-ai-bar {
		padding: 13px 18px;
		overflow: hidden;
	}
	.rt-ai-row {
		display: flex;
		align-items: center;
		gap: 18px;
		cursor: pointer;
	}
	.rt-ai-lead {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.rt-ai-spark {
		color: var(--accent);
		display: grid;
		place-items: center;
	}
	.rt-ai-spark svg {
		width: 16px;
		height: 16px;
	}
	.rt-ai-title {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.rt-ai-facts {
		display: flex;
		align-items: center;
		gap: 20px;
		flex: 1;
		min-width: 0;
	}
	.rt-ai-fact {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.rt-ai-flabel {
		font-size: 9.5px;
		font-weight: 600;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--muted-2);
	}
	.rt-ai-fval {
		font-size: 13px;
		font-weight: 500;
		color: var(--text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.rt-ai-vsep {
		width: 1px;
		height: 28px;
		background: var(--border);
		flex-shrink: 0;
	}
	.rt-ai-tools {
		display: flex;
		align-items: center;
		gap: 2px;
		flex-shrink: 0;
		margin-left: auto;
	}
	.rt-ai-icon {
		width: 30px;
		height: 30px;
		border-radius: 7px;
		background: transparent;
		border: 1px solid transparent;
		color: var(--muted);
		display: grid;
		place-items: center;
		cursor: pointer;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.rt-ai-icon:hover {
		background: var(--hover);
		color: var(--text);
	}
	.rt-ai-icon svg {
		width: 15px;
		height: 15px;
	}
	.rt-ai-collapsed {
		display: none;
		align-items: center;
		gap: 9px;
		cursor: pointer;
	}
	.rt-ai-bar.collapsed .rt-ai-row {
		display: none;
	}
	.rt-ai-bar.collapsed .rt-ai-collapsed {
		display: flex;
	}
	.rt-ai-cl-text {
		font-size: 13px;
		color: var(--text-2);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.rt-ai-cl-text b {
		font-weight: 600;
		color: var(--text);
	}
	.rt-ai-cl-chev {
		margin-left: auto;
		color: var(--muted-2);
		width: 15px;
		height: 15px;
		transform: rotate(-90deg);
		flex-shrink: 0;
	}
	// tip line
	.viewer-tip {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 4px;
		padding: 2px 2px;
		font-size: 12.5px;
		color: var(--muted-2);
	}
	.viewer-tip svg {
		width: 15px;
		height: 15px;
		stroke-width: 1.7;
		flex-shrink: 0;
	}

	// ═══ Evaluation tab ═══
	.pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		font-weight: 500;
		padding: 3px 9px;
		border-radius: 7px;
		white-space: nowrap;
	}
	.pill .dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.pill svg {
		width: 13px;
		height: 13px;
		flex-shrink: 0;
	}
	.pill.green {
		color: var(--green);
		background: var(--green-bg);
	}
	.pill.green .dot {
		background: var(--green);
	}
	.pill.amber {
		color: var(--amber);
		background: var(--amber-bg);
	}
	.pill.amber .dot {
		background: var(--amber);
	}
	.pill.red {
		color: var(--red);
		background: var(--red-bg);
	}
	.pill.red .dot {
		background: var(--red);
	}
	.pill.neutral {
		color: var(--text-2);
		background: var(--surface-2);
		border: 1px solid var(--border);
	}
	.pill.neutral .dot {
		background: var(--muted-2);
	}

	.score-card {
		padding: 22px 24px;
	}
	.score-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 22px;
	}
	.score-head .left {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.score-actions {
		position: relative;
	}
	.calc-link {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: 12.5px;
		font-weight: 500;
		color: var(--text-2);
		background: transparent;
		border: none;
		padding: 6px 9px;
		border-radius: 7px;
		transition:
			background 0.12s,
			color 0.12s;
		cursor: pointer;
	}
	.calc-link:hover {
		background: var(--hover);
		color: var(--text);
	}
	.calc-link svg {
		width: 13px;
		height: 13px;
		color: var(--muted);
	}
	.calc-pop {
		position: absolute;
		top: calc(100% + 8px);
		right: 0;
		width: 286px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 11px;
		box-shadow: var(--shadow-pop);
		padding: 15px 16px;
		z-index: 30;
	}
	.calc-pop h4 {
		margin: 0 0 7px;
		font-size: 13px;
		font-weight: 600;
		color: var(--text);
	}
	.calc-pop p {
		margin: 0;
		font-size: 12.5px;
		line-height: 1.55;
		color: var(--muted);
	}
	.calc-pop .calc-rows {
		margin: 11px 0;
		display: flex;
		flex-direction: column;
		gap: 7px;
	}
	.calc-pop .calc-rows .calc-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12.5px;
		color: var(--text-2);
		margin: 0;
	}
	.calc-pop .calc-rows .calc-row b {
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}
	.calc-pop .calc-note {
		font-size: 11.5px;
		color: var(--muted-2);
		line-height: 1.5;
		border-top: 1px solid var(--border);
		padding-top: 10px;
		margin-top: 2px;
	}
	.score-body {
		display: flex;
		align-items: center;
		gap: 32px;
	}
	.score-hero {
		flex: 0 0 38%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.ring-wrap {
		position: relative;
	}
	.score-hero .ring-wrap {
		width: 134px;
		height: 134px;
	}
	.ring-svg {
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
		display: block;
	}
	.ring-track {
		fill: none;
		stroke: #ececee;
	}
	.ring-fill {
		fill: none;
		stroke: var(--accent);
		stroke-linecap: round;
		transition: stroke-dasharray 0.6s ease;
	}
	.ring-center {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.ring-num {
		font-size: 38px;
		font-weight: 600;
		letter-spacing: -0.03em;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		color: var(--text);
	}
	.ring-lbl {
		font-size: 12px;
		color: var(--muted);
		margin-top: 3px;
	}
	.score-div {
		width: 1px;
		align-self: stretch;
		background: var(--border);
		margin: 6px 0;
	}
	.score-breaks {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 18px;
		min-width: 0;
	}
	.brk {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 7px 12px;
		align-items: center;
	}
	.brk-label {
		font-size: 14px;
		font-weight: 500;
		color: var(--text);
	}
	.brk-val {
		font-size: 14px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		color: var(--text);
		text-align: right;
	}
	.brk-bar {
		grid-column: 1 / -1;
		height: 7px;
		border-radius: 99px;
		background: #ececee;
		overflow: hidden;
	}
	.brk-bar i {
		display: block;
		height: 100%;
		border-radius: 99px;
		background: var(--accent);
		transition: width 0.6s ease;
	}

	.subtabs {
		display: flex;
		gap: 22px;
		border-bottom: 1px solid var(--border);
		margin-bottom: 22px;
		flex-wrap: wrap;
	}
	.subtab {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 10px 1px;
		background: transparent;
		border: none;
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		color: var(--muted);
		position: relative;
		transition: color 0.12s;
	}
	.subtab:hover {
		color: var(--text-2);
	}
	.subtab.active {
		color: var(--accent);
	}
	.subtab.active::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 2px;
		background: var(--accent);
		border-radius: 2px 2px 0 0;
	}
	.subtab .cb {
		font-size: 10.5px;
		font-weight: 600;
		color: var(--muted);
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 999px;
		padding: 0 6px;
		line-height: 16px;
		min-width: 16px;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}
	.subtab.active .cb {
		background: var(--accent);
		border-color: var(--accent);
		color: #fff;
	}
	.subpanel {
		display: none;
	}
	.subpanel.active {
		display: block;
	}

	.eval-sec-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 14px;
	}
	.eval-sec-head h3 {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
		letter-spacing: -0.005em;
	}
	.eval-sec-head .subln {
		font-size: 13px;
		color: var(--muted);
		margin-top: 3px;
	}
	.eval-seg {
		display: inline-flex;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 2px;
		gap: 1px;
	}
	.eval-seg button {
		border: none;
		background: transparent;
		color: var(--muted);
		font: inherit;
		font-size: 12.5px;
		font-weight: 500;
		padding: 5px 11px;
		border-radius: 6px;
		font-variant-numeric: tabular-nums;
		transition:
			color 0.12s,
			background 0.12s;
		cursor: pointer;
	}
	.eval-seg button.active {
		background: var(--surface-2);
		color: var(--text);
		box-shadow: inset 0 0 0 1px var(--border);
	}
	.eval-seg button:hover:not(.active) {
		color: var(--text);
	}
	.empty--inline {
		padding: 32px 24px;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
	}
	.empty--inline p {
		margin: 0;
		font-size: 13px;
		color: var(--muted);
	}
	.btn-outline {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 13px;
		font-weight: 500;
		color: var(--accent);
		background: var(--surface);
		border: 1px solid var(--accent-100);
		border-radius: 8px;
		padding: 7px 13px;
		transition:
			background 0.12s,
			border-color 0.12s;
	}
	.btn-outline:hover {
		background: var(--accent-50);
		border-color: var(--accent);
	}
	.btn-outline svg {
		width: 14px;
		height: 14px;
		stroke-width: 2;
	}

	.asmt-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.asmt {
		display: flex;
		align-items: center;
		gap: 14px;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: 15px 18px;
		transition: border-color 0.12s;
	}
	.asmt:hover {
		border-color: var(--border-2);
	}
	.asmt-ic {
		width: 34px;
		height: 34px;
		border-radius: 9px;
		background: var(--accent-50);
		color: var(--accent);
		display: grid;
		place-items: center;
		flex-shrink: 0;
	}
	.asmt-ic svg {
		width: 18px;
		height: 18px;
		stroke-width: 1.7;
	}
	.asmt-mid {
		flex: 1;
		min-width: 0;
	}
	.asmt-title {
		font-size: 14.5px;
		font-weight: 500;
		color: var(--text);
	}
	.asmt-meta {
		font-size: 12.5px;
		color: var(--muted);
		margin-top: 3px;
	}
	.asmt-status {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 5px;
		flex-shrink: 0;
	}
	.asmt-sub {
		font-size: 12px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
	}

	.quiz-strip {
		display: flex;
		align-items: stretch;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
		padding: 18px 6px;
		margin-bottom: 24px;
		flex-wrap: wrap;
	}
	.qs-sec {
		flex: 1;
		padding: 2px 22px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		justify-content: center;
		min-width: 0;
	}
	.qs-sec + .qs-sec {
		border-left: 1px solid var(--border);
	}
	.qs-lbl {
		font-size: 11.5px;
		color: var(--muted);
		font-weight: 500;
	}
	.qs-val {
		font-size: 24px;
		font-weight: 600;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
		color: var(--text);
		line-height: 1;
	}
	.qs-val.accent {
		color: var(--accent);
	}
	.qs-overall {
		display: flex;
		align-items: center;
		gap: 13px;
	}
	.qs-ring {
		width: 54px;
		height: 54px;
		flex-shrink: 0;
	}
	.qs-ring .ring-num {
		font-size: 13.5px;
		font-weight: 600;
	}

	.qz-list,
	.sq-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.qz,
	.sq {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: 16px 18px;
	}
	.qz-top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 14px;
	}
	.qz-q {
		font-size: 14px;
		font-weight: 500;
		color: var(--text);
		line-height: 1.45;
	}
	.qz-q b {
		font-weight: 600;
		margin-right: 7px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
	}
	.qz-ans {
		margin-top: 13px;
	}
	.ans-lbl {
		font-size: 10.5px;
		font-weight: 600;
		letter-spacing: 0.07em;
		text-transform: uppercase;
		color: var(--muted-2);
		display: block;
		margin-bottom: 4px;
	}
	.ans-val {
		font-size: 14px;
		color: var(--text);
	}
	.qz-correct {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--border);
	}
	.qz-correct .ans-val {
		color: var(--green);
		font-weight: 500;
	}
	.sq {
		position: relative;
		padding: 17px 20px;
	}
	.sq-top {
		display: flex;
		gap: 11px;
		align-items: flex-start;
	}
	.sq-badge {
		flex-shrink: 0;
		font-size: 11px;
		font-weight: 600;
		color: var(--accent);
		background: var(--accent-50);
		border-radius: 7px;
		padding: 3px 8px;
		font-variant-numeric: tabular-nums;
		line-height: 1.4;
	}
	.sq-q {
		font-size: 14.5px;
		font-weight: 500;
		color: var(--text);
		line-height: 1.45;
		flex: 1;
		min-width: 0;
		padding-right: 34px;
	}
	.sq-status {
		margin-top: 11px;
		padding-left: 33px;
	}
	.sq-copy {
		position: absolute;
		top: 15px;
		right: 16px;
		width: 28px;
		height: 28px;
		border-radius: 7px;
		background: transparent;
		border: 1px solid transparent;
		color: var(--muted-2);
		display: grid;
		place-items: center;
		opacity: 0;
		transition:
			opacity 0.12s,
			background 0.12s,
			color 0.12s,
			border-color 0.12s;
		cursor: pointer;
	}
	.sq:hover .sq-copy {
		opacity: 1;
	}
	.sq-copy:hover {
		background: var(--hover);
		color: var(--text);
		border-color: var(--border);
	}
	.sq-copy svg {
		width: 14px;
		height: 14px;
	}
	.sq-ans {
		margin-top: 13px;
		padding-left: 33px;
	}
	.sq-body {
		font-size: 14px;
		line-height: 1.65;
		color: var(--text-2);
		position: relative;
	}
	.ans-flag {
		display: inline-block;
		font-size: 14px;
		font-weight: 500;
		color: var(--amber);
	}
	.sq-body.clamp {
		max-height: 4.95em;
		overflow: hidden;
	}
	.sq-body a {
		color: var(--accent);
		word-break: break-word;
	}
	.sq-fade {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 42px;
		background: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0),
			var(--surface)
		);
		pointer-events: none;
	}
	.sq-more {
		margin-top: 9px;
		color: var(--accent);
		font-size: 13px;
		font-weight: 500;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
	}
	.sq-more:hover {
		color: var(--accent-600);
	}
	.sq-correct {
		margin-top: 13px;
		padding-top: 0;
		border-top: none;
	}
	.sq-correct .ans-val.correct {
		color: var(--green);
		font-weight: 500;
	}

	// ═══ Assessments tab ═══
	.empty--inline p {
		margin: 0;
		font-size: 13px;
		color: var(--muted);
	}
	.asmt-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		padding: 56px 24px;
		text-align: center;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		background: var(--surface);
	}
	.asmt-empty-ic {
		width: 46px;
		height: 46px;
		border-radius: 12px;
		background: var(--surface-2);
		border: 1px solid var(--border);
		display: grid;
		place-items: center;
		color: var(--muted-2);
	}
	.asmt-empty-ic svg {
		width: 21px;
		height: 21px;
	}
	.asmt-empty p {
		margin: 0;
		font-size: 14px;
		color: var(--muted);
	}
	.asmt-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.asmt-card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		transition: border-color 0.12s;
	}
	.asmt-card:hover {
		border-color: var(--border-2);
	}
	.asmt-card.open {
		border-color: var(--accent-100);
	}
	.asmt-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 15px 18px;
		cursor: pointer;
	}
	.asmt-ic {
		width: 34px;
		height: 34px;
		border-radius: 9px;
		background: var(--accent-50);
		color: var(--accent);
		display: grid;
		place-items: center;
		flex-shrink: 0;
		overflow: hidden;
	}
	.asmt-ic svg {
		width: 18px;
		height: 18px;
	}
	.asmt-mid {
		flex: 1;
		min-width: 0;
	}
	.asmt-title {
		font-size: 14.5px;
		font-weight: 500;
		color: var(--text);
		word-break: break-word;
	}
	.asmt-meta {
		font-size: 12.5px;
		color: var(--muted);
		margin-top: 3px;
		font-variant-numeric: tabular-nums;
	}
	.asmt-status {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 5px;
		flex-shrink: 0;
	}
	.asmt-sub {
		font-size: 12px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
	}
	.asmt-acts {
		display: flex;
		gap: 3px;
		flex-shrink: 0;
		margin-left: 4px;
	}
	.eval-act-btn {
		width: 30px;
		height: 30px;
		border-radius: 7px;
		background: transparent;
		border: 1px solid transparent;
		color: var(--muted);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s,
			border-color 0.12s;
		cursor: pointer;
	}
	.eval-act-btn:hover,
	.eval-act-btn.active {
		background: var(--hover);
		color: var(--text);
		border-color: var(--border);
	}
	.eval-act-btn.del:hover {
		background: var(--red-bg);
		color: var(--red);
		border-color: transparent;
	}
	.eval-act-btn svg {
		width: 15px;
		height: 15px;
	}
	.asmt-detail {
		border-top: 1px solid var(--border);
		padding: 4px 18px 10px;
	}
	.asmt-detail-body {
		padding: 14px 0;
	}
	.asmt-detail-body + .asmt-detail-body {
		border-top: 1px solid var(--border);
	}
	.eval-stat-grid {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
	}
	.eval-stat-card {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 14px;
		display: flex;
		align-items: center;
		gap: 14px;
	}
	.eval-stat-card--chart {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 10px;
		max-width: 180px;
		flex: 0 0 180px;
	}
	.eval-ring-md {
		width: 96px;
		height: 96px;
	}
	.eval-ring-num-md {
		font-size: 22px;
	}
	.eval-stat-cells {
		flex: 1;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		min-width: 0;
	}
	// Pending assessments have no Overall Score ring — let the stat cards fill the row.
	.eval-stat-grid--noscore .eval-stat-cells {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
	.eval-stat-ic {
		width: 38px;
		height: 38px;
		border-radius: 8px;
		background: var(--accent-50);
		color: var(--accent);
		display: grid;
		place-items: center;
		flex-shrink: 0;
	}
	.eval-stat-ic svg {
		width: 20px;
		height: 20px;
	}
	.eval-stat-cell-info {
		min-width: 0;
	}
	.eval-stat-label {
		font-size: 12.5px;
		font-weight: 400;
		color: var(--muted);
		margin: 0;
	}
	.eval-stat-value {
		font-size: 16px;
		font-weight: 600;
		color: var(--text);
		margin: 4px 0 0;
		font-variant-numeric: tabular-nums;
	}

	// ═══ Conversation tab ═══
	.conv-card {
		display: flex;
		flex-direction: column;
		height: 740px;
		overflow: hidden;
	}
	.conv-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 13px 18px;
		border-bottom: 1px solid var(--border);
		flex-shrink: 0;
	}
	.conv-head .ci {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.conv-head .ci .t {
		font-size: 14px;
		font-weight: 500;
		color: var(--text);
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.conv-head .ci .t .ico {
		color: var(--accent);
		display: grid;
		place-items: center;
	}
	.conv-head .ci .t .ico svg {
		width: 15px;
		height: 15px;
		stroke-width: 1.7;
	}
	.conv-head .ci .s {
		font-size: 12px;
		color: var(--muted);
		font-variant-numeric: tabular-nums;
		padding-left: 23px;
	}
	.thread {
		flex: 1;
		overflow-y: auto;
		padding: 8px 24px 16px;
		display: flex;
		flex-direction: column;
		gap: 3px;
		align-items: center;
		justify-content: center;
	}
	.composer-c {
		border-top: 1px solid var(--border);
		padding: 12px 16px 14px;
		flex-shrink: 0;
		background: var(--surface);
	}
	.composer-c textarea {
		width: 100%;
		resize: none;
		min-height: 60px;
		max-height: 180px;
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 11px 13px;
		font-size: 14px;
		line-height: 1.5;
		color: var(--text);
		background: var(--surface-2);
		transition:
			border-color 0.12s,
			box-shadow 0.12s,
			background 0.12s;
	}
	.composer-c textarea::placeholder {
		color: var(--muted-2);
	}
	.composer-c textarea:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-50);
		background: var(--surface);
	}
	.composer-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-top: 10px;
	}
	.fmt {
		display: flex;
		align-items: center;
		gap: 1px;
	}
	.fmt-btn {
		width: 30px;
		height: 30px;
		border-radius: 7px;
		background: transparent;
		border: none;
		color: var(--muted);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s;
	}
	.fmt-btn:hover {
		background: var(--hover);
		color: var(--text);
	}
	.fmt-btn svg {
		width: 16px;
		height: 16px;
		stroke-width: 1.7;
	}
	.send-btn {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		font-size: 13px;
		font-weight: 500;
		color: #fff;
		background: var(--accent);
		border: 1px solid var(--accent);
		border-radius: 8px;
		padding: 7px 15px;
		transition:
			background 0.12s,
			opacity 0.12s;
	}
	.send-btn:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}
	.send-btn svg {
		width: 14px;
		height: 14px;
		stroke-width: 1.8;
	}

	// ═══ Attachment tab ═══
	.att-subln {
		font-size: 13.5px;
		color: var(--muted);
		margin-top: 3px;
	}
	.att-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 11px;
		padding: 84px 24px;
		text-align: center;
	}
	.att-empty .ic {
		width: 48px;
		height: 48px;
		border-radius: 13px;
		background: var(--surface-2);
		border: 1px solid var(--border);
		display: grid;
		place-items: center;
		color: var(--muted-2);
	}
	.att-empty .ic svg {
		width: 23px;
		height: 23px;
		stroke-width: 1.5;
	}
	.att-empty h3 {
		margin: 0;
		font-size: 15px;
		font-weight: 600;
	}
	.att-empty p {
		margin: 0 0 4px;
		font-size: 13px;
		color: var(--muted);
		max-width: 360px;
		line-height: 1.5;
	}

	// ═══ Custom Fields (list / add / edit) ═══
	.att-cf-list {
		display: flex;
		flex-direction: column;
	}
	.att-cf-row {
		display: grid;
		grid-template-columns: 32% 1fr auto;
		gap: 16px;
		align-items: center;
		padding: 13px 0;
		border-bottom: 1px solid var(--border);
	}
	.att-cf-row:first-child {
		padding-top: 4px;
	}
	.att-cf-row:last-child {
		border-bottom: none;
	}
	.att-cf-label {
		font-size: 13.5px;
		font-weight: 500;
		color: var(--text);
		word-break: break-word;
	}
	.att-cf-value {
		font-size: 14px;
		color: var(--text-2);
		min-width: 0;
		overflow-wrap: anywhere;
	}
	.att-cf-value a {
		color: var(--accent);
		display: inline-flex;
		align-items: center;
		gap: 5px;
		text-decoration: none;
	}
	.att-cf-value a:hover {
		color: var(--accent-600);
	}
	.att-cf-value a svg {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
	}
	.att-cf-acts {
		display: flex;
		gap: 3px;
		opacity: 0;
		transition: opacity 0.12s;
		justify-content: flex-end;
	}
	.att-cf-row:hover .att-cf-acts {
		opacity: 1;
	}
	.att-act-btn {
		width: 30px;
		height: 30px;
		border-radius: 7px;
		background: transparent;
		border: 1px solid transparent;
		color: var(--muted);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s,
			border-color 0.12s;
		cursor: pointer;
	}
	.att-act-btn:hover {
		background: var(--hover);
		color: var(--text);
		border-color: var(--border);
	}
	.att-act-btn.del:hover {
		background: var(--red-bg);
		color: var(--red);
		border-color: transparent;
	}
	.att-act-btn svg {
		width: 15px;
		height: 15px;
	}
	.att-cf-add {
		display: grid;
		grid-template-columns: 32% 1fr auto;
		gap: 16px;
		align-items: center;
		padding: 13px 0;
		border-top: 1px solid var(--border);
	}
	.att-cf-add input[type="text"] {
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 8px 11px;
		font: inherit;
		font-size: 13.5px;
		color: var(--text);
		background: var(--surface-2);
		width: 100%;
		transition:
			border-color 0.12s,
			box-shadow 0.12s,
			background 0.12s;
	}
	.att-cf-add input[type="text"]:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 2px var(--accent-50);
		background: var(--surface);
	}
	.att-cf-add-val {
		display: flex;
		gap: 8px;
		min-width: 0;
	}
	.att-cf-add-val input {
		flex: 1;
		min-width: 0;
	}
	.att-type-sel {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		border: 1px solid var(--border);
		border-radius: 8px;
		background-color: var(--surface);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E7079' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 9px center;
		background-size: 12px;
		padding: 8px 28px 8px 11px;
		font: inherit;
		font-size: 12.5px;
		color: var(--text-2);
		flex-shrink: 0;
		cursor: pointer;
	}
	.att-type-sel:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 2px var(--accent-50);
	}
	.att-cf-add-acts {
		display: flex;
		gap: 4px;
	}
	.att-icon-sm {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		border: 1px solid var(--border);
		background: var(--surface);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s,
			border-color 0.12s;
		cursor: pointer;
	}
	.att-icon-sm.ok {
		color: var(--green);
	}
	.att-icon-sm.ok:hover {
		background: var(--green-bg);
		border-color: transparent;
	}
	.att-icon-sm.no {
		color: var(--muted);
	}
	.att-icon-sm.no:hover {
		background: var(--hover);
		color: var(--text);
	}
	.att-icon-sm:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	.att-icon-sm svg {
		width: 16px;
		height: 16px;
	}
	@media (max-width: 767px) {
		.att-cf-row,
		.att-cf-add {
			grid-template-columns: 1fr;
			gap: 8px;
		}
		.att-cf-acts {
			opacity: 1;
		}
	}

	.file-filters {
		display: flex;
		gap: 6px;
		margin-bottom: 10px;
		flex-wrap: wrap;
	}
	.fchip {
		font-size: 12.5px;
		font-weight: 500;
		color: var(--muted);
		background: transparent;
		border: 1px solid var(--border);
		border-radius: 999px;
		padding: 4px 12px;
		transition:
			background 0.12s,
			color 0.12s,
			border-color 0.12s;
	}
	.fchip:hover {
		background: var(--hover);
		color: var(--text);
	}
	.fchip.active {
		background: var(--accent-50);
		border-color: var(--accent-100);
		color: var(--accent);
	}

	// ═══ Files & Attachments (list) ═══
	.att-file-list {
		display: flex;
		flex-direction: column;
	}
	.att-file-row {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 15px 0;
		border-bottom: 1px solid var(--border);
	}
	.att-file-row:first-child {
		padding-top: 4px;
	}
	.att-file-row:last-child {
		border-bottom: none;
		padding-bottom: 2px;
	}
	.att-file-ic {
		width: 36px;
		height: 36px;
		border-radius: 8px;
		display: grid;
		place-items: center;
		flex-shrink: 0;
	}
	.att-file-ic svg {
		width: 18px;
		height: 18px;
	}
	.fi-pdf {
		background: var(--red-bg);
		color: var(--red);
	}
	.fi-doc {
		background: #e2f1fb;
		color: #0369a1;
	}
	.fi-img {
		background: var(--green-bg);
		color: var(--green);
	}
	.fi-gen {
		background: var(--surface-2);
		color: var(--muted);
	}
	.att-file-mid {
		flex: 1;
		min-width: 0;
	}
	.att-file-name {
		font-size: 14px;
		font-weight: 500;
		color: var(--text);
		cursor: pointer;
		display: inline-block;
		word-break: break-word;
	}
	.att-file-name:hover {
		color: var(--accent);
	}
	.att-file-meta {
		font-size: 12.5px;
		color: var(--muted);
		margin-top: 3px;
	}
	.att-file-desc {
		font-size: 12.5px;
		color: var(--muted);
		font-style: italic;
		margin-top: 3px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 520px;
	}
	.att-file-acts {
		display: flex;
		gap: 3px;
		flex-shrink: 0;
		opacity: 0;
		transition: opacity 0.12s;
	}
	.att-file-row:hover .att-file-acts {
		opacity: 1;
	}

	// ═══ Upload / Update modal ═══
	.att-modal-overlay {
		position: fixed;
		inset: 0;
		background: rgba(15, 15, 20, 0.42);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100000;
		padding: 20px;
	}
	.att-modal {
		width: 480px;
		max-width: 100%;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.4);
		padding: 22px 24px;
		max-height: 90vh;
		overflow: auto;
	}
	.att-modal-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18px;
	}
	.att-modal-head h3 {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: -0.01em;
		color: var(--text);
	}
	.att-modal-close {
		width: 30px;
		height: 30px;
		border-radius: 7px;
		background: transparent;
		border: none;
		color: var(--muted);
		display: grid;
		place-items: center;
		transition:
			background 0.12s,
			color 0.12s;
		cursor: pointer;
	}
	.att-modal-close:hover {
		background: var(--hover);
		color: var(--text);
	}
	.att-modal-close svg {
		width: 16px;
		height: 16px;
	}
	.att-mfield {
		margin-bottom: 16px;
	}
	.att-mlabel {
		font-size: 13px;
		font-weight: 500;
		color: var(--text);
		display: block;
		margin-bottom: 7px;
	}
	.att-mhelp {
		font-size: 12px;
		color: var(--muted);
		font-weight: 400;
	}
	.att-mfield input[type="text"],
	.att-mfield textarea {
		width: 100%;
		border: 1px solid var(--border);
		border-radius: 9px;
		padding: 9px 12px;
		font: inherit;
		font-size: 13.5px;
		color: var(--text);
		background: var(--surface-2);
		transition:
			border-color 0.12s,
			box-shadow 0.12s,
			background 0.12s;
	}
	.att-mfield input[type="text"]::placeholder,
	.att-mfield textarea::placeholder {
		color: var(--muted-2);
	}
	.att-mfield input[type="text"]:focus,
	.att-mfield textarea:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-50);
		background: var(--surface);
	}
	.att-mfield textarea {
		resize: vertical;
		min-height: 62px;
		line-height: 1.5;
	}
	.att-dropzone {
		border: 1.5px dashed var(--border-2);
		border-radius: 12px;
		padding: 28px 24px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		text-align: center;
		cursor: pointer;
		transition:
			border-color 0.12s,
			background 0.12s;
	}
	.att-dropzone:hover,
	.att-dropzone.drag {
		border-color: var(--accent);
		background: var(--accent-50);
	}
	.att-dropzone svg {
		width: 30px;
		height: 30px;
		color: var(--muted-2);
	}
	.att-dz-txt {
		font-size: 13.5px;
		color: var(--text-2);
	}
	.att-dz-txt b {
		color: var(--accent);
		font-weight: 500;
	}
	.att-dz-help {
		font-size: 12px;
		color: var(--muted);
		margin-top: 8px;
	}
	.att-error {
		font-size: 12px;
		color: var(--red);
		margin-top: 6px;
	}
	.att-dz-error {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.att-dz-error svg {
		width: 13px;
		height: 13px;
		flex-shrink: 0;
	}
	.att-file-pick {
		display: flex;
		align-items: center;
		gap: 11px;
		border: 1px solid var(--border);
		border-radius: 10px;
		padding: 10px 12px;
		margin-top: 10px;
	}
	.att-fp-ic {
		width: 34px;
		height: 34px;
		border-radius: 8px;
		display: grid;
		place-items: center;
		flex-shrink: 0;
	}
	.att-fp-ic svg {
		width: 17px;
		height: 17px;
	}
	.att-fp-mid {
		flex: 1;
		min-width: 0;
	}
	.att-fp-name {
		font-size: 13.5px;
		font-weight: 500;
		color: var(--text);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.att-fp-size {
		font-size: 12px;
		color: var(--muted);
		margin-top: 1px;
	}
	.att-fp-bar {
		height: 5px;
		border-radius: 24px;
		background: #dce2f2;
		margin-top: 6px;
		overflow: hidden;
	}
	.att-fp-fill {
		height: 100%;
		background: var(--accent);
		border-radius: 24px;
		transition: width 0.3s ease-in-out;
	}
	.att-fp-x {
		width: 26px;
		height: 26px;
		border-radius: 6px;
		border: none;
		background: transparent;
		color: var(--muted);
		display: grid;
		place-items: center;
		flex-shrink: 0;
		transition:
			background 0.12s,
			color 0.12s;
		cursor: pointer;
	}
	.att-fp-x:hover {
		background: var(--hover);
		color: var(--text);
	}
	.att-fp-x svg {
		width: 14px;
		height: 14px;
	}
	.att-modal-foot {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 22px;
	}
	.att-btn-ghost {
		font-size: 13px;
		font-weight: 500;
		color: var(--muted);
		background: transparent;
		border: 1px solid transparent;
		border-radius: 8px;
		padding: 8px 14px;
		transition:
			background 0.12s,
			color 0.12s;
		cursor: pointer;
	}
	.att-btn-ghost:hover {
		background: var(--hover);
		color: var(--text);
	}
	.att-btn-solid {
		font-size: 13px;
		font-weight: 500;
		color: #fff;
		background: var(--accent);
		border: 1px solid var(--accent);
		border-radius: 8px;
		padding: 8px 16px;
		transition:
			background 0.12s,
			opacity 0.12s;
		cursor: pointer;
	}
	.att-btn-solid:hover:not(:disabled) {
		background: var(--accent-600);
	}
	.att-btn-solid:disabled {
		opacity: 0.45;
		cursor: not-allowed;
	}
	// Assessment assign/update modal fields
	.asmt-req {
		color: var(--red);
	}
	.asmt-label-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 7px;
	}
	.asmt-label-row .att-mlabel {
		margin-bottom: 0;
	}
	.asmt-assigned-link {
		font-size: 12px;
		font-weight: 500;
		color: var(--accent);
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
	}
	.asmt-assigned-link:hover {
		text-decoration: underline;
	}
	.asmt-select {
		width: 100%;
		border: 1px solid var(--border);
		border-radius: 9px;
		padding: 9px 12px;
		font: inherit;
		font-size: 13.5px;
		color: var(--text);
		background: var(--surface-2);
		transition:
			border-color 0.12s,
			box-shadow 0.12s,
			background 0.12s;
	}
	.asmt-select:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-50);
		background: var(--surface);
	}
	.asmt-select:disabled {
		opacity: 0.7;
		cursor: not-allowed;
	}
	.asmt-select.has-err {
		border-color: var(--red);
	}
	.asmt-readonly {
		width: 100%;
		border: 1px solid var(--border);
		border-radius: 9px;
		padding: 11px 13px;
		font-size: 14px;
		color: var(--text-2);
		background: var(--hover);
	}
	.asmt-note {
		font-size: 12px;
		color: var(--muted);
		line-height: 1.5;
		margin: 0;
		flex: 1;
	}
	// Assign/Update modals need their dropdown + calendar to escape the modal box.
	.att-modal--overflow {
		overflow: visible;
	}
	.asmt-foot {
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}
	.asmt-foot-btns {
		display: flex;
		gap: 8px;
		flex-shrink: 0;
	}
	// react-select — clean indigo theme scoped to the assessment modals
	.asmt-rs .react-select__control {
		min-height: 44px;
		border-radius: 9px;
		border: 1px solid var(--border);
		background: var(--surface-2);
		box-shadow: none;
		font-size: 14px;
		transition:
			border-color 0.12s,
			box-shadow 0.12s,
			background 0.12s;
		cursor: pointer;
	}
	.asmt-rs .react-select__control:hover {
		border-color: var(--border-2);
	}
	.asmt-rs .react-select__control--is-focused {
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-50);
		background: var(--surface);
	}
	.asmt-rs.asmt-rs--err .react-select__control {
		border-color: var(--red);
	}
	.asmt-rs--disabled .react-select__control,
	.asmt-rs .react-select__control--is-disabled {
		background: var(--hover);
		border-color: var(--border);
		opacity: 1;
		cursor: not-allowed;
	}
	.asmt-rs .react-select__value-container {
		padding: 2px 14px;
	}
	.asmt-rs .react-select__placeholder {
		color: var(--muted-2);
	}
	.asmt-rs .react-select__single-value {
		color: var(--text);
	}
	.asmt-rs .react-select__input-container,
	.asmt-rs .react-select__input {
		color: var(--text);
	}
	.asmt-rs .react-select__indicator-separator {
		display: none;
	}
	.asmt-rs .react-select__dropdown-indicator {
		color: var(--muted);
		padding: 8px 12px;
	}
	.asmt-rs .react-select__dropdown-indicator:hover {
		color: var(--text-2);
	}
	.asmt-rs .react-select__menu {
		margin-top: 6px;
		border-radius: 11px;
		border: 1px solid var(--border);
		background: var(--surface);
		box-shadow: 0 14px 38px -10px rgba(15, 15, 20, 0.28);
		overflow: hidden;
		z-index: 30;
	}
	.asmt-rs .react-select__menu-list {
		padding: 6px;
	}
	.asmt-rs .react-select__option {
		font-size: 14px;
		padding: 10px 12px;
		border-radius: 8px;
		color: var(--text);
		cursor: pointer;
	}
	.asmt-rs .react-select__option--is-focused {
		background: var(--hover);
	}
	.asmt-rs .react-select__option--is-selected {
		background: var(--accent);
		color: #fff;
	}
	.asmt-rs .react-select__notice {
		font-size: 13px;
		color: var(--muted);
		padding: 14px;
	}
	// Expire-date field + react-datetime calendar
	.asmt-date {
		position: relative;
	}
	.asmt-date .rdt,
	.asmt-date input {
		width: 100%;
	}
	.asmt-date-ic {
		position: absolute;
		top: 50%;
		right: 13px;
		transform: translateY(-50%);
		color: var(--muted);
		cursor: pointer;
		display: flex;
		z-index: 2;
	}
	.asmt-date-ic svg {
		width: 17px;
		height: 17px;
	}
	.asmt-date.is-open .asmt-date-ic,
	.asmt-date.has-err .asmt-date-ic {
		color: var(--accent);
	}
	.asmt-date-input {
		width: 100%;
		border: 1px solid var(--border);
		border-radius: 9px;
		padding: 11px 40px 11px 13px;
		font: inherit;
		font-size: 14px;
		color: var(--text);
		background: var(--surface-2);
		cursor: pointer;
		transition:
			border-color 0.12s,
			box-shadow 0.12s,
			background 0.12s;
	}
	.asmt-date-input::placeholder {
		color: var(--muted-2);
	}
	.asmt-date-input:focus {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--accent-50);
		background: var(--surface);
	}
	.asmt-date.has-err .asmt-date-input {
		border-color: var(--red);
	}
	// Opens upward (bottom:100%) so it never covers the modal footer buttons.
	.asmt-date .rdtPicker {
		top: auto;
		bottom: 100%;
		width: 280px;
		padding: 12px;
		margin: 0 0 10px;
		border: 1px solid var(--border);
		border-radius: 12px;
		background: var(--surface);
		box-shadow: 0 -14px 42px -12px rgba(15, 15, 20, 0.3);
	}
	// Downward caret linking the popup to the field (border layer + fill layer).
	.asmt-date .rdtPicker:before {
		content: "";
		position: absolute;
		bottom: -9px;
		left: 22px;
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-top: 9px solid var(--border);
	}
	.asmt-date .rdtPicker:after {
		content: "";
		position: absolute;
		bottom: -7px;
		left: 23px;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid var(--surface);
	}
	.asmt-date .rdtPicker th,
	.asmt-date .rdtPicker td {
		border: none;
	}
	.asmt-date .rdtPicker .rdtSwitch {
		font-size: 14px;
		font-weight: 600;
		color: var(--text);
		border-radius: 8px;
	}
	.asmt-date .rdtPicker .rdtPrev,
	.asmt-date .rdtPicker .rdtNext {
		font-size: 18px;
		color: var(--muted);
		border-radius: 8px;
	}
	.asmt-date .rdtPicker thead tr:first-child th {
		height: 34px;
	}
	.asmt-date .rdtPicker thead tr:first-child th:hover {
		background: var(--hover);
	}
	.asmt-date .rdtPicker .dow {
		font-size: 11px;
		font-weight: 600;
		color: var(--muted);
		text-transform: uppercase;
		padding-bottom: 6px;
	}
	.asmt-date .rdtPicker td.rdtDay {
		height: 34px;
		width: 34px;
		border-radius: 8px;
		color: var(--text);
		font-size: 13px;
	}
	.asmt-date .rdtPicker td.rdtDay:hover {
		background: var(--hover);
	}
	.asmt-date .rdtPicker td.rdtOld,
	.asmt-date .rdtPicker td.rdtNew {
		color: var(--muted-2);
	}
	.asmt-date .rdtPicker td.rdtToday:before {
		border-bottom-color: var(--accent);
	}
	.asmt-date .rdtPicker td.rdtActive,
	.asmt-date .rdtPicker td.rdtActive:hover {
		background: var(--accent);
		color: #fff;
		text-shadow: none;
	}
	.asmt-date .rdtPicker td.rdtDisabled,
	.asmt-date .rdtPicker td.rdtDisabled:hover {
		color: var(--muted-2);
		opacity: 0.45;
		cursor: not-allowed;
		background: none;
	}
	@media (max-width: 767px) {
		.att-file-acts {
			opacity: 1;
		}
		.att-file-desc {
			white-space: normal;
		}
	}
	.cf-list {
		display: flex;
		flex-direction: column;
	}
	.cf-row {
		display: grid;
		grid-template-columns: 32% 1fr auto;
		gap: 16px;
		align-items: center;
		padding: 13px 0;
		border-bottom: 1px solid var(--border);
	}
	.cf-row:last-child {
		border-bottom: none;
	}
	.cf-label {
		font-size: 13.5px;
		font-weight: 500;
		color: var(--text);
	}
	.cf-value {
		font-size: 14px;
		color: var(--text-2);
		min-width: 0;
		overflow-wrap: anywhere;
	}

	// ── responsive ──
	@media (max-width: 1199px) {
		.ejc-layout {
			flex-direction: column;
		}
		.ejc-col-right {
			flex-basis: auto;
			width: 100%;
			max-width: none;
		}
	}
	@media (max-width: 1180px) {
		.ai-facts {
			flex-wrap: wrap;
			gap: 8px 18px;
		}
		.ai-vsep {
			display: none;
		}
		.rt-ai-facts {
			flex-wrap: wrap;
			gap: 8px 18px;
		}
		.rt-ai-vsep {
			display: none;
		}
	}
	@media (max-width: 767px) {
		.score-body {
			flex-direction: column;
			gap: 18px;
		}
		.score-div {
			display: none;
		}
		.score-hero {
			flex-basis: auto;
		}
		.cand-head {
			flex-wrap: wrap;
		}
		.quiz-strip {
			flex-wrap: wrap;
			gap: 14px 0;
		}
		.qs-sec {
			flex: 1 1 50%;
		}
		.eval-sec-head {
			flex-direction: column;
			align-items: flex-start;
		}
		.eval-stat-card--chart {
			max-width: none;
			flex: 1 1 100%;
		}
		.eval-stat-cells {
			grid-template-columns: 1fr;
		}
	}
	@media (max-width: 560px) {
		.cf-row {
			grid-template-columns: 1fr;
			gap: 6px;
		}
		.sal-cell.right {
			border-left: none;
			padding-left: 0;
		}
	}
	@media (max-width: 520px) {
		.calc-link span,
		.calc-pop {
			font-size: 12px;
		}
		.calc-pop {
			width: 240px;
		}
	}
}

// ── Force the WP/plugin wrapper that holds the candidate-details app to be a
// full-width block. A flex ancestor was shrink-wrapping `.ejc-app` to its
// content width (collapsing the left column + leaving a gap). Scoped via :has()
// so ONLY the candidate-details page is affected, never other admin pages.
.content-area__body:has(> .ejc-app) {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}
.content-area:has(.ejc-app) {
	display: block !important;
	width: 100% !important;
}
#easyjobs-react:has(.ejc-app) {
	display: block !important;
	width: 100% !important;
}

// ── DETERMINISTIC layout override (high specificity, explicit widths) ──
// flex-grow on the left column was being defeated (rendered like space-between).
// Use an explicit width so the columns add up to exactly 100% regardless of
// flex-grow / justify-content behaviour or any external rule.
.ejc-app .ejc-content .ejc-layout {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	gap: 16px !important;
	width: 100% !important;
}
.ejc-app .ejc-content .ejc-layout > .ejc-col-left {
	flex: 0 0 calc(66.6666% - 8px) !important;
	width: calc(66.6666% - 8px) !important;
	max-width: calc(66.6666% - 8px) !important;
	min-width: 0 !important;
}
.ejc-app .ejc-content .ejc-layout > .ejc-col-right {
	flex: 0 0 calc(33.3333% - 8px) !important;
	width: calc(33.3333% - 8px) !important;
	max-width: calc(33.3333% - 8px) !important;
}
@media (max-width: 1199px) {
	.ejc-app .ejc-content .ejc-layout {
		flex-direction: column !important;
	}
	.ejc-app .ejc-content .ejc-layout > .ejc-col-left,
	.ejc-app .ejc-content .ejc-layout > .ejc-col-right {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 auto !important;
	}
}

// ── Candidate-details Conversation tab: size the reused Messages thread ──
// The Messages component styles live under `.ej-messages` and use CSS vars for
// the pane height; scope a shorter height so the thread fits under the header.
.ejc-app .panel.active .ej-messages.ejc-conv {
	display: flex;
	--ejc-pane-h: calc(100vh - 300px);
	--ejc-pane-min: 460px;
	width: 100%;
	padding: 0;
}
.ejc-app .panel.active .ej-messages.ejc-conv .ej-msg-thread {
	width: 100%;
}
// The reused Messages screen turns the thread into a slide-in overlay
// (position:absolute + translateX(100%)) below 1100px for its native single-pane
// mode. The details Conversation tab has no list to slide over, so keep the
// thread a plain in-flow block at every width — otherwise it slides off-screen
// and breaks the layout on mobile.
.ejc-app .panel.active .ej-messages.ejc-conv .ej-msg-thread {
	position: static;
	inset: auto;
	transform: none;
	z-index: auto;
	box-shadow: none;
	height: var(--ejc-pane-h);
}
.ejc-app .panel.active .ej-messages.ejc-conv .ej-msg-thread__back {
	display: none !important;
}

// ── Candidate-details loading skeleton ──────────────────────────────────────
.ejc-app .ejc-sk-card {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.ejc-app .ejc-sk-hdr {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.ejc-app .ejc-sk-hdr-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ejc-app .ejc-sk-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 4px;
}
.ejc-app .ejc-sk-tabs {
	display: flex;
	gap: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.ejc-app .ejc-sk-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}
.ejc-app .ejc-sk-lines {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ejc-app .ejc-sk {
	display: block;
	background: linear-gradient(
		90deg,
		var(--hover) 8%,
		var(--hover-2) 20%,
		var(--hover) 34%
	);
	background-size: 200% 100%;
	animation: ejc-sk-shimmer 1.3s linear infinite;
}
@keyframes ejc-sk-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ejc-app .ejc-sk {
		animation: none;
	}
}