/*
 * Application-wide styles: base typography, the app shell (sidebar, main
 * region, mobile tab bar), the shared component classes and the structural
 * styling for the PrimeFaces widgets (the stock theme is disabled).
 */

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 14.5px;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .tj-display {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: .95;
	margin: 0;
}

h1 { font-size: 42px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }

a {
	color: var(--accent);
	text-decoration: none;
}

/* Themed scrollbars: a translucent ink-tinted thumb on a bare track, so they
   follow the light and dark palettes instead of the browser's default chrome. */
* {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--ink) 30%, transparent) transparent;
}

/* The gutter is always reserved, so centered columns (and anything aligned
   to their edge) sit still when navigating between short and long pages. */
html {
	scrollbar-gutter: stable;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--ink) 28%, transparent);
	border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--ink) 46%, transparent);
}

/* ---- App shell ---- */

/* While an admin is mimicking, the banner above the shell claims this much
   height; it is 0 otherwise. The full-height regions subtract it so banner +
   content stay within the viewport instead of growing a scrollbar. */
body.tj-mimicking {
	--mimic-banner-h: 40px;
}

.tj-shell {
	display: flex;
	min-height: calc(100vh - var(--mimic-banner-h, 0px));
	background: var(--bg);
	color: var(--ink);
}

.tj-side {
	width: 228px;
	flex: none;
	position: sticky;
	top: var(--mimic-banner-h, 0px);
	height: calc(100vh - var(--mimic-banner-h, 0px));
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--surface);
	border-right: 1px solid var(--line);
	padding: 26px 16px 20px;
	overflow: hidden;
}

.tj-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 10px 22px;
}

.tj-logo-ball {
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ball);
	flex: none;
	box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .14);
	animation: tjSpinBall 14s linear infinite;
}

.tj-logo-ball::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, .85);
	border-left-color: transparent;
	border-bottom-color: transparent;
	transform: rotate(24deg);
}

@media (prefers-reduced-motion: reduce) {
	.tj-logo-ball { animation: none; }
}

.tj-logo-name {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 21px;
	line-height: .92;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.tj-logo-club {
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 600;
	margin-top: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tj-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tj-nav a, .tj-nav button {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--ink);
	font-family: 'Barlow', system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	text-align: left;
	transition: background .2s, color .2s;
}

.tj-nav a:hover, .tj-nav button:hover {
	background: var(--surface2);
}

.tj-nav a svg, .tj-nav button svg {
	flex: none;
}

.tj-nav .tj-active {
	background: var(--accent-soft);
	color: var(--accent);
}

.tj-side-footer {
	margin-top: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0 10px;
}

.tj-main {
	flex: 1;
	min-width: 0;
	padding: 36px 44px 60px;
}

.tj-page {
	max-width: 1080px;
	margin: 0 auto;
	animation: tjFadeUp .45s ease both;
}

.tj-tabbar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
	justify-content: space-around;
}

.tj-tabbar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: var(--muted);
	font-size: 11px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 10px;
}

.tj-tabbar a.tj-active {
	color: var(--accent);
	background: var(--accent-soft);
}

/* ---- Shared components ---- */

.tj-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	padding: 20px 22px;
}

/* The line naming the running build, at the foot of the administration. */
.tj-buildstamp {
	margin-top: 34px;
	text-align: center;
	color: var(--muted);
	font-size: 11.5px;
	opacity: .75;
}

/* A card or tile that lifts on hover — for the clickable dashboard cards. */
.tj-lift {
	transition: transform .18s ease, box-shadow .2s ease;
}

/* A drill's description on its card. */
.tj-drilldesc {
	display: block;
	font-size: 12px;
	line-height: 1.45;
	margin-top: 2px;
}

/*
 * Three lines of text, the rest clipped. Declared after the description so its
 * display wins: the clamp is inert without -webkit-box, and a display coming
 * from anywhere more specific silently switches the clipping off.
 */
