/* ===========================================================
   RewardRace — Docs Article v3
   Modern editorial: brand top-accent panel, glassy sidebar with
   active brand-line indicator, gradient number badges, two-column TOC,
   macOS-style code blocks, dotted halo, refined reactions/share.
   =========================================================== */

.rrDocsArt {
	--rrda-bg:           var(--rr-bg);
	--rrda-text:         var(--rr-heading);
	--rrda-body:         var(--rr-text);
	--rrda-soft:         var(--rr-muted);
	--rrda-faint:        var(--rr-subtle);
	--rrda-border:       var(--rr-border);
	--rrda-card-bg:      var(--rr-bg);
	--rrda-side-bg:      color-mix(in srgb, var(--rr-surface) 92%, transparent);
	--rrda-side-active:  var(--rr-brand-tint);
	--rrda-side-hover:   var(--rr-brand-ghost);
	--rrda-link:         var(--rr-brand);
	--rrda-accent:       var(--rr-brand);
	--rrda-stick-top:    100px;

	background: var(--rrda-bg);
	color: var(--rrda-body);
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
	padding: var(--rr-space-10) var(--rr-section-x) var(--rr-section-y);
	overflow: visible;
	position: relative;
}
.rrDocsArt *, .rrDocsArt *::before, .rrDocsArt *::after { box-sizing: border-box; }

/* Soft brand glow — top right (matches site design language) */
.rrDocsArt::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -160px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--rr-brand) 16%, transparent), transparent 70%);
	filter: blur(120px);
	pointer-events: none;
	z-index: 0;
}

.rrDocsArt--bg-gray        { --rrda-bg: var(--rr-surface); }
.rrDocsArt--bg-cream       { --rrda-bg: var(--rr-surface); }
.rrDocsArt--bg-white       { --rrda-bg: var(--rr-bg); }
.rrDocsArt--bg-transparent { background: transparent; }

.rrDocsArt__wrap {
	max-width: var(--rr-container);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--rr-space-8);
	align-items: start;
	position: relative;
	z-index: 1;
}

/* ===========================================================
   Sidebar — glassy panel with brand-line active state
   =========================================================== */
.rrDocsArt__side {
	background: var(--rrda-side-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--rrda-border);
	border-radius: var(--rr-radius-xl);
	padding: var(--rr-space-3);
	position: sticky;
	top: var(--rrda-stick-top);
	max-height: calc(100vh - var(--rrda-stick-top) - var(--rr-space-6));
	overflow-y: auto;
	z-index: 5;
	box-shadow: var(--rr-shadow-sm);
	overscroll-behavior: contain;
}
/* Sidebar header — "Documentation" label with icon */
.rrDocsArt__sideHead {
	display: flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 6px 10px var(--rr-space-3);
	margin-bottom: var(--rr-space-2);
	border-bottom: 1px dashed var(--rrda-border);
}
.rrDocsArt__sideHeadIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px; height: 26px;
	color: #FFFFFF;
	background: var(--rr-brand-gradient);
	border-radius: var(--rr-radius-sm);
	box-shadow: var(--rr-shadow-brand-sm);
	flex-shrink: 0;
}
.rrDocsArt__sideHeadIcon svg { width: 16px; height: 16px; }
.rrDocsArt__sideHeadLabel {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rrda-text);
}

.rrDocsArt__side { scrollbar-width: none; -ms-overflow-style: none; }
.rrDocsArt__side::-webkit-scrollbar { width: 0; height: 0; display: none; }

.rrDocsArt__sideList {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rrDocsArt__sideItem { position: relative; }

.rrDocsArt .rrDocsArt__sideCat,
.rrDocsArt a.rrDocsArt__sideCat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rr-space-2);
	padding: 11px 12px;
	border-radius: var(--rr-radius-md);
	font-size: var(--rr-fs-sm);
	font-weight: 600;
	color: var(--rrda-body);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out);
	user-select: none;
	position: relative;
}
.rrDocsArt .rrDocsArt__sideCat:hover {
	background: var(--rrda-side-hover);
	color: var(--rrda-text);
}

