/* THE CATEGORY PAGES' HEAD IN THE HOME'S TREATMENT (prepared 29 Sep 2026, NOT APPLIED until the owner
   decides whether the old heroes read as the old site in new colours).
   What it replaces: the dark illustrated .page-hero and the "Platform:" button bar, the old site's
   structure. What it draws: the home's strapline (a large display line, then a "Reading" line
   written from the live cards) and the home's pill tabs.
   THE VALUES MIRROR board.css .strap / .reading / .tabs rather than importing them, because board.css
   is a whole-page sheet (a bare h2 rule among others) that would restyle every explainer here. That
   is a second copy of three rules; if this is applied, the three should move into one small sheet
   both load (board.css is the site session's), and this file shrinks to the category-only parts.
   Colours come from chrome.css's tokens, which every page already has through shared.css. */
/* Top and bottom only: the sides keep shared.css's section gutter (2rem, 1.25rem on a phone). The
   first cut wrote padding:34px 0 8px and put the heading flush against the screen edge at 390. */
.cat-strap{padding-top:34px;padding-bottom:8px;background:transparent}
.cat-strap h1{font-size:clamp(1.7rem,4.4vw,3.1rem);font-weight:700;letter-spacing:-.022em;margin:0;line-height:1.08;color:var(--ch-ink,#0d1b3e)}
.cat-strap h1 i{font-style:normal;color:var(--ch-bar,#0247FE)}
.cat-reading{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--ch-ink-2,#4b5878);font-size:.9rem;margin-top:14px;padding-top:14px;border-top:1px solid var(--ch-line,#dde3ee)}
.cat-reading b{color:var(--ch-ink,#0d1b3e);font-variant-numeric:tabular-nums}
.cat-livedot{width:7px;height:7px;border-radius:50%;background:var(--ch-up,#1db07c)}
.cat-sub{color:var(--ch-ink-2,#4b5878);font-size:.95rem;line-height:1.55;margin:12px 0 0;max-width:68ch}
.cat-tabs{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center}
/* COMPARED ONLY (29 Sep), in place of the venue pills: one switch, IPPages.comparedSwitch.
   A 44px-tall hit area around a small track, so the tap target is the whole label. */
.cat-cmp{appearance:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--ch-ink,#0d1b3e);background:none;border:0;
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 0;cursor:pointer;white-space:nowrap}
.cat-cmp em{font-style:normal;font-weight:500;opacity:.72;font-size:.78rem;font-variant-numeric:tabular-nums}
.cat-cmp-track{position:relative;width:38px;height:22px;border-radius:999px;background:var(--ch-line,#dde3ee);transition:background .15s;flex:none}
.cat-cmp-knob{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(13,27,62,.3);transition:transform .15s}
.cat-cmp[aria-checked="true"] .cat-cmp-track{background:var(--ch-bar,#0247FE)}
.cat-cmp[aria-checked="true"] .cat-cmp-knob{transform:translateX(16px)}
.cat-cmp:focus-visible{outline:2px solid var(--ch-bar,#0247FE);outline-offset:3px;border-radius:6px}
.cat-cmp:disabled{cursor:default;color:var(--ch-ink-2,#4b5878)}
.cat-cmp:disabled .cat-cmp-track{opacity:.55}
.cat-cmp-note{font-size:.84rem;color:var(--ch-ink-2,#4b5878)}
#catMarketsGrid article.ipc[data-cmp-hidden]{display:none}
/* The reading line's text wraps beside its dot, not onto a line of its own under it (seen at 390). */
.cat-reading > span:last-child{flex:1 1 0;min-width:0}
/* The grid section after the strapline starts close to it: its 56 to 80px top padding was sized for
   the old dark hero above it. */
.cat-strap + section.markets-section{padding-top:20px}

/* A section's own hub linked from its category (30 Sep: /premier-league/ from /sports/), as one pill. */
.cat-links{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.cat-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--ch-line,#dde3ee);border-radius:999px;background:var(--ch-card,#fff);color:var(--ch-ink,#0d1b3e);font-size:.86rem;font-weight:600;text-decoration:none}
.cat-links a:hover{border-color:var(--ch-bar,#0247FE);color:var(--ch-bar,#0247FE)}
.cat-links a::after{content:"\2192";margin-left:6px;color:var(--ch-bar,#0247FE)}
/* "All N open markets" link under the reading line (7 Oct 2026; shared.js IPPages.allMarketsLink). */
.cat-all{display:inline-block;margin-top:10px;font-size:.9rem;font-weight:600;color:var(--ch-ink,#141a2e);text-decoration:underline;text-underline-offset:3px;min-height:24px}