/**
 * PokeFireRed Tools - FireRed HM Planner.
 *
 * The tool's own "field kit" identity on top of the shared design system:
 * route-style dotted paths, HM discs with a field-action glyph, a route-sign
 * coverage card and a terrain-grid team board. Everything is CSS and inline
 * SVG; no extra images and no external assets are loaded.
 *
 * Every selector is scoped under .pfr-app and uses the pfr- prefix. Nothing
 * here targets bare elements outside the tool. Rules are two classes deep
 * (.pfr-app .pfr-x) so common theme rules such as ".entry-content button"
 * cannot override them.
 */

/* ---------- Shared pieces of the field-kit look ---------- */

/*
 * The root element carries both classes, so this is a doubled class on one
 * element (0,2,0) and not a descendant selector - .pfr-app .pfr-hm-app would
 * never match anything and the tokens below would silently resolve to nothing.
 */
.pfr-app.pfr-hm-app {
	/* warm tint of the FireRed accent, for the faint field grids */
	--pfr-hm-grid: rgba(158, 31, 20, 0.08);
	/* the one dark surface on the page: the HM strip reads as a field-kit rail */
	--pfr-hm-ink: #2a2320;
}

/*
 * A route path: the dotted line the tool uses to tie the team board, the
 * coverage card and the HM cards together. A gradient, not an image.
 */
.pfr-app .pfr-hm-path {
	display: block;
	height: 3px;
	margin: 0;
	background-image: radial-gradient(circle, var(--pfr-line-strong) 0 1.5px, transparent 1.6px);
	background-size: 10px 3px;
	background-repeat: repeat-x;
	background-position: left center;
}

/*
 * A short FireRed rail. Used instead of a heavier border to separate one
 * section from the next without adding another boxed card.
 */
.pfr-app .pfr-hm-rail {
	display: block;
	flex: 0 0 auto;
	width: 4px;
	height: 18px;
	background: var(--pfr-accent);
	border-radius: 2px;
}

/* ---------- The HM strip: the page's one dark utility rail ---------- */

.pfr-app .pfr-hm-strip-wrap {
	display: flex;
	align-items: center;
	gap: 10px 16px;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 12px 16px;
	color: var(--pfr-bg);
	background: var(--pfr-hm-ink);
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 22px);
	border: 1px solid var(--pfr-hm-ink);
	border-radius: var(--pfr-radius);
	box-shadow: var(--pfr-shadow);
}

.pfr-app .pfr-hm-strip-label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 14px 0 0;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pfr-yellow);
	border-right: 1px dashed rgba(251, 245, 234, 0.3);
}

.pfr-app .pfr-hm-strip-count {
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0;
	color: #fff;
	background: var(--pfr-accent);
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.pfr-app .pfr-hm-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-strip-item {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.pfr-app .pfr-hm-strip-name {
	font-size: 0.8125rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--pfr-bg);
}

/* The HM number, which used to sit on the disc and cover a third of the glyph. */
.pfr-app .pfr-hm-strip-no {
	margin-right: 1px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--pfr-yellow);
}

/* On the dark rail the discs need their own light ring to stay legible. */
.pfr-app .pfr-hm-strip .pfr-hm-disc {
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* ---------- HM disc ---------- */

/*
 * The HM disc: a round field-move badge carrying its action glyph and its HM
 * number. Three sizes, one shape. The pixel-era touch is the hard inner ring
 * and the flat two-tone fill, not a bitmap.
 */
.pfr-app .pfr-hm-disc {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	color: #fff;
	/* one warm ember fill for all seven, never seven different hues */
	background: radial-gradient(circle at 32% 26%, var(--pfr-red) 0, var(--pfr-accent) 62%, var(--pfr-accent-dark) 100%);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(60, 40, 20, 0.25);
}

.pfr-app .pfr-hm-disc-icon {
	display: block;
	width: 18px;
	height: 18px;
}

.pfr-app .pfr-hm-disc--lg {
	width: 46px;
	height: 46px;
}

.pfr-app .pfr-hm-disc--lg .pfr-hm-disc-icon {
	width: 26px;
	height: 26px;
}

/*
 * An uncovered HM is drawn flat, outlined and unlit: the shape and the weight
 * differ as well as the colour, so the state survives without hue.
 */
.pfr-app .pfr-hm-disc--off {
	color: var(--pfr-muted);
	background: var(--pfr-card-soft);
	box-shadow: inset 0 0 0 2px var(--pfr-line-strong);
}

/* ---------- The field team board ---------- */

.pfr-app .pfr-hm-board {
	margin: 0 0 18px;
	padding: 14px 14px 16px;
	background: var(--pfr-card);
	background-image:
		linear-gradient(var(--pfr-hm-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--pfr-hm-grid) 1px, transparent 1px);
	background-size: 22px 22px, 22px 22px;
	border: 1px solid var(--pfr-line);
	border-top: 3px solid var(--pfr-accent);
	border-radius: var(--pfr-radius);
	box-shadow: var(--pfr-shadow);
}

.pfr-app .pfr-hm-board-head {
	display: flex;
	align-items: center;
	gap: 8px 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 0 0 10px;
	border-bottom: 2px dotted var(--pfr-accent-soft);
}

.pfr-app .pfr-hm-board-title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--pfr-accent-dark);
}

