/* ============================================================================
   Homepage structure for the redesign.

   Shared by every league. Nothing here hardcodes a colour, font or radius --
   it all comes from the variables in /themes/<league>/_vars.css, which are
   generated from the design by tools/gen-theme-vars.ps1. That is what keeps
   seven visually distinct sites on one stylesheet: change a league's palette
   and every section below follows.

   Variables consumed:
     --p  --p2 --g            brand primary / secondary / accent
     --pr --p2r --gr          the same as "r,g,b" triplets, for rgba()
     --bg --bg2               page and band backgrounds
     --panel --panel2         card surfaces
     --inset --chip           recessed and pill surfaces
     --line --line2 --edge    borders, weakest to strongest
     --t0 .. --t5             text, brightest to dimmest
     --pos --neg              positive / negative result colours
     --rad --bw               radius and border width
     --df --bf                display and body font
     --pbw --pt --ptc --psh   panel border width, top rule, its colour, shadow
     --motif --motifOp        the league's background pattern
   ========================================================================= */

/* ---- shell ------------------------------------------------------------- */

.hp {
    /* transparent so the page motif shows through; the page background is on html */
    background: transparent;
    font-family: var(--bf);
    color: var(--t1);
    position: relative;
    overflow: hidden;
}

/* ---- page background ---------------------------------------------------- */

/* Colour only. The motif is applied per section further down -- painting it
   here meant it showed only through the gaps between cards, so it read on the
   homepage and was invisible on denser pages. */
html { background-color: var(--bg); }
body { background: transparent; }

.hp-motif { display: none; }   /* retired */

/* Must match .gw in Default.aspx exactly (max-width 1320, gutter 18px). The
   page has two container systems -- .gw for the original sections and this one
   for full-bleed sections that need a background behind the gutter -- and any
   difference between them shows up as sections with misaligned left edges.
   A 20px gutter here put every .hp-in section 2px inside the .gw ones. */
.hp-in {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 18px;
}

/* ---- section furniture ------------------------------------------------- */

.hp-sec { margin: 34px 0; }

.hp-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    position: relative;
    padding: 9px 0;
}


/* Heading content sits above the band. */
.hp-h > * { position: relative; z-index: 1; }

.hp-h h2 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--df);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--t0);
}

/* The accent tick that opens each heading. */
.hp-h h2::before {
    content: "";
    width: 3px;
    height: 15px;
    background: var(--p2);
    border-radius: 2px;
}

.hp-more {
    font-family: var(--df);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--p2);
    text-decoration: none;
    white-space: nowrap;
}
.hp-more:hover { color: var(--t0); text-decoration: none; }

/* ---- panels ------------------------------------------------------------ */

.hp-panel {
    background: var(--panel);
    border: var(--pbw, 1px) solid var(--line);
    border-top: var(--pt, 1px) solid var(--ptc, var(--line));
    border-radius: var(--rad);
    box-shadow: var(--psh, none);
}

.hp-panel-pad { padding: 16px 18px; }

.hp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: var(--chip);
    border: 1px solid var(--edge);
    border-radius: 5px;
    font-family: var(--df);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--t3);
}

/* ---- grid -------------------------------------------------------------- */

/* NOTE: no .hp-grid here. Default.aspx already defines .hp-grid in its own
   inline <style> for the news/sidebar split, and it predates this file. A
   second definition of the same name would be a latent conflict for whoever
   edits either one next, so this sheet stays off that name entirely.
   Use .hp-split below for new two-column layouts. */

/* News and points table sit side by side on desktop, stack below. */
.hp-split {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
}

/* ---- season at a glance ------------------------------------------------ */

/* Dense by design. There are ~19 of these and a four-column grid pushed them
   to five rows of tall cards; auto-fill at a small minimum keeps the whole set
   to about two rows on a desktop width, which is what the strip it replaced
   did. */
.hp-glance {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
}

.hp-stat {
    display: block;
    background: var(--panel);
    border: var(--pbw, 1px) solid var(--line);
    border-top: var(--pt, 1px) solid var(--ptc, var(--line));
    border-radius: var(--rad);
    padding: 9px 11px 10px;
    box-shadow: var(--psh, none);
    text-decoration: none;
    transition: border-color .15s ease;
}
.hp-stat:hover { border-color: rgba(var(--p2r), 0.55); text-decoration: none; }

.hp-stat-l {
    display: block;
    font-family: var(--df);
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.9px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--t4);
    margin-bottom: 3px;
    /* Labels vary from "TOTAL TIES" to "TOTAL PLAYERS PLAYED"; clamping keeps
       every tile the same height regardless. */
    min-height: 2.6em;
}

.hp-stat-v {
    display: block;
    font-family: var(--df);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.05;
    color: var(--t0);
}
.hp-stat:hover .hp-stat-v { color: var(--p2); }

