/* ============================================================
   TBA Pipeline – Flow View  |  BEM prefix: .tba-pl__*
   All font-family omitted — inherits from site theme.
   ============================================================ */

/* ─── Top bar: toggle + search + stage on one row ─────────── */

.tba-pl__topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 0 10px;
	flex-wrap: nowrap;
}

/* ─── Disease toggle (segmented button style) ─────────────── */

.tba-pl__disease-toggle {
	display: inline-flex;
	align-items: center;
	background: #efefef;
	border-radius: 8px;
	padding: 4px;
	gap: 3px;
	flex-shrink: 0;
}

.tba-pl__disease-btn {
	background: transparent;
	border: none;
	border-radius: 6px;
	padding: 7px 16px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
}

.tba-pl__disease-btn:hover {
	color: #333;
	background: rgba(255, 255, 255, 0.6);
}

.tba-pl__disease-btn.is-active {
	/* Was white on light grey — too close to the inactive state to read. */
	background: #51195d;
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	padding: 11px 26px;
	box-shadow: 0 1px 4px rgba(81, 25, 93, 0.35);
}

.tba-pl__disease-btn.is-active:hover {
	background: #51195d;
	color: #fff;
}

.tba-pl__disease-btn:focus-visible {
	outline: 2px solid #51195d;
	outline-offset: 2px;
}

/* ─── Search ──────────────────────────────────────────────── */

.tba-pl__search {
	flex: 1 1 0;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	font-size: 0.95rem;
	color: #333;
	background: #fff;
	transition: border-color 0.15s;
}

.tba-pl__search:focus {
	outline: none;
	border-color: #51195d;
}

/* ─── Stage dropdown ──────────────────────────────────────── */

.tba-pl__stage-select {
	flex: 0 0 auto;
	width: auto;        /* override any theme width: 100% on selects */
	max-width: 180px;
	/* Vertical padding + line-height here are tuned to land on the same 40px
	   height as the search box. The theme's fixed <select> height clipped the
	   label once the type got bigger, so the content sets the height instead. */
	padding: 10px 32px 10px 14px;
	height: auto;
	line-height: 1.2;
	border: 1px solid #d0d0d0;
	border-radius: 6px;
	font-size: 0.95rem;
	color: #333;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s;
}

.tba-pl__stage-select:focus {
	outline: none;
	border-color: #51195d;
}

/* ─── Adjacent disease sub-tabs ──────────────────────────── */

.tba-pl__adj-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 0 10px;
}

.tba-pl__adj-tab {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 5px 14px;
	font-size: 0.85rem;
	font-weight: 500;
	color: #555;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tba-pl__adj-tab:hover {
	background: #ede0f1;
	border-color: #51195d;
	color: #51195d;
}

.tba-pl__adj-tab.is-active {
	background: #51195d;
	border-color: #51195d;
	color: #fff;
}

/* ─── Stats bar ──────────────────────────────────────────── */

.tba-pl__stats {
	display: flex;
	gap: 28px;
	align-items: flex-end;
	padding: 4px 0 16px;
}

