/* shell-components.css injected as a versioned <link> by _injShell (cache-bustable) */
/* shell-webview-mobile.css — the mini-program-look page FRAME.
   Scoped html[data-shell="webview-mobile"]. Uses semantic tokens ONLY (var(--surface)/--ink/--line/
   --brand/--bg), so it inherits every [data-template] and [data-theme="dark"] for free. Light mode and
   every other shell are untouched (all rules are behind the data-shell attribute). */

:root { --wv-appbar-h: 52px; --wv-tabbar-h: 56px; --wv-frame: 520px; }

/* hide the desktop mega-nav header (both the slot div AND the sticky header site-header.js builds)
   + the marketing mega-footer under this shell — the compact app-bar + bottom tabs replace them */
html[data-shell="webview-mobile"] #site-header,
html[data-shell="webview-mobile"] #hkpl-sh,
html[data-shell="webview-mobile"] #hkpl-sf { display: none !important; }

/* the page becomes a centred phone frame (full-width on phones; capped + centred on wide screens) */
html[data-shell="webview-mobile"] body {
  max-width: var(--wv-frame);
  margin: 0 auto;
  padding-top: var(--wv-appbar-h);
  padding-bottom: calc(var(--wv-tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #f9fafb);
  box-shadow: 0 0 0 1px var(--line, #e5e7eb);
  min-height: 100vh;
}

/* compact fixed app-bar (constrained to the frame width, centred) */
html[data-shell="webview-mobile"] #wv-appbar {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--wv-frame); height: var(--wv-appbar-h); z-index: 60;
  display: flex; align-items: center; gap: 6px; padding: 0 6px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--line, #e5e7eb);
  color: var(--ink, #0a0e0c);
}
html[data-shell="webview-mobile"] #wv-appbar .wv-title {
  flex: 1; min-width: 0; text-align: center;
  font-weight: 800; font-size: 16px; letter-spacing: .01em; color: var(--ink, #0a0e0c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-shell="webview-mobile"] #wv-appbar .wv-back,
html[data-shell="webview-mobile"] #wv-appbar .wv-menu {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
  border: none; background: transparent; color: var(--ink, #0a0e0c);
  font-size: 22px; line-height: 1; cursor: pointer; border-radius: 10px;
}
html[data-shell="webview-mobile"] #wv-appbar .wv-back:active,
html[data-shell="webview-mobile"] #wv-appbar .wv-menu:active { background: var(--brand-50, #ecfdf5); }

/* always-on bottom tab bar (mobile-tabbar.js builds #hkpl-tabbar; its own CSS shows it only <=640px) */
html[data-shell="webview-mobile"] #hkpl-tabbar {
  display: flex !important;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--wv-frame);
}

/* MOBILE-SHELL-TABBAR-ALIGN (2026-09-05): on wide desktop preview, mobile-tabbar.js leaves #hkpl-tabbar
   position:static, so its left:50%/translateX(-50%) centering is ignored and it misaligns with the
   centered phone frame. Force it fixed+centered at all widths under this shell. */
html[data-shell="webview-mobile"] #hkpl-tabbar { position: fixed !important; bottom: 0 !important; }

/* FOTMOB-CONTENT layer (2026-09-05) */
/* ============================================================================
   HKPL SHELL: "webview-mobile"  —  FOTMOB-QUALITY CONTENT RESTYLE
   file: fotmob-content.css   (append-only layer; revert = switch the template)

   Goal: the CONTENT on each HKPL page reads like FotMob (fotmob.com) on mobile
   — minimal, airy, LIGHT, content-first — applied to a pickleball league.
   This is a CSS-ONLY paint layer. It does NOT restructure HKPL markup; it wraps
   the EXISTING classes (inspected live, listed per section below).

   FotMob signature applied here:
     - White page; light-grey (#f5f6f7) GROUP surfaces; monochrome ink (#1a1a1a)
       + grey secondary (#70757a); the tenant brand used for ACCENTS only.
     - Content as GROUPED CARDS: a light group-header row -> a WHITE rounded card
       (radius 12-14px) whose rows are separated by THIN hairlines (#eceef0),
       not gaps. Generous row height (~56px), comfortable padding (14-16px).
     - Clean numeric league-table; tabular-nums scores; outline filter chips.

   CONTRACT (same discipline as the wechat-mini shell):
     - EVERYTHING scoped to html[data-shell="webview-mobile"].
     - Brand accent flows via var(--brand, #008034) so tenant themes stay
       white-labelled; FotMob's clean light surfaces are shell-local tokens with
       dark-mode equivalents (so dark isn't a white glare).
     - Paint only (bg/color/radius/padding/margin/border/pseudo). No layout
       restructuring — we can't change the DOM.
     - CONSERVATIVE selectors: NO banned broad/breaking selectors — no
       [class*="card"], no main>div, no blanket overflow:hidden. Only the REAL
       inspected classes (documented inline) + conservative main>section / .card.
   ========================================================================== */

/* --- Shell-local FotMob palette (LIGHT signature) ------------------------- */
html[data-shell="webview-mobile"] {
  --fm-page:      #ffffff;   /* white page — the FotMob ground              */
  --fm-group:     #f5f6f7;   /* light-grey group bg / group-header row      */
  --fm-card:      #ffffff;   /* white rounded content card                  */
  --fm-hairline:  #eceef0;   /* THIN row divider (rows separated by these)  */
  --fm-ink:       #1a1a1a;   /* primary text                                */
  --fm-secondary: #70757a;   /* grey secondary / meta                       */
  --fm-faint:     #9aa0a6;   /* faintest meta (match-id, dividers)          */
  --fm-win:       #16a34a;   /* form W dot (FotMob green)                    */
  --fm-loss:      #e0435a;   /* form L dot (FotMob red)                      */
  --fm-accent:    var(--brand, #008034);  /* tenant brand, accents ONLY     */
  --fm-radius:    14px;      /* outer card radius                           */
  --fm-radius-sm: 12px;      /* inner / chip radius                         */
  --fm-row-h:     56px;      /* generous row height                         */
  --fm-gutter:    12px;      /* page side gutter                            */
  --fm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark-mode equivalents. Guard both an explicit [data-theme="dark"] toggle and
   the OS setting when the site hasn't forced light. FotMob keeps the same
   grouped-card model on a near-black ground. */
html[data-shell="webview-mobile"][data-theme="dark"] {
  --fm-page:      #121417;
  --fm-group:     #1a1d21;
  --fm-card:      #1f2226;
  --fm-hairline:  #2b2f36;
  --fm-ink:       #e8eaed;
  --fm-secondary: #9aa0a6;
  --fm-faint:     #6b7178;
}
/* DARK-OPT-IN-V7 (2026-09-06): shells no longer auto-follow OS dark. System dark left the
   page half-dark (shell surfaces flipped, original Tailwind cards/headings did not) -> chaos.
   Dark is now opt-in via the [data-theme="dark"] block above, matching the standard site. */

/* ==========================================================================
   0. PAGE FRAME + TYPE.
   White page, phone-width, comfortable side gutter, FotMob font stack,
   tabular numerals so all scores/stats align.
   ========================================================================== */
html[data-shell="webview-mobile"] body {
  max-width: 520px;
  margin: 0 auto;
  background: var(--fm-page) !important;
  color: var(--fm-ink);
  font-family: var(--fm-font);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
html[data-shell="webview-mobile"] main,
html[data-shell="webview-mobile"] .wrap,
html[data-shell="webview-mobile"] .container,
html[data-shell="webview-mobile"] .page,
html[data-shell="webview-mobile"] .content {
  background: transparent !important;
  box-sizing: border-box;
}
/* Numerals: line up scores + standings columns (FotMob uses tabular figures). */
html[data-shell="webview-mobile"] .stand-tbl,
html[data-shell="webview-mobile"] b,
html[data-shell="webview-mobile"] .tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
/* Quiet body links inside content (FotMob keeps body links ink, not blue). */
html[data-shell="webview-mobile"] main a:not(.btn):not(.cta):not(.chip):not(.tag):not([class*="ds-btn"]):not([class*="ds-tile"]):not([class*="ds-next-row"]):not([class*="bg-"]):not([class*="text-white"]) {
  color: inherit;
}

/* ==========================================================================
   1. GENERIC CONTENT -> FOTMOB GROUPED CARDS  (clubs & other pages).
   REAL targets: main > section, .card  (per task's "CLUBS/others" note).
   White rounded card, thin border, side gutter, gap between groups, and the
   FotMob move: direct child rows separated by HAIRLINES, not gaps.
   Conservative — no [class*="card"], no main>div.
   ========================================================================== */
html[data-shell="webview-mobile"] main > section,
html[data-shell="webview-mobile"] main > article,
html[data-shell="webview-mobile"] .card,
html[data-shell="webview-mobile"] section.section {
  background: var(--fm-card);
  border: 1px solid var(--fm-hairline);
  border-radius: var(--fm-radius);
  margin: var(--fm-gutter) var(--fm-gutter) 0;
  padding: 6px 14px;
  box-shadow: none;
  box-sizing: border-box;
  overflow: visible;          /* never clip dropdowns/menus */
}
html[data-shell="webview-mobile"] main > *:last-child {
  margin-bottom: var(--fm-gutter);
}
/* Section title INSIDE a card -> quiet, bold, comfortable (FotMob card title). */
html[data-shell="webview-mobile"] main > section > h2,
html[data-shell="webview-mobile"] main > section > h3,
html[data-shell="webview-mobile"] .card > h2,
html[data-shell="webview-mobile"] .card > h3,
html[data-shell="webview-mobile"] .section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--fm-ink);
  letter-spacing: -0.01em;
  margin: 10px 2px;
}
/* Secondary / meta text -> FotMob grey. */
html[data-shell="webview-mobile"] main small,
html[data-shell="webview-mobile"] .muted,
html[data-shell="webview-mobile"] .meta,
html[data-shell="webview-mobile"] .subtitle,
html[data-shell="webview-mobile"] .secondary {
  color: var(--fm-secondary);
}

/* ==========================================================================
   2. GROUP HEADERS  (day / division banner blocks on Schedule & Results).
   FotMob's group-header row = a light-grey strip with the competition/date in
   small, grey, semibold text, ABOVE its white card (not a coloured banner).

   RISK: the exact class of HKPL's green banner blocks was NOT provided. Below
   targets the plausible names + the generic bare page-level h2/h3. If a green
   banner uses another class it will keep its old look — flag for iteration.
   (Deliberately NOT using [class*="bg-hkpl"] — too broad / could hit buttons.)
   ========================================================================== */
html[data-shell="webview-mobile"] main > h2,
html[data-shell="webview-mobile"] main > h3,
html[data-shell="webview-mobile"] .day-header,
html[data-shell="webview-mobile"] .date-header,
html[data-shell="webview-mobile"] .division-header,
html[data-shell="webview-mobile"] .group-header,
html[data-shell="webview-mobile"] .round-header,
html[data-shell="webview-mobile"] .sched-day,
html[data-shell="webview-mobile"] .match-day-header {
  background: var(--fm-group) !important;
  color: var(--fm-secondary) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  border: 0 !important;
  border-radius: 10px;
  margin: 18px var(--fm-gutter) 8px;
  padding: 9px 14px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
/* Neutralise any brand/white text the old green banner set on inner nodes. */
html[data-shell="webview-mobile"] .day-header *,
html[data-shell="webview-mobile"] .date-header *,
html[data-shell="webview-mobile"] .division-header *,
html[data-shell="webview-mobile"] .group-header *,
html[data-shell="webview-mobile"] .round-header * {
  color: inherit !important;
  text-shadow: none !important;
}

/* ==========================================================================
   3. STANDINGS  —  REAL markup: table.stand-tbl  (has min-w-[700px]).
   REAL targets:
     rows   : tr.rank-podium.rank-1 / .rank-2 / .rank-3
     rank   : td.px-4.py-3.font-display  >  span.medal.medal-1/2/3
     team   : td.px-4.py-3.font-bold.text-ink  >  img (crest) + a.hover:text-hkpl-600
     stats  : td.stat-cell.px-3.py-3.text-center  and  td.col-sec.stat-cell
              (points/emphasis marked .text-hkpl-500.font-bold)
     form   : span.fg-dot.fg-w (win) / span.fg-dot.fg-l (loss)

   700px WIDTH DECISION  (see report):
     CHOSEN = HORIZONTAL SCROLL, preserving EVERY column and all data.
     Because it is CSS-only (no wrapper div can be injected), the table element
     is itself made the scroll container: display:block + overflow-x:auto, its
     min-w-[700px] neutralised to 0 on that scroll box, and white-space:nowrap so
     columns keep their natural width and the strip SCROLLS instead of squeezing.
     Net: no horizontal PAGE scroll, no column/data loss, swipe the table itself.
   ========================================================================== */
/* WEBVIEW-STAND-SCROLL-V2 (2026-09-06): the table lives inside the page's OWN
   scroller — <div class="overflow-x-auto tbl-scroll"> — which already carries
   sticky #/TEAM columns, an edge-fade, and min-w-[700px]→560px on phones
   (standings.html TABLE-EDGE-FIX-V1). The shell previously forced the <table>
   itself to display:block + min-width:0 + overflow-x:auto, which KILLED that
   700/560 intrinsic width and squeezed W/L/Pts off the right edge with no way
   to reach them (committee report). FIX: keep the element a REAL table (not a
   block scroll box), don't zero its width, and let the existing .tbl-scroll
   wrapper do the horizontal scroll. Card chrome moves onto that wrapper. */
html[data-shell="webview-mobile"] table.stand-tbl {
  display: table;                 /* real table, fits the frame */
  width: 100%;
  min-width: 0;                   /* FIGURES-VISIBLE: fit the frame, truncate team (below) so P/W/L/Pts show without swiping */
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--fm-card);
  box-sizing: border-box;
  font-size: 14px;
  color: var(--fm-ink);
}
/* The ACTUAL scroller + card chrome on the existing wrapper (no HTML change).
   overflow-x:auto here (not on the table) preserves the page's sticky columns,
   and max-width:100% keeps the PAGE body from ever scrolling sideways. */
html[data-shell="webview-mobile"] .tbl-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background: var(--fm-card);
  border: 1px solid var(--fm-hairline);
  border-radius: var(--fm-radius);
  margin: 8px var(--fm-gutter) var(--fm-gutter);
  box-sizing: border-box;
  scrollbar-width: thin;
}
html[data-shell="webview-mobile"] .tbl-scroll::-webkit-scrollbar { height: 4px; }
html[data-shell="webview-mobile"] .tbl-scroll::-webkit-scrollbar-thumb {
  background: var(--fm-hairline); border-radius: 4px;
}

/* Header row -> light-grey group strip, small uppercase grey labels. */
html[data-shell="webview-mobile"] table.stand-tbl thead th {
  background: var(--fm-group);
  color: var(--fm-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 12px;
  text-align: center;
  border: 0;
  white-space: nowrap;
}
html[data-shell="webview-mobile"] table.stand-tbl thead th:first-child { text-align: center; }
html[data-shell="webview-mobile"] table.stand-tbl thead th:nth-child(2) { text-align: left; }

/* Body rows -> comfortable height, THIN hairline between rows (not zebra-heavy). */
html[data-shell="webview-mobile"] table.stand-tbl tbody tr {
  border-top: 1px solid var(--fm-hairline);
  background: var(--fm-card);
}
html[data-shell="webview-mobile"] table.stand-tbl tbody tr:first-child { border-top: 0; }
/* Subtle zebra for scan-ability on a wide scrolling table. */
html[data-shell="webview-mobile"] table.stand-tbl tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--fm-group) 55%, var(--fm-card));
}

