/**
 * Article layout — single error guide and (next) single blog post.
 *
 * One narrow reading column. The measure is the point: ~68 characters is where long-form technical
 * prose stays readable, and a wider column makes someone following numbered steps lose their place
 * on the return sweep. Everything else here serves that column.
 *
 * Typography comes from cvg-type.css; nothing sets a font-family again.
 */

.cvg-article {
	/* --measure is the one number to change if the column ever feels wrong. */
	--measure: 44rem;          /* ~704px */
	--gutter: 20px;
	padding: 28px 0 64px;
}

.cvg-article__shell {
	max-width: var(--measure);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Media and code may break out slightly wider than the text, so a screenshot is legible without
 * making the prose harder to read. */
.cvg-article__figure,
.cvg-prose > pre,
.cvg-article-ad {
	margin-left: calc( var(--gutter) * -0.5 );
	margin-right: calc( var(--gutter) * -0.5 );
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */

.cvg-crumbs {
	font-size: var(--cvg-text-xs);
	color: var(--cvg-ink-muted);
	margin-bottom: 18px;
}
.cvg-crumbs a { color: var(--cvg-ink-muted); text-decoration: none; }
.cvg-crumbs a:hover { color: var(--cvg-accent); text-decoration: underline; }
.cvg-crumbs__sep { margin: 0 6px; opacity: .5; }

/* ── Head ───────────────────────────────────────────────────────────────────── */

.cvg-article__head { margin-bottom: 20px; }

.cvg-article__title {
	margin: 12px 0 14px;
	/* Tighter than the global h1: a long error name needs to read as one block, not a stack. */
	line-height: 1.15;
	text-wrap: balance;
}

.cvg-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: var(--cvg-text-sm);
	color: var(--cvg-ink-muted);
}
.cvg-byline__author { font-weight: 600; color: var(--cvg-ink); }
.cvg-byline__sep { opacity: .5; }

/* ── Fact strip ───────────────────────────────────────────────────────────────
 *
 * Replaces the old Quick Reference sidebar. Same facts, read once, then out of the way. */
.cvg-facts {
	margin: 0 0 26px;
	padding: 14px 16px;
	background: #f7f9fb;
	border: 1px solid #e4e9ef;
	border-radius: 8px;
	display: grid;
	gap: 8px;
	font-size: var(--cvg-text-sm);
}
.cvg-facts__row { display: flex; gap: 10px; align-items: baseline; }
.cvg-facts dt {
	flex: 0 0 8.5rem;
	font-weight: 600;
	color: var(--cvg-ink-muted);
	font-size: var(--cvg-text-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.cvg-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cvg-facts code { background: #fff; border: 1px solid #e0e6ec; padding: 2px 6px; border-radius: 4px; }

@media ( max-width: 520px ) {
	.cvg-facts__row { flex-direction: column; gap: 2px; }
	.cvg-facts dt { flex: none; }
}

/* ── Figure ─────────────────────────────────────────────────────────────────── */

.cvg-article__figure { margin: 0 0 28px; }
.cvg-article__figure img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* ── Table of contents ────────────────────────────────────────────────────────
 *
 * In the flow, not floating: it is read once on arrival, and a sticky panel would compete with
 * the steps for attention on the narrow column this layout is built around. */
.cvg-toc {
	margin: 0 0 30px;
	padding: 18px 20px;
	border: 1px solid #e4e9ef;
	border-left: 4px solid var(--cvg-accent);
	border-radius: 8px;
	background: #fff;
}
.cvg-toc__title {
	margin: 0 0 10px;
	font-size: var(--cvg-text-xs) !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--cvg-ink-muted);
}
.cvg-toc__list { margin: 0; padding-left: 1.2em; }
.cvg-toc__item { margin: 5px 0; font-size: var(--cvg-text-sm); }
.cvg-toc__item--h3 { margin-left: 1em; list-style: none; }
.cvg-toc__item--h3::marker { content: none; }
.cvg-toc a { color: var(--cvg-ink); text-decoration: none; }
.cvg-toc a:hover { color: var(--cvg-accent); text-decoration: underline; }

/* Anchors must not land under the sticky header. */
:target { scroll-margin-top: 86px; }
.cvg-prose h2, .cvg-prose h3 { scroll-margin-top: 86px; }

/* ── Prose ──────────────────────────────────────────────────────────────────── */

.cvg-prose { font-size: var(--cvg-text-base); line-height: var(--cvg-leading); }
.cvg-prose > * + * { margin-top: 1.1em; }
.cvg-prose h2 { margin-top: 2em; }
.cvg-prose h3 { margin-top: 1.6em; }
.cvg-prose ul, .cvg-prose ol { padding-left: 1.4em; }
.cvg-prose li + li { margin-top: .5em; }
.cvg-prose a { color: #0b6aa2; text-decoration: underline; text-underline-offset: 2px; }
.cvg-prose img { max-width: 100%; height: auto; border-radius: 8px; }

.cvg-prose pre {
	background: #f6f8fa;
	border: 1px solid #e1e7ed;
	border-radius: 8px;
	padding: 14px 16px;
}

/* The pipeline's own section wrappers. Keeping these selectors is a contract with
 * subprojects/error-pipeline/pipeline.py — its generator emits exactly these classes. */
.cvg-prose .error-step-by-step { counter-reset: none; }
.cvg-prose .step-confirm {
	margin-top: .5em;
	padding: 8px 12px;
	background: #eef7f0;
	border-left: 3px solid #27ae60;
	border-radius: 0 4px 4px 0;
	font-size: var(--cvg-text-sm);
}
.cvg-prose .error-faq details {
	border: 1px solid #e4e9ef;
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 10px;
}
.cvg-prose .error-faq summary { cursor: pointer; font-weight: 600; }

/* ── Ads, with their space reserved before they load ────────────────────────────
 *
 * Same reasoning as the archive: an ad arriving after paint shoves the fix down the page, and
 * losing your position mid-outage is a genuinely bad experience. */
.cvg-article-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32px;
	margin-bottom: 32px;
	contain: layout;
	overflow: hidden;
}
.cvg-article-ad ins { display: block; width: 100%; }
.cvg-article-ad--top,
.cvg-article-ad--bottom { min-height: 250px; }

@media ( max-width: 781px ) {
	.cvg-article-ad--top,
	.cvg-article-ad--bottom { min-height: 280px; }
}

/* ── Author ─────────────────────────────────────────────────────────────────── */

.cvg-author {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 36px 0 0;
	padding: 20px;
	background: #f7f9fb;
	border: 1px solid #e4e9ef;
	border-radius: 10px;
}
.cvg-author__avatar { border-radius: 50%; flex-shrink: 0; }
.cvg-author__name { margin: 0 0 4px; font-family: var(--cvg-font-display); font-weight: 700; }
.cvg-author__bio { margin: 0; font-size: var(--cvg-text-sm); color: var(--cvg-ink-muted); }

/* ── Related ────────────────────────────────────────────────────────────────── */

.cvg-related { margin-top: 44px; padding-top: 28px; border-top: 1px solid #e8edf1; }
.cvg-related__title { margin: 0 0 16px; }
.cvg-related__grid { display: grid; gap: 14px; }
.cvg-related__card {
	padding: 16px;
	border: 1px solid #e4e9ef;
	border-radius: 8px;
	background: #fff;
}
.cvg-related__card h3 { margin: 8px 0 6px; font-size: 1.0625rem; }
.cvg-related__card h3 a { color: var(--cvg-ink); text-decoration: none; }
.cvg-related__card h3 a:hover { color: var(--cvg-accent); }
.cvg-related__card p { margin: 0; font-size: var(--cvg-text-sm); color: var(--cvg-ink-muted); }

.cvg-back {
	display: inline-block;
	margin-top: 32px;
	font-size: var(--cvg-text-sm);
	font-weight: 600;
	color: #0b6aa2;
	text-decoration: none;
}
.cvg-back:hover { text-decoration: underline; }

/* The newsletter block injected after the step-by-step keeps to the measure. */
#cvg-optin-wrap { margin-left: 0 !important; margin-right: 0 !important; }

/* ── Blog-post extras ─────────────────────────────────────────────────────────
 *
 * Only what a blog post has and a guide does not: a category eyebrow, tags, an author link and
 * comments. Everything structural is shared above, so the two article types cannot drift apart.
 */

.cvg-eyebrow {
	display: inline-block;
	font-family: var(--cvg-font-body);
	font-size: var(--cvg-text-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cvg-accent);
	text-decoration: none;
}
.cvg-eyebrow:hover { text-decoration: underline; }

.cvg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.cvg-tag {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid #dde3e9;
	border-radius: 14px;
	background: #fff;
	font-size: var(--cvg-text-xs);
	color: var(--cvg-ink-muted);
	text-decoration: none;
}
.cvg-tag:hover { border-color: var(--cvg-accent); color: var(--cvg-accent); }

.cvg-author__link {
	display: inline-block;
	margin-top: 8px;
	font-size: var(--cvg-text-sm);
	font-weight: 600;
	color: #0b6aa2;
	text-decoration: none;
}
.cvg-author__link:hover { text-decoration: underline; }

.cvg-comments {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid #e8edf1;
}
/* Keep Neve's comment form inside the measure rather than letting it span the old wide layout. */
.cvg-comments input[type="text"],
.cvg-comments input[type="email"],
.cvg-comments input[type="url"],
.cvg-comments textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* ── Tables ───────────────────────────────────────────────────────────────────
 *
 * These were rendering as bare columns of text — no rules, no header emphasis, nothing separating
 * one row from the next. On a comparison table that is not a cosmetic problem: the whole point is
 * reading ACROSS a row and comparing DOWN a column, and with no grid the eye cannot track either.
 *
 * The markup is plain <table><thead><th> with no classes (it comes from the post content), so
 * everything here hangs off element selectors inside .cvg-prose.
 */

/* Wrapper so a wide table scrolls instead of widening the page. Tables in post content have no
 * wrapper element of their own, so the table itself carries the scroll. */
.cvg-prose table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: var(--cvg-text-sm);
	line-height: 1.5;
	/* Hint that there is more to the right on a narrow screen. */
	background:
		linear-gradient( to right, #fff 30%, rgba( 255, 255, 255, 0 ) ),
		linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70% ) 100% 0,
		radial-gradient( farthest-side at 0 50%, rgba( 13, 36, 81, .12 ), transparent ),
		radial-gradient( farthest-side at 100% 50%, rgba( 13, 36, 81, .12 ), transparent ) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* Once there is room, behave like a normal table so the columns size themselves. */
@media ( min-width: 720px ) {
	.cvg-prose table { display: table; }
}

.cvg-prose thead th {
	position: sticky;
	top: 0;
	background: #f3f6f9;
	font-family: var(--cvg-font-display);
	font-weight: 700;
	font-size: var(--cvg-text-xs);
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--cvg-ink);
	text-align: left;
	padding: 11px 14px;
	border-bottom: 2px solid #d5dde5;
	white-space: nowrap;
}

.cvg-prose tbody td,
.cvg-prose tbody th {
	padding: 11px 14px;
	border-bottom: 1px solid #e8edf1;
	vertical-align: top;
}

/* The first column is the row label — it should read as a heading for the row, not as data. */
.cvg-prose tbody tr > :first-child {
	font-weight: 600;
	color: var(--cvg-ink);
}

/* Zebra striping, faint. On a table with many short numeric rows it is what lets the eye track
 * across without losing the line. */
.cvg-prose tbody tr:nth-child( even ) { background: #fafbfc; }
.cvg-prose tbody tr:hover { background: #f2f7fb; }
.cvg-prose tbody tr:last-child td { border-bottom: none; }

/* Authors mark the winning value with <strong>; give that real emphasis rather than just bold. */
.cvg-prose tbody td strong { color: #0b6aa2; }

.cvg-prose table code {
	white-space: nowrap;
	font-size: .92em;
}

/* Numeric columns line up on the right when the cell is plain digits — handled by a utility the
 * content can opt into, since we cannot detect it in CSS. */
.cvg-prose td.num, .cvg-prose th.num { text-align: right; font-variant-numeric: tabular-nums; }

.cvg-prose table caption {
	caption-side: bottom;
	padding-top: 8px;
	font-size: var(--cvg-text-xs);
	color: var(--cvg-ink-muted);
	text-align: left;
}

/* ── Pages ────────────────────────────────────────────────────────────────────
 *
 * About, the legal pages, Contact, Tools I Use. Same reading measure as an article, because a
 * privacy policy set across the full width is unreadable — the eye loses the line on the return
 * sweep, and these are exactly the pages people skim for one clause.
 *
 * A shortcode-built page (.cvg-page--wide) gets none of this: it renders at full width and its own
 * CSS governs. Constraining those is what made the domain generator overflow.
 */

.cvg-page { padding: 32px 0 64px; }

.cvg-page__shell {
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 20px;
}

/* A shortcode-built page often has loose prose around the shortcode — the domain generator page
 * carries ~8.8 KB of intro text before its tool. Without a container those paragraphs ran the full
 * width of the screen while the tool sat centred at 860px, which is what made the page look
 * unrelated to the rest of the site.
 *
 * Constrain the TEXT children only. Any div/section the shortcode outputs is left completely
 * alone, so a builder that wants a full-bleed band still gets one, and a builder that sets its own
 * max-width (web-design uses 1080px) is unaffected. */
.cvg-page--wide { padding: 36px 0 56px; }

.cvg-page--wide > p,
.cvg-page--wide > h1,
.cvg-page--wide > h2,
.cvg-page--wide > h3,
.cvg-page--wide > h4,
.cvg-page--wide > ul,
.cvg-page--wide > ol,
.cvg-page--wide > blockquote,
.cvg-page--wide > figure,
.cvg-page--wide > table,
.cvg-page--wide > pre {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: content-box;
}

/* Headings in that intro text keep the display font and rhythm of the rest of the site. */
.cvg-page--wide > h2 { margin-top: 1.8em; }
.cvg-page--wide > h3 { margin-top: 1.4em; }
.cvg-page--wide > p  { line-height: var(--cvg-leading); }

.cvg-page__head {
	padding-bottom: 20px;
	margin-bottom: 26px;
	border-bottom: 1px solid #e8edf1;
}

.cvg-page__title { margin: 0 0 8px; text-wrap: balance; }

.cvg-page__meta {
	margin: 0;
	font-size: var(--cvg-text-sm);
	color: var(--cvg-ink-muted);
}

/* Long legal documents are mostly headings and lists; give them room to breathe. */
.cvg-page__body h2 { margin-top: 2em; }
.cvg-page__body h3 { margin-top: 1.5em; }
.cvg-page__body ul,
.cvg-page__body ol { padding-left: 1.4em; }

/* Tables inside a page (contact details, comparison rows) inherit the article table styling. */
.cvg-page__body table { margin: 24px 0; }

/* Nothing inside a page may push the layout wider than the viewport — long unbroken URLs in a
 * privacy policy are the usual culprit. */
.cvg-page__body { overflow-wrap: anywhere; }
.cvg-page__body img,
.cvg-page__body iframe { max-width: 100%; height: auto; }