/* Takım Analizi on the Takım İstatistikleri page. Loaded after panels.css,
   whose theme variables (--surface, --surface-raised, --surface-soft, --line,
   --ink, --muted, --statistics-plot-line) these rules use. Every colour defined
   here has a dark-theme value below. */
:root {
  --ta-W: var(--result-win); --ta-D: var(--result-draw); --ta-L: var(--result-loss);
  --ta-kl: #7d5bd0; --ta-def: #2f7fc1; --ta-os: #2a9a66; --ta-for: #d45a2c;
  --ta-over: #5c71bb; --ta-under: #c9822a;
  --ta-shade: rgba(40, 30, 60, 0.06);
  /* Tabs: the open one in the panel purple, the rest a faded wash of it.
     White on #8b5ad3 is 4.7:1. */
  --ta-tab: #7a4fc4; --ta-tab-ink: #ffffff;
}
:root[data-theme="dark"] {
  --ta-W: var(--result-win); --ta-D: var(--result-draw); --ta-L: var(--result-loss);
  --ta-kl: #b49cff; --ta-def: #72b4ff; --ta-os: #5fd6a0; --ta-for: #ff8a5c;
  --ta-over: #9c8bf0; --ta-under: #f0aa55;
  --ta-shade: rgba(0, 0, 0, 0.28);
  --ta-tab: var(--panel-rule, #8b5ad3); --ta-tab-ink: #ffffff;
}

/* The section is its own size container: from 761px to 1100px the sidebar
   keeps 256px of the window, so the window's width says little about the
   room the charts actually have. */
.team-analysis { margin-top: 20px; border: 1px solid var(--line); border-top: 3px solid #b0a8dd; border-radius: 10px; background: var(--surface); color: var(--ink); overflow: hidden; container: team-analysis / inline-size; }
:root[data-theme="dark"] .team-analysis { border-top-color: #c9c4e6; }
.team-analysis .builder-pool-heading { padding: 14px 16px 8px; }
.team-analysis h3 { font-size: 16px; }
.team-analysis > .builder-rating-note { padding: 0 16px 10px; margin: 0; color: var(--muted); }
#team-statistics-workspace > .team-analysis { margin: 0 0 24px; }
/* Chrome's tabs, stood on end. The chart fills its cell like a browser page,
   with a purple edge on the left; the open tab is the same purple, joins that
   edge, and flares into it through two concave corners, as Chrome's open tab
   flares into the toolbar. The other tabs are faded purple pills set back
   from the edge. The tabs stretch to the chart's height, so no empty strip is
   left below them. */
.team-analysis-layout { display: grid; grid-template-columns: minmax(190px, 220px) minmax(0, 1fr); }
.team-analysis-tabs { display: flex; flex-direction: column; gap: 4px; padding: 12px 0 12px 10px; }
.team-analysis-tab { position: relative; flex: 1 0 auto; min-height: 40px; margin-right: 8px; border: 0; border-radius: 8px; padding: 6px 12px;
  background: color-mix(in srgb, var(--ta-tab) 16%, transparent); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left;
  transition: background-color 120ms ease, color 120ms ease; }
.team-analysis-tab:hover { background: color-mix(in srgb, var(--ta-tab) 30%, transparent); color: var(--ink); }
/* One weight for every tab, as in Chrome: a bolder open tab would wrap its
   label differently, change the tab's height and move the page. */
.team-analysis-tab[aria-selected="true"] { z-index: 1; margin-right: 0; border-radius: 10px 0 0 10px; background: var(--ta-tab); color: var(--ta-tab-ink); }
/* The flares: an 8px square above and below the open tab's page end, purple
   except for a quarter circle, so the tab's edge curves into the page edge. */
.team-analysis-tab[aria-selected="true"]::before, .team-analysis-tab[aria-selected="true"]::after {
  content: ""; position: absolute; right: 0; width: 8px; height: 8px; pointer-events: none; }
.team-analysis-tab[aria-selected="true"]::before { bottom: 100%; background: radial-gradient(circle at 0 0, transparent 7.5px, var(--ta-tab) 8px); }
.team-analysis-tab[aria-selected="true"]::after { top: 100%; background: radial-gradient(circle at 0 100%, transparent 7.5px, var(--ta-tab) 8px); }
.team-analysis-tab:focus-visible { outline-offset: -4px; }
/* All panels share one grid cell - and inside the comparisons, all ten cards
   share one too - so the cell is always as tall as the tallest chart at the
   current width. Only the open one (.ta-open, set by team-charts-page.js) is
   visible; the rest keep their space but are neither seen, read out nor
   focusable. Changing tabs therefore never changes the section's height. */
.team-analysis-content { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; border-left: 4px solid var(--ta-tab); background: var(--surface-raised); }
.team-analysis-content > .ta-block, .team-analysis-content .ta-compare-card { grid-area: 1 / 1; }
.team-analysis-content :is(.ta-block, .ta-compare-card):not(.ta-open) { visibility: hidden; }
/* The section's id, to win over the dark theme's card rule for every
   .ta-block (three classes, loaded later): the chart is the page itself, not
   a card inside it. */
#team-analysis .team-analysis-content > .ta-block { margin: 0; border: 0; border-radius: 0; padding: 18px 20px; background: transparent; }
.team-analysis-content .ta-chart > svg { width: 100%; }
.team-analysis-content .ta-compare-grid { grid-template-columns: minmax(0, 1fr); }
.team-analysis-content .ta-compare-card { border: 0; padding: 0; background: transparent; }
.team-analysis-content .ta-compare-card svg { width: 100%; max-width: 900px; margin-inline: auto; }
/* Below 800px the tab rail would squeeze the 640-unit charts to unreadable
   text, so the tabs move above the chart. They wrap into rows rather than
   scroll, so none is hidden; any row can hold the open tab, so there it is a
   solid purple pill and the flares are left out. */
@container team-analysis (max-width: 800px) {
  .team-analysis-layout { grid-template-columns: minmax(0, 1fr); }
  .team-analysis-tabs { flex-direction: row; flex-wrap: wrap; padding: 10px 12px; }
  .team-analysis-tab { flex: 1 1 150px; margin: 0; }
  .team-analysis-tab[aria-selected="true"] { border-radius: 8px; }
  .team-analysis-tab[aria-selected="true"]::before, .team-analysis-tab[aria-selected="true"]::after { content: none; }
  .team-analysis-content { border-left: 0; border-top: 4px solid var(--ta-tab); }
  #team-analysis .team-analysis-content > .ta-block { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .team-analysis-tab { transition: none; } }
/* On phones the bar charts and scatters keep a legible size and scroll
   sideways instead of shrinking their labels to a few pixels. */
@container team-analysis (max-width: 600px) {
  .team-analysis-content .ta-chart > svg { min-width: 540px; }
}
.ta-block { margin: 0 16px 16px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface-raised); min-width: 0; }
.ta-block h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .3px; }
.ta-block .builder-rating-note { margin: 8px 0 0; padding: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
/* Spaced from above, like Sezon İstatistikleri before them, so every block in
   Takım Profili sits 16px from the next; the last keeps 16px to the edge. */
.ta-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 16px 0; }
.ta-pair:last-child { margin-bottom: 16px; }
.ta-pair > .ta-block { margin: 0; }
@media (max-width: 1100px) { .ta-pair { grid-template-columns: minmax(0, 1fr); } }
.ta-chart { min-width: 0; overflow-x: auto; }
.ta-chart > svg { display: block; max-width: 900px; margin-inline: auto; }

/* Small multiples: one panel per team, as many per row as fit. Inside Takım
   Profili the same grid holds a single panel - the open team - which is not a
   link to itself, so it is drawn plain and kept to a readable width. */
.ta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ta-solo { grid-template-columns: minmax(0, 1fr); }
.ta-solo .ta-panel { max-width: 460px; margin-inline: auto; width: 100%; }
.ta-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 6px 2px; background: var(--surface); cursor: pointer; }
.ta-panel:hover { border-color: var(--muted); }
.ta-panel-static, .ta-panel-static:hover { cursor: default; border-color: var(--line); }
.ta-panel:focus-visible { outline: 2px solid var(--statistics-plot-line); outline-offset: 1px; }
.ta-panel.ta-selected { border-color: var(--statistics-plot-line); box-shadow: 0 0 0 1px var(--statistics-plot-line); }
.ta-panel-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 0 2px 2px; font-size: 12px; font-weight: 600; }
.ta-panel-heading span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-panel-heading small { flex: none; color: var(--muted); font-size: 10px; font-weight: 400; }
.ta-panel svg { display: block; }
.ta-link { cursor: pointer; }
.ta-link:hover { text-decoration: underline; }

/* The comparison scatters: two per row where they fit, one below that. */
.ta-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 1100px) { .ta-compare-grid { grid-template-columns: minmax(0, 1fr); } }
.ta-compare-card { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--surface); }
.ta-compare-card figcaption { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--ink); }
.ta-compare-card svg { display: block; max-width: 100%; }
.ta-compare-card .builder-rating-note { margin: 6px 0 0; }
#ta-compare-note { margin: 0; }

.ta-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.ta-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ta-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ta-legend i.ta-square { border-radius: 2px; }