/**
 * TBS Content Lab — front-end styling for tables the plugin writes.
 *
 * Themes vary wildly in whether they style tables inside post content; many
 * style none at all, so an AI-written comparison table publishes as three
 * columns of floating text. Scoped to .tbs-cl-table so nothing else on the
 * site is touched.
 */
.tbs-cl-tablewrap {
	overflow-x: auto;              /* a wide table scrolls itself, never the page */
	-webkit-overflow-scrolling: touch;
	margin: 1.5em 0;
}

table.tbs-cl-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 30em;               /* below this, columns become unreadable */
	font-size: 0.95em;
	line-height: 1.45;
}

table.tbs-cl-table th,
table.tbs-cl-table td {
	border: 1px solid currentColor; /* follows the theme's text colour */
	border-color: color-mix(in srgb, currentColor 22%, transparent);
	padding: 0.6em 0.75em;
	text-align: left;
	vertical-align: top;
}

table.tbs-cl-table thead th {
	font-weight: 700;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

table.tbs-cl-table tbody tr:nth-child(even) td {
	background: color-mix(in srgb, currentColor 3%, transparent);
}

/* Fallback for browsers without color-mix(). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	table.tbs-cl-table th,
	table.tbs-cl-table td { border-color: rgba(128, 128, 128, 0.35); }
	table.tbs-cl-table thead th { background: rgba(128, 128, 128, 0.1); }
	table.tbs-cl-table tbody tr:nth-child(even) td { background: rgba(128, 128, 128, 0.05); }
}