/* Spider plots on the İstatistikler page. Loaded after panels.css, whose
   theme variables (--surface-raised, --line, --ink, --muted,
   --statistics-plot-line) these rules use, so they follow light and dark mode. */

/* Two plots side by side whenever the profile panel itself has room; the
   panel's own width decides, not the window's, because the player list beside
   it takes a different share at every breakpoint. Below 740px each chart would
   render under ~330px and its labels under 9px, so they stack. */
.statistics-profile-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 16px; align-items: start; }
@container (max-width: 740px) { .statistics-profile-top { grid-template-columns: minmax(0, 1fr); } }

.statistics-radar, .statistics-radar-detailed { min-width: 0; border: 1px solid var(--line); border-top: 2px solid #2f9e4f; border-radius: 8px; padding: 12px; background: var(--surface-raised); }
/* The sketch green is too deep to read against a dark panel. */
:root[data-theme="dark"] .statistics-radar, :root[data-theme="dark"] .statistics-radar-detailed { border-top-color: #4ecb7b; }
.statistics-radar .builder-rating-note, .statistics-radar-detailed .builder-rating-note { padding: 8px 0 0; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.statistics-chart svg [tabindex]:focus-visible { outline: 2px solid var(--statistics-plot-line); }
.statistics-radar-empty { margin: 8px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-soft); color: var(--ink); font-size: 12px; line-height: 1.5; }
.statistics-radar-empty p { margin: 6px 0 0; color: var(--muted); }

/* The raw values and calculation details beneath each plot. */
.statistics-metric-details { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 11px; }
.statistics-metric-details summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.statistics-metric-scroll { overflow-x: auto; margin-top: 10px; max-height: 420px; }
.statistics-metric-table { width: 100%; min-width: 500px; font-size: 11px; border-collapse: collapse; }
.statistics-metric-table th, .statistics-metric-table td { padding: 8px 6px; vertical-align: top; border-bottom: 1px solid var(--line); white-space: normal; }
.statistics-metric-table th { text-align: left; }
.statistics-metric-table thead th { position: sticky; top: 0; background: var(--surface-raised); }
.statistics-metric-table small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 400; }