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

/* ⚠️ `width: max-content` است نه `100%`، و این تفاوت کل ماجراست.
   با عرض ۱۰۰٪ جدول به اندازه‌ی ظرفش جمع می‌شود و ستون‌ها له می‌شوند — یعنی
   نوار اسکرول بالای این بلوک هیچ‌وقت چیزی برای اسکرول‌کردن نداشت. حالا جدول
   به اندازه‌ی محتوایش پهن می‌شود و اگر از ظرف بیرون زد، ظرف اسکرول می‌خورد.
   `min-width: 100%` هم می‌ماند تا جدول کم‌ستون هنوز کل عرض را پر کند. */
.lf-table-wrap > table {
	width: max-content;
	min-width: 100%;
	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;
	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;
	min-width: 7rem;
	max-width: 22rem;
	overflow-wrap: break-word;
	word-break: normal;
}

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

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