/* The leaderboard in the site's frame (design v2). Its values come from site.css; this file styles only what
   the page's script writes (rows, an account's card) and the dialog. */
.table-scroll { overflow-x: auto; }
.ranking-table { white-space: nowrap; }
.ranking-table .numeric { text-align: right; }
.ranking-table td.numeric { font-family: var(--xf-mono); font-weight: 500; }
.rank-number, .muted, .profile-handle { color: var(--xf-quiet); }
.profile-name { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--xf-edge); text-underline-offset: 2px; cursor: pointer; }
.profile-name > .avatar { display: none; }
.profile-handle { font-weight: 400; }
.lb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
/* The board's own place for the viewer: "top N, then you" (the script writes these classes). */
.ranking-table tbody tr.you-row td { background: var(--xf-hover); }
.you-tag { display: inline-flex; align-items: center; min-height: 20px; margin-left: 8px; padding: 1px 7px; border-radius: 6px; background: rgb(var(--xf-accent-rgb) / 14%); color: var(--xf-ok-text); font-size: .75rem; line-height: 1rem; font-weight: 500; }
.ranking-table tbody tr.gap-row td { padding: 4px 0; text-align: center; color: var(--xf-quiet); letter-spacing: .3em; }
/* The note stands under the name and wraps there: the table itself does not wrap. An inline block, so that the name's underline stops at the name. */
.you-row .profile-name > span:not(.avatar) { white-space: normal; text-align: left; }
.you-note { display: inline-block; width: 100%; margin-top: 2px; color: var(--xf-quiet); font-size: .75rem; line-height: 1.125rem; font-weight: 400; }
#profile-dialog { width: calc(100% - 32px); max-width: 40rem; max-height: 90dvh; overflow-y: auto; padding: 24px; border: 0; border-radius: 16px; background: var(--xf-page); box-shadow: inset 0 0 0 1px var(--xf-line), 0 24px 80px rgb(0 0 0 / 30%); color: var(--xf-text); }
#profile-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dialog-top > h2 { overflow-wrap: anywhere; }
#close-profile { width: 32px; padding: 0; }
.profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 0; border-block: 1px solid var(--xf-line); color: var(--xf-quiet); font-size: .875rem; }
.profile-stats strong { display: block; margin-top: 4px; color: var(--xf-text); font: 500 1.25rem/1.5rem var(--xf-mono); }
#profile-content h3 { margin: 20px 0 8px; font-weight: 600; }
#profile-content .ranking-table { width: 100%; border-collapse: collapse; }
#profile-content .ranking-table :is(th, td) { padding: 8px 16px 8px 0; text-align: left; }
#profile-content .ranking-table th { border-bottom: 1px solid var(--xf-line); color: var(--xf-quiet); font-size: .75rem; }
.data-note { margin-top: 12px; color: var(--xf-quiet); font-size: .875rem; line-height: 1.25rem; }
@media (pointer: coarse) { .profile-name { min-height: 44px; } #close-profile { width: 44px; } }
@media (max-width: 40rem) {
  /* A phone keeps rank, account and both returns; the rest is in the account's own card. */
  .xf-table.ranking-table > * > tr > :is(:nth-child(3), :nth-child(4), :nth-child(7)) { display: none; }
  #profile-dialog { padding: 16px; }
}