/* ===========================
   Reset & Base
   =========================== */
* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}
::-webkit-scrollbar {
	display: none;
}
.hidden {
	display: none !important;
}

/* ===========================
   Design Tokens
   =========================== */
:root {
	--blue-dark: rgb(30, 64, 88);
	--red-rich: #a8424c;
	--grey-light: #f3f3f2;
	--grey-mid: #8591a9;
	--white-soft: #ffffff;

	/* Table row sizing */
	--row-lines: 3; /* visible text lines per row */
	--lh: 1.35; /* line-height used in cells */
	--lh-px: 20px; /* integer line-height used by the .cell clamp */
	--cell-vpad: 4px;

	/* Actions column (final width) */
	--actions-w: 168px;
}

/* ===========================
   Typography
   =========================== */
body,
input,
textarea,
label,
button {
	font-family:
		"Segoe UI",
		system-ui,
		-apple-system,
		Arial,
		sans-serif;
	font-size: 14px;
	color: var(--blue-dark);
}

/* ===========================
   Top nav — hidden in editor (hamburger moves into repo-header)
   =========================== */
.top-nav {
	display: none !important;
}

/* ===========================
   Slide-up Detail Editor
   =========================== */
#detail-editor {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50vh;
	z-index: 10000;
	background: var(--grey-light);
	border-top: 2px solid #ccc;
	padding: 1em;
	overflow: auto;
}
#close-button {
	position: absolute;
	top: 5px;
	right: 10px;
	background: none;
	border: none;
	font-size: 18px;
	color: red;
	cursor: pointer;
}
#detail-editor form {
	display: grid;
	gap: 1em;
	height: calc(100% - 4em);
	grid-template-columns: 250px 1fr;
	grid-template-rows: auto 1fr auto;
}
.editor-sidebar {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.8em;
	background: #fff;
	border-right: 1px solid var(--grey-mid);
	border-radius: 4px;
	max-height: 100%;
	overflow-y: auto;
}
.editor-sidebar input {
	border: 1px solid var(--grey-mid);
	padding: 0.4em;
	border-radius: 3px;
}
.editor-main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1em;
	overflow: auto !important;
	padding-left: 0.8em;
}
.field-group {
	display: flex;
	flex-direction: column;
}
.field-group label {
	font-weight: 600;
	margin-bottom: 0.25em;
	color: var(--blue-dark);
}
.field-group input[type="text"],
textarea:not(.rich-text) {
	width: 100%;
	border: 1px solid var(--grey-mid);
	padding: 0.4em;
	border-radius: 3px;
	background: var(--white-soft);
}
textarea.rich-text {
	width: 100%;
	height: 90px;
	resize: vertical;
	padding: 0.5em;
	border: 1px solid var(--grey-mid);
	border-radius: 4px;
	background: var(--white-soft);
}
.editor-footer {
	grid-column: 1/-1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 0.5em;
	border-top: 1px solid var(--grey-mid);
	background: var(--grey-light);
}
.editor-footer .field-group {
	flex: 1;
	margin: 0;
}
#save-container {
	display: flex;
	gap: 0.5em;
	margin-left: auto;
}
#detail-editor button[type="submit"] {
	background: var(--blue-dark);
	color: var(--white-soft);
	border: none;
	padding: 0.5em 1em;
	border-radius: 4px;
	cursor: pointer;
}
#detail-editor button[type="submit"]:hover {
	background: var(--grey-mid);
}
#detail-editor button[type="button"] {
	background: var(--red-rich);
	color: var(--white-soft);
	border: none;
	padding: 0.4em 0.8em;
	border-radius: 4px;
	cursor: pointer;
}
#detail-editor button[type="button"]:hover {
	background: #8b333e;
}

/* ===========================
   Data Type dropdown (custom, searchable — "Component · model" + version chip)
   Selectors are scoped under #detail-editor with enough specificity to beat the
   global maroon `#detail-editor button[type="button"]` rule above.
   =========================== */
.custom-dd {
	position: relative;
}
#detail-editor .custom-dd .custom-dd-trigger {
	width: 100%;
	background: var(--white-soft);
	border: 1px solid var(--grey-mid);
	border-radius: 3px;
	padding: 0.4em 0.55em;
	font-family: inherit;
	font-size: 14px;
	color: var(--blue-dark);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-align: left;
	min-height: 38px;
}
#detail-editor .custom-dd .custom-dd-trigger:hover {
	background: var(--white-soft);
}
#detail-editor .custom-dd .custom-dd-trigger:focus {
	outline: none;
	border-color: var(--blue-dark);
	box-shadow: 0 0 0 2px rgba(30, 64, 88, 0.12);
}
#detail-editor .custom-dd .custom-dd-trigger.open {
	border-color: var(--blue-dark);
}
.custom-dd .cdt-main {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.custom-dd .cdt-main .cdt-name {
	font-weight: 600;
	color: var(--blue-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.custom-dd .cdt-main .cdt-name .cdt-model {
	font-weight: 400;
	color: var(--grey-mid);
}
.custom-dd .cdt-main .cdt-sub {
	font-size: 11px;
	color: var(--grey-mid);
	margin-top: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.custom-dd .cdt-placeholder {
	color: var(--grey-mid);
}
.custom-dd .cdt-caret {
	flex: 0 0 auto;
	color: var(--grey-mid);
	transition: transform 0.18s;
}
#detail-editor .custom-dd .custom-dd-trigger.open .cdt-caret {
	transform: rotate(180deg);
}

.custom-dd-pop {
	position: fixed;
	background: var(--white-soft);
	border: 1px solid var(--grey-mid);
	border-radius: 5px;
	box-shadow: 0 8px 24px rgba(30, 64, 88, 0.18);
	z-index: 10050;
	overflow: hidden;
	display: none;
}
.custom-dd-pop.open {
	display: block;
}
.custom-dd-pop .cdd-search-wrap {
	padding: 8px;
	border-bottom: 1px solid var(--grey-light);
}
#detail-editor .custom-dd-pop .cdd-search {
	width: 100%;
	border: 1px solid var(--grey-mid);
	border-radius: 3px;
	padding: 0.35em 0.55em 0.35em 1.9em;
	font-family: inherit;
	font-size: 13px;
	color: var(--blue-dark);
	background: var(--white-soft)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238591a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>")
		no-repeat 0.55em center;
}
#detail-editor .custom-dd-pop .cdd-search:focus {
	outline: none;
	border-color: var(--blue-dark);
}
.custom-dd-pop .cdd-list {
	max-height: 270px;
	overflow-y: auto;
	padding: 4px 0;
}
.custom-dd-pop .cdd-opt {
	padding: 7px 12px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	line-height: 1.25;
	border-left: 3px solid transparent;
}
.custom-dd-pop .cdd-opt:hover,
.custom-dd-pop .cdd-opt.kbd {
	background: var(--grey-light);
	border-left-color: var(--red-rich);
}
.custom-dd-pop .cdd-opt.selected {
	background: #eef3f7;
	border-left-color: var(--blue-dark);
}
/* two-line text column: component on top, source model underneath */
.custom-dd-pop .cdd-opt .cdd-opt-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}
.custom-dd-pop .cdd-opt .cdd-name,
.custom-dd-pop .cdd-opt .cdd-sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.custom-dd-pop .cdd-opt .cdd-name {
	font-weight: 600;
	color: var(--blue-dark);
}
.custom-dd-pop .cdd-opt .cdd-name.cdd-none {
	font-weight: 400;
	color: var(--grey-mid);
}
.custom-dd-pop .cdd-opt .cdd-sub {
	font-size: 11px;
	color: var(--grey-mid);
}
.custom-dd-pop .cdd-opt .chip-ver {
	font-size: 10px;
	color: var(--grey-mid);
	flex: 0 0 auto;
	align-self: center;
}
.custom-dd-pop .cdd-empty {
	padding: 16px 12px;
	text-align: center;
	color: var(--grey-mid);
	font-size: 12.5px;
}
.custom-dd-pop .cdd-opt mark {
	background: #ffe9a8;
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

/* ===========================
   Search Filter Bar — always-visible compact bar in header
   =========================== */
#search-filter-bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	width: 260px;
	background: var(--grey-light);
	border: 1px solid rgba(30, 64, 88, 0.15);
	border-radius: 6px;
	padding: 0 10px;
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}
#search-filter-bar:focus-within {
	border-color: var(--blue-dark);
	box-shadow: 0 0 0 2px rgba(30, 64, 88, 0.12);
}

/* Magnifying glass icon (static, not a button) */
#search-filter-bar .search-icon {
	flex-shrink: 0;
	color: var(--grey-mid);
}

/* Input fills remaining space */
#search-filter-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	font-size: 13px;
	outline: none;
	color: var(--blue-dark);
}
#search-filter-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none;
}
#search-filter-input::placeholder {
	color: var(--grey-mid);
}

/* Match count */
#search-filter-count {
	font-size: 11px;
	color: var(--grey-mid);
	white-space: nowrap;
}

/* Scope dropdown button */
#search-scope-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--grey-mid);
	padding: 2px 4px;
	line-height: 1;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	border-radius: 4px;
}
#search-scope-btn:hover {
	color: var(--blue-dark);
	background: rgba(30, 64, 88, 0.06);
}

/* Scope popover menu */
#search-scope-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	background: var(--white-soft);
	border: 1px solid #c0c6d0;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	z-index: 200;
	display: flex;
	flex-direction: column;
	min-width: 140px;
	overflow: hidden;
}
#search-scope-menu.hidden {
	display: none !important;
}
#search-scope-menu button {
	background: none;
	border: none;
	padding: 8px 14px;
	text-align: left;
	cursor: pointer;
	font-size: 13px;
	color: var(--blue-dark);
}
#search-scope-menu button:hover {
	background: var(--grey-light);
}
#search-scope-menu button.active {
	font-weight: 600;
	background: rgba(30, 64, 88, 0.08);
}

/* Navigation arrows */
.search-nav-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--grey-mid);
	padding: 0 3px;
	font-size: 10px;
	line-height: 1;
	flex-shrink: 0;
}
.search-nav-btn:hover {
	color: var(--blue-dark);
}