/* ---- points table ------------------------------------------------------ */

.hp-tbl { width: 100%; border-collapse: collapse; }

.hp-tbl th {
    font-family: var(--df);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t4);
    text-align: right;
    padding: 9px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--inset);
}
.hp-tbl th:nth-child(-n+2) { text-align: left; }

.hp-tbl td {
    padding: 9px 8px;
    font-size: 13px;
    color: var(--t2);
    text-align: right;
    border-bottom: 1px solid var(--line2);
}
.hp-tbl td:nth-child(-n+2) { text-align: left; }
.hp-tbl tr:last-child td { border-bottom: 0; }

.hp-tbl .hp-team {
    font-family: var(--df);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.6px;
    color: var(--t0);
}

.hp-tbl .hp-pts { color: var(--t0); font-weight: 700; }

/* Qualification marker, coloured by the league's accent. */
.hp-q { color: var(--g); font-weight: 700; }

/* ---- form pips --------------------------------------------------------- */

.hp-form { display: inline-flex; gap: 3px; }

.hp-pip {
    width: 17px;
    height: 17px;
    border-radius: 3px;
    font-family: var(--df);
    font-weight: 700;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    color: var(--onTint);
}
.hp-pip-w { background: var(--pos); }
.hp-pip-l { background: var(--neg); }
.hp-pip-n { background: var(--edge); color: var(--t4); }

/* ---- news -------------------------------------------------------------- */

.hp-news { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hp-card {
    display: block;
    background: var(--panel);
    border: var(--pbw, 1px) solid var(--line);
    border-radius: var(--rad);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--psh, none);
    transition: border-color .15s ease, transform .15s ease;
}
.hp-card:hover {
    border-color: rgba(var(--p2r), 0.55);
    transform: translateY(-2px);
    text-decoration: none;
}

.hp-card img { width: 100%; height: 168px; object-fit: cover; display: block; }

.hp-card-b { padding: 13px 14px 15px; }

.hp-card-d {
    font-family: var(--df);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t4);
    margin-bottom: 6px;
}

.hp-card-t {
    font-family: var(--df);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.32;
    color: var(--t0);
}
.hp-card:hover .hp-card-t { color: var(--p2); }

/* ---- franchises -------------------------------------------------------- */

.hp-fr { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }

.hp-fr-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 17px 10px;
    background: var(--panel);
    border: var(--pbw, 1px) solid var(--line);
    border-radius: var(--rad);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
.hp-fr-c:hover { border-color: rgba(var(--pr), 0.6); background: var(--panel2); text-decoration: none; }

.hp-fr-c img { width: 48px; height: 48px; object-fit: contain; }

.hp-fr-n {
    font-family: var(--df);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.8px;
    text-align: center;
    color: var(--t2);
}

/* ---- email signup ------------------------------------------------------ */

.hp-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 22px 24px;
    background: linear-gradient(120deg, rgba(var(--pr), 0.22), rgba(var(--p2r), 0.10) 60%, transparent);
    border: 1px solid var(--edge);
    border-radius: var(--rad);
}

.hp-join-t {
    font-family: var(--df);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.8px;
    color: var(--t0);
}
.hp-join-s { font-size: 13px; color: var(--t3); margin-top: 4px; }

.hp-join-f { display: flex; gap: 9px; flex: 1 1 300px; max-width: 460px; }

.hp-join-f input {
    flex: 1;
    min-width: 0;
    padding: 11px 13px;
    background: var(--inset);
    border: 1px solid var(--edge);
    border-radius: 6px;
    color: var(--t1);
    font-family: var(--bf);
    font-size: 13.5px;
}
.hp-join-f input::placeholder { color: var(--t5); }
.hp-join-f input:focus { outline: none; border-color: var(--p2); }

.hp-btn {
    padding: 11px 20px;
    background: var(--p);
    border: 1px solid var(--p);
    border-radius: 6px;
    font-family: var(--df);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--onTint);
    cursor: pointer;
    white-space: nowrap;
}
.hp-btn:hover { background: var(--p2); border-color: var(--p2); }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 1100px) {
    .hp-split { grid-template-columns: minmax(0, 1fr); }
    .hp-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-fr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    /* No .hp-in gutter override here. .gw keeps 18px at every width, so
       narrowing this one would re-introduce the misaligned left edges on
       phones, where they are most obvious. */
    .hp-news { grid-template-columns: minmax(0, 1fr); }
    .hp-fr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hp-stat-v { font-size: 21px; }
}

/* Wide content must scroll inside its own container rather than pushing the
   page sideways. */
@media (max-width: 620px) {
    .hp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hp-scroll-x > .hp-tbl { min-width: 460px; }
}

