/* Leaderboard (/top/) and account (/account/) pages. Loaded only there. */
.top-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s2); }
.top-controls .view-tabs ul { margin: 0; }
.top-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.top-filter label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-muted); }
.top-filter select { min-height: 40px; padding: var(--s1) var(--s3); border: 1px solid var(--c-border); border-radius: var(--radius); background: #fff; }
.top-list { display: grid; gap: var(--s3); margin: var(--s4) 0 var(--s6); counter-reset: none; }
.top-item { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); }
.top-item__rank { min-width: 2ch; font-size: var(--fs-xl); font-weight: 800; color: var(--c-muted); text-align: center; }
.top-item:nth-child(-n+3) .top-item__rank { color: var(--c-brand-strong); }
.top-item__media { display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font-weight: 800; color: var(--c-brand-strong); }
.top-item__media img { width: 100%; height: 100%; object-fit: cover; }
.top-item__body { display: grid; justify-items: start; gap: var(--s1); min-width: 0; }
.top-item__name { margin: 0; font-size: var(--fs-lg); }
.top-item__name a { color: var(--c-text); text-decoration: none; }
.top-item__name a:hover { color: var(--c-brand-strong); }
.top-item__summary { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; }
.top-item__votes { display: flex; align-items: center; gap: var(--s2); grid-column: 1 / -1; justify-self: end; }
.top-item__count { display: inline-flex; align-items: center; gap: var(--s1); margin: 0; font-weight: 700; }
@media (min-width: 640px) { .top-item { grid-template-columns: auto auto 1fr auto; } .top-item__votes { grid-column: auto; } }

.account-head__user { margin: 0; color: var(--c-muted); }
.account-nav { position: sticky; top: calc(var(--header-h) + var(--s2)); z-index: 10; }
.account-section { margin-bottom: var(--s5); padding: clamp(16px, 3vw, 28px); scroll-margin-top: calc(var(--header-h) + 72px); }
.account-section > h2 { font-size: var(--fs-lg); }
.account-empty { margin: 0; color: var(--c-muted); }
.grid--account { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.account-table-wrap { overflow-x: auto; }
.account-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.account-table th, .account-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.account-table th { color: var(--c-muted); font-weight: 600; }
.account-list { display: grid; gap: var(--s2); margin: 0; }
.account-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--c-border); }
.account-list__topic { flex: 1; min-width: 12rem; font-weight: 500; }
.account-list time { font-size: var(--fs-sm); color: var(--c-muted); }
.status { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.status--paid, .status--published, .status--sent, .status--sent_existing, .status--done, .status--completed { background: var(--c-deal-bg); border-color: transparent; color: var(--c-deal); }
.status--pending, .status--queued, .status--review, .status--writing, .status--awaiting_payment, .status--check_email { background: var(--c-featured-bg); border-color: transparent; color: var(--c-featured); }
.status--refunded, .status--cancelled, .status--canceled, .status--limited { background: #fee2e2; border-color: transparent; color: #991b1b; }
/* Mobile cell labels are page text (not attr()) so GTranslate translates them. */
.account-table__label { display: none; }
@media (max-width: 639.98px) {
	.account-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.account-table, .account-table tbody, .account-table tr, .account-table td { display: block; width: 100%; }
	.account-table tr { padding-block: var(--s2); border-bottom: 1px solid var(--c-border); }
	.account-table td { display: flex; justify-content: space-between; gap: var(--s3); border: 0; padding: var(--s1) 0; }
	.account-table__label { display: inline; font-weight: 600; color: var(--c-muted); }
}