/* Skora stylesheet.
 *
 * Served as one cacheable file rather than inlined on every page: the site is
 * crawled page by page, and a shared stylesheet is downloaded once instead of
 * on every HTML response.
 *
 * It is logical-property first (inline-start/end, not left/right) so the same
 * rules lay out correctly in Arabic RTL and English LTR with no overrides.
 */

/* ---------- theme ----------
 *
 * Two palettes, one page.
 *
 * The default is the system preference, so a visitor who never touches the
 * switch — and every visitor with JavaScript off, and every crawler — is
 * served prefers-color-scheme with no script involved. An explicit choice is
 * written to <html data-theme="light|dark"> before the first paint (see the
 * boot script in views/layout.gohtml) and overrides the media query.
 *
 * The colours are declared once, as --light-* / --dark-* pairs, and a short
 * mapping block decides which half of each pair the page actually uses. CSS
 * cannot share one declaration block between a media query and a selector,
 * so that mapping has to be written twice — but it carries names, not hex
 * values, which is what stops the two copies drifting into different greens.
 * TestBothDarkRulesApplyTheSamePalette fails if one gains a token the other
 * is missing.
 */

:root {
  color-scheme: light dark;

  --light-bg: #f6f7f9;
  --light-surface: #ffffff;
  --light-surface-2: #f0f2f5;
  --light-border: #e2e5ea;
  --light-text: #11161d;
  --light-muted: #5b6676;
  --light-faint: #8a94a3;
  --light-accent: #0b6e4f;
  --light-accent-ink: #ffffff;
  --light-accent-soft: #e6f3ee;
  --light-live: #d6202f;
  --light-live-soft: #fdeaec;
  --light-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);

  --dark-bg: #0e1116;
  --dark-surface: #161b22;
  --dark-surface-2: #1c222b;
  --dark-border: #2a313c;
  --dark-text: #e8edf4;
  --dark-muted: #9aa6b5;
  --dark-faint: #6d7988;
  --dark-accent: #2ea37a;
  --dark-accent-ink: #06130e;
  --dark-accent-soft: #14271f;
  --dark-live: #ff5c6b;
  --dark-live-soft: #2a1619;
  --dark-shadow: 0 1px 2px rgba(0, 0, 0, .4);

  /* Light is the base. The two rules below only ever switch to the dark half,
     so a theme that is never selected costs nothing to express. */
  --bg: var(--light-bg);
  --surface: var(--light-surface);
  --surface-2: var(--light-surface-2);
  --border: var(--light-border);
  --text: var(--light-text);
  --muted: var(--light-muted);
  --faint: var(--light-faint);
  --accent: var(--light-accent);
  --accent-ink: var(--light-accent-ink);
  --accent-soft: var(--light-accent-soft);
  --live: var(--light-live);
  --live-soft: var(--light-live-soft);
  --shadow: var(--light-shadow);

  /* A win is the accent and a loss is the live red in both themes, so they
     follow whichever palette is in force rather than being switched too. */
  --win: var(--accent);
  --loss: var(--live);
  --draw: #8a94a3;

  --radius: 10px;
  --radius-lg: 14px;

  --font: "Noto Kufi Arabic", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* The system preference — unless the visitor has explicitly asked for light,
   in which case light is what they get on a dark desktop. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
    --border: var(--dark-border);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --faint: var(--dark-faint);
    --accent: var(--dark-accent);
    --accent-ink: var(--dark-accent-ink);
    --accent-soft: var(--dark-accent-soft);
    --live: var(--dark-live);
    --live-soft: var(--dark-live-soft);
    --shadow: var(--dark-shadow);
  }
}

/* An explicit dark choice, whatever the system is set to. */
:root[data-theme="dark"] {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --border: var(--dark-border);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --faint: var(--dark-faint);
  --accent: var(--dark-accent);
  --accent-ink: var(--dark-accent-ink);
  --accent-soft: var(--dark-accent-soft);
  --live: var(--dark-live);
  --live-soft: var(--dark-live-soft);
  --shadow: var(--dark-shadow);
}

