/*
 * SHIVUK: הכי אהובים — the most-liked leaderboard widget (inc/widgets.php,
 * SHIVUK_Widget_Top_Liked).
 *
 * A deliberately dark panel inside an otherwise light sidebar: the widget is
 * a readout, not an article, and the contrast is what makes a small ranked
 * list read as "live data" next to the editorial cards around it. Everything
 * neon derives from --shivuk-color-accent through color-mix, so the panel
 * follows the brand rather than pinning a second one.
 *
 * The period switch is a radio group with no script behind it — see the class
 * docblock. The nth-of-type pairs below are the whole mechanism: radio N
 * checked lights tab N and shows panel N, for as many periods as the admin
 * enabled (four is the maximum the widget offers).
 */

.widget-top-liked {
	--tl-ink: #060b16;
	--tl-ink-soft: #0d1526;
	--tl-neon: color-mix(in srgb, var(--shivuk-color-accent) 62%, #6fe8ff);
	--tl-heart: #ff5f9e;
	--tl-text: #e9f2fb;
	--tl-muted: rgba(233, 242, 251, 0.56);
	--tl-line: rgba(233, 242, 251, 0.1);
	--tl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	overflow: hidden;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--shivuk-color-accent) 34%, transparent);
	border-radius: var(--shivuk-radius-lg);
	background:
		radial-gradient(115% 85% at 100% 0%, color-mix(in srgb, var(--shivuk-color-accent) 34%, transparent), transparent 58%),
		radial-gradient(95% 75% at 0% 100%, color-mix(in srgb, var(--tl-neon) 20%, transparent), transparent 60%),
		linear-gradient(168deg, var(--tl-ink-soft), var(--tl-ink) 82%);
	color: var(--tl-text);
	box-shadow: 0 16px 38px rgba(6, 11, 22, 0.26);
}

.widget-top-liked *:focus-visible {
	outline: 2px solid var(--tl-neon);
	outline-offset: 2px;
}

.tl-deck {
	position: relative;
	isolation: isolate;
	padding: calc(var(--shivuk-space) * 0.85) calc(var(--shivuk-space) * 0.8);
}

/* The faint circuit grid the content sits on. Masked so it fades out before
   it reaches the bottom edge, where the list already carries enough texture. */
.tl-deck::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(var(--tl-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--tl-line) 1px, transparent 1px);
	background-size: 34px 34px, 34px 34px;
	opacity: 0.5;
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
	mask-image: linear-gradient(to bottom, #000, transparent 78%);
	pointer-events: none;
}

/* A single neon line sweeping down the panel — the one piece of motion in the
   widget, slow enough to register as ambient rather than as an animation
   asking to be watched. */
.tl-scan {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.tl-scan::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 32%;
	background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--tl-neon) 12%, transparent), transparent);
	animation: tl-sweep 7s linear infinite;
}

@keyframes tl-sweep {
	from { transform: translateY(-120%); }
	to { transform: translateY(420%); }
}

/* -----------------------------------------------------------------------
   Head
   ----------------------------------------------------------------------- */
.tl-head {
	margin-block-end: 0.9rem;
}

.tl-kicker {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--tl-neon);
}

.tl-pulse {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--tl-neon);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--tl-neon) 60%, transparent);
	animation: tl-pulse 2.4s var(--tl-ease) infinite;
}

