repo-wrapped 0.0.7 → 0.0.9

package/dist/generators/html/styles/strategic-insights.css

@@ -0,0 +1,1337 @@
+/* Lead Developer Insights Styles */
+
+/* ===== Velocity Section ===== */
+.velocity-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.velocity-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.velocity-stat-card {
+  /* Inherits most properties from stat-card-base when both classes are applied */
+  /* Standalone styles for backward compatibility */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast);
+}
+
+.velocity-stat-card:hover {
+  border-color: var(--border-emphasis);
+}
+
+.velocity-stat-card .stat-icon {
+  font-size: 32px;
+  line-height: 1;
+}
+
+.velocity-stat-card .stat-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.velocity-stat-card .stat-label {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--spacing-xs);
+}
+
+.velocity-stat-card .stat-value {
+  font-size: 24px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.velocity-stat-card .stat-value.positive { color: var(--accent-green-light); }
+.velocity-stat-card .stat-value.negative { color: var(--status-danger); }
+.velocity-stat-card .stat-value.neutral { color: var(--text-secondary); }
+
+.velocity-stat-card .stat-detail {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.velocity-chart-container {
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--border-default);
+  margin-bottom: var(--spacing-lg);
+}
+
+.velocity-chart-container h3 {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+}
+
+.velocity-chart {
+  width: 100%;
+  height: auto;
+  max-height: 250px;
+}
+
+.velocity-chart .grid-line {
+  stroke: var(--border-color);
+  stroke-width: 1;
+}
+
+.velocity-chart .axis-label {
+  fill: var(--text-muted);
+  font-size: 10px;
+}
+
+.velocity-chart .legend-label {
+  fill: var(--text-primary);
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.velocity-chart .anomaly-marker {
+  cursor: pointer;
+  transition: r 0.2s ease;
+}
+
+.velocity-chart .anomaly-marker:hover {
+  r: 8;
+}
+
+.anomalies-section {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+}
+
+.anomalies-section h3 {
+  margin-top: 0;
+}
+
+.anomalies-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.anomaly-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 8px;
+  background: var(--bg-color);
+}
+
+.anomaly-item.critical {
+  border-left: 3px solid var(--status-danger);
+}
+
+.anomaly-item.warning {
+  border-left: 3px solid var(--accent-orange-light);
+}
+
+.anomaly-icon {
+  font-size: 1.25rem;
+}
+
+.anomaly-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.anomaly-type {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.anomaly-date {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+
+.anomaly-change {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.anomaly-causes {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+
+/* ===== Gap Section ===== */
+.gap-section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.gap-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-lg);
+}
+
+.gap-stat-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md);
+  background: var(--bg-primary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  transition: border-color var(--transition-fast);
+}
+
+.gap-stat-card:hover {
+  border-color: var(--border-emphasis);
+}
+
+.gap-stat-card.risk-card {
+  border-left: 4px solid var(--risk-color);
+}
+
+.gap-stat-card .stat-icon {
+  font-size: 32px;
+  line-height: 1;
+}
+
+.gap-stat-card .stat-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.gap-stat-card .stat-label {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: var(--font-weight-medium);
+  margin-bottom: var(--spacing-xs);
+}
+
+.gap-stat-card .stat-value {
+  font-size: 24px;
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin-bottom: var(--spacing-xs);
+}
+
+.gap-stat-card .stat-detail {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.gap-stat-card .stat-value.risk-low { color: var(--accent-green-light); }
+.gap-stat-card .stat-value.risk-medium { color: var(--status-warning); }
+.gap-stat-card .stat-value.risk-high { color: var(--accent-orange); }
+.gap-stat-card .stat-value.risk-critical { color: var(--status-danger); }
+
+.risk-factors {
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  border: 1px solid var(--border-default);
+  margin-bottom: var(--spacing-lg);
+}
+
+.risk-factors h4 {
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+.risk-factors ul {
+  margin: 0;
+  padding-left: 1.25rem;
+}
+
+.risk-factors li {
+  margin-bottom: var(--spacing-xs);
+  font-size: var(--font-size-sm);
+}
+
+.gap-timeline-container {
+  background: var(--bg-primary);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--border-default);
+  margin-bottom: var(--spacing-lg);
+}
+
+.gap-timeline-container h3 {
+  margin-top: 0;
+}
+
+.no-gaps-message {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: rgba(105, 219, 124, 0.1);
+  border-radius: 8px;
+  color: var(--accent-green-light);
+}
+
+.gap-timeline {
+  margin: 1rem 0;
+}
+
+.timeline-track {
+  position: relative;
+  height: 40px;
+  background: var(--bg-color);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.gap-segment {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.gap-segment:hover {
+  opacity: 1;
+}
+
+.gap-segment.blocker { background: var(--status-danger); }
+.gap-segment.vacation { background: #4dabf7; }
+.gap-segment.holiday { background: var(--accent-green-light); }
+.gap-segment.unknown { background: #868e96; }
+
+.timeline-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.timeline-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 1rem;
+  font-size: 0.8rem;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+}
+
+.legend-color.blocker { background: var(--status-danger); }
+.legend-color.vacation { background: #4dabf7; }
+.legend-color.holiday { background: var(--accent-green-light); }
+.legend-color.unknown { background: #868e96; }
+
+.gaps-list-section {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+}
+
+.gaps-list-section h3 {
+  margin-top: 0;
+}
+
+.gaps-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.gap-item {
+  padding: 1rem;
+  background: var(--bg-color);
+  border-radius: 8px;
+}
+
+.gap-item-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.gap-type-icon {
+  font-size: 1.25rem;
+}
+
+.gap-duration {
+  font-weight: 700;
+  font-size: 1.1rem;
+}
+
+.gap-type-badge {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.gap-type-badge.blocker { background: rgba(255, 107, 107, 0.2); color: var(--status-danger); }
+.gap-type-badge.vacation { background: rgba(77, 171, 247, 0.2); color: #4dabf7; }
+.gap-type-badge.holiday { background: rgba(105, 219, 124, 0.2); color: var(--accent-green-light); }
+.gap-type-badge.unknown { background: rgba(134, 142, 150, 0.2); color: #868e96; }
+
+.gap-dates {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.gap-context {
+  font-size: 0.8rem;
+}
+
+.context-item {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.context-label {
+  color: var(--text-muted);
+  min-width: 45px;
+}
+
+.context-message {
+  color: var(--text-color);
+  font-style: italic;
+}
+
+/* ===== Comparison Section ===== */
+.comparison-section {
+  margin-bottom: 2rem;
+}
+
+.comparison-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.period-label {
+  text-align: center;
+  padding: 1rem 1.5rem;
+  border-radius: var(--radius-xl);
+  background: var(--card-bg);
+  border: 2px solid var(--border-color);
+}
+
+.period-label.period-1 {
+  border-color: var(--accent-color);
+}
+
+.period-label.period-2 {
+  border-color: var(--accent-orange-light);
+}
+
+.period-name {
+  display: block;
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-bottom: 0.25rem;
+}
+
+.period-dates {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.vs-divider {
+  font-weight: 700;
+  font-size: 1.25rem;
+  color: var(--text-muted);
+}
+
+.comparison-summary {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1rem 1.5rem;
+  border: 1px solid var(--border-color);
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.comparison-summary p {
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.comparison-card {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.card-emoji {
+  font-size: 1.25rem;
+}
+
+.card-label {
+  font-weight: 600;
+}
+
+.card-values {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.value-box {
+  flex: 1;
+  text-align: center;
+  padding: 0.5rem;
+  border-radius: 8px;
+  background: var(--bg-color);
+}
+
+.value-box .value {
+  font-weight: 700;
+  font-size: 1.25rem;
+}
+
+.value-box.period-1 {
+  border-bottom: 2px solid var(--accent-color);
+}
+
+.value-box.period-2 {
+  border-bottom: 2px solid var(--accent-orange-light);
+}
+
+.change-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+}
+
+.change-arrow {
+  font-size: 1.25rem;
+}
+
+.change-percent {
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.change-indicator.positive { color: var(--accent-green-light); }
+.change-indicator.negative { color: var(--status-danger); }
+.change-indicator.neutral { color: var(--text-muted); }
+
+.type-distribution-comparison {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+}
+
+.type-distribution-comparison h3 {
+  margin-top: 0;
+}
+
+.distribution-legend {
+  display: flex;
+  gap: 2rem;
+  margin-bottom: 1rem;
+  font-size: 0.85rem;
+}
+
+.distribution-legend .period-1::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: var(--accent-color);
+  border-radius: 2px;
+  margin-right: 0.5rem;
+}
+
+.distribution-legend .period-2::before {
+  content: '';
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: var(--accent-orange-light);
+  border-radius: 2px;
+  margin-right: 0.5rem;
+}
+
+.type-bars-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.type-row {
+  display: grid;
+  grid-template-columns: 80px 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+
+.type-label {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.type-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.bar-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 18px;
+}
+
+.bar-container .bar {
+  height: 100%;
+  border-radius: 4px;
+  min-width: 2px;
+  transition: width 0.3s ease;
+}
+
+.bar-container .bar-value {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+/* ===== Executive Summary Section ===== */
+.executive-summary-section {
+  margin-bottom: 2rem;
+}
+
+.executive-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.executive-header h2 {
+  margin: 0;
+}
+
+.summary-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-size: 0.85rem;
+}
+
+.summary-meta .repo-name {
+  font-weight: 600;
+}
+
+.summary-meta .period {
+  color: var(--text-muted);
+}
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.kpi-card {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  position: relative;
+  overflow: hidden;
+}
+
+.kpi-status-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: var(--status-color);
+}
+
+.kpi-content {
+  padding-left: 0.5rem;
+}
+
+.kpi-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 0.25rem;
+}
+
+.kpi-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.kpi-trend {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.85rem;
+}
+
+.kpi-trend.positive { color: var(--accent-green-light); }
+.kpi-trend.negative { color: var(--status-danger); }
+.kpi-trend.neutral { color: var(--text-muted); }
+
+.kpi-benchmark {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+
+.insights-risks-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.insights-column,
+.risks-column {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+}
+
+.insights-column h3,
+.risks-column h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.insights-list,
+.risks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.insight-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.5rem;
+  border-radius: 8px;
+  background: var(--bg-color);
+}
+
+.insight-icon {
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.insight-text {
+  font-size: 0.9rem;
+  line-height: 1.4;
+}
+
+.risk-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 8px;
+  background: var(--bg-color);
+}
+
+.risk-badge {
+  font-size: 0.65rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-weight: 700;
+  flex-shrink: 0;
+  height: fit-content;
+}
+
+.risk-item.low .risk-badge { background: rgba(105, 219, 124, 0.2); color: var(--accent-green-light); }
+.risk-item.medium .risk-badge { background: rgba(255, 212, 59, 0.2); color: var(--status-warning); }
+.risk-item.high .risk-badge { background: rgba(255, 107, 107, 0.2); color: var(--status-danger); }
+
+.risk-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.risk-category {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.risk-description {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.no-risks {
+  color: var(--accent-green-light);
+  font-size: 0.9rem;
+  padding: 0.5rem;
+}
+
+.recommendations-section {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+  margin-bottom: 1rem;
+}
+
+.recommendations-section h3 {
+  margin-top: 0;
+}
+
+.recommendations-list {
+  margin: 0;
+  padding-left: 1.5rem;
+}
+
+.recommendations-list li {
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+}
+
+.summary-footer {
+  text-align: right;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+/* ===== Team Section ===== */
+.team-section {
+  margin-bottom: 2rem;
+}
+
+.team-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.team-stat-card {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.25rem;
+  text-align: center;
+  border: 1px solid var(--border-color);
+}
+
+.team-stat-card .stat-value {
+  display: block;
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--accent-green-light);
+}
+
+.team-stat-card .stat-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 0.25rem;
+}
+
+/* Load Distribution */
+.load-distribution {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  border: 1px solid var(--border-color);
+}
+
+.load-distribution h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.gini-container {
+  margin-bottom: 1rem;
+}
+
+.gini-bar-bg {
+  height: 12px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.gini-bar {
+  height: 100%;
+  border-radius: 6px;
+  transition: width 0.3s ease;
+}
+
+.gini-bar.balanced { background: var(--accent-green-light); }
+.gini-bar.moderate { background: #fcc419; }
+.gini-bar.imbalanced { background: var(--status-danger); }
+
+.gini-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gini-value {
+  font-weight: 600;
+  font-size: 1rem;
+}
+
+.gini-assessment {
+  padding: 0.25rem 0.75rem;
+  border-radius: 20px;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.gini-assessment.balanced { background: rgba(105, 219, 124, 0.2); color: var(--accent-green-light); }
+.gini-assessment.moderate { background: rgba(252, 196, 25, 0.2); color: #fcc419; }
+.gini-assessment.imbalanced { background: rgba(255, 107, 107, 0.2); color: var(--status-danger); }
+
+.gini-explanation {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+/* Member Breakdown */
+.member-breakdown {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  margin-bottom: 2rem;
+  border: 1px solid var(--border-color);
+}
+
+.member-breakdown h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.member-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.member-card {
+  display: grid;
+  grid-template-columns: 40px 1fr 200px auto auto;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+}
+
+.member-rank {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.member-info {
+  min-width: 0;
+}
+
+.member-name {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.member-areas {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  flex-wrap: wrap;
+}
+
+.area-tag {
+  font-size: 0.7rem;
+  padding: 0.125rem 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: var(--text-muted);
+}
+
+.member-bar-container {
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.member-bar {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-green-light), #40c057);
+  border-radius: 4px;
+}
+
+.member-stats {
+  text-align: right;
+  white-space: nowrap;
+}
+
+.member-commits {
+  font-weight: 700;
+  font-size: 1rem;
+}
+
+.member-percentage {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-left: 0.25rem;
+}
+
+.member-quality {
+  text-align: center;
+}
+
+.quality-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  background: rgba(105, 219, 124, 0.2);
+  color: var(--accent-green-light);
+  border-radius: 4px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+/* Team Insights */
+.team-insights {
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+}
+
+.team-insights h3 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.insights-list {
+  list-style: none;
+  padding: var(--spacing-md);
+  margin: 0;
+}
+
+.insight-item {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.insight-item:last-child {
+  margin-bottom: 0;
+}
+
+/* Responsive for team section */
+@media (max-width: 768px) {
+  .member-card {
+    grid-template-columns: 30px 1fr;
+    grid-template-rows: auto auto auto;
+    gap: 0.5rem;
+  }
+  
+  .member-bar-container {
+    grid-column: 1 / -1;
+  }
+  
+  .member-stats,
+  .member-quality {
+    grid-column: 2;
+  }
+}
+
+/* ===== Events Section ===== */
+.events-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.events-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border-color);
+}
+
+.events-legend .legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.events-legend .legend-item .event-icon {
+  font-size: 1rem;
+}
+
+.events-legend .legend-item .legend-label {
+  color: var(--text-muted);
+  text-transform: capitalize;
+}
+
+.events-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.events-summary .summary-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 1rem 1.5rem;
+  background: var(--card-bg);
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--border-color);
+  min-width: 100px;
+}
+
+.events-summary .stat-value {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.events-summary .stat-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: capitalize;
+}
+
+.events-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.event-card {
+  padding: 1.25rem 1.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-left: 4px solid var(--event-color, #6b7280);
+  border-radius: 0 12px 12px 0;
+  transition: background 0.2s ease;
+}
+
+.event-card:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.event-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.event-header .event-icon {
+  font-size: 1.25rem;
+}
+
+.event-date {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+.event-type-badge {
+  font-size: 0.7rem;
+  padding: 0.2rem 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.event-label {
+  font-weight: 600;
+  font-size: 1.1rem;
+  line-height: 1.4;
+}
+
+.event-description {
+  margin-top: 0.5rem;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+.event-correlation {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.correlation-metrics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.correlation-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.correlation-metric .metric-label {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.correlation-metric .metric-value {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.correlation-metric.positive { 
+  background: rgba(16, 185, 129, 0.15);
+}
+.correlation-metric.positive .metric-value { 
+  color: #10b981; 
+}
+
+.correlation-metric.negative { 
+  background: rgba(239, 68, 68, 0.15);
+}
+.correlation-metric.negative .metric-value { 
+  color: #ef4444; 
+}
+
+.correlation-assessment {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.correlation-assessment .assessment-icon {
+  flex-shrink: 0;
+}
+
+/* Responsive for events section */
+@media (max-width: 768px) {
+  .events-legend {
+    gap: 0.75rem;
+    padding: 0.75rem;
+  }
+  
+  .events-legend .legend-item {
+    font-size: 0.8rem;
+  }
+  
+  .events-summary {
+    flex-direction: column;
+  }
+  
+  .events-summary .summary-stat {
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+  }
+  
+  .correlation-metrics {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .correlation-metric {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}