.tj-clamp3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* One drill in the practice list: its card, and the log box it opens. */
.tj-drillrow {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * The opened drill reads as one card that grew rather than two stacked ones.
 * The log box cannot live inside the card itself — the card is a link, and a
 * button nested in a link would swallow the tap — so the two boxes are joined
 * along their shared edge instead, and the accent ring is drawn around both.
 */
.tj-drillopen {
	gap: 0;
	border-radius: 18px;
	outline: 2px solid var(--accent);
}

.tj-drillopen > .tj-card:first-child {
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* The rule under the meta row, dividing what the drill is from what to do
   about it. It doubles as the seam between the two boxes. */
.tj-drillopen > .tj-card + .tj-card {
	border-top: 1px solid var(--line);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/*
 * The log box under the rule. Its padding lives here rather than inline,
 * where it would outrank every rule above and leave the controls sitting on
 * the separator.
 */
.tj-drilllog {
	padding: 20px 16px 16px;
}

/* The card's bottom line: a pill per focus, the level as dots, the minutes. */
.tj-drillmeta {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 9px;
}

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

/* The drill designer's selected step — where the next drawn path lands. */
.tj-designer-step {
	transition: border-color .15s;
}

.tj-designer-step.tj-active {
	border-color: var(--accent);
}

/* The wizard's suggestions land one after another; backwards keeps the ghost
   opacity of already-accepted cards once each entrance has played. The
   siblings count from each other — the hidden stand-ins share the grid. */
.tj-suggestion {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px 20px;
	animation: tjFadeUp .4s ease backwards;
}

.tj-suggestion + .tj-suggestion {
	animation-delay: .18s;
}

.tj-suggestion + .tj-suggestion + .tj-suggestion {
	animation-delay: .36s;
}

/* The wizard's ask panel: the focus chips and duration stepper over a footer
   row that anchors the ask button beside its metering note. */
.tj-wiz-controls {
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
	padding: 18px 20px 0;
	margin-bottom: 18px;
}

.tj-wiz-ask {
	display: flex;
	align-items: center;
	gap: 16px;
	border-top: 1px solid var(--line);
	margin-top: 18px;
	padding: 14px 0;
}

.tj-wiz-slot-mark {
	font-size: 20px;
	color: var(--accent);
	opacity: .7;
}

/* While the wizard generates, the stand-ins tick, previous suggestions ghost
   out and nothing in the round is clickable. */
.tj-wiz-busy {
	display: none;
	flex-direction: column;
	align-items: center;
}

.tj-wiz-loading .tj-wiz-busy {
	display: flex;
}

.tj-wiz-loading .tj-wiz-idle {
	display: none;
}

.tj-wiz-loading .tj-wiz-controls {
	opacity: .4;
	pointer-events: none;
}

/* Once a round has answered, the stand-ins step aside for the cards — and
   step back in, ticking, while the next round replaces them. */
.tj-wiz-answered .tj-suggestion-empty {
	display: none;
}

.tj-wiz-loading .tj-wiz-answered .tj-suggestion-empty {
	display: flex;
}

.tj-wiz-loading .tj-suggestion {
	display: none;
}

.tj-spin {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 3px solid var(--line);
	border-top-color: var(--accent);
	animation: tjSpin .8s linear infinite;
}

/* The three stand-ins tick out of phase, so the wait reads as three drills
   being worked on rather than one spinner stamped thrice. */
.tj-suggestion-empty:nth-child(2) .tj-spin {
	animation-delay: -.27s;
}

.tj-suggestion-empty:nth-child(3) .tj-spin {
	animation-delay: -.54s;
}

/* A ghosted stand-in card shown before the wizard's first suggestions. */
.tj-suggestion-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 210px;
	border: 1.5px dashed var(--line);
	border-radius: 16px;
	padding: 30px 20px;
	text-align: center;
	color: var(--muted);
	opacity: .65;
}

/* A wizard suggestion already taken into the library: kept in view for the
   round's shape, but ghosted and no longer offering its add button. */
.tj-suggestion.tj-ghost {
	opacity: .45;
}

.tj-suggestion-added {
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	color: var(--muted);
	padding: 11px 0;
}

/* The designer court's trashcan: quiet until a drag arms it, red when the
   drag hovers it and a drop would delete. */
.tj-designer-trash {
	opacity: .45;
	transition: opacity .15s;
	pointer-events: none;
}

.tj-designer-trash.tj-armed {
	opacity: .95;
}

.tj-designer-trash.tj-hot circle {
	stroke: #d43a3a;
	fill: #d43a3a;
	fill-opacity: .18;
}

.tj-designer-trash.tj-hot g {
	stroke: #d43a3a;
}

/* The step row's kind, fixed by the drawing tool that created it. */
.tj-designer-kind {
	flex: none;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
}

.tj-designer-kind.tj-move {
	color: var(--muted);
}

/* The designer's clickable level dots. */
.tj-level-pick {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--surface2);
	transition: background .15s;
}

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

/* The designer's − / + stepper buttons. */
.tj-step-btn {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	border-radius: 8px;
	font-size: 13px;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}

.tj-step-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}

/* The measurable-goal on/off switch. */
.tj-switch {
	flex: none;
	display: inline-block;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var(--surface2);
	position: relative;
	transition: background .2s;
}

.tj-switch .tj-switch-knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	transition: left .2s;
}

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

.tj-switch.tj-on .tj-switch-knob {
	left: 18px;
}

/* The higher/lower segmented control of the measurable goal. */
.tj-seg {
	display: flex;
	background: var(--surface2);
	border-radius: 10px;
	padding: 3px;
	gap: 2px;
}

.tj-seg-opt {
	flex: 1;
	border-radius: 8px;
	padding: 8px 0;
	font-weight: 600;
	font-size: 12.5px;
	text-align: center;
	text-decoration: none;
	color: var(--muted);
	transition: all .2s;
}

.tj-seg-opt.tj-active {
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.tj-muted {
	color: var(--muted);
}

.tj-kicker {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.tj-btn, .tj-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	border-radius: 999px;
	padding: 11px 20px;
	font-family: 'Barlow', system-ui, sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}

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

.tj-btn-ghost {
	background: transparent;
	color: var(--ink);
	border: 1px solid var(--line);
}

.tj-btn:hover, .tj-btn-ghost:hover {
	transform: translateY(-1px);
}

/* A working button ghosts out and stops taking clicks until its round ends. */
.tj-btn:disabled, .tj-btn-ghost:disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

/* An AI trigger while the club has AI switched off: still clickable — it
   explains itself in a dialog — but visibly muted. */
.tj-ai-off {
	opacity: .45;
}

/* The PrimeFaces base sheet loads after this one; its .ui-button drops our pill
   padding to 0 and reverts the flex box, so command-button labels lose their
   height and drift off-centre. Re-assert both at a higher specificity and strip
   the inner .ui-button-text padding so the height matches the .tj-input controls
   these buttons sit beside. */
.ui-button.tj-btn,
.ui-button.tj-btn-ghost {
	display: inline-flex;
	padding: 11px 20px;
}

.ui-button.tj-btn .ui-button-text,
.ui-button.tj-btn-ghost .ui-button-text {
	padding: 0;
}

.tj-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: transform .15s ease;
}

.tj-theme-toggle:hover {
	transform: translateY(-1px);
}

.tj-theme-toggle svg {
	width: 18px;
	height: 18px;
}

.tj-theme-toggle .tj-icon-sun {
	display: none;
}

:root[data-theme='dark'] .tj-theme-toggle .tj-icon-sun {
	display: block;
}

:root[data-theme='dark'] .tj-theme-toggle .tj-icon-moon {
	display: none;
}

/* The player app's flavor of the toggle, sitting over the page. */
.tj-theme-float {
	width: 36px;
	height: 36px;
	background: var(--surface);
	color: var(--muted);
}

