/* The player roster with its staff and invite sections, the measured
   results, the image slot and the club colour swatches. */

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

/* A focus used to be a measure's label, which the catalog keeps short. Now it
   can be words the assistant chose, so the column is told what to do with a
   long one: wrap inside its own track rather than widening it, and give up
   after two lines so one talkative row cannot set the height of the table. */
.tj-roster-focus {
	font-size: 13.5px;
	min-width: 0;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 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 drill library: three across, dropping to two once the sidebar
   gives way to the mobile layout. */
.tj-drillgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

/* The up-next drill card: court preview beside the details, stacking the
   preview on top once the row is too narrow for a phone. */
.tj-upnext {
	display: flex;
	gap: 26px;
	align-items: center;
}

.tj-upnext-go {
	display: grid;
	place-items: center;
}

.tj-upnext-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

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

/* Getting the invite somewhere else. A row under the code, wrapping on a phone
   where three controls will not sit on one line. */
.tj-invitecard-acts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 10px;
}

/* Said in the button itself, since the card has nowhere else to say it. */
.tj-invitecard-acts [data-share-said='copied'] {
	border-color: var(--accent);
	color: var(--accent);
}

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

/* A card with nowhere to tap through to does not rise to meet the pointer. */
.tj-resultcard-plain:hover {
	transform: none;
	box-shadow: none;
}

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

/* The reader's own best, beside the card owner's. Same size, so the two read
   as one comparison; quieter colour, because the card is not the reader's. */
.tj-resultcard-mine {
	flex: none;
}

.tj-resultcard-yours {
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	color: var(--muted);
	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;
}

/* What an empty slot says instead of showing a picture. The frame centres it
   and clips whatever leaves the circle, so the words are held well inside the
   curve and kept small enough to wrap there: a 96px slot leaves about seventy
   for text, which is roughly the widest line its circle can carry.

   The lines are balanced rather than filled. A circle makes a full line over a
   leftover word read as if it had slipped off centre, even when the block is
   centred to the pixel — evening the lines is what makes it look centred. */
.tj-imageslot-label {
	padding: 0 12px;
	text-align: center;
	text-wrap: balance;
	font-size: 11px;
	line-height: 1.3;
	color: var(--muted);
}

.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-link {
	font-size: 11px;
	color: var(--muted);
	word-break: break-all;
	text-align: center;
}