﻿/********************************************** TRACKER A  ************************************/

.trackers-container .tracker-a {
	--text: #1f2937;
	--muted: #6b7280;
	--border: #e5e7eb;
	--bg: #ffffff;
	--chip: #f3f4f6;
	--track: #e5e7eb;
	--fill: #1a73e8;
	--shadow: 0 6px 24px rgba(0,0,0,.08);
	--radius: 16px;
	--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

.trackers-container .tracker-a .btfp-card {
	font-family: var(--font);
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	max-width: 980px;
}

.trackers-container .tracker-a .hdr {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.trackers-container .tracker-a .title {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0;
}

.trackers-container .tracker-a .sub {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.35;
}

.trackers-container .tracker-a .meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.trackers-container .tracker-a .chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--chip);
	color: var(--text);
	font-size: 12px;
}

.trackers-container .tracker-a .muted {
	color: var(--muted);
}

.trackers-container .tracker-a table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.trackers-container .tracker-a th,
.trackers-container .tracker-a td {
	padding: 12px 12px;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}

.trackers-container .tracker-a thead th {
	background: #fafafa;
	color: var(--muted);
	font-weight: 600;
	font-size: 12px;
	text-align: left;
}

.trackers-container .tracker-a tbody tr:last-child td {
	border-bottom: none;
}

.trackers-container .tracker-a .program {
	font-weight: 700;
	white-space: nowrap;
}

.trackers-container .tracker-a .subline {
	display: block;
	margin-top: 3px;
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 440px;
}

.trackers-container .tracker-a .pillrow {
	margin-top: 8px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.trackers-container .tracker-a .pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--bg);
	font-size: 12px;
	color: var(--text);
}

.trackers-container .tracker-a .pill .k {
	color: var(--muted);
}

.trackers-container .tracker-a .pill.brand {
	border-color: #dbeafe;
	background: #eff6ff;
}

.trackers-container .tracker-a .pill.warn {
	border-color: #fde68a;
	background: #fffbeb;
}

.trackers-container .tracker-a .pill.bad {
	border-color: #fecaca;
	background: #fef2f2;
}

/* Updated: 7 segments (Preclinical, IND Submitted, IND Cleared, Phase I, Phase II, Phase III, Market) */
.trackers-container .tracker-a .labels {
	display: grid;
	grid-template-columns: repeat(7,1fr);
	font-size: 11px;
	color: var(--muted);
	margin-bottom: 8px;
	user-select: none;
}

.trackers-container .tracker-a .labels span {
	text-align: center;
	padding: 2px 0;
}

.trackers-container .tracker-a .track {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--track);
	overflow: hidden;
}

.trackers-container .tracker-a .fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0%;
	background: var(--fill);
	border-radius: 999px;
}