/* Active state: brand-gradient line on the left edge */
.rrDocsArt__sideItem.is-open > .rrDocsArt__sideCat {
	background: var(--rrda-side-active);
	color: var(--rrda-accent);
	font-weight: 700;
}
.rrDocsArt__sideItem.is-open > .rrDocsArt__sideCat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: var(--rr-brand-gradient);
}

.rrDocsArt__sideCatLabel {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-3);
	min-width: 0;
	flex: 1;
}

.rrDocsArt__sideIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	color: var(--rrda-soft);
	background: color-mix(in srgb, var(--rrda-soft) 9%, transparent);
	border-radius: var(--rr-radius-sm);
	flex-shrink: 0;
	transition: color var(--rr-dur-fast) var(--rr-ease-out),
	            background-color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrDocsArt__sideIcon svg { width: 16px; height: 16px; }
.rrDocsArt__sideItem.is-open > .rrDocsArt__sideCat .rrDocsArt__sideIcon {
	color: #FFFFFF;
	background: var(--rr-brand-gradient);
}

.rrDocsArt__sideRight {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	flex-shrink: 0;
}

.rrDocsArt__sideCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 8px;
	background: var(--rr-brand-tint);
	color: var(--rrda-accent);
	border-radius: var(--rr-radius-pill);
	font-size: 10px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.rrDocsArt__sideItem.is-open .rrDocsArt__sideCount {
	background: var(--rrda-accent);
	color: #FFFFFF;
}

.rrDocsArt__sideChevron {
	width: 14px; height: 14px;
	color: var(--rrda-soft);
	transition: transform var(--rr-dur-base) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out);
	display: inline-block;
}
.rrDocsArt__sideItem.is-open > .rrDocsArt__sideCat .rrDocsArt__sideChevron {
	transform: rotate(180deg);
	color: var(--rrda-accent);
}

.rrDocsArt__sideSub {
	list-style: none;
	margin: 0;
	padding: 0 0 0 38px;
	max-height: 0;
	overflow: hidden;
	position: relative;
	transition: max-height var(--rr-dur-base) var(--rr-ease-out),
	            padding var(--rr-dur-base) var(--rr-ease-out);
}
.rrDocsArt__sideItem.is-open > .rrDocsArt__sideSub {
	max-height: 1500px;
	padding: 4px 0 8px 38px;
}
/* Vertical thread connecting sub-items to parent icon */
.rrDocsArt__sideItem.is-open > .rrDocsArt__sideSub::before {
	content: "";
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 6px;
	width: 1px;
	background: linear-gradient(to bottom, var(--rrda-border), transparent);
}
.rrDocsArt__sideSub > li { display: flex; }

.rrDocsArt .rrDocsArt__sideSubLink,
.rrDocsArt a.rrDocsArt__sideSubLink {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 7px 10px;
	border-radius: var(--rr-radius-sm);
	font-size: var(--rr-fs-xs);
	color: var(--rrda-soft);
	text-decoration: none;
	transition: background-color var(--rr-dur-fast) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out),
	            padding-left var(--rr-dur-fast) var(--rr-ease-out);
	min-width: 0;
	font-weight: 500;
}
.rrDocsArt .rrDocsArt__sideSubLink:hover {
	background: var(--rrda-side-hover);
	color: var(--rrda-text);
	padding-left: 14px;
}
.rrDocsArt .rrDocsArt__sideSubLink.is-active {
	color: var(--rrda-accent);
	font-weight: 700;
	background: var(--rr-brand-ghost);
}
.rrDocsArt__sideSubIcon { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }

/* ===========================================================
   Main panel — modern with brand top-accent + dotted halo
   =========================================================== */
.rrDocsArt__main {
	position: relative;
	background: var(--rrda-card-bg);
	border: 1px solid var(--rrda-border);
	border-radius: var(--rr-radius-xl);
	padding: var(--rr-space-12);
	min-width: 0;
	box-shadow: var(--rr-shadow-sm);
	overflow: hidden;
}
/* Brand gradient strip on top */
.rrDocsArt__main::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--rr-brand-gradient);
	z-index: 1;
}
/* Dotted texture corner accent (top-right) */
.rrDocsArt__main::after {
	content: "";
	position: absolute;
	top: 4px;
	right: 0;
	width: 220px;
	height: 220px;
	background-image: radial-gradient(circle at 1.5px 1.5px, color-mix(in srgb, var(--rr-brand) 14%, transparent) 1px, transparent 0);
	background-size: 18px 18px;
	mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
	-webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 70%);
	pointer-events: none;
	opacity: .6;
}