/* ============================================================================
   MATCH CENTRE

   Restyled entirely through CSS. The markup is deliberately left alone because
   the JavaScript depends on it: the countdown writes into #cntdD/H/M/S, the
   live switcher rewrites #mzT1Score, #mzVS, #mzVenueEl and friends, and the
   pill switcher binds $('.pr-pill') and re-renders $('.pr-mc'). Renaming any of
   those would break the countdown and live scores silently -- the page would
   still render, just frozen.

   So every rule below re-skins an existing class rather than replacing it, and
   the countdown keeps its current behaviour and structure: the design has no
   countdown of its own, so there was nothing to replace it with.
   ========================================================================= */

.hp .pr-section,
.pr-section {
    background: transparent;
    border: 0;
}

.hp .pr-inner { max-width: 1320px; margin: 0 auto; padding: 0; }

/* ---- header row and match pills ---------------------------------------- */

/* Same treatment as .hp-h. The Match Centre header is a different class
   because the JS re-renders around it, so the rule is duplicated rather than
   the two being merged under one name. */
.hp .pr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    border: 0;
    position: relative;
    padding: 9px 0;
}


.hp .pr-head > * { position: relative; z-index: 1; }

.hp .pr-lbl {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--df);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--t0);
}
.hp .pr-lbl::before {
    content: "";
    width: 3px;
    height: 15px;
    background: var(--p2);
    border-radius: 2px;
}
.hp .pr-lbl span { color: var(--t3); font-weight: 600; }

.hp .pr-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--chip);
    border: 1px solid var(--edge);
    border-radius: 999px;
    font-family: var(--df);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.6px;
    color: var(--t3);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.hp .pr-pill:hover { border-color: rgba(var(--p2r), 0.6); color: var(--t0); text-decoration: none; }
.hp .pr-pill.active {
    border-color: rgba(var(--pr), 0.75);
    background: rgba(var(--pr), 0.18);
    color: var(--t0);
}
.hp .pr-pill img { width: 17px; height: 17px; object-fit: contain; }
.hp .pr-pill-t { white-space: nowrap; }

.hp .pr-all-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--df);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--p2);
    text-decoration: none;
}
.hp .pr-all-link:hover { color: var(--t0); text-decoration: none; }
.hp .pr-all-link svg { width: 11px; height: 11px; }

/* ---- layout ------------------------------------------------------------ */

.hp .pr-bz-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 380px;
    align-items: start;
}

/* ---- the match card ---------------------------------------------------- */

.hp .pr-mc {
    background: var(--panel);
    border: var(--pbw, 1px) solid var(--line);
    border-top: var(--pt, 1px) solid var(--ptc, var(--line));
    border-radius: var(--rad);
    box-shadow: var(--psh, none);
    overflow: hidden;
}

.hp .pr-mc-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: var(--inset);
    border-bottom: 1px solid var(--line2);
}

.hp .pr-mc-meta {
    font-family: var(--df);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t3);
}

.hp .pr-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--df);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--onTint);
}
.hp .badge-lv { background: var(--neg); }
.hp .badge-up { background: rgba(var(--pr), 0.9); }
.hp .badge-rs, .hp .pr-badge:not(.badge-lv):not(.badge-up) { background: var(--edge); color: var(--t2); }

/* ---- teams and score --------------------------------------------------- */

.hp .pr-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 22px 18px;
}

.hp .pr-team { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.hp .pr-team img { width: 58px; height: 58px; object-fit: contain; }

.hp .pr-tcode {
    font-family: var(--df);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.3px;
    color: var(--t0);
}

.hp .pr-score {
    font-family: var(--df);
    font-weight: 700;
    font-size: 21px;
    color: var(--t1);
}

.hp .pr-vs { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.hp .pr-vs-label {
    font-family: var(--df);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.6px;
    color: var(--t4);
}
.hp .pr-vs-sub, .hp .pr-vs-time { font-size: 11.5px; color: var(--t4); }

.hp .pr-result-txt {
    padding: 0 18px 16px;
    text-align: center;
    font-size: 13.5px;
    color: var(--t2);
}

.hp .pr-mc-venue {
    padding: 11px 16px;
    border-top: 1px solid var(--line2);
    font-size: 12px;
    color: var(--t4);
    text-align: center;
}

/* ---- countdown --------------------------------------------------------- */
/* Kept as-is by intent. Only the surface is themed; the structure, the digit
   elements and their ids are untouched so the timer keeps running. */

.hp .pr-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--line2);
    background: var(--inset);
    font-family: var(--df);
    font-weight: 700;
    color: var(--t0);
}

/* ---- side panels ------------------------------------------------------- */

.hp .pr-panel {
    background: var(--panel);
    border: var(--pbw, 1px) solid var(--line);
    border-top: var(--pt, 1px) solid var(--ptc, var(--line));
    border-radius: var(--rad);
    box-shadow: var(--psh, none);
    margin-bottom: 14px;
    overflow: hidden;
}