.trackers-container .tracker-a .marker {
	position: absolute;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg);
	border: 2px solid var(--fill);
	box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.trackers-container .tracker-a .facts {
	margin-top: 8px;
	font-size: 12px;
	color: var(--muted);
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.trackers-container .tracker-a .facts strong {
	color: var(--text);
	font-weight: 600;
}

/* Tooltip */
.trackers-container .tracker-a .hover-area {
	position: relative;
	padding-top: 6px;
}

.trackers-container .tracker-a .tip {
	position: absolute;
	z-index: 10;
	top: -10px;
	left: 50%;
	transform: translate(-50%,-100%);
	min-width: 340px;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 12px;
	box-shadow: var(--shadow);
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease, transform .12s ease;
}

.trackers-container .tracker-a .tip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: var(--bg);
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.trackers-container .tracker-a .hover-area:hover .tip {
	opacity: 1;
	transform: translate(-50%,-108%);
}

.trackers-container .tracker-a .tip h4 {
	margin: 0 0 6px;
	font-size: 13px;
}

.trackers-container .tracker-a .tip p {
	margin: 0;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.35;
}

.trackers-container .tracker-a .row {
	margin-top: 8px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.trackers-container .tracker-a .kv {
	font-size: 12px;
}

.trackers-container .tracker-a .kv b {
	font-weight: 600;
	color: var(--text);
}

/* Program status styling */
.trackers-container .tracker-a tr[data-program-status="paused"] {
	background: #fcfcfd;
}

.trackers-container .tracker-a tr[data-program-status="discontinued"] {
	background: #fcfcfd;
	opacity: .78;
}

.trackers-container .tracker-a tr[data-program-status="discontinued"] .fill {
	filter: grayscale(1);
	opacity: .7;
}

.trackers-container .tracker-a tr[data-program-status="discontinued"] .marker {
	opacity: .7;
}

.trackers-container .tracker-a .footer {
	margin-top: 14px;
}

.trackers-container .tracker-a .disclaimer {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.45;
	border-top: 1px solid var(--border);
	padding-top: 12px;
}

.trackers-container .tracker-a .disclaimer strong {
	color: var(--text);
}

@media (max-width: 820px) {
	.trackers-container .tracker-a thead {
		display: none;
	}

	.trackers-container .tracker-a table,
	.trackers-container .tracker-a tbody,
	.trackers-container .tracker-a tr,
	.trackers-container .tracker-a td {
		display: block;
		width: 100%;
	}

	.trackers-container .tracker-a td {
		border-bottom: 1px solid var(--border);
	}

	.trackers-container .tracker-a tr {
		border-bottom: 1px solid var(--border);
	}

	.trackers-container .tracker-a tbody tr:last-child {
		border-bottom: none;
	}

	.trackers-container .tracker-a .subline {
		max-width: 100%;
	}

	.trackers-container .tracker-a .labels {
		font-size: 10px;
	}
}

/********************************************** TRACKER B  ************************************/

.trackers-container .tracker-b {
	--text: #1f2937;
	--muted: #6b7280;
	--border: #e5e7eb;
	--bg: #ffffff;
	--chip: #f3f4f6;
	--track: #e5e7eb;
	--fill: #1a73e8;
	--shadow: 0 6px 24px rgba(0,0,0,.08);
	--radius: 16px;
	--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

	.trackers-container .tracker-b .btfp-card {
		font-family: var(--font);
		color: var(--text);
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: 20px;
		max-width: 980px;
	}

	.trackers-container .tracker-b .hdr {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 14px;
	}

	.trackers-container .tracker-b .title {
		font-size: 22px;
		font-weight: 700;
		letter-spacing: -.01em;
		margin: 0;
	}

	.trackers-container .tracker-b .sub {
		margin: 6px 0 0;
		color: var(--muted);
		font-size: 13px;
		line-height: 1.35;
	}

	.trackers-container .tracker-b .meta {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.trackers-container .tracker-b .chip {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 6px 10px;
		border-radius: 999px;
		background: var(--chip);
		color: var(--text);
		font-size: 12px;
	}

	.trackers-container .tracker-b .muted {
		color: var(--muted);
	}

	.trackers-container .tracker-b table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		overflow: hidden;
		border: 1px solid var(--border);
		border-radius: var(--radius);
	}

	.trackers-container .tracker-b th, td {
		padding: 12px 12px;
		border-bottom: 1px solid var(--border);
		vertical-align: middle;
	}

	.trackers-container .tracker-b thead th {
		background: #fafafa;
		color: var(--muted);
		font-weight: 600;
		font-size: 12px;
		text-align: left;
	}

	.trackers-container .tracker-b tbody tr:last-child td {
		border-bottom: none;
	}

	.trackers-container .tracker-b .program {
		font-weight: 700;
		white-space: nowrap;
	}

	.trackers-container .tracker-b .subline {
		display: block;
		margin-top: 3px;
		font-weight: 500;
		color: var(--muted);
		font-size: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 440px;
	}

	.trackers-container .tracker-b .pillrow {
		margin-top: 8px;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		align-items: center;
	}

	.trackers-container .tracker-b .pill {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 6px 10px;
		border-radius: 999px;
		border: 1px solid var(--border);
		background: var(--bg);
		font-size: 12px;
		color: var(--text);
	}

		.trackers-container .tracker-b .pill .k {
			color: var(--muted);
		}

		.trackers-container .tracker-b .pill.brand {
			border-color: #dbeafe;
			background: #eff6ff;
		}

		.trackers-container .tracker-b .pill.warn {
			border-color: #fde68a;
			background: #fffbeb;
		}

		.trackers-container .tracker-b .pill.bad {
			border-color: #fecaca;
			background: #fef2f2;
		}

/* 6 segments: Concept, Design, Verification, Validation, FDA Review, Market */
	.trackers-container .tracker-b .labels {
		display: grid;
		grid-template-columns: repeat(6,1fr);
		font-size: 11px;
		color: var(--muted);
		margin-bottom: 8px;
		user-select: none;
	}

		.trackers-container .tracker-b .labels span {
			text-align: center;
			padding: 2px 0;
		}

	.trackers-container .tracker-b .track {
		position: relative;
		height: 10px;
		border-radius: 999px;
		background: var(--track);
		overflow: hidden;
	}

	.trackers-container .tracker-b .fill {
		position: absolute;
		inset: 0 auto 0 0;
		width: 0%;
		background: var(--fill);
		border-radius: 999px;
	}

	.trackers-container .tracker-b .marker {
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: var(--bg);
		border: 2px solid var(--fill);
		box-shadow: 0 2px 6px rgba(0,0,0,.12);
	}

	.trackers-container .tracker-b .facts {
		margin-top: 8px;
		font-size: 12px;
		color: var(--muted);
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		align-items: center;
	}

		.trackers-container .tracker-b .facts strong {
			color: var(--text);
			font-weight: 600;
		}

/* Tooltip */
	.trackers-container .tracker-b .hover-area {
		position: relative;
		padding-top: 6px;
	}

	.trackers-container .tracker-b .tip {
		position: absolute;
		z-index: 10;
		top: -10px;
		left: 50%;
		transform: translate(-50%,-100%);
		min-width: 340px;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 14px;
		padding: 12px;
		box-shadow: var(--shadow);
		opacity: 0;
		pointer-events: none;
		transition: opacity .12s ease, transform .12s ease;
	}

		.trackers-container .tracker-b .tip::after {
			content: "";
			position: absolute;
			left: 50%;
			bottom: -7px;
			transform: translateX(-50%) rotate(45deg);
			width: 12px;
			height: 12px;
			background: var(--bg);
			border-right: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
		}

	.trackers-container .tracker-b .hover-area:hover .tip {
		opacity: 1;
		transform: translate(-50%,-108%);
	}

	.trackers-container .tracker-b .tip h4 {
		margin: 0 0 6px;
		font-size: 13px;
	}

	.trackers-container .tracker-b .tip p {
		margin: 0;
		font-size: 12px;
		color: var(--muted);
		line-height: 1.35;
	}

	.trackers-container .tracker-b .row {
		margin-top: 8px;
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
	}

	.trackers-container .tracker-b .kv {
		font-size: 12px;
	}

		.trackers-container .tracker-b .kv b {
			font-weight: 600;
			color: var(--text);
		}

/* Program status styling */
	.trackers-container .tracker-b tr[data-program-status="paused"] {
		background: #fcfcfd;
	}

	.trackers-container .tracker-b tr[data-program-status="discontinued"] {
		background: #fcfcfd;
		opacity: .78;
	}

		.trackers-container .tracker-b tr[data-program-status="discontinued"] .fill {
			filter: grayscale(1);
			opacity: .7;
		}

		.trackers-container .tracker-b tr[data-program-status="discontinued"] .marker {
			opacity: .7;
		}

/* Diagnostics-only CLIA note */
	.trackers-container .tracker-b .clia-note {
		margin-top: 10px;
		border: 1px solid #dbeafe;
		background: #eff6ff;
		border-radius: 14px;
		padding: 10px 12px;
		color: #1e40af;
		font-size: 12px;
		line-height: 1.35;
		display: none;
	}

	.trackers-container .tracker-b .footer {
		margin-top: 14px;
	}

	.trackers-container .tracker-b .disclaimer {
		font-size: 12px;
		color: var(--muted);
		line-height: 1.45;
		border-top: 1px solid var(--border);
		padding-top: 12px;
	}

		.trackers-container .tracker-b .disclaimer strong {
			color: var(--text);
		}

@media (max-width: 820px) {
	.trackers-container .tracker-b thead {
		display: none;
	}

	.trackers-container .tracker-b table, tbody, tr, td {
		display: block;
		width: 100%;
	}

	.trackers-container .tracker-b td {
		border-bottom: 1px solid var(--border);
	}

	.trackers-container .tracker-b tr {
		border-bottom: 1px solid var(--border);
	}

	.trackers-container .tracker-b tbody tr:last-child {
		border-bottom: none;
	}

	.trackers-container .tracker-b .subline {
		max-width: 100%;
	}

	.trackers-container .tracker-b .labels {
		font-size: 10px;
	}
}


/********************************************** TRACKER C  ************************************/

.trackers-container .tracker-c {
	--text: #1f2937;
	--muted: #6b7280;
	--border: #e5e7eb;
	--bg: #ffffff;
	--chip: #f3f4f6;
	--track: #e5e7eb;
	--fill: #1a73e8;
	--shadow: 0 6px 24px rgba(0,0,0,.08);
	--radius: 16px;
	--font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

	.trackers-container .tracker-c .btfp-card {
		font-family: var(--font);
		color: var(--text);
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: 20px;
		max-width: 980px;
	}

	.trackers-container .tracker-c .hdr {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 14px;
	}

	.trackers-container .tracker-c .title {
		font-size: 22px;
		font-weight: 700;
		margin: 0;
	}

	.trackers-container .tracker-c .sub {
		margin: 6px 0 0;
		color: var(--muted);
		font-size: 13px;
		line-height: 1.35;
	}

	.trackers-container .tracker-c .meta {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.trackers-container .tracker-c .chip {
		display: inline-flex;
		gap: 8px;
		padding: 6px 10px;
		border-radius: 999px;
		background: var(--chip);
		font-size: 12px;
	}

	.trackers-container .tracker-c .muted {
		color: var(--muted);
	}

	.trackers-container .tracker-c table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.trackers-container .tracker-c th, td {
		padding: 12px;
		border-bottom: 1px solid var(--border);
		vertical-align: middle;
	}

	.trackers-container .tracker-c thead th {
		background: #fafafa;
		color: var(--muted);
		font-size: 12px;
		text-align: left;
	}

	.trackers-container .tracker-c tbody tr:last-child td {
		border-bottom: none;
	}

	.trackers-container .tracker-c .program {
		font-weight: 700;
	}

	.trackers-container .tracker-c .subline {
		display: block;
		margin-top: 3px;
		color: var(--muted);
		font-size: 12px;
	}

	.trackers-container .tracker-c .pillrow {
		margin-top: 8px;
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	.trackers-container .tracker-c .pill {
		padding: 6px 10px;
		border-radius: 999px;
		border: 1px solid var(--border);
		font-size: 12px;
	}

		.trackers-container .tracker-c .pill.brand {
			background: #eff6ff;
			border-color: #dbeafe;
		}

		.trackers-container .tracker-c .pill.bad {
			background: #fef2f2;
			border-color: #fecaca;
		}

/* 6 segments: Confirm scope → Establishment → Data package → Submission → Review → Licensed */
	.trackers-container .tracker-c .labels {
		display: grid;
		grid-template-columns: repeat(6,1fr);
		font-size: 11px;
		color: var(--muted);
		margin-bottom: 8px;
	}

		.trackers-container .tracker-c .labels span {
			text-align: center;
		}

	.trackers-container .tracker-c .track {
		position: relative;
		height: 10px;
		background: var(--track);
		border-radius: 999px;
	}

	.trackers-container .tracker-c .fill {
		position: absolute;
		inset: 0 auto 0 0;
		background: var(--fill);
		border-radius: 999px;
		width: 0%;
	}

	.trackers-container .tracker-c .marker {
		position: absolute;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: #fff;
		border: 2px solid var(--fill);
	}

	.trackers-container .tracker-c .facts {
		margin-top: 8px;
		font-size: 12px;
		color: var(--muted);
	}

	.trackers-container .tracker-c tr[data-program-status="discontinued"] {
		opacity: .75;
		background: #fcfcfd;
	}

		.trackers-container .tracker-c tr[data-program-status="discontinued"] .fill {
			filter: grayscale(1);
		}

	.trackers-container .tracker-c .footer {
		margin-top: 14px;
	}

	.trackers-container .tracker-c .disclaimer {
		font-size: 12px;
		color: var(--muted);
		line-height: 1.45;
		border-top: 1px solid var(--border);
		padding-top: 12px;
	}

		.trackers-container .tracker-c .disclaimer strong {
			color: var(--text);
		}

@media (max-width:820px) {
	.trackers-container .tracker-c thead {
		display: none;
	}

	.trackers-container .tracker-c table, .trackers-container .tracker-c tbody, .trackers-container .tracker-c tr, .trackers-container .tracker-c td {
		display: block;
		width: 100%;
	}
}

/********************************************** TRACKER SHOW/HIDE TOGGLE  ************************************/

.trackers-container .tracker-toggle {
	display: block;
	max-width: 980px;
	margin: 4px 0;
	text-align: right;
	font-size: 13px;
	cursor: pointer;
}

.trackers-container .tracker-toggle .chevron {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	margin-bottom: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-135deg); /* points up: trackers visible */
	transition: transform .15s ease;
	vertical-align: middle;
}

.trackers-container .tracker-toggle.is-collapsed .chevron {
	transform: rotate(45deg); /* points down: trackers hidden */
}