/* Pill-style breadcrumb */
.rrDocsArt__crumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rr-space-2);
	font-size: var(--rr-fs-xs);
	color: var(--rrda-soft);
	margin-bottom: var(--rr-space-5);
	font-weight: 500;
	padding: 6px 14px;
	background: color-mix(in srgb, var(--rrda-soft) 6%, transparent);
	border: 1px solid var(--rrda-border);
	border-radius: var(--rr-radius-pill);
	position: relative;
	z-index: 2;
}
.rrDocsArt__crumbIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: var(--rrda-accent);
	flex-shrink: 0;
}
.rrDocsArt__crumbIcon svg { width: 14px; height: 14px; }

.rrDocsArt .rrDocsArt__crumbLink,
.rrDocsArt a.rrDocsArt__crumbLink {
	color: var(--rrda-soft);
	text-decoration: none;
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
}
.rrDocsArt .rrDocsArt__crumbLink:hover { color: var(--rrda-accent); }
.rrDocsArt__crumbSep { color: var(--rrda-faint); user-select: none; }
.rrDocsArt__crumbCurrent { color: var(--rrda-text); font-weight: 700; }

.rrDocsArt__title {
	font-size: var(--rr-fs-h1);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	color: var(--rrda-text);
	margin: 0 0 var(--rr-space-8);
	line-height: var(--rr-lh-tight);
	text-wrap: balance;
	position: relative;
	z-index: 2;
}

/* TOC — editorial tile with brand notch + 2-col layout on desktop */
.rrDocsArt__toc {
	border: 1px solid var(--rrda-border);
	border-radius: var(--rr-radius-lg);
	padding: var(--rr-space-6);
	margin-bottom: var(--rr-space-12);
	background: color-mix(in srgb, var(--rrda-soft) 4%, var(--rrda-bg));
	position: relative;
	z-index: 2;
}
.rrDocsArt__toc::before {
	content: "";
	position: absolute;
	top: 14px;
	left: -1px;
	width: 3px;
	height: 28px;
	background: var(--rr-brand-gradient);
	border-radius: 0 2px 2px 0;
}

.rrDocsArt__tocHead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rr-space-3);
	font-size: var(--rr-fs-xs);
	font-weight: 800;
	color: var(--rrda-text);
	margin-bottom: var(--rr-space-4);
	text-transform: uppercase;
	letter-spacing: var(--rr-tracking-wide);
}
.rrDocsArt__tocHeadLabel {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
}
.rrDocsArt__tocHeadIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: #FFFFFF;
	background: var(--rr-brand-gradient);
	border-radius: var(--rr-radius-sm);
	flex-shrink: 0;
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrDocsArt__tocHeadIcon svg { width: 14px; height: 14px; }

.rrDocsArt__tocList {
	list-style: none;
	margin: 0; padding: 0;
	column-count: 2;
	column-gap: var(--rr-space-6);
}
.rrDocsArt__tocItem {
	font-size: var(--rr-fs-sm);
	line-height: var(--rr-lh-normal);
	break-inside: avoid;
	margin-bottom: var(--rr-space-2);
}
.rrDocsArt__tocItem--lvl2 { padding-left: var(--rr-space-5); }
.rrDocsArt__tocItem--lvl3 { padding-left: var(--rr-space-10); }

.rrDocsArt .rrDocsArt__tocLink,
.rrDocsArt a.rrDocsArt__tocLink {
	color: var(--rrda-body);
	text-decoration: none;
	transition: color var(--rr-dur-fast) var(--rr-ease-out);
	font-weight: 600;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}
.rrDocsArt .rrDocsArt__tocLink:hover {
	color: var(--rrda-accent);
}
.rrDocsArt__tocNum {
	color: var(--rrda-accent);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	font-size: var(--rr-fs-xs);
	letter-spacing: -.01em;
}

/* ===========================================================
   Section groups + articles
   =========================================================== */