.hp .pr-cl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--inset);
    border-bottom: 1px solid var(--line2);
    font-family: var(--df);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--t0);
}
.hp .pr-cl a {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--p2);
    text-decoration: none;
}
.hp .pr-cl a:hover { color: var(--t0); }

.hp .pr-stats { padding: 13px 14px; }

.hp .pr-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 14px; }

.hp .pr-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: var(--chip);
    border: 1px solid var(--edge);
    border-radius: 6px;
    font-family: var(--df);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.6px;
    color: var(--t2);
    text-decoration: none;
}
.hp .pr-link:hover { border-color: rgba(var(--p2r), 0.6); color: var(--t0); text-decoration: none; }

@media (max-width: 1100px) {
    .hp .pr-bz-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .hp .pr-teams { padding: 18px 12px; gap: 8px; }
    .hp .pr-team img { width: 46px; height: 46px; }
    .hp .pr-score { font-size: 18px; }
}

/* Panel header. The Match Centre's .pr-cl is visually the same thing, but it
   is left separate: that class is bound to markup the JS re-renders, so tying
   the two together would mean a styling change here could only be made by
   touching the behaviour-critical block too. */
.hp-cl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    background: var(--inset);
    border-bottom: 1px solid var(--line2);
    font-family: var(--df);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--t0);
}

/* ============================================================================
   SEASON LEADERS

   The design gives each league one of three treatments via its skin:

     band  (IPL, LPL)          leader sits on a brand-coloured band
     rail  (BBL, MLC)          flat rows against an accent rail, no bars
     num   (CPL, SA20, 100)    oversized rank numerals carry the hierarchy

   All three share the markup below; the variant class on the section wrapper
   picks one. That is why a league switches treatment by editing config rather
   than markup, and why there is one block to maintain instead of three.
   ========================================================================= */

.hp-ldrs {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 22px;
}

.hp-ldr {
    background: var(--panel);
    border: var(--pbw, 1px) solid var(--line);
    border-top: var(--pt, 1px) solid var(--ptc, var(--line));
    border-radius: var(--rad);
    box-shadow: var(--psh, none);
    overflow: hidden;
}

/* ---- leader row (shared) ----------------------------------------------- */

.hp-ldr-top {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--line2);
}
.hp-ldr-top:hover { text-decoration: none; }
.hp-ldr-top img { width: 34px; height: 34px; object-fit: contain; flex: none; }

.hp-ldr-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.hp-ldr-top .hp-ldr-nm {
    font-family: var(--df);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--t0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hp-ldr-top .hp-ldr-tm { font-size: 11.5px; color: var(--t4); letter-spacing: 0.6px; }

.hp-ldr-val {
    font-family: var(--df);
    font-weight: 700;
    font-size: 22px;
    color: var(--t0);
    flex: none;
}

/* ---- ranked rows (shared) ---------------------------------------------- */

.hp-ldr-row {
    display: grid;
    grid-template-columns: 20px 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--line2);
}
.hp-ldr-row:last-child { border-bottom: 0; }
.hp-ldr-row:hover { background: var(--panel2); text-decoration: none; }

.hp-ldr-rk {
    font-family: var(--df);
    font-weight: 700;
    font-size: 12px;
    color: var(--t4);
    text-align: center;
}
.hp-ldr-row img { width: 20px; height: 20px; object-fit: contain; }