/* Clear button */
#search-filter-clear {
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	color: var(--grey-mid);
	padding: 0 2px;
	line-height: 1;
}
#search-filter-clear:hover {
	color: var(--blue-dark);
}

/* Highlight matching rows when search is active */
tr.search-match > td {
	background-color: rgba(255, 235, 120, 0.25) !important;
}
/* Ancestor rows that are only shown for context */
tr.search-ancestor > td {
	opacity: 0.55;
}

/* Inline text match highlight */
tr[data-id] mark {
	background: #ffe066;
	border-radius: 2px;
	padding: 0 1px;
	color: inherit;
}

/* Pulse animation for current navigated match */
tr.search-focus > td {
	animation: search-pulse 0.6s ease;
}
@keyframes search-pulse {
	0% {
		box-shadow: inset 0 0 0 2px rgba(30, 64, 88, 0.5);
	}
	100% {
		box-shadow: inset 0 0 0 0 transparent;
	}
}

/* Editor hamburger button (inside repo-header) */
.hamburger-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 48px;
	padding: 8px 6px 5px;
	cursor: pointer;
	background: #fff;
	border: none;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
	transition: background 0.15s;
}
.hamburger-btn:hover {
	background: var(--grey-light);
}
.hamburger-lines {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 22px;
}
.hamburger-btn .hamburger-line {
	display: block;
	width: 100%;
	height: 2px;
	background: #000;
	border-radius: 2px;
}
.hamburger-label {
	font-size: 9px;
	font-weight: 600;
	color: var(--blue-dark);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 2px;
}

/* ===========================
   Repo header
   =========================== */
.repo-header {
	padding: 1.2rem 2rem 1.2rem 1rem;
	background: var(--white-soft);
	color: var(--blue-dark);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 100;
}

/* flex row: title on left, button on far right */
.repo-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: 0;
}

/* main title — scales down on narrow viewports so it never clips */
.repo-title {
	margin: 0;
	font-size: clamp(0.95rem, 2.2vw, 1.8rem);
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--blue-dark);

	white-space: normal;
	word-break: break-word;
	min-width: 0; /* allow flex shrink */
}

/* version text: same size/weight as title again */
.repo-title .repo-version {
	margin-left: 0.5rem;
	font-size: inherit;
	font-weight: inherit;
	color: var(--blue-dark);
	opacity: 0.9; /* subtle fade if you like; bump to 1 if you want identical */
}

/* GitHub button on the far right */
.github-btn {
	background: var(--blue-dark);
	color: var(--white-soft);
	border: 1px solid var(--blue-dark);
	border-radius: 6px;
	padding: 0.5rem 0.6rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	line-height: 1;
	cursor: pointer;
	flex-shrink: 0; /* don't let it get squished */
	text-decoration: none;
}

.github-btn:hover {
	opacity: 0.85;
}

/* the inline SVG */
.github-btn .github-icon {
	display: block;
	width: 20px;
	height: 20px;
	color: var(--white-soft); /* sets fill via currentColor */
}

/* right-side actions (GitHub + comments settings) */
.repo-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

/* ── Sync badge (local mode) ───────────────── */
.sync-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	border: 1.5px solid transparent;
	cursor: default;
	font-family: inherit;
	line-height: 1;
	margin-right: 4px;
	position: relative;
	overflow: hidden;
}

/* ── State colours ── */
.sync-badge.state-synced {
	background: rgba(22, 163, 74, 0.08);
	border-color: rgba(22, 163, 74, 0.2);
	color: #15803d;
}

.sync-badge.state-push,
.sync-badge.state-unsaved {
	background: rgba(234, 88, 12, 0.08);
	border-color: rgba(234, 88, 12, 0.22);
	color: #9a3412;
}

.sync-badge.state-pull {
	background: rgba(37, 99, 235, 0.08);
	border-color: rgba(37, 99, 235, 0.22);
	color: #1e40af;
}

.sync-badge.state-merge {
	background: rgba(168, 66, 76, 0.08);
	border-color: rgba(168, 66, 76, 0.22);
	color: var(--red-rich);
}

/* ── Actionable states (push/pull/merge) ── */
.sync-badge.state-push:not(:disabled),
.sync-badge.state-pull:not(:disabled),
.sync-badge.state-merge:not(:disabled) {
	cursor: pointer;
}

.sync-badge.state-push:not(:disabled):hover {
	background: rgba(234, 88, 12, 0.16);
	border-color: rgba(234, 88, 12, 0.4);
	box-shadow: 0 1px 4px rgba(234, 88, 12, 0.12);
}

.sync-badge.state-pull:not(:disabled):hover {
	background: rgba(37, 99, 235, 0.16);
	border-color: rgba(37, 99, 235, 0.4);
	box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}

.sync-badge.state-merge:not(:disabled):hover {
	background: rgba(168, 66, 76, 0.16);
	border-color: rgba(168, 66, 76, 0.4);
	box-shadow: 0 1px 4px rgba(168, 66, 76, 0.12);
}

.sync-badge.state-push:not(:disabled):active,
.sync-badge.state-pull:not(:disabled):active,
.sync-badge.state-merge:not(:disabled):active {
	transform: scale(0.96);
}

.sync-badge:disabled {
	cursor: default;
}

.sync-badge:focus-visible {
	outline: 2px solid var(--blue-dark);
	outline-offset: 2px;
}

/* ── Icon ── */
.sync-icon {
	flex-shrink: 0;
	display: block;
}

/* ── Spinner ── */
.sync-spinner {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.sync-badge {
		transition:
			background 0.25s ease,
			border-color 0.25s ease,
			color 0.25s ease,
			box-shadow 0.2s ease,
			transform 0.1s ease;
	}
	.sync-spinner {
		animation: sync-spin 0.7s linear infinite;
	}
}

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

.comments-settings-btn {
	position: relative;
	background: var(--white-soft);
	color: var(--blue-dark);
	border: 1px solid rgba(15, 23, 42, 0.18);
	border-radius: 6px;
	padding: 0.4rem 0.6rem;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	line-height: 1;
	cursor: pointer;
}

.cog-badge {
	position: absolute;
	top: -2px;
	right: -2px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #f59e0b;
	pointer-events: none;
}
.cog-label {
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--blue-dark);
	opacity: 0.7;
}

.comments-settings-btn:hover {
	background: rgba(15, 23, 42, 0.04);
}

@keyframes wristCogSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.comments-settings-btn.is-loading .cog-icon {
	animation: wristCogSpin 0.9s linear infinite;
	transform-origin: 50% 50%;
}

/* ===========================
   Comments Sliding Panel
   =========================== */
#wrist-comments-panel-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 99999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
#wrist-comments-panel-backdrop.csp-open {
	opacity: 1;
	pointer-events: auto;
}

#wrist-comments-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(520px, 92vw);
	z-index: 100000;
	background: var(--white-soft);
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}
#wrist-comments-panel.csp-open {
	transform: translateX(0);
}

.csp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.12);
	flex-shrink: 0;
}
.csp-header h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--blue-dark);
}
.csp-close-btn {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: var(--blue-dark);
	opacity: 0.6;
	padding: 2px 6px;
	border-radius: 4px;
	line-height: 1;
}
.csp-close-btn:hover {
	opacity: 1;
	background: rgba(15, 23, 42, 0.06);
}

.csp-body {
	display: flex;
	flex: 1;
	overflow: hidden;
}
.csp-main {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
}

.csp-tabs {
	width: 150px;
	flex-shrink: 0;
	border-right: 1px solid rgba(15, 23, 42, 0.12);
	display: flex;
	flex-direction: column;
	padding: 8px 0;
	background: rgba(15, 23, 42, 0.03);
}
.csp-tab {
	text-align: left;
	padding: 10px 14px;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 12px;
	color: var(--blue-dark);
	border-left: 3px solid transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
	line-height: 1.3;
}
.csp-tab:hover {
	background: rgba(15, 23, 42, 0.05);
}
.csp-tab.active {
	background: var(--white-soft);
	border-left-color: var(--blue-dark);
	font-weight: 600;
}

.csp-tab {
	position: relative;
}
.tab-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #f59e0b;
	margin-left: 6px;
	vertical-align: middle;
}

.csp-content {
	flex: 1 1 0;
	overflow-y: auto;
	padding: 16px;
	min-height: 0;
}

.csp-tab-pane {
	display: none;
}
.csp-tab-pane.active {
	display: block;
}

/* Search Parameters pane */
.csp-filter-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}
.csp-filter-row label {
	font-size: 12px;
	color: var(--blue-dark);
	opacity: 0.85;
}
.csp-filter-row select {
	width: 100%;
	padding: 6px 8px;
	border-radius: 8px;
	border: 1px solid rgba(15, 23, 42, 0.18);
	background: var(--white-soft);
	color: var(--blue-dark);
	font-size: 12px;
}
.csp-filter-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}
.csp-btn {
	border-radius: 8px;
	padding: 6px 14px;
	border: 1px solid rgba(15, 23, 42, 0.18);
	background: var(--white-soft);
	cursor: pointer;
	font-size: 12px;
	color: var(--blue-dark);
}
.csp-btn.primary {
	background: var(--blue-dark);
	color: var(--white-soft);
	border-color: var(--blue-dark);
}
.csp-btn:hover {
	opacity: 0.85;
}

/* Thread cards in panel */
.csp-thread-card {
	padding: 10px 12px;
	border: 1px solid rgba(15, 23, 42, 0.10);
	border-left: 3px solid var(--blue-dark);
	border-radius: 6px;
	margin-bottom: 8px;
	cursor: pointer;
	background: var(--white-soft);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}
