/* DENSITY-V1 (2026-07-30): tighten vertical rhythm for a denser, more commercial feel.
   PADDING ONLY → theme-independent, so this one sheet covers every template/theme automatically.
   Loaded AFTER tailwind.css + theme-surfaces.css so source-order wins the cascade (equal specificity).
   Scoped so ONLY data rows shrink — buttons/chips (py-3 WITHOUT border-b) are untouched. */

/* ── data-table cells (standings etc. use <td class="px-4 py-3">) ── */
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; }

/* ── JS-rendered list rows (results/topten/schedule/team-stats use "px-5 py-3 ... border-b") ──
      the border-b qualifier keeps this off buttons, which are py-3 with rounded/bg and no border-b */
[class~="py-3"][class~="border-b"] { padding-top: .45rem; padding-bottom: .45rem; }
[class~="py-4"][class~="border-b"] { padding-top: .55rem; padding-bottom: .55rem; }

/* ── section rhythm: trim the airiest vertical spacing (large values only) ── */
.py-20 { padding-top: 2.75rem; padding-bottom: 2.75rem; }   /* was 5rem  */
.py-16 { padding-top: 2.25rem; padding-bottom: 2.25rem; }   /* was 4rem  */
.py-14 { padding-top: 2rem;    padding-bottom: 2rem;    }   /* was 3.5rem */
.py-12 { padding-top: 2rem;    padding-bottom: 2rem;    }   /* was 3rem  */
.mt-18 { margin-top: 2.5rem; }                              /* was 4.5rem */
.mt-12 { margin-top: 2rem; }                                /* was 3rem  */
.mb-12 { margin-bottom: 2rem; }                             /* was 3rem  */

/* ═══════════════════════════════════════════════════════════════════════════════
   DENSITY-V2 (2026-07-31, operator): reclaim WIDTH (horizontal) + overflow-safety so
   text never overflows/overlaps and long names/locations wrap. Padding/overflow only →
   theme-independent, covers every template that loads this sheet. Mobile-first: phones
   are where width is scarce; desktop stays comfortable.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 1) OVERFLOW-SAFETY — the #1 cause of "text covering other things" is a flex child that
   can't shrink (default min-width:auto) meeting a long unbreakable string. Fix both. */
body { overflow-wrap: break-word; }
.flex > *, [class*="inline-flex"] > * { min-width: 0; }   /* allow shrink; flex-shrink:0 items still hold */
table { max-width: 100%; }
pre, code { overflow-x: auto; max-width: 100%; }

/* 2) MOBILE (≤640px): trim the big gutters, card padding and gaps to give text room. */
@media (max-width: 640px) {
  .px-8, .px-6 { 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; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DENSITY-V3 (2026-07-31, operator: "functional SaaS, professional app-like, GLOBAL
   & generic, tighten EVERY breakpoint — no endless scrolling"). Targets the REAL
   space-eaters measured on-page: component padding (cards), hero + section padding,
   table rows, heading margins. Applies at ALL widths (not mobile-only). Readability
   floor kept. One file → every page. ═══════════════════════════════════════════════ */

/* 1) CARD / CONTENT PADDING — the biggest content-level consumer, every screen size. */
.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; }

/* 2) SECTION + HERO VERTICAL PADDING — cut the airy section rhythm at ALL widths. */
.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; }
section[class*="bg-hero"], .bg-hero { padding-top: 1.4rem; padding-bottom: 1.4rem; }

/* 3) HEADING / BLOCK MARGINS — trim the big gaps between title and content. */
.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; }

/* 4) TABLE ROWS — tight rows on every screen (long league tables stop scrolling forever). */
table td, table th { padding-top: .35rem; padding-bottom: .35rem; }

/* 5) BADGES / PILLS never wrap to two lines ("NEW" → "NE/W"); trim pill side padding. */
[class*="rounded-full"], [class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[11px]"] { white-space: nowrap; }
.px-4.py-1\.5, .px-4.py-2, .px-4.py-2\.5 { padding-left: .65rem; padding-right: .65rem; }

/* 6) TYPE SCALE — poster-sized headings shrink to app scale on phones (desktop unchanged). */
@media (max-width: 640px) {
  .text-5xl { font-size: 2.1rem; line-height: 1.05; }
  .text-4xl { font-size: 1.7rem; line-height: 1.12; }
}

/* DIVISION-TABS-FIT (2026-07-31, operator "too many separate tab rows"): the shared #div-tabs pill row
   (Combined / Division A/B/C on standings, club-leaderboard, top ten, history) wrapped to two rows on
   phones — make it ONE horizontally-scrollable row instead. Generic: one rule, every page that uses it. */
@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; }
}
/* also the topten variant id (#division-tabs) — same one-row treatment. */
@media (max-width: 640px) {
  #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; }
}