.pfr-app .pfr-hm-board-count {
	margin: 0;
	padding: 3px 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
	border-radius: 999px;
}

.pfr-app .pfr-hm-board-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

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

.pfr-app .pfr-hm-slot-wrap {
	position: relative;
	margin: 0;
	padding: 0;
}

.pfr-app .pfr-hm-slot {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	align-content: start;
	gap: 2px;
	width: 100%;
	/* fill the grid row, so an empty slot never sits shorter than a filled
	 * neighbour and leaves a ragged edge */
	height: 100%;
	min-height: 132px;
	padding: 18px 6px 8px;
	text-align: center;
	color: inherit;
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line-strong);
	border-top: 3px solid var(--pfr-accent);
	border-radius: var(--pfr-radius-sm);
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.pfr-app .pfr-hm-slot:hover {
	border-color: var(--pfr-accent);
	box-shadow: 0 2px 10px rgba(158, 31, 20, 0.18);
}

.pfr-app .pfr-hm-slot:focus-visible {
	outline: 3px solid var(--pfr-accent);
	outline-offset: 2px;
}

/* An empty slot invites rather than sitting blank: a dashed route marker. */
/* Lighter than a filled slot, and inviting rather than blank. */
.pfr-app .pfr-hm-slot--empty {
	align-content: center;
	gap: 4px;
	padding: 8px 6px;
	background: var(--pfr-card-soft);
	border: 1px dashed var(--pfr-line-strong);
	box-shadow: none;
}

.pfr-app .pfr-hm-slot--empty .pfr-hm-slot-plus {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--pfr-accent);
	background: var(--pfr-accent-soft);
	border-radius: 50%;
}

.pfr-app .pfr-hm-slot--empty .pfr-hm-slot-label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-accent-dark);
}

.pfr-app .pfr-hm-slot-num {
	position: absolute;
	top: 6px;
	left: 8px;
	min-width: 17px;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	color: var(--pfr-muted);
}

.pfr-app .pfr-hm-slot--empty .pfr-hm-slot-num {
	position: static;
	color: var(--pfr-muted);
}

.pfr-app .pfr-hm-slot-sprite {
	width: 64px;
	height: 64px;
	image-rendering: pixelated;
}

.pfr-app .pfr-hm-slot-name {
	max-width: 100%;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pfr-ink);
	/* the tool root sets overflow-wrap:anywhere, which would break "Arcanine"
	 * mid-word in a narrow slot: only break a name that really does not fit */
	overflow-wrap: break-word;
	hyphens: none;
}

.pfr-app .pfr-hm-slot-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
	border-radius: 999px;
}

.pfr-app .pfr-hm-slot-count--none {
	color: var(--pfr-muted);
	background: var(--pfr-card-soft);
	box-shadow: inset 0 0 0 1px var(--pfr-line-strong);
}

/* The HMs this Pokemon brings, as micro route markers under its name. */
.pfr-app .pfr-hm-slot-marks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	margin: 3px 0 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-slot-marks li {
	margin: 0;
	padding: 0;
}

.pfr-app .pfr-hm-mark {
	display: grid;
	place-items: center;
	width: 19px;
	height: 19px;
	font-size: 0.625rem;
	font-weight: 800;
	line-height: 1;
	color: #fff;
	background: var(--pfr-accent);
	border-radius: 50%;
}

