/* Ranking pages — daily / weekly / monthly / all-time / readers (template daily-rank.php).
   "The Chart": kartu baris + angka peringkat Fraunces (rail kiri) sbg signature.
   SEMUA nilai dari token dn-design.css (0 literal font/size/spacing/warna). Scoped
   ke .dn-rank-main → tak bocor ke halaman lain. Dark-aware via token. Diganti dari
   dump inline legacy ~1120 baris (AMP-era) → file lean cacheable. */

/* Spesifisitas: lawan `main.container{max-width:--dn-page-w}` (site-chrome, 0,1,1). */
main.container.dn-rank-main {
	max-width: var(--dn-page-narrow);
}

/* Panel pembungkus (seragam dgn halaman lain yang memakai .m-card). */
.dn-rank-card { padding: var(--dn-space-lg); }
.dn-rank-card > :first-child { margin-top: 0; }
.dn-rank-card .dn-pagination:first-child { margin-top: 0; }

/* ── Kepala halaman (eyebrow + judul periode + lede) ─────────────────── */
.dn-rank-head { margin-bottom: var(--dn-space-xl); }
.dn-rank-head .dn-title { margin: 0; }
.dn-rank-head .dn-lede  { margin: var(--dn-space-xs) 0 0; }

/* ── Pemilih periode (tab pil, link server-render — tanpa JS) ─────────── */
/* Bar: tab pil (kiri, geser horizontal) + toggle list/grid (kanan, tetap). */
.dn-rank-tabbar {
	display: flex;
	align-items: center;
	gap: var(--dn-space-md);
	padding-bottom: var(--dn-space-md);
	margin-bottom: var(--dn-space-lg);
	border-bottom: 1px solid var(--dn-border);
}
.dn-rank-tabs {
	display: flex;
	gap: var(--dn-space-xs);
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.dn-rank-tabs::-webkit-scrollbar { display: none; }
/* Toggle dipisah dari tab dengan garis tipis → terbaca sebagai kontrol sendiri. */
.dn-rank-tabbar .nl-views {
	flex: 0 0 auto;
	padding-left: var(--dn-space-md);
	border-left: 1px solid var(--dn-border);
}
.dn-rank-tab {
	flex: 0 0 auto;
	font-family: var(--dn-font-head);
	font-size: var(--dn-fs-sm);
	font-weight: var(--dn-fw-medium);
	line-height: 1;
	padding: 9px 16px;
	border-radius: var(--dn-radius-pill);
	color: var(--dn-text-muted);
	background: var(--dn-surface-2);
	border: 1px solid var(--dn-border);
	white-space: nowrap;
	transition: color var(--dn-transition), background var(--dn-transition), border-color var(--dn-transition);
}
.dn-rank-tab:hover {
	color: var(--dn-brand-ink);
	background: var(--dn-brand-tint);
	border-color: var(--dn-brand);
}
.dn-rank-tab:focus-visible { outline: none; box-shadow: var(--dn-ring); }
.dn-rank-tab[aria-current="page"] {
	color: #fff;
	background: var(--dn-brand);
	border-color: var(--dn-brand);
}

/* Pagination (atas+bawah) — beri napas dari tab/daftar. */
main.container.dn-rank-main .dn-pagination { margin: var(--dn-space-xl) 0; }

/* ── Daftar peringkat (ol = urutan bermakna) ─────────────────────────── */
.dn-rank-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--dn-space-md);
}

/* Baris = kartu (visual selaras .dn-card: hairline, flat rest, hover -2px). */
.dn-rank-row {
	display: grid;
	grid-template-columns: 2.5ch 74px minmax(0, 1fr);
	gap: var(--dn-space-md);
	align-items: start;
	padding: var(--dn-space-md);
	background: var(--dn-surface);
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius-card);
	box-shadow: var(--dn-shadow-sm);
	transition: transform var(--dn-transition), box-shadow var(--dn-transition), border-color var(--dn-transition);
}
@media (hover: hover) {
	.dn-rank-row:hover {
		transform: translateY(-2px);
		box-shadow: var(--dn-shadow-hover);
		border-color: var(--dn-brand);
	}
}