.rrDocsArt__content { position: relative; z-index: 2; }

.rrDocsArt__group {
	margin: 0 0 var(--rr-space-12);
	padding-top: var(--rr-space-1);
	scroll-margin-top: 100px;
}
.rrDocsArt__group + .rrDocsArt__group {
	border-top: 1px dashed var(--rrda-border);
	padding-top: var(--rr-space-10);
	margin-top: var(--rr-space-10);
}

.rrDocsArt__groupTitle {
	font-size: var(--rr-fs-h3);
	font-weight: 800;
	letter-spacing: var(--rr-tracking-tight);
	color: var(--rrda-text);
	margin: 0 0 var(--rr-space-6);
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-4);
}
.rrDocsArt__groupTitle .rrDocsArt__sideIcon {
	width: 42px;
	height: 42px;
	color: #FFFFFF;
	background: var(--rr-brand-gradient);
	border-radius: var(--rr-radius-md);
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrDocsArt__groupTitle .rrDocsArt__sideIcon svg { width: 22px; height: 22px; }

/* Article: subtle left rail that highlights on hover */
.rrDocsArt__article {
	margin: 0 0 var(--rr-space-8);
	scroll-margin-top: 110px;
	padding-left: var(--rr-space-6);
	border-left: 2px solid var(--rrda-border);
	transition: border-color var(--rr-dur-base) var(--rr-ease-out);
}
.rrDocsArt__article:hover { border-left-color: var(--rrda-accent); }
.rrDocsArt__article:last-child { margin-bottom: 0; }

.rrDocsArt__articleTitle {
	font-size: var(--rr-fs-h4);
	font-weight: 800;
	color: var(--rrda-text);
	margin: 0 0 var(--rr-space-4);
	line-height: var(--rr-lh-snug);
	letter-spacing: var(--rr-tracking-snug);
}

/* ===========================================================
   Body content
   =========================================================== */
.rrDocsArt__body {
	color: var(--rrda-body);
	font-size: var(--rr-fs-md);
	line-height: var(--rr-lh-relaxed);
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}
.rrDocsArt__body > * { max-width: 100%; }
.rrDocsArt__body > *:first-child { margin-top: 0; }
.rrDocsArt__body > *:last-child { margin-bottom: 0; }
.rrDocsArt__body p  { margin: 0 0 var(--rr-space-4); color: var(--rrda-body); }

.rrDocsArt__body h2,
.rrDocsArt__body h3,
.rrDocsArt__body h4 {
	color: var(--rrda-text);
	font-weight: 800;
	margin: var(--rr-space-8) 0 var(--rr-space-3);
	line-height: var(--rr-lh-snug);
	letter-spacing: var(--rr-tracking-snug);
}
.rrDocsArt__body h2 { font-size: var(--rr-fs-h3); }
.rrDocsArt__body h3 { font-size: var(--rr-fs-h4); }
.rrDocsArt__body h4 { font-size: var(--rr-fs-md); }

.rrDocsArt__body ul,
.rrDocsArt__body ol { margin: 0 0 var(--rr-space-4); padding-left: var(--rr-space-6); }
.rrDocsArt__body li { margin: var(--rr-space-1) 0; color: var(--rrda-body); }
.rrDocsArt__body strong { color: var(--rrda-text); font-weight: 700; }

/* Inline code — soft brand chip */
.rrDocsArt__body code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
	font-size: .88em;
	padding: 2px 7px;
	background: color-mix(in srgb, var(--rr-brand) 8%, transparent);
	color: var(--rr-brand-hover);
	border: 1px solid color-mix(in srgb, var(--rr-brand) 16%, transparent);
	border-radius: var(--rr-radius-xs);
	font-weight: 600;
}

