/* NBA shooting & usage board. Scoped under .sh* so it cannot reach the hub styles
   it sits beside, and under #bxproto like the rest of them. Uses the shared --bx-*
   tokens.

   WHY THIS FILE EXISTS AT ALL. The board is one table of 237 players and nine
   columns. Styling those cells inline, the way the 30-row team-ratings board does,
   put 2,641 style attributes and 382KB into the delivered HTML — 34% of a 1.1MB
   page, against 193KB for team-ratings. The same declarations in a cached
   stylesheet are a few hundred bytes. A long table is exactly where inline styles
   stop being free. */

#bxproto .shscroll{overflow-x:auto}
#bxproto .shtable{width:100%;border-collapse:collapse;min-width:760px}
#bxproto .shtable caption{caption-side:top;text-align:left;font-size:13px;color:var(--bx-tx2);padding:0 0 10px}

/* Numeric by default, left only where a name sits. Explicit short classes rather
   than nth-child because the player cell is a <th scope="row"> for screen readers,
   which an nth-child td rule would skip. */
#bxproto .shtable thead th{padding:8px 10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bx-tx2);border-bottom:1px solid var(--bx-line2);white-space:nowrap;text-align:right;font-weight:600}
#bxproto .shtable tbody td,#bxproto .shtable tbody th{padding:8px 10px;font-size:14px;border-bottom:1px solid var(--bx-line);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;font-weight:400}
#bxproto .shtable thead th.shl,#bxproto .shtable .shn,#bxproto .shtable .sht{text-align:left}
#bxproto .shtable .shr{color:var(--bx-tx2)}
#bxproto .shtable .sht{font-size:13px}
#bxproto .shtable td.shts{font-weight:700}
#bxproto .shtable .shn a{color:var(--bx-tx);text-decoration:none;font-weight:600}
#bxproto .shtable .sht a{color:var(--bx-tx2);text-decoration:none}
#bxproto .shtable a:hover{color:var(--bx-cy)}

/* The rank column's header is a "#" glyph, which reads as nothing aloud. */
#bxproto .shsr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media(max-width:560px){#bxproto .shtable thead th,#bxproto .shtable tbody td,#bxproto .shtable tbody th{padding:7px 7px;font-size:13px}}

/* The four explainer cards above the table. */
#bxproto .shcards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:4px 0 26px}
#bxproto .shcard{background:var(--bx-1);border:1px solid var(--bx-line2);border-radius:14px;padding:16px 18px}
#bxproto .shcard h2{margin:0 0 8px;font-size:19px;line-height:1.3}
#bxproto .shcard p{margin:0 0 10px;font-size:15px;line-height:1.6}
#bxproto .shabbr{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--bx-tx2);margin-bottom:6px}
#bxproto .shcard code{display:block;font-size:13px;line-height:1.5;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.22);margin-bottom:10px;white-space:normal}
#bxproto .shcard p.shwhy{font-size:14px;color:var(--bx-tx2)}
#bxproto .shcard p.shlead{margin:0;font-size:14px}
#bxproto .shcard a{color:var(--bx-cy);text-decoration:none}
#bxproto .shcard a:hover{text-decoration:underline}