/**
 * PokeFireRed Tools - FireRed Team Builder (tool-specific styles).
 * Requires pfr-base.css, which is loaded first.
 */

.pfr-app .pfr-team-noscript {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: var(--pfr-yellow-soft);
	border: 1px solid var(--pfr-yellow);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-slot:focus-visible,
.pfr-app .pfr-slot-remove:focus-visible {
	outline: 3px solid #1a5fd0;
	outline-offset: 2px;
}

/* ---------- Toolbar ---------- */

.pfr-app .pfr-team-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
}

.pfr-app .pfr-team-count {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--pfr-muted);
}

.pfr-app .pfr-team-count strong {
	color: var(--pfr-ink);
	font-weight: 800;
}

.pfr-app .pfr-team-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pfr-app .pfr-reset {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pfr-app .pfr-confirm-text {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* ---------- Team slots ---------- */

.pfr-app .pfr-team-slots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-slot-wrap {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.pfr-app .pfr-slot {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-height: 172px;
	margin: 0;
	padding: 12px 8px 10px;
	font-family: var(--pfr-font);
	font-size: 0.9375rem;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	color: var(--pfr-ink);
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius);
	box-shadow: var(--pfr-shadow);
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.pfr-app .pfr-slot:hover {
	border-color: var(--pfr-red);
	box-shadow: 0 2px 4px rgba(60, 40, 20, 0.08), 0 8px 20px rgba(201, 40, 31, 0.12);
	transform: translateY(-1px);
	color: var(--pfr-ink);
	background: var(--pfr-card);
}

.pfr-app .pfr-slot--empty {
	background: transparent;
	border: 2px dashed var(--pfr-line-strong);
	box-shadow: none;
	color: var(--pfr-muted);
}

.pfr-app .pfr-slot--empty:hover {
	background: #fff;
	color: var(--pfr-red-dark);
}

.pfr-app .pfr-slot-num {
	position: absolute;
	top: 8px;
	left: 10px;
	font-size: 0.75rem;
	font-weight: 800;
	color: var(--pfr-muted);
}

.pfr-app .pfr-slot-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
	color: var(--pfr-red);
	background: var(--pfr-red-soft);
	border-radius: 50%;
}

.pfr-app .pfr-slot-label {
	font-weight: 700;
}

.pfr-app .pfr-slot-sprite {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	image-rendering: pixelated;
}

.pfr-app .pfr-slot-name {
	display: block;
	max-width: 100%;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pfr-app .pfr-slot-types {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}

.pfr-app .pfr-slot-hint {
	font-size: 0.75rem;
	color: var(--pfr-muted);
}

.pfr-app .pfr-slot-remove {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	font-family: var(--pfr-font);
	font-size: 1.35rem;
	line-height: 1;
	color: var(--pfr-muted);
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
}

.pfr-app .pfr-slot-remove:hover {
	color: var(--pfr-red-dark);
	background: var(--pfr-red-soft);
}

.pfr-app .pfr-slot--filled {
	padding-top: 22px;
}

.pfr-app .pfr-pop {
	animation: pfr-pop 0.25s ease-out;
}

@keyframes pfr-pop {
	from {
		opacity: 0;
		transform: scale(0.94);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---------- Analysis cards ---------- */

.pfr-app .pfr-team-analysis {
	display: grid;
	gap: 14px;
	min-height: 120px;
}

/* Team type summary */

.pfr-app .pfr-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-summary-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 10px;
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius-sm);
	min-width: 0;
}

.pfr-app .pfr-summary-sprite {
	display: block;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	max-width: none;
	margin: 0;
	image-rendering: pixelated;
}

.pfr-app .pfr-summary-text {
	min-width: 0;
}

.pfr-app .pfr-summary-name {
	display: block;
	font-weight: 800;
	line-height: 1.2;
}

.pfr-app .pfr-summary-types {
	display: block;
	font-size: 0.875rem;
	color: var(--pfr-muted);
}

/* Weakness / resistance groups */

.pfr-app .pfr-group {
	margin: 0 0 14px;
	padding: 0;
}

.pfr-app .pfr-group:last-child {
	margin-bottom: 0;
}

.pfr-app .pfr-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pfr-muted);
}

.pfr-app .pfr-sev-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--pfr-muted);
}

