/*
 * Insights article template styles.
 * Loaded only on single posts (see functions.php). Reuses the parent
 * theme's tokens (cream #FAF1DF, ink #161616, ink2 #2D2D2D, stone
 * #CCC5B6, accent #FF6433) so nothing here introduces a second palette.
 */

/* ============ Reading progress bar ============ */
.reading-progress {
	position: fixed;
	top: 80px; /* matches header's h-20 */
	left: 0;
	right: 0;
	height: 4px;
	background: rgba(22, 22, 22, 0.15);
	z-index: 999;
}
@media (min-width: 768px) {
	.reading-progress { top: 96px; } /* matches header's md:h-24 */
}
.reading-progress-bar {
	height: 100%;
	width: 0%;
	background: #FF6433;
	box-shadow: 0 0 8px rgba(255, 100, 51, 0.55);
}
@media (prefers-reduced-motion: reduce) {
	.reading-progress-bar { transition: none; }
}

/* ============ Byline, sits inside the dark page-header band ============ */
.article-byline {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(250, 241, 223, 0.18);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
}
.article-byline-who {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
.article-avatar {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba(250, 241, 223, 0.25);
}
/* .ai-bg (parent theme) is designed as a full-bleed absolutely positioned
   background layer and carries position: absolute; inset: 0. Reusing it
   here for the small circular avatar needs that neutralized, or the
   avatar pulls out of the flex row entirely and overlaps the name/role
   text next to it. Two classes combined gives this higher specificity
   than .ai-bg alone, so it wins regardless of stylesheet load order. */
.article-avatar.ai-bg {
	position: relative;
	inset: auto;
}
.article-avatar-lg {
	width: 64px;
	height: 64px;
}
.article-byline-name {
	font-weight: 700;
	color: #FAF1DF;
	font-size: 0.95rem;
}
.article-byline-role {
	font-size: 0.82rem;
	color: #CCC5B6;
	margin-top: 2px;
}
.article-byline-meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: #CCC5B6;
	font-variant-numeric: tabular-nums;
}

/* ============ Reader dark/light toggle ============ */
.reader-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: 0.5rem;
	padding: 0.5rem 0.9rem;
	min-height: 40px;
	border-radius: 999px;
	border: 1px solid rgba(250, 241, 223, 0.3);
	background: rgba(250, 241, 223, 0.08);
	color: #FAF1DF;
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.reader-theme-toggle:hover {
	border-color: #FF6433;
}
.reader-theme-toggle-icon {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: currentColor;
	display: inline-block;
}
.reader-theme-toggle[aria-pressed="true"] .reader-theme-toggle-icon {
	background: #FF6433;
}

/* ============ Reader scope: everything the dark/light toggle affects ============ */
.article-reader-scope {
	--reader-bg: #FAF1DF;
	--reader-surface: #FFFFFF;
	--reader-text: #161616;
	--reader-text-muted: #2D2D2D;
	--reader-text-soft: #6B655A;
	--reader-border: rgba(22, 22, 22, 0.12);
	--reader-accent: #FF6433;

	background: var(--reader-bg);
	color: var(--reader-text);

	/* No transition on background/color here on purpose: with the theme
	   swap driven by var(--reader-bg)/var(--reader-text) reacting to the
	   [data-reader-theme="dark"] attribute selector, transitioning those
	   properties froze the computed values at whatever they were on first
	   paint (reproduced live: attribute correctly set, CSS variables
	   correctly recomputed, but backgroundColor/color stayed stuck until
	   transition was set to none). Net effect was the dark reader theme
	   silently never rendering, cream text on cream background for any
	   visitor whose system defaults to dark. The swap is instant now
	   instead of animated, which is the safe tradeoff.

	   New block formatting context, so the first child's margin-top
	   (.article-layout's mt-14) can't collapse through this element and
	   push its own background down, leaking the page's cream body
	   background through as a sliver above it. */
	display: flow-root;
}
.article-reader-scope[data-reader-theme="dark"] {
	--reader-bg: #161616;
	--reader-surface: #1f1f1d;
	--reader-text: #FAF1DF;
	--reader-text-muted: #CCC5B6;
	--reader-text-soft: #a39c8d;
	--reader-border: rgba(250, 241, 223, 0.14);
}
@media (prefers-reduced-motion: reduce) {
	.article-reader-scope { transition: none; }
}

