/* J's Footy Accas app. Colours and fonts match the website
   (matchalertbot/web/static/landing.css). tests/test_theme_and_cookies.py
   compares every token below with the website's when that repo is beside this
   one, so the two cannot drift apart unnoticed.

   Fonts are served from /static/fonts, never from Google: a request to a
   third party tells it who is reading the page, and the privacy notice
   promises none. Archivo is the heading font, Anton its fallback, Inter the
   body, as on the website. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-v27-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/archivo-v25-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --bg: #0b0b0d;
  --panel: #141418;
  --raised: #1c1c22;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.16);
  --highlight: rgba(255, 255, 255, 0.05);   /* the faint top edge on a card */
  --nav-bg: rgba(11, 11, 13, 0.78);

  /* Text. --text-muted is a shade lighter than the brief's #71717a, which
     measures 4.0:1 on the page background; this one clears AA (4.5:1) on every
     surface above. */
  --text: #f4f4f5;
  --text-2: #a1a1aa;
  --text-muted: #8b8b95;

  /* Accent: J's red from the logo (#c80000 sampled, #cc0000 as the site has
     always had it). ONLY primary buttons, the active nav item and key
     highlights. --accent-text is the same hue lifted to read as small text on
     the dark surfaces. */
  --accent: #cc0000;
  --accent-hover: #a30000;
  --accent-text: #ff6b64;
  --on-accent: #ffffff;

  /* Results only: a settled slip, a leg that hit or missed. Never a market
     tile, never decoration. */
  --win: #4ade80;
  --win-bg: rgba(74, 222, 128, 0.12);
  --loss: #f87171;
  --loss-bg: rgba(248, 113, 113, 0.12);
  --open: #d4a73a;
  --open-bg: rgba(212, 167, 58, 0.12);

  /* The one restrained highlight for "above that league's own average". */
  --edge: #8fb3cc;
  --edge-bg: rgba(143, 179, 204, 0.12);

  /* Result bar greys: the most likely outcome brightest. */
  --seg-lead: #d4d4d8;
  --seg-lead-text: #18181b;
  --seg-1: #52525b;
  --seg-2: #3f3f46;

  /* Two sides of a comparison (match page overview bars and head to head). */
  --side-home: #a1a1aa;
  --side-away: #52525b;

  /* Type: five sizes. */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.75rem;     /* 12px: labels, chips, small print */
  --text-sm: 0.875rem;    /* 14px: secondary text, table cells */
  --text-md: 1rem;        /* 16px: body */
  --text-lg: 1.375rem;    /* 22px: card figures, section titles */
  --text-xl: 2rem;        /* 32px: page titles, hero, big numbers */
  --weight: 400;
  --weight-strong: 600;

  /* Spacing, on a 4px scale. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --page: 1100px;
  --topbar-h: 56px;
  --tabbar-h: 60px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.55;
}

a { color: var(--accent-text); }

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; text-decoration: none; }
.brand-logo { border-radius: 6px; flex: 0 0 auto; }

.nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav a { color: var(--text-2); text-decoration: none; }
.nav a[aria-current="page"], .nav a:hover { color: var(--text); }

.page { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }

h1, h2, h3 {
  font-family: 'Archivo', 'Anton', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
h1 { font-size: 1.7rem; line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.lead { color: var(--text-2); font-size: 1.05rem; }

.button, .install {
  display: inline-block;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.button:hover, .install:hover { background: var(--accent-hover); }
.button.secondary { background: var(--raised); color: var(--text); border: 1px solid var(--border); }
.install { padding: 6px 12px; font-size: 0.9rem; }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 32px 0; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.tile h2 { margin-top: 0; font-size: 1rem; }
.tile p { margin: 0; color: var(--text-2); }

.form { display: grid; gap: 10px; max-width: 420px; margin: 16px 0; }
.form input[type="email"] {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--text);
  font: inherit;
}
.check { display: flex; gap: 10px; align-items: flex-start; }
.inline { display: inline-block; margin-right: 8px; }

.flash { padding: 10px 12px; border-radius: 8px; background: var(--raised); }
.flash-error { background: var(--loss-bg); color: var(--loss); }

.fine { color: var(--text-2); font-size: 0.85rem; }

.foot { border-top: 1px solid var(--border); padding: 20px 16px 32px; max-width: 760px; margin: 0 auto; }
.foot-links { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.foot-links a { color: var(--text-2); }

/* --- Stats and results (Stage 6) ---------------------------------------- */
.record-products, .record-lines { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.record-product { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.record-product-name { font-weight: 600; flex: 1 1 14rem; }
.record-product-counts, .record-product-basis, .record-product-withheld { color: var(--text-2); font-size: 0.9rem; }
.record-product-rate { font-size: 1.1rem; }
.record-lines li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding: 6px 0; }
.stale { color: var(--open); }
.empty-state { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin: 16px 0; color: var(--text-2); }
.acca { background: var(--panel); border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.acca-won { border-left-color: var(--win); }
.acca-lost { border-left-color: var(--loss); }
.acca-incomplete { border-left-color: var(--open); }
.acca-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0 0 8px; }
.acca-verdict { font-weight: 700; }
.acca-verdict-won { color: var(--win); }
.acca-verdict-lost { color: var(--loss); }
.acca-verdict-incomplete { color: var(--open); }
.acca-name { flex: 1 1 10rem; }
.acca-tag { font-size: 0.75rem; background: var(--raised); border-radius: 6px; padding: 2px 6px; color: var(--text-2); }
.acca-day { color: var(--text-2); font-size: 0.85rem; }
.acca-legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acca-leg { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 2px 8px; font-size: 0.92rem; }
.leg-mark { grid-row: span 2; font-weight: 700; }
.leg-hit .leg-mark { color: var(--win); }
.leg-miss .leg-mark { color: var(--loss); }
.leg-void .leg-mark { color: var(--text-2); }
.leg-fixture { grid-column: 2; color: var(--text-2); font-size: 0.82rem; }
.leg-outcome { grid-row: 1; grid-column: 3; color: var(--text-2); text-align: right; }

/* Leaderboard */
.lb-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.lb-tabs a { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); text-decoration: none; }
.lb-tabs a[aria-current="true"], .lb-tabs a:hover { color: var(--text); background: var(--raised); }
.lb-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.lb-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: 12px; align-items: baseline; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; }
.lb-rank { font-weight: 700; font-size: 1.2rem; }
.lb-name { font-weight: 600; overflow-wrap: anywhere; }
.lb-share { font-weight: 700; text-align: right; }
.lb-report, .lb-report-inline { color: var(--text-2); font-size: 0.85rem; }
.lb-report { grid-column: 3; text-align: right; }
.how { margin: 24px 0; }
.how summary { cursor: pointer; font-weight: 600; }
.lb-detail { grid-column: 2 / 4; color: var(--text-2); font-size: 0.9rem; }
.lb-detail--half { grid-column: 2; }