/* Cell rhythm: comfortable vertical padding, tighter horizontal so more of the
   table is visible before you need to scroll. */
html[data-shell="webview-mobile"] table.stand-tbl td {
  padding: 13px 12px;
  border: 0;
  vertical-align: middle;
  color: var(--fm-ink);
}

/* --- Rank cell + medal (td.font-display > span.medal.medal-N) ------------- */
html[data-shell="webview-mobile"] table.stand-tbl td.font-display {
  text-align: center;
  color: var(--fm-secondary);
  font-weight: 700;
  width: 40px;
}
html[data-shell="webview-mobile"] .stand-tbl .medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  color: var(--fm-secondary);
  background: transparent;
}
/* Podium medals -> small tinted pills (gold / silver / bronze). */
html[data-shell="webview-mobile"] .stand-tbl .medal.medal-1 {
  color: #7a5a00; background: #fff2c2;
}
html[data-shell="webview-mobile"] .stand-tbl .medal.medal-2 {
  color: #4d5560; background: #e7ebf0;
}
html[data-shell="webview-mobile"] .stand-tbl .medal.medal-3 {
  color: #7a4a1f; background: #f5e2cf;
}
/* Thin brand accent bar down the leading edge of podium rows (FotMob's
   qualification marker vibe). Applied to the row's first cell. */