.csp-thread-card:hover {
	background: rgba(15, 23, 42, 0.03);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.csp-thread-card.tc-internal {
	border-left-color: #2d5a3d;
}
.csp-thread-card.tc-public {
	border-left-color: #1d4ed8;
}
.csp-thread-card.tc-suggestion {
	border-left-color: #d97706;
}

.csp-card-top {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
.csp-card-type {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.3px;
}
.csp-card-type.ct-internal {
	background: rgba(45, 90, 61, 0.10);
	color: #2d5a3d;
}
.csp-card-type.ct-public {
	background: rgba(29, 78, 216, 0.08);
	color: #1d4ed8;
}
.csp-card-type.ct-suggestion {
	background: rgba(217, 119, 6, 0.08);
	color: #d97706;
}
.csp-card-state {
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 500;
}
.csp-card-state.cs-open {
	background: rgba(22, 163, 74, 0.10);
	color: #16a34a;
}
.csp-card-state.cs-closed {
	background: rgba(107, 114, 128, 0.10);
	color: #6b7280;
}

.csp-card-title {
	font-size: 13px;
	font-weight: 500;
	color: var(--blue-dark);
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.csp-card-meta {
	font-size: 11px;
	color: var(--grey-mid);
	margin-top: 3px;
}

.csp-loading {
	text-align: center;
	padding: 24px;
	color: var(--grey-mid);
	font-size: 12px;
}
.csp-empty {
	text-align: center;
	padding: 24px;
	color: var(--grey-mid);
	font-size: 12px;
	font-style: italic;
}

/* Help tab */
.csp-help h4 {
	font-size: 14px;
	color: var(--blue-dark);
	margin: 18px 0 8px 0;
}
.csp-help h4:first-child {
	margin-top: 0;
}
.csp-help p {
	font-size: 12px;
	color: var(--blue-dark);
	opacity: 0.8;
	line-height: 1.5;
	margin: 0 0 12px 0;
}
.csp-help ul {
	font-size: 12px;
	color: var(--blue-dark);
	opacity: 0.8;
	line-height: 1.6;
	padding-left: 18px;
	margin: 0 0 12px 0;
}
.csp-help ul ul {
	margin-top: 4px;
	margin-bottom: 4px;
}
.csp-help strong {
	opacity: 1;
}

/* Thread card active state */
.csp-thread-card.active {
	background: rgba(15, 23, 42, 0.06);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.csp-thread-card.active.tc-internal {
	background: rgba(45, 90, 61, 0.08);
}
.csp-thread-card.active.tc-public {
	background: rgba(29, 78, 216, 0.06);
}
.csp-thread-card.active.tc-suggestion {
	background: rgba(217, 119, 6, 0.06);
}

/* Cards list (scrollable when detail is open) */
.csp-cards-list {
	overflow-y: auto;
}

/* Inline detail area — anchored at bottom of drawer */
.csp-detail-area {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-top: none;
	position: relative;
}
.csp-detail-resize-handle {
	height: 6px;
	cursor: ns-resize;
	background: rgba(15, 23, 42, 0.08);
	border-top: 1px solid rgba(15, 23, 42, 0.15);
	border-bottom: 1px solid rgba(15, 23, 42, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.csp-detail-resize-handle:hover,
.csp-detail-resize-handle.dragging {
	background: rgba(15, 23, 42, 0.15);
}
.csp-detail-resize-handle::after {
	content: "";
	width: 32px;
	height: 2px;
	border-radius: 1px;
	background: rgba(15, 23, 42, 0.25);
}
.csp-detail-area[hidden] {
	display: none;
}
.csp-detail-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	color: var(--blue-dark);
	opacity: 0.5;
	padding: 2px 6px;
	border-radius: 4px;
	line-height: 1;
	z-index: 1;
}
.csp-detail-close:hover {
	opacity: 1;
	background: rgba(15, 23, 42, 0.06);
}

.csp-detail-header {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	background: rgba(15, 23, 42, 0.02);
	flex-shrink: 0;
}
.csp-detail-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--blue-dark);
	line-height: 1.3;
	word-break: break-word;
	margin-bottom: 6px;
}
.csp-detail-chips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.csp-detail-chip {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.3px;
}
.csp-detail-chip.int {
	background: rgba(45, 90, 61, 0.10);
	color: #2d5a3d;
}
.csp-detail-chip.pub {
	background: rgba(29, 78, 216, 0.08);
	color: #1d4ed8;
}
.csp-detail-chip.sug {
	background: rgba(217, 119, 6, 0.08);
	color: #d97706;
}
.csp-detail-chip.issue {
	background: rgba(15, 23, 42, 0.06);
	color: var(--blue-dark);
}
.csp-detail-chip.ver {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	background: rgba(15, 23, 42, 0.05);
	color: var(--grey-mid);
}

/* Admin bar */
.csp-detail-admin {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	flex-wrap: wrap;
	flex-shrink: 0;
}
.csp-detail-admin.int {
	background: rgba(45, 90, 61, 0.05);
}
.csp-detail-admin.pub {
	background: rgba(29, 78, 216, 0.04);
}
.csp-detail-admin.sug {
	background: rgba(217, 119, 6, 0.04);
}
.csp-admin-label {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--grey-mid);
}
.csp-admin-btn {
	border: 1px solid rgba(15, 23, 42, 0.14);
	background: var(--white-soft);
	padding: 4px 8px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	color: var(--blue-dark);
}
.csp-admin-btn:hover {
	background: rgba(15, 23, 42, 0.04);
}
.csp-admin-select {
	padding: 3px 6px;
	border-radius: 4px;
	border: 1px solid rgba(15, 23, 42, 0.14);
	background: var(--white-soft);
	font-size: 11px;
	color: var(--blue-dark);
}
.csp-admin-sep {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 9px;
	color: var(--grey-mid);
	margin-left: 4px;
}
.csp-admin-spacer {
	flex: 1;
}
.csp-admin-status {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 9px;
	color: var(--grey-mid);
}

/* Detail messages */
.csp-detail-messages {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 10px 14px;
}
.csp-detail-msg {
	padding: 10px 12px;
	margin-bottom: 8px;
	border-radius: 6px;
	border-left: 3px solid var(--blue-dark);
	background: rgba(15, 23, 42, 0.02);
}
.csp-detail-msg.int {
	border-left-color: #2d5a3d;
}
.csp-detail-msg.pub {
	border-left-color: #1d4ed8;
}
.csp-detail-msg.sug {
	border-left-color: #d97706;
}
.csp-detail-msg.admin {
	border-left-color: var(--grey-mid);
	background: rgba(15, 23, 42, 0.04);
}
.csp-detail-msg.reply {
	margin-left: 16px;
}
.csp-detail-msg-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
}
.csp-detail-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}
.csp-detail-avatar.int {
	background: #2d5a3d;
}
.csp-detail-avatar.pub {
	background: #1d4ed8;
}
.csp-detail-avatar.sug {
	background: #d97706;
}
.csp-detail-avatar.admin {
	background: var(--grey-mid);
}
.csp-detail-author {
	font-size: 12px;
	font-weight: 600;
	color: var(--blue-dark);
}
.csp-detail-role {
	font-size: 10px;
	color: var(--grey-mid);
	font-style: italic;
}
.csp-detail-time {
	font-size: 10px;
	color: var(--grey-mid);
	margin-left: auto;
}
.csp-detail-body {
	font-size: 12px;
	color: var(--blue-dark);
	line-height: 1.5;
	white-space: pre-line;
	word-break: break-word;
}

/* Suggestion fields grid (inside detail panel) */
.csp-detail-body .suggestion-fields {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	font-size: 12px;
	margin: 4px 0 8px;
	padding: 8px 10px;
	border: 1px solid rgba(217, 119, 6, 0.20);
	border-radius: 6px;
	background: rgba(217, 119, 6, 0.06);
	white-space: normal;
}
.csp-detail-body .sf-label {
	font-weight: 600;
	color: var(--grey-mid);
	white-space: nowrap;
}
.csp-detail-body .sf-value {
	color: var(--blue-dark);
}

/* Compose area */
.csp-detail-compose {
	padding: 10px 14px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
	flex-shrink: 0;
}
.csp-compose-ctx {
	font-size: 10px;
	color: var(--grey-mid);
	margin-bottom: 6px;
}
.csp-compose-textarea {
	width: 100%;
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid rgba(15, 23, 42, 0.14);
	background: var(--white-soft);
	font-size: 12px;
	color: var(--blue-dark);
	resize: vertical;
	outline: none;
	margin-bottom: 6px;
}
.csp-compose-textarea:focus {
	border-color: rgba(45, 90, 61, 0.4);
	box-shadow: 0 0 0 2px rgba(45, 90, 61, 0.1);
}
.csp-compose-send {
	display: block;
	margin-left: auto;
	padding: 6px 14px;
	border-radius: 6px;
	border: 1px solid #2d5a3d;
	background: #2d5a3d;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.csp-compose-send:hover {
	background: #245031;
}
.csp-compose-send:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Detail loading */
.csp-detail-loading {
	text-align: center;
	padding: 24px;
	color: var(--grey-mid);
	font-size: 12px;
}

/* ===========================
   Table (Editor Grid)
   =========================== */
.editor-table {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font: inherit;
	margin-top: 8px;
}
.editor-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	color: rgb(54, 75, 90);
	font-weight: 700;
	text-align: left;
	vertical-align: bottom;
	padding: 10px 8px;
	border: none;
	border-bottom: 2px solid #e2e6ea;
	transition: background 0.15s ease;
}
.editor-table thead th:hover {
	background: var(--grey-light);
}

/* Rows */
.editor-table tbody tr[data-depth="0"] {
	background: #004466 !important;
	color: #fff;
}
.editor-table tbody tr:not([data-depth="0"]) {
	background: #eef2f7;
	color: #000;
	border-top: 1px solid #ccc;
}
.editor-table tbody tr + tr {
	border-top: 4px solid #fff;
}
.editor-table tr.clickable {
	cursor: pointer;
}

/* Cells */
.editor-table tbody td {
	border: none;
	padding: 8px;
	text-align: left;
	vertical-align: top;
	min-width: 0;
	overflow: hidden;
}

/* Column sizing – first col (MRO) */
.editor-table th:nth-child(1),
.editor-table td:nth-child(1) {
	width: 60px;
	max-width: 60px;
	text-align: center;
	overflow: hidden;
}
.editor-table td:nth-child(1) {
	vertical-align: middle;
}

/* Column sizing – content columns
   With table-layout:fixed, widths on <th> determine column proportions.
   Content-heavy columns get more space; metadata columns get less. */
