.hp-guide-card {
	--hp-card-blue: hsl(217, 18%, 37%);
	--hp-card-blue-soft: hsl(217, 18%, 78%);
	--hp-card-red-soft: hsl(0, 60%, 78%);
	--hp-card-gray: hsl(220, 4%, 89%);
	--hp-card-line: hsl(220, 4%, 63%);
	--hp-card-green: hsl(130, 60%, 89%);
	--hp-card-ink: #131313;
	--hp-card-sort: #ffe700;
	margin: 1.25rem 0 1.5rem;
	color: var(--hp-card-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	font-variant: tabular-nums;
}

.hp-guide-card-race {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 4px 8px;
	background: var(--hp-card-gray);
	color: var(--hp-card-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: -0.3px;
	line-height: 18px;
	text-transform: uppercase;
}

.hp-guide-card-scroll {
	overflow-x: auto;
	background: #fff;
}

.hp-guide-card table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 1px;
	background: #fff;
}

.hp-guide-card th,
.hp-guide-card td {
	padding: 0;
	border: 1px solid var(--hp-card-line);
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	text-transform: uppercase;
}

.hp-guide-card th.w28,
.hp-guide-card td.w28 {
	width: 28px;
}

.hp-guide-card th.w50,
.hp-guide-card td.w50 {
	width: 50px;
}

.hp-guide-card-groups td {
	height: 20px;
	background: var(--hp-card-gray);
	color: var(--hp-card-ink);
	font-weight: 600;
}

.hp-guide-card-cols th {
	position: relative;
	background: var(--hp-card-blue);
	color: var(--hp-card-gray);
	font-size: 13px;
	letter-spacing: -0.5px;
}

.hp-guide-card button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 4px 2px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	letter-spacing: inherit;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

.hp-guide-card-groups button {
	padding: 0 6px;
	line-height: 18px;
}

.hp-guide-card-up,
.hp-guide-card-down {
	position: absolute;
	left: 2px;
	right: 2px;
	height: 0;
}

.hp-guide-card-up {
	top: 1px;
	border-bottom: 2px solid #e1e1e1;
}

.hp-guide-card-down {
	bottom: 1px;
	border-top: 2px solid #e1e1e1;
}

.hp-guide-card-up.is-on {
	border-bottom: 3px solid var(--hp-card-sort);
}

.hp-guide-card-down.is-on {
	border-top: 3px solid var(--hp-card-sort);
}

.hp-guide-card tbody td {
	background: #fff;
	font-size: 14px;
}

.hp-guide-card tbody tr.even td {
	background: #f0f0f0;
}

.hp-guide-card tbody tr:hover td:not(.hp-guide-card-gap) {
	background: var(--hp-card-green);
}

.hp-guide-card tbody td.is-on {
	outline: 2px solid var(--hp-card-sort);
	outline-offset: -2px;
}

.hp-guide-card .hp-guide-card-gap,
.hp-guide-card tbody tr.even td.hp-guide-card-gap,
.hp-guide-card tbody tr:hover td.hp-guide-card-gap {
	width: 4px;
	padding: 0;
	border: 0;
	background: #fff;
	outline: 0;
}

.hp-guide-card td.hp-guide-card-horse,
.hp-guide-card th.hp-guide-card-horse,
.hp-guide-card th.hp-guide-card-horse button {
	text-align: left;
}

.hp-guide-card td.hp-guide-card-horse {
	padding: 2px 6px;
	overflow: hidden;
}

.hp-guide-card-name,
.hp-guide-card-sub {
	display: block;
	line-height: 1.15;
	text-align: left;
}

.hp-guide-card-name {
	font-weight: 600;
}

.hp-guide-card-sub {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: -0.3px;
}

.hp-guide-card-stat {
	padding: 0;
	position: relative;
	height: 34px;
}

.hp-guide-card-statbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	min-height: 34px;
	letter-spacing: -1px;
}

.hp-guide-card-top {
	font-weight: 600;
	line-height: 1.1;
}

.hp-guide-card-score {
	font-weight: 500;
	line-height: 1.1;
}

.hp-guide-card-back,
.hp-guide-card-lay {
	padding: 0;
	overflow: hidden;
}

.hp-guide-card-price {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 34px;
	padding: 0 2px;
}

.hp-guide-card-back .hp-guide-card-price {
	background: var(--hp-card-blue-soft);
}

.hp-guide-card-lay .hp-guide-card-price {
	background: var(--hp-card-red-soft);
}

.hp-guide-card .hp-guide-layout button {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: 26px;
	padding: 0 8px;
	letter-spacing: 0;
	text-transform: none;
}

.hp-guide-card-raceblock + .hp-guide-card-raceblock {
	margin-top: 12px;
}

.hp-guide-card tr[hidden],
.hp-guide-card [data-race-block][hidden] {
	display: none;
}