/* frontend/styles/shared-ranking.css */
/* Ranking appears on both home and member records; retain its original cascade slot. */
.pass-rank-person > .rank-activity-counts { display:block; margin-top:3px; color:var(--muted); font-size:12px; white-space:normal; }
.pass-rank-row { min-height:78px; }
/* Approved TOP 3 board and in-place activity popovers. */
#app .pass-rank-list .rank-top-board { border:1px solid #171717; border-radius:8px; margin:8px 0 18px; }
#app .pass-rank-list .rank-top-board h3 { --tl-size:14px; --tl-weight:700; margin:0; padding:10px 14px; background:#171717; color:#fff; border-radius:6px 6px 0 0; }
#app .pass-rank-list .pass-rank-row { min-height:58px; padding:7px 12px; gap:10px; background:#fff; border-radius:0; border-color:#dfdfdf; }
#app .pass-rank-list .pass-rank-row.is-me { background:#fff; }
#app .pass-rank-list .pass-rank-row:last-child { border-bottom:0; border-radius:0 0 7px 7px; }
#app .pass-rank-list .pass-rank-index { --tl-size:13px; --tl-weight:600; min-width:30px; color:#707070; }
#app .pass-rank-list .is-top-rank .pass-rank-index { color:#171717; border-left:3px solid #4ade80; padding-left:7px; }
#app .pass-rank-list .pass-rank-person { color:#171717; text-decoration:none; }
#app .pass-rank-list .pass-rank-person strong { --tl-size:14px; --tl-weight:500; color:#171717; }
#app .pass-rank-list .is-top-rank .pass-rank-person strong { --tl-weight:700; }
#app .pass-rank-list .pass-rank-values { gap:6px; }
#app .pass-rank-list .rank-flat-list .pass-rank-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
#app .pass-rank-list .rank-flat-list .pass-rank-main .pass-rank-person { flex:none; }
#app .pass-rank-list .rank-flat-list .pass-rank-main > .pass-rank-values { margin-left:32px; gap:5px; justify-content:flex-start; }
#app .pass-rank-list .rank-flat-list .pass-rank-balance { align-self:stretch; align-items:center; justify-content:flex-end; min-width:56px; margin-left:0; padding-left:12px; border-left:1px solid #ededed; }
#app .pass-rank-list .rank-flat-list .pass-rank-balance .pass-rank-stars { --tl-size:14px; padding:4px 0; }
#app .pass-rank-list .rank-flat-list .pass-rank-main .pass-rank-points { --tl-size:14px; padding:0; }
#app .pass-rank-list .pass-rank-stars { --tl-size:12px; --tl-weight:600; color:#171717; white-space:nowrap; }
#app .pass-rank-list .pass-rank-stars .rank-star-symbol { color:#171717; }
#app .pass-rank-list .pass-rank-points { --tl-size:16px; --tl-weight:700; color:#171717; }
#app .pass-rank-list .pass-rank-points small { --tl-size:11px; color:#707070; }
#app .pass-rank-list .rank-info-button { --tl-size:12px; --tl-weight:600; display:grid; place-items:center; width:36px; min-width:36px; height:44px; padding:0; border:0; background:transparent; color:#707070; }
#app .pass-rank-list .rank-info-button span { display:grid; place-items:center; width:18px; height:18px; border:1px solid #dfdfdf; border-radius:50%; }
#app .rank-info-popup { position:fixed; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(260px,calc(100vw - 24px)); box-sizing:border-box; margin:0; padding:14px; border:1px solid #171717; border-radius:8px; background:#fff; color:#171717; }
#app .rank-info-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
#app .rank-info-heading strong { --tl-size:14px; --tl-weight:700; }
#app .rank-info-heading button { --tl-size:20px; width:36px; height:36px; padding:0; border:0; background:transparent; color:#171717; }
#app .rank-info-popup p, #app .rank-info-popup small { --tl-size:12px; color:#707070; margin:4px 0 12px; }
#app .rank-info-popup dl { margin:0 0 12px; }
#app .rank-info-popup dl > div { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid #dfdfdf; }
#app .rank-info-popup dd { margin:0; --tl-weight:700; }
#app .rank-info-button:focus-visible, #app .rank-info-heading button:focus-visible { outline:2px solid #6b01c2; outline-offset:-3px; }
@supports (top:anchor(bottom)) {
  #app .rank-info-popup { inset:auto; top:anchor(bottom); left:clamp(12px,anchor(left),calc(100vw - 272px)); transform:none; margin-top:4px; position-try-fallbacks:flip-block; }
}