/* ============================================================================
   Terawatt 4.0 — Dark-mode override for the v3 single-2026.css single-post
   stylesheet. Loaded after single-2026.css; flips its hardcoded light-theme
   colours (--c-ink text on --c-paper bg + --c-white sidebar cards) to the
   v4 dark palette tokens (--tw-fg on --tw-bg). Also bumps the article-grid
   max-width to 1400px so it lines up with the rest of the v4 chrome.
   ============================================================================ */

/* ---- Container width: match the rest of v4 (1400px) ------------------------ */
.tw-article-grid {
	max-width: 1400px;
}
.tw-hero-media,
.tw-next-steps__inner {
	max-width: 1400px;
}
.tw-article-header {
	max-width: 1400px;
}

/* Article body — let prose read on dark page. */
.tw-article-body,
.tw-article-body p,
.tw-article-body strong,
.tw-article-body em,
.tw-article-body li,
.tw-article-body blockquote {
	color: var(--tw-fg);
}
.tw-article-body p.tw-lead { color: var(--tw-fg); }
.tw-article-body a { color: var(--tw-mark); }
.tw-article-body a:hover { color: var(--tw-fg); }
.tw-article-body h2,
.tw-article-body h3,
.tw-article-body h4 {
	color: var(--tw-fg);
}
.tw-article-body code,
.tw-article-body pre {
	background: rgba(244,241,236,0.06);
	color: var(--tw-fg);
	border: 1px solid var(--tw-line);
}
.tw-article-body hr {
	border-color: var(--tw-line);
}

/* Breadcrumb + header chrome --------------------------------------------- */
.tw-breadcrumb a { color: var(--tw-slogan-fg); }
.tw-breadcrumb a:hover { color: var(--tw-fg); }
.tw-breadcrumb li::after { color: var(--tw-slogan-fg); opacity: 0.6; }

.tw-article-header h1 { color: var(--tw-fg); }
.tw-article-lead { color: var(--tw-slogan-fg); }

.tw-byline-row {
	border-top: 1px solid var(--tw-line);
	border-bottom: 1px solid var(--tw-line);
}
.tw-byline-row__name { color: var(--tw-fg); }
.tw-byline-row__role,
.tw-byline-row__meta { color: var(--tw-slogan-fg); }

/* TOC sidebar (left) ----------------------------------------------------- */
.tw-toc h6 {
	color: var(--tw-slogan-fg);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 11px;
	margin: 0 0 12px;
	font-family: var(--tw-font-mono);
}
.tw-toc ol { border-left: 1px solid var(--tw-line); }
.tw-toc a { color: var(--tw-slogan-fg); }
.tw-toc a:hover { color: var(--tw-fg); }
.tw-toc a.is-active {
	color: var(--tw-mark);
	border-left-color: var(--tw-mark);
}

/* Right sidebar widgets — dark cards on dark page ------------------------ */
.tw-sidebar-author,
.tw-lead-magnet,
.tw-consult-cta,
.tw-related-posts {
	background: rgba(244, 241, 236, 0.04);
	border: 1px solid var(--tw-line);
	border-radius: 6px;
	color: var(--tw-fg);
	padding: 18px;
}
.tw-sidebar-author__name { color: var(--tw-fg); }
.tw-sidebar-author__role { color: var(--tw-slogan-fg); }

.tw-lead-magnet .eyebrow,
.tw-consult-cta .eyebrow {
	color: var(--tw-mark);
}
.tw-lead-magnet h4,
.tw-consult-cta h4 {
	color: var(--tw-fg);
	margin: 6px 0 8px;
}
.tw-lead-magnet p,
.tw-consult-cta p {
	color: var(--tw-slogan-fg);
	font-size: 14px;
	margin: 0 0 14px;
}

