/* TR Comment Leaderboard v1.2.0 - "Open Book Spread"
   Two facing pages: leaderboard left, Reading Room right.
   All rules scoped under .trcl-wrap with !important to beat theme
   overrides. No !important inside @keyframes (browsers ignore it). */

.trcl-wrap {
	--trcl-paper: #fdfaf3;
	--trcl-paper-edge: #f1e9d8;
	--trcl-ink: #2e2417;
	--trcl-ink-soft: #6b5d49;
	--trcl-rule: #e3d8c2;
	--trcl-gold: #b08a2e;
	--trcl-gold-bright: #d4af4f;
	--trcl-silver: #8e99a8;
	--trcl-bronze: #a96f3d;
	--trcl-ribbon: #a93226;
	max-width: 760px !important;
	margin: 2rem auto !important;
	font-family: 'Newsreader', Georgia, 'Times New Roman', serif !important;
}

/* When the Reading Room page is on, the book opens to full spread width */
.trcl-wrap.trcl-has-room {
	max-width: 1180px !important;
}

/* Optional breakout: escapes a narrow theme content column.
   Activate with [tr_comment_leaderboard breakout="yes"] */
.trcl-wrap.trcl-breakout {
	width: min(1180px, calc(100vw - 3rem)) !important;
	margin-left: 50% !important;
	transform: translateX(-50%) !important;
}

.trcl-wrap *,
.trcl-wrap *::before,
.trcl-wrap *::after {
	box-sizing: border-box !important;
}

/* The open book */
.trcl-book {
	position: relative !important;
	display: flex !important;
	align-items: stretch !important;
	border-radius: 14px !important;
	box-shadow:
		0 18px 45px rgba(94, 75, 40, 0.22),
		0 3px 8px rgba(94, 75, 40, 0.14) !important;
}