/* An explicit choice pins the browser's own UI to it as well — scrollbars,
   form controls and the switch's dropdown — instead of leaving them on the
   system scheme while the page around them says otherwise. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; height: auto; }

h1 { font-size: 1.5rem; line-height: 1.3; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; line-height: 1.35; margin: 0 0 .75rem; }
h3 { font-size: .95rem; margin: 0; }
p { margin: 0 0 .75rem; color: var(--muted); }

.wrap { width: min(1100px, 100% - 2rem); margin-inline: auto; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 60px;
  flex-wrap: wrap;
  padding-block: .5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .95rem;
}

.site-nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }

.site-nav a {
  padding: .4rem .7rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .92rem;
  color: var(--muted);
}

.site-nav a:hover { background: var(--surface-2); color: var(--text); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }

.header-tools { display: flex; align-items: center; gap: .5rem; }

.search-form { display: flex; }

.search-form input {
  min-width: 180px;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
}

.search-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lang-toggle {
  padding: .4rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .8rem;
  color: var(--muted);
}

/* The theme switch only appears once its boot script has run: without
   JavaScript the page still honours the system preference, and a control that
   cannot change anything is worse than no control at all. The attribute is set
   in the head, before the header is parsed, so the switch is never painted and
   then taken away. */
.theme-switch {
  display: none;
  padding: .4rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}

:root[data-theme-ready] .theme-switch { display: inline-block; }

.theme-switch:hover { color: var(--text); border-color: var(--accent); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

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

main { padding-block: 1.25rem 2.5rem; }

.page-head { margin-bottom: 1.25rem; }
.page-head p { margin: 0; font-size: .92rem; }

.layout { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
  .layout.with-aside { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card + .card { margin-top: 1rem; }

/* A live region that may have no card still needs an element to be replaced
   into, so the slot stays in the page and collapses when its fragment comes
   back empty. The sibling rule above cannot see through the wrapper. */
.live-slot:empty { display: none; }
.live-slot:not(:empty) + .card { margin-top: 1rem; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
}

.card-head h2, .card-head h3 { margin: 0; font-size: .95rem; font-weight: 700; }
.card-head a { font-size: .82rem; font-weight: 600; color: var(--accent); }
.card-body { padding: 1rem; }

/* ---------- date strip ---------- */

.date-strip {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  margin-bottom: 1rem;
  scrollbar-width: thin;
}

.date-chip {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: .1rem;
  min-width: 68px;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .78rem;
  color: var(--muted);
}

.date-chip strong { font-size: .9rem; color: var(--text); font-weight: 700; }
.date-chip:hover { border-color: var(--accent); }
.date-chip[aria-current="date"] { background: var(--accent); border-color: var(--accent); }
.date-chip[aria-current="date"] strong,
.date-chip[aria-current="date"] { color: var(--accent-ink); }

/* ---------- match rows ---------- */

.competition-group + .competition-group { margin-top: 1rem; }

.competition-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-block-end: 1px solid var(--border);
  background: var(--surface-2);
  font-weight: 700;
  font-size: .88rem;
}

.competition-head img { width: 18px; height: 18px; object-fit: contain; }
.competition-head .country { color: var(--faint); font-weight: 500; font-size: .8rem; }

.match-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  padding: .65rem 1rem;
  border-block-end: 1px solid var(--border);
}

.match-row:last-child { border-block-end: 0; }
.match-row:hover { background: var(--surface-2); }

.match-time {
  display: grid;
  justify-items: center;
  gap: .15rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.match-time strong { direction: ltr; unicode-bidi: isolate; }
.match-time .status { font-size: .68rem; font-weight: 600; color: var(--faint); }

.match-time.is-live { color: var(--live); }
.match-time.is-live .status { color: var(--live); }

/* The two teams face each other across the score on one row. The home side
 * is the first column, so the page direction puts it on the left in English
 * and on the right in Arabic, and the score between them moves with it. */
.match-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  min-width: 0;
}

.team-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

/* Each side's crest hugs the score, so the home side packs toward the row's
 * inline end and the away side toward its start. Both are logical, so the
 * pair mirrors with the page instead of against it; the crest order comes
 * from the markup rather than from reversing the main axis. */
.team-line.home { justify-content: flex-end; }
.team-line.home .name { text-align: end; }
.team-line.away { justify-content: flex-start; }

.team-line img, .crest {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.crest {
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--faint);
  font-size: .6rem;
  font-weight: 700;
}

.team-line .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
}

.team-line.winner .name { font-weight: 700; }
.team-line.loser .name { color: var(--muted); }

/* A match decided on penalties has a level 90-minute score, so the winner is
 * marked explicitly and the shootout is spelled out. */
