/* Chart-specific Styles */

.concentration-chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Grid lines */
.grid-lines line {
  stroke: var(--color-grid);
  stroke-width: 1;
}

/* Path styles */
.path-historical {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-cache {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-sell {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.path-hold {
  fill: none;
  stroke: var(--color-orange);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Area fills */
.area-historical {
  opacity: 0.6;
}

.area-cache {
  opacity: 0.4;
}

/* Decision point */
.decision-point-line {
  stroke: var(--color-gold);
  stroke-width: 1;
  opacity: 0.8;
}

.decision-point-dot {
  fill: var(--color-white);
  stroke: var(--color-bg);
  stroke-width: 2;
}

.decision-point-glow {
  fill: none;
  stroke: var(--color-grid);
  opacity: 0.3;
}

/* Endpoint dots */
.endpoint-dot {
  fill: var(--color-white);
  stroke: var(--color-bg);
  stroke-width: 2;
}

/* Labels */
.path-label {
  font-family: 'Lausanne', sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.path-label-cache {
  fill: var(--color-gold);
}

.path-label-sell {
  fill: var(--color-blue);
}

.path-label-hold {
  fill: var(--color-orange);
}

.path-value {
  font-family: 'Lausanne', sans-serif;
  font-weight: 700;
  font-size: 22px;
  fill: var(--color-white);
}

.decision-label {
  font-family: 'Lausanne', sans-serif;
  font-weight: 400;
  font-size: 14px;
  fill: var(--color-text-secondary);
}

/* Avatar styles */
.avatar-container {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.avatar-container:hover {
  transform: scale(1.05);
}

.avatar-image {
  clip-path: circle(50%);
}

.avatar-ring {
  fill: none;
  stroke-width: 3;
}

.avatar-ring-cream {
  stroke: #E8DCC8;
}

.avatar-ring-blue {
  stroke: #7EB5D6;
}

/* Orbit path */
.orbit-path {
  fill: none;
  stroke: var(--color-gold);
  stroke-width: 2;
  stroke-dasharray: 4 6;
  opacity: 0.6;
}

/* Ticker badge in SVG */
.ticker-badge-rect {
  fill: transparent;
  stroke: var(--color-orange);
  stroke-width: 1;
  rx: 4;
}

.ticker-badge-text {
  font-family: 'Lausanne', sans-serif;
  font-weight: 600;
  font-size: 11px;
  fill: var(--color-orange);
}

/* Animation states */
.hidden {
  opacity: 0;
  pointer-events: none;
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Pulse animation for decision point glow */
@keyframes pulse {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
}

.glow-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Pulsing dot animations are handled by D3 transitions in ConcentrationChart.js */