.pfr-app .pfr-sev-major .pfr-sev-dot { background: var(--pfr-red); }

.pfr-app .pfr-sev-watch .pfr-sev-dot { background: var(--pfr-orange); }

.pfr-app .pfr-sev-minor .pfr-sev-dot { background: var(--pfr-yellow); }

.pfr-app .pfr-sev-safe .pfr-sev-dot { background: var(--pfr-green); }

.pfr-app .pfr-rows {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 4px 12px;
	margin: 0;
	padding: 8px 10px;
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-left-width: 4px;
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-sev-major .pfr-row { border-left-color: var(--pfr-red); background: var(--pfr-red-soft); }

.pfr-app .pfr-sev-watch .pfr-row { border-left-color: var(--pfr-orange); }

.pfr-app .pfr-sev-minor .pfr-row { border-left-color: var(--pfr-yellow); }

.pfr-app .pfr-res-row { border-left-color: var(--pfr-green); }

.pfr-app .pfr-row-main {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pfr-app .pfr-row-count {
	font-size: 0.875rem;
	font-weight: 700;
}

.pfr-app .pfr-row-who {
	grid-column: 1 / -1;
	font-size: 0.8125rem;
	color: var(--pfr-muted);
}

.pfr-app .pfr-who-quad {
	font-weight: 800;
	color: var(--pfr-red-dark);
}

.pfr-app .pfr-safe-line {
	margin: 10px 0 0;
	font-size: 0.875rem;
	color: var(--pfr-muted);
}

.pfr-app .pfr-safe-line strong {
	color: var(--pfr-green);
}

/* ---------- Insights / suggestions ---------- */

.pfr-app .pfr-insights {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-insight {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0;
	padding: 10px 12px;
	font-size: 0.9375rem;
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-left-width: 4px;
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-insight--warn { border-left-color: var(--pfr-orange); background: #fff7ee; }

.pfr-app .pfr-insight--good { border-left-color: var(--pfr-green); background: var(--pfr-green-soft); }

.pfr-app .pfr-insight--info { border-left-color: #6d8fcf; background: var(--pfr-blue-soft); }

.pfr-app .pfr-insight-kind {
	flex: 0 0 auto;
	margin-top: 2px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pfr-muted);
}

.pfr-app .pfr-suggest {
	display: grid;
	gap: 8px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-suggest-item {
	margin: 0;
	padding: 10px 12px;
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-suggest-q {
	margin: 0 0 4px;
	font-weight: 800;
}

.pfr-app .pfr-suggest-a {
	margin: 0;
}

.pfr-app .pfr-poke-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-poke-item {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 8px 10px;
	background: #fff;
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-poke-meta {
	min-width: 0;
	font-size: 0.8125rem;
	color: var(--pfr-muted);
}

.pfr-app .pfr-poke-name {
	display: block;
	font-size: 1rem;
	font-weight: 800;
	color: var(--pfr-ink);
}

@media (min-width: 400px) {
.pfr-app .pfr-team-slots {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
.pfr-app .pfr-team-slots {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
.pfr-app .pfr-team-actions {
		width: 100%;
	}

.pfr-app .pfr-team-actions .pfr-btn {
		flex: 1 1 auto;
	}

.pfr-app .pfr-reset {
		flex: 1 1 auto;
	}

.pfr-app .pfr-reset .pfr-btn {
		flex: 1 1 auto;
	}
}

/* =====================================================================
 * Phase 2 - Team Builder: the roster board is the hero of the page.
 * ===================================================================== */

.pfr-app .pfr-team-toolbar {
	align-items: center;
	margin: 0 0 10px;
}

.pfr-app .pfr-team-count {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 14px;
	font-size: 0.9375rem;
	font-weight: 700;
	background: #fff;
	border: 1px solid var(--pfr-line-strong);
	border-radius: 999px;
}

.pfr-app .pfr-team-count strong {
	color: var(--pfr-accent-dark);
	font-size: 1.0625rem;
}

.pfr-app .pfr-team-slots {
	margin: 0 0 18px;
	padding: 14px;
	background: linear-gradient(180deg, #fff 0, var(--pfr-accent-wash) 100%);
	border: 1px solid var(--pfr-line);
	border-radius: 18px;
	box-shadow: var(--pfr-shadow);
}

.pfr-app .pfr-slot--filled {
	border-top: 4px solid var(--pfr-accent);
	box-shadow: 0 2px 8px rgba(60, 40, 20, 0.1);
}

.pfr-app .pfr-slot--empty:hover,
.pfr-app .pfr-slot--empty:focus-visible {
	border-color: var(--pfr-accent);
	background: var(--pfr-accent-wash);
}

.pfr-app .pfr-slot-plus {
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
}

.pfr-app .pfr-slot-num {
	top: 8px;
	left: 8px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	font-size: 0.75rem;
	color: #fff;
	background: var(--pfr-accent);
	border-radius: 50%;
}

.pfr-app .pfr-slot--empty .pfr-slot-num {
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
}

.pfr-app .pfr-team-analysis .pfr-card .pfr-section-title::before {
	content: "";
	align-self: center;
	width: 5px;
	height: 1.1em;
	margin-right: 2px;
	background: var(--pfr-accent);
	border-radius: 3px;
}

.pfr-app .pfr-improve {
	background: linear-gradient(180deg, var(--pfr-accent-wash) 0, #fff 140px);
	border: 1px solid var(--pfr-accent);
	border-left: 6px solid var(--pfr-accent);
}

.pfr-app .pfr-improve .pfr-section-title {
	font-size: 1.25rem;
}

/* =====================================================================
 * 1.5.4 - the type matrix on a phone.
 * Seven columns cannot fit a 390px screen, and squeezing them turned Pokemon
 * names into "C...". The matrix now keeps a readable minimum width and scrolls
 * inside its own region: full names, clear sprites, all six team columns, and
 * the attacking-type column pinned to the left so a row never loses its label.
 * ===================================================================== */

.pfr-app .pfr-mx-scroll {
	position: relative;
}

.pfr-app .pfr-mx-hint {
	display: none;
	margin: 0 0 8px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--pfr-accent-dark);
}

@media (max-width: 700px) {
	.pfr-app .pfr-mx-hint {
		display: block;
	}

	/* enough room for the type column plus six Pokemon, instead of 100% of the screen */
	.pfr-app .pfr-matrix {
		width: auto;
		min-width: 648px;
	}

	/* a sprite you can recognise and a name you can read */
	.pfr-app .pfr-mx-sprite {
		width: 44px;
		height: 44px;
	}

	.pfr-app .pfr-mx-name {
		max-width: none;
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}

	.pfr-app .pfr-matrix thead th {
		min-width: 88px;
	}

	/* the pinned column: wide enough for the badge, and never broken mid-label */
	.pfr-app .pfr-matrix .pfr-corner,
	.pfr-app .pfr-matrix tbody th {
		min-width: 96px;
		white-space: nowrap;
	}

	.pfr-app .pfr-matrix .pfr-corner {
		font-size: 0.75rem;
	}

	/* the right edge fades, so it is clear the table continues */
	.pfr-app .pfr-mx-scroll::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 26px;
		background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
		border-radius: 0 var(--pfr-radius-sm) var(--pfr-radius-sm) 0;
		pointer-events: none;
	}
}

/* the shortened corner label keeps its full wording for screen readers */
@media (max-width: 560px) {
	.pfr-app .pfr-mx-corner-rest {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* =====================================================================
 * 1.6.0 - the answer first. The roster is followed by what the team's
 * numbers actually mean: the worst shared weakness, what nothing on the
 * team answers, and the one change worth making - before the tables that
 * those conclusions were counted from.
 * ===================================================================== */

.pfr-app .pfr-tb-answer {
	border-left: 5px solid var(--pfr-line-strong);
	background: linear-gradient(180deg, var(--pfr-card-soft) 0, #fff 120px);
}

.pfr-app .pfr-tb-answer--major {
	border-left-color: var(--pfr-red);
	background: linear-gradient(180deg, var(--pfr-red-soft) 0, #fff 120px);
}

.pfr-app .pfr-tb-answer--watch {
	border-left-color: var(--pfr-yellow);
	background: linear-gradient(180deg, var(--pfr-yellow-soft) 0, #fff 120px);
}

.pfr-app .pfr-tb-answer--solid {
	border-left-color: var(--pfr-green);
	background: linear-gradient(180deg, var(--pfr-green-soft) 0, #fff 120px);
}

.pfr-app .pfr-tb-verdict {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.pfr-app .pfr-tb-verdict-k,
.pfr-app .pfr-tb-point-k,
.pfr-app .pfr-tb-fix-k {
	flex: none;
	padding: 3px 9px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	background: var(--pfr-muted);
	border-radius: 999px;
}

.pfr-app .pfr-tb-answer--major .pfr-tb-verdict-k {
	background: var(--pfr-red-dark);
}

.pfr-app .pfr-tb-answer--watch .pfr-tb-verdict-k {
	color: var(--pfr-ink);
	background: var(--pfr-yellow);
}

.pfr-app .pfr-tb-answer--solid .pfr-tb-verdict-k {
	background: var(--pfr-green);
}

.pfr-app .pfr-tb-verdict-t {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.35;
}

.pfr-app .pfr-tb-points {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 7px;
}

.pfr-app .pfr-tb-point {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.pfr-app .pfr-tb-point-k,
.pfr-app .pfr-tb-fix-k {
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
}

.pfr-app .pfr-tb-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

.pfr-app .pfr-tb-pair {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.pfr-app .pfr-tb-count {
	font-size: 0.8125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--pfr-muted);
}

.pfr-app .pfr-tb-more {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-muted);
}

.pfr-app .pfr-tb-fix {
	margin: 14px 0 0;
	padding: 11px 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-tb-fix-line {
	flex: 1 1 220px;
	font-size: 1rem;
	line-height: 1.45;
}

.pfr-app .pfr-tb-figures {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pfr-app .pfr-tb-figure {
	padding: 4px 10px;
	font-size: 0.8125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--pfr-green);
	background: var(--pfr-green-soft);
	border-radius: 999px;
}

.pfr-app .pfr-tb-figure--sum {
	color: var(--pfr-muted);
	background: var(--pfr-card-soft);
}

.pfr-app .pfr-tb-jump {
	margin: 12px 0 0;
	padding: 7px 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	color: var(--pfr-accent-dark);
	background: #fff;
	border: 1px solid var(--pfr-accent);
	border-radius: 999px;
	cursor: pointer;
}

.pfr-app .pfr-tb-jump:hover,
.pfr-app .pfr-tb-jump:focus-visible {
	color: #fff;
	background: var(--pfr-accent);
}

.pfr-app .pfr-tb-jump-arrow {
	font-weight: 700;
}

.pfr-app .pfr-tb-basis {
	margin: 10px 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pfr-muted);
}

/* the grid the answer card points at should not look jumped-to-nowhere */
.pfr-app .pfr-grid--two:focus {
	outline: none;
}

@media (max-width: 560px) {
	.pfr-app .pfr-tb-verdict-t {
		font-size: 1.0625rem;
	}

	.pfr-app .pfr-tb-figure {
		font-size: 0.75rem;
	}
}

/* =====================================================================
 * 1.7.0 - progression constraints. Two opt-in choices decide what may be
 * recommended. They never change the team the player built.
 * ===================================================================== */

.pfr-app .pfr-tb-constraints {
	margin: 0 0 14px;
	padding: 8px 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-tb-seg-label {
	margin-right: 2px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pfr-muted);
}

.pfr-app .pfr-tb-toggle {
	padding: 6px 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-ink);
	background: #fff;
	border: 1px solid var(--pfr-line-strong);
	border-radius: 999px;
	cursor: pointer;
}

.pfr-app .pfr-tb-toggle:hover {
	border-color: var(--pfr-accent);
}

.pfr-app .pfr-tb-toggle-box {
	width: 15px;
	height: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6875rem;
	font-weight: 900;
	line-height: 1;
	color: #fff;
	background: #fff;
	border: 1px solid var(--pfr-line-strong);
	border-radius: 4px;
}

.pfr-app .pfr-tb-toggle.is-on .pfr-tb-toggle-box {
	background: var(--pfr-accent);
	border-color: var(--pfr-accent);
}

/* when a recommended Pokemon can be raised */
.pfr-app .pfr-tb-when {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pfr-green);
}

.pfr-app .pfr-tb-when--trade {
	color: var(--pfr-accent-dark);
}

.pfr-app .pfr-tb-figure--when {
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
}

/* a team member the player picked that the constraints would not suggest */
.pfr-app .pfr-tb-conflicts {
	margin: 10px 0 0;
	padding: 9px 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 0.9375rem;
	background: #fff;
	border: 1px dashed var(--pfr-line-strong);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-tb-conflicts-note {
	flex: 1 1 100%;
	font-size: 0.8125rem;
	color: var(--pfr-muted);
}

@media (max-width: 560px) {
	.pfr-app .pfr-tb-constraints {
		gap: 6px;
	}

	.pfr-app .pfr-tb-toggle {
		padding: 6px 10px;
		font-size: 0.75rem;
	}
}

/* 1.7.1 - one select for the four verified milestones, so five choices stay a
 * single compact control instead of a row of chips that wraps on a phone. */

.pfr-app .pfr-tb-select {
	flex: 1 1 210px;
	min-width: 0;
	max-width: 100%;
	padding: 7px 10px;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-ink);
	background: #fff;
	border: 1px solid var(--pfr-line-strong);
	border-radius: 999px;
}

.pfr-app .pfr-tb-select:hover,
.pfr-app .pfr-tb-select:focus {
	border-color: var(--pfr-accent);
}

@media (max-width: 620px) {
	.pfr-app .pfr-tb-progress,
	.pfr-app .pfr-tb-constraints {
		padding: 7px 8px;
		gap: 6px;
	}

	.pfr-app .pfr-tb-select,
	.pfr-app .pfr-tb-toggle {
		font-size: 0.75rem;
	}

	.pfr-app .pfr-tb-select {
		flex: 1 1 150px;
	}
}

/* ---------- HM Planner cross-link bar (Phase 5A) ----------
 * Sits under the answer card when an HM Planner page is configured. It carries
 * the HM Planner's own accent (#6d3a8f) rather than the Team Builder's, so the
 * link visibly belongs to the tool it leads to. */

.pfr-app .pfr-tb-hmcta {
	display: flex;
	align-items: center;
	gap: 8px 12px;
	flex-wrap: wrap;
	margin: 0;
	padding: 11px 14px;
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line);
	border-left: 4px solid #6d3a8f;
	border-radius: var(--pfr-radius-sm);
	box-shadow: var(--pfr-shadow);
}

.pfr-app .pfr-tb-hmcta-text {
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--pfr-muted);
}