.hp-ldr-row .hp-ldr-nm {
    font-size: 13px;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Team is redundant next to the crest in the compact rows. */
.hp-ldr-row .hp-ldr-tm { display: none; }

.hp-ldr-v {
    font-family: var(--df);
    font-weight: 700;
    font-size: 13px;
    color: var(--t0);
    text-align: right;
}

.hp-ldr-bar { display: none; }

/* ---- variant: band ----------------------------------------------------- */
/* Leader on a brand-coloured band, and the ranked rows keep their bars. */

/* --team is set per card from StatCard.LeaderColor. It falls back to the
   league primary only when a team has no colour recorded, so a missing value
   degrades to the old look rather than to a transparent band. */
.leaders-band .hp-ldr-top {
    background: linear-gradient(100deg, var(--team, var(--p)) 0%, rgba(var(--pr), 0.35) 100%);
    border-bottom-color: transparent;
}
.leaders-band .hp-ldr-top .hp-ldr-nm,
.leaders-band .hp-ldr-val { color: var(--onTint); }
.leaders-band .hp-ldr-top .hp-ldr-tm { color: rgba(255, 255, 255, 0.72); }

.leaders-band .hp-ldr-row { grid-template-columns: 20px 20px minmax(0, 1fr) 68px auto; }
.leaders-band .hp-ldr-bar {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: var(--inset);
    overflow: hidden;
}
.leaders-band .hp-ldr-bar i {
    display: block;
    height: 100%;
    background: var(--p2);
    border-radius: 3px;
}

/* ---- variant: rail ----------------------------------------------------- */
/* No bars. An accent rail down the leading edge carries the emphasis. */

.leaders-rail .hp-ldr { border-left: 3px solid var(--p); }
.leaders-rail .hp-ldr-top { background: var(--inset); }
.leaders-rail .hp-ldr-val { color: var(--p2); }
.leaders-rail .hp-ldr-row { padding-left: 11px; }
.leaders-rail .hp-ldr-row:hover { box-shadow: inset 3px 0 0 var(--p2); }

/* ---- variant: num ------------------------------------------------------ */
/* Oversized numerals lead. The crest is dropped so the number can dominate. */

.leaders-num .hp-ldr-top { background: var(--inset); }
.leaders-num .hp-ldr-val { font-size: 27px; color: var(--g); }

.leaders-num .hp-ldr-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
.leaders-num .hp-ldr-row img { display: none; }
.leaders-num .hp-ldr-rk {
    font-size: 19px;
    color: var(--t5);
    text-align: left;
    line-height: 1;
}
.leaders-num .hp-ldr-row:hover .hp-ldr-rk { color: var(--p2); }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 1100px) {
    .hp-ldrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .hp-ldrs { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   MATCH CENTRE PANELS — Head to Head, Season Comparison, Recent Form

   CSS only, and for a sharper reason than the Match Centre card itself: these
   three panels are re-rendered by JavaScript. Clicking a match pill replaces
   the innerHTML of #mzH2H and #mzCmp outright, and rewrites .fsq-name / .frow
   inside the form panels.

   The JS templates emit the same class names the server does, so restyling
   those classes updates both paths at once. Introducing new class names in the
   markup would style only the first render -- the page would look correct until
   someone clicked a pill, then revert to unstyled. Keeping to the existing
   names is what makes the two paths impossible to drift apart.
   ========================================================================= */

/* ---- head to head ------------------------------------------------------ */

.hp .h2h-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 13px 14px 10px;
    text-align: center;
}

.hp .h2hn .hv {
    font-family: var(--df);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.1;
    color: var(--t0);
}
.hp .h2hn.win .hv { color: var(--pos); }
.hp .h2hn.lose .hv { color: var(--neg); }
.hp .h2hn.nr .hv { color: var(--t4); }

.hp .h2hn .hl {
    margin-top: 3px;
    font-family: var(--df);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--t4);
}

.hp .h2h-track {
    display: flex;
    height: 6px;
    margin: 0 14px;
    border-radius: 3px;
    background: var(--inset);
    overflow: hidden;
}
.hp .h2h-d { background: var(--edge); height: 100%; }

.hp .h2h-lbl {
    display: flex;
    justify-content: space-between;
    padding: 6px 14px 0;
    font-family: var(--df);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.7px;
    color: var(--t3);
}

.hp .runs-sub {
    padding: 12px 14px 5px;
    font-family: var(--df);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--t4);
}

.hp .runs-bar-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 14px 14px;
}
.hp .runs-rv { font-family: var(--df); font-weight: 700; font-size: 12.5px; }
.hp .runs-bar {
    display: flex;
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--inset);
    overflow: hidden;
}
.hp .runs-a { background: var(--p2); height: 100%; }
.hp .runs-b { background: var(--neg); height: 100%; }

/* ---- season comparison ------------------------------------------------- */

.hp .cmp-hd,
.hp .cmp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
}

.hp .cmp-hd { border-bottom: 1px solid var(--line2); }

.hp .cmp-th {
    padding: 5px 8px;
    border-radius: 5px;
    text-align: center;
}
.hp .cth-n {
    font-family: var(--df);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.6px;
    color: var(--onTint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp .cmp-row { border-bottom: 1px solid var(--line2); }
.hp .cmp-row:last-child { border-bottom: 0; }

.hp .cmp-lbl {
    font-family: var(--df);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--t4);
}

.hp .cmp-v {
    position: relative;
    text-align: center;
    font-family: var(--df);
    font-weight: 700;
    font-size: 13.5px;
    color: var(--t2);
}
.hp .cmp-v.win { color: var(--t0); }
.hp .cmp-v.lose { color: var(--t4); }

/* The bar is a background wash behind the value, drawn by inline style. */
.hp .cmp-vbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
}

/* ---- recent form ------------------------------------------------------- */

.hp .fsq { padding: 11px 14px; }

.hp .fsq-name {
    font-family: var(--df);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.8px;
    color: var(--t1);
    margin-bottom: 7px;
}

.hp .frow { display: flex; flex-wrap: wrap; gap: 5px; }

.hp .fm { display: inline-flex; }

