/*
 * rewriter.io — readable presentation for managed posts.
 *
 * Scoped to `.rewriter-content` (only added around rewriter-managed post bodies).
 * The wrapper max-width gives a readable reading column on themes that render
 * content full-width; inner rules use :where() (zero specificity) so the active
 * theme still wins on fonts, colours and any tighter constraint.
 */

.rewriter-content {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

/* Fit images/figures to the column (neutralises full-size width/height attrs). */
.rewriter-content :where(img) {
	max-width: 100%;
	height: auto;
}

.rewriter-content :where(figure) {
	margin: 1.5em auto;
}

.rewriter-content :where(figure img) {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Keep generated comparison/spec tables readable on narrow themes. */
.rewriter-content :where(table) {
	width: 100%;
	max-width: 100%;
	margin: 1.5em 0;
	border-collapse: collapse;
	font-size: 0.95em;
	line-height: 1.45;
}

.rewriter-content :where(th, td) {
	border: 1px solid #d8d8d8;
	padding: 0.55em 0.75em;
	text-align: left;
	vertical-align: top;
}

.rewriter-content :where(th) {
	background: #f5f5f5;
	font-weight: 700;
}

/* Gentle vertical rhythm as a fallback — theme typography overrides it. */
.rewriter-content :where(p, ul, ol) {
	margin-bottom: 1.25em;
	line-height: 1.7;
}

.rewriter-content :where(h2, h3) {
	margin-top: 1.6em;
	margin-bottom: 0.6em;
	line-height: 1.25;
}

@media (max-width: 760px) {
	.rewriter-content :where(table) {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}