/* SkateArchive Ratings: Dope or Wack */
.sal-rate{margin:0 0 1.8em;padding:16px 16px 14px;background:var(--slab);border:2px solid var(--grime);max-width:72ch}
.sal-h{font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1.1;margin:0 0 14px;color:var(--xerox);text-shadow:2px 2px 0 var(--brick)}
.sal-btns{display:flex;flex-wrap:wrap;gap:14px}
.sa-skin .sal-btn{flex:1 1 140px;display:flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:0;padding:12px 16px;font:400 2rem/1 var(--display);cursor:pointer;box-shadow:3px 3px 0 rgba(0,0,0,.6)}
.sa-skin .sal-dope{background:var(--krylon);color:var(--asphalt);transform:rotate(-1.5deg)}
.sa-skin .sal-wack{background:var(--brick);color:var(--xerox);transform:rotate(1.2deg)}
.sa-skin .sal-btn:hover{filter:brightness(1.1)}
.sal-btn .sal-n{font:700 1.05rem var(--body);background:rgba(0,0,0,.22);padding:3px 8px;min-width:2.4em;text-align:center}
.sa-skin .sal-btn[aria-pressed="true"]{outline:3px solid var(--xerox);outline-offset:3px;animation:sal-stamp .28s ease-out}
@keyframes sal-stamp{0%{scale:1.18}100%{scale:1}}
.sal-rate.is-busy .sal-btn{opacity:.7;cursor:wait}
.sal-meter{height:8px;background:var(--brick);margin:18px 0 8px}
.sal-meter span{display:block;height:100%;background:var(--krylon);transition:width .3s}
.sal-rate.is-empty .sal-meter,.sal-rate.is-empty .sal-meter span{background:var(--grime)}
.sal-sum{margin:0;color:var(--dust)}
.sal-lb{margin:8px 0 0}
.sa-skin .sal-lb a{color:var(--krylon);font-weight:600;text-decoration:none}

/* leaderboard */
.sal-board{max-width:1100px}
.sal-intro{color:var(--dust);max-width:60ch;margin:0 0 18px}
.sal-periods{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.sa-skin .sal-periods a{padding:6px 13px;border:2px solid var(--grime);text-decoration:none;font-weight:600;color:var(--xerox)}
.sa-skin .sal-periods a[aria-current="page"]{background:var(--krylon);border-color:var(--krylon);color:var(--asphalt)}
.sal-tabs{display:flex;gap:10px;margin:0 0 18px}
.sal-tab{flex:1;border:0;border-radius:0;padding:10px;font:400 1.8rem/1 var(--display);cursor:pointer;background:var(--slab);color:var(--xerox)}
.sal-tab.sal-tab-dope[aria-selected="true"]{background:var(--krylon);color:var(--asphalt)}
.sal-tab.sal-tab-wack[aria-selected="true"]{background:var(--brick);color:var(--xerox)}
.sal-panel{display:none}
.sal-panel.is-active{display:block}
.sal-panel-h{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1.1;margin:0 0 12px;text-shadow:3px 3px 0 var(--brick)}
.sal-list{list-style:none;margin:0;padding:0}
.sal-row{display:grid;grid-template-columns:44px 120px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--grime)}
.sal-rank{font:400 2rem/1 var(--display);text-align:center;color:var(--krylon)}
.sal-panel-wack .sal-rank{color:var(--xerox);text-shadow:2px 2px 0 var(--brick)}
.sa-skin .sal-thumb img{width:120px;aspect-ratio:16/9;object-fit:cover;border:2px solid var(--grime)}
.sa-skin .sal-title{font-weight:700;text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sal-stat{margin:4px 0 0;color:var(--dust);font-size:.92rem}
.sal-none{color:var(--dust)}
@media (max-width:899px){.sal-panel-h{position:absolute;left:-9999px}}
@media (min-width:900px){
	.sal-tabs{display:none}
	.sal-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px}
	.sal-panel{display:block}
}
@media (max-width:420px){
	.sal-row{grid-template-columns:32px 96px minmax(0,1fr);gap:10px}
	.sa-skin .sal-thumb img{width:96px}
}
@media (prefers-reduced-motion:reduce){.sa-skin .sal-btn[aria-pressed="true"]{animation:none}.sal-meter span{transition:none}}