/* Lead-magnet form fields ----------------------------------------------- */
.tw-field { margin-bottom: 10px; }
.tw-field label {
	display: block;
	color: var(--tw-slogan-fg);
	font-family: var(--tw-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.tw-field input {
	width: 100%;
	background: rgba(0,0,0,0.18);
	border: 1px solid var(--tw-line);
	color: var(--tw-fg);
	padding: 9px 12px;
	border-radius: 4px;
	font-family: var(--tw-font-body);
	font-size: 14px;
}
.tw-field input:focus {
	outline: none;
	border-color: var(--tw-mark);
}
.tw-lead-magnet button[type="submit"] {
	background: var(--tw-mark);
	color: #0F1115;
	border: none;
	padding: 10px 14px;
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	border-radius: 4px;
	width: 100%;
	margin-top: 6px;
}
.tw-lead-magnet button[type="submit"]:hover { filter: brightness(1.08); }

.tw-consult-cta a {
	color: var(--tw-mark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	display: inline-block;
	margin-top: 6px;
}
.tw-consult-cta a:hover { color: var(--tw-fg); }

/* Related posts in sidebar */
.tw-related-posts h5 {
	color: var(--tw-fg);
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.tw-related-posts ul { list-style: none; padding: 0; margin: 0; }
.tw-related-posts li {
	padding: 10px 0;
	border-top: 1px solid var(--tw-line);
}
.tw-related-posts li:first-child { border-top: none; padding-top: 0; }
.tw-related-posts a {
	color: var(--tw-fg);
	text-decoration: none;
	display: block;
	font-size: 14px;
	line-height: 1.4;
}
.tw-related-posts a:hover { color: var(--tw-mark); }
.tw-related-posts time {
	color: var(--tw-slogan-fg);
	font-family: var(--tw-font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: block;
	margin-top: 3px;
}

/* TL;DR + key takeaways callouts ---------------------------------------- */
.tw-tldr,
.tw-key-takeaways {
	background: rgba(244,241,236,0.04);
	border: 1px solid var(--tw-line);
	border-left: 3px solid var(--tw-mark);
	color: var(--tw-fg);
	border-radius: 4px;
	padding: 20px 24px;
	margin: 28px 0;
}
.tw-tldr .eyebrow,
.tw-key-takeaways .eyebrow {
	color: var(--tw-mark);
}
.tw-tldr p,
.tw-key-takeaways li { color: var(--tw-fg); }

/* Author block at end of prose ------------------------------------------ */
.tw-author-block {
	background: rgba(244,241,236,0.03);
	border: 1px solid var(--tw-line);
	border-radius: 6px;
	padding: 24px;
	margin-top: 56px;
}
.tw-author-block__name { color: var(--tw-fg); }
.tw-author-block__role { color: var(--tw-slogan-fg); }
.tw-author-block__bio { color: var(--tw-slogan-fg); }
.tw-author-block__links a { color: var(--tw-mark); }

/* Next-steps banner at the foot ----------------------------------------- */
.tw-next-steps {
	background: rgba(244,241,236,0.04);
	border-top: 1px solid var(--tw-line);
	border-bottom: 1px solid var(--tw-line);
	color: var(--tw-fg);
	padding: 56px 0;
	margin-top: 64px;
}
.tw-next-steps__inner {
	margin: 0 auto;
	padding: 0 var(--tw-gutter, 32px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
}
.tw-next-steps__inner .eyebrow { color: var(--tw-mark); }
.tw-next-steps__inner h2 { color: var(--tw-fg); margin: 8px 0 12px; }
.tw-next-steps__inner p { color: var(--tw-slogan-fg); margin: 0 0 16px; }
.tw-cta-link {
	color: var(--tw-mark);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.tw-cta-link:hover { color: var(--tw-fg); }

/* FAQ accordion --------------------------------------------------------- */
.tw-faq details {
	background: rgba(244,241,236,0.04);
	border: 1px solid var(--tw-line);
	border-radius: 4px;
	padding: 14px 18px;
	margin-bottom: 8px;
}
.tw-faq summary { color: var(--tw-fg); cursor: pointer; }
.tw-faq p { color: var(--tw-slogan-fg); }

/* Hero media frame on dark ---------------------------------------------- */
.tw-hero-media__frame {
	border: 1px solid var(--tw-line);
	border-radius: 6px;
	overflow: hidden;
}

/* Reading-progress bar -------------------------------------------------- */
.read-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: rgba(244,241,236,0.04);
	z-index: 80;
}
.read-progress__bar {
	height: 100%;
	background: var(--tw-mark);
	width: 0;
}

/* Mobile sticky pill ---------------------------------------------------- */
.tw-mobile-pill {
	display: none;
}

/* Tables in prose (Allen's blog posts use tables for spec tables) ------- */
.tw-article-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 14px;
}
.tw-article-body th,
.tw-article-body td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--tw-line);
	text-align: left;
	color: var(--tw-fg);
}
.tw-article-body th {
	font-family: var(--tw-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tw-slogan-fg);
	font-weight: 600;
}

/* Lists --------------------------------------------------------------- */
.tw-article-body ul,
.tw-article-body ol {
	color: var(--tw-fg);
	padding-left: 22px;
	margin: 14px 0 22px;
}
.tw-article-body li { margin: 6px 0; }

/* Single-case body — same dark treatment + dim the legacy white card behind it */
.tw-single-case .tw-article-body { background: transparent; }

/* Base .eyebrow rule — single-2026.css references .eyebrow throughout but
   never defines a base. v4's design system class is .tw-eyebrow; this mirrors
   its styling onto the bare .eyebrow class used by tw-article-header,
   tw-sidebar widgets, tw-next-steps, etc. */
.tw-single-post .eyebrow,
.tw-single-case .eyebrow,
.tw-sidebar .eyebrow,
.tw-next-steps .eyebrow,
.tw-tldr .eyebrow,
.tw-key-takeaways .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tw-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tw-slogan-fg);
	line-height: 1;
}
.tw-single-post .eyebrow::before,
.tw-single-case .eyebrow::before,
.tw-sidebar .eyebrow::before,
.tw-next-steps .eyebrow::before,
.tw-tldr .eyebrow::before,
.tw-key-takeaways .eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tw-mark);
	flex-shrink: 0;
}
/* tw-article-header eyebrow specifically */
.tw-article-header .eyebrow { margin-bottom: 14px; }