.trcl-page {
	position: relative !important;
	flex: 1 1 50% !important;
	min-width: 0 !important;
	padding: 2rem 2rem 3rem !important;
	border: 1px solid var(--trcl-paper-edge) !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Left page: shading falls toward the gutter on its right edge */
.trcl-page-left {
	border-radius: 14px 0 0 14px !important;
	border-right: 0 !important;
	background:
		linear-gradient(270deg, rgba(86, 66, 32, 0.13) 0, rgba(86, 66, 32, 0.04) 22px, rgba(0, 0, 0, 0) 60px),
		linear-gradient(180deg, #fffdf8 0%, var(--trcl-paper) 30%, #faf5ea 100%) !important;
	padding-left: 2.2rem !important;
}

/* Right page: shading falls from the gutter on its left edge, ribbon on top */
.trcl-page-right {
	border-radius: 0 14px 14px 0 !important;
	border-left: 0 !important;
	background:
		linear-gradient(90deg, rgba(86, 66, 32, 0.13) 0, rgba(86, 66, 32, 0.04) 22px, rgba(0, 0, 0, 0) 60px),
		linear-gradient(180deg, #fffdf8 0%, var(--trcl-paper) 30%, #faf5ea 100%) !important;
	padding-right: 2.2rem !important;
}

/* Centre spine line */
.trcl-page-right::before {
	content: '' !important;
	position: absolute !important;
	top: 10px !important;
	bottom: 10px !important;
	left: 0 !important;
	width: 0 !important;
	border-left: 1px solid rgba(110, 90, 55, 0.3) !important;
	pointer-events: none !important;
}

/* Ribbon bookmark draped over the right page */
.trcl-page-right::after {
	content: '' !important;
	position: absolute !important;
	top: -8px !important;
	right: 38px !important;
	width: 26px !important;
	height: 86px !important;
	background: linear-gradient(180deg, #c0392b, var(--trcl-ribbon) 70%) !important;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%) !important;
	box-shadow: 0 4px 8px rgba(94, 40, 30, 0.3) !important;
	pointer-events: none !important;
}

/* If the Reading Room is off, the single page keeps the ribbon + spine stitch */
.trcl-wrap:not(.trcl-has-room) .trcl-page-left {
	border-radius: 4px 14px 14px 4px !important;
	border-right: 1px solid var(--trcl-paper-edge) !important;
}

.trcl-wrap:not(.trcl-has-room) .trcl-page-left::before {
	content: '' !important;
	position: absolute !important;
	top: 14px !important;
	bottom: 14px !important;
	left: 11px !important;
	width: 0 !important;
	border-left: 2px dashed rgba(110, 90, 55, 0.28) !important;
	pointer-events: none !important;
}

.trcl-wrap:not(.trcl-has-room) .trcl-page-left::after {
	content: '' !important;
	position: absolute !important;
	top: -8px !important;
	right: 38px !important;
	width: 26px !important;
	height: 86px !important;
	background: linear-gradient(180deg, #c0392b, var(--trcl-ribbon) 70%) !important;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%) !important;
	box-shadow: 0 4px 8px rgba(94, 40, 30, 0.3) !important;
	pointer-events: none !important;
}

/* Folio lines (running footers) */
.trcl-folio {
	position: absolute !important;
	bottom: 0.9rem !important;
	font-size: 0.72rem !important;
	font-variant: small-caps !important;
	letter-spacing: 0.18em !important;
	color: #b3a583 !important;
	text-transform: lowercase !important;
}

.trcl-folio-left {
	left: 2.2rem !important;
}

.trcl-folio-right {
	right: 2.2rem !important;
}

/* Header */
.trcl-header {
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	margin: 0 0 0.4rem !important;
}

.trcl-trophy {
	width: 54px !important;
	height: 54px !important;
	flex: 0 0 54px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	color: var(--trcl-gold) !important;
	background: radial-gradient(circle at 32% 28%, #fbf3dd, #f2e6c8) !important;
	border: 1px solid #e0d0a8 !important;
	box-shadow: 0 2px 5px rgba(140, 110, 50, 0.2), 0 1px 0 #fff inset !important;
}

.trcl-trophy svg {
	width: 28px !important;
	height: 28px !important;
}

.trcl-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Newsreader', Georgia, serif !important;
	font-size: 1.9rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	color: var(--trcl-ink) !important;
	line-height: 1.1 !important;
}

.trcl-subtitle {
	margin: 0.25rem 0 0 !important;
	padding: 0 !important;
	font-size: 1rem !important;
	font-style: italic !important;
	color: var(--trcl-ink-soft) !important;
	line-height: 1.35 !important;
}

.trcl-titles {
	border-bottom: 3px double var(--trcl-rule) !important;
	padding-bottom: 0.7rem !important;
	flex: 1 1 auto !important;
}

.trcl-header + .trcl-tabs,
.trcl-header + .trcl-list {
	margin-top: 1.1rem !important;
}

/* Tabs */
.trcl-tabs {
	display: flex !important;
	gap: 0.5rem !important;
	margin: 0 0 1.1rem !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.trcl-tab {
	appearance: none !important;
	background: #f6efdf !important;
	border: 1px solid var(--trcl-rule) !important;
	border-radius: 999px !important;
	padding: 0.42rem 1.05rem !important;
	font-family: 'Newsreader', Georgia, serif !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	font-variant: small-caps !important;
	letter-spacing: 0.06em !important;
	text-transform: lowercase !important;
	color: var(--trcl-ink-soft) !important;
	cursor: pointer !important;
	transition: all 0.18s ease !important;
	box-shadow: 0 1px 0 #fff inset !important;
}

.trcl-tab:hover {
	color: var(--trcl-ink) !important;
	border-color: var(--trcl-gold) !important;
	background: #fbf5e6 !important;
}

.trcl-tab-active,
.trcl-tab-active:hover {
	color: #fffdf6 !important;
	background: linear-gradient(180deg, #3a2e1d, var(--trcl-ink)) !important;
	border-color: var(--trcl-ink) !important;
	box-shadow: 0 2px 5px rgba(46, 36, 23, 0.3) !important;
}

/* List */
.trcl-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.trcl-row {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--trcl-rule) !important;
	border-radius: 0 !important;
	overflow: visible !important;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease, background 0.18s ease;
}

.trcl-row:last-child {
	border-bottom: 0 !important;
}

.trcl-loaded .trcl-row,
.trcl-noscript .trcl-row {
	opacity: 1;
	transform: translateY(0);
}

.trcl-loaded .trcl-row:nth-child(1)  { transition-delay: 0.04s; }
.trcl-loaded .trcl-row:nth-child(2)  { transition-delay: 0.08s; }
.trcl-loaded .trcl-row:nth-child(3)  { transition-delay: 0.12s; }
.trcl-loaded .trcl-row:nth-child(4)  { transition-delay: 0.16s; }
.trcl-loaded .trcl-row:nth-child(5)  { transition-delay: 0.20s; }
.trcl-loaded .trcl-row:nth-child(6)  { transition-delay: 0.24s; }
.trcl-loaded .trcl-row:nth-child(7)  { transition-delay: 0.28s; }
.trcl-loaded .trcl-row:nth-child(8)  { transition-delay: 0.32s; }
.trcl-loaded .trcl-row:nth-child(9)  { transition-delay: 0.36s; }
.trcl-loaded .trcl-row:nth-child(10) { transition-delay: 0.40s; }

.trcl-link {
	display: flex !important;
	align-items: center !important;
	gap: 1rem !important;
	padding: 0.85rem 0.5rem !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 6px !important;
	transition: background 0.18s ease !important;
}

.trcl-row:hover .trcl-link {
	background: rgba(176, 138, 46, 0.07) !important;
}

/* Rank seals */
.trcl-rank {
	position: relative !important;
	flex: 0 0 44px !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	font-family: 'Newsreader', Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 1.15rem !important;
	color: var(--trcl-ink-soft) !important;
	background: transparent !important;
	border: 0 !important;
}

.trcl-rank-rest .trcl-rank {
	font-style: italic !important;
	font-size: 1.05rem !important;
}

.trcl-rank-num {
	color: inherit !important;
	font-size: inherit !important;
	line-height: 1 !important;
}

.trcl-rank-1 .trcl-rank,
.trcl-rank-2 .trcl-rank,
.trcl-rank-3 .trcl-rank {
	color: #fffdf6 !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
	box-shadow:
		0 0 0 3px var(--trcl-paper) inset,
		0 2px 5px rgba(80, 60, 20, 0.35) !important;
}

.trcl-rank-1 .trcl-rank {
	background: radial-gradient(circle at 32% 28%, var(--trcl-gold-bright), var(--trcl-gold) 60%, #8a691e) !important;
	border: 1px solid #8a691e !important;
}

.trcl-rank-2 .trcl-rank {
	background: radial-gradient(circle at 32% 28%, #c4cdd8, var(--trcl-silver) 60%, #6c7787) !important;
	border: 1px solid #6c7787 !important;
}

.trcl-rank-3 .trcl-rank {
	background: radial-gradient(circle at 32% 28%, #c98f56, var(--trcl-bronze) 60%, #7e5128) !important;
	border: 1px solid #7e5128 !important;
}

.trcl-crown {
	position: absolute !important;
	top: -12px !important;
	left: 50% !important;
	transform: translateX(-50%) rotate(-8deg) !important;
	width: 19px !important;
	height: 15px !important;
	color: var(--trcl-gold) !important;
	filter: drop-shadow(0 1px 2px rgba(120, 90, 30, 0.5)) !important;
}

.trcl-crown svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

/* Thumbnails */
.trcl-thumb {
	flex: 0 0 48px !important;
	width: 48px !important;
	height: 48px !important;
	border-radius: 3px !important;
	object-fit: cover !important;
	display: block !important;
	border: 3px solid #fff !important;
	box-shadow: 0 2px 6px rgba(90, 70, 35, 0.25) !important;
	transform: rotate(-1.5deg) !important;
}

.trcl-thumb-fallback {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #c9b98f !important;
	background: #f6efdf !important;
}

.trcl-thumb-fallback svg {
	width: 22px !important;
	height: 22px !important;
}

/* Title + bar */
.trcl-info {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.45rem !important;
}

.trcl-post-title {
	color: var(--trcl-ink) !important;
	font-family: 'Newsreader', Georgia, serif !important;
	font-size: 1.08rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}

.trcl-row:hover .trcl-post-title {
	color: var(--trcl-gold) !important;
}

.trcl-bar {
	display: block !important;
	height: 4px !important;
	border-radius: 99px !important;
	background: #efe6d0 !important;
	overflow: hidden !important;
}

.trcl-bar-fill {
	display: block !important;
	height: 100% !important;
	width: 0 !important;
	border-radius: 99px !important;
	background: linear-gradient(90deg, var(--trcl-gold), var(--trcl-gold-bright)) !important;
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.trcl-rank-2 .trcl-bar-fill {
	background: linear-gradient(90deg, #76828f, var(--trcl-silver)) !important;
}

.trcl-rank-3 .trcl-bar-fill {
	background: linear-gradient(90deg, #8a5a2d, var(--trcl-bronze)) !important;
}

.trcl-loaded .trcl-bar-fill {
	width: var(--trcl-pct) !important;
}

/* Score */
.trcl-score {
	flex: 0 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 0.12rem !important;
	min-width: 70px !important;
}

.trcl-bubble {
	width: 15px !important;
	height: 15px !important;
	color: var(--trcl-gold) !important;
	opacity: 0.85 !important;
}

.trcl-score-num {
	font-family: 'Newsreader', Georgia, serif !important;
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	color: var(--trcl-ink) !important;
	line-height: 1 !important;
	font-variant-numeric: tabular-nums !important;
}

.trcl-score-label {
	font-size: 0.64rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: var(--trcl-ink-soft) !important;
}

/* Empty + loading */
.trcl-empty {
	text-align: center !important;
	color: var(--trcl-ink-soft) !important;
	font-style: italic !important;
	font-size: 1rem !important;
	padding: 1.6rem 0 0.4rem !important;
}

.trcl-loading .trcl-list,
.trcl-loading .trcl-readers-holder {
	opacity: 0.35 !important;
	pointer-events: none !important;
	transition: opacity 0.2s ease !important;
}

/* ---------------------------------------------------------------
   Reading Room (right page)
   --------------------------------------------------------------- */

.trcl-room-header {
	padding-left: 1rem !important;
	border-bottom: 3px double var(--trcl-rule) !important;
	padding-bottom: 0.7rem !important;
	margin: 0.35rem 0 1.2rem !important;
}

.trcl-room-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Newsreader', Georgia, serif !important;
	font-size: 1.55rem !important;
	font-weight: 600 !important;
	color: var(--trcl-ink) !important;
	line-height: 1.15 !important;
}

.trcl-room-sub {
	margin: 0.25rem 0 0 !important;
	padding: 0 !important;
	font-size: 0.95rem !important;
	font-style: italic !important;
	color: var(--trcl-ink-soft) !important;
}

.trcl-room-section {
	padding-left: 1rem !important;
	margin: 0 0 1.4rem !important;
}

.trcl-room-heading {
	margin: 0 0 0.7rem !important;
	padding: 0 !important;
	font-family: 'Newsreader', Georgia, serif !important;
	font-size: 0.86rem !important;
	font-weight: 700 !important;
	font-variant: small-caps !important;
	text-transform: lowercase !important;
	letter-spacing: 0.16em !important;
	color: var(--trcl-gold) !important;
}

/* Top Readers */
.trcl-readers {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.trcl-reader {
	display: flex !important;
	align-items: center !important;
	gap: 0.7rem !important;
	margin: 0 !important;
	padding: 0.45rem 0.2rem !important;
	border-bottom: 1px solid var(--trcl-rule) !important;
}

.trcl-reader:last-child {
	border-bottom: 0 !important;
}

.trcl-reader-rank {
	flex: 0 0 26px !important;
	width: 26px !important;
	height: 26px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 50% !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: var(--trcl-ink-soft) !important;
}

.trcl-seal-1 {
	color: #fffdf6 !important;
	background: radial-gradient(circle at 32% 28%, var(--trcl-gold-bright), var(--trcl-gold) 60%, #8a691e) !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.trcl-seal-2 {
	color: #fffdf6 !important;
	background: radial-gradient(circle at 32% 28%, #c4cdd8, var(--trcl-silver) 60%, #6c7787) !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.trcl-seal-3 {
	color: #fffdf6 !important;
	background: radial-gradient(circle at 32% 28%, #c98f56, var(--trcl-bronze) 60%, #7e5128) !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}

.trcl-seal-rest {
	font-style: italic !important;
}

.trcl-reader-avatar {
	flex: 0 0 32px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	display: block !important;
	border: 2px solid #fff !important;
	box-shadow: 0 1px 4px rgba(90, 70, 35, 0.3) !important;
	filter: sepia(0.18) !important;
}

.trcl-reader-name {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	font-size: 0.98rem !important;
	font-weight: 600 !important;
	color: var(--trcl-ink) !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.trcl-reader-score {
	flex: 0 0 auto !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--trcl-gold) !important;
	font-variant-numeric: tabular-nums !important;
}

.trcl-room-empty {
	margin: 0 !important;
	font-style: italic !important;
	font-size: 0.92rem !important;
	color: var(--trcl-ink-soft) !important;
}

.trcl-xp-note {
	margin: 0.7rem 0 0 !important;
	padding: 0.45rem 0.7rem !important;
	font-size: 0.82rem !important;
	font-style: italic !important;
	color: var(--trcl-ink-soft) !important;
	background: rgba(176, 138, 46, 0.08) !important;
	border: 1px dashed rgba(176, 138, 46, 0.35) !important;
	border-radius: 6px !important;
	text-align: center !important;
}

.trcl-xp-note strong {
	color: var(--trcl-gold) !important;
	font-style: normal !important;
	font-weight: 700 !important;
}

/* Margin notes */
.trcl-notes {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.trcl-note {
	margin: 0 0 0.85rem !important;
	padding: 0 0 0 0.85rem !important;
	border-left: 3px solid var(--trcl-rule) !important;
}

.trcl-note:last-child {
	margin-bottom: 0 !important;
}

.trcl-note-link {
	display: block !important;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.trcl-note:hover {
	border-left-color: var(--trcl-gold) !important;
}

.trcl-note-text {
	display: block !important;
	font-size: 0.96rem !important;
	font-style: italic !important;
	color: var(--trcl-ink) !important;
	line-height: 1.45 !important;
}

.trcl-note-meta {
	display: block !important;
	margin-top: 0.25rem !important;
	font-size: 0.8rem !important;
	color: var(--trcl-ink-soft) !important;
}

.trcl-note-meta em {
	font-style: italic !important;
}

/* Colophon */
.trcl-colophon {
	margin-top: auto !important;
	padding: 0.9rem 0 0.4rem 1rem !important;
	border-top: 1px solid var(--trcl-rule) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.7rem !important;
	font-size: 0.86rem !important;
	color: var(--trcl-ink-soft) !important;
}

.trcl-colophon strong {
	color: var(--trcl-ink) !important;
	font-weight: 700 !important;
}

.trcl-stat-sep {
	color: var(--trcl-gold) !important;
}

/* ---------------------------------------------------------------
   Responsive: pages stack on narrow screens
   --------------------------------------------------------------- */

@media (max-width: 880px) {
	.trcl-book {
		flex-direction: column !important;
	}
	.trcl-page-left {
		border-radius: 14px 14px 0 0 !important;
		border-right: 1px solid var(--trcl-paper-edge) !important;
		border-bottom: 0 !important;
		padding-left: 2rem !important;
	}
	.trcl-page-right {
		border-radius: 0 0 14px 14px !important;
		border-left: 1px solid var(--trcl-paper-edge) !important;
		border-top: 0 !important;
		padding-right: 2rem !important;
		background: linear-gradient(180deg, #faf5ea 0%, var(--trcl-paper) 25%, #faf5ea 100%) !important;
	}
	.trcl-page-right::before {
		top: 0 !important;
		bottom: auto !important;
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
		border-left: 0 !important;
		border-top: 1px solid rgba(110, 90, 55, 0.3) !important;
	}
	.trcl-page-right::after {
		display: none !important;
	}
	.trcl-wrap.trcl-breakout {
		width: auto !important;
		margin-left: auto !important;
		transform: none !important;
	}
}

@media (max-width: 560px) {
	.trcl-page {
		padding: 1.4rem 1.1rem 2.6rem 1.3rem !important;
	}
	.trcl-title {
		font-size: 1.45rem !important;
	}
	.trcl-thumb {
		display: none !important;
	}
	.trcl-score {
		min-width: 56px !important;
	}
	.trcl-post-title {
		font-size: 0.98rem !important;
	}
	.trcl-tab {
		padding: 0.38rem 0.8rem !important;
		font-size: 0.8rem !important;
	}
	.trcl-folio-left {
		left: 1.3rem !important;
	}
	.trcl-folio-right {
		right: 1.3rem !important;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.trcl-row {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.trcl-bar-fill {
		transition: none !important;
	}
}