.editor-table th[data-col="name"]                    { width: 11%; }
.editor-table th[data-col="description"]              { width: 20%; }
.editor-table th[data-col="value_sets"]               { width: 13%; }
.editor-table th[data-col="implementation_guidance"]  { width: 15%; }
.editor-table th[data-col="information_type"]         { width: 5%; }
.editor-table th[data-col="data_type"]                { width: 6%; }
.editor-table th[data-col="cardinality"]              { width: 5%; }
.editor-table th[data-col="derived_from"]             { width: 6%; }

/* Cardinality column */
.editor-table td.cardinality {
	white-space: nowrap;
	font-family: monospace;
}

/* ===========================
   Wrapping + Uniform Row Height
   =========================== */
.editor-table th,
.editor-table td {
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	line-height: var(--lh);
}

.editor-table td {
	padding-top: var(--cell-vpad);
	padding-bottom: var(--cell-vpad);
}
.truncate {
	-webkit-line-clamp: unset !important;
	line-clamp: unset !important;
	-webkit-box-orient: initial !important;
}

/* Never indent MRO (first column) */
#table-container tbody tr td:first-child {
	padding-left: 0 !important;
	text-align: center;
}

/* ===========================
   Tree arrows
   =========================== */
.arrow {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 6px;
	vertical-align: middle;
	transition: transform 0.2s ease;
	cursor: pointer;
	border: none !important;
}
.arrow::before {
	content: "";
	display: inline-block;
	line-height: 1;
}
tr[data-has-children="true"] .arrow::before {
	content: "▶";
	font-size: 0.8em;
}
tr.expanded[data-has-children="true"] .arrow::before {
	content: "▼";
}
tr[data-has-children="false"] .arrow {
	visibility: hidden;
}

/* ===========================
   Value-set small list
   =========================== */
.vs-list {
	margin: 0;
	padding-left: 18px;
}
.vs-list li {
	margin: 0 0 4px 0;
	line-height: 1.25;
}

/* ===========================
   Misc
   =========================== */
tr.empty-placeholder td {
	background: #f8f8f8;
	border-top: 2px dashed #ccc;
}
#loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 9999;
	backdrop-filter: blur(2px);
}
#loading-overlay .rs-logo { width: min(240px, 55vw); }
button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Quill look */
.ql-container.ql-snow {
	display: flex;
	flex-direction: column;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	max-height: 250px;
}
.ql-toolbar.ql-snow {
	background: #f9fafb;
	border: 1px solid #d1d5db;
	border-bottom: none;
}
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label,
.ql-toolbar.ql-snow .ql-picker-item {
	background: transparent !important;
	color: #374151 !important;
	border: none !important;
}
.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button.ql-active {
	color: #111827 !important;
}
.ql-container.ql-snow .ql-editor {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.75rem 1rem;
	min-height: 80px;
}

/* ===========================
   Component? column (semantic)
   =========================== */
.editor-table th[data-col="is_component"],
.editor-table td.is_component {
	width: 80px;
	max-width: 80px;
	padding: 8px 4px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
.editor-table td.is_component input[type="checkbox"] {
	margin: 0;
	transform: scale(0.9);
}

/* Row background parity for sticky Actions */
.editor-table tbody tr[data-depth="0"] td.actions {
	color: #fff;
}
.editor-table tbody tr:not([data-depth="0"]) td.actions {
	background-color: var(--row-bg-solid, #eef2f7);
}

/* ===========================
   Responsive
   =========================== */

/* Abbreviated header tooltips */
.editor-table thead th abbr {
	text-decoration: none;
	cursor: help;
	border-bottom: 1px dotted var(--grey-mid);
}

/* Sticky-left + horizontal scroll below 1400px */
@media (max-width: 1400px) {
	.editor-table {
		min-width: 1400px;
	}

	/* MRO: sticky left */
	.editor-table th:nth-child(1),
	.editor-table td:nth-child(1) {
		position: sticky;
		left: 0;
		z-index: 3;
	}
	.editor-table thead th:nth-child(1) {
		z-index: 10;
		background: #fff;
	}
	.editor-table tbody tr[data-depth="0"] td:nth-child(1) {
		background: #004466 !important;
	}
	.editor-table tbody tr:not([data-depth="0"]) td:nth-child(1) {
		background: #eef2f7;
	}

	/* Name: sticky left, offset by MRO width */
	.editor-table th:nth-child(2),
	.editor-table td:nth-child(2) {
		position: sticky;
		left: 60px;
		z-index: 3;
	}
	.editor-table thead th:nth-child(2) {
		z-index: 10;
		background: #fff;
	}
	.editor-table tbody tr[data-depth="0"] td:nth-child(2) {
		background: #004466 !important;
	}
	.editor-table tbody tr:not([data-depth="0"]) td:nth-child(2) {
		background: #eef2f7;
	}

	/* Scroll shadow on the Name column edge */
	.editor-table th:nth-child(2),
	.editor-table td:nth-child(2) {
		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
	}
}

@media (max-width: 1280px) {
	:root {
		--actions-w: 156px;
	}
	.editor-table td.actions {
		gap: 6px;
	}
}
@media (max-width: 1024px) {
	:root {
		--actions-w: 140px;
	}
	.editor-table td.actions {
		gap: 6px;
	}
}

/* ===========================
   Component / Relationship pickers (centered modals)
   =========================== */
/* IMPORTANT: Only the big picker gets absolute here (NOT the option menu) */
#component-picker {
	position: absolute;
	z-index: 6000;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	padding: 8px;
}
#component-picker h4 {
	margin: 0 0 8px;
	font-size: 14px;
}
#component-picker #component-list {
	max-height: 300px;
	overflow: auto;
}
#component-picker .component-heading {
	font-weight: 600;
	margin: 6px 0 4px;
	font-size: 12px;
	color: #334155;
}
#component-picker .component-item {
	padding: 6px 8px;
	border-radius: 8px;
	cursor: pointer;
}
#component-picker .component-item:hover {
	background: #f1f5f9;
}

/* Overlays for centered modals */
#component-picker-overlay,
#relationship-picker-overlay {
	position: fixed;
	inset: 0;
	z-index: 7000;
	background: rgba(0, 0, 0, 0.35);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
#component-picker-overlay:not(.hidden),
#relationship-picker-overlay:not(.hidden) {
	display: flex;
}

/* Modal panels */
#relationship-picker,
#component-picker {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
	width: min(720px, 92vw);
	max-height: 80vh;
	overflow: auto;
	padding: 16px;
}

/* Relationship chooser */
#relationship-picker p {
	margin: 0 0 10px;
}
.relationship-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.relationship-buttons button {
	padding: 6px 10px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}
.relationship-buttons button:hover {
	background: #f8fafc;
}

/* ===========================
   Value Sets table
   =========================== */
.vs-table-wrap {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	max-height: 60vh;
}
.vs-table-scroll {
	overflow-y: auto;
	flex: 1 1 0;
	min-height: 0;
}
.vs-table-wrap > label {
	display: block;
	padding: 10px 14px 0;
	font-weight: 700;
	font-size: 13px;
	color: var(--blue-dark);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
#value-sets-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
#value-sets-table colgroup col:nth-child(1) {
	width: 28%;
}
#value-sets-table colgroup col:nth-child(2) {
	width: 32%;
}
#value-sets-table colgroup col:nth-child(3) {
	width: 32%;
}
#value-sets-table colgroup col:nth-child(4) {
	width: 8%;
}
#value-sets-table input {
	width: 100%;
	box-sizing: border-box;
}
#value-sets-table thead {
	background: #f1f5f9;
}
#value-sets-table thead th {
	padding: 8px 14px;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-align: left;
	border-bottom: 1px solid #e2e8f0;
}
#value-sets-table thead th:last-child {
	text-align: right;
}
#value-sets-table tbody tr.vs-row {
	border-bottom: 1px solid #f1f5f9;
	transition: background 0.12s ease;
}
#value-sets-table tbody tr.vs-row:last-child {
	border-bottom: none;
}
#value-sets-table tbody tr.vs-row:hover {
	background: #f8fafc;
}
#value-sets-table tbody tr.vs-row td {
	padding: 10px 14px;
	vertical-align: middle;
	font-size: 13px;
	color: #1e293b;
}
#value-sets-table tbody tr.vs-row td:last-child {
	text-align: right;
}

