/* Insights page styles - minimal, leveraging base.css */
.hero-section {
  padding-top: var(--space-20);
}
.hero-media { margin-top: var(--space-6); }

.search { position: relative; }
.search input {
  background-color: var(--color-bg-elevated);
}

/* Cards grid spacing is handled by utilities; add subtle hover focus accents */
.card .card-footer .btn { margin-right: var(--space-3); }

/* Chart */
.chart { --bar-height: 44px; }
.chart-row { display: flex; align-items: center; padding: var(--space-3) 0; }
.bar {
  --bar: 50%;
  position: relative;
  height: var(--bar-height);
  width: 100%;
  background: linear-gradient(90deg, var(--color-primary-glow), transparent 80%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inner);
  overflow: hidden;
}
.bar::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--bar);
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-bronze) 100%);
  box-shadow: var(--shadow-glow);
  transition: width var(--transition-base);
}
.bar-label {
  position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%);
  font-weight: var(--font-weight-semibold);
}
.bar-value {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  color: var(--color-text-inverse);
  background: rgba(0,0,0,0.25);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
}

.chart-controls .btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}

@media (max-width: 768px) {
  .bar { --bar-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .bar::after { transition: none; }
}