/* Form fields, the row of quick stats above a page, the profile and friends
   lines, and the avatars. */

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

/* The calendar and the clock a date or time field carries open a picker when
   clicked, but the browser draws them with the text caret of the field around
   them, so nothing on screen says so. The hand goes on the icons themselves;
   the rest of the field keeps the caret, because there the digits are typed. */
.tj-input[type="date"]::-webkit-calendar-picker-indicator,
.tj-input[type="time"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

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

/* A row of quick stats across the top of a page. minmax(0, …) rather than a
   bare 1fr: a track's floor is otherwise the widest word the card holds, so a
   long label or a number with a unit after it pushes its own column — and the
   whole row with it — off the side of the page. */
.tj-statgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

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

/* The address a player signed in with. Long ones give way rather than push
   the card wide, because it is shown to be recognised, not read out. */
.tj-profile-email {
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The sentence under a switch saying what flipping it did. */
.tj-profile-hint {
	font-size: 12.5px;
	line-height: 1.5;
	margin: 10px 0 0;
}

.tj-profile-found {
	color: #4e8a4a;
}

/* One person on the friends page: the name, what they have earned, and the
   one or two words that act on them. */
.tj-friend-name {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tj-friend-open {
	color: inherit;
	text-decoration: none;
	display: block;
}

.tj-friend-open:hover {
	text-decoration: underline;
}

.tj-friend-sub {
	font-size: 12.5px;
	margin: 2px 0 0;
}

/* A friend's measured drills, stacked: the player shell is one column wide,
   and a card carrying two numbers and a chart has nothing to spare. */
.tj-friend-results {
	display: grid;
	gap: 12px;
}

/* Held to their own width so a long name gives way before they do. */
.tj-friend-act {
	flex: none;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

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