/* Prefix badge */
.vs-prefix-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: #1e4058;
	color: #fff;
	vertical-align: middle;
}
.vs-prefix-badge.snomed { background: #1e4058; }
.vs-prefix-badge.dmd    { background: #0e7490; }
.vs-prefix-badge.nhsdd  { background: #6366f1; }
.vs-prefix-badge.other  { background: #64748b; }

/* Strength / use chip */
.vs-strength-chip {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: #eef2ff;
	color: #4338ca;
	vertical-align: middle;
	margin-left: 6px;
}

/* Editable strength chip (all row shapes) — click to change binding strength.
   Strength belongs to the element's binding, so every row owns its own chip. */
.vs-strength-chip--editable {
	cursor: pointer;
	border: 1px solid transparent;
}
/* Row has no strength yet (legacy entry with a blank USE) — muted affordance */
.vs-strength-chip--empty {
	background: #f4f4f5;
	color: #71717a;
	border: 1px dashed #d4d4d8;
}
.vs-strength-chip--editable:hover,
.vs-strength-chip--editable:focus-visible {
	background: #e0e7ff;
	border-color: #c7d2fe;
	outline: none;
}
.vs-strength-chip-caret { font-size: 9px; opacity: 0.7; }

/* Floating strength dropdown (appended to <body>) */
.vs-strength-menu {
	min-width: 140px;
	padding: 4px;
	background: #fff;
	border: 1px solid #d4d4d8;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.vs-strength-option {
	display: block;
	width: 100%;
	text-align: left;
	padding: 6px 10px;
	border: 0;
	background: transparent;
	border-radius: 6px;
	font-size: 12px;
	color: #18181b;
	cursor: pointer;
}
.vs-strength-option:hover { background: #f4f4f5; }
.vs-strength-option:focus-visible { background: #e0e7ff; outline: 2px solid #6366f1; outline-offset: -2px; }
.vs-strength-option.is-active { background: #eef2ff; color: #4338ca; font-weight: 600; }

/* Legacy warning inline */
.vs-legacy-warn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	color: #dc2626;
	margin-left: 6px;
	vertical-align: middle;
}

/* Library tag — subtle indicator for library-sourced value sets */
.vs-lib-tag {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #64748b;
	background: #f8fafc;
	vertical-align: middle;
	margin-left: 6px;
	text-decoration: none;
}
a.vs-lib-tag {
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
a.vs-lib-tag:hover {
	background: #e0e7ff;
	border-color: #818cf8;
	color: #4338ca;
}

/* Empty / placeholder text */
.vs-empty {
	color: #94a3b8;
	font-style: italic;
}

/* Inline FHIR warning / migrate-to-library badge in VS row editor.
   Sits on its own line below the system + strength badges so the extra
   padding/border doesn't clip against them. */
.vs-inline-fhir-warn {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11px;
	color: #2563eb;
	margin-left: 0;
	margin-top: 6px;
	width: fit-content;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 4px;
	background: transparent;
	border: 1px solid transparent;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	user-select: none;
}
.vs-inline-fhir-warn:hover,
.vs-inline-fhir-warn:focus-visible {
	background: #dbeafe;
	color: #1d4ed8;
	border-color: #93c5fd;
	transform: translateY(-1px);
	outline: none;
}
.vs-inline-fhir-warn:active {
	transform: translateY(0);
	background: #bfdbfe;
}
.vs-inline-fhir-warn-default,
.vs-inline-fhir-warn-hover {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	transition: opacity 0.15s ease;
}
.vs-inline-fhir-warn-hover {
	display: none;
	font-weight: 600;
}
.vs-inline-fhir-warn:hover .vs-inline-fhir-warn-default,
.vs-inline-fhir-warn:focus-visible .vs-inline-fhir-warn-default {
	display: none;
}
.vs-inline-fhir-warn:hover .vs-inline-fhir-warn-hover,
.vs-inline-fhir-warn:focus-visible .vs-inline-fhir-warn-hover {
	display: inline-flex;
}

/* Saving-to-library inline state: replaces the badge content with a
   spinner + "Saving to library…" while addToLibrary's network calls run. */
.vs-inline-fhir-warn--saving,
.vs-inline-fhir-warn--saving:hover,
.vs-inline-fhir-warn--saving:focus-visible {
	cursor: wait;
	pointer-events: none;
	background: #f1f5f9;
	color: #475569;
	border-color: #cbd5e1;
	transform: none;
}
.vs-mini-spinner {
	width: 12px;
	height: 12px;
	border: 2px solid #cbd5e1;
	border-top-color: #2563eb;
	border-radius: 50%;
	animation: vs-mini-spin 0.65s linear infinite;
	flex-shrink: 0;
	display: inline-block;
}
@keyframes vs-mini-spin {
	to { transform: rotate(360deg); }
}

/* Needs-migration row left border accent */
#value-sets-table tbody tr.vs-needs-migration {
	border-left: 3px solid #fbbf24;
}

/* Reorder arrows */
.vs-move-group {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	margin: -5px 0;
	vertical-align: middle;
}
/* Override #detail-editor button[type="button"] global maroon style */
#detail-editor button.vs-move-up,
#detail-editor button.vs-move-down {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 20px;
	font-size: 13px;
	color: #64748b;
	background: transparent;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
	#detail-editor button.vs-move-up,
	#detail-editor button.vs-move-down {
		transition: color 0.12s ease, background-color 0.12s ease;
	}
}
#detail-editor button.vs-move-up:hover,
#detail-editor button.vs-move-down:hover {
	color: #475569;
	background: #f1f5f9;
}
#detail-editor button.vs-move-up:active,
#detail-editor button.vs-move-down:active {
	color: #1e293b;
	background: #e2e8f0;
}
#detail-editor button.vs-move-up:focus-visible,
#detail-editor button.vs-move-down:focus-visible {
	outline: 2px solid #475569;
	outline-offset: -1px;
}
@media (prefers-reduced-motion: no-preference) {
	.vs-just-moved {
		animation: vs-flash-move 0.3s ease;
	}
}
@keyframes vs-flash-move {
	0%   { background: #dbeafe; }
	100% { background: transparent; }
}

/* Table footer actions bar */
.vs-footer-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border-top: 1px solid #e2e8f0;
	background: #f8fafc;
}
.vs-footer-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 14px;
	border-radius: 7px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid #d0d7de;
	background: #fff;
	color: var(--blue-dark);
	transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.vs-footer-btn:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
}
.vs-footer-btn:focus-visible {
	outline: 2px solid #1e4058;
	outline-offset: 2px;
}
.vs-footer-btn.primary {
	background: var(--blue-dark);
	color: #fff;
	border-color: var(--blue-dark);
}
.vs-footer-btn.primary:hover {
	background: #163348;
}
.vs-footer-btn svg {
	flex-shrink: 0;
}

/* ---- Library picker overlay ---- */
.vs-lib-picker-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: vsLibPickerFadeIn 0.15s ease;
}
@keyframes vsLibPickerFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.vs-lib-picker {
	background: #fff;
	border-radius: 14px;
	width: min(560px, 92vw);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	box-shadow: 0 20px 56px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}
.vs-lib-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	border-bottom: 1px solid #e5e7eb;
	background: #f8fafc;
}
.vs-lib-picker-header h3 {
	margin: 0;
	font-size: 15px;
	color: var(--blue-dark);
}
.vs-lib-picker-close {
	background: none;
	border: none;
	font-size: 20px;
	color: #6b7280;
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
}
.vs-lib-picker-close:hover { color: #111; }
.vs-lib-picker-body {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
.vs-lib-picker-search {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #fff;
	padding: 12px 18px;
	border-bottom: 1px solid #f1f5f9;
}
.vs-lib-picker-search input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 13px;
}
.vs-lib-picker-search input:focus {
	outline: none;
	border-color: #1e4058;
	box-shadow: 0 0 0 2px rgba(30, 64, 88, 0.12);
}
.vs-lib-picker-section {
	padding: 6px 0;
}
.vs-lib-picker-section-title {
	padding: 8px 18px 4px;
	font-size: 10px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.vs-lib-picker-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	cursor: pointer;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	transition: background 0.1s ease;
}
.vs-lib-picker-item:hover {
	background: #f0f9ff;
}
.vs-lib-picker-item:focus-visible {
	outline: 2px solid #1e4058;
	outline-offset: -2px;
}
.vs-lib-picker-item-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #eff6ff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1e4058;
}
.vs-lib-picker-item-info {
	flex: 1;
	min-width: 0;
}
.vs-lib-picker-item-title {
	font-size: 13px;
	font-weight: 600;
	color: #1e293b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vs-lib-picker-item-meta {
	font-size: 11px;
	color: #64748b;
	margin-top: 1px;
}
.vs-lib-picker-sys-badge {
	display: inline-block;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	vertical-align: middle;
}
.vs-lib-picker-sys-badge.vs-badge-snomed { background: #1e4058; }
.vs-lib-picker-sys-badge.vs-badge-dmd    { background: #0e7490; }
.vs-lib-picker-sys-badge.vs-badge-nhsdd  { background: #6366f1; }
.vs-lib-picker-sys-badge.vs-badge-other  { background: #64748b; }
.vs-lib-picker-empty {
	padding: 32px 18px;
	text-align: center;
	color: #94a3b8;
	font-size: 13px;
}
.vs-lib-picker-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 18px;
	color: #64748b;
	font-size: 13px;
}
.vs-lib-picker-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid #d1d5db;
	border-top-color: #1e4058;
	border-radius: 50%;
	animation: vsLibPickerSpin 0.6s linear infinite;
}
@keyframes vsLibPickerSpin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.vs-lib-picker-overlay,
	#value-sets-table tbody tr.vs-row {
		animation: none !important;
		transition: none !important;
	}
	.vs-lib-picker-spinner {
		animation: none !important;
	}
}

/* ===========================
   Inline option menu (FIXED + topmost)
   =========================== */
#component-option-menu {
	position: fixed !important; /* escape container clipping */
	z-index: 2147483647 !important; /* above overlays & headers */
	min-width: 180px;
	max-width: calc(100vw - 16px);
	max-height: calc(100vh - 16px);
	overflow: auto; /* scroll if needed */
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
	padding: 6px;
}
#component-option-menu.hidden {
	display: none;
}
#component-option-menu button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	background: none;
	border: 0;
	cursor: pointer;
	border-radius: 8px;
}
#component-option-menu button:hover {
	background: #f6f6f6;
}

/* Centered variant for the small option menu */
#component-option-menu.centered {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 2147483647 !important;
	max-width: min(92vw, 420px);
	max-height: 70vh;
	overflow: auto;
}

/* Backdrop for the centered option menu */
#component-option-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 2147483646; /* just under the menu */
	display: none;
}
#component-option-overlay.show {
	display: block;
}

/* ===========================
   Delete button (red)
   =========================== */
.editor-table td.actions .delete-btn {
	background: var(--red-rich) !important;
	color: #fff !important;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 6px;
	cursor: pointer;
	border: none;
	transition: background 0.2s ease;
}

.editor-table td.actions .delete-btn:hover {
	background: #8b333e !important;
}

/* Row backgrounds define --row-bg that children (incl. sticky cell) can use.
   --row-bg-solid is the opaque equivalent for sticky cells so content
   behind them doesn't bleed through semi-transparent backgrounds. */
.editor-table tbody tr[data-depth="0"] {
	--row-bg: #004466;
	--row-bg-solid: #004466;
	background: var(--row-bg) !important;
	color: #fff;
}
.editor-table tbody tr:not([data-depth="0"]) {
	--row-bg: #eef2f7;
	--row-bg-solid: #eef2f7;
	background: var(--row-bg);
	color: #000;
}

.component-overlay {
	position: fixed; /* or absolute relative to body */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 1rem;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
	z-index: 9999; /* higher than your dropdown */
}

