/* ============================================================================ HKPL DESIGN SYSTEM — shared responsive component library (B1). Injected into EVERY page's (server.js) so one definition per component works at phone/tablet/desktop by design — no device overlay, no !important wall. Populated 2026-09-06 per docs/PLAN_template_rearchitecture.md. Add components here; as each lands, its shell overrides are deleted. ============================================================================ */ /* ---- COMPONENT: segmented / chip-tab strip ------------------------------- A row of `.group-tab` (or division/filter) chips. Base bug: the segmented wrapper is `inline-flex … overflow-hidden; flex-wrap:nowrap` and the chips default to `flex-shrink:1; min-width:0`, so with many items (e.g. 10 groups) they crush to ~36px and the text clips ("All groups" -> "All C", "Group 1" -> "Gro"). Responsive-native fix: chips keep their natural width and the strip SCROLLS horizontally when it overflows — correct at every width, on the standard site and under every shell. Specificity (0,1,1) beats the Tailwind `.overflow-hidden` utility (0,1,0) with no !important. */ :is(div, nav, span):has(> .group-tab), :is(div, nav, span):has(> .div-tab) { overflow-x: auto; overflow-y: hidden; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox: hide the bar, keep the scroll */ } :is(div, nav, span):has(> .group-tab)::-webkit-scrollbar, :is(div, nav, span):has(> .div-tab)::-webkit-scrollbar { height: 0; display: none; } .group-tab, .div-tab { flex-shrink: 0; } /* ---- COMPONENT: data table (ranked) — mobile-first -------------------------- Any table in a .tbl-scroll wrapper FITS the phone and truncates its NAME column (2nd) so the figures stay visible on load rather than scrolling off-screen. Covers standings + club leaderboard + any future ranked table (family fix). */ @media (max-width: 640px) { .tbl-scroll > table, .tbl-scroll table { min-width: 0 !important; width: 100%; } .tbl-scroll table td:nth-child(2), .tbl-scroll table th:nth-child(2) { max-width: 40vw; } .tbl-scroll table td:nth-child(2) a, .tbl-scroll table td:nth-child(2) > span:first-child { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .tbl-scroll table th, .tbl-scroll table td { padding-left: 6px !important; padding-right: 7px !important; } } /* compact the numeric columns (3rd onward) so many-column ranked tables fit the phone without hiding figures */ @media (max-width: 640px) { .tbl-scroll table { font-size: 12px; } .tbl-scroll table th:nth-child(n+3), .tbl-scroll table td:nth-child(n+3) { padding-left: 2px !important; padding-right: 3px !important; } .tbl-scroll table td:nth-child(2) { max-width: 32vw; } } /* RANKED-TABLE FILL-V2 (2026-09-07, operator-approved on-device): the name column HUGS its text (width:1%) so the P/W/L/PTS columns spread to fill the full-width card instead of leaving a blank gutter, and the last column (PTS) is pulled in from the card edge. Supersedes the width:100%-only fit which still left a dead band because the capped name + tiny number columns never absorbed the extra width. Family: any .tbl-scroll ranked table (standings + club-leaderboard). */ @media (max-width: 640px) { .tbl-scroll table td:nth-child(2), .tbl-scroll table th:nth-child(2) { width: 1% !important; max-width: 55vw !important; white-space: nowrap; } .tbl-scroll table td:last-child, .tbl-scroll table th:last-child { padding-right: 18px !important; } } /* SITE-FOOTER-MINIMAL-MOBILE-V1 (2026-09-07, operator-approved on-device): on phones the full footer sitemap duplicates the hamburger menu (verified: all 16 footer nav links are in the mobile menu, 0 stranded), and the grid left a big empty right cell + 44px tap-target rows wasted vertical space. Hide the 3 nav columns (Explore/Rankings/Compete = .fwrap children 2-4; brand+tagline=child 1 and Connect/socials=child 5 stay), lay the Connect links in a horizontal wrap row, tighten spacing. Desktop footer unchanged. Footer built by site-header.js (#hkpl-sf). */ @media (max-width: 640px) { #hkpl-sf { margin-top: 20px; } #hkpl-sf .fwrap { padding: 16px 16px 8px !important; } #hkpl-sf .fwrap > *:nth-child(n+2):nth-child(-n+4) { display: none !important; } #hkpl-sf .fbrand { margin-bottom: 10px !important; } #hkpl-sf .fwrap > *:last-child h4 { margin: 0 0 6px !important; } #hkpl-sf .fwrap > *:last-child ul { display: flex !important; flex-wrap: wrap; gap: 2px 20px !important; } #hkpl-sf .fwrap > *:last-child li { margin: 0 !important; } #hkpl-sf .fwrap > *:last-child a { min-height: 34px !important; } } /* ROOT-RESERVE-V1 (2026-09-07): JS-rendered pages inject into #root late (empty->tall) which shifted visible content below it (CLS). Reserve a viewport so the footer starts below the fold and the late render does not push visible content down. Content taller than 100vh still grows (only below-fold). */ #root, #content, #board { min-height: 100vh; } .feed-grid .main { min-height: 100vh; } #sponsor-tiers { min-height: 60vh; } #hk-map { min-height: 245px; } #climbers { min-height: 305px; }