.win-mark { flex: 0 0 auto; color: var(--win); font-size: .6rem; line-height: 1; }
.match-teams .shootout { grid-column: 1 / -1; text-align: center; }
.shootout {
  margin-top: .1rem;
  color: var(--faint);
  font-size: .72rem;
  font-weight: 700;
  unicode-bidi: isolate;
}

.match-score {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1rem;
  min-width: 2.6rem;
}

.match-score .vs { color: var(--faint); font-weight: 600; }

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .4rem;
  border-radius: 5px;
  font-size: .68rem;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--muted);
}

.badge.live { background: var(--live-soft); color: var(--live); }

/* ---------- match detail ---------- */

.scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
}

.scoreboard .side { display: grid; justify-items: center; gap: .5rem; min-width: 0; }
.scoreboard .side img, .scoreboard .side .crest { width: 56px; height: 56px; }
.scoreboard .side strong { font-size: 1rem; overflow-wrap: anywhere; }

.scoreboard .result { display: grid; gap: .25rem; }
.scoreboard .result .figures {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.scoreboard .result .state { font-size: .78rem; color: var(--muted); font-weight: 600; }
.scoreboard .result .pens { color: var(--text); font-weight: 800; }

/* A home-away pair laid out by the page direction, so the home number always
 * sits on the same side as the home team. The teams swap sides between the
 * Arabic and English layouts and the score has to swap with them: pinned
 * left-to-right it left the winner's score under the loser's crest. */
.scoreline {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .35em;
  font-variant-numeric: tabular-nums;
}
.scoreline .sep { opacity: .55; }
.scoreboard .side.is-winner strong { font-weight: 800; }
.badge.win { background: var(--accent-soft); color: var(--accent); }

/* ---------- match timeline ---------- */

/* Two columns with a spine between them: the home team's events on one side,
 * the away team's on the other.
 *
 * Nothing here names a physical side. Each row is a three-column grid and the
 * card is placed in grid column 1 for the home team and column 3 for the away
 * team; grid column numbers run along the inline direction, so column 1 is the
 * left in English and the right in Arabic. The scoreboard above writes the
 * home side first and is laid out by the same direction, which is what keeps a
 * team's events under that team in both locales.
 *
 * The spine itself is positioned with inset-inline-start rather than left. At
 * calc(50% - 1px) that is the same line either way, but it lets the narrow
 * layout below move the rail to the start edge with one declaration. */
.timeline {
  --tl-spine: 58px;
  display: grid;
  padding-block-end: .5rem;
}

/* Crests over the two columns, so a reader can tell which side is which
 * without scrolling back to the scoreboard. Hidden from assistive technology:
 * it repeats the scoreboard, and each event below carries its own team name. */
.timeline-teams {
  display: grid;
  grid-template-columns: 1fr var(--tl-spine) 1fr;
  gap: .5rem;
  align-items: center;
  padding: .1rem 1rem .55rem;
  font-size: .78rem;
  color: var(--muted);
}
.tl-team { display: flex; align-items: center; gap: .4rem; min-width: 0; }
/* Both labels pack to flex-start, which puts each against the spine: the away
 * label runs in the normal direction from the far edge inward, and reversing
 * the home label flips its main axis so it does the same from the other side,
 * with its crest nearest the spine like the icons on the cards below. */
.timeline-teams > .tl-team:first-child { flex-direction: row-reverse; }
.tl-team b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-teams img, .timeline-teams .crest { width: 18px; height: 18px; font-size: .58rem; }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--tl-spine) 1fr;
  align-items: center;
  gap: .5rem;
  padding: .25rem 1rem;
  font-size: .9rem;
}

/* One segment of the spine per row. The rows sit flush against each other, so
 * the segments join into a continuous line and a half-time break interrupts
 * it, which is the intent. */
.timeline-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  background: var(--border);
}

.timeline-item .minute {
  grid-column: 2;
  position: relative;
  z-index: 1;
  padding: .1rem .2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  text-align: center;
  font-weight: 700;
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}

