/* Progress */

.progress-screen__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 12px;
  margin: 0;
}
.progress-screen__stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column-reverse; /* value above label; dt stays first in the markup */
  justify-content: flex-end;
  gap: 2px;
}
.progress-screen__stat-label { font-size: 14px; color: var(--text-body); }
.progress-screen__stat-value { margin: 0; font-size: 42px; line-height: 1; }

.progress-screen__panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.progress-screen__title { margin: 0; font-size: 15px; font-weight: 600; }
.progress-screen__note { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Activity heatmap: 5 weeks × 7 days, darker = more activity. */
.progress-screen__heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.progress-screen__day { aspect-ratio: 1; border-radius: 6px; background: var(--line-soft); }
.progress-screen__day--1 { background: color-mix(in srgb, var(--green) 15%, var(--green-soft)); }
.progress-screen__day--2 { background: color-mix(in srgb, var(--green) 45%, var(--green-soft)); }
.progress-screen__day--3 { background: color-mix(in srgb, var(--green) 85%, var(--green-soft)); }
.progress-screen__day--4 { background: var(--green); }

/* Word mastery: one bar per SRS stage; --h is 0–100 (% of the tallest). */
.progress-screen__bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.progress-screen__bar-col {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.progress-screen__bar-count { font-size: 13px; font-weight: 600; }
.progress-screen__bar-label { font-size: 12px; color: var(--text-muted); }
.progress-screen__bar {
  --h: 0;
  width: 100%;
  height: calc(var(--h) * 1px);
  min-height: 2px;
  border-radius: 6px 6px 0 0;
}
.progress-screen__bar--0 { background: color-mix(in srgb, var(--clay) 30%, var(--card)); }
.progress-screen__bar--1 { background: color-mix(in srgb, var(--clay) 55%, var(--card)); }
.progress-screen__bar--2 { background: var(--gold); }
.progress-screen__bar--3 { background: color-mix(in srgb, var(--green) 45%, var(--green-soft)); }
.progress-screen__bar--4 { background: color-mix(in srgb, var(--green) 85%, var(--green-soft)); }
.progress-screen__bar--5 { background: var(--green); }

/* Weekly leaderboard */
.progress-screen__board { display: flex; flex-direction: column; gap: 6px; }
.progress-screen__circle { font-size: 13px; color: var(--text-muted); }
.progress-screen__ranks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.progress-screen__rank {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 15px;
}
.progress-screen__rank.is-you { background: var(--clay-soft); font-weight: 700; }
.progress-screen__rank-n { width: 20px; font-weight: 700; color: var(--text-muted); }
.progress-screen__rank-v { font-size: 20px; font-weight: 400; }
.progress-screen__hidden { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-body); }

/* Practice: one tile per kind of exercise. */
.progress-screen__practice { grid-column: 1 / -1; }
.progress-screen__practice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 10px;
}
.progress-screen__practice-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.progress-screen__practice-item:hover { text-decoration: none; color: var(--ink); background: var(--green-soft); }
.progress-screen__practice-value { font-size: 32px; line-height: 1; }
.progress-screen__practice-label { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.progress-screen__practice-label strong { display: block; color: var(--ink); font-size: 14px; }