html[data-shell="webview-mobile"] .stand-tbl tr.rank-podium td:first-child {
  box-shadow: inset 3px 0 0 0 var(--fm-accent);
}

/* --- Team cell (td.font-bold.text-ink > img crest + a.hover:text-hkpl-600) - */
html[data-shell="webview-mobile"] table.stand-tbl td.text-ink {
  text-align: left;
  font-weight: 700;
  color: var(--fm-ink);
  min-width: 150px;
}
html[data-shell="webview-mobile"] table.stand-tbl td.text-ink img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 9px;
  background: var(--fm-group);
  flex: 0 0 auto;
}
html[data-shell="webview-mobile"] table.stand-tbl td.text-ink a.hover\:text-hkpl-600,
html[data-shell="webview-mobile"] table.stand-tbl td.text-ink a {
  color: var(--fm-ink) !important;
  font-weight: 700;
  text-decoration: none;
}

/* --- Stat cells (td.stat-cell) : muted; points column emphasised ---------- */
html[data-shell="webview-mobile"] table.stand-tbl td.stat-cell {
  text-align: center;
  color: var(--fm-secondary);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Secondary stat columns (td.col-sec) -> even more muted (FotMob de-emphasis). */
html[data-shell="webview-mobile"] table.stand-tbl td.col-sec {
  color: var(--fm-faint);
  font-weight: 500;
}
/* The emphasised column (marked .text-hkpl-500.font-bold in the real markup)
   reads as the POINTS column: strong ink, heavy weight. */
html[data-shell="webview-mobile"] table.stand-tbl td .text-hkpl-500,
html[data-shell="webview-mobile"] table.stand-tbl td.text-hkpl-500,
html[data-shell="webview-mobile"] table.stand-tbl td.stat-cell.text-hkpl-500 {
  color: var(--fm-ink) !important;
  font-weight: 800;
}

/* --- Form dots (span.fg-dot.fg-w / .fg-l) -> FotMob W/L circles ----------- */
html[data-shell="webview-mobile"] .stand-tbl .fg-dot,
html[data-shell="webview-mobile"] .fg-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 2px;
  vertical-align: middle;
  background: var(--fm-hairline);
}
html[data-shell="webview-mobile"] .fg-dot.fg-w { background: var(--fm-win); }
html[data-shell="webview-mobile"] .fg-dot.fg-l { background: var(--fm-loss); }