.tj-theme-float:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.tj-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.tj-chip.tj-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

/* The club's own drills toggle wears the blue their cards are drawn on,
   keeping it apart from the orange category chips it sits next to. */
.tj-chip.tj-chip-club.tj-active {
	background: var(--custom-court);
	border-color: var(--custom-court);
	color: #fff;
}

/* Splits the category chips from the toggle that follows them. */
.tj-chip-split {
	align-self: stretch;
	width: 1px;
	background: var(--line);
	margin: 2px 4px;
}

.tj-pill {
	display: inline-block;
	border-radius: 999px;
	background: var(--surface2);
	color: var(--muted);
	padding: 3px 10px;
	font-size: 11.5px;
	font-weight: 700;
}

/* ---- Court chips (club settings) ---- */

.tj-court-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	background: var(--surface2);
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
}

.tj-court-chip a {
	color: var(--muted);
	text-decoration: none;
	font-weight: 700;
	line-height: 1;
}

.tj-court-chip a:hover {
	color: var(--alert);
}

/* The chip's name is a borderless input sized to its text. */
.tj-court-chip input {
	border: none;
	background: transparent;
	font: inherit;
	color: inherit;
	padding: 0;
	outline: none;
	field-sizing: content;
	min-width: 44px;
}

/* Editable chips stay flat at rest; a ring on hover advertises that the
   name inside is a text field, and it turns accent while typing. */
.tj-court-chip:has(input) {
	transition: box-shadow .15s ease;
}

.tj-court-chip:has(input):hover {
	box-shadow: inset 0 0 0 1.5px var(--line);
}

.tj-court-chip:has(input:focus) {
	box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* The add affordance is a dashed chip that is really a text input. */
.tj-court-add {
	width: 78px;
	border: 1.5px dashed var(--line);
	border-radius: 999px;
	background: transparent;
	padding: 7px 14px;
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	text-align: center;
	outline: none;
	cursor: pointer;
	transition: width .15s ease, border-color .15s ease, background .15s ease;
}

/* Until it has focus the add chip behaves like a button: pointer cursor
   and an accent invitation on hover; the focus flips it into a text field. */
.tj-court-add:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
}

.tj-court-add:hover::placeholder {
	color: var(--accent);
	opacity: 1;
}

.tj-court-add:focus {
	width: 150px;
	border-color: var(--accent);
	background: transparent;
	cursor: text;
}

/* ---- Admin clubs table ---- */

.tj-club-badge {
	position: relative;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	color: #fff;
	display: grid;
	place-items: center;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 14px;
	overflow: hidden;
}

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

.tj-iconbtn {
	width: 27px;
	height: 27px;
	flex: none;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	border-radius: 8px;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.tj-iconbtn:hover,
.tj-iconbtn-on {
	color: var(--accent);
	border-color: var(--accent);
}

/* An unpaid-invoice marker riding the corner of an icon button. */
.tj-billdot {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d43a3a;
	border: 2px solid var(--surface);
}

.tj-clubgrid {
	display: grid;
	grid-template-columns: 2.2fr 1.8fr 0.7fr 0.8fr 1.1fr 1.2fr;
	gap: 14px;
	align-items: center;
}

.tj-coachgrid {
	display: grid;
	grid-template-columns: 2.4fr 2fr 0.8fr 1.2fr 1.1fr;
	gap: 14px;
	align-items: center;
}

/* The clubs ⇄ private-coaches flip, sized like the pill buttons beside it. */
.tj-seg-pill {
	height: 38px;
	box-sizing: border-box;
	border-radius: 999px;
}

.tj-seg-pill .tj-seg-opt {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 18px;
	border-radius: 999px;
}

.tj-seg-pill .tj-seg-opt.tj-active {
	background: var(--accent);
	color: var(--on-accent);
	box-shadow: none;
}

.tj-clubrow {
	transition: background .15s;
}

.tj-clubrow:hover {
	background: var(--accent-soft);
}

.tj-billgrid {
	display: grid;
	grid-template-columns: 1.3fr 1.3fr 1.5fr 0.9fr 0.9fr 0.4fr;
	gap: 12px;
	align-items: center;
}

/* One invoice line, shared by the coach billing page and the admin console. */
.tj-billrow {
	padding: 8px 0;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
}

.tj-billrow-no {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--muted);
}

.tj-billrow-month {
	font-weight: 600;
}

.tj-billrow-amount {
	text-align: right;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 14px;
}

.tj-billrow-status {
	text-align: center;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 3px 0;
	border-radius: 999px;
}

.tj-billrow-paid {
	background: rgba(78, 138, 74, .16);
	color: #4e8a4a;
}

.tj-billrow-due {
	background: var(--accent-soft);
	color: var(--accent);
}

.tj-billrow-dl {
	display: flex;
	justify-content: flex-end;
}

.tj-sectionhead {
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .06em;
}

.tj-adminstat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 14px 18px;
}

.tj-adminstat-value {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	color: var(--accent);
}

.tj-adminstat-label {
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-top: 5px;
}

.tj-newclub {
	background: var(--surface);
	border: 1.5px solid var(--accent);
	border-radius: 16px;
	padding: 18px 20px;
	margin-bottom: 12px;
}

.tj-newclub-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.tj-newclub-ok {
	color: var(--ball-ink);
	font-size: 12.5px;
	font-weight: 700;
	margin-top: 10px;
}

.tj-headpill {
	border: 1px solid var(--line);
	background: var(--surface2);
	color: var(--ink);
	font-weight: 600;
	font-size: 12px;
	padding: 7px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .15s;
}

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

.tj-headpill-on {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
}

.tj-trendbar {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
}

.tj-trendbar:hover {
	opacity: .8;
}

