/* The public pages (round tips, guides, matches, players, clubs, the 404 page): src/seo/pages.ts and guides.ts. Dark
   only, in the app's look. The app's own stylesheet comes first on every built page (generate.ts links it), so the
   app's components on these pages (src/seo/kit.tsx: player cells, cards, win bars, tinted cells, the court, its
   tables) look as they do in the app; this file lays the pages out around them. The tokens here are copies of
   src/web/styles/tokens.css (tests/seo.test.ts checks they are the same), for what this file draws itself; the
   typeface comes from /fonts.css, which the build writes from the app's own font files. */
:root {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #232321;
  --surface-3: #2c2c2a;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.06);
  --text: #ffffff;
  --text-2: #c3c2b7;
  --muted: #918f89;
  --accent: #22d3ee;
  --series: #0ea5b8;
  --r-s: 7px;
  --r-m: 10px;
  --r-l: 14px;
  --font: "Sofia Sans Variable", "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-c: "Sofia Sans Condensed Variable", "Sofia Sans Condensed", "Sofia Sans Variable", "Sofia Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}
/* The header's height, for a table's headings that stay in view below it (it scrolls away on a phone). Not a token. */
:root { --topbar-h: 61px; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--page); }
/* Links are text coloured: a soft underline says "link", full on hover. */
a { color: var(--text); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:where(a, button, summary, input, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

/* The header, as the app's: the logo and name, then the way around. */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;
  flex-wrap: wrap; min-height: 60px; padding: 8px 24px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; font: 700 16px / 1 var(--font); letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.top nav { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; font: 600 14px / 1 var(--font); }
.top nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-2); text-decoration: none; }
.top nav a:not(.btn):hover { color: var(--text); }

main { max-width: 960px; margin: 0 auto; padding: 28px 24px 56px; }
/* Headings in the app's broadcast cut (styles/head.css, layout.css): the title in heavy condensed capitals, a section
   behind the accent's slanted dash. The dash is inline, not a flex gap, because a heading can hold a link and text. */
main h1 { margin: 8px 0 12px; font: 900 clamp(30px, 6.4vw, 40px) / 0.95 var(--font-c); letter-spacing: -0.005em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
main h2 { margin: 40px 0 12px; font: 900 22px / 1.1 var(--font-c); letter-spacing: 0.02em; text-transform: uppercase; text-wrap: balance; }
main h2::before { content: ""; display: inline-block; width: 16px; height: 5px; margin: 0 10px 0 2px; vertical-align: 0.22em; background: var(--accent); transform: skewX(-24deg); }
main h3 { margin: 24px 0 8px; font: 800 17px / 1.25 var(--font-c); }
main > p, main > section > p, .glance p { margin: 0 0 12px; }
.lead { max-width: 62ch; font: 500 18px / 1.45 var(--font); color: var(--text-2); text-wrap: pretty; }
.meta, .note { font-size: 13px; line-height: 1.45; color: var(--muted); }
/* Where the page is: small capitals, as the app's labels. */
.crumbs { margin-bottom: 4px; font: 700 11px / 1.4 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text-2); }

/* Buttons: one white one in view at a time (into the planner), the rest quiet. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 11px;
  background: var(--surface-2); font: 800 14px / 1 var(--font); color: var(--text); text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn-primary { background: var(--text); color: var(--page); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--text) 45%, transparent); }
.btn-primary:hover { background: var(--text-2); }
/* A few players straight into the reader's team: a quiet button under the cards that name them. */
.adds { margin: 12px 0 4px; }

/* Time left to the next deadline (filled in the reader's browser). */
.countdown { display: block; margin-bottom: 2px; font-weight: 700; color: var(--text); }

/* The way into the app, at the end of a page: a reason made from the page's own numbers, two buttons, then the time
   left and what a free account adds. */
.cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 32px 0 20px; padding: 18px; border-radius: var(--r-l); background: var(--surface); }
.cta h2 { margin: 0 0 4px; font-size: 18px; }
.cta p { max-width: 60ch; margin: 0; font-size: 15px; color: var(--text-2); text-wrap: pretty; }
.cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cta .cta-foot { display: grid; gap: 4px; flex-basis: 100%; max-width: none; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--muted); }
.cta-cd { font-weight: 700; color: var(--text); }
/* Sentences that lead on (the players, clubs and guides a page talks about), and the step into the app earlier on a
   page: text a reader follows, so the names in it stand out and the rest stays quiet. */
