/**
 * DeskPicko Editorial Engine — Single Post Frontend.
 *
 * Two responsibilities, both namespaced dp2-article-* (isolated from
 * every other dp2- module, same discipline as dp2-comparison.css /
 * dp2-product-reveal.css / dp-review-guide.css):
 *
 *   1. The meta bar this class prepends above the article (content
 *      type badge, contributor byline, updated date, reading time).
 *   2. Typography for .dp2-article-content — the native WordPress
 *      post content, wrapped but never regenerated or replaced. Every
 *      element style here targets standard WordPress/Gutenberg output
 *      (paragraphs, headings, lists, links, blockquotes, images,
 *      figures/captions, tables, hr, inline code) — nothing here
 *      assumes a specific block plugin or page builder beyond what
 *      core itself already outputs.
 *
 * Same defensive convention as every other dp2- stylesheet: every
 * text-color declaration carries `!important`, so this renders
 * correctly regardless of what a theme's own cascade does (see
 * dp2-comparison.css's own v2.6.3 changelog entry for the exact
 * failure mode this guards against).
 *
 * Mobile-first, single 641px+ breakpoint, same convention as every
 * other dp2- stylesheet in this plugin. Belongs to the new premium
 * white editorial direction — text/link/heading colors are chosen for
 * a white page background, but (per the convention above) remain
 * legible against the current demo site's dark background too, since
 * this class runs unconditionally on every published post regardless
 * of which theme happens to be active while the real site is still in
 * progress.
 */

.dp2-article-meta-bar {
	--dp2art-ink: #14181c;
	--dp2art-ink-soft: #5b6470;
	--dp2art-ink-faint: #8b93a0;
	--dp2art-blue: #1a56db;
	--dp2art-blue-soft: #eaf0fd;
	--dp2art-line: #e5e7eb;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--dp2art-line);
	font-size: 0.85rem;
	color: var(--dp2art-ink-soft) !important;
}

.dp2-article-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--dp2art-blue-soft);
	color: var(--dp2art-blue) !important;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dp2-article-byline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}

.dp2-article-byline-group {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--dp2art-ink) !important;
	font-weight: 600;
}

.dp2-article-byline-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: -0.25rem;
}

.dp2-article-byline-role {
	font-weight: 400;
	color: var(--dp2art-ink-faint) !important;
}

.dp2-article-meta-item {
	color: var(--dp2art-ink-faint) !important;
}

/* -------------------------------------------------------------
   Article body typography
   ------------------------------------------------------------- */

.dp2-article-content {
	--dp2art-ink: #14181c;
	--dp2art-ink-soft: #3c4450;
	--dp2art-blue: #1a56db;
	--dp2art-line: #e5e7eb;
	--dp2art-surface: #f5f6f8;

	display: block;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--dp2art-ink-soft) !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.dp2-article-content > :first-child {
	margin-top: 0;
}

.dp2-article-content > :last-child {
	margin-bottom: 0;
}

.dp2-article-content p {
	margin: 0 0 1.4em;
}

.dp2-article-content h2,
.dp2-article-content h3,
.dp2-article-content h4 {
	margin: 1.8em 0 0.7em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dp2art-ink) !important;
}

.dp2-article-content h2 {
	font-size: 1.5rem;
	padding-top: 0.4em;
	border-top: 1px solid var(--dp2art-line);
}

.dp2-article-content > h2:first-child {
	padding-top: 0;
	border-top: none;
}

.dp2-article-content h3 {
	font-size: 1.25rem;
}

.dp2-article-content h4 {
	font-size: 1.05rem;
}

.dp2-article-content ul,
.dp2-article-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.dp2-article-content li {
	margin-bottom: 0.5em;
}

.dp2-article-content li > ul,
.dp2-article-content li > ol {
	margin-top: 0.5em;
	margin-bottom: 0;
}

