/* The toggle switch, the players on a live session, the result wheel and
   the stopwatch a timed drill is attempted on. */

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

/* ---- The players on a live session ----

   One person to a row: who they are on the left, what the coach reaches for on
   the right. The two halves hold together, so where the pair will not fit the
   page's width — and a timed block, whose stopwatch stands in front of the
   wheel, never does — the controls drop to a second line whole instead of
   shedding the last button off the end of the first. That leaves the name
   reading as the heading of its own controls, which is what the rule between
   rows is for: a second line has to stay with the player it belongs to. */
.tj-live-player {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.tj-live-player + .tj-live-player {
	border-top: 1px solid var(--line);
	padding-top: 12px;
}

.tj-live-who,
.tj-live-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Pushed to the far edge, which is where they stay once wrapped: the presence
   chip ends every row at the same margin, so presence reads down a column. */
.tj-live-controls {
	margin-left: auto;
	justify-content: flex-end;
}

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

/* The drum picker: rolling columns beside the hidden real input. */
/* What a drum wheel stands: its cropped column plus its own border. Held here
   rather than left to fall out of the row heights, so that a control standing
   beside one can be told to match it — see .tj-wheel-match. */
:root {
	--wheel-height: 42px;
}

.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;
	box-sizing: border-box;
	min-height: var(--wheel-height);
}

/* A button that shares a line with a wheel. Their own padding leaves them a
   good deal shorter, and a row of three different heights reads as a mistake
   where every one of them is a thing to press. */
.tj-wheel-match {
	box-sizing: border-box;
	min-height: var(--wheel-height);
}

/* ---- The stopwatch a timed drill is attempted on ----

   The running clock and its attempts, standing beside the wheel the chosen
   attempt is loaded into. It wraps onto its own line on a narrow screen, where
   the row it shares is already full. */
.tj-stopwatch {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.tj-sw-controls {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.tj-sw-toggle {
	box-sizing: border-box;
	min-height: var(--wheel-height);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	padding: 7px 16px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
}

.tj-sw-clock {
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* Running reads as running: the ball colour is what the live page already
   uses for the thing happening right now. */
.tj-sw-toggle.tj-sw-running {
	background: var(--ball);
	color: var(--on-ball);
	border-color: transparent;
}

.tj-sw-reset {
	box-sizing: border-box;
	min-height: var(--wheel-height);
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: none;
	color: var(--muted);
	padding: 7px 12px;
	font-size: 14px;
	text-decoration: none;
}

.tj-sw-attempts {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.tj-sw-attempt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface2);
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tj-sw-attempt.tj-sw-best {
	background: var(--ball);
	border-color: transparent;
}

.tj-sw-use {
	color: var(--ink);
	text-decoration: none;
}

.tj-sw-attempt.tj-sw-best .tj-sw-use,
.tj-sw-attempt.tj-sw-best .tj-sw-drop {
	color: var(--on-ball);
}

.tj-sw-drop {
	color: var(--muted);
	opacity: .6;
	font-size: 11px;
	text-decoration: none;
}

.tj-sw-drop:hover {
	opacity: 1;
}

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

/* The same wheel where a row already frames it — the block list in the session
   builder. The pill would draw a second border inside the block's own card, so
   it goes, and the chosen number takes the row's display size. The neighbours
   stay small: they are what can be rolled to, not what is set. */
.tj-wheel-bare {
	display: flex;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
}
.tj-wheel-bare .tj-wheel-col {
	margin: -4px 0;
	min-width: 44px;
}
.tj-wheel-bare .tj-wheel-cur {
	height: 30px;
	line-height: 30px;
	font-size: 24px;
}

/* ---- The chrome the two live pages share ----

   A coach drives the session and a player follows it, but both read the same
   hour off the same furniture: a status pill, a bar of blocks and the dark
   card the block on court stands on. The markup for those lives in
   liveStatusPill, liveSegments and liveBlockCard beside this sheet, and what
   they look like lives here — a segment's colour says whether its block has
   run, and that is a decision about meaning, not something to spell out in an
   expression at each call site.
 */

/* ---- The bar of blocks a session is made of ----

   One segment to a block, each grown to the minutes it is booked for, so the
   bar reads as the shape of the hour rather than as a count. */
.tj-liveseg {
	flex-basis: 0;
	height: 6px;
	border-radius: 99px;
	transition: background .4s;
}

/* Run already — the accent every page uses for something finished. */
.tj-liveseg-past {
	background: var(--accent);
}

/* On court right now: the ball colour, which is what the live pages give to
   the thing happening at this moment. */
.tj-liveseg-now {
	background: var(--ball);
}

/* Still to come, so it is only a place on the bar. */
.tj-liveseg-future {
	background: var(--surface2);
}

/* ---- The dark card the block on court is read off ----

   Dark because it is the one thing in the room to look at. The coach's is the
   roomier of the two and stands clear of the players below it; the player's is
   compact and sits flush against their own controls, which follow immediately
   under it on a phone. */
.tj-live-card {
	background: var(--ink);
	color: var(--bg);
	border-radius: 20px;
	padding: 24px 26px;
	box-shadow: var(--shadow);
	margin-bottom: 16px;
}

.tj-live-card.tj-live-compact {
	padding: 22px 24px;
	margin-bottom: 0;
}

/* The card's own ink, on the small print it sets above and below the clock. */
.tj-live-kicker {
	color: inherit;
	opacity: .65;
}

.tj-live-name {
	font-size: 32px;
	margin-top: 6px;
}

.tj-live-compact .tj-live-name {
	font-size: 30px;
}

/* The clock. Tabular figures, or the whole line shifts sideways every second
   as the digits change width. */
.tj-live-clock {
	font-size: 84px;
	margin: 16px 0 4px;
	font-variant-numeric: tabular-nums;
}

.tj-live-compact .tj-live-clock {
	font-size: 76px;
	margin: 14px 0 4px;
}

/* What comes after this block, ruled off below the clock. */
.tj-live-next {
	border-top: 1px solid rgba(128, 128, 128, .35);
	margin-top: 18px;
	padding-top: 13px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.tj-live-compact .tj-live-next {
	margin-top: 16px;
	padding-top: 12px;
}

.tj-live-next-name {
	font-size: 14px;
	font-weight: 600;
}