/* Signature: angka peringkat Fraunces. Puncak (#1) di-brand + membesar. */
.dn-rank-num {
	font-family: var(--dn-font-display);
	font-size: var(--dn-fs-h1);
	font-weight: var(--dn-fw-semibold);
	line-height: 1;
	color: var(--dn-text-faint);
	text-align: right;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--dn-tracking-tight);
}
.dn-rank-row--top  .dn-rank-num { color: var(--dn-brand-ink); }
.dn-rank-row--lead .dn-rank-num { color: var(--dn-brand); font-size: var(--dn-fs-display); }
.dn-rank-row--lead { border-color: var(--dn-brand); background: var(--dn-brand-tint); }

/* Cover 3:4 dengan klip + hover-zoom (ter-klip, tak meluber). */
.dn-rank-cover {
	display: block;
	overflow: hidden;
	border-radius: var(--dn-radius-sm);
	aspect-ratio: 3 / 4;
	background: var(--dn-surface-3);
}
.dn-rank-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .45s ease;
}
@media (hover: hover) {
	.dn-rank-row:hover .dn-rank-cover img { transform: scale(1.05); }
}

/* ── Isi baris ───────────────────────────────────────────────────────── */
.dn-rank-body { min-width: 0; }
.dn-rank-title {
	font-family: var(--dn-font-head);
	font-size: var(--dn-fs-h4);
	font-weight: var(--dn-fw-semibold);
	line-height: var(--dn-leading-tight);
	margin: 0;
}
.dn-rank-title a { color: var(--dn-text); }
.dn-rank-title a:hover { color: var(--dn-brand-ink); }

.dn-rank-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dn-space-xs) var(--dn-space-md);
	margin-top: var(--dn-space-xs);
	font-family: var(--dn-font-head);
	font-size: var(--dn-fs-xs);
	color: var(--dn-text-muted);
}
.dn-rank-meta span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dn-rank-meta i { color: var(--dn-text-faint); font-size: .95em; }
.dn-rank-meta strong { color: var(--dn-text); font-weight: var(--dn-fw-semibold); }

.dn-rank-genres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dn-space-xs);
	margin-top: var(--dn-space-sm);
}

.dn-rank-excerpt {
	font-family: var(--dn-font-body);
	font-size: var(--dn-fs-sm);
	color: var(--dn-text-muted);
	line-height: var(--dn-leading-base);
	margin: var(--dn-space-sm) 0 0;
}
.dn-rank-more,
.dn-rank-less {
	color: var(--dn-brand-ink);
	font-weight: var(--dn-fw-medium);
	cursor: pointer;
	white-space: nowrap;
}
.dn-rank-more:focus-visible,
.dn-rank-less:focus-visible {
	outline: none;
	box-shadow: var(--dn-ring);
	border-radius: var(--dn-radius-sm);
}

.dn-rank-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dn-space-sm) var(--dn-space-md);
	margin-top: var(--dn-space-md);
}
.dn-rank-foot .mr-star-rating { margin: 0; }
/* Tombol +Library dorong ke kanan saat ada ruang. */
.dn-rank-foot .dn-rank-add { margin-left: auto; }

/* ── Empty state (mis. Readers Rank belum ada pembaca) ───────────────── */
.dn-rank-empty {
	text-align: center;
	padding: var(--dn-space-2xl) var(--dn-space-lg);
	color: var(--dn-text-muted);
	font-family: var(--dn-font-head);
	border: 1px dashed var(--dn-border);
	border-radius: var(--dn-radius-card);
}

/* ── Novel List (novel-list.php) — kartu rank tanpa kolom angka ──────── */
.dn-rank-row--plain { grid-template-columns: 74px minmax(0, 1fr); }

/* ── Toggle daftar/grid pada Ranking (daily-rank.php) ─────────────────────
   Reuse mesin grid Novel List: <ol> memakai .nl-items + kartu .nl-row (kelas
   nl-cov-*/nl-body-rating dari dn-list.css). Yang khas ranking: kolom angka
   peringkat (list) yang jadi badge pojok cover (grid), warna #1 dipertahankan.
   Scoped ke .dn-rank-main → tak bentrok layout Novel List. */
/* Mode LIST: rail angka + cover lebih besar. Aturan grid-template-columns dipindah ke
   dn-list.css (dimuat setelah file ini) karena versi di sini tak menang di cascade. */