.tj-trendbar-fill {
	width: 100%;
	max-width: 52px;
	display: block;
	border-radius: 5px 5px 0 0;
	transition: height .3s;
}

.tj-personrow {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 20px;
	border-bottom: 1px solid var(--line);
}

/* Compound with .tj-avatar, whose base rule is declared later in the sheet. */
.tj-avatar.tj-avatar-soft {
	background: var(--surface2);
	color: var(--ink);
}

.tj-clubtag {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
}

/* The pill's unassociate cross: dim until the pill is hovered, then live. */
.tj-clubtag-x {
	margin-left: 5px;
	font-size: 11px;
	line-height: 1;
	color: inherit;
	opacity: .45;
	text-decoration: none;
	cursor: pointer;
}

.tj-clubtag:hover .tj-clubtag-x { opacity: .8; }
.tj-clubtag-x:hover { opacity: 1; color: #d43a3a; }

/* A private coach's own business: outlined rather than filled, so it reads as
   a different kind of tie than the coloured club memberships beside it. */
.tj-clubtag-private {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--muted);
}

.tj-clubtag-0 { background: rgba(224, 84, 38, .13); color: #b5461f; }
.tj-clubtag-1 { background: rgba(78, 138, 74, .15); color: #3f7a3a; }
.tj-clubtag-2 { background: rgba(74, 99, 168, .15); color: #4a63a8; }
.tj-clubtag-3 { background: rgba(140, 104, 176, .16); color: #7a5aa8; }

.tj-headbtn {
	flex: none;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-weight: 700;
	font-size: 10.5px;
	padding: 4px 11px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s, border-color .15s;
}

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

.tj-headbtn-off:hover {
	color: #d43a3a;
	border-color: #d43a3a;
}

.tj-pagebtn {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	border-radius: 8px;
	width: 30px;
	height: 30px;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s;
}

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

.tj-pagebtn-off {
	color: var(--line);
	cursor: default;
}

.tj-pagebtn-off:hover {
	border-color: var(--line);
}

/* The session builder's assign panel: player initials, staff and court chips. */
.tj-initchip {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--surface2);
	color: var(--muted);
	display: inline-grid;
	place-items: center;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	transition: transform .15s, background .2s, color .2s;
}

.tj-initchip:hover {
	transform: translateY(-1px);
}

.tj-initchip.tj-active {
	background: var(--accent);
	color: var(--on-accent);
}

.tj-staffchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border-radius: 999px;
	background: var(--surface2);
	color: var(--muted);
	font-weight: 600;
	font-size: 12.5px;
	padding: 7px 14px 7px 8px;
	text-decoration: none;
	transition: transform .15s, background .2s, color .2s;
}

.tj-staffchip:hover {
	transform: translateY(-1px);
}

.tj-staffchip .tj-staffinit {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	display: grid;
	place-items: center;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 10px;
}

.tj-staffchip.tj-active {
	background: var(--ink);
	color: var(--bg);
}

.tj-courtchip {
	height: 32px;
	border-radius: 999px;
	background: var(--surface2);
	color: var(--muted);
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: .03em;
	padding: 0 15px;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: transform .15s, background .2s, color .2s;
}

.tj-courtchip:hover {
	transform: translateY(-1px);
}

.tj-courtchip.tj-active {
	background: var(--accent);
	color: var(--on-accent);
}

/* The builder's block steppers and the danger flavor of the square buttons. */
.tj-stepbtn {
	width: 20px;
	height: 20px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	border-radius: 6px;
	display: inline-grid;
	place-items: center;
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}

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

/* Template rows with their hover preview flyout and round action buttons. */
.tj-tplrow {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 2px;
	border-top: 1px solid var(--line);
}

.tj-tplpreview {
	display: none;
	position: absolute;
	right: calc(100% + 14px);
	top: -6px;
	width: 240px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 12px 14px;
	box-shadow: var(--shadow);
	z-index: 30;
	pointer-events: none;
}

.tj-tplrow:hover .tj-tplpreview {
	display: block;
	animation: tjFadeUp .18s ease both;
}

.tj-tpluse {
	flex: none;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--accent);
	font-weight: 700;
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}

.tj-tpluse:hover {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}

.tj-tplbtn {
	flex: none;
	width: 26px;
	height: 26px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	font-size: 12px;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}

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

/* Last, so the danger flavor wins over the square and round buttons' hover. */
.tj-danger:hover {
	color: #d43a3a;
	border-color: #d43a3a;
}

.tj-mimic-btn {
	flex: none;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-weight: 700;
	font-size: 10.5px;
	padding: 4px 11px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s, border-color .15s;
}

.tj-mimic-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.tj-mimic-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	/* Pinned to the viewport top so the banner never scrolls away — the
	   sidebar sticks right below it and neither moves on long pages. */
	position: sticky;
	top: 0;
	z-index: 50;
	height: 40px;
	padding: 0 20px;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}

.tj-mimic-banner strong {
	font-weight: 800;
}

.tj-mimic-banner-btn {
	border: 1px solid rgba(255, 255, 255, .7);
	background: transparent;
	color: #fff;
	font-weight: 700;
	font-size: 11px;
	padding: 4px 12px;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s;
}

.tj-mimic-banner-btn:hover {
	background: rgba(255, 255, 255, .18);
}

.tj-input, .ui-inputfield {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 11px;
	color: var(--ink);
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 14.5px;
	padding: 10px 14px;
	outline: none;
}

.tj-input:focus, .ui-inputfield:focus {
	border-color: var(--accent);
}

/* Inputs that sit on a white card take the darker page fill so they still read
   as editable fields against the surface rather than blending into it. */
.tj-input-sunken {
	background: var(--bg);
}

.tj-stat .tj-stat-value {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 38px;
	line-height: 1;
	margin-top: 8px;
}

.tj-stat-unit {
	font-size: 17px;
	color: var(--muted);
	margin-left: 4px;
}

