/* SoccerGhost — SEO surface.
 *
 * Most people meet this product here, on a page Google sent them to, so it carries exactly the
 * design system the app does: the same tokens, the same two themes, the same restraint. A reader
 * who follows a search result and then opens the app must not feel they have arrived somewhere
 * else. The token names and values mirror frontend/soccerghost-app/src/css/index.css.
 *
 * No framework and no webfont on the critical path. This file is the entire styling budget for a
 * page that has to render in under 2.5s on 3G (README §14 performance contract).
 */

:root {
  --bg: #0A0D12;
  --surface: #141A22;
  --raised: #1A212B;
  --border: #26303C;
  --border-soft: #1D2531;

  --text: #E8EDF3;
  /* Every text colour at 4.5:1 or more on every surface, as the app's own (contrast.test.ts). */
  --muted: #A2ACBC;
  --faint: #818B98;

  --accent: #5FE3B0;
  --accent-ink: #06231A;
  --warn: #F0B429;

  /* README §6's loss red, and the same value the app carries as --sg-live. This read
     `var(--live)` — a custom property referencing itself, which is invalid at computed-value
     time, so every rule below resolved to nothing and the live minute, the live count and a
     definite absence all rendered in body text. Only the light theme, which sets the token
     outright, ever showed the colour. */
  --live: #FF6B6B;
  --neutral: #3A4552;

  color-scheme: dark;
}

/* Light, for a reader whose device asks for it. The accent deepens because #5FE3B0 on white is
   about 1.6:1 and unreadable — the same substitution the app makes. */