/* value-sets inputs behave like single-line until they need to wrap */
.vs-field {
	width: 100%;
	line-height: 1.3;
	padding: 6px 8px;
	border: 1px solid #d0d7de;
	border-radius: 6px;
	font: inherit;
	box-sizing: border-box;
}
.vs-textarea {
	resize: none; /* we auto-size */
	overflow: hidden; /* no scrollbars */
	white-space: pre-wrap; /* wrap long text */
	overflow-wrap: anywhere; /* break long URLs/words */
	min-height: 32px; /* looks like an input */
}

.vs-actions {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}

.vs-edit-button {
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	border: 1px solid #d0d7de;
	background: #fff;
	color: var(--blue-dark);
	transition: background 0.12s ease, border-color 0.12s ease;
}
.vs-edit-button:hover {
	background: #f1f5f9;
	border-color: #94a3b8;
}
.vs-edit-button:focus-visible {
	outline: 2px solid #1e4058;
	outline-offset: 2px;
}

.vs-explore-button {
	padding: 5px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	border: 1px solid #bfdbfe;
	background: #eff6ff;
	color: #1d4ed8;
	transition: background 0.15s, border-color 0.15s;
}
.vs-explore-button:hover {
	background: #dbeafe;
	border-color: #93c5fd;
}
.vs-explore-button:disabled {
	opacity: 0.6;
	cursor: wait;
}

.vs-remove-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 6px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border: 1px solid transparent;
	background: none;
	color: #94a3b8;
	transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.vs-remove-button:hover {
	color: #dc2626;
	background: #fef2f2;
	border-color: #fecaca;
}
.vs-remove-button:focus-visible {
	outline: 2px solid #dc2626;
	outline-offset: 2px;
}

/* Edit = neutral */
#table-container tbody tr.active-row {
	background: #a8d9ff !important; /* brighter light blue */
	outline-offset: -4px; /* keep the border snug inside */
	transition:
		background 0.15s ease,
		outline 0.15s ease;
}

/* Make the highlight paint the entire row AND each cell */
#table-container tbody tr.active-row,
#table-container tbody tr.active-row > td {
	background: #a8d9ff !important; /* bright light blue */
}

/* Thick border that won't get clipped by cell borders */
#table-container tbody tr.active-row {
	position: relative; /* needed for inset shadow */
	box-shadow: inset 0 0 0 4px #a8d9ff; /* strong cyan frame */
	transition:
		background 0.15s ease,
		box-shadow 0.15s ease;
}

/* If your rightmost Actions cell had its own background, force it to match */
#table-container tbody tr.active-row > td.actions,
#table-container tbody tr.active-row > td:last-child {
	background: #a8d9ff !important;
}

:root {
	--editor-hover-bg: #a8d9ff; /* pick your colour */
	/*--editor-hover-fg: #ffffff;  dark readable text */
}

/* Row hover: paint TR too — prevents dark row-bg showing through
   gaps between sticky and non-sticky cells */
.editor-table tbody tr:hover {
	background: var(--editor-hover-bg) !important;
}

/* Row hover: background + text */
.editor-table tbody tr:hover > td {
	background: var(--editor-hover-bg) !important;
	color: var(--editor-hover-fg) !important;
}

/* Ensure ALL nested content goes dark too */
.editor-table tbody tr:hover > td .cell,
.editor-table tbody tr:hover > td .cell *,
.editor-table tbody tr:hover > td a,
.editor-table tbody tr:hover > td .vs-block,
.editor-table tbody tr:hover > td .vs-block *,
.editor-table tbody tr:hover > td .arrow,
.editor-table tbody tr:hover > td .arrow *,
.editor-table tbody tr:hover > td svg,
.editor-table tbody tr:hover > td svg * {
	color: var(--editor-hover-fg) !important;
	fill: var(--editor-hover-fg) !important;
	stroke: var(--editor-hover-fg) !important;
}

/* If your arrow triangle uses borders for colour */
.editor-table tbody tr:hover > td .arrow::before,
.editor-table tbody tr:hover > td .arrow::after {
	border-left-color: var(--editor-hover-fg) !important;
}

/* Make links white on dark blue rows */
tbody tr[data-depth="0"] a,
tbody tr[data-depth="0"] a:visited,
tbody tr[data-depth="0"] .vs-detail-link {
	color: #fff !important;
}

tbody tr[data-depth="0"] a:hover,
tbody tr[data-depth="0"] .vs-detail-link:hover {
	color: #fff !important;
	text-decoration: underline;
	opacity: 0.9;
}

:root {
	--chip-bg: #eef2ff;
	--chip-fg: #3730a3;
}

/* base (if not already set somewhere) */
.use-chip,
.use-badge {
	background: var(--chip-bg);
	color: var(--chip-fg);
	border-radius: 999px;
	padding: 1px 6px;
	font-size: 12px;
}

/* do NOT invert chip/badge colours on row hover */
.editor-table tbody tr:hover > td .use-chip,
.editor-table tbody tr:hover > td .use-chip *,
.editor-table tbody tr:hover > td .use-badge,
.editor-table tbody tr:hover > td .use-badge * {
	background: var(--chip-bg) !important;
	color: var(--chip-fg) !important;
	fill: var(--chip-fg) !important;
	stroke: var(--chip-fg) !important;
}

/* Clamp cell text by lines without mid-line clipping.
   NOTE: the row-sizing vars (--row-lines, --lh, --lh-px, --cell-vpad) live in
   the single :root block at the top of this file — do not redeclare them here. */
.editor-table th,
.editor-table td {
	line-height: var(--lh);
}

/* Text area inside a cell: clamp to --row-lines, let the line-clamp control
   the height (rows grow to whatever the tallest cell needs). */
.editor-table td .cell {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--row-lines); /* Chrome/Safari/Edge */
	line-clamp: var(--row-lines); /* Firefox */
	overflow: hidden;
	max-height: none; /* let line-clamp control height */
	line-height: var(--lh-px); /* integer line-height for a clean clamp */
}

/* Let the row height be whatever the tallest cell needs */
.editor-table tbody tr {
	height: auto;
}

/* Keep vertical padding */
.editor-table td {
	padding-top: var(--cell-vpad);
	padding-bottom: var(--cell-vpad);
}

/* On very small screens, show full text */
@media (max-width: 640px) {
	.editor-table td .cell {
		-webkit-line-clamp: initial;
		line-clamp: initial;
		overflow: visible;
	}
}

.editor-table td .cell > :first-child {
	margin-top: 0;
}
.editor-table td .cell > :last-child {
	margin-bottom: 0;
}

/* ── "View details" and "View in explorer" links in value set cells ── */
.vs-view-details,
.vs-explore-inline {
	display: inline-block;
	margin-top: 3px;
	padding: 0;
	border: none;
	background: none;
	color: #005eb8;
	font-size: 11px;
	cursor: pointer;
	text-decoration: underline;
	line-height: 1.3;
}
.vs-view-details:hover,
.vs-explore-inline:hover {
	color: #003d7a;
}
.vs-view-details:focus-visible,
.vs-explore-inline:focus-visible {
	outline: 2px solid #005eb8;
	outline-offset: 1px;
	border-radius: 2px;
}
tbody tr[data-depth="0"] .vs-view-details,
tbody tr[data-depth="0"] .vs-explore-inline {
	color: #fff !important;
}
tbody tr[data-depth="0"] .vs-view-details:hover,
tbody tr[data-depth="0"] .vs-explore-inline:hover {
	opacity: 0.9;
}

/* Value-set cells show their full text + action link with NO clipping.
   Every other tbody td keeps `overflow:hidden` (and its .cell keeps the
   --row-lines clamp), so prose columns stay compact with hover-to-expand —
   only the value-sets column opts out. */
.editor-table td.value-sets {
	overflow: visible;
}
.editor-table td.value-sets .cell {
	display: block; /* escape the -webkit-box clamp entirely */
	-webkit-line-clamp: initial;
	line-clamp: initial;
	overflow: visible;
	max-height: none;
}

/* Action links live OUTSIDE the (now-unclamped) .cell, as direct children of
   the value-set td, so they sit in flow directly beneath the value-set text
   and are never clipped. */
.editor-table td.value-sets > .vs-explore-inline,
.editor-table td.value-sets > .vs-view-details {
	display: block;
	margin-top: 2px;
}

/* Legacy value sets can carry long free-text content. Unlike up-to-date sets
   (which stay full-height and link out to the explorer), clamp legacy cells to
   --row-lines with a fading "…" and reveal a "Read more" popup on overflow
   (see refreshLegacyReadMore). This re-applies the clamp the value-sets column
   otherwise opts out of, scoped to legacy cells only. */
.editor-table td.value-sets.vs-legacy .cell {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--row-lines);
	line-clamp: var(--row-lines);
	overflow: hidden;
	max-height: none;
}
@media (max-width: 640px) {
	.editor-table td.value-sets.vs-legacy .cell {
		-webkit-line-clamp: initial;
		line-clamp: initial;
		overflow: visible;
	}
}

/* The legacy "Read more" link is revealed only when the cell overflows; keep the
   [hidden] attribute working despite the display:block action-link rule above. */
.editor-table td.value-sets > .vs-view-details[hidden],
.editor-table td.value-sets > .vs-explore-inline[hidden] {
	display: none;
}

/* ── Value set details overlay ── */
.vs-all-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}
.vs-all-overlay.show {
	display: flex;
}
.vs-all-overlay .vs-all-modal {
	background: #fff;
	max-width: 640px;
	max-height: 75vh;
	width: calc(100vw - 40px);
	border-radius: 10px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.vs-all-overlay .vs-all-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid #e5e7eb;
	background: #f8fafc;
}
.vs-all-overlay .vs-all-title {
	font-weight: 600;
	margin: 0;
	font-size: 14px;
	color: #1e293b;
}
.vs-all-overlay .vs-all-close {
	border: none;
	background: transparent;
	font-size: 20px;
	cursor: pointer;
	line-height: 1;
	color: #64748b;
	padding: 4px;
}
.vs-all-overlay .vs-all-close:hover {
	color: #1e293b;
}
.vs-all-overlay .vs-all-close:focus-visible {
	outline: 2px solid #005eb8;
	outline-offset: 1px;
	border-radius: 2px;
}
.vs-all-overlay .vs-all-body {
	padding: 16px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.vs-all-entry {
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	margin-bottom: 8px;
}
.vs-all-entry:last-child {
	margin-bottom: 0;
}
.vs-all-entry .vs-all-prefix {
	font-weight: 600;
	font-size: 12px;
	color: #005eb8;
	margin-bottom: 2px;
}
.vs-all-entry .vs-all-text {
	font-size: 14px;
	color: #1e293b;
	line-height: 1.4;
}
.vs-all-entry .vs-all-popup-text {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #f1f5f9;
	font-size: 13px;
	color: #475569;
	line-height: 1.5;
}
.vs-explore-modal {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	color: #005eb8;
	text-decoration: underline;
	cursor: pointer;
}
.vs-explore-modal:hover {
	color: #003d7a;
}

/* Backdrop */
#move-to-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5); /* dark overlay */
	display: flex;
	align-items: flex-start; /* top align, or use center for true center */
	justify-content: center;
	padding-top: 5vh; /* push modal down slightly */
	z-index: 9999; /* sit above everything */
}