.tj-stat-accent .tj-stat-value {
	color: var(--accent);
}

.tj-stat-delta {
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 700;
}

.tj-trend-up { color: #4e8a4a; }
.tj-trend-down { color: #c43d2f; }
.tj-trend-flat { color: var(--muted); }

.tj-avatar-wrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.tj-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	font-weight: 700;
	flex: none;
}

.tj-avatar-sm { width: 26px; height: 26px; font-size: 10.5px; }
.tj-avatar-md { width: 36px; height: 36px; font-size: 13px; }
.tj-avatar-lg { width: 52px; height: 52px; font-size: 18px; }

.tj-avatar-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- 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;
}

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

.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;
}

.tj-cc-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.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;
}

.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;
}

/* ---- PrimeFaces structural styling (THEME=none) ---- */

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 14.5px;
}

.ui-datatable table {
	width: 100%;
	border-collapse: collapse;
}

/* The compound .ui-datatable.ui-widget outranks the structural rules in
   components.css, which loads after this sheet and would otherwise paint
   1px solid borders around every cell in the text colour. */
.ui-datatable.ui-widget thead th {
	text-align: left;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid var(--line);
}

.ui-datatable.ui-widget tbody td {
	padding: 12px 14px;
	border: none;
	border-bottom: 1px solid var(--line);
}

.ui-datatable.ui-widget tr:last-child td {
	border-bottom: none;
}

.ui-paginator {
	display: flex;
	gap: 6px;
	justify-content: center;
	padding: 12px 0 0;
}

.ui-paginator a, .ui-paginator span.ui-state-active {
	border-radius: 8px;
	padding: 6px 11px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.ui-paginator span.ui-state-active {
	background: var(--accent);
	color: var(--on-accent);
}

.ui-dialog {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	padding: 6px 4px 12px;
}

.ui-dialog .ui-dialog-titlebar {
	padding: 16px 20px 8px;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 20px;
}

.ui-dialog .ui-dialog-content {
	padding: 8px 20px 12px;
}

/* The titlebar's close control: the themeless icon span is empty, so the
   cross is drawn here and the anchor styled as a quiet round button. */
.ui-dialog .ui-dialog-titlebar-close {
	float: right;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--muted);
	text-decoration: none;
	transition: color .15s, background .15s;
}

.ui-dialog .ui-dialog-titlebar-close::before {
	content: '✕';
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
	display: none;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
	color: var(--ink);
	background: var(--surface2);
}

.ui-widget-overlay {
	background: rgba(0, 0, 0, .45);
}

.ui-growl {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 320px;
	z-index: 100;
}

.ui-growl-item-container {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: 12px;
	box-shadow: var(--shadow);
	margin-bottom: 10px;
	padding: 14px 16px;
}

.ui-growl-item-container.ui-growl-error,
.ui-growl-item-container.ui-growl-fatal {
	border-left-color: #c12946;
}

/* Lay the toast out as icon | message | close so the severity glyph aligns. The
   container selector outweighs the base component sheet, which loads after this one. */
.ui-growl-item-container .ui-growl-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Drop the base sheet's asymmetric padding, fixed width and float so the message
   sits symmetric and centres against the icon on the flex row. */
.ui-growl-item-container .ui-growl-title,
.ui-growl-item-container .ui-growl-message {
	color: var(--ink);
	width: auto;
	padding: 0;
	margin: 0;
	float: none;
}

/* Stack the title over the detail and centre them as a group so a message with
   no detail (an empty trailing paragraph) still sits centred against the icon
   and close control rather than riding high in the toast. */
.ui-growl-item-container .ui-growl-message {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ui-growl-title {
	font-weight: 700;
}

/* Severity glyph drawn with PrimeIcons; the container selector outweighs the base
   component sheet so its 32px messages.png sprite, float and size are dropped and
   only the single glyph below remains. */
.ui-growl-item-container .ui-growl-image {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: auto;
	float: none;
	background: none;
}

.ui-growl-item-container .ui-growl-image::before {
	font-family: "primeicons";
	font-size: 1.25rem;
	line-height: 1;
}

.ui-growl-image-info::before {
	content: "\e924";
	color: var(--accent);
}

.ui-growl-image-warn::before {
	content: "\e922";
	color: #e9b35c;
}

.ui-growl-image-error::before,
.ui-growl-image-fatal::before {
	content: "\e90c";
	color: #c12946;
}

/* Pull the close control into the flex row (the base sheet floats it to the top
   corner) so it centres on the text line and pushes to the right edge. */
.ui-growl-item-container .ui-growl-icon-close {
	order: 1;
	position: static;
	align-self: center;
	margin-left: auto;
	color: var(--muted);
	text-indent: 0;
	overflow: visible;
}

.ui-growl-icon-close::before {
	content: "\00d7";
	font-size: 1.1rem;
	line-height: 1;
}

.ui-selectonemenu {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 9px 30px 9px 14px;
	position: relative;
	cursor: pointer;
}

.ui-selectonemenu-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 6px;
}

.ui-selectonemenu-item {
	padding: 9px 12px;
	border-radius: 8px;
	cursor: pointer;
}

.ui-selectonemenu-item:hover, .ui-selectonemenu-item.ui-state-highlight {
	background: var(--accent-soft);
	color: var(--accent);
}

.ui-state-error {
	border-color: #c43d2f;
}

.ui-message-error, .ui-messages-error {
	color: #c43d2f;
	font-size: 13px;
	font-weight: 600;
}

/* ---- Player roster ---- */

.tj-roster {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px;
	overflow: hidden;
}

.tj-rosterrow {
	display: grid;
	grid-template-columns: 2fr 1.6fr 2fr 1fr 1fr .6fr .5fr;
	gap: 16px;
	align-items: center;
	padding: 15px 24px;
	border-bottom: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
	transition: background .2s;
}

.tj-rosterrow:last-child {
	border-bottom: none;
}

