/* ============================================================
 * Crest — Badges & Crests (Gamification) System
 * Soft honor-crest aesthetic: silver, brass, champagne gold, platinum.
 * Adapts to light + dark skins via body[data-bg="dark"].
 * ============================================================ */

:root {
	--crest-ink: #3d4451;
	--crest-ink-soft: #7a828f;
	--crest-line: rgba(120, 113, 96, 0.22);
	--crest-card: rgba(255, 255, 255, 0.72);
	--crest-card-solid: #f7f4ec;
	--crest-track: rgba(120, 113, 96, 0.16);
	--crest-silver-1: #f4f5f7;
	--crest-silver-2: #d7dbe0;
	--crest-brass-1: #eceef1;
	--crest-brass-2: #c6ccd3;
	--crest-gold-1: #e2e5e9;
	--crest-gold-2: #b2b8c0;
	--crest-platinum-1: #d6dae0;
	--crest-platinum-2: #9fa6b0;
	--crest-accent: #8a7a52;
}

body[data-bg="dark"] {
	--crest-ink: #d9d4c5;
	--crest-ink-soft: #97907e;
	--crest-line: rgba(190, 175, 140, 0.22);
	--crest-card: rgba(32, 38, 48, 0.66);
	--crest-card-solid: #232a36;
	--crest-track: rgba(190, 175, 140, 0.16);
	--crest-silver-1: #3a424e;
	--crest-silver-2: #232a34;
	--crest-brass-1: #353c46;
	--crest-brass-2: #212732;
	--crest-gold-1: #30363f;
	--crest-gold-2: #1e232b;
	--crest-platinum-1: #2b313a;
	--crest-platinum-2: #1a1f26;
	--crest-accent: #c2ad7c;
}

/* ---------------- Sidebar widget ---------------- */

.crest-widget {
	background: var(--crest-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--crest-line);
	border-radius: 16px;
	padding: 16px;
	margin-bottom: 16px;
	color: var(--crest-ink);
}

.crest-widget__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}

.crest-widget__title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.crest-widget__title small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--crest-ink-soft);
}

.crest-widget__count {
	font-size: 12px;
	color: var(--crest-ink-soft);
	white-space: nowrap;
}

.crest-widget__viewall {
	display: block;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--cl-primary-link-color, var(--cl-primary-color));
	padding: 8px 0 2px;
	text-decoration: none;
}

.crest-widget__viewall:hover {
	color: var(--crest-ink);
	text-decoration: none;
}

.crest-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 0;
	margin-bottom: 15px;
}

.crest-row:last-child {
	margin-bottom: 0;
}

.crest-row__meta {
	min-width: 0;
	flex: 1;
}

.crest-row__name {
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.crest-row__sub {
	font-size: 12px;
	color: var(--crest-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.crest-latest {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--crest-line);
	border-radius: 12px;
	padding: 10px 12px;
	margin-top: 10px;
	background: var(--crest-card);
}

.crest-latest__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cl-secondary-text-color);
}

.crest-streak {
	margin-top: 12px;
}

.crest-streak__topline {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	margin-bottom: 6px;
	color: var(--crest-ink-soft);
}

.crest-streak__topline strong {
	color: var(--crest-ink);
	font-weight: 700;
}

.crest-progress {
	height: 6px;
	border-radius: 99px;
	background: var(--crest-track);
	overflow: hidden;
}

.crest-progress > span {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--crest-brass-2), var(--crest-gold-2));
	transition: width 0.6s ease;
}

.crest-empty {
	font-size: 13px;
	color: var(--crest-ink-soft);
	text-align: center;
	padding: 10px 4px;
}

/* ---------------- Seal / medal ---------------- */

.crest-seal {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #5c626b;
	background: linear-gradient(145deg, var(--crest-silver-1), var(--crest-silver-2));
	border: 1px solid var(--crest-line);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(70, 75, 85, 0.18);
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

body[data-bg="dark"] .crest-seal {
	color: #ccd2d9;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.crest-seal svg {
	width: 55%;
	height: 55%;
}

.crest-seal--md {
	width: 46px;
	height: 46px;
}

.crest-seal--lg {
	width: 84px;
	height: 84px;
}

.crest-seal.tier-silver {
	background: linear-gradient(145deg, var(--crest-silver-1), var(--crest-silver-2));
	color: #5c626b;
}

.crest-seal.tier-brass {
	background: linear-gradient(145deg, var(--crest-brass-1), var(--crest-brass-2));
	color: #5c626b;
}

.crest-seal.tier-gold {
	background: linear-gradient(145deg, var(--crest-gold-1), var(--crest-gold-2));
	color: #5c626b;
}

.crest-seal.tier-platinum {
	background: linear-gradient(145deg, var(--crest-platinum-1), var(--crest-platinum-2));
	color: #4e555f;
}

body[data-bg="dark"] .crest-seal.tier-silver,
body[data-bg="dark"] .crest-seal.tier-brass,
body[data-bg="dark"] .crest-seal.tier-gold,
body[data-bg="dark"] .crest-seal.tier-platinum {
	color: #ccd2d9;
}

.crest-seal--locked {
	opacity: 0.42;
	filter: grayscale(0.7);
}

/* gentle shimmer sweep on hover */
.crest-seal::after,
.crest-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 55%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-18deg);
	transition: left 0.7s ease;
	pointer-events: none;
}