@keyframes tl-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tl-neon) 55%, transparent); }
	70% { box-shadow: 0 0 0 8px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.tl-title {
	margin: 0.35rem 0 0;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-shadow: 0 0 22px color-mix(in srgb, var(--tl-neon) 45%, transparent);
}

/* -----------------------------------------------------------------------
   Period switch
   ----------------------------------------------------------------------- */

/* Off-screen but still focusable and still hit-testable by its label — the
   radios are the state machine, the labels are the only visible part. */
.tl-radio {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.tl-tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: rgba(233, 242, 251, 0.04);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.tl-tab {
	flex: 1 1 0;
	padding: 0.42rem 0.35rem;
	border-radius: 999px;
	color: var(--tl-muted);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.25s var(--tl-ease), background 0.25s var(--tl-ease), box-shadow 0.25s var(--tl-ease);
}

.tl-tab:hover {
	color: var(--tl-text);
}

.tl-radio:nth-of-type(1):checked ~ .tl-tabs .tl-tab:nth-of-type(1),
.tl-radio:nth-of-type(2):checked ~ .tl-tabs .tl-tab:nth-of-type(2),
.tl-radio:nth-of-type(3):checked ~ .tl-tabs .tl-tab:nth-of-type(3),
.tl-radio:nth-of-type(4):checked ~ .tl-tabs .tl-tab:nth-of-type(4) {
	background: linear-gradient(160deg, var(--shivuk-color-accent), color-mix(in srgb, var(--tl-neon) 65%, var(--shivuk-color-accent)));
	color: #ffffff;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--shivuk-color-accent) 45%, transparent);
}

/* The label carries the focus ring for its radio, since the radio itself is
   the invisible half of the pair. */
.tl-radio:nth-of-type(1):focus-visible ~ .tl-tabs .tl-tab:nth-of-type(1),
.tl-radio:nth-of-type(2):focus-visible ~ .tl-tabs .tl-tab:nth-of-type(2),
.tl-radio:nth-of-type(3):focus-visible ~ .tl-tabs .tl-tab:nth-of-type(3),
.tl-radio:nth-of-type(4):focus-visible ~ .tl-tabs .tl-tab:nth-of-type(4) {
	outline: 2px solid var(--tl-neon);
	outline-offset: 2px;
}

.tl-panel {
	display: none;
}

.tl-radio:nth-of-type(1):checked ~ .tl-panels .tl-panel:nth-of-type(1),
.tl-radio:nth-of-type(2):checked ~ .tl-panels .tl-panel:nth-of-type(2),
.tl-radio:nth-of-type(3):checked ~ .tl-panels .tl-panel:nth-of-type(3),
.tl-radio:nth-of-type(4):checked ~ .tl-panels .tl-panel:nth-of-type(4) {
	display: block;
	animation: tl-enter 0.4s var(--tl-ease) both;
}

@keyframes tl-enter {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------
   The ranking
   ----------------------------------------------------------------------- */
.tl-panels {
	margin-block-start: 0.9rem;
}

.tl-list {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tl-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.tl-rank {
	flex: 0 0 auto;
	inline-size: 1.7em;
	font-size: 0.78rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	text-align: center;
	color: color-mix(in srgb, var(--tl-neon) 80%, transparent);
}

.tl-card {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-inline-size: 0;
	padding: 0.5rem;
	border: 1px solid transparent;
	border-radius: 12px;
	background: rgba(233, 242, 251, 0.035);
	color: inherit;
	text-decoration: none;
	transition: background 0.28s var(--tl-ease), border-color 0.28s var(--tl-ease), transform 0.28s var(--tl-ease);
}

.tl-card:hover,
.tl-card:focus-visible {
	background: rgba(233, 242, 251, 0.08);
	border-color: color-mix(in srgb, var(--tl-neon) 42%, transparent);
	transform: translateY(-2px);
}

.tl-thumb {
	position: relative;
	flex: 0 0 auto;
	display: block;
	inline-size: 46px;
	block-size: 46px;
	overflow: hidden;
	border-radius: 10px;
	background: linear-gradient(150deg, color-mix(in srgb, var(--shivuk-color-accent) 55%, var(--tl-ink)), var(--tl-ink));
	box-shadow: 0 0 0 1px var(--tl-line);
}

.tl-thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: saturate(1.05) contrast(1.04);
	transition: transform 0.4s var(--tl-ease);
}

.tl-card:hover .tl-thumb img {
	transform: scale(1.07);
}

.tl-thumb--empty::before {
	content: attr(data-initial);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.15rem;
	font-weight: 800;
	color: color-mix(in srgb, var(--tl-neon) 85%, transparent);
}

.tl-info {
	display: block;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.tl-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: 0.87rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tl-text);
}

.tl-card:hover .tl-name {
	color: #ffffff;
}

/* Share of the leader's score, not an absolute scale — a quiet week still
   fills its own bar, which is the honest reading of that week. */
.tl-meter {
	display: block;
	block-size: 3px;
	margin-block: 0.4rem 0.35rem;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(233, 242, 251, 0.09);
}

.tl-meter__fill {
	display: block;
	inline-size: var(--tl-share, 0%);
	block-size: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, color-mix(in srgb, var(--tl-neon) 75%, transparent), var(--shivuk-color-accent));
	box-shadow: 0 0 10px color-mix(in srgb, var(--tl-neon) 55%, transparent);
	animation: tl-fill 0.9s var(--tl-ease) both;
}

@keyframes tl-fill {
	from { inline-size: 0; }
	to { inline-size: var(--tl-share, 0%); }
}

.tl-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.72rem;
	color: var(--tl-muted);
}

.tl-likes {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--tl-heart);
}

.tl-likes svg {
	inline-size: 12px;
	block-size: 12px;
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--tl-heart) 55%, transparent));
}

.tl-date {
	letter-spacing: 0.01em;
}

/* The leader gets the visual weight the number alone can't carry at 12px. */
.tl-row--lead .tl-rank {
	font-size: 0.92rem;
	color: #ffffff;
	text-shadow: 0 0 12px var(--tl-neon);
}

.tl-row--lead .tl-card {
	border-color: color-mix(in srgb, var(--tl-neon) 34%, transparent);
	background:
		linear-gradient(140deg, color-mix(in srgb, var(--shivuk-color-accent) 26%, transparent), transparent 62%),
		rgba(233, 242, 251, 0.05);
}

.tl-row--lead .tl-thumb {
	inline-size: 56px;
	block-size: 56px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--tl-neon) 45%, transparent), 0 6px 18px rgba(6, 11, 22, 0.4);
}

.tl-row--lead .tl-name {
	font-size: 0.94rem;
	font-weight: 700;
}

.tl-empty {
	margin: 0;
	padding: 1.1rem 0.75rem;
	border: 1px dashed var(--tl-line);
	border-radius: 12px;
	color: var(--tl-muted);
	font-size: 0.82rem;
	text-align: center;
}

.tl-note {
	margin: 0.7rem 0 0;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--tl-muted);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.tl-scan::after,
	.tl-pulse {
		animation: none;
	}

	.tl-radio:checked ~ .tl-panels .tl-panel,
	.tl-meter__fill {
		animation: none;
	}

	.tl-card,
	.tl-thumb img,
	.tl-tab {
		transition: none;
	}

	.tl-card:hover,
	.tl-card:focus-visible {
		transform: none;
	}

	.tl-card:hover .tl-thumb img {
		transform: none;
	}
}