/* A coach's session: the assign chips, the proposed plan, the finished
   summary, the templates it is built from and the mimic banner. */

/* 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 proposal while it is being worked on. The dialog opens on the press and
   spins until there is something to read: the model takes long enough that a
   page which only greyed the button in the corner reads as one that never
   heard the press. Held apart from the plan itself, which the answer replaces
   wholesale. */
.tj-planwait {
	display: none;
	text-align: center;
	padding: 40px 14px 34px;
}

.tj-planwait .tj-spin {
	margin: 0 auto;
}

.tj-plan-busy > .tj-planwait {
	display: block;
}

.tj-plan-busy > .tj-planshown {
	display: none;
}

/* The walkthrough link on a proposed drill, held to its own line's end and
   kept on one line: the reason beside it wraps, and a link that wrapped with
   it would read as part of the sentence. */
.tj-planrow-open {
	flex: none;
	align-self: center;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* Text only a screen reader reads: the name of a control whose face is an
   icon. Clipped rather than hidden, because display:none is not announced. */
.tj-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Turning down one proposed drill: a circular arrow beside the walkthrough
   link. It changes the plan rather than leaving the page, so it sits square
   and accented where the link beside it reads as text. */
.tj-icon-btn.tj-planrow-swap {
	flex: none;
	align-self: center;
	color: var(--accent);
	border-color: var(--accent-soft);
}

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

/* What a finished session came to. It stands where the running block's card
   stood, so it keeps that card's width and its place on the page. */
.tj-summary {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 22px 24px;
	margin-bottom: 16px;
}

.tj-summary-head {
	display: flex;
	align-items: center;
	gap: 15px;
}

.tj-summary-tick {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ball);
	display: grid;
	place-items: center;
}

/* The line under the heading wraps as a whole rather than mid-fact, so the
   separators never start a line. */
.tj-summary-line {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13.5px;
	margin-top: 3px;
}

/* Two columns where there is room for them, one below the other where there
   is not: a phone reads the drills and then the readings. */
.tj-summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	border-top: 1px solid var(--line);
	padding-top: 18px;
}

@media (max-width: 620px) {
	.tj-summary-grid {
		grid-template-columns: 1fr;
	}
}

.tj-summary-row {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	padding: 7px 0;
	border-bottom: 1px solid var(--line);
}

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

.tj-summary-tint {
	flex: none;
	width: 3px;
	height: 15px;
	border-radius: 99px;
}

.tj-summary-mins {
	flex: none;
	font-size: 13px;
	opacity: .7;
}

/* The drill a reading was taken at, which gives way first when the row is
   too narrow to hold the name, the drill and the number at once. */
.tj-summary-drill {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
}

.tj-summary-none {
	font-size: 12.5px;
	line-height: 1.5;
	margin: 8px 0 0;
}

.tj-summary-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid var(--line);
	padding-top: 16px;
}

/* One proposed block in the AI plan preview: tint, minutes, name and reason. */
.tj-planrow {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 10px 13px;
	border: 1px solid var(--line);
	border-radius: 12px;
}

.tj-planrow-tint {
	flex: none;
	width: 3px;
	align-self: stretch;
	border-radius: 99px;
}

/* A minimum rather than a width: the free-play row is labelled in words
   ("rest", "resten"), and a fixed column would spill it over the name. */
.tj-planrow-mins {
	flex: none;
	min-width: 34px;
	text-align: right;
	font-size: 15px;
	color: var(--muted);
}

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