/* Code block — macOS terminal styling with traffic-light dots */
.rrDocsArt__body pre {
	background: var(--rr-ink);
	color: #E9E6F7;
	padding: var(--rr-space-10) var(--rr-space-5) var(--rr-space-5);
	border-radius: var(--rr-radius-md);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: var(--rr-space-5) 0;
	font-size: var(--rr-fs-xs);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
	line-height: var(--rr-lh-normal);
	position: relative;
	border: 1px solid color-mix(in srgb, #FFFFFF 8%, transparent);
	box-shadow: var(--rr-shadow-md);
}
.rrDocsArt__body pre::before {
	content: "";
	position: absolute;
	top: 14px; left: 16px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #FF5F57;
	box-shadow:
		18px 0 0 #FEBC2E,
		36px 0 0 #28C841;
}
.rrDocsArt__body pre code {
	background: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font-weight: 400;
	font-size: inherit;
}

.rrDocsArt__body img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--rr-radius-md);
	margin: var(--rr-space-6) 0;
	border: 1px solid var(--rrda-border);
	box-shadow: var(--rr-shadow-sm);
}

/* Animated underline link */
.rrDocsArt__body a {
	color: var(--rrda-link);
	text-decoration: none;
	background-image: linear-gradient(to right, var(--rrda-link), var(--rrda-link));
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--rr-dur-fast) var(--rr-ease-out);
	font-weight: 600;
	padding-bottom: 1px;
}
.rrDocsArt__body a:hover { background-size: 100% 2px; }

/* Blockquote with decorative quote mark */
.rrDocsArt__body blockquote {
	position: relative;
	border-left: 3px solid var(--rrda-accent);
	margin: var(--rr-space-6) 0;
	padding: var(--rr-space-4) var(--rr-space-6) var(--rr-space-4) var(--rr-space-10);
	color: var(--rrda-text);
	background: var(--rr-brand-ghost);
	border-radius: 0 var(--rr-radius-md) var(--rr-radius-md) 0;
	font-weight: 500;
	line-height: var(--rr-lh-normal);
}
.rrDocsArt__body blockquote::before {
	content: "\201C";
	position: absolute;
	top: -4px;
	left: 14px;
	font-size: 48px;
	line-height: 1;
	color: var(--rrda-accent);
	opacity: .35;
	font-weight: 800;
	font-family: Georgia, serif;
}
.rrDocsArt__body blockquote p:last-child { margin-bottom: 0; }

/* Horizontal rule — soft fade gradient */
.rrDocsArt__body hr {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--rrda-border), transparent);
	margin: var(--rr-space-10) 0;
}

/* Tables */
.rrDocsArt__body table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--rr-space-5) 0;
	font-size: var(--rr-fs-sm);
	border: 1px solid var(--rrda-border);
	border-radius: var(--rr-radius-md);
	overflow: hidden;
}
.rrDocsArt__body th,
.rrDocsArt__body td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--rrda-border);
}
.rrDocsArt__body th {
	background: color-mix(in srgb, var(--rrda-soft) 6%, transparent);
	color: var(--rrda-text);
	font-weight: 700;
	font-size: var(--rr-fs-xs);
	text-transform: uppercase;
	letter-spacing: var(--rr-tracking-wide);
}
.rrDocsArt__body tr:last-child td { border-bottom: 0; }

/* ===========================================================
   Reactions — "Was this helpful?" panel with brand wash
   =========================================================== */
.rrDocsArt__reactions {
	margin-top: var(--rr-space-12);
	padding: var(--rr-space-5) var(--rr-space-6);
	background: var(--rr-brand-soft);
	border: 1px solid var(--rr-brand-tint);
	border-radius: var(--rr-radius-lg);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rr-space-4);
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}
.rrDocsArt__reactionsLabel {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	font-size: var(--rr-fs-sm);
	font-weight: 700;
	color: var(--rrda-text);
}
.rrDocsArt__reactionsIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--rrda-accent);
	background: var(--rrda-card-bg);
	border: 1px solid var(--rr-brand-tint);
	border-radius: 50%;
	flex-shrink: 0;
	box-shadow: var(--rr-shadow-xs);
}
.rrDocsArt__reactionsIcon svg { width: 16px; height: 16px; }
.rrDocsArt__reactionsList {
	display: inline-flex;
	gap: var(--rr-space-2);
}
.rrDocsArt__reaction {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--rr-border);
	background: var(--rrda-card-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--rr-dur-base) var(--rr-ease-spring),
	            border-color var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
	box-shadow: var(--rr-shadow-xs);
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.rrDocsArt__reaction:hover {
	transform: scale(1.18) translateY(-3px) rotate(-6deg);
	border-color: var(--rrda-accent);
	box-shadow: var(--rr-shadow-md);
}
.rrDocsArt__reaction:active { transform: scale(.92); }