a.tj-rosterrow:hover {
	background: var(--accent-soft);
}

.tj-roster-head {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
}

.tj-roster-count {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16px;
}

.tj-roster-player {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* The name carries the link into the player's page, but reads as plain text
   until it is hovered — the row is a table, not a list of links. */
.tj-roster-name {
	display: inline-block;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--ink);
	text-decoration: none;
}

.tj-roster-name:hover {
	color: var(--accent);
}

.tj-roster-level {
	color: var(--muted);
	font-size: 12px;
}

.tj-roster-focus {
	font-size: 13.5px;
}

/* The progress bar mirrors the XP bar, without the level chip beside it. */
.tj-roster-bar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tj-roster-track {
	flex: 1;
	height: 7px;
	border-radius: 99px;
	background: var(--surface2);
	overflow: hidden;
}

.tj-roster-fill {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: var(--accent);
}

.tj-roster-pct {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 14px;
	width: 34px;
}

.tj-roster-att {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 15px;
}

.tj-roster-last {
	color: var(--muted);
	font-size: 13px;
}

.tj-roster-trend {
	text-align: right;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 15px;
}

.tj-roster-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
}

.tj-roster-notecount {
	font-size: 11px;
	color: var(--muted);
}

.tj-notebtn {
	width: 30px;
	height: 30px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	border-radius: 9px;
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
	transition: border-color .15s, color .15s;
}

.tj-notebtn:hover,
.tj-notebtn-open {
	border-color: var(--accent);
	color: var(--accent);
}

/* The feedback box drops in under the row it belongs to. */
.tj-feedback {
	padding: 16px 24px 20px;
	border-bottom: 1px solid var(--line);
	background: var(--accent-soft);
}

.tj-feedback-row {
	display: flex;
	gap: 8px;
}

.tj-feedback-row .tj-input {
	flex: 1;
	resize: vertical;
	font-family: 'Barlow', sans-serif;
}

.tj-feedback-row .tj-btn {
	flex: none;
	align-self: flex-end;
}

.tj-feedback-past {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 12px;
	font-size: 13px;
}

.tj-feedback-date {
	color: var(--muted);
	font-weight: 600;
}

/* ---- Roster sections: staff and invites ---- */

.tj-sectionrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.tj-sectionsub {
	color: var(--muted);
	font-size: 13px;
	margin-top: 2px;
}

.tj-cardgrid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

/* The earned badges, three across, wherever they are shown. */
.tj-badgegrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

/* The coach's page is wider than the player's, so its badges run four across. */
.tj-badgegrid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.tj-badge {
	background: var(--accent-soft);
	border-radius: 14px;
	padding: 16px 10px;
	text-align: center;
}

.tj-badge-icon {
	color: var(--accent);
}

.tj-badge-name {
	font-size: 14px;
	font-weight: 700;
	margin-top: 6px;
}

.tj-badge-criteria {
	font-size: 10.5px;
	margin-top: 2px;
	line-height: 1.3;
}