/* Rating di bawah cover jangan membungkus (5 bintang + angka tetap 1 baris). */
main.container.dn-rank-main .nl-cov-rating .mr-star-rating { white-space: nowrap; }
/* Tanggal update disembunyikan di halaman rank (semua lebar). */
main.container.dn-rank-main .nl-m-updated { display: none; }

/* Mode GRID: kartu kolom (dn-list) + angka peringkat jadi badge pojok cover. */
main.container.dn-rank-main .nl-items.is-grid .dn-rank-row { position: relative; }
main.container.dn-rank-main .nl-items.is-grid .dn-rank-num {
	position: absolute;
	top: calc(var(--dn-space-sm) + 4px);
	left: calc(var(--dn-space-sm) + 4px);
	z-index: 2;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dn-font-display);
	font-size: var(--dn-fs-sm);
	font-weight: var(--dn-fw-semibold);
	line-height: 1;
	letter-spacing: var(--dn-tracking-normal);
	color: #fff;
	background: rgba(15, 20, 30, .82);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	border-radius: var(--dn-radius-pill);
	box-shadow: var(--dn-shadow-sm);
	text-align: center;
}
main.container.dn-rank-main .nl-items.is-grid .dn-rank-row--top .dn-rank-num { background: var(--dn-brand-ink); }
main.container.dn-rank-main .nl-items.is-grid .dn-rank-row--lead .dn-rank-num {
	background: var(--dn-brand);
	color: var(--dn-on-brand);
	font-size: var(--dn-fs-base);
}

/* Upcoming (upcoming.php): kartu tanpa link → matikan zoom cover. */
.dn-rank-row--static .dn-rank-cover img { transition: none; }
@media (hover: hover) {
	.dn-rank-row--static:hover .dn-rank-cover img { transform: none; }
}

/* Filter bar: deretan select design-system, auto-submit via footer.php (#filter). */
.dn-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--dn-space-sm) var(--dn-space-md);
	margin: 0 0 var(--dn-space-lg);
}
.dn-filterbar .dn-filter {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 140px;
	min-width: 0;
	max-width: 210px;
}
.dn-filterbar .dn-filter-label {
	font-family: var(--dn-font-head);
	font-size: var(--dn-fs-xs);
	font-weight: var(--dn-fw-semibold);
	letter-spacing: var(--dn-tracking-wide);
	text-transform: uppercase;
	color: var(--dn-text-muted);
}
.dn-filterbar .dn-select { padding: 8px 10px; }

/* ── Responsif ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
	/* Panel lebih rapat → konten bernafas di layar sempit. */
	.dn-rank-card { padding: var(--dn-space-md); }
	/* Head di luar kartu → beri padding sisi biar tak mepet tepi layar. */
	.dn-rank-head { padding: 0 var(--dn-space-md); margin-bottom: var(--dn-space-lg); }
	/* Tab pil geser + toggle tetap kanan; keduanya lebih ringkas. */
	.dn-rank-tabbar { gap: var(--dn-space-sm); }
	.dn-rank-tabbar .nl-views { padding-left: var(--dn-space-sm); }
	.dn-rank-tab { padding: 8px 13px; }
	.dn-rank-tabbar .nl-tbtn { width: 34px; height: 34px; }

	.dn-rank-row {
		grid-template-columns: 2ch 58px minmax(0, 1fr);
		gap: var(--dn-space-sm);
		padding: var(--dn-space-sm);
	}
	.dn-rank-row--plain { grid-template-columns: 58px minmax(0, 1fr); }
	main.container.dn-rank-main .nl-items:not(.is-grid) .dn-rank-row { grid-template-columns: 2ch 92px minmax(0, 1fr); }
	.dn-rank-num { font-size: var(--dn-fs-h2); }
	.dn-rank-row--lead .dn-rank-num { font-size: var(--dn-fs-h1); }
	main.container.dn-rank-main .nl-items.is-grid .dn-rank-num { font-size: var(--dn-fs-xs); min-width: 22px; height: 22px; }
	main.container.dn-rank-main .nl-items.is-grid .dn-rank-row--lead .dn-rank-num { font-size: var(--dn-fs-sm); }
	.dn-rank-foot .dn-rank-add { margin-left: 0; }
	.dn-filterbar .dn-filter { flex-basis: calc(50% - var(--dn-space-md)); max-width: none; }
}