.hp .fm-r {
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--chip);
    border: 1px solid var(--edge);
    font-family: var(--df);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    color: var(--t3);
    white-space: nowrap;
}
/* Result classes are emitted lowercase by both paths (fm-w / fm-l / fm-nr). */
.hp .fm-w { border-color: rgba(46, 158, 91, 0.5); color: var(--pos); }
.hp .fm-l { border-color: rgba(201, 69, 90, 0.5); color: var(--neg); }
.hp .fm-nr, .hp .fm-n { color: var(--t4); }


/* ============================================================================
   HERO SLIDER

   Three treatments, one per league skin, matching the design:

     a  (IPL, LPL)          badge / number / label stacked left, outlined CTA
                            right, text centre
     b  (BBL, SA20, 100)    headline dominates; the number becomes a ghosted
                            watermark and its label moves beside a solid CTA
     c  (CPL, MLC)          editorial headline left, number demoted next to the
                            CTA, and a season summary panel filling the right

   The markup is one flat set of elements so each variant can place them with
   grid areas; nesting them made b and c impossible to express.

   CSS only as far as the JS is concerned: it toggles .active on #isi{n} and
   .on on #isdot{n}, animates #isProgFill and exposes isGo/isNext/isPrev, none
   of which are touched.

   Selectors carry the .is-section.hero-x prefix to outrank the page own
   inline styles, which are emitted after this file and win any tie.
   ========================================================================= */

.is-section { border-bottom: 1px solid var(--line); background: transparent; }
.is-section .is-item { position: relative; overflow: hidden; }

.is-section .is-body {
    display: grid;
    align-items: center;
    gap: 4px 26px;
    padding: 30px 0 26px;
    position: relative;
    z-index: 1;
}

/* ---- shared element styling -------------------------------------------- */

.is-section .is-chip {
    grid-area: chip;
    justify-self: start;
    font-family: var(--df);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.is-section .is-num { grid-area: num; font-family: var(--df); font-weight: 700; line-height: .92; color: var(--t0); }

.is-section .is-unit {
    grid-area: unit;
    font-family: var(--df);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--t4);
}

.is-section .is-hl { grid-area: hl; font-family: var(--df); font-weight: 700; color: var(--t0); line-height: 1.18; }
.is-section .is-story { grid-area: story; font-size: 13.5px; line-height: 1.55; color: var(--t3); max-width: 62ch; }

.is-section .is-badge {
    grid-area: badge;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    background: var(--chip);
    border: 1px solid var(--edge);
    border-radius: 5px;
}
.is-section .is-badge img { width: 17px; height: 17px; object-fit: contain; }
.is-section .is-badge-txt { font-size: 12px; color: var(--t2); }

.is-section .is-act { grid-area: act; justify-self: start; display: flex; align-items: center; gap: 13px; }

.is-section .is-cta {
    display: inline-block;
    padding: 11px 19px;
    border-radius: 5px;
    font-family: var(--df);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.is-section .is-dot { background: var(--edge); cursor: pointer; }
.is-section .is-dot.on { background: var(--g); }
.is-section .is-prog-fill { background: var(--p2); }

/* ---- variant a: number leads, outlined CTA ------------------------------ */

.is-section.hero-a .is-body {
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto;
    grid-template-areas:
        "chip hl    act"
        "num  story act"
        "unit badge act";
}
.is-section.hero-a .is-chip {
    padding: 6px 13px;
    border: 1px solid rgba(var(--gr), .5);
    border-radius: 100px;
    background: rgba(var(--gr), .1);
    color: var(--g);
}
.is-section.hero-a .is-num { font-size: 62px; }
.is-section.hero-a .is-hl { font-size: 25px; }
.is-section.hero-a .is-cta {
    border: 1px solid rgba(var(--p2r), .7);
    background: transparent;
    color: var(--t0);
}
.is-section.hero-a .is-cta:hover { background: rgba(var(--p2r), .16); color: var(--t0); }

/* ---- variant b: headline leads, number as watermark --------------------- */

.is-section.hero-b .is-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "chip"
        "hl"
        "story"
        "act";
    gap: 13px 0;
    padding: 34px 0 28px;
}

/* Leading rule, as in the design. */
.is-section.hero-b .is-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--g);
}
.is-section.hero-b .is-chip::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--g);
}
.is-section.hero-b .is-hl { font-size: 44px; text-transform: uppercase; letter-spacing: .5px; line-height: 1.04; }
.is-section.hero-b .is-cta { background: var(--p); color: var(--onTint); }
.is-section.hero-b .is-cta:hover { background: var(--p2); color: var(--onTint); }

/* The label sits beside the button rather than under the number. */
.is-section.hero-b .is-unit { grid-area: act; justify-self: start; align-self: center; margin-left: 215px; }
.is-section.hero-b .is-badge { display: none; }