.pfr-app .pfr-hm-slot-remove {
	position: absolute;
	top: -7px;
	right: -7px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	font-size: 1rem;
	line-height: 1;
	color: var(--pfr-red-dark);
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line-strong);
	border-radius: 50%;
	box-shadow: var(--pfr-shadow);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.pfr-app .pfr-hm-slot-remove:focus-visible {
	outline: 3px solid var(--pfr-red);
	outline-offset: 2px;
}

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

@keyframes pfr-hm-pop {
	from {
		opacity: 0.4;
		transform: scale(0.93);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---------- The answer: a route sign ---------- */

/*
 * minmax(0, 1fr), not the implicit "auto" track: an auto track can never be
 * narrower than its content's min-content width, so at 320px the answer card
 * and the HM cards pushed the whole page sideways. Naming the track lets them
 * shrink to the column instead.
 */
.pfr-app .pfr-hm-result {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.pfr-app .pfr-hm-answer {
	position: relative;
	overflow: hidden;
	padding: 18px 18px 16px;
	background: linear-gradient(180deg, var(--pfr-accent-wash) 0, var(--pfr-card) 120px);
	border: 1px solid var(--pfr-line);
	border-left: 7px solid var(--pfr-accent);
	border-radius: var(--pfr-radius);
	box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 6px 20px rgba(158, 31, 20, 0.1);
}

/* Route dots trailing off to the right, the tool's signature. */
.pfr-app .pfr-hm-answer::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(40%, 320px);
	background-image: radial-gradient(var(--pfr-accent-soft) 0 3px, transparent 4px);
	background-size: 18px 18px;
	opacity: 0.9;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 75%);
	mask-image: linear-gradient(90deg, transparent, #000 75%);
}

.pfr-app .pfr-hm-answer--complete {
	border-left-color: var(--pfr-green);
	background: linear-gradient(180deg, var(--pfr-green-soft) 0, var(--pfr-card) 110px);
}

.pfr-app .pfr-hm-answer-body {
	position: relative;
	z-index: 1;
}

.pfr-app .pfr-hm-kicker {
	margin: 0 0 4px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pfr-accent-dark);
}

.pfr-app .pfr-hm-answer--complete .pfr-hm-kicker {
	color: var(--pfr-green);
}

.pfr-app .pfr-hm-headline {
	margin: 0 0 12px;
	font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.6rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--pfr-ink);
}

.pfr-app .pfr-hm-score {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}

.pfr-app .pfr-hm-score-num {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	padding: 5px 14px;
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--pfr-accent);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	transition: background-color 0.2s ease;
}

.pfr-app .pfr-hm-answer--complete .pfr-hm-score-num {
	background: var(--pfr-green);
}

.pfr-app .pfr-hm-score-word {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-muted);
}

/* Seven pips: one per HM, filled when covered. Shape and glyph carry the
 * meaning, so the state never depends on colour alone. */
.pfr-app .pfr-hm-track {
	display: flex;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-track li {
	margin: 0;
	padding: 0;
}

.pfr-app .pfr-hm-pip {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	font-size: 0.6875rem;
	font-weight: 800;
	line-height: 1;
	color: var(--pfr-muted);
	background: var(--pfr-card-soft);
	border: 2px dashed var(--pfr-line-strong);
	border-radius: 6px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pfr-app .pfr-hm-pip--on {
	color: #fff;
	background: var(--pfr-accent);
	border: 2px solid var(--pfr-accent-dark);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.pfr-app .pfr-hm-missing {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 0.9375rem;
	background: var(--pfr-red-soft);
	border-left: 3px solid var(--pfr-red);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-hm-missing-k {
	font-weight: 800;
	color: var(--pfr-red-dark);
}

.pfr-app .pfr-hm-missing-v {
	font-weight: 700;
	color: var(--pfr-ink);
}

.pfr-app .pfr-hm-answer-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 14px 0 0;
}

/* ---------- The seven HM cards ---------- */

.pfr-app .pfr-hm-section {
	padding: 0;
	background: none;
	border: 0;
}

.pfr-app .pfr-hm-section-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.pfr-app .pfr-hm-section-title {
	flex: 0 0 auto;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pfr-accent-dark);
}

.pfr-app .pfr-hm-section-head .pfr-hm-path {
	flex: 1 1 auto;
	min-width: 20px;
}

.pfr-app .pfr-hm-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-card {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	gap: 4px 12px;
	margin: 0;
	padding: 12px 14px;
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line);
	border-left: 4px solid var(--pfr-line-strong);
	border-radius: var(--pfr-radius-sm);
	box-shadow: var(--pfr-shadow);
	transition: border-left-color 0.25s ease, background-color 0.25s ease;
}

/* Covered: a clean white card on a green rail. */
.pfr-app .pfr-hm-card--on {
	background: var(--pfr-card);
	border-left-color: var(--pfr-green);
}

/*
 * Missing: a warm tinted card on a red rail, with the HM disc unlit. Three
 * signals (surface, rail, disc) plus the word "Not covered", so colour alone
 * never carries the state.
 */
.pfr-app .pfr-hm-card--off {
	background: linear-gradient(180deg, var(--pfr-red-soft) 0, var(--pfr-card-soft) 70px);
	border-color: var(--pfr-accent-soft);
	border-left-color: var(--pfr-red);
}

.pfr-app .pfr-hm-card-disc {
	grid-row: 1 / span 3;
	align-self: center;
}

.pfr-app .pfr-hm-card-top {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}

.pfr-app .pfr-hm-card-no {
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--pfr-muted);
}