.more, .step, .why-text { max-width: 68ch; margin: 14px 0; color: var(--text-2); text-wrap: pretty; }
.more a, .step a, .cta p a, .why a, .why-text a, .yours a, .glance a { font-weight: 600; color: var(--text); }
.more a:not([data-app]), .cta p a:not([data-app]), .why a, .why-text a { text-decoration: none; }
.more a:not([data-app]):hover, .cta p a:not([data-app]):hover, .why a:hover, .why-text a:hover { text-decoration: underline; }
/* Why the cards above it are there: a sentence each. */
.why { display: grid; gap: 6px; max-width: 72ch; margin: 12px 0; padding-left: 20px; color: var(--text-2); }
/* How close the reader's team was: one line with the way to keep it. */
.yours { margin: 14px 0; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface); color: var(--text-2); }
/* A statistic's abbreviation: its full name is behind it. */
abbr[title] { text-decoration: none; cursor: help; }

/* The app's pieces on a page: room around them. */
main :is(.ui-stars, .ui-lineup, .ui-wf, .ui-stats, .ui-strips, .ui-qas, .matches, .chart, .ui-table-wrap) { margin: 12px 0 16px; }
main .ui-table-wrap { display: block; }
/* A table's links and its "+" into the planner. */
.ui-table td a { font-weight: 600; text-decoration: none; }
.ui-table td a:hover { text-decoration: underline; }
.ui-table td .ui-pc-s a { font-weight: 500; color: inherit; }
.add { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-s); background: var(--surface-2); color: var(--text-2); }
.add:hover { background: var(--surface-3); color: var(--text); }
/* A club with its crest, a flag with its icon, a club's last results. */
.club, .flag, .marks { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.marks { gap: 3px; }
/* A card's small line: his club and his match, each a link, centred under his name. Side by side on a card wide
   enough for the longest pair (160px; a longer one wraps), one over the other on a narrower card, so the cards of a
   row stay alike. */
.ui-stars > li { container: star / inline-size; }
.ui-stars .ui-star-t small { flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.ui-stars .ui-star-t small a { color: inherit; }
.ui-stars .ui-star-t small .club { gap: 4px; }
@container star (max-width: 159px) {
  .ui-stars .ui-star-t small { flex-direction: column; }
}

/* The usual range on a scale shared down the table: the range a bar, the projection a mark on it. */
.range-cell { display: inline-flex; align-items: center; gap: 8px; }
.range { position: relative; display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--surface-3); }
.range i { position: absolute; top: 0; height: 100%; border-radius: 3px; background: var(--series); }
.range b { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--text); }

/* The round's matches, a day at a time: a line each, both clubs and the tip-off (or score) over each side's chance. */
main h3.day { margin: 18px 0 6px; font: 700 13px / 1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.matches { display: grid; gap: 4px; padding: 0; list-style: none; }
.match { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--r-l); background: var(--surface); }
.match-h { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 600; }
.match-h .match-team:last-child { justify-content: flex-end; text-align: right; }
.match-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.match-team a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.match-at { font: 600 13px / 1.2 var(--font); color: var(--text-2); text-align: center; text-decoration: none; }
.match-at:hover { color: var(--text); text-decoration: underline; }

/* A match's page: both clubs with their crests, places and last results, the tip-off or score between them. */
.matchup { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 16px 0 8px; padding: 16px; border-radius: var(--r-l); background: var(--surface); text-align: center; }
.matchup .side { display: grid; justify-items: center; gap: 6px; min-width: 0; font-weight: 700; }
.matchup .side a { text-decoration: none; }
.matchup .side small { font-size: 13px; font-weight: 600; color: var(--muted); }
.matchup .vs b { font: 900 28px / 1 var(--font-c); }
.matchup .vs small { font-size: 13px; color: var(--text-2); }
.matchup-bar { margin: 0 0 12px; }

