/* Profile (profile.html, profile.js): /profile and /u/<id>. Built on the rankings UI (rank.css: tkr-page, tkr-shead, tkr-grid, tkr-tiles, tkr-lvbar)
   and the points wallet (tokay.css: tk-wal-ladder, tk-wal-badges). Class names start with tkp- (ad blockers hide ad-*). No orange. */
.tkp-lvl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tkp-lvn{font-size:14px;color:var(--h-muted)}
.tkp-titles{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tkp-titles:empty{display:none}
.tkp-title{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;font-size:13px;font-weight:500;background:var(--h-brand-soft);color:var(--h-text);border:1px solid var(--h-line)}
.tkp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tkp-links:empty{display:none}
.tkp-grid{margin-top:8px}
.tkp-grid .tk-sec{margin-top:28px}

/* leader status: one cell per scope; #1 is gold, like the top of a leaderboard */
.tkp-lead{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--h-line);border:1px solid var(--h-line)}
.tkp-lead-c{--pod:#D4A62A;--pod-ink:#4A3600;--pod-edge:#A47A0C;background:var(--h-surface);padding:14px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.tkp-lead-c .tkr-k{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkp-lead-c b{display:flex;align-items:center;gap:8px;font:600 clamp(24px,5vw,32px)/1.1 var(--h-mono)}
.tkp-lead-c small{font-size:12px;line-height:1.35;color:var(--h-muted)}
.tkp-lead-c.is-none b{color:var(--h-muted)}
.tkp-lead-c.is-p1{background:color-mix(in srgb,var(--pod) 13%,var(--h-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pod) 55%,transparent)}
.tkp-lead-c.is-p1 b{color:color-mix(in srgb,var(--pod) 55%,var(--h-text))}
.tkp-lead-c .tkr-crown{width:22px;height:15px}
.tkp-lead-all{font-family:var(--h-mono)}

/* unlocks */
.tkp-next{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.tkp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.tkp-tiles .tkr-tile:first-child{grid-column:auto}
.tk-wal-badges li small{display:block;font-size:12px;font-weight:400;color:var(--h-muted)}

/* recent activity */
.tkp-act{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--h-line);background:var(--h-surface)}
.tkp-act:empty{display:none}
.tkp-act-i{border-top:1px solid var(--h-line)}
.tkp-act-i:first-child{border-top:0}
.tkp-act-i a{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;min-height:76px;padding:6px 10px 6px 6px;color:inherit;text-decoration:none}
.tkp-act-i a:hover{background:var(--h-brand-soft)}
.tkp-act-i a:focus-visible{outline:2px solid var(--h-brand);outline-offset:-2px}
.tkp-act-ph{display:block;width:64px;height:64px;background:var(--h-line);overflow:hidden}
.tkp-act-ph img{width:100%;height:100%;object-fit:cover;display:block}
.tkp-act-t{min-width:0;display:flex;flex-direction:column;gap:2px}
.tkp-act-t b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkp-act-t small{font-size:13px;color:var(--h-muted)}
.tkp-more{margin:12px 0 0}
.tkp-more .h-button[hidden]{display:none}

@media (min-width:600px){
  .tkp-lead{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:900px){
  .tkp-lead{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tkp-grid .tkr-col+.tkr-col>.tk-sec:first-child{margin-top:28px}
}
@media (min-width:1280px){
  .tkp-lead{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* phone: the ladder's last column fits "You are here" */
@media (max-width:480px){
  #pf-ladder li{grid-template-columns:18px 24px minmax(0,1fr) auto auto;gap:8px;padding-inline:10px}
  #pf-ladder .tk-wal-lst{min-width:24px;text-align:right}
}