.pfr-app .pfr-hm-card-name {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pfr-ink);
}

/* Status says "Covered" or "Not covered" in words and carries a glyph, so it
 * reads the same to someone who cannot tell green from red. */
.pfr-app .pfr-hm-state {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	padding: 2px 9px;
	font-size: 0.75rem;
	font-weight: 800;
	white-space: nowrap;
	border-radius: 999px;
}

.pfr-app .pfr-hm-state--on {
	color: var(--pfr-green);
	background: var(--pfr-green-soft);
	box-shadow: inset 0 0 0 1px rgba(31, 122, 74, 0.3);
}

.pfr-app .pfr-hm-state--off {
	color: var(--pfr-red-dark);
	background: var(--pfr-red-soft);
	box-shadow: inset 0 0 0 1px rgba(201, 40, 31, 0.3);
}

.pfr-app .pfr-hm-state-mark {
	font-size: 0.8125rem;
	line-height: 1;
}

.pfr-app .pfr-hm-card-action {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--pfr-muted);
}

.pfr-app .pfr-hm-card-note {
	margin: 6px 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--pfr-ink);
}

/* Who covers it: sprite chips, so the Pokemon-to-HM link is visible without
 * reading a table. */
.pfr-app .pfr-hm-who {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 7px 0 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-who li {
	margin: 0;
	padding: 0;
}

.pfr-app .pfr-hm-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px 2px 3px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-ink);
	background: var(--pfr-accent-soft);
	border-radius: 999px;
}

.pfr-app .pfr-hm-chip-sprite {
	width: 26px;
	height: 26px;
	image-rendering: pixelated;
}

.pfr-app .pfr-hm-card-links {
	grid-column: 2;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 9px 0 0;
}

.pfr-app .pfr-hm-link {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-accent-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pfr-app .pfr-hm-link:hover {
	color: var(--pfr-accent);
}

.pfr-app .pfr-hm-link:focus-visible {
	outline: 3px solid var(--pfr-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---------- Need a field helper? ---------- */

/*
 * A recommendation area, not another card grid: a warm surface, a red rail at
 * the top and one promoted card, so the eye lands on the suggestion rather
 * than on six equal boxes.
 */
.pfr-app .pfr-hm-rescue {
	padding: 16px;
	background: var(--pfr-card);
	background-image: radial-gradient(var(--pfr-hm-grid) 0 1px, transparent 1.5px);
	background-size: 16px 16px;
	border: 1px solid var(--pfr-line);
	border-top: 3px solid var(--pfr-accent);
	border-radius: var(--pfr-radius);
	box-shadow: var(--pfr-shadow);
}

.pfr-app .pfr-hm-rescue-title {
	margin: 0 0 4px;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pfr-ink);
}

.pfr-app .pfr-hm-rescue-note {
	margin: 0 0 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pfr-muted);
}

.pfr-app .pfr-hm-cands .pfr-hm-rescue-note,
.pfr-app .pfr-hm-rescue > .pfr-hm-rescue-note:last-child {
	margin: 12px 0 0;
	font-size: 0.8125rem;
}

/* The honest counterweight: what covers more, and what that costs. */
.pfr-app .pfr-hm-tradeoff {
	margin: 0 0 12px;
	padding: 9px 12px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pfr-ink);
	background: var(--pfr-yellow-soft);
	border-left: 3px solid var(--pfr-yellow);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-hm-cands {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-cand {
	display: block;
	margin: 0;
	padding: 11px 13px;
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius-sm);
}

/* The promoted recommendation: red rail, white surface, its own label. */
.pfr-app .pfr-hm-cand--lead {
	padding: 0 0 11px;
	overflow: hidden;
	background: var(--pfr-card);
	border-color: var(--pfr-accent);
	box-shadow: 0 2px 12px rgba(158, 31, 20, 0.14);
}

.pfr-app .pfr-hm-cand--lead .pfr-hm-cand-head,
.pfr-app .pfr-hm-cand--lead .pfr-hm-cand-meta,
.pfr-app .pfr-hm-cand--lead .pfr-hm-cand-links {
	padding-right: 13px;
	padding-left: 13px;
}

.pfr-app .pfr-hm-cand-lead {
	margin: 0 0 11px;
	padding: 5px 13px;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--pfr-accent);
}