/* ==========================================================================
   4. SCHEDULE + RESULTS  —  match blocks.
   REAL targets:
     player links    : a.mcard-trigger
     match score      : b.text-hkpl-600 (winner) + b.text-gray-400 (loser),
                        separator span.text-gray-300
     per-game rows    : div.flex.items-center.gap-2 containing
                          span.uppercase.text-gray-400.w-8   (game label e.g. "LD")
                          span.flex-1.text-right.text-gray-600 (players)
                          span.shrink-0.tabular-nums.font-bold (game score)
     match-id chip    : span.text-[10px].font-mono.text-gray-500  (#760) -> HIDE
   ========================================================================== */

/* Player-name links: bold ink, quiet (FotMob primary text ~15px). */
html[data-shell="webview-mobile"] a.mcard-trigger {
  color: var(--fm-ink) !important;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.35;
}

/* Match headline score: winner strong ink, loser muted grey, thin separator.
   (FotMob bolds the winner in near-black rather than colouring it.) */
html[data-shell="webview-mobile"] b.text-hkpl-600 {
  color: var(--fm-ink) !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}
html[data-shell="webview-mobile"] b.text-gray-400 {
  color: var(--fm-secondary) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 16px;
}
html[data-shell="webview-mobile"] span.text-gray-300 {
  color: var(--fm-faint) !important;
  font-weight: 400;
  padding: 0 2px;
}