.dp2-article-content a {
	color: var(--dp2art-blue) !important;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.dp2-article-content strong {
	color: var(--dp2art-ink) !important;
	font-weight: 700;
}

.dp2-article-content blockquote {
	margin: 1.6em 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--dp2art-blue);
	color: var(--dp2art-ink) !important;
	font-style: italic;
}

.dp2-article-content blockquote p:last-child {
	margin-bottom: 0;
}

.dp2-article-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.6em auto;
	border-radius: 0.5rem;
}

.dp2-article-content figure {
	margin: 1.6em 0;
}

.dp2-article-content figure img {
	margin: 0 auto;
}

.dp2-article-content figcaption {
	margin-top: 0.6em;
	font-size: 0.85rem;
	text-align: center;
	color: var(--dp2art-ink-soft) !important;
}

.dp2-article-content hr {
	margin: 2.4em 0;
	border: none;
	border-top: 1px solid var(--dp2art-line);
}

.dp2-article-content code {
	padding: 0.15em 0.4em;
	border-radius: 0.3em;
	background: var(--dp2art-surface);
	color: var(--dp2art-ink) !important;
	font-size: 0.9em;
}

.dp2-article-content pre {
	margin: 1.6em 0;
	padding: 1em 1.2em;
	border-radius: 0.5rem;
	background: var(--dp2art-surface);
	overflow-x: auto;
	max-width: 100%;
}

.dp2-article-content pre code {
	padding: 0;
	background: none;
}

/* Responsive tables — WordPress/Gutenberg table markup has no
   built-in horizontal-scroll wrapper of its own, so
   DP_EE_Single_Post_Frontend::wrap_tables() wraps every <table> in
   this container at render time. */
.dp2-article-table-wrap {
	margin: 1.6em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dp2-article-content table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.dp2-article-content th,
.dp2-article-content td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--dp2art-line);
	text-align: left;
	color: var(--dp2art-ink-soft) !important;
}

.dp2-article-content th {
	background: var(--dp2art-surface);
	color: var(--dp2art-ink) !important;
	font-weight: 700;
}

/* -------------------------------------------------------------
   641px+ — desktop layout
   ------------------------------------------------------------- */

@media (min-width: 641px) {

	.dp2-article-content {
		max-width: 740px;
		font-size: 1.125rem;
	}

	.dp2-article-content h2 {
		font-size: 1.75rem;
	}

	.dp2-article-content h3 {
		font-size: 1.4rem;
	}

	.dp2-article-content h4 {
		font-size: 1.15rem;
	}

	.dp2-article-content table {
		min-width: 0;
	}
}

/* =============================================================
   v2.11.0 - unified Single Post ([dp_single_post]).

   Everything below is namespaced dp2-sp-*. The renderer prints its own
   DOM and decides the layout with server-side modifier classes on the
   root (dp2-sp--snap, --hero, --toc, --rail), so a block that has no
   data leaves no hole and no rule here depends on Elementor classes.

   Fonts: no webfont. System serif for headings, system sans for body.
   Breakpoints: below 1025px is the mobile/tablet layout; 1025-1199px is
   the two-column layout (related sits under the article); 1200px and
   up adds the right rail.
   ============================================================= */

.dp2-sp {
	--dp2sp-ink: #0f172a;
	--dp2sp-body: #334155;
	--dp2sp-muted: #64748b;
	--dp2sp-line: #e2e8f0;
	--dp2sp-soft: #f8fafc;
	--dp2sp-cyan: #00e5ff;
	--dp2sp-cyan-soft: #e0fbff;
	--dp2sp-cyan-ink: #0b5563;
	--dp2sp-purple: #7a5cff;
	--dp2sp-accent: #5b3fe0;
	--dp2sp-accent-soft: #efebff;
	--dp2sp-rail-w: 260px;
}

:where(.dp2-sp, .dp2-sp-bar, .dp2-sp-toc-panel, .dp2-sp-eyebrow, .dp2-sp-byline, .dp2-sp-snapshot, .dp2-sp-related, .dp2-sp-editorial, .dp2-sp-disclosure) {
	--dp2sp-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--dp2sp-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	box-sizing: border-box;
	font-family: var(--dp2sp-sans);
}

