/* The club chooser and the drill walkthrough. */

/* ---- Club chooser ---- */
/* Centre the chooser in the shell. The shell already subtracts the mimic
   banner from its height (see .tj-shell), so no extra height maths is needed
   here — just flex-centre the main and drop the sidebar-page padding the
   chooser has no use for. */
.tj-main:has(.tj-cc) {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 20px;
}

/* An auto cross-axis margin stops a column flex item stretching, so the page
   wrapper shrank to fit its content and the card could never reach the width it
   asks for. A definite width settles it without touching the margins: the
   wrapper takes the room going, its own max-width caps it, and the auto margins
   it already had go on centring it in the window. Zeroing those margins also
   works and leaves the whole page hanging off the left edge. */
.tj-main:has(.tj-cc) > .tj-page {
	width: 100%;
}

.tj-cc {
	max-width: 460px;
	width: 100%;
	margin: 0 auto;
}

/* Wide enough for two columns of ways in, and no wider: the card is still a
   card. Below this it keeps the single-column width it was drawn at. */
@media (min-width: 640px) {
	.tj-cc {
		max-width: 680px;
	}
}

.tj-cc-head {
	text-align: center;
	margin-bottom: 22px;
}

.tj-cc-ball {
	width: 46px;
	height: 46px;
	margin: 0 auto 12px;
	box-shadow: inset -5px -6px 0 rgba(0, 0, 0, .14);
}

.tj-cc-word {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: 27px;
	line-height: 1;
}

.tj-cc-card {
	padding: 26px 26px 22px;
}

.tj-cc-title {
	font-size: 22px;
}

.tj-cc-sub {
	font-size: 13.5px;
	line-height: 1.5;
	margin: 7px 0 18px;
}

/* Two ways in side by side once there is room, one when there is not. The
   rows are the same either way — auto-fit drops to a single column on its own
   as soon as two would be narrower than a name and its meta line can bear. */
.tj-cc-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

/* What is coming up, above the ways in. Quieter than the space rows: it is
   what you read, they are what you press. */
.tj-cc-kicker {
	margin: 4px 0 10px;
}

.tj-cc-next {
	margin-bottom: 24px;
}

.tj-cc-nextlist {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tj-cc-nothing {
	font-size: 13.5px;
	margin: 0 0 4px;
}

/* One line each: what it is worth reading here is when, what, and where —
   anything more is what unfolding it is for. */
.tj-cc-nextrow {
	display: flex;
	align-items: center;
	border-radius: 12px;
	background: var(--surface-sunken, rgba(0, 0, 0, .03));
	transition: background .15s;
}

.tj-cc-nextrow:hover,
.tj-cc-nextopen {
	background: var(--accent-soft);
}

/* An unfolded row and its panel read as one piece, so the seam between them
   is closed and the corners meet. */
.tj-cc-nextopen {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.tj-cc-nextbody {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	padding: 9px 4px 9px 14px;
	color: inherit;
	text-decoration: none;
}

.tj-cc-nextgo {
	flex: none;
	padding: 9px 14px;
	text-decoration: none;
}

.tj-cc-nextrow:hover .tj-cc-arrow {
	transform: translateX(3px);
}

.tj-cc-nextwhen {
	flex: none;
	min-width: 104px;
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 700;
}

/* Name and place share the line, the name taking what the place leaves. */
.tj-cc-nextwhat {
	display: flex;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.tj-cc-nextname {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tj-cc-nextwhose {
	flex: none;
	margin-left: auto;
	font-size: 12px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tj-cc-nextlive {
	flex: none;
	color: var(--accent);
	border-color: var(--accent);
}

/* What the row holds, under the row that holds it. */
.tj-cc-nextdetail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: -6px;
	padding: 11px 14px 13px;
	border-radius: 0 0 12px 12px;
	background: var(--accent-soft);
}

.tj-cc-nextfacts {
	display: flex;
	align-items: baseline;
	gap: 6px 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--muted);
}

.tj-cc-nextfacts > *:not(:first-child)::before {
	content: '·';
	margin-right: 14px;
}

.tj-cc-nextenter {
	flex: none;
	padding: 7px 14px;
	font-size: 12.5px;
}

/* The way to the ones folded away behind the first few. */
.tj-cc-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--muted);
	text-decoration: none;
	transition: color .15s;
}

.tj-cc-more:hover {
	color: var(--accent);
}

.tj-cc-more svg {
	transition: transform .15s;
}

.tj-cc-more-open svg {
	transform: rotate(180deg);
}

@media (max-width: 520px) {
	.tj-cc-nextbody {
		align-items: flex-start;
		gap: 10px;
	}

	.tj-cc-nextwhen {
		min-width: 0;
	}

	/* Too narrow for one line, so the place drops under the name it belongs
	   to rather than squeezing it out. The time stays beside them both —
	   giving it a line of its own would spend on three lines what the wide
	   row says in one. */
	.tj-cc-nextwhat {
		flex-direction: column;
		align-items: flex-start;
		gap: 1px;
	}

	.tj-cc-nextwhose {
		margin-left: 0;
		max-width: 100%;
	}
}

.tj-cc-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	transition: border-color .15s, box-shadow .15s;
}

