/* ==========================================================================
   Ajan F2 — takım karakteri (takım sayfası, genel bakış; önek ts-). Yalnızca tasarım değişkenleri; iki tema değişkenlerden;
   mantıksal özellikler; 360 px → masaüstü.
   ========================================================================== */

.ts-card { display: flex; flex-direction: column; gap: var(--space-5); }
.ts-identity { display: flex; flex-direction: column; gap: var(--space-2); }
.ts-arch {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding-inline: 12px 14px;
  border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  background: var(--primary-soft); color: var(--primary-text);
}
.ts-arch .icon { width: 15px; height: 15px; }
.ts-arch--counter, .ts-arch--lowBlock { background: var(--accent-soft); color: var(--accent); }
.ts-arch--direct { background: var(--warning-soft); color: var(--warning-text); }
.ts-arch--balanced, .ts-arch--sterile { background: var(--surface2); color: var(--text); }
.ts-traits { margin: 0; font-size: var(--fs-md); color: var(--text-secondary); max-width: 70ch; }

.ts-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .ts-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

/* Radar */
.ts-chart { margin: 0; min-width: 0; }
.ts-radar { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; overflow: visible; }
.ts-ring { fill: none; stroke: var(--grid, var(--border)); stroke-width: 1; }
.ts-ring--mid { stroke: var(--border-strong); stroke-dasharray: 4 3; }
.ts-spoke { stroke: var(--grid, var(--border)); stroke-width: 1; }
.ts-ringlabel { fill: var(--muted); font-size: 10px; font-family: var(--font-body); }
.ts-poly { stroke-width: 2.2; stroke-linejoin: round; }
.ts-poly--main { fill: var(--volt-700); fill-opacity: 0.18; stroke: var(--primary-text); }
.ts-poly--cmp { display: none; fill: var(--accent); fill-opacity: 0.12; stroke: var(--accent); stroke-dasharray: 6 4; }
.ts-poly--cmp.is-on { display: inline; }
.ts-vertex { fill: var(--primary-text); stroke: var(--surface); stroke-width: 2; }
.ts-vertex--na { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; }
/* SVG birimiyle (görünüm kutusu 560 px; sütunda ~%75 ölçeklenir): ekranda ~12–13 px */
.ts-axis { fill: var(--text-secondary); font-size: 17px; font-weight: 600; font-family: var(--font-body); }
.ts-axis-pct { fill: var(--text); font-size: 15px; font-weight: 700; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .ts-axis { font-size: 19px; }
  .ts-axis-pct { font-size: 18px; }
}

.ts-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px var(--space-4); margin-block-start: var(--space-2); font-size: var(--fs-xs); font-weight: 600; }
.ts-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.ts-swatch { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.ts-swatch--main { background: var(--primary-text); }
.ts-swatch--cmp { background: var(--accent); }
.ts-swatch--ring { height: 0; border-block-start: 2px dashed var(--border-strong); }

/* Metrik tablosu */
.ts-side { min-width: 0; }
.ts-metrics { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ts-metrics th, .ts-metrics td { padding: 7px 6px; border-block-end: 1px solid var(--border); text-align: start; vertical-align: middle; }
.ts-metrics thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.ts-metrics tbody th { font-weight: 500; color: var(--text); }
.ts-metrics td.n { text-align: end; white-space: nowrap; }
.ts-metrics__sep th, .ts-metrics__sep td { border-block-start: 2px solid var(--border-strong); }
.ts-pct { display: grid; grid-template-columns: minmax(48px, 1fr) 28px; align-items: center; gap: 8px; min-width: 96px; }
.ts-pct__n { text-align: end; font-weight: 700; }
.ts-bar { position: relative; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--surface3); }
.ts-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; background: var(--prob-2); }
.ts-bar i.p-0 { background: var(--prob-0); }
.ts-bar i.p-1 { background: var(--prob-1); }
.ts-bar i.p-2 { background: var(--prob-2); }
.ts-bar i.p-3 { background: var(--prob-3); }
.ts-note { margin: var(--space-2) 0 0; }

/* Benzer takımlar */
.ts-similar { display: flex; flex-direction: column; gap: 4px; padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
.ts-similar > p { margin: 0 0 var(--space-2); }
.ts-simlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ts-sim { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "team score" "cmp cmp"; align-items: center; gap: 6px var(--space-2); padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-elevated); }
.ts-sim__team { grid-area: team; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.ts-sim__team:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.ts-sim__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ts-sim__text small { font-size: var(--fs-xs); color: var(--muted); }
.ts-sim__score { grid-area: score; font-family: var(--font-display); font-weight: 700; color: var(--primary-text); white-space: nowrap; }
.ts-sim__cmp { grid-area: cmp; justify-self: start; }
.ts-sim__cmp[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }

.ts-method summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); list-style: none; }
.ts-method summary::-webkit-details-marker { display: none; }
.ts-method p { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--text-secondary); max-width: 90ch; }