.crest-row:hover .crest-seal,
.crest-card:hover .crest-seal {
	transform: scale(1.06);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.4), 0 4px 14px rgba(70, 75, 85, 0.28);
}

.crest-row:hover .crest-seal::after,
.crest-card:hover::after {
	left: 130%;
}

/* ---------------- Profile grid ---------------- */

.crest-section {
	padding: 10px 16px 0;
}

.crest-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 8px 0 0;
	color: var(--crest-ink);
}

.crest-section__head h4 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
}

.crest-section__head span {
	font-size: 12px;
	color: var(--crest-ink-soft);
	white-space: nowrap;
}

.crest-record-strip {
	margin: 8px 16px 0;
	padding: 10px 14px;
	border: 1px solid var(--crest-line);
	border-radius: 12px;
	font-size: 13px;
	color: var(--crest-ink);
	background: linear-gradient(135deg, rgba(212, 175, 90, 0.12), rgba(212, 175, 90, 0.03));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.crest-record-strip strong {
	font-weight: 700;
}

.crest-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 14px;
	padding: 12px 0 18px;
}

.crest-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 18px 12px 14px;
	border-radius: 16px;
	border: 1px solid var(--crest-line);
	background: var(--crest-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	color: var(--crest-ink);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.crest-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(120, 100, 60, 0.16);
}

.crest-card--locked {
	opacity: 0.75;
}

.crest-card__name {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.crest-card__descr {
	font-size: 12px;
	line-height: 1.45;
	color: var(--crest-ink-soft);
}

.crest-card__date {
	font-size: 11px;
	color: var(--crest-ink-soft);
}

.crest-card__prog {
	width: 100%;
	margin-top: 2px;
}

.crest-card__prog-label {
	font-size: 11.5px;
	color: var(--crest-ink-soft);
	margin-bottom: 5px;
}

/* ---------------- Mobile drawer (home) ---------------- */

.crest-mobile {
	display: none;
}

@media (max-width: 1199.98px) {
	.crest-mobile {
		display: block;
		margin: 0 12px 12px;
	}

	.crest-mobile__scroll {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		padding: 12px 14px;
		-webkit-overflow-scrolling: touch;
	}

	.crest-mobile__scroll::-webkit-scrollbar {
		height: 4px;
	}

	.crest-mobile__scroll::-webkit-scrollbar-thumb {
		background: var(--crest-track);
		border-radius: 99px;
	}

	.crest-mobile__item {
		flex: 1 1 0;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}

	.crest-mobile__item .crest-row {
		flex-wrap: nowrap;
		margin-bottom: 0;
	}

	.crest-mobile__item .crest-row__meta {
		min-width: 0;
		overflow: hidden;
	}

	.crest-mobile__item .crest-row__name,
	.crest-mobile__item .crest-row__sub {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ---------------- Placeholder stroke icons ---------------- */
/* The theme force-fills every placeholder glyph grey; stroke-style
   marks (e.g. the heart) must stay outline-only. */
body div.timeline-placeholder div.icon div.icon__bg svg path.tb-stroke {
	fill: none;
	stroke: var(--cl-secondary-text-color);
}

/* ---------------- Sidebar segment ---------------- */

.sidebar-content_crests .sidebar-content__header {
	justify-content: flex-start;
}

a.crest-row__link,
a.crest-row__link:hover,
a.crest-row__link:focus {
	color: inherit;
	text-decoration: none;
}

a.crest-row__link:hover .crest-row__name {
	color: var(--cl-primary-link-color, var(--cl-primary-color));
}

.crest-mobile__link {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cl-secondary-text-color);
	white-space: nowrap;
}

.crest-mobile__link:hover {
	color: var(--cl-primary-link-color, var(--cl-primary-color));
	text-decoration: none;
}

/* ---------------- New-crest toast ---------------- */

.crest-toast-holder {
	position: fixed;
	bottom: 76px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	pointer-events: none;
}

.crest-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(92vw, 380px);
	padding: 12px 16px 12px 12px;
	border-radius: 14px;
	border: 1px solid var(--crest-line);
	background: var(--crest-card-solid);
	color: var(--crest-ink);
	box-shadow: 0 10px 30px rgba(60, 50, 30, 0.22);
	animation: crest-toast-in 0.45s ease;
}

body[data-bg="dark"] .crest-toast {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.crest-toast__name {
	font-size: 13.5px;
	font-weight: 700;
}

.crest-toast__sub {
	font-size: 12px;
	color: var(--crest-ink-soft);
}

.crest-toast__close {
	margin-left: 4px;
	cursor: pointer;
	opacity: 0.6;
	font-size: 16px;
	line-height: 1;
}

.crest-toast__close:hover {
	opacity: 1;
}

@keyframes crest-toast-in {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.crest-seal,
	.crest-card,
	.crest-progress > span {
		transition: none;
	}

	.crest-toast {
		animation: none;
	}
}