.tl-card {
  /* Raised over the spine, which is absolutely positioned and would otherwise
     paint across a card that crosses the centre (see .unknown below). */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  max-width: 100%;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* The card hugs the spine, and the home card is reversed so its icon sits on
 * the spine side too — the two columns mirror each other. */
.timeline-item.home .tl-card { grid-column: 1; justify-self: end; flex-direction: row-reverse; text-align: end; }
.timeline-item.away .tl-card { grid-column: 3; justify-self: start; text-align: start; }

/* SportCore reports an event it cannot attribute as side "unknown". Putting
 * it in either column would claim a team the data does not, so it gets its own
 * row under the spine, centred and belonging to neither side. */
.timeline-item.unknown { row-gap: .3rem; }
.timeline-item.unknown .minute { grid-row: 1; }
.timeline-item.unknown .tl-card { grid-row: 2; grid-column: 1 / -1; justify-self: center; }

.tl-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.tl-card .tl-name { font-weight: 600; overflow-wrap: anywhere; }
.timeline-item .icon { font-size: 1rem; flex: 0 0 auto; }
.timeline-item .assist { color: var(--faint); font-size: .78rem; }

.lineup-grid { display: grid; gap: 1rem; }
@media (min-width: 700px) { .lineup-grid { grid-template-columns: 1fr 1fr; } }

.lineup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.lineup-list li { display: flex; gap: .5rem; font-size: .88rem; }
.lineup-list .num {
  flex: 0 0 1.6rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.lineup-list .pos { margin-inline-start: auto; color: var(--faint); font-size: .76rem; font-weight: 700; }
.lineup-list .sub-label { color: var(--faint); font-size: .78rem; margin-top: .5rem; font-weight: 700; }

.stat-row { display: grid; gap: .2rem; margin-bottom: .6rem; }
.stat-row .labels { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 600; }
.stat-row .labels span:nth-child(2) { color: var(--faint); font-weight: 500; }
.stat-bar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--surface-2); }
.stat-bar i { display: block; height: 100%; }
.stat-bar .home { background: var(--accent); }
.stat-bar .away { background: var(--faint); }

/* ---------- match page detail ---------- */

/* The goal summary sits under the scoreboard in the same three-column shape,
 * so a scorer lines up beneath the team they scored for. */
.scorers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: .75rem 1rem;
  border-block-start: 1px solid var(--border);
  font-size: .84rem;
}
.scorers ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; text-align: end; }
.scorers ul.away { text-align: start; }
.scorers-icon { color: var(--faint); font-size: .8rem; padding-block-start: .1rem; }
.scorers .mins { color: var(--muted); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.scorers .og { color: var(--faint); font-size: .78rem; }

/* Kick-off, competition, round and venue as labelled pairs that wrap instead
 * of overflowing on a phone. */
.match-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem 1rem;
  margin: 0;
  padding: .85rem 1rem;
  border-block-start: 1px solid var(--border);
}
.match-facts div { display: grid; gap: .15rem; min-width: 0; }
.match-facts dt { font-size: .72rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; }
.match-facts dd { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }

/* The break between halves, so a reader can see at a glance which events
 * belong to which half. It crosses the spine rather than sitting beside it. */
.timeline-break {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-block: .35rem;
  padding: .4rem 1rem;
  background: var(--surface-2);
  border-block: 1px solid var(--border);
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
}
.timeline-break .score { color: var(--text); }

/* A goal is the row a reader is looking for, so it carries the accent on both
 * the card and the minute marker on the spine. */
.timeline-item.is-goal .tl-card { background: var(--accent-soft); border-color: var(--accent-soft); }
.timeline-item.is-goal .tl-name { font-weight: 800; }
.timeline-item.is-goal .minute { border-color: var(--accent); color: var(--accent); }
.timeline-item .run-score {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: .85rem;
  color: var(--accent);
}
.timeline-item .sub-in { color: var(--accent); }
.timeline-item .sub-out { color: var(--muted); font-size: .8rem; }

/* The team name is what the two columns already say, so it is kept only for a
 * screen reader while the wide layout is in use — not display:none, which
 * would drop it from the accessibility tree as well. The narrow layout below
 * has no columns to read it from and shows it. */
.tl-team-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Below this width two columns of Arabic names are too narrow to read, so the
 * timeline folds into one column with the rail on the inline-start edge. The
 * side a card belongs to is then carried by its team name instead of by its
 * position. */