.tba-pl__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tba-pl__stat-num {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.tba-pl__stat-lbl {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #999;
	margin-top: 3px;
}

.tba-pl__stat--marketed  .tba-pl__stat-num { color: #61B43D; }
.tba-pl__stat--clinical  .tba-pl__stat-num { color: #E96E1F; }
.tba-pl__stat--discovery .tba-pl__stat-num { color: #E73467; }
.tba-pl__stat--total     .tba-pl__stat-num { color: #222; }

/* ─── Flow layout ────────────────────────────────────────── */

.tba-pl__flow {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.tba-pl__empty {
	padding: 40px 0;
	text-align: center;
	color: #999;
	font-size: 0.95rem;
}

/* ─── Section ────────────────────────────────────────────── */

.tba-pl__section {
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.10);
}

.tba-pl__section-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
}

.tba-pl__section--marketed  .tba-pl__section-hd { background: #61B43D; }
.tba-pl__section--clinical  .tba-pl__section-hd { background: #E96E1F; }
.tba-pl__section--discovery .tba-pl__section-hd { background: #E73467; }

.tba-pl__section-label {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
}

.tba-pl__section-count {
	font-size: 0.78rem;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 20px;
	padding: 2px 10px;
	color: #fff;
}

/* Tinted section body */
.tba-pl__section--marketed  .tba-pl__section-body { background: rgba(97, 180, 61, 0.05); }
.tba-pl__section--clinical  .tba-pl__section-body { background: rgba(233, 110, 31, 0.05); }
.tba-pl__section--discovery .tba-pl__section-body { background: rgba(231, 52, 103, 0.05); }

/* Phases side by side */
.tba-pl__section-body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

/* ─── Phase columns ──────────────────────────────────────── */

.tba-pl__phase {
	flex: 1;
	min-width: 0;
	border-left: 1px solid rgba(0, 0, 0, 0.07);
}

.tba-pl__phase:first-child {
	border-left: none;
}

.tba-pl__phase-hd {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px 4px;
}

.tba-pl__phase-label {
	font-size: 1rem;
	font-weight: 700;
}

.tba-pl__section--marketed  .tba-pl__phase-label { color: #4a9130; }
.tba-pl__section--clinical  .tba-pl__phase-label { color: #c0580f; }
.tba-pl__section--discovery .tba-pl__phase-label { color: #c42657; }

.tba-pl__phase-count {
	font-size: 0.72rem;
	font-weight: 600;
	color: #aaa;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 20px;
	padding: 1px 6px;
}

.tba-pl__phase-cards {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px 10px 12px;
}

/* Marketed has one phase — lay cards in 3 columns, equal row heights */
.tba-pl__section--marketed .tba-pl__phase-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.tba-pl__section--marketed .tba-pl__card {
	flex: unset;
}

.tba-pl__section--marketed .tba-pl__card {
	flex: 0 0 calc(33.333% - 6px);
	min-width: 0;
}

/* ─── Card ───────────────────────────────────────────────── */

.tba-pl__card {
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.tba-pl__card:hover {
	border-color: #51195d;
	box-shadow: 0 2px 8px rgba(81, 25, 93, 0.10);
}

/* Card inner is now a div — consistent padding for all children */
.tba-pl .tba-pl__card-inner {
	display: block;
	padding: 9px 11px;
}

/* Title link wraps only the title + common name */
.tba-pl .tba-pl__card-title-link {
	display: block;
	text-decoration: none !important;
	color: inherit;
}

.tba-pl .tba-pl__card-title-link:hover {
	text-decoration: none !important;
	color: inherit;
}

.tba-pl .tba-pl__card-title {
	margin: 0 0 2px;
	font-size: 0.875rem;
	font-weight: 700;
	color: #51195d;
	line-height: 1.25;
	text-decoration: none !important;
}

.tba-pl .tba-pl__card-common {
	font-size: 0.76rem;
	color: #888;
	margin: 0 0 4px;
	text-decoration: none;
}

.tba-pl .tba-pl__card-subtitle {
	font-size: 0.73rem;
	color: #666;
	background: transparent;
	padding: 0;
	margin-top: 4px;
	line-height: 1.4;
}

.tba-pl .tba-pl__card-link {
	color: #666;
	text-decoration: none !important;
	transition: color 0.12s;
}

.tba-pl .tba-pl__card-link:hover {
	color: #51195d;
	text-decoration: none !important;
}

/* ─── Adjacent disease pills on cards ────────────────────── */

.tba-pl__adj-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.tba-pl__adj-pill {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 6px;
	background: #e8f5e2;
	color: #3a7a1e;
	border: 1px solid rgba(58, 122, 30, 0.25);
	white-space: nowrap;
}

/* The disease tab currently being viewed — same pill, filled. */
.tba-pl__adj-pill--muted {
	background: #f1f1f1;
	color: #6b6b6b;
	border-color: #e0e0e0;
	padding: 1px 6px;
	font-size: 0.66rem;
}

.tba-pl__adj-pill.is-current {
	background: #3a7a1e;
	color: #fff;
	border-color: #3a7a1e;
}

/* Sponsor note on trial cards — deliberately quiet, sits last in the card. */
.tba-pl__sponsor {
	margin-top: 6px;
	font-size: 0.7rem;
	line-height: 1.35;
	color: #777;
}

.tba-pl__td--name .tba-pl__sponsor {
	margin-top: 3px;
}

/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
	.tba-pl__section-body {
		flex-direction: column;
		/* Stacked phases must fill the width; flex-start shrank each phase
		   column to its content, so short-titled phases rendered narrow. */
		align-items: stretch;
	}

	.tba-pl__phase {
		border-left: none;
		border-top: 1px solid rgba(0, 0, 0, 0.07);
	}

	.tba-pl__phase:first-child {
		border-top: none;
	}

	.tba-pl__phase-cards {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.tba-pl__card {
		flex: 0 0 calc(50% - 4px);
	}

	/* Marketed keeps 3-col grid on tablet */
	.tba-pl__section--marketed .tba-pl__phase-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.tba-pl__topbar {
		flex-wrap: wrap;
	}

	.tba-pl__search {
		flex: 1 1 100%;
	}

	.tba-pl__stage-select {
		flex: 1 1 100%;
	}

	.tba-pl__stats {
		gap: 16px;
	}

	.tba-pl__stat-num {
		font-size: 1.4rem;
	}

	.tba-pl__card {
		flex: 0 0 100%;
	}

	.tba-pl__section--marketed .tba-pl__phase-cards {
		grid-template-columns: 1fr;
	}

	.tba-pl__grid {
		grid-template-columns: 1fr;
	}
}

/* ─── View switcher (Flow / Grid) ────────────────────────── */

.tba-pl__view-switcher {
	display: inline-flex;
	align-items: center;
	background: #efefef;
	border-radius: 8px;
	padding: 4px;
	gap: 3px;
	flex-shrink: 0;
	margin-left: auto;
}

.tba-pl__view-btn {
	background: transparent;
	border: none;
	border-radius: 6px;
	padding: 9px 18px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
	white-space: nowrap;
}

.tba-pl__view-btn:hover {
	color: #333;
	background: rgba(255, 255, 255, 0.6);
}

.tba-pl__view-btn.is-active {
	background: #fff;
	color: #222;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ─── Grid layout ────────────────────────────────────────── */

.tba-pl__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

/* ─── Grid card ──────────────────────────────────────────── */

.tba-pl__grid-card {
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.15s, border-color 0.15s;
}

.tba-pl__grid-card:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
	border-color: rgba(0, 0, 0, 0.15);
}

.tba-pl__grid-card--marketed  { background: rgba(97, 180, 61, 0.07); }
.tba-pl__grid-card--clinical  { background: rgba(233, 110, 31, 0.07); }
.tba-pl__grid-card--discovery { background: rgba(231, 52, 103, 0.07); }

.tba-pl__grid-card-inner {
	display: block;
	padding: 14px 16px;
	text-decoration: none !important;
	color: inherit;
	height: 100%;
	box-sizing: border-box;
}

.tba-pl__grid-card-inner:hover {
	text-decoration: none !important;
	color: inherit;
}

.tba-pl__grid-stage-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
}

.tba-pl__grid-card--marketed  .tba-pl__grid-stage-badge { background: #61B43D; }
.tba-pl__grid-card--clinical  .tba-pl__grid-stage-badge { background: #E96E1F; }
.tba-pl__grid-card--discovery .tba-pl__grid-stage-badge { background: #E73467; }

.tba-pl__grid-title {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none !important;
}

.tba-pl__grid-card--marketed  .tba-pl__grid-title { color: #3d7a22; }
.tba-pl__grid-card--clinical  .tba-pl__grid-title { color: #b85010; }
.tba-pl__grid-card--discovery .tba-pl__grid-title { color: #b82050; }

.tba-pl__grid-subtitle {
	font-size: 0.8rem;
	color: #666;
	margin-bottom: 10px;
	line-height: 1.4;
}

.tba-pl__grid-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 8px;
}

.tba-pl__grid-tag {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.07);
	color: #555;
}

@media (max-width: 900px) {
	.tba-pl__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ─── Table view ──────────────────────────────────────────── */

.tba-pl__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tba-pl__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.tba-pl__th {
	text-align: left;
	padding: 10px 14px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #888;
	border-bottom: 2px solid #e8e8e8;
	white-space: nowrap;
}

.tba-pl__th--name    { width: 38%; }
.tba-pl__th--stage   { width: 11%; }
.tba-pl__th--phase   { width: 16%; }
.tba-pl__th--type    { width: 11%; }
.tba-pl__th--shared  { width: 24%; }

.tba-pl__th.is-sorted {
	color: #51195d;
}

/* Header sort control — reset theme button styles, inherit the th type. */
.tba-pl .tba-pl__sort-btn,
.tba-pl .tba-pl__sort-btn:hover,
.tba-pl .tba-pl__sort-btn:focus {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
	user-select: none;
}

.tba-pl .tba-pl__sort-btn:hover {
	color: #51195d;
}

.tba-pl .tba-pl__sort-btn:focus-visible {
	outline: 2px solid #51195d;
	outline-offset: 2px;
}

.tba-pl__sort-arrow {
	font-size: 0.8rem;
	opacity: 0.35;
}

.tba-pl__th.is-sorted .tba-pl__sort-arrow {
	opacity: 1;
}

.tba-pl__tr {
	border-bottom: 1px solid #f0f0f0;
	transition: background 0.1s;
}

.tba-pl__tr:hover {
	background: #fafafa;
}

.tba-pl__td {
	padding: 11px 14px;
	vertical-align: middle;
	color: #333;
}

.tba-pl .tba-pl__tbl-title {
	font-weight: 600;
	font-size: 0.9rem;
	color: #51195d;
	text-decoration: none !important;
}

.tba-pl .tba-pl__tbl-title:hover {
	text-decoration: underline !important;
}

.tba-pl__tbl-subtitle {
	font-size: 0.75rem;
	color: #888;
	margin-top: 2px;
	line-height: 1.4;
}

/* Stage pill — solid section color */
.tba-pl__tbl-stage {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.7rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

.tba-pl__tbl-stage--marketed  { background: #61B43D; }
.tba-pl__tbl-stage--clinical  { background: #E96E1F; }
.tba-pl__tbl-stage--discovery { background: #E73467; }

/* Phase pill — light tint with darker text */
.tba-pl__tbl-phase {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
}

.tba-pl__tbl-phase--marketed  { background: rgba(97, 180, 61, 0.15);  color: #3d7a22; }
.tba-pl__tbl-phase--clinical  { background: rgba(233, 110, 31, 0.15); color: #b85010; }
.tba-pl__tbl-phase--discovery { background: rgba(231, 52, 103, 0.15); color: #b82050; }

.tba-pl__tbl-empty {
	color: #ccc;
}

.tba-pl__td--shared .tba-pl__adj-pills {
	margin-top: 0;
}

@media (max-width: 640px) {
	.tba-pl__th--stage,
	.tba-pl__td--stage {
		display: none;
	}
}