/* YG3W — Average Score Trend (scoped to monolith modal) */
.yg3x-modal[data-slug="avg-score-trend"] .perf-wrap{ padding:10px 12px 14px; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-tabs{ display:flex; gap:8px; padding:6px 12px 10px; border-bottom:1px solid rgba(17,24,39,0.08); }
.yg3x-modal[data-slug="avg-score-trend"] .perf-tab{ appearance:none;border:none;background:#F3F4F6;color:#111827; border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-tab.is-active{ background:#2563EB; color:#fff; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-panels{ padding:10px 6px 6px; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-rounds{ display:grid; grid-template-columns:1fr; gap:8px; padding:6px 6px 2px; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-round{ background:#fff; border:1px solid rgba(17,24,39,.10); border-radius:12px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-round .left{ display:flex; align-items:center; gap:10px; font-weight:700; color:#111827; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-round .meta{ font-size:12px; color:#6B7280; margin-top:2px; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-round .right{ display:flex; align-items:center; gap:10px; font-weight:800; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-pill{ min-width:40px; height:26px; border-radius:9999px; background:#F3F4F6; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }

.yg3x-modal[data-slug="avg-score-trend"] .perf-diff{ font-weight:800; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-diff.perf-diff-good { color:#059669; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-diff.perf-diff-bad  { color:#DC2626; }

.yg3x-modal[data-slug="avg-score-trend"] .perf-trend{ font-size:14px; font-weight:900; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-trend.good{ color:#059669; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-trend.bad{ color:#DC2626; }

.yg3x-modal[data-slug="avg-score-trend"] .perf-summary{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:8px 6px 10px; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-kpi{ background:#fff; border:1px solid rgba(17,24,39,.10); border-radius:12px; padding:10px; text-align:center; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-kpi .k-title{ color:#6B7280; font-size:12px; margin-bottom:4px; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-kpi .k-value{ color:#111827; font-weight:800; font-size:18px; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-kpi .k-help{ color:#6B7280; font-size:12px; line-height:1.25; margin-top:4px; }

.yg3x-modal[data-slug="avg-score-trend"] .perf-chart{ background:#fff; border:1px solid rgba(17,24,39,.10); border-radius:12px; padding:10px; overflow:auto; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-chart svg{ display:block; width:100%; height:auto; min-width:560px; }

.yg3x-modal[data-slug="avg-score-trend"] .perf-chart .grid { stroke:#E5E7EB; stroke-width:1; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-chart .axis { stroke:#E5E7EB; stroke-width:1; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-chart .axis-label { fill:#6B7280; font-size:11px; text-anchor:end; dominant-baseline:middle; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-chart .baseline{ stroke:#9CA3AF; stroke-width:1.5; stroke-dasharray:4 4; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-chart .series{ fill:none; stroke:#2563EB; stroke-width:2.5; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-chart .point{ fill:#2563EB; stroke:#fff; stroke-width:1.5; }
.yg3x-modal[data-slug="avg-score-trend"] .perf-chart .label{ fill:#111827 !important; font-size:11px; font-weight:800; text-anchor:middle; dominant-baseline:ideographic; paint-order:stroke; stroke:#ffffff; stroke-width:3px; }

@media (min-width:680px){
  .yg3x-modal[data-slug="avg-score-trend"] .perf-rounds{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Make tabs stick to the top of the modal scroll area */
.yg3x-modal .avgtrend-tabs{
  position: sticky;
  top: 0;                 /* sticks within the modal's scroll container */
  z-index: 3;
  background: var(--yg3-surface, #fff);
}

/* Mobile layout: stack KPIs as rows */
@media (max-width: 680px){
  .yg3x-modal .perf-summary{
    grid-template-columns: 1fr;   /* 1 column -> 3 rows */
  }
}