@media (max-width: 639px) {
  .timeline-teams { display: none; }
  .timeline-item { grid-template-columns: 46px minmax(0, 1fr); row-gap: 0; padding-inline: .75rem; }
  .timeline-item::before { inset-inline-start: calc(.75rem + 22px); }
  .timeline-item .minute { grid-row: auto; grid-column: 1; }
  .timeline-item.home .tl-card,
  .timeline-item.away .tl-card,
  .timeline-item.unknown .tl-card {
    grid-row: auto;
    grid-column: 2;
    justify-self: stretch;
    flex-direction: row;
    text-align: start;
  }
  .timeline-item .run-score { margin-inline-start: auto; }
  .tl-team-name {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

.lineup-team { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.lineup-team .formation {
  font-size: .76rem;
  font-weight: 700;
  color: var(--faint);
  direction: ltr;
  unicode-bidi: isolate;
}
.lineup-list .marks { margin-inline-start: .35rem; font-size: .76rem; letter-spacing: .05em; }
.lineup-list .pos + .marks { margin-inline-start: .35rem; }

.mini-table { font-size: .82rem; }
.mini-table td.team { min-width: 0; }

.empty-note { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- tables ---------- */

.table-scroll { overflow-x: auto; }

table.standings {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}

table.standings th, table.standings td {
  padding: .5rem .5rem;
  text-align: center;
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}

table.standings th {
  font-size: .74rem;
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Numbers are read left-to-right even in Arabic. Without isolating them the
 * bidi algorithm moves the sign to the trailing edge, rendering a goal
 * difference of +21 as "21+". */
table.standings td:not(.team) { direction: ltr; unicode-bidi: isolate; }
table.standings td.team, table.standings th.team { text-align: start; white-space: normal; min-width: 150px; }
table.standings td.team a { display: flex; align-items: center; gap: .5rem; }
table.standings td.pts { font-weight: 800; }
table.standings tbody tr:hover { background: var(--surface-2); }
table.standings .rank { color: var(--faint); font-variant-numeric: tabular-nums; }

.form-strip { display: inline-flex; gap: 2px; }
.form-strip i {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: .62rem;
  font-style: normal;
  font-weight: 700;
  color: #fff;
}
.form-strip i.W { background: var(--win); }
.form-strip i.D { background: var(--draw); }
.form-strip i.L { background: var(--loss); }

/* ---------- lists ---------- */

.tile-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.tile {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.tile:hover { border-color: var(--accent); }
.tile img, .tile .crest { width: 28px; height: 28px; }
.tile .meta { min-width: 0; }
.tile .meta strong { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .meta span { font-size: .78rem; color: var(--faint); }

.news-list { display: grid; gap: 1rem; }
@media (min-width: 700px) { .news-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }

.news-card { display: grid; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.news-card:hover { border-color: var(--accent); }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.news-card .body { padding: .85rem; display: grid; gap: .35rem; }
.news-card h3 { font-size: .98rem; line-height: 1.4; }
.news-card p { margin: 0; font-size: .85rem; }
.news-card time { font-size: .76rem; color: var(--faint); }

.article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; }
.article header { margin-bottom: 1rem; }
.article h1 { margin-bottom: .5rem; }
.article .byline { font-size: .82rem; color: var(--faint); }
.article .content { font-size: .98rem; line-height: 1.85; }
.article .content p { color: var(--text); }
.article img.hero { border-radius: var(--radius); margin-bottom: 1rem; }

/* ---------- misc ---------- */

.empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
}

.empty strong { display: block; color: var(--text); margin-bottom: .25rem; }

.breadcrumbs { display: flex; gap: .4rem; flex-wrap: wrap; font-size: .8rem; color: var(--faint); margin-bottom: .75rem; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs span::after { content: "/"; margin-inline-start: .4rem; color: var(--border); }

.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.pagination a, .pagination span {
  padding: .4rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  background: var(--surface);
}
.pagination span { color: var(--faint); }

.site-footer {
  border-block-start: 1px solid var(--border);
  background: var(--surface);
  padding-block: 1.5rem;
  font-size: .85rem;
  color: var(--muted);
}

.site-footer .footer-inner { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }
.site-footer nav { display: flex; gap: .9rem; flex-wrap: wrap; }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
}
.skip-link:focus {
  inset-inline-start: 1rem;
  top: .5rem;
  z-index: 50;
  padding: .5rem .8rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius);
}

@media (max-width: 560px) {
  .header-inner { gap: .5rem; }
  .search-form { order: 3; flex: 1 1 100%; }
  .search-form input { width: 100%; }
  .match-row { grid-template-columns: 48px minmax(0, 1fr); padding-inline: .7rem; gap: .5rem; }
  .match-teams { gap: .35rem; }
  .match-score { min-width: 2.2rem; font-size: .92rem; }
  .team-line .name { font-size: .85rem; }
  .scoreboard { gap: .5rem; padding-inline: .5rem; }
  .scoreboard .result .figures { font-size: 1.8rem; }
}