/* Per-game breakdown rows: airy, hairline-separated, aligned numerals. */
html[data-shell="webview-mobile"] div.flex.items-center.gap-2 > span.uppercase.text-gray-400.w-8 {
  color: var(--fm-faint) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
html[data-shell="webview-mobile"] div.flex.items-center.gap-2 > span.flex-1.text-right.text-gray-600 {
  color: var(--fm-secondary) !important;
  font-size: 13.5px;
}
html[data-shell="webview-mobile"] div.flex.items-center.gap-2 > span.shrink-0.tabular-nums.font-bold {
  color: var(--fm-ink) !important;
  font-weight: 800;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Match-id chip (#760) -> FotMob wouldn't show it. De-emphasise to a whisper;
   set display:none instead if the operator prefers it gone entirely. */
html[data-shell="webview-mobile"] span.font-mono.text-gray-500,
html[data-shell="webview-mobile"] span.text-\[10px\].font-mono.text-gray-500 {
  color: var(--fm-faint) !important;
  opacity: 0.55;
  font-size: 10px;
  font-weight: 400;
}

/* ==========================================================================
   5. FILTER CHIPS  (season / division / round selectors).
   FotMob = rounded OUTLINE pills; the active pill fills with the accent.
   Conservative target set of common chip/pill/filter classes.
   ========================================================================== */
html[data-shell="webview-mobile"] .chip,
html[data-shell="webview-mobile"] .pill,
html[data-shell="webview-mobile"] .filter-chip,
html[data-shell="webview-mobile"] .seg > a,
html[data-shell="webview-mobile"] .seg > button,
html[data-shell="webview-mobile"] .filter-tabs > a,
html[data-shell="webview-mobile"] .filter-tabs > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--fm-hairline);
  background: var(--fm-card);
  color: var(--fm-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
/* Active chip -> accent fill, white text (cover .active / .is-active / aria). */
html[data-shell="webview-mobile"] .chip.active,
html[data-shell="webview-mobile"] .chip.is-active,
html[data-shell="webview-mobile"] .pill.active,
html[data-shell="webview-mobile"] .filter-chip.active,
html[data-shell="webview-mobile"] .seg > .active,
html[data-shell="webview-mobile"] .seg > .is-active,
html[data-shell="webview-mobile"] .filter-tabs > .active,
html[data-shell="webview-mobile"] .filter-tabs > [aria-selected="true"] {
  background: var(--fm-accent);
  border-color: var(--fm-accent);
  color: #fff;
}

/* ==========================================================================
   6. PRIMARY BUTTONS / CTAs  (keep on-brand, FotMob-clean).
   Conservative: only explicit primary/CTA classes, never a bare .btn.
   ========================================================================== */
html[data-shell="webview-mobile"] .btn-primary,
html[data-shell="webview-mobile"] button.primary,
html[data-shell="webview-mobile"] .btn.primary,
html[data-shell="webview-mobile"] .cta {
  background: var(--fm-accent) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 18px;
  box-shadow: none;
}
html[data-shell="webview-mobile"] .btn-primary:active,
html[data-shell="webview-mobile"] .btn.primary:active,
html[data-shell="webview-mobile"] .cta:active { filter: brightness(0.94); }

/* --- end fotmob-content.css ---------------------------------------------- */

/* BRAND CONSISTENCY (2026-09-05): HKPL logo/identity in mobile + wechat chrome so all 3 templates read as HKPL. */
html[data-shell="webview-mobile"] #wv-appbar .wv-logo { height:32px; width:auto; max-width:112px; object-fit:contain; flex:0 0 auto; margin:0 6px 0 0; }

/* ===== v448: shell-owned mobile tab bar (present on EVERY page incl coaching; 5 items) ===== */
html[data-shell="webview-mobile"] #hkpl-tabbar { display:none !important; }
#wv-tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:46;
  display:flex; align-items:stretch;
  background:var(--card,#fff); border-top:1px solid var(--line,#e5e7eb);
  padding-bottom:env(safe-area-inset-bottom,0);
}
#wv-tabbar .wv-tab {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:54px; text-decoration:none; color:var(--muted,#6b7280);
  font-size:11px; font-weight:600; -webkit-tap-highlight-color:transparent;
}
#wv-tabbar .wv-tab-ico svg { width:23px; height:23px; display:block; }
/* A11Y-A1 (WCAG): active tab was color:var(--brand,#008034) = 5.08:1 on white (light) but 3.38:1 on
   the dark tabbar #161d19 (FAIL). Use per-theme accessible greens instead of raw brand. */
#wv-tabbar .wv-tab.active { color:#006b30; } /* 6.68:1 on white */
html[data-theme="dark"] #wv-tabbar .wv-tab.active { color:#46d17e; } /* 8.73:1 on dark tabbar #161d19 */
html[data-shell="webview-mobile"] body { padding-bottom:calc(58px + env(safe-area-inset-bottom,0)) !important; }

html[data-shell="webview-mobile"] #wv-appbar .wv-logo-link { display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; }

/* SAFE-AREA-APPMODE-V5 (2026-09-06): the notch/status-bar reserve belongs ONLY to the native
   Capacitor app (html.hkpl-appmode, stamped by app-mode.js). A regular mobile browser and the
   WeChat webview draw their own top chrome, so an unconditional reserve produced a big empty band. */
html.hkpl-appmode[data-shell="webview-mobile"] body { padding-top: calc(var(--wv-appbar-h) + env(safe-area-inset-top, 0px)); }
html.hkpl-appmode[data-shell="webview-mobile"] #wv-appbar { height: calc(var(--wv-appbar-h) + env(safe-area-inset-top, 0px)); box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); }


/* FIGURES-VISIBLE-COLS (2026-09-06): the numbers ARE the standings — keep P/W/L/Pts on screen on
   load by fitting the table and truncating the team name, not by scrolling them off the edge. */
html[data-shell="webview-mobile"] table.stand-tbl td:nth-child(2),
html[data-shell="webview-mobile"] table.stand-tbl th:nth-child(2) { max-width: 40vw; }
html[data-shell="webview-mobile"] table.stand-tbl td:nth-child(2) > span { min-width: 0; }
html[data-shell="webview-mobile"] table.stand-tbl td:nth-child(2) > span > span:first-child { min-width: 0; overflow: hidden; }
html[data-shell="webview-mobile"] table.stand-tbl td:nth-child(2) a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
html[data-shell="webview-mobile"] table.stand-tbl td.stat-cell, html[data-shell="webview-mobile"] table.stand-tbl td.pts-cell,
html[data-shell="webview-mobile"] table.stand-tbl th.stat-start, html[data-shell="webview-mobile"] table.stand-tbl th:nth-child(n+3) { padding-left: 6px; padding-right: 8px; }

/* HKPLC-HOME-HIDE-LANDING: premium home replaces the standard landing */
html[data-shell="webview-mobile"].hkplc-home-active #hkpl-basic-landing,
html[data-shell="webview-mobile"].hkplc-home-active #live-ticker-bar{display:none!important}