td[class~=py-3],th[class~=py-3]{padding-top:.4rem;padding-bottom:.4rem}td[class~=py-4],th[class~=py-4]{padding-top:.5rem;padding-bottom:.5rem}td[class~=py-2],th[class~=py-2]{padding-top:.3rem;padding-bottom:.3rem}[class~=py-3][class~=border-b]{padding-top:.45rem;padding-bottom:.45rem}[class~=py-4][class~=border-b]{padding-top:.55rem;padding-bottom:.55rem}.mt-18{margin-top:2.5rem}body{overflow-wrap:break-word}.flex>*,[class*=inline-flex]>*{min-width:0}table{max-width:100%}code,pre{overflow-x:auto;max-width:100%}@media (max-width:640px){.px-6,.px-8{padding-left:.8rem;padding-right:.8rem}.px-5{padding-left:.7rem;padding-right:.7rem}.px-4{padding-left:.65rem;padding-right:.65rem}.p-6{padding:.85rem}.p-5{padding:.75rem}.p-4{padding:.65rem}.gap-6{gap:.6rem}.gap-4{gap:.5rem}.gap-3{gap:.45rem}.py-10{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:1.2rem;padding-bottom:1.2rem}.py-6{padding-top:1rem;padding-bottom:1rem}.text-5xl{font-size:2.1rem;line-height:1.05}.text-4xl{font-size:1.7rem;line-height:1.12}}.p-8{padding:1.25rem}.p-7{padding:1.05rem}.p-6{padding:1rem}.p-5{padding:.85rem}.px-8{padding-left:1.25rem;padding-right:1.25rem}.px-7{padding-left:1.05rem;padding-right:1.05rem}.py-8{padding-top:1.1rem;padding-bottom:1.1rem}.py-7{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:.85rem;padding-bottom:.85rem}.py-24{padding-top:2.25rem;padding-bottom:2.25rem}.py-20{padding-top:2rem;padding-bottom:2rem}.py-16{padding-top:1.75rem;padding-bottom:1.75rem}.py-14{padding-top:1.5rem;padding-bottom:1.5rem}.py-12{padding-top:1.4rem;padding-bottom:1.4rem}.py-10{padding-top:1.2rem;padding-bottom:1.2rem}.py-9{padding-top:1.1rem;padding-bottom:1.1rem}.bg-hero,section[class*=bg-hero]{padding-top:1.4rem;padding-bottom:1.4rem}.mb-12{margin-bottom:1.25rem}.mb-10{margin-bottom:1rem}.mb-8{margin-bottom:.85rem}.mt-12{margin-top:1.25rem}.mt-10{margin-top:1rem}.mt-8{margin-top:.85rem}table td,table th{padding-top:.35rem;padding-bottom:.35rem}[class*="text-[10px]"],[class*="text-[11px]"],[class*="text-[9px]"],[class*=rounded-full]{white-space:nowrap}[class*="text-[10px]"]:not([class*=rounded]):not([class*=bg-]):not([class*=border]),[class*="text-[11px]"]:not([class*=rounded]):not([class*=bg-]):not([class*=border]),[class*="text-[9px]"]:not([class*=rounded]):not([class*=bg-]):not([class*=border]){white-space:normal}.px-4.py-1\.5,.px-4.py-2,.px-4.py-2\.5{padding-left:.65rem;padding-right:.65rem}@media (max-width:640px){#div-tabs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start!important;scrollbar-width:none}#div-tabs::-webkit-scrollbar{display:none}#div-tabs>*{flex:0 0 auto}#division-tabs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start!important;scrollbar-width:none}#division-tabs::-webkit-scrollbar{display:none}#division-tabs>*{flex:0 0 auto}} /* DENSITY-MOBILE-V2 (2026-08-31, operator: too much whitespace/gaps on mobile) — tighten oversized titles + vertical rhythm on phones, family-wide. */ @media (max-width:640px){ h1[class*=text-3xl],.text-3xl{font-size:1.5rem;line-height:1.18} h1[class*=text-2xl],.text-2xl{font-size:1.3rem;line-height:1.2} .text-xl{font-size:1.12rem;line-height:1.25} .mb-10{margin-bottom:.9rem}.mb-8{margin-bottom:.8rem}.mb-6{margin-bottom:.65rem}.mb-5{margin-bottom:.55rem}.mb-4{margin-bottom:.55rem}.mb-3{margin-bottom:.4rem} .mt-10{margin-top:.9rem}.mt-8{margin-top:.8rem}.mt-6{margin-top:.65rem} .space-y-6>*+*{margin-top:.65rem}.space-y-5>*+*{margin-top:.55rem}.space-y-4>*+*{margin-top:.5rem} section[class*=bg-hero],.hero,.page-hero{padding-top:1.1rem!important;padding-bottom:1.1rem!important} } /* DENSITY-HERO-V3 (2026-08-31): the shared .bg-hero banner ate ~40% of the mobile fold (huge title + multi-line description) before any data. Compact it on phones, family-wide (standings/schedule/results/etc). */ @media (max-width:640px){ section.bg-hero,.bg-hero{padding-top:.9rem!important;padding-bottom:1rem!important} .bg-hero h1{font-size:1.45rem!important;line-height:1.12!important;margin-top:.35rem!important} .bg-hero p{font-size:.82rem!important;line-height:1.38!important;margin-top:.4rem!important} .bg-hero .hero-rule{margin-top:.4rem!important;margin-bottom:.15rem!important} .bg-hero .hero-pill{font-size:10px!important} } /* DENSITY-GLOBAL-V4 (2026-08-31, operator: finish the whole mobile density pass) — broaden the phone density: shrink the largest display text, compact ANY hero inner container + big section padding, tighten section-to-section rhythm. Applies to every page that loads density.css. */ @media (max-width:640px){ .text-6xl{font-size:2rem!important;line-height:1.05!important} .text-5xl{font-size:1.75rem!important;line-height:1.08!important} .text-4xl{font-size:1.5rem!important;line-height:1.12!important} section.bg-hero>div,section.bg-hero .max-w-7xl,.hero>div,.page-hero>div{padding-top:1rem!important;padding-bottom:1.05rem!important} .py-16,.py-14,.py-12{padding-top:1rem!important;padding-bottom:1rem!important} .py-10,.py-9{padding-top:.9rem!important;padding-bottom:.9rem!important} section+section{margin-top:0} } /* TABLE-SCROLL-V1 (2026-09-04, operator: data tables unreachable on mobile) — bare data tables (admin-club-managers Manage action, and any .w-full/.arch-table not already in an overflow-x-auto wrapper) render wider than the phone viewport inside overflow:visible wrappers with NO horizontal scroll, pushing the right-most columns (actions / WIN% / PTS) off-screen and out of reach. On phones only, turn each data table into its own horizontal scroll container (GitHub-markdown pattern) so every column/action is reachable by swipe, with a visible scroll cue. Desktop (>640px) is byte-identical (proven: SHA256-identical before/after screenshots at 1280x800). Already-wrapped tables are unharmed. */ @media (max-width:640px){ table.w-full,table.arch-table{ display:block; width:max-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } table.w-full::-webkit-scrollbar,table.arch-table::-webkit-scrollbar{height:6px} table.w-full::-webkit-scrollbar-thumb,table.arch-table::-webkit-scrollbar-thumb{background:rgba(0,0,0,.28);border-radius:3px} } /* =================================================================== MOBILE-PHASE1 (2026-09-04): shared-component mobile polish, family-wide. EVERY rule below is inside @media (max-width:640px) — desktop (>640px) is byte-unchanged by construction. Central fix in the site-wide density.css so the whole fleet (standings/results/schedule/players/staff) benefits at once. Families: 5 compact hero · 6 drop duplicate .lnav · 7 44px tap targets · 8 staff-header stack + floating back-button size. =================================================================== */ @media (max-width:640px){ /* --- FAMILY 5: compact hero -> ~56px title bar --------------------- The shared hero (.bg-hero / .page-hero / .site-hero) ate ~200px of the mobile fold before any data. Collapse to a compact title bar: drop the badge pill, the accent rule and the multi-line description, shrink the title, tighten padding, and flatten the heavy cover photo to a light brand wash (perf + clean strip). */ section.bg-hero,.bg-hero,section.site-hero,.site-hero,.page-hero{ min-height:0!important;padding-top:.5rem!important;padding-bottom:.55rem!important; background-image:none!important;background:var(--brand-700,#006c2c)!important;} section.bg-hero h1,.bg-hero h1,.site-hero h1,.page-hero h1,.site-hero-title{ font-size:1.2rem!important;line-height:1.15!important;margin:0!important;} section.bg-hero p,.bg-hero p,.site-hero p,.page-hero p{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem!important;line-height:1.3!important;margin:.15rem 0 0!important;opacity:.9} .bg-hero .hero-pill,.page-hero .hero-pill,.site-hero .hero-pill, .bg-hero .hero-rule,.page-hero .hero-rule,.site-hero .hero-rule{display:none!important;} /* --- FAMILY 6: drop .lnav entries that duplicate the bottom tab-bar ---- #hkpl-tabbar (fixed bottom nav) already carries Home/Schedule/Results/ Standings/History persistently on phones (verified rendered at 390px), so the section nav's Schedule/Standings/Results are redundant here. Hide ONLY those three; keep the uniques (Club rankings, Top players, Playoffs, League Stats, Team Stats). */ #league-nav .lnav a[href="/schedule.html"], #league-nav .lnav a[href="/standings.html"], #league-nav .lnav a[href="/results.html"]{display:none!important;} /* --- FAMILY 7: 44px minimum tap targets (Apple/Google standard) -------- Applied to the shared section-nav pills, footer links, the back button and the header mode pills. Header lang/font/simple-mode controls are already >=44px. */ #league-nav .lnav a{min-height:44px!important;display:inline-flex!important;align-items:center!important;} #hkpl-sf a{min-height:44px;display:inline-flex;align-items:center;} #hkpl-back{min-height:44px!important;min-width:44px!important;justify-content:center;} #hkpl-sh a.sh-mode{min-width:44px!important;} /* --- FAMILY 8: staff header stack + floating back-button --------------- Let the shared header row wrap instead of cramming when a staff/admin page adds extra controls (public header has few items -> no wrap, unchanged). Floating back-button: keep it clear of content and reliably on top on phones (position/size/z-index only; back-button.js scroll logic untouched). */ #hkpl-sh .inner{flex-wrap:wrap!important;height:auto!important;min-height:64px;row-gap:6px;} #hkpl-back.floating{z-index:41;top:calc(8px + var(--uat-bar-h,0px));left:8px;} } @media (max-width:640px){ /* MOBILE-PHASE1 hero inner-container: trim the inner padding V4 left at 1rem so the compact title bar lands near ~56px (family 5). */ section.bg-hero>div,section.bg-hero .max-w-7xl,.page-hero>div,.page-hero-inner,.site-hero>div{padding-top:.35rem!important;padding-bottom:.35rem!important} } /* =================================================================== MOBILE-PHASE3 (2026-09-04): density & layout, SAFE CSS subset, family-wide. EVERY rule below is inside @media (max-width:640px) -> desktop (>640px) is byte-unchanged by construction. Central fix in site-wide density.css so the whole density family (148 pages) benefits at once. Items 22/21/23/24. =================================================================== */ @media (max-width:640px){ /* --- ITEM 22: 16px text-input floor -> stop iOS Safari focus auto-zoom --- iOS zooms when a focused text control has font-size < 16px. Audit (headless Chrome @390px) found every text control at 15px or less (text/email/tel=15, textarea=14) and NONE above 16 -> a flat 16px only RAISES sub-16 controls, never shrinks. Scoped to text-entry controls; checkbox/radio/range/color/ file excluded so their box sizing is untouched. */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), textarea,select,[contenteditable=true]{font-size:16px!important} /* --- ITEM 21: tidy 2-col KPI/stat grid + tighter card padding ------------- KPI/stat grid containers render inconsistently on phones: .kpi-row collapses to 1 wasteful column, others go 3-cramped or auto-fit. Converge the family to a clean 2-col grid and tighten the card inner padding. */ .kpis,.kpi-row,.kpi-grid,.stats-grid,.stat-grid,.stats-ribbon,.kpi-cards,.stat-cards{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:.5rem!important; } .kpi-card,.stat-card,.stat-cell,.stat-block{padding:.6rem .7rem!important} /* --- ITEM 23: scroll affordance on clipped tab/segment strips ------------- Horizontal strips that clip on phones: guarantee momentum scroll, hide the scrollbar, keep children from shrinking (so overflow can scroll), and add a subtle right-edge fade so users see there is more. Applied to the scrolling strip family only (wrapping strips .hub-tabs/.elig-tabs are left to wrap). */ .tabs,.seg-tabs,.role-tabs,.tabs-wrap,.role-tabs-wrap,#div-tabs,#division-tabs,[role=tablist]{ overflow-x:auto!important;-webkit-overflow-scrolling:touch; flex-wrap:nowrap!important;scrollbar-width:none; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent); } .tabs::-webkit-scrollbar,.seg-tabs::-webkit-scrollbar,.role-tabs::-webkit-scrollbar, #div-tabs::-webkit-scrollbar,#division-tabs::-webkit-scrollbar,[role=tablist]::-webkit-scrollbar{display:none} .tabs>*,.seg-tabs>*,.role-tabs>*,#div-tabs>*,#division-tabs>*,[role=tablist]>*{flex:0 0 auto} /* --- ITEM 24: consistent empty-state alignment --------------------------- Ad-hoc empty states vary from 22px to 60px padding (some via inline style). Converge the family to centered text + one consistent padding matching the shared .ds-empty rhythm (24px/20px). !important overrides inline padding. */ .hkpl-empty,.empty-state,.onb-empty,.ov-empty,.hns-empty,.ro-empty,.hit-empty,.empty-premium{ text-align:center!important;padding:1.5rem 1.25rem!important; } } /* =================================================================== MOBILE-CEILING (2026-09-04): the professional native-feel pass — the final "web page -> app" polish. Families below: A zero horizontal scroll (admin control-row reflow + off-canvas clip) B tactile :active feedback on every tappable (native tap response) C crisp :focus-visible rings (keyboard a11y) D momentum scroll on every scroll container E consistent motion, all honouring prefers-reduced-motion THE LAW: every layout-affecting rule is inside @media(max-width:640px), so desktop (>640px) renders byte-identical (proven: 1280px before/after PNGs). The two globals (focus-visible ring, reduced-motion guard) are additive- desktop-neutral — a focus ring only paints on keyboard focus and the motion guard only fires when the OS asks for it, so a static desktop render is unchanged. Both were operator-requested a11y for this pass. =================================================================== */ /* --- A1 ADMIN "Stand in a real user's shoes" filter row -> reflow -------- Root cause of admin.html's 390px sideways scroll (scrollWidth 746 vs the 390 client width): #impersonate-real-card's control row (a search input + 4 selects) is a NON-wrapping flex row whose min-content is ~700px. Let it wrap so every control stays reachable AND the page fits the phone. */ @media (max-width:640px){ #impersonate-real-card > div > div{flex-wrap:wrap!important} #impersonate-real-card #imp-search{flex:1 1 100%!important} #impersonate-real-card #imp-club, #impersonate-real-card #imp-team, #impersonate-real-card #imp-role{max-width:none!important;flex:1 1 46%!important;min-width:0} } /* --- A2 OFF-CANVAS CONTAINMENT ------------------------------------------- A position:fixed drawer parked off the right edge (.dupr-pm-panel, which hides via transform:translateX(100%), and any future off-canvas panel) extends the document's horizontal scroll box -> a phantom sideways scroll even though nothing is visible. Clip horizontal overflow at the root on phones. overflow-x:CLIP (not hidden) does NOT establish a scroll container, so position:sticky / position:fixed and vertical momentum scrolling keep working; per spec clip also does not coerce overflow-y, so page scroll is untouched. Self-contained scrollers (wide tables via TABLE-SCROLL-V1, the tab strips) keep their own overflow-x:auto and are unaffected. */ @media (max-width:640px){ html{overflow-x:clip} } /* --- B TACTILE FEEDBACK -------------------------------------------------- Every tappable gets a crisp ~110ms press state so a tap feels native, and loses the 300ms double-tap delay + the grey tap-flash. Phones only. */ @media (max-width:640px){ a,button,[role="button"],summary,label[for],[data-act], .hkpl-card[onclick],.div-tab,.lnav a,#hkpl-tabbar a,#hkpl-sf a, .home-acc-h,[role="tab"],.seg-tabs>*,.role-tabs>*{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; } button:active,[role="button"]:active,[data-act]:active, .div-tab:active,.lnav a:active,#hkpl-tabbar a:active, .home-acc-h:active,[role="tab"]:active,summary:active, .ds-tile:active,.hkpl-btn:active,.btn:active{ transform:scale(.97); transition:transform .11s ease; } .hkpl-card[onclick]:active,a.card:active,.press-dim:active{opacity:.9} } /* --- C FOCUS-VISIBLE (keyboard a11y; additive-desktop-neutral) ----------- Paints ONLY on keyboard focus (never mouse/touch), so static renders are unchanged. outline (not box-shadow/border) => no layout shift. Modest specificity + :focus-visible so it never fights a deliberate ds- ring. */ a:focus-visible,button:focus-visible,[role="button"]:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible, summary:focus-visible,[tabindex]:focus-visible,[role="tab"]:focus-visible, .div-tab:focus-visible,.lnav a:focus-visible,#hkpl-tabbar a:focus-visible, .home-acc-h:focus-visible{ outline:2px solid var(--focus,var(--brand,#008034)); outline-offset:2px; border-radius:6px; } /* --- D MOMENTUM SCROLL on every scroll container (phones) ----------------- */ @media (max-width:640px){ .overflow-auto,.overflow-x-auto,.overflow-y-auto,.overflow-scroll, [data-h-scroll],[style*="overflow:auto"],[style*="overflow: auto"], [style*="overflow-x:auto"],[style*="overflow-y:auto"],[style*="overflow:scroll"]{ -webkit-overflow-scrolling:touch; } } /* --- E REDUCED MOTION (a11y; additive-desktop-neutral — only when the OS asks). Neutralises the press transitions above and any page transition/ animation for users who requested less motion. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } a:active,button:active,[role="button"]:active,.div-tab:active, .lnav a:active,#hkpl-tabbar a:active,.home-acc-h:active,[role="tab"]:active, summary:active,[data-act]:active{transform:none!important} } /* =================================================================== QA-WAVE2 (2026-09-05): consumer-grade visual polish, family-wide. EVERY layout rule below is inside @media (max-width:640px) OR is a :has()/pseudo hit-area expander that only paints on mobile -> desktop (>640px) renders byte-identical by construction. Central fix in the site-wide density.css so the whole fleet benefits at once. Families: A 44px tap targets · B floating-back header overlap · D3 roster name column. =================================================================== */ @media (max-width:640px){ /* --- FAMILY A: >=44px tap targets (Apple/Google), extends the earlier 44px pass which missed these shared controls. Grow the HIT AREA with min-height/padding (and a centered ::before expander for icon buttons) so the visible chrome does not balloon. --------------------------- */ /* topten gender/division filter tabs (were ~33-34px tall) */ #gender-tabs .g-tab,#division-tabs .d-tab{min-height:44px!important;display:inline-flex!important;align-items:center!important;} /* topten per-card Share icon (was 37x37) */ .topten-share-btn{min-width:44px!important;min-height:44px!important;} /* standings grouped-division sub-tabs (were ~33px tall) */ #group-tabs .group-tab{min-height:44px!important;display:inline-flex!important;align-items:center!important;} /* footer utility (nav) links: height was 44 but some were only ~35px wide */ #hkpl-sf li a{min-width:44px!important;} /* --- FAMILY B: the shared floating back-button (#hkpl-back.floating, appended to on pages with no inline back control) sat on top of the page's own top header content (settings' "HKPL" logo, my-lineup's CAPTAIN pill). Reserve left space on that top header so its leading content clears the 44px button parked at left:8px. Only applies when a floating back is actually present (so headers with an inline back or no back are untouched), and only on phones. --------------------------- */ body:has(#hkpl-back.floating) > header, body:has(#hkpl-back.floating) > .topbar{padding-left:56px!important;} /* --- FAMILY D3: team-roster Name column was so tight that names wrapped to 3 lines while Rating/Eligible/Remove kept full padding. Reclaim horizontal room on phones by trimming per-cell padding on the roster table (5 visible columns) so the Name column widens. Table markup and desktop padding are untouched. ------------------------------------ */ .roster-table td,.roster-table th{padding-left:5px!important;padding-right:5px!important;} .roster-table .col-remove{white-space:nowrap;} } /* --- FAMILY A (copy-DUPR-ID icon) lives in dupr.css (the component's own stylesheet); the notification-sheet header fix lives in notif-sheet.js. --- */