/* Modal box */
#move-to-modal {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	width: min(900px, 90vw);
	max-height: 85vh;
	overflow: auto;
	padding: 16px;
	position: relative;
	z-index: 10000; /* ensure modal content sits above overlay */
}

/* Title + spacing */
#move-to-modal h4 {
	margin-top: 0;
	font-size: 1.2rem;
	font-weight: 600;
}

/* Tree view styling */
#move-tree {
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid #ddd;
	padding: 6px 10px;
	background: #fafafa;
}

#move-tree .tree-node {
	margin-left: 12px;
}

#move-tree .node-label {
	cursor: pointer;
}

/* Buttons area */
.move-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

#move-confirm {
	background: #1f4e79;
	color: white;
	border: 0;
	border-radius: 4px;
	padding: 6px 12px;
	cursor: pointer;
}

#move-cancel {
	background: #eee;
	border: 0;
	border-radius: 4px;
	padding: 6px 12px;
	cursor: pointer;
}

/* ===== Move modal: themed like the editor ===== */
#move-to-modal {
	border-radius: 10px;
}

#move-tree {
	border: 1px solid #d1d5db;
	background: #f7f7f8;
	padding: 6px;
}

/* Tree rows */
.mt-row {
	display: grid;
	grid-template-columns: 24px 16px 1fr; /* radio | caret | label */
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 6px;
	margin: 2px 0;
	cursor: default; /* radios are selectable; row click toggles open */
}

/* depth colours to mirror main table */
.mt-row[data-depth="0"] {
	background: var(--blue-dark);
	color: #fff;
}
.mt-row[data-depth="0"] .mt-caret,
.mt-row[data-depth="0"] .mt-label {
	color: #fff;
}

.mt-row:not([data-depth="0"]) {
	background: rgba(66, 110, 168, 0.09);
	color: #0b2237;
}

/* hover */
.mt-row:hover {
	filter: brightness(0.98);
}

/* caret (no button; row is clickable to expand) */
.mt-caret {
	width: 16px;
	height: 16px;
	pointer-events: none; /* purely visual */
	position: relative;
}
.mt-caret::before {
	content: "▶";
	font-size: 12px;
	line-height: 1;
	position: absolute;
	top: 1px;
	left: 0;
}
.mt-row[aria-expanded="true"] .mt-caret::before {
	content: "▼";
}

/* children show/hide */
.mt-children {
	margin-left: 24px;
}
.mt-children[hidden] {
	display: none;
}

/* disabled (self/descendants of the moving node) */
.mt-row.disabled {
	opacity: 0.4;
	filter: grayscale(0.2);
	cursor: not-allowed;
}
.mt-row.disabled input[type="radio"] {
	pointer-events: none;
}

/* selection affordance */
.mt-row input[type="radio"] {
	margin: 0;
}

/* toolbar buttons keep neutral look */
#move-expand-all,
#move-collapse-all {
	background: #e5e7eb;
	border: 1px solid #cfd4dc;
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
}
#move-expand-all:hover,
#move-collapse-all:hover {
	background: #dfe3e9;
}

/* Hide caret arrow on leaf rows, keep width for alignment */
.mt-caret--spacer::before {
	content: "";
}

/* ==========================================================
   ACTIONS COLUMN – fixed width, sticky right, 2×3 grid
   ========================================================== */
:root {
	/* bump width a touch to comfortably fit 3 columns */
	--actions-w: 210px;
}

/* Header & cell fixed sizing for Actions */
.editor-table th[data-col="actions"],
.editor-table td.actions {
	width: var(--actions-w) !important;
	min-width: var(--actions-w) !important;
	max-width: var(--actions-w) !important;
}

/* Sticky Actions cell (always paint with row bg) */
.editor-table td.actions {
	position: sticky;
	right: 0;
	z-index: 2;
	background: var(--row-bg-solid, var(--row-bg)) !important;
	padding: 8px;

	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 columns */
	grid-template-rows: repeat(2, auto); /* 2 rows */
	gap: 6px;
	align-items: center;
	justify-items: stretch;
	overflow: visible;
}

/* Let children join the TD grid without extra wrappers */
.editor-table td.actions .action-buttons {
	display: contents;
}

/* Place items in the 2×3 grid */
.editor-table td.actions .add-above-btn {
	grid-column: 1;
	grid-row: 1;
}
.editor-table td.actions .edit-btn {
	grid-column: 2;
	grid-row: 1;
}
.editor-table td.actions .delete-btn {
	grid-column: 3;
	grid-row: 1;
}
.editor-table td.actions .add-below-btn {
	grid-column: 1;
	grid-row: 2;
}
.editor-table td.actions .add-child-btn {
	grid-column: 2;
	grid-row: 2;
}
.editor-table td.actions .move-btn {
	grid-column: 3;
	grid-row: 2;
}

/* Shared button look */
.editor-table td.actions button {
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.2;
	padding: 4px 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
	transition:
		background 0.2s ease,
		transform 0.02s ease;
}

/* Primary (edit/add/move) */
.editor-table td.actions .edit-btn,
.editor-table td.actions .add-child-btn,
.editor-table td.actions .add-above-btn,
.editor-table td.actions .add-below-btn,
.editor-table td.actions .move-btn {
	background: #005f99;
	color: #fff;
}
.editor-table td.actions .edit-btn:hover,
.editor-table td.actions .add-child-btn:hover,
.editor-table td.actions .add-above-btn:hover,
.editor-table td.actions .add-below-btn:hover,
.editor-table td.actions .move-btn:hover {
	background: #004466;
}

/* Delete = red */
.editor-table td.actions .delete-btn {
	background: var(--red-rich);
	color: #fff;
	font-weight: 700;
}
.editor-table td.actions .delete-btn:hover {
	background: #8b333e;
}

/* Small screens: tighten gaps a bit */
@media (max-width: 1280px) {
	:root {
		--actions-w: 198px;
	}
	.editor-table td.actions {
		gap: 4px;
	}
}
@media (max-width: 1024px) {
	:root {
		--actions-w: 186px;
	}
	.editor-table td.actions {
		gap: 4px;
	}
}

/* Actions cell: skinny col 1 (↑/↓), stretchy middle, auto col 3 */
.editor-table td.actions {
	position: sticky;
	right: 0;
	z-index: 2;
	background: var(--row-bg-solid, var(--row-bg)) !important;
	padding: 8px;

	display: grid;
	grid-template-columns: 32px 1fr auto; /* <- key change */
	grid-template-rows: repeat(2, auto);
	gap: 6px;
	align-items: center;
	justify-items: stretch;
	overflow: visible;
}

/* Place items (unchanged) */
.editor-table td.actions .add-above-btn {
	grid-column: 1;
	grid-row: 1;
}
.editor-table td.actions .edit-btn {
	grid-column: 2;
	grid-row: 1;
}
.editor-table td.actions .delete-btn {
	grid-column: 3;
	grid-row: 1;
}
.editor-table td.actions .add-below-btn {
	grid-column: 1;
	grid-row: 2;
}
.editor-table td.actions .add-child-btn {
	grid-column: 2;
	grid-row: 2;
}
.editor-table td.actions .move-btn {
	grid-column: 3;
	grid-row: 2;
}

/* Make Above/Below true icon buttons so col 1 stays skinny */
.editor-table td.actions .add-above-btn,
.editor-table td.actions .add-below-btn {
	width: 32px;
	height: 28px;
	padding: 0;
	font-size: 0; /* hide text if any */
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.editor-table td.actions .add-above-btn::before {
	content: "↑";
	font-size: 16px;
	line-height: 1;
}
.editor-table td.actions .add-below-btn::before {
	content: "↓";
	font-size: 16px;
	line-height: 1;
}

/* Middle column buttons stretch nicely */
.editor-table td.actions .edit-btn,
.editor-table td.actions .add-child-btn {
	width: 100%;
}

/* Keep Delete/Move compact but readable */
.editor-table td.actions .delete-btn,
.editor-table td.actions .move-btn {
	white-space: nowrap;
}

/* Actions header: sticky on the right (to match sticky body cells) */
.editor-table thead th[data-col="actions"] {
	position: sticky;
	top: 0;
	right: var(--comments-col-w);
	z-index: 8; /* higher than td.actions (which is 2) */
	background: #fff;
	background-clip: padding-box;
	width: var(--actions-w);
	min-width: var(--actions-w);
	max-width: var(--actions-w);
	box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15); /* optional vertical divider */
}

/* Comments header: sticky on the far right, needs explicit white bg */
.editor-table thead th.comments {
	position: sticky;
	top: 0;
	right: 0;
	z-index: 8;
	background: #fff !important;
}

/* Commit bar – keep input and buttons the same height */
:root {
	--control-h: 38px;
} /* tweak to taste */

.editor-footer {
	align-items: stretch; /* make children match heights */
}

/* the text box */
#commit-message {
	height: var(--control-h);
	line-height: var(--control-h); /* centers the text vertically */
	padding: 0 12px; /* horizontal only */
}

/* the buttons */
#save-container button {
	height: var(--control-h);
	padding: 0 12px; /* horizontal only */
	display: inline-flex; /* perfectly center label */
	align-items: center;
	justify-content: center;
}

/* --- Commit bar: line up input and buttons --- */
:root {
	--control-h: 40px;
} /* tweak to taste */