/* The number becomes a watermark: out of the flow, behind everything, and
   hidden from assistive tech via aria-hidden in the markup. */
.is-section.hero-b .is-num {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 190px;
    line-height: 1;
    color: var(--t0);
    opacity: .045;
    pointer-events: none;
    z-index: 0;
}

/* ---- variant c: editorial, with a season panel -------------------------- */

.is-section.hero-c .is-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    grid-template-areas:
        "chip  glance"
        "hl    glance"
        "story glance"
        "act   glance";
    align-items: start;
    gap: 10px 34px;
    padding: 28px 0;
}
.is-section.hero-c .is-chip { color: var(--g); }
.is-section.hero-c .is-hl {
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 3px;
}
.is-section.hero-c .is-act { align-items: center; }
.is-section.hero-c .is-cta {
    border: 1px solid var(--edge);
    background: transparent;
    color: var(--t0);
}
.is-section.hero-c .is-cta:hover { border-color: var(--p2); color: var(--t0); }
.is-section.hero-c .is-badge { display: none; }

/* Number, its label and the button share the bottom row. */
.is-section.hero-c .is-num {
    grid-row: 4;
    grid-column: 1;
    justify-self: start;
    align-self: center;
    font-size: 32px;
    font-weight: 400;
}
.is-section.hero-c .is-unit {
    grid-row: 4;
    grid-column: 1;
    justify-self: start;
    align-self: end;
    margin-left: 0;
}
.is-section.hero-c .is-act { grid-row: 4; grid-column: 1; justify-self: start; margin-left: 130px; }

.is-glance {
    grid-area: glance;
    border: 1px solid rgba(var(--p2r), .45);
    border-radius: var(--rad);
    background: var(--panel);
    overflow: hidden;
}
.is-glance-t {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-family: var(--df);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--t2);
}
.is-glance-g { display: grid; grid-template-columns: 1fr 1fr; }
.is-glance-i {
    padding: 15px 16px;
    text-decoration: none;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.is-glance-i:nth-child(2n) { border-right: 0; }
.is-glance-i:nth-child(n+3) { border-bottom: 0; }
.is-glance-i:hover { background: var(--panel2); text-decoration: none; }
.is-glance-v { display: block; font-family: var(--df); font-weight: 400; font-size: 27px; line-height: 1; color: var(--t0); }
.is-glance-l {
    display: block;
    margin-top: 6px;
    font-family: var(--df);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--t4);
}
.is-glance-f { padding: 11px 16px; font-size: 12px; color: var(--t3); }

/* ---- responsive --------------------------------------------------------- */

@media (max-width: 980px) {
    .is-section.hero-a .is-body,
    .is-section.hero-c .is-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "chip" "num" "unit" "hl" "story" "badge" "act" "glance";
        gap: 9px 0;
    }
    .is-section.hero-a .is-num { font-size: 44px; }
    .is-section.hero-a .is-hl,
    .is-section.hero-b .is-hl,
    .is-section.hero-c .is-hl { font-size: 24px; }
    .is-section.hero-b .is-num { font-size: 110px; opacity: .05; }
    .is-section.hero-b .is-unit { margin-left: 0; grid-area: unit; }
    .is-section.hero-c .is-num,
    .is-section.hero-c .is-unit,
    .is-section.hero-c .is-act { grid-row: auto; grid-column: 1; margin-left: 0; }
    .is-glance { margin-top: 14px; }
}

/* ---- retire the previous per-slide colour system ------------------------ */

/* Each slide used to carry a chip-* class that set its own accent: a tinted
   background and coloured left border on .is-item, a coloured pill on .is-chip,
   and a per-slide dot colour. That predates the league themes and fights them --
   a BBL slide came out purple, an IPL slide red, regardless of the league.

   Those rules live in the page's own <style>, which is emitted after this file,
   so equal specificity loses. Every selector here therefore adds an attribute
   match to outrank them rather than relying on order. */

.is-section .is-item[class*="chip-"] {
    background: none;
    border-left: 0;
}

.is-section .is-chip[class*="chip-"] {
    background: transparent;
    border: 0;
    color: var(--g);
}

/* Variant a keeps a pill, but in the league's own accent. */
.is-section.hero-a .is-chip[class*="chip-"] {
    padding: 6px 13px;
    border: 1px solid rgba(var(--gr), .5);
    border-radius: 100px;
    background: rgba(var(--gr), .1);
    color: var(--g);
}

/* Dots: uniform, with the active one in the league accent. .is-dot.on.chip-g
   is 0,3,0 in the page, so these need the extra attribute match. */
.is-section .is-dot[class*="chip-"] { background: var(--edge); }
.is-section .is-dot.on[class*="chip-"] { background: var(--g); }