/* Covers everything on its own: a quiet extra mark, not a second banner. */
.pfr-app .pfr-hm-cand--all {
	border-color: var(--pfr-accent-soft);
}

/* ---- primary: sprite, name, how much of the gap it closes ---- */

.pfr-app .pfr-hm-cand-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.pfr-app .pfr-hm-cand-sprite {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	image-rendering: pixelated;
}

.pfr-app .pfr-hm-cand-body {
	flex: 1 1 auto;
	min-width: 0;
}

.pfr-app .pfr-hm-cand-name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pfr-ink);
}

.pfr-app .pfr-hm-cand-covers {
	margin: 2px 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pfr-accent-dark);
}

.pfr-app .pfr-hm-cand-hms {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 7px 0 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-cand-hms li {
	margin: 0;
	padding: 0;
}

.pfr-app .pfr-hm-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 9px 2px 4px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
	border-radius: 999px;
}

.pfr-app .pfr-hm-tag .pfr-hm-mark {
	width: 18px;
	height: 18px;
	font-size: 0.5625rem;
}

/* ---- secondary: what it costs to get, deliberately quieter ---- */

.pfr-app .pfr-hm-cand-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 7px;
	margin: 9px 0 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-cand-meta li {
	margin: 0;
	padding: 2px 8px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--pfr-muted);
	background: transparent;
	border: 1px solid var(--pfr-line-strong);
	border-radius: 999px;
}

/* The acquisition line is the one piece of metadata worth noticing. */
.pfr-app .pfr-hm-cand-meta li.pfr-hm-meta--how {
	font-weight: 700;
	color: var(--pfr-ink);
	background: var(--pfr-card);
	border-color: var(--pfr-line-strong);
}

.pfr-app .pfr-hm-cand-meta li.pfr-hm-meta--direct {
	color: var(--pfr-green);
	background: var(--pfr-green-soft);
	border-color: transparent;
}

.pfr-app .pfr-hm-cand-meta li.pfr-hm-meta--trade {
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
	border-color: transparent;
}

/*
 * Only one of a mutually exclusive set can be on a save, so this restriction
 * decides whether the rest of the card is relevant at all: it reads first and
 * warmer than the other metadata, without becoming a second headline.
 */
.pfr-app .pfr-hm-cand-meta li.pfr-hm-meta--choice {
	flex-basis: 100%;
	font-weight: 700;
	color: var(--pfr-ink);
	background: var(--pfr-yellow-soft);
	border-color: var(--pfr-yellow);
}

/* ---- tertiary: links, quieter than everything above them ---- */

.pfr-app .pfr-hm-cand-links {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 9px 0 0;
}

.pfr-app .pfr-hm-cand-links .pfr-hm-link {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--pfr-muted);
	text-decoration-color: var(--pfr-line-strong);
}

.pfr-app .pfr-hm-cand-links .pfr-hm-link:hover {
	color: var(--pfr-accent-dark);
	text-decoration-color: currentColor;
}

/* ---------- Compact progression / trading controls ---------- */

.pfr-app .pfr-hm-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 9px 11px;
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-hm-controls-label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-muted);
}

.pfr-app .pfr-hm-select {
	flex: 1 1 200px;
	min-width: 0;
	max-width: 100%;
	padding: 7px 10px;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--pfr-ink);
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line-strong);
	border-radius: var(--pfr-radius-sm);
	cursor: pointer;
}