.editor-footer {
	display: flex; /* already flex, restated for clarity */
	align-items: flex-end; /* <-- bottom-align across the row */
	gap: 12px;
}

.editor-footer .field-group {
	flex: 1; /* input side expands */
	margin: 0;
}

.editor-footer .field-group label {
	margin-bottom: 4px; /* small, predictable label gap */
}

/* same height for the input and buttons */
#commit-message {
	height: var(--control-h);
	padding: 0 12px; /* horizontal only */
	line-height: normal; /* let the browser handle baseline */
}

#save-container {
	display: flex;
	gap: 8px;
	align-self: flex-end; /* ensure it sits on the same baseline */
}

#save-container button {
	height: var(--control-h);
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1; /* avoid extra vertical wobble */
}

.editor-table td.actions {
	position: sticky; /* already set, restated */
	right: 0;
	background: var(--row-bg-solid, var(--row-bg)) !important;
}

.migration-banner {
	display: flex;
	flex-direction: column;
}

.legacy-banner {
	background: #ff6b6b;
	color: white;
	font-weight: 600;
	padding: 12px 16px 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.migration-banner .legacy-banner {
	padding-bottom: 12px;
}

.inline-fhir-banner {
	background: #475569;
	color: white;
	font-weight: 500;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}

.migration-banner .inline-fhir-banner {
	padding-bottom: 30px;
}

.legacy-banner__btn {
	background: transparent;
	color: white;
	border: 2px solid white;
	border-radius: 6px;
	padding: 4px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-left: 12px;
	transition:
		background 0.15s,
		color 0.15s;
}
.legacy-banner__btn:hover {
	background: white;
	color: #ff6b6b;
}

.inline-fhir-banner__btn {
	background: transparent;
	color: white;
	border: 2px solid white;
	border-radius: 6px;
	padding: 4px 14px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	margin-left: 12px;
	transition:
		background 0.15s,
		color 0.15s;
}
.inline-fhir-banner__btn:hover {
	background: white;
	color: #475569;
}

/* Actions cell becomes anchor */
td.actions {
	position: relative;
}

:root {
	--comments-col-w: 56px; /* tweak if you want it tighter, eg 48px */
}

/* COMMENTS column pinned far right */
.editor-table th.comments,
.editor-table td.comments {
	width: var(--comments-col-w);
	min-width: var(--comments-col-w);
	max-width: var(--comments-col-w);
	text-align: center;
	vertical-align: middle;

	position: sticky;
	right: 0;
	z-index: 6;

	background: var(--row-bg-solid, var(--row-bg)) !important;
}

/* ACTIONS column pinned, but leave space for comments on the right */
.editor-table td.actions,
.editor-table th.actions {
	position: sticky;
	right: var(--comments-col-w);
	z-index: 5;
	background: var(--row-bg-solid, var(--row-bg)) !important;
}

/* Speech bubble icon button (viewer style) */
.editor-table .comment-btn {
	appearance: none;
	border: none;
	background: transparent;
	padding: 2px;
	cursor: pointer;
	line-height: 0;
	border-radius: 6px;
}

.editor-table .comment-btn svg {
	width: 16px;
	height: 16px;
	display: block;
	opacity: 0.9;
	fill: currentColor;
}

/* match row theme (top-level dark rows vs child rows) */
.editor-table tbody tr[data-depth="0"] .comment-btn {
	color: #fff;
}
.editor-table tbody tr:not([data-depth="0"]) .comment-btn {
	color: rgb(30, 64, 88);
}

.editor-table .comment-btn:hover {
	background: rgba(0, 0, 0, 0.06);
}
.editor-table tbody tr[data-depth="0"] .comment-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.editor-table .comment-btn:focus {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

/* --- comment badges (same as downloadable viewer) --- */
.editor-table .has-comments-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	margin-left: 6px;
	background: #f59e0b;
	vertical-align: middle;
}

/* "child has comments" marker */
.editor-table .child-comments-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 6px;
	vertical-align: middle;
	transform: translateY(1px);
	color: #f59e0b;
	opacity: 0.95;
}

.editor-table .comment-btn[data-has-comments="1"] .child-comments-mark {
	opacity: 0.6;
}

.editor-table .child-comments-mark .child-into-ico {
	width: 14px;
	height: 14px;
	display: block;
}

/* Make the comment button a stable anchor for badges */
.editor-table .comment-btn {
	appearance: none;
	border: none;
	background: transparent;
	cursor: pointer;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 28px;
	height: 22px;
	padding: 0;
	position: relative;
	border-radius: 6px;
}

/* Self-has-comments dot (absolute so it doesn't shift layout) */
.editor-table .has-comments-dot {
	position: absolute;
	right: -2px;
	top: 50%;
	transform: translate(50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #f59e0b;
}

/* Child-has-comments triangle (viewer style) */
.editor-table .comment-btn[data-has-child-comments="1"]::after {
	content: "";
	position: absolute;
	right: -2px;
	top: 50%;
	transform: translate(50%, -50%);
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid #f59e0b;
	opacity: 0.95;
}

/* If it has BOTH self + child, make the triangle a bit quieter */
.editor-table .comment-btn[data-has-comments="1"][data-has-child-comments="1"]::after {
	opacity: 0.55;
}


/* ===========================
   Legacy Value Set Badges
   =========================== */
.legacy-badges {
	display: inline-flex;
	gap: 4px;
	margin-left: 8px;
	vertical-align: middle;
}

.legacy-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 10px;
	white-space: nowrap;
}

.legacy-badge--direct {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fca5a5;
	font-weight: 600;
}

.legacy-badge--inherited {
	background: transparent;
	color: #d97706;
	border: 1px dashed #f59e0b;
	cursor: pointer;
}

.legacy-badge--inherited:hover {
	background: #fffbeb;
	border-style: solid;
}

.legacy-badge--inherited:focus {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

/* Keep badge colours on hover (don't let row hover override) */
.editor-table tbody tr:hover > td .legacy-badge--direct {
	background: #fef2f2 !important;
	color: #dc2626 !important;
}

.editor-table tbody tr:hover > td .legacy-badge--inherited {
	color: #d97706 !important;
}

/* ===========================
   Inline FHIR (Not in Library) Badges
   =========================== */
.inline-fhir-badges {
	display: inline-flex;
	gap: 4px;
	margin-left: 4px;
	vertical-align: middle;
}

.inline-fhir-badge {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	padding: 1px 6px;
	border-radius: 10px;
	white-space: nowrap;
}

.inline-fhir-badge--direct {
	background: #eff6ff;
	color: #2563eb;
	border: 1px solid #93c5fd;
	font-weight: 600;
}

.inline-fhir-badge--inherited {
	background: transparent;
	color: #6366f1;
	border: 1px dashed #818cf8;
	cursor: pointer;
}

.inline-fhir-badge--inherited:hover {
	background: #eef2ff;
	border-style: solid;
}

.inline-fhir-badge--inherited:focus {
	outline: 2px solid #60a5fa;
	outline-offset: 2px;
}

.editor-table tbody tr:hover > td .inline-fhir-badge--direct {
	background: #eff6ff !important;
	color: #2563eb !important;
}

.editor-table tbody tr:hover > td .inline-fhir-badge--inherited {
	color: #6366f1 !important;
}

/* ===========================
   Migration Wizard
   =========================== */

/* Live progress bar — injected above #vsm-header */
#mw-live-progress {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	background: #f0fdf4;
	border-bottom: 1px solid #bbf7d0;
	flex-shrink: 0;
}
.mw-live-bar {
	flex: 1;
	height: 6px;
	background: #e5e7eb;
	border-radius: 3px;
	overflow: hidden;
}
.mw-live-fill {
	height: 100%;
	width: 0%;
	background: #22c55e;
	border-radius: 3px;
	transition: width 0.3s ease;
}
.mw-live-text {
	font-size: 12px;
	font-weight: 600;
	color: #166534;
	white-space: nowrap;
}

/* Nav wrapper — centers arrows vertically on the dialog */
#mw-nav-wrapper {
	display: flex;
	align-items: center;
}

/* Nav arrows — flanking #vsm-dialog inside #mw-nav-wrapper */
.mw-nav {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	font-size: 28px;
	line-height: 1;
	color: #1e293b;
	cursor: pointer;
	z-index: 2147483647;
	transition:
		opacity 0.15s,
		background 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mw-nav:hover {
	background: #fff;
}
.mw-nav-left {
	margin-right: 8px;
}
.mw-nav-right {
	margin-left: 8px;
}
.mw-nav--disabled {
	opacity: 0.3;
	cursor: default;
	pointer-events: none;
}
@media (max-width: 1200px) {
	.mw-nav {
		display: none;
	}
}

/* Stop button — injected into #vsm-footer */
#vsm-footer .mw-stop-btn {
	background: #dc2626;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 8px 14px;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	margin-left: auto;
	transition: background 0.15s;
}
#vsm-footer .mw-stop-btn:hover {
	background: #b91c1c;
}

/* Transition animation between value sets */
@keyframes mw-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#vsm-dialog.mw-transition #vsm-content-row {
	animation: mw-fade-in 0.3s ease;
}

/* Completion / stop summary overlay */
#mw-complete-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2147483647;
}
.mw-complete-panel {
	background: #fff;
	width: min(440px, calc(100vw - 32px));
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
	padding: 36px 28px;
	text-align: center;
}
.mw-complete-icon {
	font-size: 48px;
	color: #22c55e;
	margin-bottom: 8px;
}
.mw-complete-panel h2 {
	margin: 0 0 12px;
	font-size: 20px;
	color: #1e293b;
}
.mw-complete-stats {
	font-size: 15px;
	color: #334155;
	margin: 0 0 8px;
}
.mw-complete-reminder {
	font-size: 13px;
	color: #64748b;
	margin: 0 0 24px;
}
.mw-done-btn {
	background: #1f4e79;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 8px 24px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.mw-done-btn:hover {
	background: #163b5c;
}

/* Duplicate prompt overlay — reuses mw-complete-overlay positioning */
#mw-dedup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2147483647;
}
.mw-dedup-new:hover {
	background: #334155 !important;
}