/**
 * Styling for what the writer produces, and only for that.
 *
 * Loaded on a post that actually contains one of these blocks, so an article
 * without a table or a diagram costs nothing. The rules are deliberately
 * theme-agnostic: a generated table has to look right on whatever template the
 * site is using this month, and it cannot rely on the theme having opinions
 * about `thead`.
 */

.lf-table-wrap {
	/* Five columns of Persian on a phone is wider than the phone. Scrolling the
	   table is the honest answer; squeezing the columns until the words break
	   one letter per line is not. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.6em 0;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	background: #fff;
}

.lf-table-wrap > table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	margin: 0;
	font-size: 0.95em;
	line-height: 1.9;
}

.lf-table-wrap thead th {
	background: #f6f7f8;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
	border-bottom: 2px solid #d9dce0;
}

.lf-table-wrap th,
.lf-table-wrap td {
	padding: 0.7em 0.9em;
	border-bottom: 1px solid #eceef0;
	vertical-align: top;
	text-align: right;
}

.lf-table-wrap tbody tr:nth-child(even) {
	background: #fafbfc;
}

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

/* Numbers read wrong when a right-to-left paragraph wraps around them, and a
   schedule table is mostly numbers. */
.lf-table-wrap td:not(:last-child) {
	white-space: nowrap;
}

.lf-diagram,
.lf-inline-image {
	margin: 1.8em 0;
	text-align: center;
}

.lf-diagram svg {
	max-width: 100%;
	height: auto;
}

.lf-inline-image img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.lf-diagram figcaption,
.lf-inline-image figcaption {
	margin-top: 0.6em;
	font-size: 0.88em;
	color: #6b7177;
}

@media (max-width: 600px) {
	.lf-table-wrap > table {
		font-size: 0.88em;
	}

	.lf-table-wrap th,
	.lf-table-wrap td {
		padding: 0.55em 0.7em;
	}
}