/* shared styles for data pages (handicaps, social ranking) */
.page{padding:120px var(--pad) 40px;max-width:1200px;margin:0 auto}
.page-head .eyebrow{margin-bottom:10px}
.page-head h1{font:800 clamp(26px,4vw,48px)/1.08 var(--disp);margin:0 0 12px;letter-spacing:-.01em}
.page-head p.lede{color:#cfd5ce;max-width:760px;margin:0 0 18px;font-size:16px}
.asof{display:inline-block;background:#D0EF5A18;color:var(--lime);border:1px solid #D0EF5A55;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.04em}
.note{background:var(--panel);border:1px solid #ffffff14;border-left:3px solid var(--lime);border-radius:10px;padding:14px 18px;margin:18px 0;color:#d6dbd5;font-size:14px}
.note.warn{border-left-color:#ffb547}
.note h3{margin:0 0 6px;font:700 15px var(--disp)}
.note ul{margin:6px 0 0;padding-left:18px}.note li{margin:3px 0}
.note code{background:#03140f;border-radius:4px;padding:1px 5px;font-size:13px;color:#e6ffa8}
.sec{margin:38px 0 10px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec h2{font:700 clamp(18px,2.2vw,24px) var(--disp);margin:0}
.sec .sub{color:var(--mut);font-size:13px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px}
.tabs button{background:#ffffff10;border:1px solid #ffffff22;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600}
.tabs button.on{background:var(--lime);color:#062018;border-color:var(--lime)}
/* tiers */
.tier{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px;white-space:nowrap}
.t-off{background:var(--lime);color:#000}
.t-self{background:#4aa3ff22;color:#8cc4ff;border:1px solid #4aa3ff66}
.t-est{background:transparent;color:#ffb547;border:1px dashed #ffb547}
.t-none{background:#ffffff12;color:var(--mut)}
/* leaderboard */
.board{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lb{display:grid;grid-template-columns:44px 1fr auto auto;gap:14px;align-items:center;background:var(--panel);border:1px solid #ffffff10;border-radius:10px;padding:12px 16px}
.lb.est{background:repeating-linear-gradient(135deg,#17150f,#17150f 10px,#1a1811 10px,#1a1811 20px);border:1px dashed #ffb54755}
.lb.self{border-color:#4aa3ff40}
.lb .pos{font:800 20px var(--disp);color:var(--mut);text-align:center}
.lb:nth-child(-n+3) .pos{color:var(--lime)}
.lb .who{min-width:0}
.lb .who b{font-weight:700;font-size:15px}
.lb .who a.vids{color:var(--lime);font-size:12px;text-decoration:none;margin-left:8px;white-space:nowrap}
.lb .who a.vids:hover{text-decoration:underline}
.lb .src{color:var(--mut);font-size:12px;margin-top:3px;overflow-wrap:anywhere}
.lb .src a{color:#cfd5ce}
.lb .hcp{font:800 24px var(--disp);text-align:right;min-width:78px;font-variant-numeric:tabular-nums}
.lb.off .hcp{color:var(--lime)}
.lb.est .hcp{color:#ffb547}
.lb.est .hcp::after{content:'est.';font:600 10px var(--ui);display:block;color:#ffb547aa;letter-spacing:.06em}
.nopub{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.nopub div{background:var(--panel);border:1px solid #ffffff10;border-radius:10px;padding:10px 14px;font-size:14px}
.nopub small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
/* social table */
.tblwrap{overflow-x:auto;border:1px solid #ffffff14;border-radius:12px;background:var(--panel)}
table.sp{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
table.sp th,table.sp td{padding:10px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid #ffffff0d}
table.sp th:nth-child(-n+2),table.sp td:nth-child(-n+2){text-align:left}
table.sp th{position:sticky;top:0;background:var(--panel2);color:#cfd5ce;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;user-select:none}
table.sp th:hover{color:var(--lime)}
table.sp th.sorted{color:var(--lime)}
table.sp th.sorted::after{content:' ▾'}table.sp th.sorted.asc::after{content:' ▴'}
table.sp tbody tr:hover{background:#ffffff08}
table.sp td.name b{font-weight:700}
table.sp td.name{position:sticky;left:0;background:var(--panel);z-index:1;min-width:200px}
table.sp th[data-k=name]{position:sticky;left:0;z-index:2}
table.sp td.name .vids{display:block;color:var(--lime);font-size:11.5px;text-decoration:none;margin-top:2px}
table.sp td.name small{max-width:240px}
table.sp td.name small{display:block;color:var(--mut);font-size:11.5px;white-space:normal;max-width:280px}
.na{color:#5d655e}
.score{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.bar{width:70px;height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}
.bar i{display:block;height:100%;background:var(--lime)}
.spc .vids{color:var(--lime);font-size:12px;text-decoration:none}
.flag{color:#ffb547;font-size:11px;font-weight:700;margin-left:6px}
.legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--mut);font-size:12.5px;margin:10px 0}
.ctx{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.ctx div{background:var(--panel);border:1px solid #ffffff10;border-radius:10px;padding:10px 14px;font-size:13.5px}
.ctx small{display:block;color:var(--mut);font-size:12px;margin-top:3px}
.cards{display:none}
@media (max-width:700px){
  .page{padding-top:130px}
  .lb{grid-template-columns:30px 1fr auto;gap:10px;padding:10px 12px}
  .lb .tiercell{grid-column:2/4;grid-row:2}
  .lb .hcp{font-size:20px;min-width:0}
  .tblwrap{display:none}
  .cards{display:grid;gap:8px}
  .spc{background:var(--panel);border:1px solid #ffffff10;border-radius:10px;padding:12px 14px}
  .spc .top{display:flex;justify-content:space-between;gap:10px;align-items:center}
  .spc .top b{font-size:15px}
  .spc .sc{font:800 22px var(--disp);color:var(--lime)}
  .spc dl{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:10px 0 0;font-size:12.5px}
  .spc dt{color:var(--mut)}.spc dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
  .sortsel{display:flex!important}
}
.sortsel{display:none;gap:8px;align-items:center;margin:8px 0;font-size:13px;color:var(--mut)}
.sortsel select{background:var(--bg);color:var(--txt);border:1px solid #ffffff30;border-radius:8px;padding:6px 8px;font:inherit}
.page.wide{max-width:1440px}

/* brand header band with the tonal pattern behind the page title */
.page-head{position:relative;isolation:isolate;padding:26px 26px 22px;border-radius:16px;border:1px solid #D0EF5A1f;overflow:hidden;
  background:linear-gradient(100deg,#062018f0 0%,#062018d6 55%,#0620189e 100%),var(--pattern) 0 0/210px auto repeat,var(--brand-deep)}
.crown1{height:22px;width:auto;vertical-align:-4px;margin-right:6px}
@media (max-width:700px){.page-head{padding:18px 16px 16px;border-radius:12px}}

/* handicaps v2: no header block, list starts under the nav */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hcp-page{padding-top:104px}
.capline{color:var(--mut);font-size:12.5px;margin:0 0 6px;line-height:1.4}
.capline a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.capline a:hover{color:var(--lime)}
.hcp-page > .sec:first-of-type{margin-top:4px}
.about{margin:36px 0 0;background:var(--panel);border:1px solid #ffffff14;border-radius:10px;color:#d6dbd5;font-size:14px}
.about summary{cursor:pointer;padding:12px 16px;font:700 14px var(--disp);color:#cfd5ce;list-style-position:inside}
.about summary:hover{color:var(--lime)}
.about-body{padding:0 16px 14px}
.about-body p{margin:0 0 10px}
@media (max-width:700px){.hcp-page{padding-top:122px}.capline{font-size:12px}}