/**
 * SEO Ultra Pro — Reference single-post pattern ("Design 1").
 *
 * Loaded ONLY when Customizer > SUP — Single Post > Single Post Style
 * is set to "Design 1" (body.sup-single-reference). Every rule is
 * scoped under that body class, so the default post style is never
 * affected.
 *
 * Layout and values replicate the Design 1 reference stylesheet,
 * but every colour is sourced from the site's own theme variables —
 * bright accents use var(--sup-accent), deeper accents and links use
 * var(--sup-primary) — so the pattern re-skins with the site's
 * primary colour. Only neutrals stay fixed: ink #1a1a1a, table
 * zebra #f7faea, row hover #eff6d2, borders #e8ecd9.
 */

/* ------------------------------------------------------------------ */
/* Palette                                                             */
/* ------------------------------------------------------------------ */
body.sup-single-reference {
	--ref-lime: var(--sup-accent);
	--ref-lime-dark: var(--sup-primary);
	--ref-ink: #1a1a1a;
	--ref-muted: #666;
	--ref-link: var(--sup-primary);
	--ref-green-deep: var(--sup-primary);
	--ref-border: #e5e7eb;
}

/* ------------------------------------------------------------------ */
/* v2.3 structure — FULL-WIDTH article head above the layout:          */
/* single.php prints .sup-article-head (breadcrumbs, pill, H1, meta    */
/* bar + divider) as a .sup-container block BEFORE .sup-layout, and    */
/* "Read Next" in .sup-article-related AFTER it. The head carries the  */
/* top spacing the layout used to provide, and the layout's own top    */
/* padding drops so the featured image and the sidebar's first card    */
/* start at the same height (the byline's margin makes the gap).       */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article-head { padding-top: 30px; }
body.sup-single-reference .sup-single .sup-layout { padding-top: 0; }
body.sup-single-reference .sup-article-related { padding-bottom: 8px; }

/* ------------------------------------------------------------------ */
/* Breadcrumbs                                                         */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-breadcrumbs {
	font-size: .95rem;
	color: var(--ref-muted);
	margin-bottom: 1rem;
}
body.sup-single-reference .sup-breadcrumbs__link {
	color: var(--ref-muted);
	text-decoration: none;
}
body.sup-single-reference .sup-breadcrumbs__link:hover { color: var(--ref-green-deep); }
body.sup-single-reference .sup-breadcrumbs__current { color: var(--ref-muted); }

/* ------------------------------------------------------------------ */
/* Category pill                                                       */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-cat-pill {
	background: var(--sup-accent);
	color: #111;
	border: none;
	border-radius: 999px;
	padding: 6px 15px;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	display: inline-block;
	line-height: 1.2;
	box-shadow: none;
	margin: 0 0 10px;
}
body.sup-single-reference .sup-cat-pill:hover {
	background: var(--ref-lime-dark);
	color: #111;
	transform: none;
}

/* ------------------------------------------------------------------ */
/* Title                                                               */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__title {
	font-size: clamp(2.1rem, 3.6vw, 2.95rem);
	font-weight: 900;
	letter-spacing: -.015em;
	line-height: 1.12;
	color: #101418;
	margin-bottom: 14px;
}