.tj-staffcard {
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.tj-staffcard-who {
	flex: 1;
	min-width: 0;
}

.tj-staffcard-name,
.tj-staffcard-tag {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tj-staffcard-name {
	font-weight: 700;
	font-size: 14.5px;
}

.tj-staffcard-tag {
	color: var(--muted);
	font-size: 12px;
}

.tj-staffcard-acts {
	display: flex;
	gap: 5px;
	flex: none;
}

/* A pill small enough to sit inside a card without crowding the name. */
.tj-minibtn {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-weight: 700;
	font-size: 11px;
	padding: 5px 10px;
	border-radius: 999px;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

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

.tj-xbtn {
	width: 26px;
	height: 26px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	border-radius: 999px;
	cursor: pointer;
	font-size: 11px;
	padding: 0;
	transition: color .15s, border-color .15s;
}

.tj-xbtn:hover {
	color: #d43a3a;
	border-color: #d43a3a;
}

/* Squared off to match the note button it sits beside in a roster row. */
.tj-xbtn-row {
	width: 30px;
	height: 30px;
	border-radius: 9px;
	font-size: 12px;
}

.tj-invitecard {
	background: var(--surface);
	border: 1.5px dashed var(--line);
	border-radius: 16px;
	padding: 16px 18px;
}

.tj-invitecard-who {
	display: flex;
	align-items: center;
	gap: 11px;
}

/* Nobody yet: an unclaimed invite greys its avatar until a person is behind it. */
.tj-invitecard-who .tj-avatar {
	background: var(--surface2);
	color: var(--muted);
}

.tj-invitecard-name {
	font-weight: 600;
	font-size: 14.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tj-invitecard-sub {
	color: var(--muted);
	font-size: 11.5px;
}

.tj-invitecard-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
}

.tj-invitecard-code {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: .05em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The QR toggle inverts on hover, the way the design's pill does. */
.tj-qrbtn {
	flex: none;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--accent);
	font-weight: 700;
	font-size: 12px;
	padding: 6px 13px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}

.tj-qrbtn:hover {
	background: var(--accent);
	color: var(--on-accent);
	border-color: var(--accent);
}

.tj-invitecard-qr {
	display: flex;
	justify-content: center;
	padding: 12px 0 4px;
}

.tj-invitecard-qr img {
	width: 150px;
	height: 150px;
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--shadow);
}

.tj-invitecard-hint {
	color: var(--muted);
	font-size: 11.5px;
	text-align: center;
	margin-top: 6px;
}

/* The name box the coach opens before an invite exists. */
.tj-invitebox {
	background: var(--surface);
	border: 1.5px solid var(--accent);
	border-radius: 16px;
	padding: 16px 18px;
	margin-bottom: 14px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.tj-invitebox-hint {
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}

/* ---- Measured results ---- */

.tj-resultcard {
	display: block;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px 20px;
	color: inherit;
	text-decoration: none;
	transition: transform .18s, box-shadow .2s;
}

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

.tj-resultcard-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

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

.tj-resultcard-metric {
	color: var(--muted);
	font-size: 12.5px;
	margin-top: 4px;
}

/* The sparkline grows from the baseline, so the bars hang off the bottom. */
.tj-resultcard-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 40px;
	flex: none;
}

.tj-resultcard-bar {
	display: block;
	width: 7px;
	border-radius: 3px 3px 0 0;
}

.tj-resultcard-figures {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-top: 12px;
}

/* The best never breaks mid-phrase; the latest beside it may wrap instead. */
.tj-resultcard-figures > div:first-child {
	flex: none;
}

.tj-resultcard-best {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	color: var(--accent);
	white-space: nowrap;
}

.tj-resultcard-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 12.5px;
}

/* ---- Image slot ---- */

.tj-imageslot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.tj-imageslot-frame {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	border: 1.5px dashed var(--line);
	background: var(--surface2);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.tj-imageslot-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The uploader under an image slot: only its choose button belongs in the
   column. The advanced-mode button bar sheds its box chrome and the content
   panel collapses while empty — its reserved height would otherwise stretch
   the column and push the slot off the card's vertical center. It comes back
   as soon as it has something to show (progress rows, a validation message). */
.tj-imageslot .ui-fileupload-buttonbar {
	background: transparent;
	border: none;
	padding: 0;
}

.tj-imageslot .ui-fileupload-content {
	display: none;
}

.tj-imageslot .ui-fileupload-content:has(.ui-fileupload-row),
.tj-imageslot .ui-fileupload-content:has(.ui-messages:not(.ui-helper-hidden)) {
	display: block;
}

.tj-logo-img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

/* ---- Club settings ---- */

.tj-swatch {
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	display: inline-block;
	flex: none;
	transition: transform .15s;
}

.tj-swatch:hover {
	transform: scale(1.12);
}

.tj-invite {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1.5px dashed var(--line);
	border-radius: 16px;
	padding: 14px 16px;
}

.tj-invite-qr {
	width: 120px;
	height: 120px;
	align-self: center;
	background: #fff;
	border-radius: 12px;
	padding: 6px;
}

.tj-invite-link {
	font-size: 11px;
	color: var(--muted);
	word-break: break-all;
	text-align: center;
}

/* ---- Session builder ---- */

.tj-court-checks {
	display: inline-flex;
	flex-wrap: wrap;
}

.tj-court-checks td {
	padding: 0 10px 0 0;
	white-space: nowrap;
}

.tj-court-checks label {
	font-weight: 600;
	font-size: 13px;
	margin-left: 4px;
}

.tj-court-checks input {
	accent-color: var(--accent);
}

/* ---- Responsive shell ---- */

/* Hamburger that brings the hidden sidebar back as a drawer on narrow
   screens; body.tj-side-open (toggled in theme.js) shows the drawer. */
.tj-menu-btn {
	display: none;
	position: fixed;
	top: calc(var(--mimic-banner-h, 0px) + 14px);
	left: 14px;
	z-index: 45;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}

.tj-menu-btn svg {
	width: 20px;
	height: 20px;
}

.tj-side-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(0, 0, 0, .45);
}

/* ---- Month calendar (coach schedule) ---- */

.tj-sched-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
	gap: 26px;
	align-items: start;
}

.tj-cal-nav {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface);
	color: var(--muted);
	font-size: 15px;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}

.tj-cal-nav:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.tj-cal-dow {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 6px 0;
}

.tj-cal-cell {
	aspect-ratio: 1;
	border-radius: 12px;
	border: 1.5px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.tj-cal-cell:hover,
.tj-cal-cell.tj-selected,
.tj-cal-cell.tj-drop-hover {
	background: var(--accent-soft);
}

.tj-cal-cell.tj-today,
.tj-cal-cell.tj-drop-hover {
	border-color: var(--accent);
}

.tj-cal-num {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--ink);
}

.tj-cal-cell.tj-today .tj-cal-num {
	color: var(--accent);
}

.tj-cal-dots {
	display: flex;
	gap: 3px;
	height: 6px;
}

.tj-cal-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.tj-sched-row {
	border-top: 1px solid var(--line);
	padding: 12px 0 4px;
}

.tj-sched-row.tj-draggable {
	cursor: grab;
}

.tj-drag-grip {
	flex: none;
	font-size: 13px;
	letter-spacing: 1px;
	cursor: grab;
	user-select: none;
}

.tj-icon-btn {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: var(--surface);
	color: var(--muted);
	font-size: 11px;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}

.tj-icon-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.tj-icon-btn.tj-danger:hover {
	color: #d43a3a;
	border-color: #d43a3a;
}

.tj-att-chip {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--surface2);
	color: var(--muted);
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-decoration: line-through;
	transition: transform .15s;
}

.tj-att-chip.tj-on {
	background: var(--ball);
	color: var(--on-ball);
	text-decoration: none;
}

.tj-att-chip:hover {
	transform: translateY(-1px);
	text-decoration: inherit;
}

.tj-pick-chip {
	height: 28px;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--surface2);
	color: var(--muted);
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .03em;
	padding: 0 12px;
	text-decoration: none;
	transition: transform .15s;
}

.tj-pick-chip.tj-on {
	background: var(--accent);
	color: var(--on-accent);
}

.tj-pick-chip:hover {
	transform: translateY(-1px);
}

.tj-dash-btn,
.tj-plan-btn {
	flex: 1;
	text-align: center;
	padding: 11px;
	border-radius: 12px;
	font-size: 13.5px;
	text-decoration: none;
	transition: color .2s, border-color .2s;
}

.tj-dash-btn {
	border: 1.5px dashed var(--line);
	color: var(--muted);
	font-weight: 600;
}

.tj-dash-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}