/* The bar, the panel and the alias parts can sit outside .dp2-sp, so
   they carry their own copies of the colour tokens. */
:where(.dp2-sp-bar, .dp2-sp-toc-panel, .dp2-sp-eyebrow, .dp2-sp-byline, .dp2-sp-snapshot, .dp2-sp-related, .dp2-sp-editorial, .dp2-sp-disclosure) {
	--dp2sp-ink: #0f172a;
	--dp2sp-body: #334155;
	--dp2sp-muted: #64748b;
	--dp2sp-line: #e2e8f0;
	--dp2sp-soft: #f8fafc;
	--dp2sp-cyan: #00e5ff;
	--dp2sp-cyan-soft: #e0fbff;
	--dp2sp-cyan-ink: #0b5563;
	--dp2sp-purple: #7a5cff;
	--dp2sp-accent: #5b3fe0;
	--dp2sp-accent-soft: #efebff;
}

.dp2-sp {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 1rem 1rem 2.5rem;
	color: var(--dp2sp-body) !important;
}

@media (min-width: 641px) {
	.dp2-sp {
		padding-inline: 1.5rem;
	}
}

/* ---- Breadcrumb ---- */

.dp2-sp-crumbs {
	margin: 0 0 1rem;
}

.dp2-sp-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--dp2sp-muted) !important;
}

.dp2-sp-crumbs li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	margin: 0;
}

.dp2-sp-crumbs li + li::before {
	content: "\203A";
	content: "\203A" / "";
	margin: 0 0.45rem;
	color: var(--dp2sp-muted);
}

.dp2-sp-crumbs a {
	color: var(--dp2sp-muted) !important;
	text-decoration: none;
}

.dp2-sp-crumbs a:hover {
	color: var(--dp2sp-ink) !important;
	text-decoration: underline;
}

.dp2-sp-crumbs [aria-current="page"] span {
	display: block;
	max-width: 28ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--dp2sp-ink) !important;
}

/* ---- Top: header, featured image, Decision Snapshot ---- */

.dp2-sp-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	align-items: start;
}

.dp2-sp-head {
	min-width: 0;
}

.dp2-sp-title {
	margin: 0.25rem 0 0.75rem;
	font-family: var(--dp2sp-serif);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--dp2sp-ink) !important;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.dp2-sp-intro {
	max-width: 62ch;
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--dp2sp-body) !important;
}

.dp2-sp-hero {
	margin: 0;
	aspect-ratio: 16 / 10;
	max-height: 560px;
	overflow: hidden;
	border-radius: 16px;
	background: var(--dp2sp-soft);
}

.dp2-sp-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1025px) {

	.dp2-sp--snap .dp2-sp-top {
		grid-template-columns: minmax(0, 1fr) 340px;
		grid-template-areas: "head snap" "hero snap";
		column-gap: 2.5rem;
	}

	.dp2-sp--snap:not(.dp2-sp--hero) .dp2-sp-top {
		grid-template-areas: "head snap";
	}

	.dp2-sp--snap .dp2-sp-head {
		grid-area: head;
	}

	.dp2-sp--snap .dp2-sp-hero {
		grid-area: hero;
	}

	.dp2-sp--snap .dp2-sp-snapshot {
		grid-area: snap;
	}
}

/* ---- Eyebrow chips + byline ---- */

.dp2-sp-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.dp2-sp-chip {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
}

.dp2-sp-chip--type {
	background: var(--dp2sp-accent-soft);
	color: var(--dp2sp-accent) !important;
}

.dp2-sp-chip--category {
	background: var(--dp2sp-cyan-soft);
	color: var(--dp2sp-cyan-ink) !important;
}

a.dp2-sp-chip:hover {
	text-decoration: underline;
}

.dp2-sp-byline {
	--dp2art-ink: #0f172a;
	--dp2art-ink-faint: #64748b;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.25rem;
	font-size: 0.9rem;
	color: var(--dp2sp-muted) !important;
}

