/* Linking a team, what the assistant made of a player, and a player's
   results history. */

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

/* ---- What the assistant made of a player ---- */

.tj-read {
	padding: 16px 20px;
}

/* The head carries the title, and on the player's own card a focus pill
   beside it. What the read was made of goes on its own line under them, where
   a long focus phrase and a date can wrap without stretching the card. */
.tj-readhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.tj-readmeta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* The ticker, which says the assistant is at work on this player right now.
   Hidden until the card is marked busy — the server marks it when it means to
   ask, and the button's own handler marks it the moment a request leaves, so
   the wait is answered before the model is. It sits beside what is already
   there rather than over it: a re-read leaves the last one legible while it
   runs, and a read that has never been made simply has nothing under it. */
.tj-reading {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
}

.tj-read-working .tj-reading {
	display: inline-flex;
}

/* Nothing to say yet, and something already being done about it. */
.tj-read-working .tj-read-idle {
	display: none;
}

/* The wizard's spinner, sized for a line of text rather than a card. */
.tj-spin-sm {
	width: 13px;
	height: 13px;
	border-width: 2px;
}

/* A focus is a few words, but it is the model that chose them, so the pill
   is told what to do with a long one rather than letting it set the card's
   width and push the page sideways. */
.tj-read .tj-pill {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* The read itself is prose and wraps on its own; only a very long unbroken
   word could reach past the card, and one comes free with every drill name a
   coach chose to type without spaces. */
.tj-read p {
	overflow-wrap: anywhere;
}

/* What to try next, under the read it follows from. Ruled off rather than
   spaced off: these are instructions where everything above them is a verdict,
   and the line is what says so on a card the eye reads as one block. Each step
   names a drill often enough that the same unbroken-word guard applies. */
.tj-readnext {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.tj-readnext ul {
	margin: 8px 0 0;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tj-readnext li {
	font-size: 14px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* A phone gives the card back the width its prose needs. */
@media (max-width: 460px) {
	.tj-read {
		padding: 14px 16px;
	}
}

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