/* ===========================================================
   Share row
   =========================================================== */
.rrDocsArt__share {
	margin-top: var(--rr-space-6);
	display: flex;
	align-items: center;
	gap: var(--rr-space-3);
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}
.rrDocsArt__shareLabel {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	font-size: var(--rr-fs-xs);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-wide);
	text-transform: uppercase;
	color: var(--rrda-soft);
}
.rrDocsArt__shareIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--rrda-accent);
	flex-shrink: 0;
}
.rrDocsArt__shareIcon svg { width: 16px; height: 16px; }
.rrDocsArt__shareList { display: inline-flex; gap: var(--rr-space-2); }

.rrDocsArt .rrDocsArt__shareBtn,
.rrDocsArt a.rrDocsArt__shareBtn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--rrda-card-bg);
	border: 1px solid var(--rrda-border);
	color: var(--rrda-body);
	text-decoration: none;
	transition: transform var(--rr-dur-fast) var(--rr-ease-out),
	            background-color var(--rr-dur-fast) var(--rr-ease-out),
	            border-color var(--rr-dur-fast) var(--rr-ease-out),
	            color var(--rr-dur-fast) var(--rr-ease-out),
	            box-shadow var(--rr-dur-fast) var(--rr-ease-out);
}
.rrDocsArt .rrDocsArt__shareBtn:hover {
	transform: translateY(-2px);
	border-color: transparent;
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	box-shadow: var(--rr-shadow-brand-sm);
}
.rrDocsArt .rrDocsArt__shareBtn svg { width: 14px; height: 14px; }

.rrDocsArt__updated {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	margin-top: var(--rr-space-6);
	padding: 6px 12px;
	background: color-mix(in srgb, var(--rrda-soft) 6%, transparent);
	border: 1px solid var(--rrda-border);
	border-radius: var(--rr-radius-pill);
	font-size: var(--rr-fs-xs);
	color: var(--rrda-soft);
	font-weight: 500;
	position: relative;
	z-index: 2;
}
.rrDocsArt__updatedIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	color: var(--rrda-accent);
	flex-shrink: 0;
}
.rrDocsArt__updatedIcon svg { width: 14px; height: 14px; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1100px) {
	.rrDocsArt__wrap { grid-template-columns: 240px minmax(0, 1fr); gap: var(--rr-space-6); }
	.rrDocsArt__main { padding: var(--rr-space-10); }
}

@media (max-width: 960px) {
	.rrDocsArt__wrap { grid-template-columns: 1fr; gap: var(--rr-space-5); }
	.rrDocsArt__side {
		position: static;
		max-height: none;
		overflow: visible;
	}
	.rrDocsArt__tocList { column-count: 1; }
}

@media (max-width: 640px) {
	.rrDocsArt { padding: var(--rr-space-5) var(--rr-space-4) var(--rr-space-12); }
	.rrDocsArt__main { padding: var(--rr-space-6) var(--rr-space-5) var(--rr-space-8); border-radius: var(--rr-radius-lg); }
	.rrDocsArt__main::after { width: 140px; height: 140px; }
	.rrDocsArt__title { font-size: clamp(1.625rem, 6vw, 2.25rem); }
	.rrDocsArt__toc { padding: var(--rr-space-4) var(--rr-space-5); }
	.rrDocsArt__reactions { padding: var(--rr-space-4); }
	.rrDocsArt__articleTitle { font-size: var(--rr-fs-md); }
	.rrDocsArt__groupTitle { font-size: var(--rr-fs-h4); gap: var(--rr-space-3); }
	.rrDocsArt__groupTitle .rrDocsArt__sideIcon { width: 36px; height: 36px; }
	.rrDocsArt__groupTitle .rrDocsArt__sideIcon svg { width: 18px; height: 18px; }
	.rrDocsArt__article { padding-left: var(--rr-space-4); }
	.rrDocsArt__body pre { padding: var(--rr-space-9) var(--rr-space-4) var(--rr-space-4); }
}