.pfr-app .pfr-hm-select:focus-visible {
	outline: 3px solid var(--pfr-accent);
	outline-offset: 1px;
}

.pfr-app .pfr-hm-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--pfr-ink);
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line-strong);
	border-radius: var(--pfr-radius-sm);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pfr-app .pfr-hm-toggle.is-on {
	color: var(--pfr-accent-dark);
	background: var(--pfr-accent-soft);
	border-color: var(--pfr-accent);
}

.pfr-app .pfr-hm-toggle:focus-visible {
	outline: 3px solid var(--pfr-accent);
	outline-offset: 2px;
}

.pfr-app .pfr-hm-toggle-box {
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	font-size: 0.75rem;
	line-height: 1;
	color: var(--pfr-accent-dark);
	background: var(--pfr-card);
	border: 1px solid var(--pfr-line-strong);
	border-radius: 4px;
}

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

/* ---------- Pokemon the player picked that the settings exclude ---------- */

.pfr-app .pfr-hm-conflicts {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 0.875rem;
	background: var(--pfr-yellow-soft);
	border-left: 3px solid var(--pfr-yellow);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-hm-conflicts p {
	margin: 0 0 5px;
	font-weight: 700;
	color: var(--pfr-ink);
}

.pfr-app .pfr-hm-conflicts ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-hm-conflicts li {
	margin: 2px 0 0;
	padding: 0;
	color: var(--pfr-muted);
}

/* ---------- Wider screens ---------- */

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

@media (min-width: 760px) {
.pfr-app .pfr-hm-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

.pfr-app .pfr-hm-cands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.pfr-app .pfr-hm-slot {
		min-height: 150px;
		padding: 20px 8px 10px;
	}

.pfr-app .pfr-hm-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Narrow phones (320px) ---------- */

@media (max-width: 560px) {
.pfr-app .pfr-hm-strip-wrap {
		gap: 8px;
		padding: 10px 12px;
	}

.pfr-app .pfr-hm-strip-label {
		padding: 0 0 8px;
		border-right: 0;
		border-bottom: 1px dashed rgba(251, 245, 234, 0.3);
		flex-basis: 100%;
	}

	/* Two tight columns instead of four loose rows: the strip is a reference
	 * line, not a section, and it must not push the answer down a phone. */
.pfr-app .pfr-hm-strip {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px 8px;
		width: 100%;
	}

.pfr-app .pfr-hm-strip .pfr-hm-disc {
		width: 26px;
		height: 26px;
	}

.pfr-app .pfr-hm-strip .pfr-hm-disc-icon {
		width: 15px;
		height: 15px;
	}

.pfr-app .pfr-hm-strip-name {
		font-size: 0.75rem;
	}

.pfr-app .pfr-hm-strip-no {
		font-size: 0.625rem;
	}
}

@media (max-width: 420px) {
	/* Two columns are only ~110px wide here, which "HM06 Rock Smash" overruns
	 * on one line: let the longest names wrap instead of spilling out. */
.pfr-app .pfr-hm-strip-name {
		white-space: normal;
		line-height: 1.25;
	}


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

.pfr-app .pfr-hm-slot {
		min-height: 120px;
		padding: 16px 4px 8px;
	}

.pfr-app .pfr-hm-slot-sprite {
		width: 48px;
		height: 48px;
	}

.pfr-app .pfr-hm-slot-name {
		font-size: 0.875rem;
	}

.pfr-app .pfr-hm-state {
		margin-left: 0;
	}
}

@media (max-width: 360px) {
.pfr-app .pfr-hm-slots {
		grid-template-columns: minmax(0, 1fr);
	}

.pfr-app .pfr-hm-strip {
		gap: 5px 8px;
	}
}

/* ---------- Reduced motion ---------- */

/*
 * pfr-base.css already neutralises animation and transition durations inside
 * .pfr-app. This block states it again for this tool's own pieces so the rule
 * cannot be lost if the shared one is ever refactored.
 */
@media (prefers-reduced-motion: reduce) {
.pfr-app .pfr-hm-pop,
.pfr-app .pfr-hm-slot,
.pfr-app .pfr-hm-card,
.pfr-app .pfr-hm-pip,
.pfr-app .pfr-hm-score-num,
.pfr-app .pfr-hm-slot-remove,
.pfr-app .pfr-hm-toggle {
		animation: none;
		transition: none;
	}
}