/* ============ Article layout: table of contents + content ============ */
.article-layout {
	display: grid;
	gap: 2.5rem;
	padding-bottom: 1rem;
}
@media (min-width: 1024px) {
	.article-layout {
		grid-template-columns: 220px 1fr;
		gap: 3.5rem;
		align-items: start;
	}
}

.article-toc-wrap {
	position: static;
}
@media (min-width: 1024px) {
	.article-toc-wrap {
		position: sticky;
		top: 120px;
	}
}
.article-toc {
	border: 1px solid var(--reader-border);
	border-radius: 1rem;
	padding: 1.1rem 1.25rem;
}
.article-toc-summary {
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--reader-accent);
}
.article-toc-summary::-webkit-details-marker {
	color: var(--reader-accent);
}
.article-toc-list {
	list-style: none;
	margin: 0.9rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.article-toc-item a {
	display: block;
	font-size: 0.88rem;
	color: var(--reader-text-muted);
	border-left: 2px solid transparent;
	padding-left: 0.7rem;
	line-height: 1.4;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.article-toc-item a:hover {
	color: var(--reader-text);
}
.article-toc-item a[aria-current="true"] {
	color: var(--reader-accent);
	border-left-color: var(--reader-accent);
	font-weight: 600;
}
.article-toc-level-3 a {
	padding-left: 1.4rem;
	font-size: 0.82rem;
}

/* ============ Article body typography ============ */
.prose-article {
	max-width: 68ch;
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--reader-text);
}
.prose-article > * + * {
	margin-top: 1.4em;
}
.prose-article h2 {
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.3;
	margin-top: 2.4em;
	scroll-margin-top: 120px;
}
.prose-article h3 {
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.35;
	margin-top: 2em;
	scroll-margin-top: 120px;
}
.prose-article p {
	margin: 0;
}
.prose-article a {
	color: var(--reader-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.prose-article ul,
.prose-article ol {
	padding-left: 1.4em;
	display: grid;
	gap: 0.5em;
}
.prose-article li {
	line-height: 1.6;
}
.prose-article blockquote {
	margin: 0;
	padding: 0.2em 0 0.2em 1.25em;
	border-left: 3px solid var(--reader-accent);
	font-weight: 600;
	font-size: 1.22rem;
	line-height: 1.45;
}
.prose-article figure {
	margin: 0;
}
.prose-article img {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
	display: block;
}
.prose-article figcaption {
	margin-top: 0.6em;
	font-size: 0.85rem;
	color: var(--reader-text-soft);
}
.prose-article code {
	background: var(--reader-border);
	padding: 0.15em 0.4em;
	border-radius: 0.35em;
	font-size: 0.92em;
}
.prose-article pre {
	background: var(--reader-surface);
	border: 1px solid var(--reader-border);
	border-radius: 0.75rem;
	padding: 1.1em;
	overflow-x: auto;
}
.prose-article pre code {
	background: none;
	padding: 0;
}
.prose-article hr {
	border: none;
	border-top: 1px solid var(--reader-border);
}

/* ============ Author card + related posts, themed via the reader scope ============ */
.article-author-card {
	background: var(--reader-surface);
	border-color: var(--reader-border);
	color: var(--reader-text);
}
.article-author-card .eyebrow {
	color: var(--reader-accent);
}
.article-author-card p {
	color: inherit;
}

.article-reader-scope .skill-pill {
	border-color: var(--reader-border);
	color: var(--reader-text);
}
.article-reader-scope .skill-pill:hover {
	border-color: var(--reader-accent);
}

.article-reader-scope h2.font-display {
	color: var(--reader-text);
}

.article-reader-scope .post-card {
	background: var(--reader-surface);
	border-color: var(--reader-border);
}
.article-reader-scope .post-title {
	color: var(--reader-text);
}
.article-reader-scope .post-date {
	color: var(--reader-text-soft);
}

/* ============ Accessibility: focus and contrast ============ */
.article-toc-summary:focus-visible,
.reader-theme-toggle:focus-visible,
.article-toc-item a:focus-visible,
.prose-article a:focus-visible {
	outline: 2px solid #FF6433;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ============ Mobile ============ */
@media (max-width: 640px) {
	.article-byline {
		align-items: flex-start;
	}
	.article-byline-meta {
		width: 100%;
		flex-wrap: wrap;
	}
	.reader-theme-toggle {
		margin-left: 0;
	}
	.prose-article {
		font-size: 1.02rem;
	}
}