.tj-cc-row:hover {
	border-color: var(--accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.tj-cc-row:hover .tj-cc-arrow {
	transform: translateX(3px);
}

.tj-cc-row-off {
	opacity: .5;
}

/* Adding a place rather than opening one: dashed, so it reads as an invitation
   rather than another way in. It sits outside the list of spaces — it is not
   one of them — so it carries its own space above rather than riding the grid's
   gap, which left it crammed against the last row. */
.tj-cc-add {
	border-style: dashed;
	margin-top: 18px;
}

.tj-cc-add .tj-cc-avatar {
	background: transparent;
	border: 1px dashed var(--line);
	color: var(--muted);
}

.tj-cc-avatar {
	position: relative;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #fff;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 19px;
	overflow: hidden;
}

.tj-cc-avatar-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tj-cc-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.tj-cc-name {
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tj-cc-meta {
	color: var(--muted);
	font-size: 12.5px;
	margin-top: 2px;
}

.tj-cc-arrow {
	flex: none;
	color: var(--accent);
	font-size: 19px;
	font-weight: 700;
	transition: transform .15s;
}

.tj-xp {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tj-xp-level {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 15px;
	color: var(--accent);
	flex: none;
}

.tj-xp-track {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: var(--surface2);
	overflow: hidden;
}

.tj-xp-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--accent);
	animation: tjBarGrow .6s ease both;
}

.tj-xp-count {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	flex: none;
}

.tj-xp-compact .tj-xp-track {
	height: 6px;
}

.tj-drillcard {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
	color: inherit;
	transition: transform .18s, box-shadow .2s;
	animation: tjFadeUp .5s ease both;
}

.tj-drillcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.tj-drillcard-body {
	display: block;
	padding: 16px 18px 18px;
}

.tj-drillcard-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.tj-drillcard-name {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 21px;
	text-transform: uppercase;
	line-height: 1.05;
}

.tj-drillcard-meta {
	display: block;
	color: var(--muted);
	font-size: 13px;
	margin-top: 6px;
}

.tj-drillcard-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.tj-level-dots {
	display: flex;
	gap: 3px;
	flex: none;
}

.tj-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--surface2);
}

.tj-dot.tj-on {
	background: var(--accent);
}

/* ---- Drill walkthrough ---- */

/* Court beside the steps where it fits, stacked above them where not. */
.tj-wt-grid {
	display: grid;
	grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.tj-wt-court {
	position: sticky;
	top: 36px;
}

.tj-wt-path {
	opacity: .22;
	transition: opacity .3s;
}

.tj-wt-path.tj-active {
	opacity: 1;
	animation: tjDash 1s linear infinite;
}

.tj-wt-zone {
	fill-opacity: 0;
	stroke-opacity: 0;
	transition: fill-opacity .35s, stroke-opacity .35s;
}

.tj-wt-zone.tj-active {
	fill-opacity: .22;
	stroke-opacity: .85;
}

.tj-wt-ball {
	opacity: 0;
	transition: opacity .2s;
}

.tj-wt-ball.tj-active {
	opacity: 1;
}

.tj-wt-steprow {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: 14px;
	padding: 15px 18px;
	cursor: pointer;
	transition: all .25s;
}

.tj-wt-steprow:hover {
	border-color: var(--accent);
}

.tj-wt-steprow.tj-active {
	background: var(--accent-soft);
	border-color: var(--accent);
}

.tj-wt-stepnum {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 15px;
	background: var(--surface2);
	color: var(--muted);
	transition: all .25s;
}

.tj-wt-steprow.tj-active .tj-wt-stepnum {
	background: var(--accent);
	color: var(--on-accent);
}

.tj-wt-legend {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--muted);
}

.tj-wt-legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}