.tj-plan-btn {
	border: 1.5px solid var(--line);
	background: var(--surface);
	color: var(--accent);
	font-weight: 700;
}

.tj-plan-btn:hover {
	border-color: var(--accent);
}

.tj-hist-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 2px;
	border-top: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
	transition: background .15s;
}

.tj-hist-row:hover {
	background: var(--accent-soft);
}

@media (max-width: 1100px) {
	.tj-sched-cols {
		grid-template-columns: 1fr;
	}

	.tj-wt-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.tj-wt-court {
		position: static;
	}
}

@media (max-width: 900px) {
	.tj-side {
		display: none;
	}

	.tj-menu-btn {
		display: flex;
	}

	/* Keep page headings clear of the fixed hamburger. */
	.tj-menu-btn ~ .tj-main {
		padding-top: 72px;
	}

	body.tj-side-open .tj-side-backdrop {
		display: block;
	}

	body.tj-side-open .tj-side {
		display: flex;
		position: fixed;
		left: 0;
		top: var(--mimic-banner-h, 0px);
		z-index: 61;
		box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
		animation: tjSlideIn .25s ease both;
	}

	.tj-tabbar {
		display: flex;
	}

	.tj-main {
		padding: 24px 18px 104px;
	}

	.tj-main h1 {
		font-size: 34px;
	}

	/* The roster keeps the player, the progress and the note; the rest waits
	   for a wider screen. */
	.tj-rosterrow {
		grid-template-columns: 1.5fr 1.3fr .6fr;
		gap: 10px;
		padding: 14px 16px;
	}

	.tj-roster-hide {
		display: none;
	}

	.tj-feedback {
		padding: 14px 16px 18px;
	}

	.tj-cardgrid3 {
		grid-template-columns: 1fr;
	}

	.tj-badgegrid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@keyframes tjSlideIn {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(0);
	}
}

/* ---- Link your team ---- */

/* The clubless visitor's way in: type the code from the coach's card, or
   scan the QR beside it, which lands on the claim page instead. */
.tj-linkteam {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 20px 22px;
	margin: 6px 0 0;
	max-width: 460px;
	box-shadow: var(--shadow);
	animation: tjFadeUp .4s ease both;
}

.tj-linkteam-who {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.tj-linkteam-code {
	width: 100%;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
}

.tj-linkteam-error {
	color: #d43a3a;
	font-size: 12.5px;
	margin-top: 8px;
	font-weight: 600;
}

/* The link from the chosen chip into that player's page. */
.tj-resultfilter-link {
	margin-left: 10px;
	font-weight: 600;
}

/* ---- A player's results history ---- */

.tj-historyhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--line);
}

.tj-historypager {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tj-historyrow {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
}

.tj-historyrow:last-child {
	border-bottom: none;
}

/* ===== Toggle switch (tj:toggle) ===== */

.tj-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}

.tj-toggle input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.tj-toggle-track {
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: var(--line);
	position: relative;
	transition: background .15s ease;
}

.tj-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: left .15s ease;
}

.tj-toggle input:checked + .tj-toggle-track {
	background: var(--accent);
}

.tj-toggle input:checked + .tj-toggle-track .tj-toggle-knob {
	left: 19px;
}

.tj-toggle input:focus-visible + .tj-toggle-track {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.tj-toggle-text {
	font-size: 13px;
	font-weight: 600;
}

/* A create row whose controls are all single-line sits centred; the club row
   keeps its top alignment because its head-coach column runs tall. */
.tj-newclub-row-center {
	align-items: center;
}

/* The months field carries a native spinner, so its value is centred in what
   room is left rather than crowding against the arrows. */
.tj-monthsfield {
	width: 78px;
	height: 44px;
	text-align: center;
	padding-left: 8px;
	padding-right: 8px;
}

/* The revenue table's header and its rows share one column track so the
   right-aligned AI and revenue headings line up with their figures. The
   trailing column holds the row's two icon buttons (27px each, 6px apart)
   pushed to its end, so the track's spare width reads as a gutter between
   the revenue figure and the buttons; the header leaves it empty, so it is
   pinned rather than sized to content. */
.tj-revenuegrid {
	display: grid;
	/* The trailing track holds the row's three icon buttons — 27px each with
	   6px between them — so it is sized to fit them rather than letting them
	   spill back over the revenue figure. */
	grid-template-columns: 2fr 1.4fr .6fr 1fr 93px;
	gap: 16px;
}

/* The coupon table's header and rows share one column track, so every
   heading sits over its own column. The trailing column holds the row's
   Revoke pill; the header leaves it empty, so it is pinned to the pill's
   width rather than collapsing and dragging the headings out of line. */
.tj-coupongrid {
	display: grid;
	grid-template-columns: 1.5fr .9fr .6fr .55fr .8fr 1.2fr 1fr 74px;
	gap: 12px;
}

/* The mint row's AI switch stands clear of the months field, which ends in
   its own unit label and would otherwise crowd the switch. */
.tj-mintrow-ai {
	margin-left: 16px;
}

/* ---- Result wheel picker ---- */

/* The drum picker: rolling columns beside the hidden real input. */
.tj-wheel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface2);
	overflow: hidden;
}
.tj-wheel-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.tj-wheel-col {
	touch-action: none;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	text-align: center;
	min-width: 40px;
	/* Crop half of each neighbour row so the pill matches the button height. */
	margin: -10px 0;
	-webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
	mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.tj-wheel-row {
	height: 18px;
	line-height: 18px;
	font-size: 12px;
	color: var(--muted);
	opacity: .55;
}
.tj-wheel-cur {
	height: 24px;
	line-height: 24px;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--ink);
	opacity: 1;
}
.tj-wheel-sep {
	font-weight: 700;
	font-size: 15px;
	color: var(--muted);
}
.tj-wheel-unit {
	font-size: 12px;
	color: var(--muted);
	max-width: 90px;
}