@media (prefers-color-scheme: light) {
  :root {
    /* Deepened in step with the app (frontend/src/css/index.css). §6 elevates with borders
       rather than shadows, and at #F5F7FA the background sat within four points of white — so
       panels stopped reading as panels. §5's promise is that a reader following a search result
       here and then opening the app cannot tell they crossed a boundary, which means these
       values move together or not at all. */
    --bg: #E9EDF3;
    --surface: #FFFFFF;
    --raised: #F3F6FA;
    --border: #C3CEDD;
    --border-soft: #DDE5EF;

    --text: #0F1620;
    --muted: #485463;
    --faint: #5C6672;

    --accent: #00734D;
    --accent-ink: #FFFFFF;
    --warn: #895C00;
    --live: #C12727;
    --neutral: #B6C0CC;

    color-scheme: light;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;

  /* Nothing here is wider than the viewport. The seatbelt, so a single misbehaving element
     cannot make the page scroll sideways on a phone. */
  overflow-x: clip;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.page { max-width: 720px; margin: 0 auto; padding: 16px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Links among words are underlined, not told apart from the words by colour alone (WCAG 1.4.1):
   the link green against body text is 1.36:1, and the check flagged 150 of 196 pages (11 October
   audit). Rows, pills, tabs and the nav are shaped as controls, sit in classed lists or blocks, and
   keep their own look. */
:where(p, address, dd, .crumbs) a,
main :is(ul, ol):not([class]) > li a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.muted { color: var(--muted); font-weight: 400; }

/* Words the layout says to the eye and the text does not: "vs" between two names drawn one above the
   other, the dash between a score's two numbers. A list's link read "11:30 Arsenal Leeds 21" to a
   screen reader and to a search engine (10 October). */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
                   overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 0.75rem; letter-spacing: 1.3px; text-transform: uppercase;
     color: var(--muted); margin: 28px 0 10px; }
h3 { font-size: 1rem; margin: 0 0 8px; }

.crumbs { font-size: 0.8rem; color: var(--muted); margin-bottom: 16px; }

.match-header .score { font-size: 2rem; font-weight: 700; margin: 4px 0; }
.match-header .kickoff { font-size: 1.1rem; margin: 4px 0; }
.match-header .meta { font-size: 0.85rem; }

/* The three-segment bar: the Ghost's call, readable without reading a number. */
.probability-bar { display: flex; gap: 2px; height: 10px; margin: 12px 0 10px; }
.probability-bar .seg { display: block; border-radius: 5px; flex-basis: 0; }
.probability-bar .home { background: var(--accent); }
.probability-bar .draw { background: var(--neutral); }
.probability-bar .away { background: var(--warn); }

.odds-row { display: flex; list-style: none; padding: 0; margin: 0 0 10px; }
.odds-row li { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.odds-row li:nth-child(2) { text-align: center; }
.odds-row li:last-child { text-align: right; }
.odds-row strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.odds-row span { font-size: 0.8rem; color: var(--muted); }

.call, .form-card, section.h2h, section.markets {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin-bottom: 12px;
}
.call h2, .form-card h3 { margin-top: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.form-card .record { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px;
                     font-variant-numeric: tabular-nums; }
.form-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0;
                font-size: 0.875rem; }
.form-card dt { color: var(--muted); }
.form-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.form-card .timing { font-size: 0.875rem; margin: 10px 0 0; color: var(--accent); }

/* Every honest limitation on the page uses this: missing coverage, a thin sample, a weak H2H.
   Deliberately quiet rather than alarming — it is context, not an error. */
.caveat { font-size: 0.8rem; color: var(--muted); border-left: 2px solid var(--neutral);
          padding-left: 10px; margin: 10px 0 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th { text-align: left; font-size: 0.7rem; letter-spacing: 0.9px; text-transform: uppercase;
     color: var(--muted); font-weight: 700; padding: 6px 0; }
td { padding: 8px 0; border-top: 1px solid var(--raised); font-variant-numeric: tabular-nums; }
tr.value td { color: var(--accent); }

/* The footer sits outside <main class="page">, so it takes the page's column for itself: its content's
   width, 16px from the screen's edge on a phone. Without it every server page ran its footer from edge to
   edge (audit, 4 October). */
.page-footer { font-size: 0.75rem; width: min(688px, 100% - 32px); margin: 32px auto 0; border-top: 1px solid var(--raised);
               padding: 14px 0 max(24px, env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------- Today */

.today-header h1 { font-size: 1.75rem; margin-bottom: 4px; }
.live-count { color: var(--live); }

section.league { margin-bottom: 20px; }
section.league h2 { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
section.league h2 a { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
section.league h2 .muted { text-transform: none; letter-spacing: 0; font-size: 0.75rem; }

ul.fixtures { list-style: none; margin: 0; padding: 0; }

.fixture { border: 1px solid var(--border); background: var(--surface);
           border-radius: 12px; margin-bottom: 6px; }
.fixture a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; color: var(--text); }
.fixture a:hover { text-decoration: none; background: var(--raised); border-radius: 12px; }

.fixture .when { width: 46px; flex-shrink: 0; font-size: 0.8rem; color: var(--muted);
                 font-variant-numeric: tabular-nums; }
.fixture.is-live .minute { color: var(--live); font-weight: 700; }

.fixture .teams { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Whole, never cut to "Wolverhampton Wan…": a long name takes a second line (1 October). */
.fixture .team { font-size: 0.9rem; overflow-wrap: break-word; }

/* Slimmer than the match page's bar: on a list it is a glance, not a focus. */
.fixture .probability-bar { height: 4px; margin-top: 6px; }

.fixture .score { display: flex; flex-direction: column; gap: 2px; text-align: right;
                  font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* Team news (README §4.3). The highest-value block on the page, so it reads clearly on a phone
   before it looks clever on a desktop. */
.lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .lineup-grid { grid-template-columns: minmax(0, 1fr); } }

.lineup-card { border: 1px solid var(--border); background: var(--surface);
               border-radius: 12px; padding: 12px; }
.lineup-card h3 { margin: 0 0 8px; font-size: 0.95rem; }

.lineup-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
               margin: 0 0 10px; font-size: 0.8rem; }
.lineup-meta .formation { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Confirmed and probable must never look alike. Mint is the site's "this is solid" colour and
   amber its "hold on" — the difference is visible at a glance and without reading the word. */
.badge { font-size: 0.7rem; letter-spacing: 0.6px; text-transform: uppercase; font-weight: 700;
         border-radius: 999px; padding: 3px 8px; border: 1px solid transparent; }
.badge.confirmed { color: var(--bg); background: var(--accent); }
.badge.probable { color: var(--warn); border-color: var(--warn); }

.pitch { display: flex; flex-direction: column; gap: 10px; padding: 12px 6px;
         border-radius: 10px; background:
           linear-gradient(180deg, rgba(95, 227, 176, 0.06), rgba(95, 227, 176, 0.02));
         border: 1px solid var(--border); }
.pitch-row { display: flex; justify-content: space-around; gap: 6px; }

.pitch-player { display: flex; flex-direction: column; align-items: center; gap: 3px;
                min-width: 0; text-align: center; }
/* The whole name, over as many lines as it takes: "Ernan Alberto Siluane" was cut at 8ch. */
.pitch-player .name { font-size: 0.7rem; color: var(--text); max-width: 10ch; line-height: 1.15;
                      overflow-wrap: break-word; }

.shirt { display: inline-flex; align-items: center; justify-content: center;
         width: 22px; height: 22px; border-radius: 50%; background: var(--neutral);
         font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* The fallback when the provider gives no pitch coordinates. */
ul.xi { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; }
ul.xi li { display: flex; gap: 8px; align-items: center; padding: 4px 0;
           border-top: 1px solid var(--raised); }

.bench { font-size: 0.75rem; color: var(--text); margin: 10px 0 0; line-height: 1.5; }
.bench .muted { display: block; font-size: 0.7rem; letter-spacing: 0.6px;
                text-transform: uppercase; margin-bottom: 2px; }

.absences { margin-top: 14px; }
.absences h3 { font-size: 0.8rem; letter-spacing: 0.9px; text-transform: uppercase;
               color: var(--muted); margin: 0 0 6px; }
.absences ul { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; }
.absences li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
               padding: 5px 0; border-top: 1px solid var(--raised); }
.absences .who { font-weight: 700; }

/* A suspension changes a bet; a doubt does not. The list says which without the reader
   having to parse the reason. */
.absences .definite .why { color: var(--live); }
.absences .doubt .why { color: var(--warn); }

/* A league table cannot fit 360px, so it scrolls inside its own box. The page itself never
   scrolls sideways — that is the difference between a wide table and a broken layout. */
.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table-scroll table { min-width: 22rem; }
td.num, th.num { text-align: right; }

/* ---------------------------------------------------------------- The indexed surface (docs/seo.md) */

/* The site's own navigation. One row, scrolling sideways inside itself on a phone rather than
   wrapping into three lines above every page's first heading. */
.site-header { border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.site-header-inner { max-width: 720px; margin: 0 auto; padding: 10px 16px; display: flex;
                     gap: 16px; align-items: center; }
.brand { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand-logo { display: block; height: 34px; width: auto; }
@media (max-width: 639px) { .brand-logo { height: 30px; } }
.site-nav { display: flex; gap: 14px; overflow-x: auto; font-size: 0.85rem; white-space: nowrap;
            scrollbar-width: none; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--text); }

/* The way into the app (15 October): at the row's end and whole, the menu scrolling between it and
   the logo on a phone as it already did. */
.site-app { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px;
            padding: 0 14px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
            font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.site-app:hover { text-decoration: none; }

.crumbs .sep { color: var(--faint); }

h1 .h1-sub { display: block; font-size: 0.95rem; font-weight: 600; color: var(--muted); margin-top: 4px; }
.intro { font-size: 0.95rem; color: var(--text); margin: 12px 0 16px; }
.teams-line { font-size: 0.85rem; margin: 6px 0 0; }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
         padding: 14px; margin-bottom: 12px; }
.panel h2 { margin-top: 0; }
.panel h3 { margin: 14px 0 4px; font-size: 0.9rem; }
.panel h3:first-of-type { margin-top: 0; }

/* A match's statistics, side by side, with a bar a reader can read without the numbers. */
.stat-head { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; }
ul.stat-rows { list-style: none; margin: 0; padding: 0; }
.stat-row { display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center; gap: 2px 8px;
            padding: 6px 0; border-top: 1px solid var(--raised); font-size: 0.875rem; }
.stat-home { font-weight: 700; }
.stat-name { text-align: center; color: var(--muted); font-size: 0.8rem; }
.stat-away { text-align: right; font-weight: 700; }
.stat-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 4px; }
.stat-bar span { display: block; border-radius: 2px; flex-basis: 0; }
.stat-bar .home { background: var(--accent); }
.stat-bar .away { background: var(--warn); }

ol.events { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
ol.events li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-top: 1px solid var(--raised); }
ol.events .minute { width: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
ol.events .who { font-weight: 600; }

ol.score-list { list-style: none; margin: 0; padding: 0; display: grid;
                grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 6px; }
ol.score-list li { background: var(--raised); border-radius: 8px; padding: 6px 10px; }

/* Where to go next: the pages about the same teams, competition and day. */
nav.related ul, .link-list { list-style: none; margin: 0; padding: 0; display: grid;
                             grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 4px 16px; font-size: 0.9rem; }
nav.related { margin: 24px 0 8px; }

.day-nav { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; margin: 0 0 16px; }
.day-nav a, .day-nav span { border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }
.day-nav span[aria-current] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.footer-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 16px; margin-bottom: 16px; }
.footer-directory ul { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.footer-heading { font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; margin: 0 0 4px; color: var(--text); }

/*
 * A thumb's 44px on a touch screen (1 October): the header's links were 20px tall, the day links
 * 30 and a competition's name 23. Each grows to the height; the text stays where it was drawn.
 */
@media (pointer: coarse) {
  .site-nav a,
  .site-app,
  .day-nav a,
  .day-nav span,
  section.league h2 a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The row takes the 6px its first and last links reach out by (below), so they sit where they
     did and whole: without it the links were 455px in a 449px row on every screen, the row slid 6px
     sideways under a thumb and Predictions' first 6px could not be tapped (measured 12 October,
     Segoe UI and Roboto, 320 to 1440px). */
  .site-nav { align-items: center; padding-inline: 6px; margin-inline: -6px; }

  /* "Stats" was 29px across: each link a little wider than its word, the same distance apart. */
  .site-nav a { padding-inline: 6px; margin-inline: -6px; }
  section.league h2 { align-items: center; }
}

/* The help lines (Responsible gambling): an address such as helpline@responsiblegambling.org.za is one
   word as wide as a 320px phone's column, so it may break anywhere rather than push the page sideways. */
.help-list li { overflow-wrap: anywhere; }