/* Heavy Analytics -- design tokens on the PNG card's own palette
   (scripts/generate_card.py, docs/design/README.md решение 2), not the
   provisional palette in docs/design/tokens.css (that one predates the
   sverka with the card and its contrasts are for different hex values --
   see docs/design/README.md "Внедрение" for the mapping).

   Axis colors removed: the card's radar is monochrome (one accent color
   for the whole polygon, one muted color for all five labels) -- there
   was never a five-color axis palette to source from the card, so
   --axis-* from the ChatGPT draft is dropped, not recolored.

   Font: system stack, not self-hosted Inter -- fontTools/brotli are not
   installed in this environment (checked 2026-09-13, `import fontTools`/
   `import brotli` both fail), so no woff2 subset was built. Revisit when
   both are available (backlog §9).

   WCAG contrast (sRGB relative luminance, not a claim that decorative
   surfaces meet text AA -- see the "decorative" column):

   | token            | hex      | vs bg | vs surface | vs raised | note |
   |------------------|----------|------:|-----------:|----------:|------|
   | bg               | #0A0B0F  |  1.00 |          - |         - | page (card's BG_BOTTOM) |
   | surface          | #12141B  |  1.10 |       1.00 |         - | block (card's BG_TOP) |
   | surface-raised   | #1A1D27  |  1.26 |       1.15 |      1.00 | hover; one more step of the same bg->surface gradient delta |
   | text             | #EBEDF0  | 16.77 |      15.68 |     14.34 | card COLOR_TEXT |
   | text-secondary   | #8C94A0  |  6.42 |       6.01 |      5.49 | card COLOR_MUTED |
   | text-tertiary    | #828A95  |  5.64 |       5.27 |      4.82 | one step darker than secondary, still >=4.5 on the tightest base (raised) |
   | accent           | #4ADEBE  | 11.69 |      10.93 |      9.99 | card COLOR_ACCENT |
   | accent-hover     | #6EE5CB  | 12.86 |      12.03 |     11.00 | accent mixed 20% toward white |
   | on-accent        | #0E1E1B  | 10.23 (vs accent) | - | - | card COLOR_ACCENT_DARK, text on accent fills |
   | border           | #5D6470  |  3.30 |       3.09 |      2.82 | mixed 35% from radar-outline toward text-secondary -- clears >=3:1 on bg/surface (the requirement), not on raised |
   | divider          | #282C34  |     - |          - |         - | decorative row separator, card COLOR_DIVIDER, no AA target |
   | radar-outline    | #444A56  |  2.21 |       2.07 |         - | decorative frame only (card: "carries no player data"), no AA target |
   | radar-line       | #4ADEBE  | (= accent) |     |           | |
   | radar-fill       | #4ADEBE46 (alpha 70/255) | - | - | - | decorative, card's own polygon alpha |
   | focus            | #A5D8FF  | 12.99 |      12.15 |     11.10 | from design-code.md draft, recomputed against this palette |
   | growth           | #74E2AC  | 12.38 |      11.58 |     10.58 | from design-code.md draft, recomputed |
   | decline / error  | #FF9DA8  |  9.97 |       9.32 |      8.52 | from design-code.md draft, recomputed |

   No text token is below 4.5:1 on any of the three bases. `border` is
   below 3:1 only against surface-raised, which no bordered control in
   the current markup sits on (inputs/buttons sit on bg/surface per
   design-code.md §3) -- flagged here rather than silently accepted.
*/
:root {
  color-scheme: dark;
  --bg: #0A0B0F;
  --surface: #12141B;
  --surface-raised: #1A1D27;
  --text: #EBEDF0;
  --text-secondary: #8C94A0;
  --text-tertiary: #828A95;
  --accent: #4ADEBE;
  --accent-hover: #6EE5CB;
  --on-accent: #0E1E1B;
  --badge-elite: #4ADEBE;
  --badge-bg: #12141B;
  --growth: #74E2AC;
  --decline: #FF9DA8;
  --no-data: #828A95;
  --error: #FF9DA8;
  --focus: #A5D8FF;
  --border: #5D6470;
  --divider: #282C34;
  --radar-line: #4ADEBE;
  --radar-fill: #4ADEBE46;
  --radar-outline: #444A56;
  --shadow-color: #000000;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type-rating: 6rem; /* 96px -> 144px desktop; PNG 176pt, hierarchy only */
  --type-badge: 2rem; /* 32px -> 44px; PNG 52pt (КАЛИБРУЕТСЯ) */
  --type-nick: 1.75rem; /* 28px -> 40px; PNG 48pt */
  --type-role: 1.5rem; /* 24px -> 36px; PNG 42pt */
  --type-stat: 1.25rem; /* 20px -> 24px */
  --type-body: 1rem;
  --type-small: .875rem;
  --line-body: 1.5;
  --line-heading: 1.15;
  --line-rating: 1;
  --weight-body: 400;
  --weight-strong: 700;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --radius-control: .5rem;
  --radius-block: .75rem;
  --radius-pill: 999px;
  --shadow: 0 4px 16px var(--shadow-color); /* decorative, no text */
  --border-width: 1px;
  --focus-width: 3px;
  --control-height: 2.75rem;
  --container: 72rem;
  --bp-wide: 48rem;
  --bp-table: 75rem;
}
@media (min-width: 48rem) {
  :root { --type-rating: 9rem; --type-badge: 2.75rem; --type-nick: 2.5rem; --type-role: 2.25rem; --type-stat: 1.5rem; }
}

* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:var(--type-body)/var(--line-body) var(--font); }
a { color:var(--accent); text-underline-offset:.2em; }
a:hover { color:var(--accent-hover); }
:focus-visible { outline:var(--focus-width) solid var(--focus); outline-offset:4px; }
main, header, footer { max-width:var(--container); margin:auto; padding:var(--space-4); }
header { display:flex; gap:var(--space-6); flex-wrap:wrap; }
footer { text-align:center; }
h1 { font-size:var(--type-nick); line-height:var(--line-heading); overflow-wrap:anywhere; margin:20px 0 12px; }
h2 { font-size:var(--type-stat); margin:24px 0 8px; }
p { margin:0 0 var(--space-3); line-height:var(--line-body); }
ul { line-height:var(--line-body); padding-left:20px; }
.block { background:var(--surface); padding:var(--space-4); border-radius:var(--radius-block); margin-bottom:var(--space-6); }
.hero { display:grid; gap:var(--space-6); }
.rating { font-size:var(--type-rating); font-weight:700; line-height:var(--line-rating); font-variant-numeric:tabular-nums; letter-spacing:-.04em; overflow-wrap:anywhere; }
.identity { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
.badge { font-size:var(--type-badge); line-height:1.15; font-weight:700; padding:var(--space-1) var(--space-3); border:1px solid var(--badge-elite); border-radius:var(--radius-pill); color:var(--badge-elite); background:var(--badge-bg); }
.role { font-size:var(--type-role); line-height:1.15; }
.small { font-size:var(--type-small); color:var(--text-tertiary); }
.secondary { color:var(--text-secondary); }
.up { color:var(--growth); }
.down { color:var(--decline); }
.missing { color:var(--no-data); font-size:var(--type-body); }
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin:0; align-items:start; }
/* Two independent columns (06.10.2026): rows are no longer shared, so the tall DMR
   item no longer leaves a gap under its neighbour. One column on narrow screens. */
.stats-col { display:flex; flex-direction:column; gap:var(--space-4); margin:0; min-width:0; }
@media (max-width:47.99rem) { .stats { grid-template-columns:minmax(0,1fr); } }
dt { color:var(--text-secondary); } dd { margin:0; font-size:var(--type-stat); font-variant-numeric:tabular-nums; }
figure { margin:0; min-width:0; }
.radar { display:block; width:100%; height:auto; overflow:visible; }
.radar text { font-family:var(--font); font-size:14px; fill:var(--text-secondary); }
.radar .grid { fill:none; stroke:var(--radar-outline); stroke-width:1; }
.radar .shape { fill:var(--radar-fill); stroke:var(--radar-line); stroke-width:2; }
summary { cursor:pointer; min-height:var(--control-height); padding:var(--space-3) 0; color:var(--accent); }
summary:hover { color:var(--accent-hover); text-decoration:underline; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-height); padding:var(--space-3) var(--space-4); border:1px solid var(--border); border-radius:var(--radius-control); font:700 1rem/1.25 var(--font); text-decoration:none; background:var(--surface); color:var(--text); cursor:pointer; }
.button:hover { background:var(--surface-raised); color:var(--text); }
.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.primary:hover { background:var(--accent-hover); color:var(--on-accent); }
button:disabled { background:var(--surface-raised); color:var(--text-tertiary); cursor:not-allowed; }
form { max-width:36rem; } label { display:block; font-weight:700; margin-top:var(--space-4); }
input,textarea { display:block; width:100%; min-height:var(--control-height); padding:var(--space-3); margin:var(--space-2) 0; border:1px solid var(--border); border-radius:var(--radius-control); color:var(--text); background:var(--bg); font:inherit; }
textarea { min-height:8rem; resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--text-tertiary); opacity:1; }
[aria-invalid="true"] { border:2px solid var(--error); } .error { color:var(--error); }

/* Table (.players-desktop, >=75rem) -- fixed layout + ellipsis used to
   clip full headers ("Рейтинг", "Матчей (30д)") and long nicknames
   silently (found 2026-09-13, docs/design/design-code.md §4 requires
   full headers, wrapped not truncated). No fixed layout: columns size to
   content, headers wrap onto two lines instead of cutting off. */
table { border-collapse:collapse; width:100%; font-size:13px; font-variant-numeric:tabular-nums; }
th, td { border-bottom:1px solid var(--divider); padding:5px 6px; text-align:left; }
th { position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--border); font-weight:600; color:var(--text); }
tr:nth-child(even) td { background:var(--surface); }
tr:hover td { background:var(--surface-raised); }
td.num, th.num { text-align:right; }
/* Nicknames can run long and unbroken (no spaces) -- wrap by character
   only here, where the column's own width makes that acceptable; other
   cells wrap normally (whole words) now that nowrap/ellipsis are gone. */
td.nick { overflow-wrap:anywhere; }

.spark { width:100%; max-width:24rem; height:5rem; color:var(--accent); }
.players-desktop { display:none; }
.players-mobile { list-style:none; margin:0; padding:0; }
.player-head { display:flex; justify-content:space-between; gap:var(--space-4); }
.player-head a { overflow-wrap:anywhere; min-width:0; }
.player-head strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (min-width:48rem) { main,header,footer { padding:var(--space-8); } .block { padding:var(--space-6); } .hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; } }
@media (min-width:75rem) { .players-desktop { display:table; } .players-mobile { display:none; } }

.stats dd { font-weight:var(--weight-strong); }
.player-head a { display:inline-flex; align-items:center; min-height:var(--control-height); }
/* Narrow screens: a table wider than its block scrolls inside the block
   instead of widening the page (OVR by week: min-content 347px vs 256px
   available at 320px, docs/backlog.md §9 п.3). */
@media (max-width:47.99rem) { .block > table { display:block; max-width:100%; overflow-x:auto; } }