.dp2-sp-byline .dp2-article-byline-avatar {
	width: 36px;
	height: 36px;
	margin-right: 0;
}

.dp2-sp-meta-item {
	color: var(--dp2sp-muted) !important;
}

/* ---- Decision Snapshot ---- */

.dp2-sp-snapshot {
	position: relative;
	padding: 1.25rem 1.25rem 1rem;
	background: #fff;
	border: 1px solid var(--dp2sp-line);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.05);
	overflow: hidden;
}

.dp2-sp-snapshot::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--dp2sp-cyan), var(--dp2sp-purple));
}

.dp2-sp-snapshot-title {
	margin: 0 0 0.5rem;
	font-family: var(--dp2sp-serif);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--dp2sp-ink) !important;
}

.dp2-sp-snapshot-list {
	margin: 0;
}

.dp2-sp-snapshot-row {
	padding: 0.75rem 0;
	border-top: 1px solid var(--dp2sp-line);
}

.dp2-sp-snapshot-row:first-child {
	border-top: 0;
}

.dp2-sp-snapshot-row dt {
	margin: 0 0 0.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp2sp-muted) !important;
}

.dp2-sp-snapshot-row dd {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--dp2sp-body) !important;
}

.dp2-sp-snapshot-row dd ul {
	margin: 0;
	padding-left: 1.1rem;
}

.dp2-sp-snapshot-jump {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	margin-top: 0.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--dp2sp-accent) !important;
	text-decoration: none;
}

.dp2-sp-snapshot-jump:hover {
	text-decoration: underline;
}

/* ---- Reading layout: article | related (no permanent TOC column) ---- */

.dp2-sp-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 0;
	margin-top: 1.5rem;
	align-items: start;
}

.dp2-sp-main {
	min-width: 0;
}

.dp2-sp-main > .dp2-article-content {
	max-width: 740px;
}

.dp2-sp:not(.dp2-sp--rail) .dp2-sp-main > .dp2-article-content {
	margin-inline: auto;
}

.dp2-sp-rail {
	min-width: 0;
}

@media (min-width: 1025px) {

	.dp2-sp-layout {
		row-gap: 2.5rem;
	}
}

@media (min-width: 1200px) {

	.dp2-sp {
		--dp2sp-rail-w: clamp(240px, 21vw, 320px);
	}

	.dp2-sp--rail .dp2-sp-layout {
		grid-template-columns: minmax(0, 1fr) var(--dp2sp-rail-w);
	}

	.dp2-sp--rail .dp2-sp-layout > .dp2-sp-rail {
		grid-column: 2;
		grid-row: 1;
		padding-left: 2.5rem;
	}
}

/* ---- Table of contents ----
   v2.11.1: no permanent sidebar on any breakpoint. A single compact
   "In this article" bar sits in the normal article flow (same
   component on desktop and mobile) and opens a popover panel - a
   centered modal on desktop, a bottom sheet on mobile. The panel is
   native <div popover>: outside-click and Escape already close it
   with no JS, and the close (X) button uses popovertargetaction="hide"
   for the same reason. */

.dp2-sp-toc {
	margin: 0 0 1.75rem;
}

.dp2-sp-toc-trigger {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	max-width: 740px;
	min-height: 52px;
	padding: 0 1.1rem;
	border: 1px solid var(--dp2sp-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	font: inherit;
	font-size: 0.95rem;
	color: var(--dp2sp-ink) !important;
	cursor: pointer;
	text-align: left;
}

.dp2-sp-toc-trigger:hover {
	border-color: var(--dp2sp-muted);
}

.dp2-sp-toc-trigger-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 12px;
	position: relative;
}

.dp2-sp-toc-trigger-icon::before,
.dp2-sp-toc-trigger-icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 1px;
	background: var(--dp2sp-muted);
}

.dp2-sp-toc-trigger-icon::before {
	top: 0;
	box-shadow: 0 5px 0 var(--dp2sp-muted);
}

