/* Public, illustrative preview. Isolated from the older dashboard mockup. */
.trainer-progress-sample {
  --tps-paper: #fffaf4;
  --tps-ink: #3d2b1f;
  --tps-muted: #765d4b;
  --tps-line: #e7d9c9;
  --tps-good: #987044;
  --tps-repeat: #eed7c2;
  box-sizing: border-box;
  width: 100%;
  max-width: 430px;
  min-width: 0;
  margin: 0;
  padding: 24px;
  justify-self: center;
  border-radius: 16px;
  background: var(--tps-paper);
  color: var(--tps-ink);
  box-shadow: 0 12px 28px #140b0738, inset 0 2px 2px #fff;
  font: 400 13px/1.5 Manrope, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.trainer-progress-sample * { box-sizing: border-box; }
.trainer-progress-sample ::selection { color: #fffaf4; background: #765334; }
.trainer-progress-sample .tps-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 22px;
}
.trainer-progress-sample .tps-heading h3 {
  margin: 0;
  font: 750 23px/1.25 Manrope, sans-serif;
  text-transform: none;
  letter-spacing: -.025em;
  color: var(--tps-ink);
}
.trainer-progress-sample .tps-heading > span { color: var(--tps-muted); font-size: 12px; }
.trainer-progress-sample .tps-metrics {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--tps-line);
}
.trainer-progress-sample .tps-metrics > div { min-width: 0; }
.trainer-progress-sample .tps-metrics dt { color: var(--tps-muted); font-size: 12px; }
.trainer-progress-sample .tps-metrics dd { margin: 5px 0 2px; font-size: 29px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.trainer-progress-sample .tps-metrics dd > span { font-size: 20px; color: var(--tps-muted); font-weight: 600; }
.trainer-progress-sample .tps-metrics small { color: var(--tps-muted); font-size: 11px; }
.trainer-progress-sample .tps-chart { margin-top: 21px; }
.trainer-progress-sample .tps-section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
.trainer-progress-sample .tps-section-heading h4 { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 750; color: var(--tps-ink); }
.trainer-progress-sample .tps-section-heading > span { color: var(--tps-muted); font-size: 10px; }
.trainer-progress-sample .tps-chart-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 9px; font-size: 10px; color: var(--tps-muted); }
.trainer-progress-sample .tps-chart-legend > span { display: inline-flex; gap: 5px; align-items: center; }
.trainer-progress-sample .tps-chart-legend i { display: block; width: 9px; height: 9px; border-radius: 2px; }
.trainer-progress-sample .tps-correct-key { background: var(--tps-good); }
.trainer-progress-sample .tps-repeat-key { background: var(--tps-repeat); }
.trainer-progress-sample .tps-plot { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; align-items: end; margin-top: 10px; }
.trainer-progress-sample .tps-axis { display: flex; flex-direction: column; justify-content: space-between; height: 106px; margin-bottom: 19px; font-size: 10px; line-height: 10px; color: var(--tps-muted); }
.trainer-progress-sample .tps-guides { position: absolute; height: 97px; bottom: 24px; right: 0; left: 23px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.trainer-progress-sample .tps-guides i { border-top: 1px solid var(--tps-line); }
.trainer-progress-sample .tps-weeks { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.trainer-progress-sample .tps-week { display: flex; flex-direction: column; align-items: center; justify-content: end; min-width: 0; height: 150px; }
.trainer-progress-sample .tps-week > strong { margin-bottom: 5px; font-size: 13px; line-height: 18px; }
.trainer-progress-sample .tps-week > strong > span { color: var(--tps-muted); font-size: 11px; font-weight: 500; }
.trainer-progress-sample .tps-bar { display: flex; flex-direction: column; width: min(36px, 100%); height: calc(var(--tps-total) * 12px); overflow: hidden; border-radius: 6px 6px 0 0; }
.trainer-progress-sample .tps-bar i { display: block; flex: none; }
.trainer-progress-sample .tps-bar-errors { height: calc(var(--tps-errors) * 12px); background: var(--tps-repeat); }
.trainer-progress-sample .tps-bar-correct { height: calc(var(--tps-correct) * 12px); background: var(--tps-good); }
.trainer-progress-sample .tps-week-label { margin-top: 8px; font-size: 10px; line-height: 16px; color: var(--tps-muted); white-space: nowrap; }
.trainer-progress-sample .tps-topics { margin-top: 20px; padding-top: 19px; border-top: 1px solid var(--tps-line); }
.trainer-progress-sample .tps-topics ul { display: grid; gap: 10px; padding: 0; margin: 12px 0 0; list-style: none; }
.trainer-progress-sample .tps-topics li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: 12px; }
.trainer-progress-sample .tps-topic-track { display: block; height: 6px; border-radius: 3px; overflow: hidden; background: var(--tps-repeat); }
.trainer-progress-sample .tps-topic-track > i { display: block; height: 100%; border-radius: inherit; background: var(--tps-good); }
.trainer-progress-sample .tps-topics li > strong { text-align: right; font-size: 12px; white-space: nowrap; }
.trainer-progress-sample .tps-topics li > strong > span { color: var(--tps-muted); font-weight: 500; }
.trainer-progress-sample .tps-next { display: grid; gap: 4px; margin-top: 21px; padding: 13px 15px; background: #f0e3d2; border-radius: 10px; }
.trainer-progress-sample .tps-next > span { font-size: 10px; color: var(--tps-muted); }
.trainer-progress-sample .tps-next > strong { font-size: 12px; font-weight: 700; }
.trainer-progress-sample > figcaption { margin-top: 16px; color: var(--tps-muted); font-size: 10px; line-height: 1.6; }
@media (min-width: 900px) {
  .trainer-repeat > .trainer-progress-sample { justify-self: end; }
}
@media (max-width: 620px) {
  .trainer-progress-sample { padding: 20px; }
  .trainer-progress-sample .tps-heading h3 { font-size: 22px; }
  .trainer-progress-sample .tps-topics li { grid-template-columns: 85px minmax(0, 1fr) 37px; gap: 9px; }
}