/* Socostars — the server-rendered reference pages.
   Deliberately the legal pages' sibling rather than a second design system: same document shell, same
   palette, same card. These pages exist to be read quickly and indexed cleanly, so the stylesheet is
   small, ships no fonts that have to be fetched, and lays out correctly with JavaScript disabled —
   which is how a crawler and a reader with a slow connection both see it. */

:root {
  --seo-bg: #f5f6f9;
  --seo-surface: #ffffff;
  --seo-muted-surface: #eef1f6;
  --seo-line: #dfe4ec;
  --seo-text: #1b2434;
  --seo-muted: #667184;
  --seo-accent: #b8562a;
  --seo-accent-soft: #fbeee7;
  --seo-good: #1c7a4b;
  --seo-good-soft: #e6f4ec;
  --seo-bad: #8c2b20;
  --seo-bad-soft: #fdecea;
  --seo-warn: #8a6100;
  --seo-warn-soft: #fdf4dd;
}

@media (prefers-color-scheme: dark) {
  :root {
    --seo-bg: #0b1424;
    --seo-surface: #101a2d;
    --seo-muted-surface: #131f36;
    --seo-line: #263651;
    --seo-text: #e7ecf5;
    --seo-muted: #93a1ba;
    --seo-accent: #e0805a;
    --seo-accent-soft: #24170f;
    --seo-good: #6fd39c;
    --seo-good-soft: #10281c;
    --seo-bad: #f0b4ab;
    --seo-bad-soft: #2a1417;
    --seo-warn: #e6c069;
    --seo-warn-soft: #2a2210;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; }
body.seo-page {
  background: var(--seo-bg);
  color: var(--seo-text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--seo-accent); }
a:hover { text-decoration: none; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--seo-surface); padding: 8px 12px; border-radius: 8px; z-index: 10; }

/* ---- Shell ------------------------------------------------------------------------------------ */

.seo-header {
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--seo-surface); border-bottom: 1px solid var(--seo-line);
}
.seo-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.seo-mark { width: 30px; height: 30px; flex: none; }
.seo-mark svg { width: 100%; height: 100%; }
.seo-orbit { fill: none; stroke: var(--seo-accent); stroke-width: 3; opacity: .35; }
.seo-star { fill: var(--seo-accent); }
.seo-brand strong { display: block; font-size: 15px; letter-spacing: .01em; }
.seo-brand span span { display: block; font-size: 11px; color: var(--seo-muted); }
.seo-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.seo-nav a { color: var(--seo-muted); text-decoration: none; }
.seo-nav a:hover { color: var(--seo-accent); }

.seo-main { max-width: 1080px; margin: 0 auto; padding: 26px clamp(16px, 4vw, 40px) 60px; }

.seo-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 12px; color: var(--seo-muted); }
.seo-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--seo-line); }
.seo-crumbs a { color: var(--seo-muted); text-decoration: none; }
.seo-crumbs a:hover { color: var(--seo-accent); }

h1 { font-size: clamp(24px, 4vw, 34px); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; }
h2 { font-size: clamp(17px, 2.2vw, 21px); margin: 0 0 6px; }
h3 { font-size: 15px; margin: 0 0 6px; }
.seo-sub { margin: 0 0 14px; color: var(--seo-muted); font-size: 13.5px; }
.seo-intro { margin: 0 0 22px; max-width: 74ch; color: var(--seo-text); opacity: .88; font-size: 15px; }
.seo-note { color: var(--seo-muted); font-size: 13px; margin: 10px 0 0; max-width: 78ch; }
.seo-lede { color: var(--seo-muted); font-size: 13px; margin: 0 0 12px; max-width: 78ch; }

.seo-section { background: var(--seo-surface); border: 1px solid var(--seo-line); border-radius: 14px; padding: 18px clamp(14px, 2.4vw, 22px); margin: 0 0 18px; }
.seo-section:last-of-type { margin-bottom: 0; }

/* ---- Recorded figures ------------------------------------------------------------------------- */

.seo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.seo-stat { background: var(--seo-muted-surface); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.seo-stat dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--seo-muted); }
.seo-stat dd { margin: 3px 0 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.seo-stat dd small { display: block; font-size: 11px; font-weight: 400; color: var(--seo-muted); }

.seo-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.seo-split > div { background: var(--seo-muted-surface); border-radius: 10px; padding: 12px 14px; }
.seo-split p { margin: 0; font-size: 13.5px; color: var(--seo-muted); }
.seo-split h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--seo-muted); }

/* ---- Tables ----------------------------------------------------------------------------------- */

.seo-table-wrap { overflow-x: auto; margin: 0 -4px; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.seo-table th, .seo-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--seo-line); vertical-align: top; }
.seo-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--seo-muted); border-bottom-width: 2px; }
.seo-table tbody tr:last-child td, .seo-table tbody tr:last-child th { border-bottom: 0; }
.seo-table td small, .seo-table th small { display: block; color: var(--seo-muted); font-size: 11px; }
.seo-table.seo-compare th[scope="row"] { font-weight: 500; color: var(--seo-muted); }
.seo-compare td { font-variant-numeric: tabular-nums; }

.seo-form { display: inline-block; min-width: 20px; text-align: center; padding: 1px 5px; border-radius: 5px; font-size: 11px; font-weight: 700; }
.seo-form-w { background: var(--seo-good-soft); color: var(--seo-good); }
.seo-form-d { background: var(--seo-warn-soft); color: var(--seo-warn); }
.seo-form-l { background: var(--seo-bad-soft); color: var(--seo-bad); }

/* ---- Lists ------------------------------------------------------------------------------------ */

.seo-link-list { list-style: none; margin: 0; padding: 0; }
.seo-link-list li { padding: 6px 0; border-bottom: 1px solid var(--seo-line); font-size: 13.5px; }
.seo-link-list li:last-child { border-bottom: 0; }
.seo-link-list small { color: var(--seo-muted); font-size: 11.5px; }
.seo-link-columns { columns: 3 220px; column-gap: 20px; }
.seo-link-columns li { break-inside: avoid; }

.seo-squad-group { margin-bottom: 14px; }
.seo-squad-group:last-child { margin-bottom: 0; }
.seo-squad-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--seo-muted); }
.seo-player-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 16px; margin: 0; padding: 0; }
.seo-player-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--seo-line); font-size: 13.5px; }
.seo-player-list small { flex-basis: 100%; color: var(--seo-muted); font-size: 11.5px; }
.seo-shirt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--seo-muted); font-size: 11.5px; }

.seo-mini { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.seo-mini li { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--seo-line); }
.seo-mini li:last-child { border-bottom: 0; }
.seo-mini strong { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---- Actions ---------------------------------------------------------------------------------- */

.seo-actions { margin: 22px 0 0; }
.seo-button {
  display: inline-block; background: var(--seo-accent); color: #fff; text-decoration: none;
  padding: 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
}
.seo-button:hover { filter: brightness(1.06); }
@media (prefers-color-scheme: dark) { .seo-button { color: #1b1207; } }

/* ---- Footer ----------------------------------------------------------------------------------- */

.seo-footer { border-top: 1px solid var(--seo-line); background: var(--seo-surface); padding: 20px clamp(16px, 4vw, 40px) 34px; }
.seo-footer p { margin: 0 0 10px; max-width: 100ch; font-size: 11.5px; color: var(--seo-muted); }
.seo-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; }
.seo-footer a { color: var(--seo-muted); }

@media (max-width: 640px) {
  .seo-main { padding-top: 18px; }
  .seo-link-columns { columns: 1; }
  .seo-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}