/* 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.
 */

:root {
  color-scheme: light dark;

  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --text: #11161d;
  --muted: #5b6676;
  --faint: #8a94a3;

  --accent: #0b6e4f;
  --accent-ink: #ffffff;
  --accent-soft: #e6f3ee;
  --live: #d6202f;
  --live-soft: #fdeaec;
  --win: #0b6e4f;
  --draw: #8a94a3;
  --loss: #d6202f;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1116;
    --surface: #161b22;
    --surface-2: #1c222b;
    --border: #2a313c;
    --text: #e8edf4;
    --muted: #9aa6b5;
    --faint: #6d7988;

    --accent: #2ea37a;
    --accent-ink: #06130e;
    --accent-soft: #14271f;
    --live: #ff5c6b;
    --live-soft: #2a1619;
    --win: #2ea37a;
    --loss: #ff5c6b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

* { 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);
}

/* ---------- 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) auto;
  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); }

.match-teams { display: grid; gap: .3rem; min-width: 0; }

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

.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; }
.shootout {
  margin-top: .1rem;
  color: var(--faint);
  font-size: .72rem;
  font-weight: 700;
  unicode-bidi: isolate;
}

.match-score {
  display: grid;
  gap: .3rem;
  justify-items: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .95rem;
  min-width: 20px;
}

.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); }

.timeline { display: grid; gap: .1rem; }

.timeline-item {
  display: grid;
  /* The trailing column holds the running score; it collapses to nothing on
     the rows that are not goals. */
  grid-template-columns: 46px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-block-end: 1px solid var(--border);
  font-size: .9rem;
}

.timeline-item:last-child { border-block-end: 0; }
.timeline-item.away { background: var(--surface-2); }
.timeline-item .minute { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .82rem; direction: ltr; unicode-bidi: isolate; }
.timeline-item .icon { font-size: 1rem; text-align: center; }
.timeline-item .assist { color: var(--faint); font-size: .8rem; }

.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. */
.timeline-break {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  background: var(--surface-2);
  border-block: 1px solid var(--border);
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
}
.timeline-break .score { order: 10; color: var(--text); }
.timeline-break::after { content: ""; flex: 1; height: 1px; background: var(--border); order: 9; }

.timeline-item.is-goal { font-weight: 600; }
.timeline-item .run-score {
  font-weight: 800;
  color: var(--accent);
}
.timeline-item .sub-in { color: var(--accent); }
.timeline-item .sub-out { color: var(--muted); }
.timeline-item .sub-in, .timeline-item .sub-out { display: inline-block; margin-inline-end: .5rem; }

.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) auto; padding-inline: .7rem; gap: .5rem; }
  .scoreboard { gap: .5rem; padding-inline: .5rem; }
  .scoreboard .result .figures { font-size: 1.8rem; }
}