/*
  Edgeform design system
  Shared by the global gateway (/), the UK product (/uk/) and the market placeholders.
  Values follow the Edgeform UK visual reference.
*/

/* ---------- Reset ---------- */
@layer reset {
  *, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  small { font-size: 80%; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas { display: block; vertical-align: middle; }
  button, input, select, textarea {
    font: inherit; letter-spacing: inherit; color: inherit;
    border-radius: 0; background-color: transparent; opacity: 1;
  }
  ::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
  table { border-collapse: collapse; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0b1220;
  --ink-2: #121e32;
  --ink-3: #1a2840;
  --paper: #f4f6f8;
  --line: #dce2e8;
  --muted: #667085;
  --lime: #a3e635;
  --lime-dark: #4d7c0f;
  --lime-text: #52780f;
  --lime-soft: #ecfccb;
  /* Semantic colours with today's values, for newer rules (a start on theme support, not a theme). */
  --text-secondary: #5d6878;
  --gutter: max(22px, 50vw - 620px);
  --gutter-wide: max(22px, 50vw - 720px);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.site-shell { min-height: 100vh; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* SVG icons from /assets/icons.svg */
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-fill { fill: currentColor; }

/* ---------- Utility bar ---------- */
.utility {
  display: flex; align-items: center; gap: 28px;
  height: 32px; padding: 0 var(--gutter-wide);
  background: #070d18; color: #b9c3d3; font-size: 12px;
}
.utility b { margin-right: 5px; padding: 2px 5px; border-radius: 3px; background: var(--lime); color: #17210b; }
.utility-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.utility-links a { color: #fff; }
.utility-links .utility-market { display: flex; align-items: center; gap: 5px; color: #b9c3d3; }
.utility-links .utility-market svg { width: 13px; height: 13px; }
.utility-links a:hover { color: var(--lime); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  height: 76px; padding: 0 var(--gutter-wide);
  background: var(--ink); border-bottom: 1px solid #243047; color: #fff;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 800; letter-spacing: -.7px; white-space: nowrap;
}
.brand small {
  display: block; color: #91a0b8; font-size: 9px; line-height: 1;
  letter-spacing: 1px; text-transform: uppercase;
}
.brand-mark {
  display: flex; align-items: flex-end; gap: 3px;
  width: 31px; height: 31px; padding: 6px;
  border: 1px solid #566173; border-radius: 7px;
}
.brand-mark i { width: 5px; border-radius: 1px; background: var(--lime); }
.brand-mark i:nth-child(1) { height: 8px; }
.brand-mark i:nth-child(2) { height: 16px; }
.brand-mark i:nth-child(3) { height: 12px; }

.desktop-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 600; }
.desktop-nav a { padding: 27px 0; color: #cbd3df; }
.desktop-nav a:hover { color: var(--lime); }
/* The page's own section (aria-current="page" on the page itself, "true" on a page inside it): white, underlined in lime. */
.desktop-nav a[aria-current] { color: #fff; box-shadow: inset 0 -3px var(--lime); }
.desktop-nav a:focus-visible, .mobile-nav a:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.header-actions { display: flex; gap: 10px; margin-left: auto; }

/* Search */
.search-wrap { position: relative; }
.search {
  display: flex; align-items: center; gap: 8px;
  width: 230px; height: 40px; padding: 0 12px;
  background: #182338; border: 1px solid #33415b; border-radius: 8px; color: #8fa0ba;
}
.search > svg { width: 15px; height: 17px; }
.search input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font-size: 13px; }
.search input::-webkit-search-cancel-button { display: none; }
.search-go { display: none; color: #8fa0ba; }
.search-go svg { width: 15px; height: 15px; }
.search-wrap.has-query .search-go { display: flex; }
.search-toggle { display: none; }
.search-results {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 340px; max-height: min(420px, 70vh); overflow-y: auto; padding: 6px;
  background: var(--ink-2); border: 1px solid #344158; border-radius: 10px;
  box-shadow: 0 18px 50px #0008; color: #fff;
}
.search-results a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  padding: 9px 10px; border-radius: 7px; font-size: 13px;
}
.search-results a small { grid-column: 1; color: #93a1b5; font-size: 11px; }
.search-results a svg { grid-row: span 2; width: 15px; height: 15px; color: #93a1b5; }
.search-results a:hover, .search-results a.is-active { background: #1d2a40; }
.search-results a:hover svg, .search-results a.is-active svg { color: var(--lime); }
.search-empty { padding: 12px 10px; color: #93a1b5; font-size: 13px; }

.menu-btn { display: none; background: none; border: 0; color: #fff; }
.menu-btn svg { width: 24px; height: 24px; }
.mobile-nav { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 55px;
  min-height: 300px; padding: 42px var(--gutter);
  background: var(--ink); color: #fff;
}
.hero::after {
  content: ""; position: absolute; top: -220px; right: -150px;
  width: 600px; height: 600px; border: 1px solid #263148; border-radius: 50%;
  box-shadow: 0 0 0 80px #ffffff05, 0 0 0 160px #ffffff03;
}
.hero-copy, .hero-live-note { position: relative; z-index: 1; }
.hero-label, .eyebrow {
  display: flex; align-items: center; gap: 10px;
  color: #9aa8bd; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
}
.hero-label > span:first-child { color: var(--lime); }
.hero h1 {
  max-width: 750px; margin: 18px 0 14px;
  font-size: clamp(38px, 4.4vw, 61px); line-height: .99; letter-spacing: -3.5px;
}
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-copy > p { max-width: 590px; color: #b8c2d2; font-size: 18px; line-height: 1.6; }
.hero-live-note {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 360px; padding: 5px 0 5px 22px;
  border-left: 2px solid var(--lime); color: #bcc8d6; font-size: 15px;
}
.hero-live-note b { color: #fff; font-size: 20px; }
.hero-live-note a { display: flex; align-items: center; gap: 7px; color: var(--lime); font-weight: 700; }
.hero-live-note a svg { width: 17px; height: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-actions a {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px; border: 1px solid #45516a; border-radius: 7px;
  font-size: 14px; font-weight: 800;
}
.hero-actions a:first-child { background: var(--lime); border-color: var(--lime); color: #17210b; }
.hero-actions a svg { width: 17px; height: 17px; }

/* ---------- Trust bar ---------- */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0 var(--gutter);
  background: #fff; border-bottom: 1px solid var(--line);
}
.trust-bar span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 58px; border-right: 1px solid var(--line); font-size: 13px; font-weight: 700;
}
.trust-bar span:first-child { border-left: 1px solid var(--line); }
.trust-bar svg { width: 17px; height: 24px; color: var(--lime-dark); }
.trust-bar b { padding: 2px 5px; border-radius: 4px; background: var(--ink); color: #fff; }

/* ---------- Page layout ---------- */
.page-wrap { max-width: 1240px; margin: auto; padding: 52px 22px; }
.section { margin: 90px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading h2, .movement h2 { margin: 6px 0 8px; font-size: 34px; line-height: 1.15; letter-spacing: -1px; }
.section-heading p { max-width: 650px; margin: 0; color: var(--muted); }
.section-heading > a {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 3px; border-bottom: 1px solid; font-size: 14px; font-weight: 800;
}
.section-heading > a svg { width: 15px; height: 15px; }
.kicker { color: var(--lime-text); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }

/* ---------- Odds board ---------- */
.live-feed {
  overflow: hidden; border: 1px solid var(--line); border-radius: 13px;
  background: #fff; box-shadow: 0 7px 24px #18213008;
}
.live-feed-top { display: flex; justify-content: space-between; gap: 20px; padding: 24px 26px 18px; }
.live-feed h2 { margin: 4px 0; font-size: 29px; letter-spacing: -.8px; }
.live-feed-top p { margin: 0; color: #657083; }
.live-feed-status {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  color: #657083; font-size: 13px; white-space: nowrap;
}
.live-feed-status svg { width: 16px; height: 16px; }
.live-feed-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 25px; background: #f8fafb;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.live-sports, .live-options, .live-format { display: flex; align-items: center; gap: 5px; }
.live-sports { flex: none; }
.live-options { flex-wrap: wrap; justify-content: flex-end; }
.live-sports button, .live-format button {
  padding: 8px 10px; border: 1px solid #0000; border-radius: 6px; background: none;
  color: #526074; font-size: 14px; font-weight: 700;
}
.live-sports button.active { background: var(--ink); color: #fff; }
.live-options label { display: flex; align-items: center; gap: 7px; color: #5d687a; font-size: 13px; }
.live-options select {
  max-width: 190px; padding: 7px 10px; border: 1px solid #cbd4df; border-radius: 6px;
  background: #fff; color: #182333; font-size: 14px;
}
.live-format { padding: 2px; border: 1px solid #cdd5df; border-radius: 7px; background: #fff; }
.live-format button { padding: 5px 8px; font-size: 13px; }
.live-format button.active { background: #e9f5cf; color: #365314; }
.live-refresh {
  display: grid; place-items: center; width: 34px; height: 34px;
  border: 1px solid #cbd4df; border-radius: 7px; background: #fff; color: #3b485a;
}
.live-refresh svg { width: 17px; height: 17px; }
.live-refresh:disabled { opacity: .5; cursor: progress; }
.live-refresh:disabled svg { animation: spin 1s linear infinite; }
.loading-line {
  height: 3px; background: linear-gradient(90deg, transparent, var(--lime), transparent);
  animation: load 1s infinite;
}
.loading-slot { height: 3px; overflow: hidden; margin-bottom: -3px; position: relative; z-index: 1; }
.live-message {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 170px; padding: 24px; color: #5f6a7b; text-align: center;
}
.live-message strong { color: #172234; font-size: 18px; }
.live-competition {
  display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 11px 25px;
  background: #f1f5f8; color: #566476; font-size: 13px; font-weight: 700;
}
.live-competition b { color: #ab5f09; }
.live-fixture { border-top: 1px solid #e6eaf0; }
.live-competition + .live-fixture { border-top: 0; }
.live-fixture-main {
  display: grid; grid-template-columns: minmax(200px, 1.25fr) minmax(330px, 1.8fr) 40px;
  align-items: center; gap: 16px; padding: 16px 25px;
}
.live-match { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.live-match small { color: #637184; font-size: 12px; }
.live-match b { font-size: 17px; overflow-wrap: break-word; }
.live-match b span { margin: 0 5px; color: #9ba5b3; font-weight: 400; }
.live-prices { display: flex; justify-content: flex-end; gap: 8px; }
.live-price {
  display: flex; flex-direction: column; flex: 1; min-width: 98px; max-width: 155px;
  padding: 8px 10px; border: 1px solid #dfe8d1; border-radius: 8px;
  background: #f5faeb; line-height: 1.3;
}
/* Team names wrap (long club names stay readable); only an unbreakable word may break. */
.live-price small { color: #54623f; font-size: 12px; line-height: 1.25; overflow-wrap: break-word; }
.live-price b { color: #21370a; font-size: 20px; }
/* Best-price bookmaker: the name wraps rather than being cut off. A tie shows "Name +N" as a disclosure
   that opens the full list on tap, click or keyboard (no hover tooltips). */
.live-who { color: #596777; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.live-tie { min-width: 0; }
.live-tie > summary { display: block; min-height: 24px; padding: 2px 0; border-radius: 4px; list-style: none; cursor: pointer; }
.live-tie > summary::-webkit-details-marker { display: none; }
.live-tie > summary i {
  display: inline-block; margin-left: 2px; padding: 0 6px; border: 1px solid #b9cf92; border-radius: 99px;
  background: #fff; color: #365314; font-size: 11px; font-style: normal; font-weight: 800; line-height: 1.3;
}
.live-tie[open] > summary i { border-color: #365314; background: #365314; color: #fff; }
.live-tie-list {
  display: block; margin-top: 4px; padding: 5px 7px; border: 1px solid #dfe8d1; border-radius: 6px;
  background: #fff; color: #334155; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere;
}
.live-expand {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 7px; background: #edf1f5; color: var(--ink);
}
.live-expand svg { width: 18px; height: 18px; transition: transform .2s; }
.live-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.live-book-list { padding: 0 25px 16px; overflow-x: auto; }
.live-book-row {
  display: grid; grid-template-columns: minmax(170px, 1.4fr) repeat(var(--outcomes, 3), minmax(80px, 1fr)) minmax(75px, .7fr);
  align-items: center; gap: 10px; min-width: 550px; padding: 9px 12px;
  border-bottom: 1px solid #e7ecf0; font-size: 14px;
}
.live-book-row.heading { background: #f2f5f7; color: #4d5969; font-size: 12px; font-weight: 700; }
.live-book-name, .live-book-row.heading > span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-book-row .is-best { color: #21370a; font-weight: 800; }
/* The star is decoration: screen readers get "(best price)" from the cell text instead. */
.live-book-row .is-best::after { content: " ★"; content: " ★" / ""; color: #4d7c0f; font-size: 11px; }
.live-book-price.is-missing, .live-book-updated { color: #5d6878; }
.live-legend { margin: -6px 0 0; padding: 0 25px 14px; color: #4d5969; font-size: 12px; }
.live-legend > span[aria-hidden="true"] { color: #4d7c0f; }
.live-legend-tag { margin-left: 6px; }
.live-legend-tag:first-child { margin-left: 0; }
.live-legend a, .live-footnote a { color: #365314; font-weight: 700; text-decoration: underline; }
/* "Ad" marks an affiliate link (on the link itself and in the legend). Never give a disclosure a class like "*-ad" or
   "ad-*": ad blockers hide those (EasyList hides .live-ad, this label's old name), and the disclosure would vanish. */
.link-tag {
  display: inline-block; padding: 0 4px; border: 1px solid currentcolor; border-radius: 4px;
  font-size: 10px; font-weight: 800; line-height: 1.4; letter-spacing: .3px; vertical-align: 1px;
}
.live-book-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-book-list.has-links .live-book-row { grid-template-columns: minmax(170px, 1.4fr) repeat(var(--outcomes, 3), minmax(80px, 1fr)) minmax(125px, .9fr); }
.live-go {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid #c9dca6; border-radius: 6px;
  background: #f5faeb; color: #365314; font-size: 12px; font-weight: 800; white-space: nowrap;
}
.live-go:hover { border-color: var(--lime-dark); }
.live-go svg { width: 12px; height: 12px; }
.live-feed :focus-visible { outline-color: var(--lime-dark); }
.live-match-link { color: inherit; }
.live-match-link:hover b { text-decoration: underline; }
.live-match-page { margin: 0; padding: 0 25px 14px; font-size: 13px; }
.live-match-page a { display: inline-flex; align-items: center; gap: 6px; color: #365314; font-weight: 700; text-decoration: underline; }
.live-match-page svg { flex: none; width: 14px; height: 14px; }
.live-competition b.is-stale { color: #9a5408; }
.live-price i { font-style: normal; font-weight: 700; }
.live-price.is-missing { border-color: #e6eaf0; background: #f8fafb; }
.live-price.is-missing b { color: #6b7686; }
.live-notice { margin: 0; padding: 11px 25px; border-top: 1px solid #e6eaf0; background: #fffbeb; color: #7c4a03; font-size: 13px; }
/* Loading placeholders: the shape of real rows, never prices. */
.sk { display: block; border-radius: 5px; background: linear-gradient(90deg, #edf1f5 0, #f6f8fa 50%, #edf1f5 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
.sk-s { width: 90px; height: 12px; }
.sk-m { width: 140px; height: 13px; }
.sk-l { width: min(230px, 80%); height: 18px; }
.sk-price { flex: 1; min-width: 98px; max-width: 155px; height: 68px; border-radius: 8px; }
.sk-btn { width: 36px; height: 36px; border-radius: 7px; }
.sk-row { height: 30px; margin-top: 10px; }
.live-fixture.is-skeleton .live-match { gap: 8px; }
.live-footnote { margin: 0; padding: 12px 25px; border-top: 1px solid var(--line); color: #637184; font-size: 12px; }
.live-competition b.is-fresh { color: #3f6212; }
.live-match small.is-live { color: #059669; font-weight: 800; }
.live-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.live-action {
  height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink); font-size: 12px; font-weight: 800;
}
.live-action.primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.live-more {
  display: block; width: 100%; padding: 12px 25px; border: 0; border-top: 1px solid #e6eaf0;
  background: #fbfcfd; color: #41680b; font-size: 13px; font-weight: 700; text-align: left; text-decoration: underline;
}
.live-options select:disabled { opacity: .6; }

/* ---------- Bookmaker logo badge (odds board, event pages, market placeholders) ---------- */
.book-logo {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 8px; box-shadow: inset 0 0 0 1px #ffffff40;
  background: var(--logo, #334155); color: #fff; font-size: 13px; font-weight: 900;
}
.book-logo.small { width: 22px; height: 22px; border-radius: 4px; font-size: 7px; }
.disclosure {
  margin: 18px 0 0; padding: 11px 14px; border-left: 3px solid #8ea847;
  background: #eef2f6; color: #4b5565; font-size: 11px;
}
.disclosure a { font-weight: 800; text-decoration: underline; }

/* ---------- UK bookmakers on the home page (app.js, from /api/bookmaker-profiles) ---------- */
/* One tile per published profile, A to Z: the logo tile of /uk/bookmakers/ (or the initials) and the name, linking to
   the profile. No ratings, offers or other links. "All bookmakers" sits in the heading on wide screens and under the
   list on phones, where section heading links are hidden. */
.home-books {
  --bm-tile: #1f2937;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.home-books:empty { display: none; }
.home-book a {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.home-book a:hover { border-color: #b9c4d0; box-shadow: 0 8px 22px #18213012; }
.home-book a:hover .home-book-name { color: var(--lime-text); }
.home-book a:focus-visible { outline: 2px solid var(--lime-dark); outline-offset: 2px; }
.home-book-logo { width: 68px; height: 34px; padding: 6px 8px; border-radius: 7px; }
.home-book-logo .bm-logo-initials { font-size: 12px; }
.home-book-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; }
.home-book a > svg { flex: none; width: 16px; height: 16px; color: #8b95a3; }
.home-books-status {
  margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 11px;
  color: var(--muted); font-size: 14px; text-align: center;
}
.home-books-status[hidden] { display: none; }
.home-books-status a { font-weight: 800; text-decoration: underline; }
.home-books-all { display: none; margin: 16px 0 0; }
.home-books-all a { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid; font-size: 14px; font-weight: 800; }
.home-books-all svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .home-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Two columns on phones: the logo above the name, so a name has the tile's whole width and wraps between words. */
  .home-book a { flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; min-height: 0; padding: 10px; }
  .home-book-logo { width: 52px; height: 28px; padding: 5px 6px; border-radius: 6px; }
  .home-book-logo .bm-logo-initials { font-size: 11px; }
  .home-book-name { font-size: 14px; }
  .home-book a > svg { display: none; }
  .home-books-all { display: block; }
}

/* ---------- Market snapshot ---------- */
.snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.snapshot-grid article { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.snapshot-event { margin-bottom: 7px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.snapshot-event > span { color: #687386; font-size: 10px; text-transform: uppercase; }
.snapshot-event b { display: block; margin: 4px 0; font-size: 15px; }
.snapshot-event i { color: #8b95a3; font-style: normal; font-weight: 400; }
.snapshot-event small { color: #6c7788; }
.snapshot-price {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #edf0f3;
}
.snapshot-price > span { color: #697586; font-size: 11px; }
.snapshot-price > strong { grid-row: span 2; font-size: 18px; }
.snapshot-price small, .snapshot-who { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; font-size: 10px; }
.snapshot-price .live-who { color: inherit; font-size: inherit; }
.snapshot-price .live-tie { flex: 1 1 auto; }
.snapshot-grid .snapshot-note { display: flex; flex-direction: column; justify-content: center; gap: 10px; grid-column: 1 / -1; min-height: 120px; color: #5f6a7b; text-align: center; align-items: center; }
.snapshot-note a { display: inline-flex; align-items: center; gap: 6px; color: #41680b; font-weight: 800; }
.snapshot-note svg { width: 15px; height: 15px; }
.snapshot-grid article.is-skeleton .sk-l { margin-top: 8px; }

/* ---------- Price movement ---------- */
.movement {
  display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 50px;
  padding: 36px; border-radius: 14px; background: #e8edf2;
}
.movement p { color: #677386; }
.move-metrics { display: flex; align-items: center; gap: 15px; }
.move-metrics div { display: flex; flex-direction: column; }
.move-metrics small { color: #687386; }
.move-metrics b { font-size: 25px; }
.move-metrics > svg { width: 24px; height: 24px; }
.move-metrics > span {
  display: flex; align-items: center; gap: 5px; padding: 7px;
  border-radius: 6px; background: #fff; color: #a2342e; font-size: 11px;
}
.move-metrics > span svg { width: 14px; height: 24px; }
.chart-card { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.chart-card > div:first-child { display: flex; align-items: center; gap: 8px; }
.chart-card > div > b { margin-left: auto; font-size: 28px; }
.chart-card svg { width: 100%; height: 150px; margin-top: 12px; overflow: visible; }
.chart-axis { display: flex; justify-content: space-between; color: #8993a1; font-size: 10px; }
/* The featured market move (/assets/market-move.js). */
.movement-copy a { color: inherit; font-weight: 700; }
.mm-status { margin: 12px 0 0; color: #475467; font-size: 14px; }
.move-metrics > [data-mm-change][data-direction="lengthening"] { color: #2f6b0f; }
.chart-card .mm-match { margin: 4px 0 0; color: #677386; font-size: 12px; }
.chart-card .mm-match a { color: var(--ink); font-weight: 700; }
.chart-card .mm-note { margin: 8px 0 0; color: #677386; font-size: 11px; line-height: 1.45; }
.chart-card .mm-line { fill: none; stroke: #65a30d; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-card .mm-dot-ref { fill: #fff; stroke: #65a30d; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-card .mm-dot-now { fill: #65a30d; }
.chart-card [data-mm-axis] span:nth-child(2) { text-align: center; }
/* Contrast on the section's grey (#e8edf2) and the white card: WCAG AA (4.5:1) for every text. */
.movement .kicker { color: #456a0c; }
.movement p, .movement .move-metrics small, .movement .mm-status { color: #4b5565; }
.chart-card .mm-match, .chart-card .mm-note { color: #4b5565; }
.movement .chart-axis { color: #5c6675; }
.movement .move-metrics { margin-top: 16px; }

/* ---------- Tools ---------- */
/* Six columns: the two calculators take half each, the three link cards a third each, so every row is full. */
.tools-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tool-live { grid-column: span 3; padding: 20px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.tool-live > svg { width: 24px; height: 24px; color: #658a1d; }
.tool-live h3 { margin: 8px 0; font-size: 18px; }
.calc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tool-live label { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: #677386; font-size: 11px; }
.tool-live input {
  width: 100%; min-width: 0; height: 40px; padding: 0 10px;
  border: 1px solid #cfd6df; border-radius: 6px; background: #f9fafb; color: var(--ink); font-size: 14px;
}
.tool-live input[aria-invalid="true"] { border-color: #d97706; background: #fffbeb; }
.return {
  display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px;
  border-radius: 7px; background: var(--ink); color: #fff;
}
.return span { display: flex; flex-direction: column; font-size: 11px; }
.return small { color: #9aa8bd; }
.return b { color: var(--lime); font-size: 23px; }
.conversion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.conversion span {
  display: flex; flex-direction: column; padding: 12px;
  border-radius: 6px; background: #eef2f6; color: #687386; font-size: 10px;
}
.conversion b { color: var(--ink); font-size: 17px; }
.tool-card {
  grid-column: span 2; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.tool-card > span {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px;
  border-radius: 7px; background: #eaf5cd; color: var(--lime-text); font-weight: 900;
}
.tool-card div { flex: 1; min-width: 0; }
.tool-card h3 { margin: 0; font-size: 15px; }
.tool-card p { margin: 3px 0; color: #6f7a8a; font-size: 11px; }
.tool-card > svg { width: 15px; height: 24px; }

/* ---------- Guides ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guide-grid a {
  display: flex; flex-direction: column; min-height: 210px; padding: 22px;
  border-radius: 11px; background: var(--ink); color: #fff;
}
.guide-grid > a > span { color: var(--lime); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.guide-grid h3 { margin: 25px 0 5px; font-size: 21px; }
.guide-grid p { margin: 0; color: #aeb9c9; font-size: 13px; }
.guide-grid small { display: flex; align-items: center; gap: 8px; margin-top: auto; color: #9ba8bb; }
.guide-grid small svg { width: 13px; height: 13px; }

/* ---------- Footer ---------- */
.site-footer { padding: 55px var(--gutter) 30px; background: #09101c; color: #d0d7e2; }
.footer-top { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px; }
.footer-brand { color: #fff; }
.footer-top p { max-width: 390px; color: #8997ab; font-size: 13px; }
.footer-top > div:not(:first-child) { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
.footer-top > div > b { margin-bottom: 5px; color: #fff; }
.footer-top a:hover { color: var(--lime); }
.footer-note {
  display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 22px;
  border-top: 1px solid #273247; color: #7f8ba0; font-size: 10px;
}
.footer-note span { max-width: 33%; }
.footer-note b { padding: 2px 4px; border-radius: 3px; background: var(--lime); color: #192309; }
.footer-note a:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 18px; left: 50%; z-index: 70; transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 9px; width: max-content; max-width: min(460px, 100% - 24px);
  padding: 11px 14px; border: 1px solid #46526a; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 13px; box-shadow: 0 12px 40px #0006;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 16px; height: 16px; color: var(--lime); }

/* ---------- Gateway and market placeholders ---------- */
.gateway-hero { grid-template-columns: 1fr; min-height: 360px; }
.gateway-hero .hero-copy > p { max-width: 640px; }
.market-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.market-card {
  display: flex; flex-direction: column; min-height: 210px; padding: 20px;
  border: 1px solid var(--line); border-radius: 11px; background: #fff;
}
.market-card h3 { margin: 16px 0 4px; font-size: 20px; }
.market-card p { color: var(--muted); font-size: 13px; }
.market-card .status {
  display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 18px;
  color: #586575; font-size: 12px; font-weight: 800;
}
.market-card .status i { width: 8px; height: 8px; border-radius: 50%; background: #9aa5b5; }
.market-card .status.active { color: var(--lime-text); }
.market-card .status.active i { background: #65a30d; box-shadow: 0 0 0 4px #65a30d22; }
.market-card .status svg { width: 15px; height: 15px; margin-left: auto; }
.market-card.is-active { border-color: #b8d877; box-shadow: 0 10px 30px #15223c0d; }
.market-subgrid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.market-subgrid a {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 99px;
  font-size: 11px; font-weight: 700;
}
.market-subgrid a:hover { border-color: var(--ink); }
.placeholder-card {
  max-width: 720px; margin: 0 auto; padding: 36px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center;
}
.placeholder-card .book-logo { margin: 0 auto; }
.placeholder-card .kicker { display: block; margin-top: 18px; }
.placeholder-card h1 { margin: 6px 0 10px; font-size: 34px; line-height: 1.15; letter-spacing: -1px; }
.placeholder-card .market-subgrid { justify-content: center; margin-top: 18px; }
.placeholder-wrap { padding-top: 80px; padding-bottom: 96px; }
.market-card h3 a:hover, .market-card:is(a):hover h3 { color: var(--lime-text); }
.placeholder-card p { max-width: 560px; margin: 0 auto; color: var(--muted); }

/* ---------- Information pages (e.g. /uk/how-we-make-money/) ---------- */
.info-page {
  max-width: 760px; margin: 0 auto; padding: 36px 40px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #334155; line-height: 1.6;
}
.info-page h1 { margin: 6px 0 12px; font-size: 34px; line-height: 1.15; letter-spacing: -1px; color: var(--ink); }
.info-page h2 { margin: 28px 0 8px; font-size: 19px; color: var(--ink); }
.info-page p, .info-page ul { margin: 0 0 12px; }
.info-page ul { padding-left: 20px; list-style: disc; }
.info-page li { margin-bottom: 8px; }
.info-page a { color: #365314; font-weight: 700; text-decoration: underline; }
.info-page .hero-actions a { text-decoration: none; }
.info-page .link-tag { color: #365314; }
/* A status note ("Not switched on yet") and an expandable block of technical detail, on the info pages. */
.info-page .info-note { padding: 10px 14px; border-left: 3px solid #4d7c0f; background: #f7fee7; color: #1f2937; }
.info-details { margin: 0 0 14px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.info-details > summary { padding: 10px 0; color: var(--ink); font-weight: 800; cursor: pointer; }
.info-details > summary:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
.info-details[open] > summary { margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.info-details > :last-child { margin-bottom: 12px; }
.info-details code { overflow-wrap: anywhere; }
.info-lead { font-size: 17px; }
.info-updated { margin-top: 24px; color: #5d6878; font-size: 13px; }
.placeholder-card .hero-actions { justify-content: center; }
.placeholder-card .hero-actions a:first-child { background: var(--ink); border-color: var(--ink); color: #fff; }
.placeholder-card .hero-actions a:not(:first-child) { border-color: var(--line); }

/* ---------- Animations ---------- */
@keyframes load { 0% { transform: translate(-70%); } to { transform: translate(70%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .menu-btn { display: block; }
  .mobile-nav:not([hidden]) {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 49;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    max-height: calc(100vh - 76px); overflow-y: auto; padding: 15px 22px;
    background: #111c30; color: #fff;
  }
  .mobile-nav a { display: flex; justify-content: space-between; padding: 13px; border-bottom: 1px solid #2d3a50; }
  .mobile-nav a svg { width: 17px; height: 17px; color: #8fa0ba; }
  .mobile-nav a[aria-current] { color: var(--lime); font-weight: 700; }
  .tool-live { grid-column: 1 / -1; }
  .snapshot-grid { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Every footer column stays: the brand on its own row, the three link columns under it. */
  .footer-top { grid-template-columns: repeat(4, 1fr); gap: 32px 28px; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 950px) {
  .hero { grid-template-columns: 1fr; }
  .hero-live-note { display: none; }
  .live-feed-controls { flex-direction: column; align-items: flex-start; }
  .live-options { justify-content: flex-start; }
  /* Team names keep a readable column; the prices share the rest and never push into the names. */
  .live-fixture-main { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr) 36px; }
  .live-price { min-width: 0; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .utility { justify-content: space-between; height: 28px; }
  .utility > span:nth-child(2), .utility-links .utility-market { display: none; }
  .utility-links { margin: 0; }
  .header { height: 64px; padding: 0 14px; }
  .mobile-nav:not([hidden]) { grid-template-columns: 1fr; max-height: calc(100vh - 64px); }
  .search-wrap { position: static; }
  .search { position: relative; justify-content: center; width: 42px; padding: 0; }
  .search input, .search-wrap .search-go { display: none; }
  .search-toggle { display: block; position: absolute; inset: 0; border-radius: 8px; }
  .search-wrap.is-open .search {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 48;
    justify-content: flex-start; width: auto; height: 56px; padding: 0 14px;
    border-width: 0 0 1px; border-radius: 0; background: #182338;
  }
  .search-wrap.is-open .search input { display: block; font-size: 16px; }
  .search-wrap.is-open.has-query .search-go { display: flex; }
  .search-wrap.is-open .search-toggle { display: none; }
  .search-results { top: calc(100% + 56px); left: 8px; right: 8px; width: auto; }
  .hero { padding: 35px 20px; }
  .hero h1 { letter-spacing: -2px; }
  .hero-copy > p { font-size: 16px; }
  .trust-bar { grid-template-columns: 1fr 1fr; padding: 0; }
  .trust-bar span { height: 48px; border-bottom: 1px solid var(--line); font-size: 11px; }
  .page-wrap { padding: 30px 14px; }
  .section { margin: 60px 0; }
  .section-heading { align-items: start; }
  .section-heading h2, .movement h2 { font-size: 28px; }
  .section-heading p { font-size: 13px; }
  .section-heading > a { display: none; }
  .movement { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .tools-grid { grid-template-columns: minmax(0, 1fr); }
  .tool-live, .tool-card { grid-column: auto; }
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .market-grid { grid-template-columns: minmax(0, 1fr); }
  .placeholder-card { padding: 26px 18px; }
  .placeholder-card h1 { font-size: 28px; }
  .placeholder-wrap { padding-top: 40px; padding-bottom: 60px; }
  .info-page { padding: 24px 18px; }
  .info-page h1 { font-size: 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; }
  .footer-note { flex-direction: column; }
  .footer-note span { max-width: 100%; }
}
@media (max-width: 650px) {
  .live-feed-top { display: block; padding: 19px; }
  .live-feed h2 { font-size: 25px; }
  .live-feed-status { margin-top: 12px; white-space: normal; }
  .live-feed-controls { overflow: hidden; padding: 10px; }
  .live-sports { flex-wrap: wrap; gap: 2px; max-width: 100%; }
  .live-sports button { padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .live-options { flex-wrap: wrap; width: 100%; }
  .live-options label { flex: 1 1 100%; }
  .live-options > select { flex: 1 1 130px; min-width: 0; max-width: none; }
  .live-options label select { flex: 1; min-width: 0; max-width: none; }
  .live-format button { padding: 0 12px; }
  .live-fixture-main { grid-template-columns: minmax(0, 1fr) 44px; gap: 11px; padding: 15px; }
  .live-match { grid-column: 1; }
  .live-prices { grid-area: 2 / 1 / auto / -1; justify-content: stretch; }
  .live-price { min-width: 0; }
  .live-price b { font-size: 18px; }
  .live-expand { grid-area: 1 / 2; }
  .live-book-list { padding: 0 15px 12px; overflow-x: visible; }
  /* Bookmaker rows restack instead of scrolling sideways: name and update time, then the prices. */
  .live-book-row, .live-book-list.has-links .live-book-row {
    grid-template-columns: repeat(var(--outcomes, 3), minmax(0, 1fr)); gap: 6px 8px; min-width: 0; padding: 10px 6px;
  }
  .live-book-row.heading > span:first-child, .live-book-row.heading > span:last-child { display: none; }
  .live-book-name { grid-row: 1; grid-column: 1 / -1; padding-right: 60px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* With affiliate links, the update time and the Visit link get their own line under the prices,
     so bookmaker names keep the full width and the link sits apart from the name. */
  .live-book-list.has-links .live-book-name { padding-right: 0; white-space: normal; overflow-wrap: anywhere; }
  .live-book-list.has-links .live-book-meta { grid-row: 3; }
  .live-book-meta { grid-row: 1; grid-column: 1 / -1; justify-self: end; font-size: 12px; }
  .live-book-price { padding: 5px 8px; border-radius: 6px; background: #f6f8fa; }
  .live-competition, .live-footnote, .live-more, .live-notice, .live-legend, .live-match-page { padding-left: 15px; padding-right: 15px; }
  .live-legend { margin-top: 0; }
  .sk-price { min-width: 0; }
}
/* Touch targets: about 44px for the board's controls on phones and on any touch screen (desktop sizes stay). */
@media (max-width: 650px), (pointer: coarse) {
  .live-sports button, .live-options select { min-height: 44px; }
  .live-format { padding: 1px; }
  .live-format button { min-height: 40px; }
  .live-refresh, .live-expand { width: 44px; height: 44px; }
  .live-more { min-height: 44px; }
  .live-action { height: 44px; padding: 0 16px; }
  .live-tie > summary { min-height: 28px; padding: 4px 0; }
  .live-go { min-height: 44px; padding: 0 12px; }
  .live-match-page a { min-height: 44px; }
}
@media (min-width: 951px) and (pointer: coarse) {
  .live-fixture-main { grid-template-columns: minmax(200px, 1.25fr) minmax(330px, 1.8fr) 44px; }
}
@media (min-width: 651px) and (max-width: 950px) and (pointer: coarse) {
  .live-fixture-main { grid-template-columns: minmax(150px, 1fr) minmax(0, 1.5fr) 44px; }
}
@media (max-width: 420px) {
  .live-price { padding: 8px 7px; }
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- Saved Matches (/assets/saved-matches.js): the header link, Save match, /uk/saved-matches/ ---------- */
/* A quiet link beside the menu, everywhere: text where there's room; the icon alone (its name kept for screen readers)
   on phones, and while the full desktop nav (and the home page's search) is showing (1051–1339px). The mobile menu lists it too. */
.header-saved {
  display: flex; align-items: center; gap: 7px; flex: none;
  height: 40px; padding: 0 12px; border: 1px solid #33415b; border-radius: 8px;
  color: #cbd3df; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.header-saved svg { width: 16px; height: 16px; }
.header-saved:hover, .header-saved[aria-current="page"] { color: var(--lime); }
.header-saved[aria-current="page"] { border-color: #58702a; }

/* Save match: an outline toggle button in the hero, never styled like the lime calls to action or the Visit links.
   Its space is kept from the first paint, so showing it moves nothing: laid out but invisible until saved-matches.js
   has read this device's state (.is-ready), and no space at all when scripting is off. The hint beside the button
   is one line in either state: beside it on wider screens, on its own line on phones. */
.event-save { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 6px; }
.event-save:not(.is-ready) { visibility: hidden; }
@media (scripting: none) { .event-save { display: none; } }
.event-save-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px; border: 1px solid #45516a; border-radius: 7px;
  background: transparent; color: #fff; font-size: 14px; font-weight: 700;
}
.event-save-btn svg { width: 16px; height: 16px; }
.event-save-btn:hover { border-color: #7f8ca3; }
.event-save.is-saved .event-save-btn { border-color: #84cc16; background: rgba(132, 204, 22, .12); color: #d9f99d; }
.event-save.is-saved .event-save-btn svg { fill: currentColor; }
.event-save-btn[aria-disabled="true"] { opacity: .75; cursor: progress; }
.event-save-hint { margin: 0; color: #c7d2e0; font-size: 13px; line-height: 18px; }
.event-save.is-saved .event-save-hint { color: #d9f99d; }
.event-save-note { flex-basis: 100%; margin: 0; color: #c7d2e0; font-size: 13px; }
.event-save-note:empty { display: none; }
.event-save-note a { color: var(--lime); font-weight: 700; text-decoration: underline; }
@media (max-width: 480px) { .event-save-hint { flex-basis: 100%; } }
/* Add to bet tracker: a quiet link under Save match, in the page from the first paint (so it moves nothing). The bet
   tracker needs scripting, so without it there's no link. */
.event-track { margin: 4px 0 0; font-size: 14px; }
.event-track a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--lime); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.event-track a svg { width: 16px; height: 16px; }
@media (scripting: none) { .event-track { display: none; } }

.saved-page .saved-intro { color: #475569; font-size: 14px; }
.saved-message { margin: 22px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.saved-message p:last-child { margin-bottom: 0; }
.saved-message .hero-actions { margin-top: 14px; }
.saved-problems { margin: 18px 0 0; color: #9a3412; font-size: 14px; }
.saved-status { margin: 14px 0 0; color: #334155; font-size: 14px; }
.saved-status:empty { margin: 0; }
.saved-page .saved-list { margin: 12px 0 0; padding: 0; list-style: none; }
.saved-page .saved-list li { margin: 0; }
.saved-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 14px 0; border-top: 1px solid var(--line);
}
.saved-row:last-child { border-bottom: 1px solid var(--line); }
.saved-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.saved-comp { color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .3px; overflow-wrap: anywhere; }
.saved-page .saved-title { color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.saved-page a.saved-title:hover { text-decoration: underline; }
.saved-title i { margin: 0 3px; color: #7f8ca3; font-style: normal; font-weight: 400; }
.saved-page .saved-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 0; color: #5d6878; font-size: 13px; }
.saved-state { padding: 1px 8px; border: 1px solid; border-radius: 99px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.saved-state.is-upcoming { border-color: #cfe5a9; background: var(--lime-soft); color: #365314; }
.saved-state.is-passed { border-color: #e2e8f0; background: #f1f5f9; color: #475569; }
.saved-state.is-gone { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.saved-remove {
  flex: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: #334155; font-size: 14px; font-weight: 700;
}
.saved-remove:hover { border-color: #94a3b8; color: var(--ink); }
.saved-remove[aria-disabled="true"] { opacity: .6; cursor: progress; }
/* Track a bet (a link to the Bet tracker with the match chosen) beside Remove; below the match on narrow screens. */
.saved-row-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.saved-page a.saved-track {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #cfe5a9; border-radius: 7px;
  background: var(--lime-soft); color: #365314; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.saved-page a.saved-track:hover { border-color: #65a30d; color: #1a2e05; }
@media (max-width: 560px) {
  .saved-row { flex-wrap: wrap; align-items: flex-start; }
  .saved-row-actions { width: 100%; justify-content: flex-start; }
}
.saved-note { margin: 22px 0 0; color: #5d6878; font-size: 13px; }
.saved-page .saved-over { margin: 18px 0 0; padding: 12px 14px; border-left: 3px solid #b45309; background: #fff7ed; color: #7c2d12; font-size: 14px; }
/* Remove all: after the list, and only ever after a confirmation (the dialog below). */
.saved-page .saved-actions { margin: 18px 0 22px; }
.saved-clear, .saved-dialog-actions button {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: #334155; font-size: 14px; font-weight: 700;
}
.saved-clear { border-color: #fca5a5; color: #b91c1c; }
.saved-clear:hover { border-color: #b91c1c; }
.saved-dialog { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.saved-dialog::backdrop { background: rgba(11, 18, 32, .55); }
.saved-dialog h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.saved-dialog p { margin: 0; color: #334155; font-size: 15px; }
.saved-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.saved-dialog-actions button:hover { border-color: #94a3b8; color: var(--ink); }
.saved-dialog .saved-danger { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.saved-dialog .saved-danger:hover { border-color: #991b1b; background: #991b1b; color: #fff; }
.saved-dialog button[aria-disabled="true"] { opacity: .6; cursor: progress; }
.saved-dialog :focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
.saved-page :focus-visible { outline-color: var(--lime-dark); }

/* The board's header is full here: the link's icon alone, with a little less space between the nav items and a
   narrower search box, so the header fits (it didn't quite at 1051px before). */
@media (min-width: 1051px) and (max-width: 1339px) {
  .header-saved { justify-content: center; width: 40px; padding: 0; }
  .header-saved span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .desktop-nav { gap: 15px; }
  .search { width: 200px; }
}
@media (max-width: 720px) {
  .header-saved { justify-content: center; width: 44px; height: 44px; padding: 0; }
  .header-saved span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .saved-message { padding: 14px 15px; }
}
@media (max-width: 400px) {
  .header { gap: 16px; }
  .header-actions { gap: 6px; }
}
/* The narrowest phones: no room beside the board's search and the menu, so it's in the menu only. */
@media (max-width: 359px) {
  .header-saved { display: none; }
}

/* ---------- Bet tracker (/uk/bet-tracker/, /assets/bet-tracker.js) ---------- */
/* A personal page on the information card, a little wider for the list. Every control is at least 44 px tall, every
   value is text (a status is a word, never a colour alone), and nothing needs more than 320px. */
.bet-page { max-width: 960px; }
.bet-page .bet-privacy { padding: 12px 14px; border-left: 3px solid var(--lime-dark); background: #f7fbef; color: #334155; font-size: 14px; }
.bet-page .bet-intro { color: #475569; font-size: 14px; }
.bet-page h2 { margin: 26px 0 10px; font-weight: 800; }
.bet-summary h2 { margin-top: 22px; }
.bet-totals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; }
.bet-totals > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.bet-totals dt { color: var(--text-secondary); font-size: 13px; font-weight: 700; line-height: 1.35; }
.bet-totals dd { margin: 4px 0 0; color: var(--ink); font-size: 20px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.bet-totals .bet-net { border-color: #cbd5e1; background: #fff; }
.bet-totals dd.is-up, .bet-pl.is-up dd { color: #3f6212; }
.bet-totals dd.is-down, .bet-pl.is-down dd { color: #b91c1c; }
.bet-page .bet-summary-note { margin: 10px 0 0; color: #5d6878; font-size: 13px; }
.bet-totals dd.bet-total-note { margin-top: 4px; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
/* Analytics by month and by bookmaker: closed until opened (so nothing moves as the bets load), a table on wide screens
   and a card per row on narrow ones. Values are text: a loss carries its minus sign, never a colour alone. */
.bet-breakdown { margin: 14px 0 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.bet-breakdown > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 44px; padding: 0 14px; color: #334155; font-weight: 800; cursor: pointer; }
.bet-breakdown > summary::before { content: "▸"; margin-right: 4px; color: #64748b; }
.bet-breakdown[open] > summary::before { content: "▾"; }
.bet-breakdown > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
.bet-breakdown-count { color: var(--text-secondary); font-weight: 600; }
.bet-breakdown-body { padding: 0 14px 14px; }
.bet-page .bet-breakdown-intro, .bet-page .bet-breakdown-empty { margin: 0 0 10px; color: #475569; font-size: 13px; }
.bet-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bet-table th, .bet-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bet-table thead th { color: var(--text-secondary); font-size: 12.5px; font-weight: 800; line-height: 1.3; vertical-align: bottom; white-space: normal; }
.bet-table thead th:first-child, .bet-table th[scope="row"] { text-align: left; }
.bet-table th[scope="row"] { color: var(--ink); font-weight: 800; white-space: normal; overflow-wrap: anywhere; }
.bet-table th[scope="row"]:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.bet-table tr.is-empty td, .bet-table tr.is-empty th { color: #5d6878; }
.bet-table .bet-money.is-up { color: #3f6212; }
.bet-table .bet-money.is-down { color: #b91c1c; }
.bet-cell-label { display: none; }
@media (max-width: 760px) {
  .bet-table, .bet-table tbody, .bet-table tr, .bet-table th[scope="row"] { display: block; }
  .bet-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bet-table tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .bet-table th[scope="row"] { padding: 0 0 6px; border: 0; }
  .bet-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; border: 0; white-space: normal; }
  .bet-table .bet-cell-label { display: inline; color: var(--text-secondary); font-weight: 600; text-align: left; }
}
.bet-toolbar { display: flex; flex-wrap: wrap; gap: 10px; min-height: 44px; margin: 22px 0 0; }
.bet-primary, .bet-secondary, .bet-action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border: 1px solid; border-radius: 7px; font-size: 14px; font-weight: 800;
}
.bet-primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.bet-primary:hover { border-color: #26324a; background: #26324a; }
.bet-secondary, .bet-action { border-color: #94a3b8; background: #fff; color: #1e293b; }
.bet-secondary:hover, .bet-action:hover { border-color: #475569; }
.bet-page [aria-disabled="true"] { opacity: .6; cursor: progress; }
.bet-page .bet-status { margin-top: 12px; }

/* The form: one column on phones, the odds and stake side by side when there's room. */
.bet-form { margin: 18px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.bet-form h2 { margin: 0 0 4px; }
.bet-page .bet-form-intro { margin: 0 0 14px; color: #5d6878; font-size: 14px; }
.bet-field { margin: 0 0 16px; min-width: 0; }
fieldset.bet-field { padding: 0; border: 0; }
.bet-field > label, .bet-sub > label, .bet-field legend { display: block; margin: 0 0 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.bet-sub { margin: 10px 0 0; }
.bet-page .bet-hint { margin: 0 0 6px; color: #5d6878; font-size: 13px; line-height: 1.4; }
.bet-page .bet-error { margin: 0 0 6px; color: #b91c1c; font-size: 14px; font-weight: 800; }
.bet-page .bet-also { margin: 6px 0 0; color: #9a3412; font-size: 13px; font-weight: 700; }
.bet-page .bet-match-info { margin: 6px 0 0; color: #334155; font-size: 13px; font-weight: 700; }
.bet-form input[type="text"], .bet-form input[type="datetime-local"], .bet-form select, .bet-filters select, .bet-dialog input[type="text"] {
  display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid #6b7280; border-radius: 7px; background: #fff; color: var(--ink); font-size: 16px;
}
.bet-form [aria-invalid="true"], .bet-dialog [aria-invalid="true"] { border: 2px solid #b91c1c; }
.bet-choices { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.bet-choices label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; overflow-wrap: anywhere; }
.bet-choices input { flex: none; width: 20px; height: 20px; accent-color: var(--lime-dark); }
.bet-row-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.bet-errors { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid #b91c1c; background: #fef2f2; }
.bet-errors h3 { margin: 0 0 4px; color: #7f1d1d; font-size: 15px; font-weight: 800; }
.bet-errors ul { margin: 0; padding-left: 18px; list-style: disc; }
.bet-errors a { color: #991b1b; }
.bet-page .bet-notice { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid #b45309; background: #fff7ed; color: #7c2d12; font-size: 14px; }
.bet-page .bet-potential { min-height: 1.5em; margin: 0 0 12px; color: #334155; font-size: 14px; }
.bet-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* The list. */
.bet-list-section h2 { margin-top: 30px; }
.bet-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 10px; }
.bet-filters > div { flex: 1 1 160px; min-width: 0; }
.bet-filters label { display: block; margin: 0 0 4px; color: var(--ink); font-size: 13px; font-weight: 800; }
.bet-page .bet-count { margin: 0 0 6px; color: #334155; font-size: 14px; }
.bet-page .bet-over, .bet-page .bet-excluded { margin: 10px 0 0; padding: 12px 14px; border-left: 3px solid #b45309; background: #fff7ed; color: #7c2d12; font-size: 14px; }
.bet-page .bet-list { margin: 8px 0 0; padding: 0; list-style: none; }
.bet-page .bet-list > li { margin: 0; }
.bet-row { padding: 16px 0; border-top: 1px solid var(--line); }
.bet-row:last-child { border-bottom: 1px solid var(--line); }
.bet-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 14px; }
.bet-what { min-width: 0; }
.bet-page .bet-comp { margin: 0; color: var(--text-secondary); font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.bet-page .bet-title { margin: 2px 0 0; color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.bet-page .bet-title a { color: inherit; text-decoration: none; }
.bet-page .bet-title a:hover { text-decoration: underline; }
.bet-badge { flex: none; padding: 2px 10px; border: 1px solid; border-radius: 99px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.bet-badge.is-open { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
.bet-badge.is-won { border-color: #cfe5a9; background: var(--lime-soft); color: #365314; }
.bet-badge.is-lost { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.bet-badge.is-void, .bet-badge.is-cashed_out { border-color: #e2e8f0; background: #f1f5f9; color: #334155; }
.bet-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; margin: 10px 0 0; }
.bet-facts dt { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.bet-facts dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.bet-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.bet-action { padding: 0 14px; font-weight: 700; }
.bet-action.is-delete { border-color: #fca5a5; color: #b91c1c; }
.bet-action.is-delete:hover { border-color: #b91c1c; }
.bet-history { margin: 6px 0 0; font-size: 14px; }
.bet-history summary { display: flex; align-items: center; min-height: 44px; color: #334155; font-weight: 700; cursor: pointer; }
.bet-history summary::before { content: "▸"; margin-right: 8px; color: #64748b; }
.bet-history[open] summary::before { content: "▾"; }
.bet-history-body { padding: 4px 0 4px 14px; border-left: 2px solid var(--line); }
.bet-history-body p { margin: 0 0 8px; }
.bet-page .bet-history-list { margin: 0 0 8px; padding: 0; list-style: none; }
.bet-page .bet-history-list > li { margin: 0 0 10px; }
.bet-page .bet-history-list ul { margin: 0; padding-left: 18px; list-style: disc; }
.bet-page .bet-history-list ul li { margin: 0 0 2px; overflow-wrap: anywhere; }
.bet-page .bet-history-when { margin: 0 0 2px; color: var(--ink); font-weight: 800; }
.bet-page .bet-history-note { color: #5d6878; font-size: 13px; }
.bet-more { margin: 14px 0 0; }
.bet-page .bet-export-note { margin: 18px 0 0; color: #5d6878; font-size: 13px; }

/* The settle and delete dialogs (modal, on the Saved Matches dialog's look). */
.bet-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.bet-dialog form { margin: 0; }
.bet-page .saved-dialog h2 { margin: 0 0 8px; font-weight: 800; }
.saved-dialog-actions .bet-primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.saved-dialog-actions .bet-primary:hover { border-color: #26324a; background: #26324a; color: #fff; }
.bet-dialog .bet-dialog-bet { margin: 0 0 12px; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.bet-dialog .bet-field { margin: 0 0 12px; }
.bet-dialog .bet-dialog-note { margin: 8px 0 0; color: #5d6878; font-size: 13px; }
.saved-dialog .bet-notice, .saved-dialog .bet-error { margin: 0 0 12px; }
.saved-dialog .bet-notice { padding: 10px 12px; border-left: 3px solid #b45309; background: #fff7ed; color: #7c2d12; font-size: 14px; }
.saved-dialog .bet-error { color: #b91c1c; font-size: 14px; font-weight: 800; }
.bet-page .bet-dialog-current { margin: 0 0 12px; color: #334155; font-size: 14px; }
/* A result saved in another tab that differs from the visitor's: both shown, and a choice before anything is saved. */
.bet-conflict { margin: 0 0 14px; padding: 12px 14px; border: 2px solid #b45309; border-radius: 8px; background: #fff7ed; color: #431407; }
.bet-conflict:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.bet-page .bet-conflict h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.bet-conflict p { margin: 0 0 8px; font-size: 14px; }
.bet-conflict-values { display: grid; gap: 6px; margin: 0 0 10px; }
.bet-conflict-values div { display: grid; grid-template-columns: minmax(0, 9em) 1fr; gap: 8px; }
.bet-conflict-values dt { color: #7c2d12; font-size: 13px; font-weight: 800; }
.bet-conflict-values dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.bet-conflict .bet-conflict-choice:empty { display: none; }
.bet-conflict-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bet-conflict-actions [aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Restore from a file: its own section, apart from Download my bets, and a modal dialog for the file, its preview and the result. */
.bet-restore { margin: 30px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.bet-page .bet-restore h2 { margin: 0 0 6px; }
.bet-page .bet-restore-intro { margin: 0 0 12px; color: #334155; font-size: 14px; }
.bet-restore-dialog { width: min(600px, calc(100vw - 32px)); }
.bet-page .bet-restore-dialog h3 { margin: 4px 0 8px; color: var(--ink); font-size: 16px; font-weight: 800; }
.bet-page .bet-restore-dialog p { margin: 0 0 10px; font-size: 14px; overflow-wrap: anywhere; }
.bet-restore-dialog input[type="file"] { display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 8px 0; color: var(--ink); font-size: 15px; }
.bet-restore-dialog [aria-invalid="true"] { border: 0; outline: 2px solid #b91c1c; outline-offset: 2px; }
.bet-page .bet-restore-dialog .bet-restore-progress { color: #1e293b; font-weight: 700; }
.bet-page .bet-restore-dialog .bet-restore-progress:empty { display: none; }
.bet-restore-counts { display: grid; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafb; }
.bet-restore-counts div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bet-restore-counts dt { min-width: 0; color: #334155; font-size: 14px; }
.bet-restore-counts dd { flex: none; margin: 0; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.bet-restore-counts [data-restore-count="new"] dt, .bet-restore-counts [data-restore-count="after"] dt { color: var(--ink); font-weight: 800; }
.bet-page .bet-restore-dialog .bet-restore-rule, .bet-page .bet-restore-dialog .bet-restore-decision { color: var(--ink); }
.bet-page .bet-restore-dialog .bet-restore-decision { font-weight: 700; }
.bet-restore-list { margin: 0 0 10px; font-size: 14px; }
.bet-restore-list summary { display: flex; align-items: center; min-height: 44px; color: #1e293b; font-weight: 700; cursor: pointer; }
.bet-restore-list summary::before { content: "▸"; margin-right: 8px; color: #64748b; }
.bet-restore-list[open] summary::before { content: "▾"; }
.bet-page .bet-restore-list ul { margin: 6px 0 10px; padding-left: 18px; list-style: disc; }
.bet-page .bet-restore-list li { margin: 0 0 10px; overflow-wrap: anywhere; }
.bet-page .bet-restore-list li p { margin: 0; }
.bet-page .bet-restore-dialog .bet-restore-what { color: var(--ink); font-weight: 700; }
.bet-page .bet-restore-dialog .bet-restore-result p { color: var(--ink); font-size: 15px; font-weight: 700; }
.bet-restore-dialog [tabindex="-1"]:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
@media (max-width: 560px) {
  .bet-row-fields { grid-template-columns: 1fr; }
  .bet-form { padding: 16px 14px; }
  .bet-facts { grid-template-columns: 1fr 1fr; }
  .bet-totals { grid-template-columns: 1fr 1fr; }
  .bet-totals dd { font-size: 17px; }
}
@media (max-width: 359px) {
  .bet-facts, .bet-totals { grid-template-columns: 1fr; }
}

/* ---------- Event pages (/uk/football/{competition}/{match}/, rendered by the Worker) ---------- */
/* Both odds formats are in the markup; <html data-odds-format> picks the one shown (odds-format.js, event.js). */
.odds-d { display: none; }
html[data-odds-format="decimal"] .odds-d { display: inline; }
html[data-odds-format="decimal"] .odds-f { display: none; }

/* One width for the hero's text and the content below it, so their left edges line up at every width:
   the site's content width up to 1499px, then growing to the header's 1440px grid (the wide-screen block). */
.event-page { --event-width: 1196px; --event-aside: 340px; }
.event-hero { padding: 26px 22px 30px; background: var(--ink); color: #fff; }
.event-hero-inner { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: var(--event-width); margin: 0 auto; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0 0 6px; padding: 0; list-style: none; color: #9aa8bd; font-size: 13px; }
.breadcrumb li { display: flex; align-items: center; min-width: 0; }
.breadcrumb li + li::before { content: "›"; content: "›" / ""; margin: 0 8px; color: #6b7a92; }
.breadcrumb a { color: #c7d2e0; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb [aria-current] { color: #9aa8bd; overflow-wrap: anywhere; }
.event-kicker { color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.event-title { margin: 2px 0 4px; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -1.5px; overflow-wrap: break-word; }
.event-title i { margin: 0 4px; color: #7f8ca3; font-style: normal; font-weight: 400; }
.event-kickoff { display: flex; align-items: center; gap: 8px; margin: 0; color: #c7d2e0; font-size: 15px; }
.event-kickoff svg { flex: none; width: 17px; height: 17px; color: var(--lime); }
.event-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 0; font-size: 13px; }
.event-status { padding: 3px 10px; border: 1px solid #58702a; border-radius: 99px; color: #d9f99d; font-weight: 800; }
.event-countdown, .event-books { color: #c7d2e0; font-weight: 600; }
.event-updated b { font-weight: 700; }
.event-updated b.is-fresh { color: #bef264; }
.event-updated b.is-stale { color: #fdba74; }

.event-wrap { max-width: calc(var(--event-width) + 44px); padding-top: 28px; }
/* The market shown (a label: there is one market) and the odds format switch, which changes every price. */
.event-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.event-market-name { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.event-market-name span { color: var(--text-secondary); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.event-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.event-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.event-section, .event-intel, .event-notice {
  overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 7px 24px #18213008;
}
.event-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 20px 25px 14px; }
.event-section-head h2 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
.event-section-head p { margin: 4px 0 0; color: #5f6a7b; font-size: 13px; }
.event-best { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 25px 22px; }
.event-best-card {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px;
  border: 1px solid #dfe8d1; border-radius: 10px; background: #f5faeb; line-height: 1.3;
}
.event-best-label { color: #54623f; font-size: 13px; font-weight: 700; overflow-wrap: break-word; }
.event-best-price { color: #21370a; font-size: 30px; line-height: 1.1; }
.event-best-who .live-who { font-size: 13px; }
.event-best-count { color: #5d6878; font-size: 12px; }
.event-best-card.is-missing { border-color: #e6eaf0; background: #f8fafb; }
.event-best-card.is-missing b { color: #6b7686; font-size: 30px; }
.event-book-list { padding-top: 0; }
.event-margin { color: #5d6878; font-size: 13px; }
.event-compare .live-legend { margin: 0; }

.event-intel { padding: 22px 24px; color: #334155; }
.event-intel h2 { margin: 4px 0 6px; font-size: 21px; letter-spacing: -.4px; color: var(--ink); }
.intel-lead { margin: 0; color: #5f6a7b; font-size: 13px; }
.intel-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf0f3; }
.intel-block h3 { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.consensus-bar { display: flex; height: 10px; overflow: hidden; border-radius: 99px; background: #edf1f5; }
.consensus-bar i { display: block; height: 100%; }
.consensus-bar .is-home { background: #65a30d; }
.consensus-bar .is-draw { background: #94a3b8; }
.consensus-bar .is-away { background: #334155; }
.intel-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.intel-list dt { color: #5d6878; font-size: 12px; overflow-wrap: break-word; }
.intel-list dd { margin: 0; color: var(--ink); font-size: 20px; font-weight: 800; }
.intel-note { margin: 10px 0 0; color: #5d6878; font-size: 12px; }
.intel-outcomes { display: flex; flex-direction: column; margin: 0; }
.intel-outcomes > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid #edf0f3; }
.intel-outcomes dt { min-width: 0; color: var(--ink); font-size: 14px; font-weight: 700; overflow-wrap: break-word; }
.intel-outcomes dd { margin: 0; }
.intel-outcomes .intel-value { color: var(--ink); font-size: 16px; font-weight: 800; }
.intel-outcomes .intel-detail { grid-column: 1 / -1; color: #5d6878; font-size: 12px; }
.intel-summary { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #edf0f3; }
.intel-summary div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.intel-summary dt { color: #5d6878; font-size: 13px; }
.intel-summary dd { margin: 0; color: var(--ink); font-weight: 800; text-align: right; }
.intel-summary dd small { display: block; color: #5d6878; font-size: 11px; font-weight: 400; }
.intel-method { margin-top: 14px; font-size: 13px; }
.intel-method summary { color: #365314; font-weight: 700; cursor: pointer; }
.intel-method p { margin: 8px 0 0; color: #475569; }

.event-notice { padding: 28px; }
.event-notice h2 { margin: 0 0 6px; font-size: 22px; }
.event-notice p { margin: 0; color: #5f6a7b; }
.event-notice .hero-actions a:first-child { background: var(--ink); border-color: var(--ink); color: #fff; }
.event-footnote { margin-top: 16px; padding: 0; border-top: 0; }
.event-back { margin: 18px 0 0; }
.event-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: #41680b; font-weight: 800; }
.event-back svg { width: 15px; height: 15px; }
.event-page :focus-visible { outline-color: var(--lime-dark); }
.event-hero :focus-visible { outline-color: var(--lime); }

/* Team names in the table's column headers wrap within their column rather than run into the next. */
.event-book-list .live-book-row.heading > span { min-width: 0; overflow-wrap: break-word; }

/* Wide screens: the current-price intelligence sits beside the table. */
@media (min-width: 1180px) {
  .event-layout { grid-template-columns: minmax(0, 1fr) var(--event-aside); gap: 24px; }
}
/* From 1500px the page grows with the screen, up to the header's 1440px grid (never wider), where its
   edges meet the header's. The extra width goes to the price table; the side panel grows to 400px at most. */
@media (min-width: 1500px) {
  .event-page { --event-width: clamp(1196px, 100vw - 304px, 1440px); --event-aside: clamp(340px, 25vw - 35px, 400px); }
}
/* Laptop and up: a margin column. */
@media (min-width: 951px) {
  .event-book-list .live-book-row { grid-template-columns: minmax(160px, 1.4fr) repeat(var(--outcomes, 3), minmax(76px, 1fr)) minmax(60px, .55fr) minmax(75px, .7fr); }
  .event-book-list.has-links .live-book-row { grid-template-columns: minmax(160px, 1.4fr) repeat(var(--outcomes, 3), minmax(76px, 1fr)) minmax(60px, .55fr) minmax(125px, .9fr); }
}
/* Tablets: the margin column too, in narrower columns, with room for the Visit links. */
@media (min-width: 651px) and (max-width: 950px) {
  .event-book-list .live-book-row { grid-template-columns: minmax(120px, 1.2fr) repeat(var(--outcomes, 3), minmax(60px, 1fr)) minmax(52px, .5fr) minmax(72px, .7fr); gap: 8px; }
  .event-book-list.has-links .live-book-row { grid-template-columns: minmax(120px, 1.2fr) repeat(var(--outcomes, 3), minmax(60px, 1fr)) minmax(52px, .5fr) minmax(128px, .9fr); }
}
/* Between phone and wide screens the intelligence card is full width: its blocks sit side by side. */
@media (min-width: 721px) and (max-width: 1179px) {
  .event-intel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .event-intel > * { grid-column: 1 / -1; }
  .event-intel > .intel-block { grid-column: auto; }
}
@media (max-width: 720px) {
  .event-hero { padding: 18px 14px 22px; }
  .event-wrap { padding-top: 18px; }
  .event-kickoff { align-items: flex-start; font-size: 14px; }
  /* Phones: the breadcrumb is one step back, to the competition. */
  .breadcrumb li { display: none; }
  .breadcrumb li:nth-child(3) { display: flex; }
  .breadcrumb li:nth-child(3)::before { content: "‹"; content: "‹" / ""; margin: 0 6px 0 0; }
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .event-notice { padding: 22px 18px; }
}
@media (max-width: 650px) {
  .event-section-head { flex-wrap: wrap; align-items: start; padding: 16px 15px 12px; }
  .event-section-head h2 { font-size: 20px; }
  .event-best { gap: 6px; padding: 0 15px 16px; }
  .event-best-card { padding: 9px 8px; }
  .event-best-label { font-size: 12px; }
  .event-best-price, .event-best-card.is-missing b { font-size: 21px; }
  .event-best-who .live-who, .event-best-count { font-size: 11px; }
  .event-intel { padding: 18px 15px; }
  .intel-list dd { font-size: 17px; }
  .event-market-name { font-size: 17px; }
  /* The price table restacks, but keeps every column header for screen readers: only the three price
     headers are shown, the others are visually hidden (never removed), so each cell keeps its header. */
  .event-book-list .live-book-row.heading { position: relative; }
  .event-book-list .live-book-row.heading > span:first-child,
  .event-book-list .live-book-row.heading > span:last-child,
  .event-book-list .live-book-row.heading > .event-margin {
    display: block; position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  /* Each row: the bookmaker, its prices, then a line with its margin, update time and any Visit link. */
  .event-book-list .live-book-name, .event-book-list.has-links .live-book-name { padding-right: 0; white-space: normal; overflow-wrap: anywhere; }
  .event-book-list .live-book-row:not(.heading) .event-margin,
  .event-book-list .live-book-meta, .event-book-list.has-links .live-book-meta { grid-row: 3; grid-column: 1 / -1; }
  .event-book-list .live-book-row:not(.heading) .event-margin { justify-self: start; color: var(--text-secondary); font-size: 12px; }
  /* Its "Margin" label is shown here, where there's no column header above it. */
  .event-book-list .event-margin > .visually-hidden {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal;
  }
}
@media (max-width: 650px), (pointer: coarse) {
  .event-format button { min-height: 44px; }
  .event-back a { min-height: 44px; }
  .intel-method summary { padding: 13px 0; }
}

/* ---------- Event page: price history (src/pages/price-history-view.js, /assets/price-history.js) ---------- */
/* Series colours: the first three categorical slots, which stay distinct for every pair (also with colour-vision
   deficiencies) on the white card. Identity never rests on colour alone: the legend and the table name each line. */
.event-history { --ph-1: #2a78d6; --ph-2: #eb6834; --ph-3: #1baf7a; --ph-ink: #5d6878; }
.ph-recorded { margin: 0; color: var(--ph-ink); font-size: 13px; white-space: nowrap; }
.ph-recorded time { color: var(--ink); font-weight: 700; }
.ph-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 25px 14px; }
.ph-outcomes button { max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-hint { margin: 0; color: var(--ph-ink); font-size: 13px; }
/* Compare current prices with: First recorded (the default, and the only one without JavaScript) or 24h ago. The table
   holds both; the section's data-ph-mode (set by /assets/price-history.js) decides which columns are shown. */
.ph-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ph-ink); font-size: 13px; }
.ph-compare button:disabled { color: #8a94a3; cursor: not-allowed; }
.ph-table .ph-24h, .event-history[data-ph-mode="24h"] .ph-table .ph-first { display: none; }
.event-history[data-ph-mode="24h"] .ph-table .ph-24h { display: table-cell; }
.ph-note, .ph-empty { margin: 0 25px 14px; color: #5f6a7b; font-size: 13px; }
.ph-empty { margin-bottom: 22px; }
.ph-panel-title { margin: 4px 25px 6px; font-size: 16px; color: var(--ink); }
.event-history[data-ph-js] .ph-panel-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ph-panel + .ph-panel { margin-top: 12px; }
.ph-chart { margin: 0; padding: 0 25px 0 25px; }
.ph-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; padding: 0; list-style: none; color: #334155; font-size: 13px; }
.ph-legend li { display: inline-flex; align-items: center; gap: 7px; }
.ph-key, .ph-tip-key { display: inline-block; flex: none; width: 18px; height: 0; border-top: 3px solid transparent; border-radius: 2px; }
.ph-key[data-slot="1"], .ph-tip-key[data-slot="1"] { border-top-color: var(--ph-1); }
.ph-key[data-slot="2"], .ph-tip-key[data-slot="2"] { border-top-color: var(--ph-2); }
.ph-key[data-slot="3"], .ph-tip-key[data-slot="3"] { border-top-color: var(--ph-3); }
.ph-key-gap { display: inline-block; width: 16px; height: 11px; border-radius: 2px; background: #e8edf3; }
.ph-plot { position: relative; height: 240px; margin: 0 0 30px 44px; }
.ph-plot:focus-visible { outline-offset: 6px; }
.ph-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ph-grid line { stroke: #e9edf2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ph-gapband { fill: #eef2f6; }
.ph-series { display: none; }
.ph-series[data-slot] { display: inline; }
.ph-series[data-slot="1"] { color: var(--ph-1); }
.ph-series[data-slot="2"] { color: var(--ph-2); }
.ph-series[data-slot="3"] { color: var(--ph-3); }
.ph-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ph-ring { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.ph-dot { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.ph-yaxis span, .ph-xaxis span { position: absolute; color: var(--ph-ink); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-yaxis span { left: -44px; width: 38px; text-align: right; transform: translateY(-50%); }
.ph-xaxis span { top: calc(100% + 8px); transform: translateX(-50%); }
.ph-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: #94a3b8; pointer-events: none; }
.ph-tip {
  position: absolute; top: 6px; z-index: 2; min-width: 150px; max-width: 240px; margin-left: 10px; padding: 8px 10px;
  border-radius: 8px; background: var(--ink); color: #fff; box-shadow: 0 8px 22px #0b122033; font-size: 12px; pointer-events: none;
}
.ph-tip.is-left { transform: translateX(calc(-100% - 20px)); }
.ph-tip-time { margin: 0 0 6px; color: #c7d2e0; }
.ph-tip ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ph-tip li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); align-items: center; gap: 7px; }
.ph-tip li b { font-size: 13px; font-variant-numeric: tabular-nums; }
.ph-tip li span:last-child { overflow: hidden; color: #c7d2e0; text-overflow: ellipsis; white-space: nowrap; }
.ph-tip-key { width: 16px; border-top-width: 2px; }
.ph-caption { margin: 0; color: var(--ph-ink); font-size: 12px; }
.ph-table { width: calc(100% - 50px); margin: 12px 25px 0; border-collapse: collapse; font-size: 14px; }
.ph-table th, .ph-table td { padding: 9px 8px; border-bottom: 1px solid #edf0f3; text-align: left; vertical-align: top; }
.ph-table thead th { color: var(--ph-ink); font-size: 12px; font-weight: 700; }
.ph-table thead th small { display: block; font-weight: 400; }
.ph-table tbody th { font-weight: 700; }
.ph-table td { font-variant-numeric: tabular-nums; }
.ph-table td small { display: block; color: var(--ph-ink); font-size: 12px; }
.ph-table .ph-price, .ph-table .ph-change { font-weight: 800; color: var(--ink); }
.ph-none { color: #6b7686; }
.ph-pick { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: break-word; }
label.ph-pick { cursor: pointer; }
.ph-pick input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--lime-dark); }
.ph-text { margin: 12px 25px 16px; font-size: 13px; }
.ph-text summary { color: #365314; font-weight: 700; cursor: pointer; }
.ph-text ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 22px; margin: 10px 0 0; padding: 0; list-style: none; }
.ph-text ol { margin: 4px 0 0; padding: 0 0 0 18px; color: #475569; }
.ph-method { margin: 4px 25px 20px; }
@media (max-width: 650px) {
  .ph-controls { padding: 0 15px 12px; }
  .ph-note, .ph-empty { margin-left: 15px; margin-right: 15px; }
  .ph-panel-title { margin-left: 15px; margin-right: 15px; }
  .ph-chart { padding: 0 15px; }
  .ph-plot { height: 200px; margin-left: 38px; }
  .ph-yaxis span { left: -38px; width: 32px; }
  .ph-table { width: calc(100% - 30px); margin: 10px 15px 0; font-size: 13px; }
  .ph-table th, .ph-table td { padding: 8px 5px; }
  /* Phones: the tick box and colour key above the bookmaker's name, so the name has the column's width. */
  .ph-pick { flex-wrap: wrap; gap: 4px 6px; }
  .ph-pick > span:last-child { flex-basis: 100%; }
  .ph-text, .ph-method { margin-left: 15px; margin-right: 15px; }
  .ph-recorded { white-space: normal; }
}
@media (max-width: 650px), (pointer: coarse) {
  .ph-outcomes button, .ph-compare button { min-height: 44px; }
  label.ph-pick { min-height: 44px; }
  .ph-pick input { width: 20px; height: 20px; }
  .ph-text summary, .ph-method summary { padding: 13px 0; }
}
@media (forced-colors: active) {
  .ph-line, .ph-dot { stroke: CanvasText; }
  .ph-key, .ph-tip-key { border-top-color: CanvasText; }
  /* Without colour, the three lines (and their keys) differ by dash pattern. */
  .ph-series[data-slot="2"] .ph-line { stroke-dasharray: 8 5; }
  .ph-series[data-slot="3"] .ph-line { stroke-dasharray: 2 4; }
  .ph-key[data-slot="2"], .ph-tip-key[data-slot="2"] { border-top-style: dashed; }
  .ph-key[data-slot="3"], .ph-tip-key[data-slot="3"] { border-top-style: dotted; }
}

/* ---------- UK bookmaker pages (/uk/bookmakers/ and /uk/bookmakers/{slug}/, rendered by the Worker) ---------- */
/* The hero's text and the content below it share one width, so their left edges line up (as on the event pages). */
.bookmakers-page { --bm-width: 1196px; --bm-tile: #1f2937; }
.bm-hero { padding: 34px 22px 38px; background: var(--ink); color: #fff; }
.bm-hero-inner { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: var(--bm-width); margin: 0 auto; }
.bm-kicker { color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.bm-title { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -1.5px; overflow-wrap: anywhere; }
.bm-lead { max-width: 720px; margin: 0; color: #c7d2e0; font-size: 18px; line-height: 1.55; overflow-wrap: break-word; }
.bm-reviewed { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: #9aa8bd; font-size: 14px; }
.bm-reviewed svg { width: 17px; height: 17px; color: var(--lime); }
.bm-reviewed time { color: #e2e8f0; font-weight: 700; }
.bm-identity { display: flex; align-items: center; gap: 20px; min-width: 0; margin-top: 4px; }
.bm-identity-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* A bookmaker's logo: the Admin's neutral dark tile (docs/bookmaker-logos.md), the artwork shown whole (contain),
   never cropped or recoloured. Without a logo the tile shows the bookmaker's initials, in the same tile. */
.bm-logo {
  display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden;
  background: var(--bm-tile); box-shadow: inset 0 0 0 1px #ffffff1f;
}
.bm-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bm-logo[data-logo="image"] .bm-logo-initials { display: none; } /* shown if the image fails (/assets/bookmakers.js) */
.bm-logo-initials { color: #e5e7eb; font-weight: 800; letter-spacing: .08em; }
.bm-logo-card { width: 104px; height: 44px; padding: 8px 12px; border-radius: 8px; }
.bm-logo-card .bm-logo-initials { font-size: 15px; }
.bm-logo-hero { width: 152px; height: 64px; padding: 12px 18px; border-radius: 10px; box-shadow: inset 0 0 0 1px #ffffff2e; }
.bm-logo-hero .bm-logo-initials { font-size: 22px; }

.bm-wrap { max-width: calc(var(--bm-width) + 44px); padding-top: 32px; }
.bm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bm-section-head h2 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
.bm-section-head p { margin: 0; color: var(--text-secondary); font-size: 13px; }

/* The hub: a card per bookmaker, as many columns as fit (each at least 340px wide, one on phones). */
.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.bm-card {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px;
  border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 7px 24px #18213008;
  transition: border-color .15s, box-shadow .15s;
}
.bm-card:hover { border-color: #b9c4d0; box-shadow: 0 10px 28px #18213014; }
.bm-card-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bm-card-name { min-width: 0; margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -.3px; overflow-wrap: anywhere; }
/* The whole card is the name's link (one link, named by the bookmaker); its focus ring is the card's. */
.bm-card-name a::after { content: ""; position: absolute; inset: 0; border-radius: 13px; }
.bm-card-name a:focus-visible { outline: none; }
.bm-card-name a:focus-visible::after { outline: 2px solid var(--lime-dark); outline-offset: 2px; }
.bm-card:hover .bm-card-name a { color: var(--lime-text); }
.bm-card-desc { margin: 0; color: #475467; font-size: 14px; line-height: 1.55; overflow-wrap: break-word; }
.bm-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid #edf0f3; font-size: 12px;
}
.bm-card-reviewed { color: var(--text-secondary); }
.bm-card-reviewed time { color: var(--ink); font-weight: 700; }
.bm-card-more { display: inline-flex; align-items: center; gap: 5px; color: #41680b; font-size: 13px; font-weight: 800; }
.bm-card-more svg { width: 15px; height: 15px; transition: transform .15s; }
.bm-card:hover .bm-card-more svg { transform: translateX(2px); }
.bm-empty { padding: 36px 28px; border: 1px solid var(--line); border-radius: 13px; background: #fff; text-align: center; }
.bm-empty h3 { margin: 0 0 6px; font-size: 20px; }
.bm-empty p { max-width: 520px; margin: 0 auto; color: #5f6a7b; }
.bm-empty .bm-empty-action { margin-top: 18px; }
.bm-empty-action a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 7px; background: var(--ink); color: #fff; font-weight: 800;
}
.bm-empty-action svg { width: 16px; height: 16px; }
.bm-note { margin: 22px 0 0; padding: 12px 16px; border-left: 3px solid #8ea847; background: #eef2f6; color: #4b5565; font-size: 13px; }
.bm-note a { color: #365314; font-weight: 800; text-decoration: underline; }

/* A profile: the text in a readable column, the details beside it on wide screens. The details come first in
   the document (and so first on phones); on wide screens they're placed in the right-hand column. */
.bm-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.bm-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bm-aside-inner { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bm-article, .bm-panel { border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 7px 24px #18213008; }
.bm-article { padding: 30px 36px 34px; }
.bm-article h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.bm-body { max-width: 68ch; color: #2b3443; font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.bm-body p + p { margin-top: 1em; }
.bm-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.bm-panel { padding: 22px 24px; }
.bm-panel h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: -.2px; }
.bm-facts { display: flex; flex-direction: column; margin: 0; }
.bm-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #edf0f3; }
.bm-facts div:first-child { padding-top: 0; }
.bm-facts div:last-child { padding-bottom: 0; border-bottom: 0; }
.bm-facts dt { color: var(--text-secondary); font-size: 13px; }
.bm-facts dd { min-width: 0; margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.bm-panel-note { margin: 14px 0 0; color: #5d6878; font-size: 13px; line-height: 1.55; }
.bm-safer p { margin: 0; color: #475467; font-size: 14px; line-height: 1.55; }
.bm-safer b { margin-right: 4px; padding: 2px 5px; border-radius: 3px; background: var(--lime); color: #17210b; font-size: 12px; }
.bm-safer .bm-panel-link { margin-top: 10px; }
.bm-panel-link a, .bm-back a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; color: #41680b; font-weight: 800; }
.bm-panel-link svg, .bm-back svg { width: 15px; height: 15px; }
.bm-back { margin: 22px 0 0; }
.bm-disclaimer { margin: 0; }

/* A structured profile: titled parts in one article, separated by rules; key features as cards; the FAQ in plain view. */
.bm-part { min-width: 0; }
.bm-part + .bm-part { margin-top: 34px; padding-top: 30px; border-top: 1px solid #e4e9ee; }
.bm-part > h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.bm-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bm-feature { display: flex; gap: 12px; min-width: 0; padding: 16px 16px 16px 14px; border: 1px solid #e4e9ee; border-radius: 10px; background: #f8fafb; }
.bm-feature > svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--lime); color: #17210b; }
.bm-feature div { min-width: 0; }
.bm-feature h3 { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.bm-feature p { margin: 5px 0 0; color: #475467; font-size: 14.5px; line-height: 1.55; overflow-wrap: break-word; }
.bm-faq { display: flex; flex-direction: column; max-width: 68ch; }
.bm-faq-item { padding: 16px 0; border-top: 1px solid #edf0f3; }
.bm-faq-item:first-child { padding-top: 2px; border-top: 0; }
.bm-faq-item:last-child { padding-bottom: 0; }
.bm-faq-item h3 { margin: 0 0 6px; color: var(--ink); font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.bm-faq-answer { color: #2b3443; font-size: 16px; line-height: 1.65; overflow-wrap: break-word; }
.bm-faq-answer p { margin: 0; }
.bm-faq-answer p + p { margin-top: .75em; }
.bm-toc ol { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.bm-toc li { counter-increment: toc; border-top: 1px solid #edf0f3; }
.bm-toc li:first-child { border-top: 0; }
.bm-toc a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 0; color: #344054; font-size: 14px; font-weight: 700; }
.bm-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; color: #8a96a8; font-size: 12px; font-variant-numeric: tabular-nums; }
.bm-toc a:hover { color: #41680b; text-decoration: underline; }
.bookmakers-page :focus-visible { outline-color: var(--lime-dark); }
.bm-hero :focus-visible { outline-color: var(--lime); }

@media (min-width: 1000px) {
  .bm-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
  .bm-main { grid-column: 1; grid-row: 1; }
  .bm-aside { grid-column: 2; grid-row: 1; align-self: stretch; }
}
/* Wide and tall enough: the details stay in view beside the text (under the sticky site header), scrolling on
   their own if they're ever taller than the window. */
@media (min-width: 1000px) and (min-height: 640px) {
  .bm-aside-inner { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; }
  .bm-aside-inner .bm-panel { padding: 18px 22px; }
  .bm-aside-inner .bm-facts div { padding: 7px 0; }
  .bm-toc a { min-height: 32px; padding: 4px 0; }
}
/* Tablets: the detail panels side by side, above the text. */
@media (min-width: 651px) and (max-width: 999px) {
  .bm-aside-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
@media (max-width: 720px) {
  .bm-hero { padding: 22px 14px 26px; }
  .bm-wrap { padding-top: 20px; }
  .bm-lead { font-size: 16px; }
  /* Phones: the breadcrumb is one step back, to all bookmakers (the event pages' rule above shows a third item). */
  .bookmaker-page .breadcrumb li:first-child { display: flex; }
  .bookmaker-page .breadcrumb li:first-child::before { content: "‹"; content: "‹" / ""; margin: 0 6px 0 0; color: #6b7a92; }
}
@media (max-width: 650px) {
  .bm-article { padding: 22px 18px 24px; }
  .bm-article h2 { font-size: 21px; }
  .bm-part + .bm-part { margin-top: 26px; padding-top: 22px; }
  .bm-faq-item h3 { font-size: 16px; }
  .bm-body { font-size: 16px; }
  .bm-panel, .bm-card { padding: 18px; }
}
@media (max-width: 480px) {
  .bm-identity { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bm-logo-hero { width: 128px; height: 54px; padding: 10px 14px; }
}
@media (max-width: 650px), (pointer: coarse) {
  .bm-back a, .bm-panel-link a, .bm-toc a { min-height: 44px; }
}

/* ---------- Market Movers (/uk/market-movers/, rendered by the Worker) ---------- */
/* The hero's text and the content below it share one width, as on the event and bookmaker pages. */
.movers-page { --mm-width: 1196px; }
.mm-hero { padding: 30px 22px 34px; background: var(--ink); color: #fff; }
.mm-hero-inner { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: var(--mm-width); margin: 0 auto; }
.mm-kicker { color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.mm-title { margin: 2px 0 2px; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -1.5px; overflow-wrap: break-word; }
.mm-lead { max-width: 760px; margin: 0; color: #c7d2e0; font-size: 17px; line-height: 1.55; }
.mm-updated { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: #9aa8bd; font-size: 14px; }
.mm-updated svg { flex: none; width: 17px; height: 17px; color: var(--lime); }
.mm-updated time { color: #e2e8f0; font-weight: 700; }
.movers-page :focus-visible { outline-color: var(--lime-dark); }
.mm-hero :focus-visible { outline-color: var(--lime); }

.mm-wrap { max-width: calc(var(--mm-width) + 44px); padding-top: 26px; }
.mm-note { margin: 0; padding: 12px 16px; border-left: 3px solid #8ea847; background: #eef2f6; color: #3f4a5a; font-size: 14px; }
.mm-window { margin: 10px 0 0; color: var(--text-secondary); font-size: 14px; }

/* The competition filter: plain links (no script), wrapping onto more lines as needed. */
.mm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 22px 0 0; }
.mm-filter-label { color: var(--text-secondary); font-size: 11px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; }
.mm-filter ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mm-filter a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700;
}
.mm-filter a:hover { border-color: #9aa8bd; }
.mm-filter a[aria-current] { border-color: var(--ink); background: var(--ink); color: #fff; }
.mm-count { color: var(--text-secondary); font-weight: 400; }
.mm-filter a[aria-current] .mm-count { color: #c7d2e0; }

.mm-message { margin: 22px 0 0; padding: 28px; border: 1px solid var(--line); border-radius: 13px; background: #fff; text-align: center; }
.mm-message p { max-width: 620px; margin: 0 auto; color: #3f4a5a; font-size: 16px; }

/* Two lists: side by side on wide screens, one above the other below that. */
.mm-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
.mm-list-section { overflow: hidden; min-width: 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 7px 24px #18213008; }
.mm-list-head { padding: 20px 22px 12px; border-bottom: 1px solid #edf0f3; }
.mm-list-head h2 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
.mm-list-head p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.mm-list { margin: 0; padding: 0; list-style: none; }
.mm-list-none { margin: 0; padding: 20px 22px; color: #3f4a5a; }
.mm-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 16px 22px;
  border-top: 1px solid #edf0f3;
}
.mm-row:first-child { border-top: 0; }
.mm-rank { grid-row: 1 / span 3; color: #7a8698; font-size: 18px; font-weight: 800; line-height: 1.4; }
.mm-row-main, .mm-row-figures, .mm-row-times { grid-column: 2; min-width: 0; }
.mm-row-meta { margin: 0; color: var(--text-secondary); font-size: 13px; overflow-wrap: break-word; }
.mm-row-comp { color: #41680b; font-weight: 700; }
.mm-row-match { margin: 2px 0 0; font-size: 18px; line-height: 1.3; letter-spacing: -.2px; overflow-wrap: break-word; }
.mm-row-match a { color: var(--ink); text-decoration: underline; text-decoration-color: #c5ced9; text-underline-offset: 3px; }
.mm-row-match a:hover { color: #41680b; text-decoration-color: currentColor; }
.mm-row-outcome { margin: 2px 0 0; color: var(--ink); font-size: 14px; font-weight: 700; }
.mm-row-figures { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 6px 22px; margin: 10px 0 0; }
.mm-row-figures div { min-width: 0; }
.mm-row-figures dt { color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.mm-row-figures dd { margin: 0; color: var(--ink); font-size: 16px; font-weight: 800; white-space: nowrap; }
.mm-row-figures .mm-from { color: #5d6878; font-weight: 600; }
.mm-row-figures .mm-fig-agree { grid-column: 1 / -1; }
.mm-row-figures .mm-fig-agree dd { font-size: 14px; font-weight: 600; white-space: normal; }
.mm-row-times { margin: 8px 0 0; color: var(--text-secondary); font-size: 12px; }

.mm-method { margin-top: 28px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: #334155; }
.mm-method h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.5px; color: var(--ink); }
.mm-method h3 { margin: 18px 0 4px; font-size: 16px; color: var(--ink); }
.mm-method p { max-width: 820px; margin: 6px 0 0; font-size: 15px; line-height: 1.6; }
.mm-method ul { max-width: 820px; margin: 8px 0 0; padding-left: 22px; font-size: 15px; line-height: 1.6; }

@media (min-width: 1100px) {
  .mm-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
}
@media (max-width: 720px) {
  .mm-hero { padding: 18px 14px 22px; }
  .mm-lead { font-size: 16px; }
  .mm-wrap { padding-top: 18px; }
  /* Phones: the breadcrumb is one step back, to football (the event pages' rule above shows a third item). */
  .movers-page .breadcrumb li:nth-child(3) { display: none; }
  .movers-page .breadcrumb li:nth-child(2) { display: flex; }
  .movers-page .breadcrumb li:nth-child(2)::before { content: "‹"; content: "‹" / ""; margin: 0 6px 0 0; color: #6b7a92; }
  .mm-list-head { padding: 16px 15px 10px; }
  .mm-row { grid-template-columns: 22px minmax(0, 1fr); gap: 4px 8px; padding: 14px 15px; }
  .mm-row-figures { grid-template-columns: repeat(2, minmax(0, auto)); gap: 6px 18px; }
  .mm-method { padding: 20px 16px; }
  .mm-message { padding: 22px 16px; }
}
@media (max-width: 720px), (pointer: coarse) {
  .mm-filter a { min-height: 44px; }
  .mm-row-match a { display: inline-block; min-height: 44px; padding: 10px 0; margin: -10px 0; }
}
/* Competitions a Market Movers result couldn't assess (their odds weren't available): named above the lists. */
.mm-incomplete { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid #b45309; background: #fff7ed; color: #7c2d12; font-size: 14px; }

/* Your account (/account/, roadmap A4). */
.account-page h3 { margin: 24px 0 8px; font-size: 17px; }
.account-message:empty { display: none; }
.account-message { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid #475569; background: #f1f5f9; color: #1e293b; font-size: 15px; }
.account-error { border-left-color: #b91c1c; background: #fef2f2; color: #7f1d1d; font-weight: 700; }
.account-field label { display: block; margin: 0 0 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.account-field input {
  display: block; width: 100%; max-width: 360px; min-height: 44px; padding: 8px 12px;
  border: 1px solid #6b7280; border-radius: 7px; background: #fff; color: var(--ink); font-size: 16px;
}
.account-help { display: block; margin: 6px 0 0; color: #5d6878; font-size: 13px; line-height: 1.4; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-primary, .account-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border: 1px solid; border-radius: 7px; font-size: 14px; font-weight: 800;
}
.account-primary { border-color: var(--ink); background: var(--ink); color: #fff; }
.account-primary:hover { border-color: #26324a; background: #26324a; }
.account-secondary { border-color: #94a3b8; background: #fff; color: #1e293b; }
.account-secondary:hover { border-color: #475569; }
.account-primary:disabled, .account-secondary:disabled { opacity: .6; cursor: wait; }
.account-details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 14px; }
.account-details dt { font-weight: 800; }
.account-details dd { margin: 0; overflow-wrap: anywhere; }
.account-sessions { margin: 0 0 16px; padding: 0; list-style: none; }
.account-sessions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid #e2e8f0; }
.account-sessions li:last-child { border-bottom: 1px solid #e2e8f0; }
.account-session-meta { display: block; color: #5d6878; font-size: 13px; }
.account-footnote { margin-top: 28px; color: #5d6878; font-size: 14px; }
.account-page h4 { margin: 16px 0 6px; font-size: 15px; }
.account-check { display: flex; align-items: flex-start; gap: 10px; }
.account-check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: #b91c1c; }
.account-danger {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border: 1px solid #991b1b; border-radius: 7px; background: #b91c1c; color: #fff;
  font-size: 14px; font-weight: 800;
}
.account-danger:hover { background: #991b1b; }
.account-danger:disabled { opacity: .6; cursor: wait; }

/* ---------- Match archive (/uk/archive/ and archived event pages, src/pages/archive.js) ---------- */
.ax-wrap { padding-bottom: 48px; }
.ax-filter {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 22px 0 0; padding: 18px;
  border: 1px solid var(--line); border-radius: 13px; background: #fff;
}
.ax-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ax-field label { color: #3f4a5a; font-size: 13px; font-weight: 800; }
.ax-field select, .ax-field input {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #9aa8bd; border-radius: 7px;
  background: #fff; color: var(--ink); font: inherit; font-size: 15px;
}
.ax-submit {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 7px;
  background: var(--ink); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.ax-submit:hover { background: var(--ink-3); }
.archive-page :focus-visible, .archive-event :focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
.ax-showing { margin: 18px 0 0; color: #3f4a5a; font-size: 14px; font-weight: 700; }
.ax-day { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.ax-day-title { margin: 0; padding: 14px 18px; border-bottom: 1px solid #edf0f3; background: #f8fafc; font-size: 16px; letter-spacing: -.2px; }
.ax-list { margin: 0; padding: 0; list-style: none; }
.ax-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 14px 18px; border-top: 1px solid #edf0f3; }
.ax-row:first-child { border-top: 0; }
.ax-time { color: #3f4a5a; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ax-row-main { min-width: 0; }
.ax-match { margin: 0; font-size: 17px; line-height: 1.3; overflow-wrap: break-word; }
.ax-match a { color: var(--ink); text-decoration: underline; text-decoration-color: #b6c1cf; text-underline-offset: 3px; }
.ax-match a:hover { text-decoration-color: var(--ink); }
.ax-comp { margin: 2px 0 0; color: #41680b; font-size: 13px; font-weight: 700; }
.ax-message p + p { margin-top: 10px; }
.ax-message a { color: var(--ink); font-weight: 700; text-decoration: underline; }
/* Pagination: Newer (left), "Page X of Y" (centre), Older (right). The arrows are the shared .i icon, which has no size of
   its own (each component sets one): sized here, or an SVG falls back to the browser's 300 x 150. On narrow screens the
   label takes its own row above the two buttons. */
.ax-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "prev page next";
  align-items: center; gap: 10px; margin-top: 18px;
}
.ax-pager a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700;
  white-space: nowrap;
}
.ax-pager a:hover { border-color: #9aa8bd; }
.ax-pager a:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
.ax-pager .i { width: 18px; height: 18px; }
.ax-pager .ax-back { transform: scaleX(-1); }
.ax-prev { grid-area: prev; justify-self: start; }
.ax-next { grid-area: next; justify-self: end; }
.ax-page { grid-area: page; color: #3f4a5a; font-size: 14px; text-align: center; white-space: nowrap; }
@media (max-width: 520px) {
  .ax-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "page page" "prev next"; gap: 10px 8px; }
  .ax-pager a { justify-self: stretch; gap: 4px; padding: 0 8px; font-size: 13px; }
}
.archive-event .event-notice { margin-bottom: 18px; }
.ax-table th small { display: block; color: var(--text-secondary); font-weight: 600; }
@media (min-width: 760px) {
  .ax-filter { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
}

/* ---------- Historical Market Movers (/uk/market-movers/history/, src/pages/historical-movers.js) ---------- */
.mm-window a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.historical-movers .hm-filter-comp { margin-top: 12px; }
.historical-movers .hm-market { color: var(--text-secondary); font-weight: 600; }
.hm-links { grid-column: 2; margin: 8px 0 0; font-size: 14px; }
.hm-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: #41680b; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hm-links .i { width: 16px; height: 16px; }
.historical-movers .ax-showing { overflow-wrap: break-word; }
@media (max-width: 720px), (pointer: coarse) {
  .hm-links a { min-height: 44px; }
}

/* ---------- Archived match: Bookmaker v market (src/pages/archive.js compareHtml, /assets/bookmaker-compare.js) ---------- */
.cmp-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; padding: 0 25px 14px; }
.cmp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; }
.cmp-field label { color: #3f4a5a; font-size: 13px; font-weight: 800; }
.cmp-field select { min-height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid #9aa8bd; border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; }
.cmp-summary { margin: 0 25px 12px; color: #334155; font-size: 14px; line-height: 1.5; }
.cmp-legend { margin: 0 0 10px; }
.cmp-key { display: inline-block; flex: none; width: 18px; height: 0; border-top: 3px solid var(--ph-1); }
.cmp-key-market { border-top: 3px dashed #334155; }
.cmp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cmp-dot { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: none; }
.cmp-book { stroke: var(--ph-1); }
.cmp-market { stroke: #334155; }
.cmp-line.cmp-market { stroke-dasharray: 6 4; }
.cmp-xaxis { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; justify-content: space-between; gap: 8px; color: var(--ph-ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.cmp-table-wrap { overflow-x: auto; }
.cmp-table-wrap:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
.cmp-table { width: 100%; margin: 10px 0 0; }
.cmp-table td.cmp-longer { color: #1d4ed8; font-weight: 700; }
.cmp-table td.cmp-shorter { color: #9a3412; font-weight: 700; }
.cmp-text { margin-top: 4px; }
@media (max-width: 720px) {
  .cmp-controls { padding: 0 15px 12px; }
  .cmp-summary { margin: 0 15px 12px; }
  .cmp-field, .cmp-field select { width: 100%; }
}

/* ---------- Contact form (/uk/contact/, /assets/contact.js): the Bet tracker form's look ---------- */
.contact-form { margin: 14px 0 12px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.contact-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-fields:disabled { opacity: .6; }
.contact-field { margin: 0 0 16px; min-width: 0; }
.contact-field > label { display: block; margin: 0 0 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.info-page .contact-label { margin: 0 0 4px; color: var(--ink); font-size: 15px; font-weight: 800; }
.contact-turnstile { min-height: 65px; max-width: 100%; overflow: hidden; }
.contact-turnstile:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
.info-page .contact-address { font-weight: 700; overflow-wrap: anywhere; }
.info-page .contact-hint { margin: 0 0 6px; color: #5d6878; font-size: 13px; line-height: 1.4; }
.info-page .contact-error { margin: 0 0 6px; color: #b91c1c; font-size: 14px; font-weight: 800; }
.contact-field input, .contact-field textarea {
  display: block; width: 100%; max-width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid #6b7280; border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 16px;
}
.contact-field textarea { min-height: 160px; resize: vertical; }
.contact-field [aria-invalid="true"] { border: 2px solid #b91c1c; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible, .contact-submit:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 2px; }
/* The honeypot: off-screen for people (and hidden from screen readers), still in the form for bots. */
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-submit {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 8px;
  background: var(--lime); color: #192309; font-size: 15px; font-weight: 800; cursor: pointer;
}
.contact-submit:disabled { cursor: not-allowed; }
.contact-errors { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid #b91c1c; background: #fef2f2; }
.info-page .contact-errors h3 { margin: 0 0 4px; color: #7f1d1d; font-size: 15px; font-weight: 800; }
.info-page .contact-errors ul { margin: 0; padding-left: 18px; }
.info-page .contact-errors a { color: #991b1b; }
.info-page .contact-closed, .info-page .contact-result { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid #b45309; background: #fff7ed; color: #7c2d12; font-size: 14px; }
.info-page .contact-closed[hidden], .info-page .contact-result[hidden] { display: none; }
.info-page .contact-result[data-kind="sent"] { border-left-color: #4d7c0f; background: #f7fee7; color: #365314; font-weight: 700; }
.info-page .contact-privacy { color: #5d6878; font-size: 13px; }