/* ------------------------------------------------------------------ */
/* Meta bar — reference variant (ONE horizontal row, desktop):         */
/* [avatar] Written by Name · [avatar] Reviewed by Name · Min Read ·   */
/* Preferred Source pill pushed to the right, thin divider under.      */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-meta2--ref {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 26px;
	border-bottom: 1px solid #e5e7eb;
	padding: 6px 0 18px;
	margin-bottom: 1.4rem;
}
@media (min-width: 1024px) {
	body.sup-single-reference .sup-meta2--ref { flex-wrap: nowrap; }
}
@media (max-width: 720px) {
	body.sup-single-reference .sup-meta2--ref { gap: 10px 18px; }
	body.sup-single-reference .sup-meta2--ref .sup-meta2__item--preferred { margin-left: 0; }
}
body.sup-single-reference .sup-meta2--ref .sup-meta2__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	box-shadow: none;
	flex: none;
}
body.sup-single-reference .sup-meta2--ref .sup-meta2__avatar img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2.5px solid var(--sup-primary);
	box-sizing: border-box;
	object-fit: cover;
	display: block;
}
body.sup-single-reference .sup-meta2--ref .sup-meta2__badge {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2.5px solid var(--sup-primary);
	box-sizing: border-box;
	box-shadow: none;
	background: color-mix(in srgb, var(--sup-accent) 15%, white);
	color: var(--ref-green-deep);
}
body.sup-single-reference .sup-meta2--ref .sup-meta2__label { color: #666; font-weight: 400; }
body.sup-single-reference .sup-meta2--ref .sup-meta2__name {
	color: #111;
	font-weight: 700;
}
body.sup-single-reference .sup-meta2--ref a.sup-meta2__name:hover { color: var(--ref-link); }
body.sup-single-reference .sup-meta2--ref .sup-meta2__item--reading {
	font-weight: 700;
	color: #111;
	/* Pushes the reading time (and the Preferred pill after it) to
	   the right side of the full-width byline, like the reference */
	margin-left: auto;
}
body.sup-single-reference .sup-meta2--ref .sup-meta2__item--reading .sup-icon { color: #666; }
body.sup-single-reference .sup-meta2--ref .sup-meta2__item--preferred {
	margin-left: auto;
	flex-shrink: 0;
	white-space: nowrap;
}
body.sup-single-reference .sup-meta2--ref .sup-preferred-google {
	margin-top: 0;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 999px;
	padding: 7px 15px;
	box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
	color: #1f1f1f;
	font-weight: 600;
	font-size: .9rem;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
body.sup-single-reference .sup-meta2--ref .sup-preferred-google svg {
	height: 18px;
	width: auto;
}
body.sup-single-reference .sup-meta2--ref .sup-preferred-google:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(30, 50, 5, .18);
}

/* ------------------------------------------------------------------ */
/* Featured image (base .featured rules already live in                */
/* post-features.css — copied from the same reference stylesheet)      */
/* ------------------------------------------------------------------ */
/* v2.3: the featured image is the FIRST element of the content
   column (the head moved full-width above the layout), so it starts
   flush at the column top — aligned with the sidebar's first card */
body.sup-single-reference .sup-article__featured { margin: 0 0 8px; }
body.sup-single-reference .sup-article__featured img,
body.sup-single-reference .sup-article .featured img { border-radius: 18px; }

/* ------------------------------------------------------------------ */
/* Share row — white circles, brand-coloured icons                     */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0 20px;
}
body.sup-single-reference .sup-share__label {
	font-weight: 700;
	color: #1a1a1a;
	margin-right: 2px;
}
body.sup-single-reference .sup-share__btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #e5e7eb;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s ease, box-shadow .25s ease;
}
body.sup-single-reference .sup-share__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(30, 50, 5, .18);
	opacity: 1;
}
body.sup-single-reference .sup-share-btn--whatsapp { color: #25d366; }
body.sup-single-reference .sup-share-btn--whatsapp:hover { color: #25d366; }
body.sup-single-reference .sup-share-btn--facebook { color: #1877f2; }
body.sup-single-reference .sup-share-btn--facebook:hover { color: #1877f2; }
body.sup-single-reference .sup-share-btn--x {
	background: #000;
	border-color: #000;
	color: #fff;
}
body.sup-single-reference .sup-share-btn--x:hover { color: #fff; }
body.sup-single-reference .sup-share-btn--telegram { color: #229ed9; }
body.sup-single-reference .sup-share-btn--telegram:hover { color: #229ed9; }
body.sup-single-reference .sup-share-btn--linkedin { color: #0a66c2; }
body.sup-single-reference .sup-share-btn--linkedin:hover { color: #0a66c2; }
body.sup-single-reference .sup-share-btn--copy { color: #666; }
body.sup-single-reference .sup-share-btn--copy:hover { color: #666; }
body.sup-single-reference .sup-share-btn--native {
	background: var(--sup-accent);
	border-color: var(--sup-accent);
	color: #1a1a1a;
}
body.sup-single-reference .sup-share-btn--native:hover { color: #1a1a1a; }

/* ------------------------------------------------------------------ */
/* TL;DR intro box (post excerpt)                                      */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-tldr {
	background: color-mix(in srgb, var(--sup-accent) 12%, white);
	border-left: 5px solid var(--sup-primary);
	border-radius: 12px;
	padding: 18px 20px;
	font-weight: 600;
	color: #26330a;
	margin: 0 0 26px;
}
body.sup-single-reference .sup-tldr p { margin: 0; }

/* ------------------------------------------------------------------ */
/* Article content — base type (reference body: 17px / 1.65)           */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__content { font-size: 17px; line-height: 1.65; }
body.sup-single-reference .sup-article__content p { margin: .7em 0; }

/* ------------------------------------------------------------------ */
/* Article content — headings                                          */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__content h2 {
	font-size: 1.75rem;
	font-weight: 800;
	color: #1a1a1a;
	line-height: 1.25;
	margin: 1.6em 0 .6em;
}
body.sup-single-reference .sup-article__content h3 {
	font-size: 1.3rem;
	font-weight: 800;
	color: #1a1a1a;
	line-height: 1.3;
	margin: 1.3em 0 .5em;
}

/* ------------------------------------------------------------------ */
/* Article content — blockquote (reference values, verbatim)           */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__content blockquote {
	border-left: 4px solid var(--sup-accent);
	background: #fff;
	padding: 14px 18px;
	margin: 1em 0;
	font-style: italic;
	border-radius: 0 10px 10px 0;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .07);
	color: #1a1a1a;
}

/* ------------------------------------------------------------------ */
/* Article content — bullet lists, marker style is a Customizer        */
/* option (body.sup-list-square / -dots / -numbers). Lists sit deep    */
/* in the text column (ul padding-left 2.3em); markers live in the     */
/* gutter via a negative left offset inside that padding, so no        */
/* background ever spills outside the list box. Component lists        */
/* (author socials, fact sources) are excluded.                        */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) {
	list-style: none;
	padding-left: 2.3em;
}
body.sup-single-reference .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li {
	position: relative;
	padding-left: 0;
	margin: .45em 0;
}
/* Square markers (default / Design 1) */
body.sup-single-reference .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li::before {
	content: "";
	position: absolute;
	left: -1.8em;
	top: .28em;
	width: 1em;
	height: 1em;
	border-radius: 4px;
	border: 2px solid var(--sup-accent);
	background: radial-gradient(circle at center, var(--sup-primary) 0 3px, transparent 3.5px), color-mix(in srgb, var(--sup-accent) 12%, white);
}
/* Round dots */
body.sup-single-reference.sup-list-dots .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li::before {
	left: -1.55em;
	top: .6em;
	width: .5em;
	height: .5em;
	border: none;
	border-radius: 50%;
	background: var(--sup-primary);
}
/* Numbered chips */
body.sup-single-reference.sup-list-numbers .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) {
	counter-reset: sup-li;
}
body.sup-single-reference.sup-list-numbers .sup-article__content ul:not(.sup-author-card__socials):not(.sup-fact-box__sources):not(.sup-facts__list) > li::before {
	counter-increment: sup-li;
	content: counter(sup-li);
	left: -2.05em;
	top: .15em;
	width: 1.5em;
	height: 1.5em;
	border: none;
	border-radius: 7px;
	background: linear-gradient(135deg, var(--sup-accent), var(--sup-primary));
	color: #16240a;
	font-weight: 800;
	font-size: .75em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------------ */
/* Article content — marker-highlight links                            */
/* (share / fact box / author card / related / TOC / TL;DR excluded    */
/* by the dedicated rules that follow and by :not guards)              */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__content a:not(.sup-share__btn):not(.sup-preferred-google):not(.sup-toc__link) {
	color: var(--sup-primary);
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(transparent 70%, color-mix(in srgb, var(--sup-accent) 55%, transparent) 70%, color-mix(in srgb, var(--sup-accent) 55%, transparent) 96%, transparent 96%);
	padding: 0;
	border-radius: 2px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
body.sup-single-reference .sup-article__content a:not(.sup-share__btn):not(.sup-preferred-google):not(.sup-toc__link):hover {
	background: color-mix(in srgb, var(--sup-accent) 80%, transparent);
}
/* Component links keep their own styling (doubled body class raises
   specificity above the :not()-guarded link rule; these come later). */
body.sup-single-reference.sup-single-reference .sup-article__content .sup-fact-box__sources a,
body.sup-single-reference.sup-single-reference .sup-article__content .sup-facts--ref a,
body.sup-single-reference.sup-single-reference .sup-article__content .sup-author-card a,
body.sup-single-reference.sup-single-reference .sup-article__content .sup-toc a {
	background: none;
	padding: 0;
	border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* Article content — tables (reference values, verbatim)               */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 1.2em 0;
	background: #fff;
	border: 1.5px solid rgba(26, 26, 26, .14);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .07);
}
body.sup-single-reference .sup-article__content th,
body.sup-single-reference .sup-article__content td {
	padding: 11px 15px;
	border-bottom: 1px solid #e8ecd9;
	text-align: left;
	font-size: .95rem;
}
body.sup-single-reference .sup-article__content th {
	background: #1a1a1a;
	color: var(--sup-accent);
	font-weight: 800;
	letter-spacing: .01em;
	border-bottom: 3px solid var(--sup-accent);
}
body.sup-single-reference .sup-article__content td:first-child { font-weight: 600; }
body.sup-single-reference .sup-article__content tbody tr:nth-child(even) td { background: #f7faea; }
body.sup-single-reference .sup-article__content tbody tr:hover td { background: #eff6d2; }
body.sup-single-reference .sup-article__content tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
	body.sup-single-reference .sup-article__content th,
	body.sup-single-reference .sup-article__content td {
		padding: 9px 10px;
		font-size: .88rem;
	}
}

/* ------------------------------------------------------------------ */
/* Article content — premium images (smooth edges, soft depth)         */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-article__content .wp-block-image img,
body.sup-single-reference .sup-article__content figure img,
body.sup-single-reference .sup-article__content p > img {
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(16, 24, 8, .10);
	border: 1px solid rgba(26, 26, 26, .05);
}

/* ------------------------------------------------------------------ */
/* FAQ block — white cards, green plus                                 */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-faq .sup-faq-item {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	overflow: hidden;
}
body.sup-single-reference .sup-faq .sup-faq-q {
	font-weight: 700;
	color: #1a1a1a;
}
body.sup-single-reference .sup-faq .sup-faq-toggle {
	color: var(--sup-primary);
	font-size: 1.35rem;
}

/* ------------------------------------------------------------------ */
/* Fact-check box — lime border, pill source links                     */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-fact-box {
	border: 2px solid var(--sup-accent);
	background: color-mix(in srgb, var(--sup-accent) 5%, white);
	border-radius: 16px;
}
body.sup-single-reference .sup-fact-box__icon {
	background: var(--sup-primary);
	color: #fff;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}
body.sup-single-reference .sup-fact-box__icon .sup-icon { width: 22px; height: 22px; }
body.sup-single-reference .sup-fact-box__title { color: #1a1a1a; font-weight: 800; }
body.sup-single-reference .sup-article__content .sup-fact-box__sources {
	list-style: none;
	padding-left: 0;
}
body.sup-single-reference.sup-single-reference .sup-article__content .sup-fact-box .sup-fact-box__sources li a {
	background: var(--sup-accent);
	color: #1a1a1a;
	border-radius: 999px;
	padding: 2px 12px;
	font-weight: 700;
	text-decoration: none;
	display: inline-block;
	margin: 2px 0;
	word-break: normal;
}
body.sup-single-reference.sup-single-reference .sup-article__content .sup-fact-box .sup-fact-box__sources li a:hover { background: var(--ref-lime-dark); }

/* ------------------------------------------------------------------ */
/* Author card — lime-ringed avatar (style 2 layout is set in the      */
/* v2.2 block: horizontal on desktop, centered below 720px)            */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-author-card,
body.sup-single-reference .sup-author-card--1,
body.sup-single-reference .sup-author-card--4 {
	flex-direction: column;
	align-items: center;
	text-align: center;
}
body.sup-single-reference .sup-author-card .sup-author-card__socials { justify-content: center; }
body.sup-single-reference .sup-author-card__avatar {
	width: 96px;
	height: 96px;
	border: 3px solid var(--sup-accent);
	box-shadow: 0 8px 18px rgba(31, 51, 4, .25);
}
body.sup-single-reference .sup-author-card__label {
	letter-spacing: .22em;
	text-transform: uppercase;
	font-size: .78rem;
	color: var(--sup-primary);
	font-weight: 700;
}
body.sup-single-reference .sup-author-card--2 {
	background: #fff;
	border: 1px solid #e8ecd9;
	border-radius: 18px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .07);
	padding: 36px 28px;
}
body.sup-single-reference .sup-author-card--2 .sup-author-card__avatar {
	width: 96px;
	height: 96px;
	border: 3px solid var(--sup-accent);
	box-shadow: 0 8px 18px rgba(31, 51, 4, .25);
}
body.sup-single-reference .sup-author-card__bio {
	max-width: 560px;
	margin-inline: auto;
	line-height: 1.65;
}
body.sup-single-reference .sup-author-card__name { font-size: 1.5rem; font-weight: 800; }
body.sup-single-reference.sup-single-reference .sup-article__content .sup-author-card__name a {
	color: #1a1a1a;
	background: none;
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* Sidebar cards — white cards with a gradient icon-chip title;        */
/* TOC items carry the reference site's PLAIN counter numerals         */
/* (01 02 03…, bold, primary colour, no chip background) with          */
/* hairline separators, H2 sections only. Related rows are thumb-left. */
/* TOC link hover inside the cards is a colour                         */
/* change only — no background wash, no slide — so nothing ever        */
/* spills outside the card box.                                        */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-side-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(16, 24, 8, .06);
	padding: 20px 20px 10px;
}
body.sup-single-reference .sup-side-card__title {
	color: #1a1a1a;
	border-bottom: none;
}
body.sup-single-reference .sup-side-card--related .sup-related-sidebar__title {
	color: #1a1a1a;
	border-bottom: none;
}
body.sup-single-reference .sup-side-card__title::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2.4'%20stroke-linecap='round'%3E%3Cpath%20d='M9.5%206h10M9.5%2012h10M9.5%2018h10'/%3E%3Ccircle%20cx='4.8'%20cy='6'%20r='1.4'%20fill='white'%20stroke='none'/%3E%3Ccircle%20cx='4.8'%20cy='12'%20r='1.4'%20fill='white'%20stroke='none'/%3E%3Ccircle%20cx='4.8'%20cy='18'%20r='1.4'%20fill='white'%20stroke='none'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--sup-accent), var(--sup-primary));
}
body.sup-single-reference .sup-side-card--related .sup-related-sidebar__title::before {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='white'%3E%3Crect%20x='4'%20y='4'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='13'%20y='4'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='4'%20y='13'%20width='7'%20height='7'%20rx='1.6'/%3E%3Crect%20x='13'%20y='13'%20width='7'%20height='7'%20rx='1.6'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--sup-accent), var(--sup-primary));
}
body.sup-single-reference .sup-side-card .sup-toc { margin: 0; }
body.sup-single-reference .sup-side-card--toc .sup-toc--2 { border-left: 0; padding: 0; }
/* TOC items inside the card — plain counter numerals like the
   reference site (bold 01 02 03… in the primary colour, NO chip) */
body.sup-single-reference .sup-side-card--toc .sup-toc__list {
	counter-reset: sup-toc;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.sup-single-reference .sup-side-card--toc .sup-toc__item {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #f1f1ea;
	list-style: none;
}
body.sup-single-reference .sup-side-card--toc .sup-toc__item:last-child { border-bottom: none; }
body.sup-single-reference .sup-side-card--toc .sup-toc__item::before {
	counter-increment: sup-toc;
	content: counter(sup-toc, decimal-leading-zero);
	font-weight: 800;
	color: var(--sup-primary);
	font-size: .85rem;
	min-width: 2em;
	flex: none;
}
body.sup-single-reference .sup-side-card--toc .sup-toc__link {
	color: #232323;
	font-weight: 550;
	text-decoration: none;
	background: none;
	padding: 0;
}
body.sup-single-reference .sup-side-card--toc .sup-toc__link:hover {
	color: var(--sup-primary);
	background: none;
	transform: none;
	text-decoration: none;
}
/* The reference sidebar TOC lists H2 sections only — H3 items hide */
body.sup-single-reference .sup-side-card--toc .sup-toc__item--h3 { display: none; }
/* Related rows inside the card — thumbnail left, bold title */
body.sup-single-reference .sup-side-card--related .sup-related-sidebar__item { border-bottom-color: #f1f1ea; }
body.sup-single-reference .sup-side-card--related .sup-related-sidebar__img { border-color: #eee; }
body.sup-single-reference .sup-side-card--related .sup-related-sidebar__link {
	color: #191919;
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.35;
}
body.sup-single-reference .sup-side-card--related .sup-related-sidebar__link:hover { color: var(--ref-link); }

/* ------------------------------------------------------------------ */
/* v2.2 — real reference structure: horizontal author card, facts      */
/* section, numbered sidebar TOC, "Read Next" carousel sizing          */
/* ------------------------------------------------------------------ */
/* Author card style 2: avatar left, body left-aligned on desktop;
   centered column only below 720px */
@media (min-width: 720px) {
	body.sup-single-reference .sup-author-card--2 {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}
	body.sup-single-reference .sup-author-card--2 .sup-author-card__socials { justify-content: flex-start; }
	body.sup-single-reference .sup-author-card--2 .sup-author-card__bio { margin-inline: 0; }
}
@media (max-width: 719px) {
	body.sup-single-reference .sup-author-card--2 {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

/* Facts section — "Facts, Checked Against Trusted Sources":
   square-marker list, source span never wraps */
body.sup-single-reference .sup-facts--ref { margin-top: 2.4rem; }
body.sup-single-reference .sup-facts--ref h2 {
	font-size: 1.75rem;
	font-weight: 800;
	color: #1a1a1a;
	line-height: 1.25;
	margin: 0 0 .6em;
}
body.sup-single-reference .sup-facts--ref ul {
	list-style: none;
	padding-left: 2.3em;
	margin: 0;
}
body.sup-single-reference .sup-facts--ref ul > li {
	position: relative;
	margin: .55em 0;
}
body.sup-single-reference .sup-facts--ref ul > li::before {
	content: "";
	position: absolute;
	left: -1.8em;
	top: .28em;
	width: 1em;
	height: 1em;
	border-radius: 4px;
	border: 2px solid var(--sup-accent);
	background: radial-gradient(circle at center, var(--sup-primary) 0 3px, transparent 3.5px), color-mix(in srgb, var(--sup-accent) 12%, white);
}
body.sup-single-reference .sup-facts__src { white-space: nowrap; }
body.sup-single-reference .sup-article__content .sup-facts--ref .sup-facts__src a:not(.sup-share__btn):not(.sup-preferred-google):not(.sup-toc__link) {
	color: var(--sup-primary);
	text-decoration: underline;
}

/* Sidebar title icon chip (emoji on the gradient tile) */
body.sup-single-reference .sup-side-ico {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--sup-accent), var(--sup-primary));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	line-height: 1;
	flex: none;
}
body.sup-single-reference .sup-side-card__title:has(.sup-side-ico)::before { display: none; }

/* Sidebar TOC in Design 1: plain counter numerals (01 02 03…) with
   hairline separators and H2 items only — styled in the sidebar-card
   section above (v2.3 replaced the v2.2 plain-list rules). */

/* Read Next carousel: three cards per view on desktop */
@media (min-width: 1024px) {
	body.sup-single-reference .sup-related-track .sup-related__card--slide {
		flex: 0 0 calc(33.333% - 14px);
		max-width: none;
	}
}

/* ------------------------------------------------------------------ */
/* Back to top — lime circle                                           */
/* ------------------------------------------------------------------ */
body.sup-single-reference .sup-back-to-top {
	background: var(--sup-accent);
	color: #1a1a1a;
	border-radius: 50%;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .13);
}
body.sup-single-reference .sup-back-to-top:hover { background: var(--ref-lime-dark); }

/* ------------------------------------------------------------------ */
/* Dark mode                                                           */
/* ------------------------------------------------------------------ */
[data-theme="dark"] body.sup-single-reference .sup-article__title,
[data-theme="dark"] body.sup-single-reference .sup-article__content h2,
[data-theme="dark"] body.sup-single-reference .sup-article__content h3 {
	color: #f3f4f6;
}
[data-theme="dark"] body.sup-single-reference .sup-tldr {
	background: color-mix(in srgb, var(--sup-accent) 12%, transparent);
	color: inherit;
}
[data-theme="dark"] body.sup-single-reference .sup-meta2--ref {
	border-bottom-color: rgba(255, 255, 255, .14);
}
[data-theme="dark"] body.sup-single-reference .sup-meta2--ref .sup-meta2__name,
[data-theme="dark"] body.sup-single-reference .sup-meta2--ref .sup-meta2__item--reading {
	color: #f3f4f6;
}
[data-theme="dark"] body.sup-single-reference .sup-meta2--ref .sup-meta2__label { color: #9ca3af; }
[data-theme="dark"] body.sup-single-reference .sup-article__content blockquote {
	background: rgba(255, 255, 255, .04);
	color: inherit;
}
[data-theme="dark"] body.sup-single-reference .sup-faq .sup-faq-item {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] body.sup-single-reference .sup-faq .sup-faq-q { color: #f3f4f6; }
[data-theme="dark"] body.sup-single-reference .sup-fact-box { background: color-mix(in srgb, var(--sup-accent) 7%, transparent); }
[data-theme="dark"] body.sup-single-reference .sup-fact-box__title { color: var(--sup-accent); }
[data-theme="dark"] body.sup-single-reference .sup-article__content table {
	background: #111827;
	color: #e5e7eb;
	border-color: rgba(255, 255, 255, .16);
	box-shadow: none;
}
[data-theme="dark"] body.sup-single-reference .sup-article__content th {
	background: #1a1a1a;
	color: var(--sup-accent);
}
[data-theme="dark"] body.sup-single-reference .sup-article__content th,
[data-theme="dark"] body.sup-single-reference .sup-article__content td {
	border-bottom-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] body.sup-single-reference .sup-article__content tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--sup-accent) 6%, transparent); }
[data-theme="dark"] body.sup-single-reference .sup-article__content tbody tr:hover td { background: color-mix(in srgb, var(--sup-accent) 12%, transparent); }
[data-theme="dark"] body.sup-single-reference .sup-share__label { color: #f3f4f6; }
[data-theme="dark"] body.sup-single-reference .sup-side-card {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] body.sup-single-reference .sup-side-card__title,
[data-theme="dark"] body.sup-single-reference .sup-side-card--related .sup-related-sidebar__title {
	color: #f3f4f6;
}
[data-theme="dark"] body.sup-single-reference .sup-side-card--toc .sup-toc__item,
[data-theme="dark"] body.sup-single-reference .sup-side-card--related .sup-related-sidebar__item {
	border-bottom-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] body.sup-single-reference .sup-side-card--toc .sup-toc__link { color: #e5e7eb; }
[data-theme="dark"] body.sup-single-reference .sup-side-card--toc .sup-toc__link:hover { color: var(--sup-accent); }
[data-theme="dark"] body.sup-single-reference .sup-side-card--related .sup-related-sidebar__link { color: #e5e7eb; }
[data-theme="dark"] body.sup-single-reference .sup-author-card--2 {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .12);
}
[data-theme="dark"] body.sup-single-reference.sup-single-reference .sup-article__content .sup-author-card__name a { color: #f3f4f6; }

/* ------------------------------------------------------------------ */
/* MOBILE (v2.1) — Design 1 single post on small screens.              */
/* Everything sits inside max-width queries; desktop is untouched.     */
/* ------------------------------------------------------------------ */
@media (max-width: 720px) {
	body.sup-single-reference .sup-article__title {
		font-size: clamp(1.7rem, 6vw, 2.2rem);
		line-height: 1.15;
	}

	/* Meta: author groups two per row; the Preferred pill takes its
	   own row, right-aligned (DOM order is unchanged) */
	body.sup-single-reference .sup-meta2--ref { gap: 10px 14px; }
	body.sup-single-reference .sup-meta2--ref .sup-meta2__item--written,
	body.sup-single-reference .sup-meta2--ref .sup-meta2__item--reviewed { flex: 1 1 45%; }
	body.sup-single-reference .sup-meta2--ref .sup-meta2__item--preferred {
		flex: 1 1 100%;
		margin-left: 0;
		display: flex;
		justify-content: flex-end;
	}

	/* TL;DR box breathes less */
	body.sup-single-reference .sup-tldr { padding: 14px 16px; }

	/* Tables scroll sideways instead of breaking the layout */
	body.sup-single-reference .sup-article__content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Fact box + author card tighten up */
	body.sup-single-reference .sup-fact-box { padding: 16px; }
	body.sup-single-reference .sup-author-card--2 { padding: 26px 18px; }
	body.sup-single-reference .sup-author-card__avatar,
	body.sup-single-reference .sup-author-card--2 .sup-author-card__avatar {
		width: 80px;
		height: 80px;
	}

	/* Sidebar cards: snug padding in the stacked layout */
	body.sup-single-reference .sup-side-card { padding: 16px 16px 8px; }
}