/* ADMIN-TABLE-PHONE sticky first column, moved out of the site-wide css/density.css (HAS-RULES-SCOPED-0927).
   Same two rules, same selectors, same media query - only WHERE they load changed:
     - the five pages that have #content (admin, club-directory, registrar, registry, super) link this sheet right after
       density.css;
     - a page opened inside an admin-console tab (?embedded=1 -> html.hkpl-embedded-tab) gets it from js/hkpl-overlays.js.
   WHY: a `table:has(thead th:nth-child(4)) tr>:first-child` rule in a sheet every page loads made Chrome restyle the WHOLE
   page on every DOM change, on every page, whether or not it had such a table. MEASURED on hkpl.com.hk/clubs.html (phone,
   27 Sep, Blink invalidation tracking): its stat counters change text every frame and each frame restyled 2,100 elements
   (17-20 ms unthrottled, "Affected by :has()"); with these two rules gone from the page, 13-14 elements (~1 ms).
   Standing check: scripts/has-rules-sitewide.test.cjs. */
@media (max-width:1023px){
  /* sticky first column on a list of records (thead with 4+ columns), except the registrations queue (REG-TABLE-UNPIN-V1) */
  #content table:has(thead th:nth-child(4)):not(:has(#reg-thead)) tr>:first-child,
  html.hkpl-embedded-tab table:has(thead th:nth-child(4)) tr>:first-child{position:sticky;left:0;z-index:1;background:var(--surface,#fff);box-shadow:1px 0 0 var(--line,#e5e7eb)}
  #content table:has(thead th:nth-child(4)):not(:has(#reg-thead)) thead tr>:first-child,
  html.hkpl-embedded-tab table:has(thead th:nth-child(4)) thead tr>:first-child{z-index:2;background:var(--bg,#f9fafb)}
}