.dp2-sp-toc-trigger-icon::after {
	bottom: 0;
	width: 65%;
}

.dp2-sp-toc-trigger-label {
	font-weight: 700;
}

.dp2-sp-toc-trigger-count {
	margin-left: auto;
	padding-right: 0.5rem;
	font-size: 0.82rem;
	color: var(--dp2sp-muted) !important;
	white-space: nowrap;
}

.dp2-sp-toc-chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--dp2sp-muted);
	border-bottom: 2px solid var(--dp2sp-muted);
	transform: rotate(45deg) translate(-2px, -2px);
}

.dp2-sp-toc-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.75rem;
}

.dp2-sp-toc-title {
	margin: 0;
	font-family: var(--dp2sp-serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--dp2sp-ink) !important;
}

.dp2-sp-toc-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	background: var(--dp2sp-soft);
	font: inherit;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--dp2sp-muted) !important;
	cursor: pointer;
}

.dp2-sp-toc-close:hover {
	background: var(--dp2sp-line);
	color: var(--dp2sp-ink) !important;
}

.dp2-sp-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: dp2sp-toc;
}

.dp2-sp-toc-list li {
	counter-increment: dp2sp-toc;
}

.dp2-sp-toc-list a {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.5rem 0.5rem;
	border-radius: 8px;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--dp2sp-body) !important;
	text-decoration: none;
}

.dp2-sp-toc-list a::before {
	content: counter(dp2sp-toc);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--dp2sp-soft);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--dp2sp-muted) !important;
}

.dp2-sp-toc-list a:hover {
	background: var(--dp2sp-soft);
	color: var(--dp2sp-ink) !important;
}

.dp2-sp-toc-list a[aria-current="true"] {
	background: var(--dp2sp-accent-soft);
	color: var(--dp2sp-accent) !important;
	font-weight: 700;
}

.dp2-sp-toc-list a[aria-current="true"]::before {
	background: var(--dp2sp-accent);
	color: #fff !important;
}

.dp2-sp-bar {
	display: none;
}

/* ---- Desktop: centered modal/panel (no sidebar) ---- */

@media (min-width: 1025px) {

	.dp2-sp-toc-panel {
		position: fixed;
		inset: 0;
		margin: auto;
		width: min(420px, 92vw);
		max-height: min(640px, 82vh);
		padding: 1.5rem;
		border: 1px solid var(--dp2sp-line);
		border-radius: 16px;
		overflow-y: auto;
		background: #fff;
		color: var(--dp2sp-ink);
		box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
	}

	.dp2-sp-toc-panel::backdrop {
		background: rgba(15, 23, 42, 0.4);
	}
}

/* ---- Mobile/tablet: bottom sheet ---- */

@media (max-width: 1024px) {

	.dp2-sp-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, 0.98);
		border-top: 1px solid var(--dp2sp-line);
		box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
	}

	.dp2-sp-bar-title {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--dp2sp-ink) !important;
	}

	.dp2-sp-bar-btn {
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 44px;
		padding: 0 1.15rem;
		border: 0;
		border-radius: 999px;
		background: var(--dp2sp-accent);
		font: inherit;
		font-size: 0.9rem;
		font-weight: 600;
		color: #fff !important;
		cursor: pointer;
	}

	/* Keep the last lines of the page clear of the fixed bar. */
	body:has(.dp2-sp-bar) {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}

	@supports selector(:popover-open) {

		.dp2-sp-toc-panel {
			position: fixed;
			inset: auto 0 0 0;
			width: 100%;
			max-width: none;
			max-height: 75vh;
			margin: 0;
			padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
			border: 0;
			border-radius: 20px 20px 0 0;
			overflow-y: auto;
			background: #fff;
			color: var(--dp2sp-ink);
			box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
		}

		.dp2-sp-toc-panel::backdrop {
			background: rgba(15, 23, 42, 0.45);
		}

		.dp2-sp-toc-list a {
			min-height: 44px;
			font-size: 1rem;
		}
	}

	/* Browsers without the popover API: see the shared fallback rule
	   below (the trigger is hidden everywhere, at every width). */
	@supports not selector(:popover-open) {

		.dp2-sp-toc-panel {
			padding: 0.75rem 0 0;
		}
	}
}

