/* Progress-over-time chart card. Sits on the wider (2/3) side of the
   overview row — the plot itself is the protagonist, so the header is
   compressed into one tidy row of title + legend chips + range toggle
   and the canvas gets a generous fixed height. */

.progress-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1.25rem;
  border-radius: 18px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-card);
}

.progress-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.progress-card-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.progress-card-legend {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-right: auto;
}

.progress-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.07);
  letter-spacing: 0.01em;
}

.progress-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
}

.progress-legend-chip.is-mastered .progress-legend-dot { background: #10B981; }
.progress-legend-chip.is-level    .progress-legend-dot { background: #6366F1; }
.progress-legend-chip.is-time     .progress-legend-dot { background: #94A3B8; }

.progress-card-range {
  display: inline-flex;
  padding: 0.18rem;
  border-radius: 10px;
  background: #F1F5F9;
  border: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
}

.progress-range-btn {
  padding: 0.28rem 0.7rem;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  transition: background-color 150ms ease, color 150ms ease;
}

.progress-range-btn:hover:not(.is-active) { background: rgba(255, 255, 255, 0.7); }

.progress-range-btn.is-active {
  background: var(--color-brand-500);
  color: white;
  box-shadow: 0 4px 10px -6px rgba(21, 101, 192, 0.6);
}

.progress-card-canvas {
  position: relative;
  height: 20rem;
  margin: 0 -0.25rem;
}

@media (min-width: 1024px) {
  .progress-card-canvas { height: 22rem; }
}

.progress-card-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}