/**
 * PokeFireRed Tools - FireRed Type Checker (tool-specific styles).
 * Requires pfr-base.css, which is loaded first and provides the design tokens,
 * isolation reset, buttons, type badges (.pfr-type-*), cards, matchup colours
 * (.pfr-m-*), details, matrix table, About box and the selector dialog.
 *
 * Do not set background/color on .pfr-tc-mult, .pfr-tc-full-item or
 * .pfr-tc-typebtn: those come from the shared .pfr-m-* / .pfr-type-* classes.
 */

/* ---------- Mode tabs (segmented control) ---------- */

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

/* ---------- Pokemon picker button ---------- */

/* ---------- Result cards ---------- */

.pfr-app .pfr-tc-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin: 0 0 14px;
}

.pfr-app .pfr-tc-group {
	margin: 0 0 14px;
	padding: 12px;
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-left-width: 4px;
	border-radius: var(--pfr-radius-sm);
	min-width: 0;
}

.pfr-app .pfr-tc-cols .pfr-tc-group {
	margin: 0;
}

.pfr-app .pfr-tc-group--weak { border-left-color: var(--pfr-red); }

.pfr-app .pfr-tc-group--resist { border-left-color: var(--pfr-green); }

.pfr-app .pfr-tc-group--immune { border-left-color: #6d8fcf; }

.pfr-app .pfr-tc-group--why { border-left-color: var(--pfr-yellow); }

.pfr-app .pfr-tc-group-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--pfr-ink);
}

.pfr-app .pfr-tc-group-note {
	margin: 2px 0 10px;
	font-size: 0.8125rem;
	color: var(--pfr-muted);
}

.pfr-app .pfr-tc-group-title + .pfr-tc-mlist {
	margin-top: 10px;
}

.pfr-app .pfr-tc-mlist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-tc-mrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 4px 6px 4px 4px;
	background: #fff;
	border: 1px solid var(--pfr-line);
	border-radius: 999px;
}

.pfr-app .pfr-tc-mult {
	display: inline-block;
	min-width: 52px;
	padding: 2px 8px;
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 1.4;
	text-align: center;
	font-variant-numeric: tabular-nums;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 999px;
}

/* ---------- Why? ---------- */

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

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

.pfr-app .pfr-tc-why-item .pfr-tc-mult {
	flex: 0 0 auto;
	margin-top: 1px;
}

.pfr-app .pfr-tc-why-text {
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* ---------- Full defensive matchup ---------- */

.pfr-app .pfr-tc-full {
	margin: 4px 0 0;
}

.pfr-app .pfr-tc-full-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.pfr-app .pfr-tc-full-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-tc-full-mult {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.pfr-app .pfr-tc-full-item.pfr-m-1 {
	border-color: var(--pfr-line);
}

/* ---------- Type mode ---------- */

.pfr-app .pfr-tc-types {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
	margin: 0 0 16px;
}

.pfr-app .pfr-tc-typebtn {
	appearance: none;
	-webkit-appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 46px;
	margin: 0;
	padding: 0 10px;
	font-family: var(--pfr-font);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 3px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--pfr-radius-sm);
	cursor: pointer;
	transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.pfr-app .pfr-tc-typebtn:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 8px rgba(60, 40, 20, 0.2);
}

.pfr-app .pfr-tc-typebtn[aria-pressed="true"] {
	border-color: var(--pfr-ink);
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pfr-ink);
}

.pfr-app .pfr-tc-typebtn-check {
	display: none;
	font-size: 1rem;
}

.pfr-app .pfr-tc-typebtn[aria-pressed="true"] .pfr-tc-typebtn-check {
	display: inline;
}

.pfr-app .pfr-tc-block {
	margin: 0 0 18px;
	padding: 0;
}

.pfr-app .pfr-tc-block-title {
	margin: 0 0 2px;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pfr-ink);
}

/* ---------- Type combination ---------- */

.pfr-app .pfr-tc-combo {
	margin-top: 16px;
}

.pfr-app .pfr-tc-combo-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-items: end;
	margin: 0 0 14px;
}

.pfr-app .pfr-tc-field {
	display: block;
	min-width: 0;
}

.pfr-app .pfr-tc-field .pfr-label {
	display: block;
	margin: 0 0 4px;
}

.pfr-app .pfr-tc-plus {
	display: none;
	padding-bottom: 10px;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--pfr-muted);
}

.pfr-app .pfr-tc-combo .pfr-tc-select {
	appearance: auto;
	-webkit-appearance: menulist;
	display: block;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 12px;
	font-family: var(--pfr-font);
	font-size: 16px; /* >=16px prevents iOS focus zoom */
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--pfr-ink);
	background: #fff;
	border: 2px solid var(--pfr-line-strong);
	border-radius: var(--pfr-radius-sm);
	box-shadow: none;
}

.pfr-app .pfr-tc-combo .pfr-tc-select:disabled {
	opacity: 0.6;
	background: var(--pfr-card-soft);
}

.pfr-app .pfr-tc-combo-card {
	padding: 12px;
	background: #fff;
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius);
}

/* ---------- Compare ---------- */

.pfr-app .pfr-tc-compare-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pfr-app .pfr-tc-compare-table {
	min-width: 280px;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 600px) {
.pfr-app .pfr-tc-combo-fields {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	}

.pfr-app .pfr-tc-plus {
		display: block;
	}
}

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

/* =====================================================================
 * Phase 2 - Type Checker: analytical. Matchup groups read at a glance.
 * ===================================================================== */

.pfr-app .pfr-tc-card {
	border-top: 4px solid var(--pfr-accent);
}

.pfr-app .pfr-tc-group {
	border-left: 5px solid var(--pfr-line-strong);
}

.pfr-app .pfr-tc-group--weak {
	border-left-color: #c9281f;
	background: #fff6f5;
}

.pfr-app .pfr-tc-group--resist {
	border-left-color: #1f7a4a;
	background: #f1f9f4;
}

.pfr-app .pfr-tc-group--immune {
	border-left-color: var(--pfr-accent);
	background: var(--pfr-accent-wash);
}

.pfr-app .pfr-tc-group-title {
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

.pfr-app .pfr-tc-typebtn[aria-pressed="true"] {
	box-shadow: 0 0 0 3px var(--pfr-accent);
}

.pfr-app .pfr-tc-combo {
	border-top: 4px solid var(--pfr-accent);
}

/* =====================================================================
 * 1.5.3 - the two-Pokemon comparison needs a few pixels less padding to stop
 * overflowing a 390px screen.
 * ===================================================================== */

@media (max-width: 700px) {
	.pfr-app .pfr-tc-compare-table {
		min-width: 0;
	}

	.pfr-app .pfr-tc-compare-table th,
	.pfr-app .pfr-tc-compare-table td {
		padding-right: 6px;
		padding-left: 6px;
	}
}

/* =====================================================================
 * 1.6.0 - the scope of the answer, next to the answer. A Generation III
 * ability can overrule the type chart (Levitate on Gengar), and this tool
 * reads types only, so it says so where the result is read instead of in
 * a footnote under the whole card.
 * ===================================================================== */

.pfr-app .pfr-tc-scope {
	margin: 0 0 14px;
	padding: 7px 11px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--pfr-ink);
	background: var(--pfr-card-soft);
	border: 1px solid var(--pfr-line);
	border-left: 4px solid var(--pfr-accent);
	border-radius: var(--pfr-radius-sm);
}

.pfr-app .pfr-tc-scope-k {
	flex: none;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pfr-accent-dark);
}