/* === page-analysts.css — Market Analysts Page (Light) === */

/* Price Index */
.pi-controls {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.pi-controls .field {
  min-width: 140px;
}

.pi-controls > button {
  align-self: flex-end;
  margin-bottom: 1px;
}

.pi-current {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-200);
}

.pi-value {
  font-size: var(--text-3xl);
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--primary-400);
}

.pi-badge {
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

.pi-badge.up {
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}

.pi-badge.down {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

/* YoY Comparison */
.yoy-controls {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.yoy-controls .field {
  min-width: 140px;
}

.yoy-controls > button {
  align-self: flex-end;
  margin-bottom: 1px;
}

.yoy-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.yoy-card {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-xs);
}

.yoy-card .yoy-year {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--neutral-800);
  margin-bottom: var(--space-3);
  text-align: center;
  font-family: var(--font-mono);
}

.yoy-stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-sm);
}

.yoy-stat-row:last-child { border-bottom: none; }

.yoy-stat-label { color: var(--neutral-400); }
.yoy-stat-value { font-weight: 700; color: var(--primary-400); font-family: var(--font-mono); }

.yoy-change-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2);
  border: 1px solid var(--neutral-200);
}

.yoy-change-label { font-size: var(--text-sm); color: var(--neutral-500); }
.yoy-change-value { font-weight: 700; font-size: var(--text-base); font-family: var(--font-mono); }
.yoy-change-value.up { color: var(--success); }
.yoy-change-value.down { color: var(--danger); }

.analysis-cell {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-xs);
}

.analysis-cell h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
  color: var(--neutral-800);
}

.analysis-cell .chart-wrapper {
  height: 260px;
}

/* Advanced filters */
.adv-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.adv-filters .field select,
.adv-filters .field input {
  width: 100%;
}


@media (max-width: 900px) {
  .yoy-results {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .analysis-cell .chart-wrapper {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .adv-filters {
    grid-template-columns: 1fr;
  }

  .yoy-controls,
  .pi-controls {
    flex-direction: column;
  }

  .yoy-controls .field,
  .pi-controls .field {
    min-width: 0;
    width: 100%;
  }

  .yoy-controls > button,
  .pi-controls > button {
    width: 100%;
  }

  .pi-current {
    flex-direction: column;
    text-align: center;
  }

  .pi-value {
    font-size: var(--text-2xl);
  }

}