.auth {
	display: grid;
	align-items: baseline;
	grid-template-columns: repeat(12, 1fr);
	gap: 1em;
	font-family: var(--font-narrow);
	accent-color: var(--color-primary);

	& input {
		grid-column: span 10;
		font-size: 2em;
		background-color: var(--color-lighter);
		color: var(--color-black);
		padding: 0 0.5rem;
		border-width: 0 0 1px;
		border-color: var(--color-grayish);
		border-radius: 0;
		max-width: unset;

		&:hover {
			border-color: var(--color-gray);
		}

		&:focus-visible {
			outline: none;
			border-bottom-color: var(--color-primary);
		}

		&::placeholder {
			color: var(--color-grayish);
		}
	}

	& button {
		padding-block: calc(0.15em + 1px)
	}

	& .not-playing {
		text-decoration-style: dashed;
		display: block;

		&.active::after {
			content: ' ✔'
		}
	}
}

.stats {
	position: relative;
	font-family: var(--font-narrow);
	accent-color: var(--color-primary);

	& .tab-buttons {
		display: flex;
		gap: 0.5em;
	}

	& .tab-content {
		display: none;

		&.active {
			display: block;
		}
	}

	& .controls {
		margin-block: 0.5em 1.5em;

		& .controls-row {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			align-items: baseline;
			gap: 1em;
			margin-bottom: 1em;

			&:not(:has(.controls-title)) > * {
				grid-column: 3 / -1;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		& .controls-title {
			font-weight: 600;
			margin: 0;
			font-size: 1em;
			flex-shrink: 0;
			grid-column: span 2;

			& + * {
				grid-column: 3 / -1;
			}
		}

		& .categories {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5em;

			& .category-group {
				display: flex;
				flex-wrap: wrap;
				gap: 0.5em;
			}

			& label {
				& input {
					display: none;
				}
			}
		}

		& .contribution-format {
			display: flex;
			gap: 1em;

			& label {
				display: flex;
				align-items: center;
				gap: 0.5em;
				font-size: 0.9em;
				cursor: pointer;
			}
		}

		& .show-leaders {
			display: flex;
			align-items: center;
			gap: 0.5em;
			cursor: pointer;

			& input {
				font-size: 1em;
				height: 0.8em;
				aspect-ratio: 1/1;
			}
		}
	}

	& .table-container {
		margin-left: calc((var(--page-padding) + var(--table-horizontal-cell-padding) * 0.9) * -1);
    	margin-right: calc(var(--page-padding) * -1);
	}

	& .stats-table {
		padding-left: var(--page-padding);
		width: auto;
		font-size: 0.9em;
		line-height: 1rem;
		font-variant-numeric: tabular-nums;

		& .col-player, &:has(.col-player) tr > td:last-child {
			border-left: 1px solid var(--color-light);
		}
		&.hide-contribution .col-player {
			display: none;
		}

		& tbody {
			opacity: 1;
			transition: opacity 0.2s ease-out;

			&.loading {
				opacity: 0.3;
				transition: none;
				animation: loading 0.3s ease-in-out infinite alternate;
				filter: blur(5px);
				cursor: wait;

				& tr:hover {
					background-color: unset;
					backdrop-filter: none;
				}
			}
		}

		& th {
			white-space: nowrap;
			
			&[data-sort] {
				user-select: none;
				cursor: pointer;
				&:hover {
					color: var(--color-primary);
				}
			}
		}

		& .col-item {
			width: 9em;
			white-space: normal;
		}

		& .col-count {
			text-align: right;
		}

		& .is-leader {
			color: var(--color-primary-dark);
			position: relative;
			
			&::after {
				position: absolute;
        		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23db7422' d='M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z'/%3E%3C/svg%3E");
				width: 0.7rem;
				left: 0.4em;
				top: -0.4em;
			}
		}

		& .leader-col {
			display: none;

			&.visible {
				display: table-cell;
			}
		}
	}

	& .chart {
		display: inline-block;
		vertical-align: baseline;
	}

	& .bar-container {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		vertical-align: baseline;
	}

	& .bar {
		&.leader {
			fill: var(--color-primary-light);
		}

		&.player {
			fill: var(--color-primary);
		}

		&.server {
			fill: var(--color-gray);
		}
	}

	& .contribution {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
	}

	& .leader-name {
		width: 8em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		vertical-align: baseline;
	}

	& .percent {
		width: 6ch;
		text-align: right;
	}

	& .numbers-format .bar-container .percent {
		width: 8ch;
	}

	& .hanging-pct {
		margin-left: -0.4ch;
	}

	& .season-empty {
		color: var(--color-grayish);
	}

	& .records-table .col-count {
		text-align: left;
	}
}

@media screen and (width <= 900px) {
	.stats {
		& .table-container {
			overflow-x: auto;
		}
		& .col-item {
			position: sticky;
			left: calc(var(--table-horizontal-cell-padding) * -1.3);
			background-image: linear-gradient(to right, var(--color-white) calc(100% - 1px - var(--table-horizontal-cell-padding)), transparent);
		}
		@media screen and (prefers-color-scheme: dark) {
			& .col-item {
				background-image: linear-gradient(to right, var(--color-lighter) calc(100% - 1px - var(--table-horizontal-cell-padding)), transparent);
			}
		}
	}
}

@media screen and (width <= 600px) {
	.auth {
		grid-template-columns: 1fr;
		gap: 0.5em;
		margin-bottom: 1em;

		& input {
			grid-column: 1;
			font-size: 1.5em;
		}

		& button {
			grid-column: 1;
		}

		& .not-playing {
			grid-column: 1;
		}
	}

	.stats {
		font-size: 16px;
		& .controls {
			& .controls-row {
				display: grid;
				grid-template-columns: 1fr;
				gap: 0.25em;

				& > * {
					grid-column: 1;
				}
			}
		}
		& .stats-table {
			font-size: 14px;
			line-height: 1;
		}
	}
}

@keyframes loading {
	from { opacity: 0.2; }
	to { opacity: 0.4; }
}