/**
 * Article tables.
 *
 * Selectors are prefixed with `.astute-table > table` so they outrank the
 * theme's own `.entry-content table` rules, which are what centre a heading
 * over left-aligned values.
 *
 * Colours are rgba greys rather than fixed values, so the same rules read
 * correctly on a light or a dark theme without knowing which is in use.
 */

.astute-table {
	margin: 1.75em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.astute-table > table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.95em;
	line-height: 1.45;
}

.astute-table > table th,
.astute-table > table td {
	padding: 0.55em 0.85em;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

/* The heading sits over its column, in the same alignment as the values. */
.astute-table > table thead th {
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid rgba(128, 128, 128, 0.45);
}

.astute-table > table tbody tr:nth-child(even) {
	background: rgba(128, 128, 128, 0.06);
}

.astute-table > table tbody tr:last-child th,
.astute-table > table tbody tr:last-child td {
	border-bottom: 0;
}

/* Columns of figures: right-aligned so digits line up, and never wrapped. */
.astute-table > table th.astute-num,
.astute-table > table td.astute-num {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The first column labels the row, so it carries a little more weight. */
.astute-table > table tbody th:first-child,
.astute-table > table tbody td:first-child {
	font-weight: 500;
}

.astute-table > table caption {
	caption-side: bottom;
	padding-top: 0.6em;
	font-size: 0.85em;
	opacity: 0.75;
	text-align: left;
}

/* Narrow screens: the table scrolls inside its own box instead of stretching
   the article, and cells give back some padding. */
@media (max-width: 600px) {
	.astute-table > table {
		font-size: 0.875em;
	}

	.astute-table > table th,
	.astute-table > table td {
		padding: 0.45em 0.6em;
	}
}