/* Slides are transparent so the league motif on the section shows through
   them. The accent bar that used to run down the left edge is gone -- it was
   mine, not the design's, and it read as the old per-slide colour system
   surviving. */
.is-section .is-item[class*="chip-"],
.is-section.hero-a .is-item[class*="chip-"],
.is-section.hero-b .is-item[class*="chip-"],
.is-section.hero-c .is-item[class*="chip-"] {
    background: transparent;
    border-left: 0;
}

.is-section > * { position: relative; z-index: 1; }

/* ============================================================================
   TEAM AND PLAYER PAGE HEROES

   These five pages -- team, team auction, player career, player season, player
   auction -- are the same banner showing the same team, and they were painted
   from three different sources that all disagreed:

     .bg-<short> in themes/<league>/style.css, !important, on the team pages
     a hardcoded switch in GetTeamColors, IPL-only, on the player pages
     --team from the design, everywhere else on the site

   Barbados Royals came out blue and red on its team page (the old Tridents
   colours, from .bg-br) and pink on its players' pages. Same team, same league,
   two answers.

   One source now: --team and --team2 from assets/css/team-colors.css, or the
   team's own colour where the database has one, falling back to the league
   pair. The IPL sides keep their curated two-tone gradients because those pairs
   were carried into that file rather than dropped.
   ========================================================================= */

.td-hero,
.player-hero {
    position: relative;
    overflow: hidden;
    /* The radial is not decoration: the jersey number watermark sits at the
       right of these heroes and a light team colour leaves it unreadable. It
       used to be a per-page ::before layer, which is why it disappeared when
       those were removed. Shared here so every hero darkens the same way. */
    background: radial-gradient(ellipse at 78% 50%,
                rgba(0, 0, 0, 0.42) 0%,
                transparent 62%),
                linear-gradient(136deg,
                var(--team,  var(--p))  0%,
                var(--team2, var(--p2)) 100%);
}

/* Jersey number watermark. Above the motif, below the text. */
.hero-num,
.td-hero-jersey {
    color: rgba(255, 255, 255, 0.13);
    z-index: 1;
}

.player-page .hero-row,
.player-page .hero-inner { position: relative; z-index: 1; }


/* ============================================================================
   THE LEAGUE MOTIF — on hero and heading sections, site-wide

   One treatment, one strength, on the equivalent section of every page. Not on
   the page background: with opaque cards that only showed through the gaps, so
   it appeared on the homepage and was invisible on denser pages.

   Strength is a single variable. Change --motif-strength here and every hero on
   every page follows; there is no per-section value to keep in sync, which is
   what made this inconsistent before.
   ========================================================================= */

:root { --motif-strength: 0.45; }

/* Heroes, one per page. These use ::after because five of them already define
   ::before for their own gradients.

   .td-hero and .player-hero used to be the exception: each carried its own
   diagonal stripe overlay, hardcoded in the page, so the texture on a team page
   did not match the texture on its own players' pages or on anything else. Both
   of those are gone and these two now take the league motif like the rest. */
.is-section,          /* homepage hero slider   */
.sch-hero,            /* schedule, results      */
.pt-hero,             /* points table           */
.auc-hero,            /* auction                */
.nws-hero,            /* news                   */
.buzz-ph,             /* buzz                   */
.cmp-hero,            /* compare                */
.player-hero,         /* player career, player season */
.td-hero,             /* team, team auction, player auction */
.sc-hero,             /* scorecard              */
.mp-hero,             /* match details          */
.hp-h,                /* homepage section headings */
.hp .pr-head {        /* match centre heading      */
    position: relative;
}

.is-section::after,
.sch-hero::after,
.pt-hero::after,
.auc-hero::after,
.nws-hero::after,
.buzz-ph::after,
.cmp-hero::after,
.player-hero::after,
.td-hero::after,
.sc-hero::after,
.mp-hero::after,
.hp-h::after,
.hp .pr-head::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--motif);
    opacity: var(--motif-strength);
    pointer-events: none;
    z-index: 0;
}

/* Headings have no background of their own, so the band bleeds into the gutter
   to meet the container edge. The text keeps zero horizontal padding, so it
   stays flush with the cards beneath it. */
.hp-h::after,
.hp .pr-head::after {
    left: -18px;
    right: -18px;
    inset-inline: auto;
}

/* Hero content must sit above the motif. Direct children only, so a page's own
   absolutely-positioned gradient layers keep their intended order. */
.is-section > *,
.sch-hero > *,
.pt-hero > *,
.auc-hero > *,
.nws-hero > *,
.buzz-ph > *,
.cmp-hero > *,
.player-hero > *,
.td-hero > *,
.sc-hero > *,
.mp-hero > *,
.hp-h > *,
.hp .pr-head > * {
    position: relative;
    z-index: 1;
}