/* A player's head, as his sheet in the app: the photo in his position's ring, his name, his club and flag. */
.who { display: flex; align-items: center; gap: 14px; margin: 8px 0 16px; }
.who h1 { margin: 0 0 6px; font-size: clamp(28px, 6vw, 38px); }
.who p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--text-2); }
.who p a { font-weight: 600; text-decoration: none; }
/* A club's head: its crest beside its name. */
.club-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; }
.club-head h1 { margin: 0; }

/* Charts drawn at build time: a legend over the plot, the plot as wide as its box. */
.chart { display: grid; gap: 8px; margin: 12px 0; }
.chart .ui-chart svg { width: 100%; height: auto; }

/* The players' list: a name to search, a position, a club and a price; headings that sort. */
.filters { position: sticky; top: var(--topbar-h); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0; padding: 10px 0; background: var(--page); }
.filters label { display: flex; }
.filters input, .filters select { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); font: 500 14px / 1 var(--font); color: var(--text); }
.filters .filter-q { flex: 1 1 200px; }
.filters .filter-q input { width: 100%; }
.filter-n { font-size: 13px; color: var(--muted); }
section[data-pos] th > button { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
section[data-pos] th[aria-sort] > button { color: var(--text); }

/* Facts about one match: a label over its number. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 16px 0; }
.facts div { padding: 12px; border-radius: var(--r-l); background: var(--surface); }
.facts dt { font: 700 11px / 1.2 var(--font); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 6px 0 0; font: 800 17px / 1.2 var(--font-c); font-variant-numeric: tabular-nums; }
.plain { margin: 8px 0 14px; padding: 0; list-style: none; }
.plain li { padding: 8px 0; border-bottom: 1px solid var(--line-2); color: var(--text-2); }
.plain li:last-child { border-bottom: 0; }
.plain li a { font-weight: 600; text-decoration: none; }
.links { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 15px; }
/* The newest round's guides: the way from one to the others (the page this is on is named, not linked). */
.guides { margin: 16px 0; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface); font-size: 14px; font-weight: 600; }
.guides a { color: var(--text-2); text-decoration: none; }
.guides a:hover { color: var(--text); }
.guides [aria-current] { color: var(--text); }
/* A game's score beside its heading. */
h1 .score { margin-left: 4px; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* The round in a few sentences. */
.glance { margin: 20px 0; padding: 16px 18px; border-radius: var(--r-l); background: var(--surface); }
.glance h2 { margin: 0 0 8px; font-size: 18px; }
.glance ul { margin: 0; padding-left: 20px; color: var(--text-2); }
.glance li + li { margin-top: 6px; }
.glance a { text-decoration: none; }
.glance strong { color: var(--text); }

footer { max-width: 960px; margin: 0 auto; padding: 16px 24px 40px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }
footer p { margin: 0 0 6px; }
footer a { color: var(--text-2); }
footer a:hover { color: var(--text); }

/* The bar at the foot of a phone's screen: the time left and the white button into the reader's team. It comes in once
   the page's top is behind, and goes while the box at the page's end is in view (the page's script). */
.dock {
  position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
  transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.dock.is-on { transform: none; visibility: visible; transition: transform 0.2s ease; }
.dock-t { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.25; color: var(--text-2); }
.dock-t b { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 721px) { .dock { display: none; } }

@media (max-width: 720px) {
  /* Room for the bar at the foot of the screen. */
  body { padding-bottom: 72px; }
}
@media (max-width: 600px) {
  /* The header scrolls away with the page: on a phone its links take two rows. */
  :root { --topbar-h: 0px; }
  .top { position: static; padding: 8px 16px; }
  .top nav { gap: 2px 14px; font-size: 13px; }
  .top .btn { min-height: 36px; padding: 0 12px; }
  main { padding: 20px 16px 48px; }
  footer { padding: 16px 16px 40px; }
  /* Text fields at 16px: smaller makes iPhones zoom in. */
  .filters input, .filters select { font-size: 16px; }
  .match-team .ui-crest { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
/* The two fantasy games at the top of a game's page (parts.ts gameChips): the app's own chips (home.css). */
main .page-games { max-width: 520px; margin: 0 0 20px; }
@media (max-width: 400px) {
  .page-games .ui-arena-game { gap: 8px; padding: 8px 10px; }
  .page-games .ui-gmark.is-lg { min-width: 36px; height: 28px; padding: 0 8px; font-size: 13px; }
  .page-games .ui-arena-game > svg { display: none; }
}