@supports not selector(:popover-open) {

	.dp2-sp-toc-trigger {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {

	html:has(.dp2-sp-toc) {
		scroll-behavior: smooth;
	}

	@supports selector(:popover-open) {

		.dp2-sp-toc-panel:popover-open {
			transition: transform 0.2s ease, opacity 0.2s ease;
		}

		@starting-style {

			.dp2-sp-toc-panel:popover-open {
				opacity: 0;
			}
		}
	}

	@media (max-width: 1024px) {

		@supports selector(:popover-open) {

			.dp2-sp-toc-panel:popover-open {
				transform: none;
			}

			@starting-style {

				.dp2-sp-toc-panel:popover-open {
					transform: translateY(24px);
				}
			}
		}
	}

	@media (min-width: 1025px) {

		@supports selector(:popover-open) {

			.dp2-sp-toc-panel:popover-open {
				transform: scale(1);
			}

			@starting-style {

				.dp2-sp-toc-panel:popover-open {
					transform: scale(0.96);
				}
			}
		}
	}
}

/* Anchored headings and the engine block clear any sticky header. */
.dp2-article-content h2[id],
.dp2-sp-editorial {
	scroll-margin-top: var(--dp2-sp-scroll-offset, 88px);
}

/* ---- Engine block wrapper + affiliate disclosure ---- */

.dp2-sp-editorial {
	margin-top: 2.5rem;
}

.dp2-sp-main > .dp2-sp-editorial:first-child {
	margin-top: 0;
}

.dp2-sp-disclosure {
	margin: 0 0 1rem;
	padding-left: 0.75rem;
	border-left: 2px solid var(--dp2sp-line);
	font-family: var(--dp2sp-sans);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--dp2sp-muted) !important;
}

/* ---- Related reading ---- */

.dp2-sp-related-heading {
	margin: 0 0 1rem;
	font-family: var(--dp2sp-serif);
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--dp2sp-ink) !important;
}

.dp2-sp-related-list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp2-sp-related-link {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
	color: var(--dp2sp-ink) !important;
	text-decoration: none;
}

.dp2-sp-related-link:not(:has(.dp2-sp-related-thumb)) {
	grid-template-columns: minmax(0, 1fr);
}

.dp2-sp-related-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var(--dp2sp-soft);
}

.dp2-sp-related-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dp2-sp-related-body {
	display: block;
	min-width: 0;
}

.dp2-sp-related-type {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp2sp-accent) !important;
}

.dp2-sp-related-title {
	display: block;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dp2sp-ink) !important;
}

.dp2-sp-related-date {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.8rem;
	color: var(--dp2sp-muted) !important;
}

.dp2-sp-related-link:hover .dp2-sp-related-title {
	text-decoration: underline;
}

/* Wider than a phone, below the right-rail width: cards sit in a row
   under the article instead of a cramped narrow column. */
@media (min-width: 641px) and (max-width: 1199px) {

	.dp2-sp-related-list {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1.25rem;
	}

	.dp2-sp-related-link {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.6rem;
	}
}

/* ---- Focus (keyboard) ---- */

.dp2-sp-chip:focus-visible,
.dp2-sp-crumbs a:focus-visible,
.dp2-sp-snapshot-jump:focus-visible,
.dp2-sp-toc-list a:focus-visible,
.dp2-sp-toc-trigger:focus-visible,
.dp2-sp-bar-btn:focus-visible,
.dp2-sp-related-link:focus-visible {
	outline: 3px solid var(--dp2sp-accent);
	outline-offset: 2px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {

	.dp2-sp-toc-panel,
	.dp2-sp-toc-panel:popover-open {
		transition: none;
	}
}