/**
 * The [fc_stats] page. Deliberately plain: this is a page of numbers, and a
 * number is easier to read next to a label than inside a chart.
 *
 * Colours come from the same custom properties the find page uses, so a theme
 * that has already set those gets a stats page that matches without writing
 * any more CSS.
 */

.fc-stats-page {
	--fc-radius: 6px;
	--fc-border: #d6d3cd;
	--fc-muted: #5f5b55;
	--fc-accent: #7a4f2a;
	--fc-bar: #e8e2d8;

	margin: 0 0 2rem;
}

.fc-stats-panel {
	margin: 0 0 2rem;
}

.fc-stats-panel__title {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
}

/* The answer, when the panel has one - "Tuesday" for the busiest day. Said
   before the table rather than left to be worked out from it. */
.fc-stats-panel__lead {
	margin: 0 0 0.25rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.fc-stats-panel__note {
	margin: 0 0 0.75rem;
	color: var(--fc-muted);
	font-size: 0.9375rem;
}

.fc-stats-table {
	width: 100%;
	border-collapse: collapse;
}

.fc-stats-table th {
	padding: 0.4rem 0.75rem 0.4rem 0;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.fc-stats-table__value {
	position: relative;
	width: 55%;
	padding: 0.4rem 0;
	vertical-align: middle;
}

/*
 * The bar sits behind the number rather than beside it, so a long label and a
 * big number never fight for the same room. Decorative and hidden from
 * assistive technology: the figure it is drawn from is right there.
 */
.fc-stats-bar {
	position: absolute;
	top: 50%;
	left: 0;
	height: 1.35rem;
	transform: translateY(-50%);
	border-radius: var(--fc-radius);
	background: var(--fc-bar);
}

.fc-stats-number {
	position: relative;
	padding-left: 0.5rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

@media (min-width: 40em) {
	.fc-stats-table__value {
		width: 65%;
	}
}