/* ============================================================
   onboarding.css — онбординг спортсмена (задача С1).
   Только переменные платформы (tokens.css), ничего хардкодного.
   ============================================================ */
.onb-wrap { max-width: 760px; margin: 0 auto; }
.onb-top { margin-bottom: var(--space-md); }
.onb-top h1 { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-xs); }
.onb-panel { padding: var(--space-lg); }

.onb-head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.onb-progress { flex: 1 1 auto; height: 6px; border-radius: var(--radius-full);
  background: var(--bg-card); border: 1px solid var(--line); overflow: hidden; }
.onb-progress span { display: block; height: 100%; background: var(--accent-primary);
  border-radius: var(--radius-full); transition: width .25s ease; }

.onb-title { margin: 0 0 var(--space-xs); font-size: 22px; }
.onb-hint { margin-bottom: var(--space-md); }
.onb-body { margin: var(--space-md) 0; }

.onb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm); }
.onb-card { text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-main); font: inherit; transition: border-color .15s, transform .1s; }
.onb-card:hover { border-color: var(--accent-primary); transform: translateY(-1px); }
.onb-card.active { border-color: var(--accent-primary); box-shadow: var(--glow-primary); }
.onb-card b { font-size: 15.5px; }
.onb-card .muted { font-size: 12.5px; }

.onb-days { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-md); }
.onb-day { min-width: 54px; padding: 10px 12px; border-radius: var(--radius-full); cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-card); color: var(--text-muted); font: inherit; font-weight: 600; }
.onb-day.active { background: var(--accent-primary); border-color: var(--accent-primary); color: #fff; }

.onb-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.onb-field { flex: 1 1 200px; }

.onb-foot { display: flex; align-items: center; gap: var(--space-sm);
  margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); }

.onb-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-sm); }
.onb-sum { display: flex; flex-direction: column; padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.onb-sum .muted { font-size: 12px; }

.onb-result { padding: var(--space-lg); }
.onb-result-h { display: flex; align-items: center; gap: var(--space-sm); font-size: 17px; margin-bottom: var(--space-sm); }
.onb-result-b { display: flex; flex-direction: column; gap: var(--space-xs); }
.onb-next { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--accent-primary);
  background: var(--bg-card); border-radius: var(--radius-sm); }
.onb-result-f { display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }

@media (max-width: 640px) {
  .onb-panel, .onb-result { padding: var(--space-md); }
  .onb-cards { grid-template-columns: 1fr; }
  .onb-foot { flex-wrap: wrap; }
}