/*
 * Styling for the prerendered, JavaScript-free version of a page.
 *
 * Everything is scoped under `.pr`, which lives inside #app. The app clears
 * #app on mount, so none of this survives into the running SPA -- it exists
 * for crawlers, for the split second before the bundle boots, and for anyone
 * with JavaScript off.
 *
 * A separate file rather than inline <style> because the CSP is
 * `style-src 'self'` with no unsafe-inline, and that restriction is worth
 * more than the extra request.
 */
.pr {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.55;
  color: #e8eaed;
  background: #0c0e11;
}
.pr a { color: #7cc4ff; }
.pr h1 { font-size: 28px; line-height: 1.2; margin: 0 0 6px; }
.pr h2 { font-size: 18px; margin: 32px 0 8px; }
.pr .sub { color: #9aa3ad; margin: 0 0 20px; }
.pr .lead { font-size: 16px; }
.pr table { border-collapse: collapse; width: 100%; font-size: 13px; }
.pr th, .pr td { padding: 6px 8px; text-align: right; border-bottom: 1px solid #232830; }
.pr th:first-child, .pr td:first-child,
.pr th:nth-child(2), .pr td:nth-child(2) { text-align: left; }
.pr thead th { color: #9aa3ad; font-weight: 600; }
.pr .wrap { overflow-x: auto; }
.pr .crumbs { font-size: 13px; color: #9aa3ad; margin-bottom: 16px; }
.pr .note { color: #9aa3ad; font-size: 13px; margin-top: 28px; }
.pr ul.roster { list-style: none; padding: 0; columns: 3; }
.pr ul.roster li { margin-bottom: 4px; break-inside: avoid; }

@media (prefers-color-scheme: light) {
  .pr { color: #1b1f24; background: #fff; }
  .pr a { color: #0b62c4; }
  .pr .sub, .pr thead th, .pr .crumbs, .pr .note { color: #5b636c; }
  .pr th, .pr td { border-bottom: 1px solid #e4e7ea; }
}

/* Player photograph on a prerendered page. The caption is the licence
   attribution, so it is styled to be readable, not hidden. */
.pr .pr-photo { margin: 0 0 20px; max-width: 240px; }
.pr .pr-photo img {
  width: 100%; height: auto; border-radius: 10px; display: block;
  border: 1px solid #232830;
}
.pr .pr-photo figcaption { font-size: 11px; color: #9aa3ad; margin-top: 5px; }
@media (prefers-color-scheme: light) {
  .pr .pr-photo img { border-color: #e4e7ea; }
  .pr .pr-photo figcaption { color: #5b636c; }
}